Vous êtes sur la page 1sur 23
1
2
O HTML Um documento HTML é um arquivo de texto contendo tags de marcação que

O HTML

Um documento HTML é um arquivo de texto contendo tags de marcação que informam ao

browser como exibir a página. Dessa forma, ao contrário de outras linguagens estruturadas,

o HTML utiliza etiquetas (marcações), conhecidos como tags, que consistem em breves

instruções com uma marca de início (<) e outra de final (>), que determinam a estrutura do conteúdo (blocos de texto, títulos, parágrafos, listas, imagens, links, etc.). Existem também tags para formatação (fonte, alinhamento, etc.), mas que foram depreciadas com uso do CSS (além dos atributos de aparência).

Os tags têm a seguinte construção:

<nome_do_tag *atributo="valor">

</nome_do_tag>

Podem ser escritos tanto em letras minúsculas quanto em maiúsculas, mas o W3C recomenda que o código sempre seja escrito em letras minúsculas. A maioria dos tags

HTML

</nomedotag>.

tag que indica o seu fechamento, sendo que sua sintaxe é

possui

um

Os tags HTML podem ser usados dentro de outros tags, ou seja, pode-se aninhar tags para causar um efeito desejado. Por exemplo, se deseja colocar também em itálico uma palavra que está dentro de uma frase já em negrito:

<strong>Conheça tudo sobre<em>Internet</em></strong>

O tag strong vêm de forte = visualmente negrito e o tag em de enfatizado = itálico.

O Padrão HTML Desde o seu início o HTML demonstrou ser uma eficiente linguagem para

O Padrão HTML

Desde o seu início o HTML demonstrou ser uma eficiente linguagem para se padronizar informações. Os documentos que a princípio utilizavam essa linguagem provinham de instituições de ensino e tinham fins científicos.

Com o desenvolvimento da Internet comercial, os elementos que antes eram utilizados de maneira bem simples e padronizadas (parágrafos, listas, títulos, tabelas, etc.) passaram por grandes distorções para viabilizar uma criatividade emergente.

Essas modificações tornaram os documentos antes universais em peças de exposição restrita a navegadores que “entendessem” um maior número de formatações aninhadas.

Dessa forma, com a criação da linguagem CSS (Cascading Style Sheets) e a evolução da linguagem, muitos tags foram eliminados (especialmente tags relacionados a aparência, que fica a cargo da linguagem CSS) e outros tags foram sendo criados, para suprir necessidades específicas.

Área de influência Deve-se sempre lembrar de fechar primeiro os últimos tags abertos e depois

Área de influência

Deve-se sempre lembrar de fechar primeiro os últimos tags abertos e depois ir fechando os demais. Esta ordem de fechamento é importante, e é chamada de ordem LIFO (Last In First Out): último a entrar, primeiro a sair.

<p>Conheça tudo sobre<em>Internet</em></p>

No exemplo acima, o primeiro tag fechado foi o último aberto = foi fechado primeiro o </em> e depois o </p>, seguindo a recomendação LIFO.

Atributos do HTML Nem todos os tags possuem atributos. Eles são normalmente usados para identificar

Atributos do HTML

Nem todos os tags possuem atributos. Eles são normalmente usados para identificar um tag ou para complementar sua função, como por exemplo.

<div id=“logo”></div> <a href=http://www.infnet.edu.br>Infnet</a>

Os atributos devem ficar sempre entre aspas.

Cada tag tem o seu conjunto específico de atributos, e estes podem ser incluídos somente na tag de abertura. Portanto, nenhum tag de fechamento possui atributos.

* Conforme a recomendação do W3C e a aplicação dos webstandards (separação entre estrutura e forma), os atributos de aparência dos tags não devem ser utilizados e a aparência deve ser definida através de CSS, modificando a aparência em todos os lugares que ocorrer, facilitando o desenvolvimento e a manutenção do conteúdo. Caso seja uma aplicação isolada, devem ser utilizadas as classes CSS.

Os textos exibidos em uma página HTML não se comportam como os textos de um

Os textos exibidos em uma página HTML não se comportam como os textos de um editor de textos. Por exemplo: são ignoradas quebras de linha do código e somente um espaço em branco aparece entre cada palavra, mesmo inserindo-se mais espaços.

Quando for necessário inserir quebras de linhas em textos de nossas páginas HTML, é necessário indicá-las, para que sejam interpretadas pelo browser no momento em que o texto for exibido. Para isso, é usado o tag <br>.

Quando um texto for colocado em uma página HTML sem a indicação de quebra de linha (sem o tag <br>), ele será exibido em uma só linha. Isso ocorre pois para o HTML quebras de linhas somente existem quando indicadas pelo tag <br>.

Da mesma forma, quando se está trabalhando no código-fonte de um arquivo HTML e forem inseridos mais espaços em branco, o browser faz o “colapso” do código, isto é, exibe o conteúdo com somente um espaço em branco, suprimindo os demais. O mesmo ocorre quando o “Enter” é teclado uma ou mais vezes no código-fonte: será(ão) interpretado(s) como um espaço em branco.

Se for necessário inserir mais de um espaço em branco, deve-se trabalhar com a codificação de caracteres especiais (abordados mais adiante). No caso do espaço em branco, o código é &nbsp;

E caso um tag seja escrito de forma incorreta, ou até mesmo inventado pelo usuário, o browser ignora-o e o texto que estiver após esse tag será apresentado normalmente. Portanto, não há mensagens de erro para tags incorretos.

Nomenclatura dos arquivos Recomenda-se a utilização da extensão .html, pois atualmente todos os servidores são

Nomenclatura dos arquivos

Recomenda-se a utilização da extensão .html, pois atualmente todos os servidores são compatíveis com 4 caracteres na extensão.

Além disso, é importante seguir algumas recomendações na nomenclatura de arquivos:

• Todas as letras minúsculas: questão de organização, e porque alguns servidores podem ter dificuldades em ler MAIÚSCULAS.

• Não acentue as palavras nem utilize ç ou ã, õ, etc: use apenas letras ou números e mais nenhum carácter especial.

Para separar palavrar, pode usar: o til (~), sublinhado (_), hífen(-).

• Nunca use espaço em qualquer nome de página HTML.

• Mantenha nomes de arquivos tão curtos quanto possível

Os tags básicos

Os tags <html> e </html> têm como objetivo indicar o início e o final de uma página HTML. Entre estes tags estão os tags que irão indicar o cabeçalho e o corpo da página.

O cabeçalho está contido na área de influência de <head> e </head>, onde estarão

relacionadas tags que terão finalidades específicas, tais como de levar informações para o servidor (na Internet), para o navegador e outras.

O conteúdo visível da página HTML é aquele que estará contido na área de influência de

<body> e </body>.

Tags básicos: <head> É na área de cabeçalho que é definido o título de nossa

Tags básicos: <head>

É na área de cabeçalho que é definido o título de nossa página, usando o tag <title>.

Este tag não deve ser omitido, pois o título de uma página aparece na barra do navegador, contendo uma breve referência ao conteúdo da página. É muito importante incluir o título em todas as páginas, devendo isso tornar-se um hábito. Isso deve-se ao fato de que muitas vezes, as páginas ficam com nomes iguais, sem nomes (Untitled) ou com nomes que não significam nada.

Quando uma página é marcada para ser adicionada aos Bookmarks ou Favoritos, o browser guarda, além do endereço, o título da página (dados que estão entre os tags <title> e </title>).Caso esse nome não identifique corretamente o conteúdo da página, com certeza os usuários ficarão perdidos ao procurar esta página posteriormente em Favoritos, podendo com isso nunca mais acessá-la.

Além disso, com a implementação de “abas” nas últimas versões dos principais browsers (as páginas são abertas em novas “abas” e não novas janelas), sem um título adequado,

o usuário não irá identificar a página aberta naquela aba. Algumas pessoas confundem

título com nome de arquivo. Observa-se, no entanto, que o nome do arquivo é aquele que adicionamos a extensão “.html” para identificá-lo fisicamente (comentado no slide anterior).

Por fim, o Google utiliza o título para apresentar a página nos resultados de busca, sendo portanto importante um título com semântica clara.

O tag <meta> Para definir o tipo de conteúdo da página e o tipo de

O tag <meta>

Para definir o tipo de conteúdo da página e o tipo de codificação de caracteres, usa-se:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />.

Pode-se dizer que é a meta tag mais importante, sempre deve ser usada. No HTML5 pode ser utilizado apenas <meta charset=“utf-8”>

Para declarar o idioma dos conte;udos do documento usa-se <meta http- equiv="content-language" content="pt-br" />. Pode ser usado pelos motores de busca para categorizar por idioma. No HTML 5 isso é inserido direto na tag HTML: <html lang=“pt-br”>

Tags básicos: <body> O <body> e seu fechamento </body> são os tags que definem o

Tags básicos: <body>

O <body> e seu fechamento </body> são os tags que definem o corpo da página, ou

seja, é entre estes tags que desenvolve-se a criação das páginas HTML.

Todo o conteúdo das páginas que aparece no browser, ou seja, textos, links, imagens, tabelas e demais formatações estarão dentro da área de influência de <body> e </body>, e tudo o que nele estiver contido será visualizado na janela do navegador.

Deve-se observar que sistemas operacionais em línguas não latinas não exibem acentos

e caracteres especiais da língua latina se não for informada a codificação utf-8.

Portanto, nestes casos, deve-se utilizar a codificação dos caracteres especiais do HTML.

Existem caracteres que não podem ser obtidos através do teclado e devem ser inseridos na

Existem caracteres que não podem ser obtidos através do teclado e devem ser inseridos na página através de uma codificação especial que o browser é capaz de interpretar. Pode-se usar a entidade do HTML e/ou a ISO-Latin1, que usa um código composto pelo caracter & seguido do símbolo # mais uma combinação de números. O HTML usa o caracter & seguido de uma combinação de letras. A representação do caracter © (copyright): &#169; - ISO Latin-1 e &copy; - Entidade do HTML.

Podemos usar esses caracteres especiais para representar os tags em nossa página sem que

eles sejam interpretados: &lt;body&gt; - &lt; representa o caracter "<" ,e &gt; Então teremos exibido pelo browser o seguinte resultado : <body>

o ">”.

Acentuação A Web é global e alguns países não possuem acentos em seus alfabetos. Digitar os acentos diretamente no código das páginas pode causar transtornos aos usuários que não possuem suporte à nossa língua. Por esse motivo, devem ser usadas definições especiais para representar esses caracteres. Por exemplo a palavra, acentuação deve ser escrita desse forma no código: acentua&ccedil;&atilde;o

Automatização As entidades HTML &ccedil; (ç) e &atilde; (ã) garantem que a acentuação será vista por qualquer browser em qualquer parte do mundo. Algumas ferramentas de desenvolvimento de páginas HTML ajudam no processo de criação dos códigos e as ferramentas WYSIWYG traduzem automaticamente os caracteres acentuados para os respectivos códigos.

* Com a codificação UTF-8 não é necessário utilizar códigos de acentuação e automatização.

Tags de estrutura = títulos <h1> <h6> Existem seis tags usados para exibir frases como

Tags de estrutura = títulos <h1> <h6>

Existem seis tags usados para exibir frases como Headings (cabeçalhos/títulos de texto) em páginas HTML. A diferença entre eles é o tamanho. O primeiro nível <h1> é o que exibe o cabeçalho em maior tamanho e o último nível <h6> exibe no menor.

Todos os tags de headings (títulos) possuem tag de fechamento.

Não se deve confundir os tags de cabeçalhos de texto, que servem para exibir um texto qualquer no corpo de sua página HTML, com o tag <head>, que serve para definir uma área de cabeçalho para o documento HTML. O <head> não exibe nenhuma informação na página, só define uma área onde ficarão algumas informações de configuração e informação da página para o browser.

Os tags de título provocam 3 efeitos:

• Alteram o tamanho da fonte (para maior ou menor que a fonte padrão);

• Colocam o texto em negrito;

• Dão o efeito de parágrafo, isto é, inserem uma quebra de linha.

Os tags de heading são muito usados em conjunto com a linguagem CSS, sendo que com os estilos podemos modificar e melhorar a aparência dos títulos.

O HTML necessita de um tag que indique a quebra de linha quando necessário, sendo

O HTML necessita de um tag que indique a quebra de linha quando necessário, sendo

que o tag <br> tem essa função. Não existe um tag de fechamento para o <br> e pode-

se usar quantos tags <br> seguidos forem necessários para colocar linhas em branco na

página. O HTML tem a característica de moldar-se à área útil do navegador e, para isso,

ele insere naturalmente quebras de linha quando a mesma já preencheu todo o espaço da

tela. O tag <nobr> poderia ser usado para impedir a quebra, mas no entanto esse tag foi

depreciado e não é mais aplicado.

Quando necessita-se inserir uma quebra de linha com intenção de se mudar de parágrafo,

o tag apropriado é o <p>. Muitos códigos podem ser encontrados sem o tag de

fechamento </p>. No entanto, conforme recomendação do W3C, todos os tags devem utilizar o tag de fechamento, pois isso influenciará no uso da codificação de estilos chamada CSS – Cascading Style Sheets, vistos adiante.

A quebra de linha do tag <p> insere mais uma linha horizontal vazia, proporcionando um

maior espaçamento entrelinhas.

Os tags <div> e </div> podem ser utilizados para o efeito de parágrafo, mas recomenda-se sua aplicação em blocos de conteúdo que serão posteriormente formatados por CSS. O tag <div> também é utilizado em DHTML para dividir a visualização em camadas.

Os tags <p> e <div> possuem o atributo “align“ para alinhar o texto ao centro, esquerda,

direita ou justificado (center, left, right ou justify). Esse mesmo atributo “align” também

pode ser utilizado nas tags de heading para alinhá-las. Entretanto, assim como os demais atributos que se referem à aparência do conteúdo, é recomendado uso do CSS.

Texto pré-formatado e texto monoespaçado Quando é necessário exibir um texto em uma página HTML

Texto pré-formatado e texto monoespaçado

Quando é necessário exibir um texto em uma página HTML exatamente como ele foi digitado, ou seja, respeitando os espaços e quebras de linha, colocamos este texto entre os tag <pre> e </pre>.

Ao interpretar a formatação física, o browser substitui a fonte do texto para uma fonte mono-espaçada (fonte onde todas as letras possuem a mesma altura e largura), para garantir a formatação do texto. A fonte usada é normalmente a Courier New. O texto pré-formatado é muito usado quando é preciso exibir, por exemplo, o código fonte de programas ou alinhar colunas de números.

é muito usado quando é preciso exibir, por exemplo, o código fonte de programas ou alinhar
Tags de comentários HTML Muitas vezes é necessário comentar uma parte do código para que

Tags de comentários HTML

Muitas vezes é necessário comentar uma parte do código para que no futuro possa-se entender o que foi feito, ou até mesmo para documentar as páginas. Os comentários

não são apresentado na tela, ou seja, todo o texto que estiver entre as marcações de

comentário <!--

<body> <!–- Este comentário não aparece na página--> <p>O HTML é a linguagem para codificação de páginas web.</p> </body> </html> Aparecerá na página:

--> não será exibido pelo browser. Exemplo:

--> não será exibido pelo browser . Exemplo: Listas Listas não-ordenadas: <ul> </ul> -

Listas

Listas não-ordenadas:

<ul>

</ul> - apresentam uma série de itens sem numerá-los.

Listas ordenadas

<ol>

</ol> - atribuem números em seqüência para cada item.

Listas de definição:

<dl>

criação de uma ou mais definições para cada item.

</dl> - sem nenhum tipo de marcador, endentam o texto permitindo a

Lista não-ordenada: <ul> O tag <ul> define o início de uma lista não-ordenada. O tag

Lista não-ordenada: <ul>

O

tag <ul> define o início de uma lista não-ordenada.

O

tag <li> define cada item da lista.

Pode-se modificar o símbolo utilizado para demarcar cada item da lista não-ordenada usando o atributo* type.

O

O

atributo type indica qual o símbolo será usado em cada item:

<ul type=“disc”> Círculo cheio <ul type=“circle”> Círculo vazado <ul type=“square”> Quadrado

atributo type também pode ser aplicado na tag <li>, diferenciando os itens entre si.

* Como os atributos referem-se à aparência do conteúdo, ao seguir os web standards, deve-se realizar esta formatação através de CSS.

Lista ordenada: <ol> Pode-se modificar a seqüência e o tipo de numeração de todos os

Lista ordenada: <ol>

Pode-se modificar a seqüência e o tipo de numeração de todos os itens de uma lista ordenada usando os atributos* start e type.

O atributo start indica em que ponto a lista iniciará sua contagem. <ol start="5"> Indica que a lista iniciará a partir de 5.

O atributo type indica qual o tipo de seqüência será usada: letras maiúsculas ou minúsculas, números ou algarismos romanos maiúsculos ou minúsculos.

<ol type="A"> Letras maiúsculas <ol type="a"> Letras minúsculas <ol type="I"> Algarismos romanos <ol type="i"> Algarismos romanos (minúsculos) <ol type="1"> Números arábicos (padrão)

* Como os atributos referem-se à aparência do conteúdo, ao seguir os web standards, deve-se realizar esta formatação através de CSS.

O O O Este tipo de lista é usado para endentar o texto quando necessário,
O O O
O
O
O

Este tipo de lista é usado para endentar o texto quando necessário, como por exemplo, em um glossário ou lista de termos.

tag <dl> inicia uma lista de definição.

tag <dt> indica o item da lista.

tag <dd> inicia a descrição para cada item.

20
Tags de formatação do texto*: <font> e <basefont> - apenas para conhecimento Os tags <font>

Tags de formatação do texto*: <font> e <basefont> - apenas para conhecimento

Os tags <font> e <basefont> permitem personalizar o tipo, tamanho e cor da fonte.

Todo o texto, palavra, frase ou letra que estiver na área de influência do tag <font> terá

as características definidas por ele. Já o tag <basefont> determina os padrões usados

em toda a página, sendo que pode aparecer em qualquer parte da página, mas é geralmente definido no cabeçalho, entre os tags <head> e </head>.

O uso do atributo face deve ser limitado às fontes mais comuns, pois o computador

cliente precisa ter instalada a fonte em questão para que ela seja exibida. No atributo face, coloca-se normalmente mais de uma opção de fonte para controlar ao máximo as possibilidades de fontes que podem ser visualizadas. Por exemplo: <font face=“Arial,

Helvetica, Verdana, Tahoma”>

Os valores permitidos para o atributo size variam de 1 a 7, sendo que o valor 3 é

padrão. No entanto, pode-se trabalhar com +1, +2, -1, -2 e assim sucessivamente até +7 e –7. Em relação às cores (color), estas podem ser definidas em formato hexadecimal

ou pelo nome. As 16 cores padrão que podem ser usadas nos tags HTML são:

aqua

gray

navy

silver

black

green

olive

teal

blue

lime

purple

yellow

fuchsia

maroon

red

white

Os três atributos podem ser utilizados em conjunto ou isoladamente, sendo que a tag não ocorre sem o uso de ao menos um dos atributos.

* Como estas tags estão depreciadas, pois a aparência fica misturada à estrutura, dificultando a manutenção e aumentando o tamanho dos arquivos, toda a formatação do conteúdo deve ser feita com o uso de CSS.

Tags de formatação do texto Pode-se colocar o texto ou frase em negrito ou itálico

Tags de formatação do texto

Pode-se colocar o texto ou frase em negrito ou itálico usando os tags <b> e <i>, sendo recomendada a utilização de strong e em pois tem relação com a acessibilidade. Todo o texto entre o início e o fechamento do tag será exibido em negrito ou itálico dependendo do tag usado, sendo que também podem ser utilizadas em conjunto. <b>Negrito</b> ou <strong>Negrito</strong> = Negrito <i>Itálico</i> ou <em>Itálico</em> = Itálico <b><i>Negrito e itálico </i></b> = Negrito e itálico

Para colocar um texto em modo subscrito usa-se o tag <sub> e </sub>. LOG<sub>10</sub> 8 = LOG 10 8

Para colocar um texto em modo sobrescrito usamos o tag <sup> e </sup>. x<sup>2</sup>+10 = x 2 + 10

Para manter histórico de dados atualizados, foram criados os tags <ins> e <del> Para marcar um texto que seria deletado, foi substituído por uma nova informação, deve ser utilizado o tag <del> e </del>. <del> Texto deletado </del> = Texto deletado

Para marcar um texto inserido no lugar do deletado, deve ser utilizado o tag <ins> e </ins>. <ins> Texto inserido </ins> = Texto inserido

Tags de formatação do texto No HTML5 foram criados tags específicos para as regiões mais

Tags de formatação do texto

No HTML5 foram criados tags específicos para as regiões mais comuns das páginas Web. Estes tags substituíram o uso massiço das divs para marcar estas regiões, com id’s específicos.

Assim, ao pesquisarem qual o id mais utilizado, este id tornou-se um tag específico, que pode ser utilizado em outros locais que tenham o mesmo significado (semântica).

Para a região do cabeçalho