sábado, 9 de março de 2013

Tuto - Estrutura html básica

Olá minna!! antes de iniciar o post de hoje,um aviso,antes o "sistema" do blog era postar dia sim dia não,agora será 2 dias não,1 dia sim e assim por diante.Assim fica mais fácil para mim por em ordem minha vidinha escolar ><.
Html e Css são estruturas essenciais de uma página na web,eu estou aprendendo a montar um do zero,na minha aula técnica de FUWI (Fundamentos Web e Internet)
a estrutura básica é essa:
Baixem o programa notepad++,para treinar ;) (ele é leve e grátis)
símbolo da notepad++ '-'

<"DOCTYPE html> (tipo de documento)

<html lang+"pt-br"> (informa o idioma)

<head> (cabeçalho)
<meta charset="UTF"-8 /> (não faz parte da estrutura básica porém,seu uso é recomendado,já que ele evita que caracteres com acentos fica estranhos,tipo,não= n&jaso)

<title> Título </title> (Isso é o título que vai na barra do navegador,não no texto)

</head>
<body>  (aqui vai o conteúdo)
Exemplo
Oi minna!
</body>

<html> (fim do "arquivo")




Essa é a estrutura bruta,sem cor,sem tamanhos diferentes sem nada '-'

no html,a tecla enter não é lida,ou seja,quando se da enter é como se nada tivesse mudado,para olocar espaço é preciso usar <br /> "br~espaço/ sem o espaço não funciona,ok?

Para parágrafos: <p>
Letra maior: h1
Para deixar melhorzinho,vamos usar o CSS,que é o que dá a aparência.
coloque depois do head,assim:

<head>

<title> Título </title>

<style type="text/css">
h1{color:red;
text-align:center;
font-family:calibri;
}
</head>

<body>

<h1>Exemplo </h1>

<p>Oi minna! </p>

</body>
<html>

Fim do tuto >///<
OBS:antes de visualizar salve;para salvar seu documento vai aparecer lá para renomear e embaixo, Selecionar tipo,tem que ser esse:

fica assim no notepad++:


e assim no navegador:




Para executar no navegador vá na barra de menus no notepad e clique em executar,em seguida escolha o navegador de sua preferência!
Espero ter ajudado em alguma coisa,até agora foi isso que eu aprendi,em pouquísimas aulas de FUWI '-'


2 comentários:

  1. ADOREI *U* muito útil o tuto x3 acho que baixar o notepad++ pra ver como é~ muito bom o post Aline-chan, continue com esse maravilhoso blog! x333

    ResponderExcluir
    Respostas
    1. *u* awn...obg,eu pretendo continuar ensinando o que eu aprendo na escola,mas o tempo me falta :\
      arigatou por comentar o/

      Excluir