Ir para conteúdo

Aula 4 - Estrutura da página, cabeçalho, corpo, charset, destacando texto

Lordfire

Por Lordfire
em Tutoriais de Websites

 Share

Posts Recomendados

Lordfire

Lordfire 309

Postado
Postado

Essa quarta aula saiu mais rápido hehe. Acompanhe as outras: http://www.xtibia.com/forum/topic/206568-aula-3-tabelas-linhas-e-celulas-legendas/

 

Até agora eu ensinei um HTML bem básico, só para texto corrido. Uma página HTML para a web precisa de uma estrutura com cabeçalho e corpo (que não é a mesma coisa do h1 até h6!). Também vou ensinar como se destaca texto com negrito e itálico.

 

Estrutura básica

A tag mais importante é a <html>. Ela deve ser aberta no início do arquivo e fechada na última linha, para indicar que tudo dentro dela é texto HTML. Ela é dividida em duas grandes partes: <head> e <body>, respectivamente o cabeçalho e o corpo da página. Portanto, seria assim:

<html>
   <head>
    (cabeçalho)
   </head>
   <body>
    (corpo da página)
   </body>
</html>

 

Cabeçalho

O cabeçalho é uma parte que não fica visível, e contém informações sobre a página. Essas informações podem ser: meta tags, que são etiquetas que descrevem o conteúdo do seu site (que são usadas, por exemplo, pelo google); title, que é o título da página que é mostrado no navegador; links para arquivos que devem ser incluídos, como folhas de estilo CSS; ou até style, para usar CSS na própria página, sem um arquivo externo; e, por último, script, para códigos interativos em Javascript.

 

Título

O título fica na tag <title> e o texto dentro dela fica escrito no navegador:

<head>
   <title>XTibia</title>
</head>
<body>
   <p>Corpo da página</p>
</body>

dnqmyT0.jpg

 

Meta tags

As meta tags são muito importantes para descrever sua página. Elas podem conter o nome do autor, uma breve descrição da página e palavras-chave que descrevem o conteúdo. A tag é a <meta /> e possui dois atributos: name e content. Veja alguns exemplos, respectivamente do nome do autor, descrição e palavras-chave:

<head>
   <meta name="author" content="Ranieri Althoff" />
   <meta name="description" content="Tutorial sobre como fazer websites. Aprenda HTML5, CSS3, PHP e Javascript para criar sua própria página." />
   <meta name="keywords" content="html, css, php, javascript, tutorial, criar sites, html5, css3" />
</head>

Esta imagem demonstra como é usada a meta tag description no Google:

QWSmYqC.jpg

 

Charset

O character set, ou conjunto de caracteres, são a coleção de caracteres (leia-se letras, números, símbolos) que o navegador deve usar para ler sua página. Isso porque basicamente um computador trabalha com uma série de números e, na sua tela, transforma os números em imagens que representam as letras. Por exemplo, usando o conjunto UTF-8 (que eu recomendo), podemos fazer o seguinte:

<html>
   <head>
    <meta charset="utf-8">
   </head>
   <body>
    <p>XTibia <3</p>
   </body>
</html>

7I3pz4k.jpg

 

(tabela como fonte: http://www.utf8-chartable.de/unicode-utf8-table.pl?utf8=dec)

Por ser texto simples, apenas letras não acentuadas e uma exclamação, dificilmente haverá algum problema ao mudar de conjunto. Mas, alguém que faça um site com caracteres em japonês, por exemplo, pode ter problemas ao usar um conjunto ocidental como o UTF-8.

 

A parte de CSS e Javascript não será explicada por ora.

 

Corpo da página[/b]



O corpo da página é tudo que é mostrado na tela e é representado por <body>. Nela fica tudo que eu ensinei até agora: as listas, as tabelas, os parágrafos... não há muito sobre o que falar, porque é basicamente esta divisão de uma página: o corpo é a parte de conteúdo.

 

Para destacar texto, isto é, mostrarmos uma parte importante, geralmente utilizamos de negrito ou itálico. No HTML, nós temos tags específicas para destacar o texto: <strong> e <em> (existem outras, que não serão abordadas). Apesar de que a W3C não define que estes elementos tenham formatação diferente, a maioria dos browsers faz isso.

 

O <strong> e o <em> deve ser utilizado para destacar uma parte importante de texto em uma frase, ou dar ênfase. Apesar de ser usado apenas para tornar o texto negrito, este não é seu propósito: como os cabeçalhos (ex. h1), ele deve ser usado apenas para semântica, ou seja, para definir um texto com um significado diferente. Para tornar texto negrito, vamos aprender em breve efeitos muito mais eficientes e variados usando CSS.

 

A declaração !DOCTYPE

O doctype (document type) serve para um navegador interpretar que tipo de documento ele está recebendo. Nós estamos utilizando o HTML5, mas também existiram versões anteriores, como a 4.01 que era dividida em vários padrões (ex. Strict, Standard, Transactional), ou até texto XML. Para o HTML5, nós devemos utilizar a seguinte declaração, ANTES da tag html:

<!DOCTYPE html>
<html>
   <head>
    (cabeçalho)
   </head>
   <body>
    (corpo da página)
   </body>
</html>

 

Esta é a aula de hoje jovens, atualizem suas páginas agora utilizando o código completo de uma página HTML, adicionem suas informações no cabeçalho e aprendam um pouco mais como isso funciona :p

 

21nl25z.png
Destacando texto
Link para o comentário
Compartilhar em outros sites
DiogoTemporario

DiogoTemporario 91

Postado
Postado

Qual o charset sugerido? UTF-8 mesmo?

 

Outra dúvida; na maioria dos sites vejo o seguinte atributo para meta antes do charset:

 

http-equiv="Content-Type"content="text/html;

 

Segundo o w3schools, é necessário para definir o charset no HTML4.01, mas não no HTML5. Creio que o xpg e a maioria dos sites grátis de webhosting não aceite HTML5, assim como versões antigas de alguns browsers, então devo continuar usando, ou há outra forma de definir o charset?

Link para o comentário
Compartilhar em outros sites
Lordfire

Lordfire 309

Postado
  • Autor
Postado

Qual o charset sugerido? UTF-8 mesmo?

 

Outra dúvida; na maioria dos sites vejo o seguinte atributo para meta antes do charset:

 

http-equiv="Content-Type"content="text/html;

 

Segundo o w3schools, é necessário para definir o charset no HTML4.01, mas não no HTML5. Creio que o xpg e a maioria dos sites grátis de webhosting não aceite HTML5, assim como versões antigas de alguns browsers, então devo continuar usando, ou há outra forma de definir o charset?

A princípio não é necessário usar, pois usando o UTF-8 os caracteres acentuados não vão aparecer corretamente. Ou então, use "iso-8859-1".

 

No próprio W3Schools, lê-se o seguinte: essa antiga sintaxe, do http-equiv, frequentemente era escrita de forma errada (sem aspas), mas os desenvolvedores de navegadores faziam o browser suportar mesmo assim. Então, para o HTML5, foi criada essa tag (meta charset="") para simplificar uma tag muito usada erroneamente. São equivalentes, mas a forma nova é muito mais fácil de se lembrar e mais curta.

Link para o comentário
Compartilhar em outros sites
  • 3 weeks later...
 Share
Ir para a lista de tópicos
×
×
  • Criar Novo...