html estrutura e sintaxe. o que é que está dentro de um ficheiro html? um ficheiro html é...
Post on 07-Apr-2016
245 Views
Preview:
TRANSCRIPT
HTMLHTMLEstrutura e SintaxeEstrutura e Sintaxe
O que é que está dentro de um O que é que está dentro de um ficheiro HTML?ficheiro HTML?
Um ficheiro HTML é constituído por texto que define Um ficheiro HTML é constituído por texto que define os elementos da linguagem HTML usando “etiquetas os elementos da linguagem HTML usando “etiquetas de markup”de markup”
As etiquetas de markup dão instruções ao browser As etiquetas de markup dão instruções ao browser sobre a estrutura do documento e sobre a forma sobre a estrutura do documento e sobre a forma como a página deve ser apresentada graficamente como a página deve ser apresentada graficamente
Os ficheiros HTML podem ser escritos usando um Os ficheiros HTML podem ser escritos usando um simples editor de texto e os seus nomes devem ter a simples editor de texto e os seus nomes devem ter a extensão .html (preferencialmente)extensão .html (preferencialmente)
A primeira páginaA primeira página
Usando o bloco de notas, cria um ficheiro Usando o bloco de notas, cria um ficheiro com o nome pagina1.html e escreve nele com o nome pagina1.html e escreve nele o texto seguinte:o texto seguinte:
<html><html><head><head><title>Título da página</title><title>Título da página</title></head></head><body><body> Esta é a minha primeira página da Web. <b>Este texto está Esta é a minha primeira página da Web. <b>Este texto está
a negrito</b>a negrito</b></body></body></html> </html>
Executa-o depois no teu browser.Executa-o depois no teu browser.
ExplicaçãoExplicação
<html><html><head><head><title>Título da página</title><title>Título da página</title></head></head><body> Esta é a minha primeira página da <body> Esta é a minha primeira página da
Web. <b>Este texto está a negrito</b>Web. <b>Este texto está a negrito</b></body></body></html></html>
A primeira etiqueta que encontramos no documento é <html>. Ela define o elemento raiz do documento, que é aquele que contém toda a definição da página. Esta etiqueta diz ao browser para iniciar um novo documento HTML cujo conteúdo se encontra definido entre esse local e a etiqueta de fim (ou de fecho), que é </html>. Esta estiqueta de fim marca o fim do documento (página).
ExplicaçãoExplicação
<html><html><head><head><title>Título da página</title><title>Título da página</title></head></head><body> Esta é a minha primeira página da <body> Esta é a minha primeira página da
Web. <b>Este texto está a negrito</b>Web. <b>Este texto está a negrito</b></body></body></html> </html>
O texto contido entre as etiquetas <head> e </head> define o cabeçalho do documento. Esta informação não é apresentada graficamente mas dá indicações importantes a respeito daquilo que a página contém e sobre a forma como ela deve ser apresentada graficamente.
ExplicaçãoExplicação
<html><html><head><head><title><title>Título da páginaTítulo da página</title></title></head></head><body> Esta é a minha primeira página da <body> Esta é a minha primeira página da
Web. <b>Este texto está a negrito</b>Web. <b>Este texto está a negrito</b></body></body></html> </html>
O texto contido no elemento <title> define o título do documento. Repara que o sistema operativo dá à janela do browser um nome em que entra este título.
ExplicaçãoExplicação
<html><html><head><head><title>Título da página</title><title>Título da página</title></head></head><body><body> Esta é a minha primeira página da Esta é a minha primeira página da
Web. <b>Este texto está a negrito</b>Web. <b>Este texto está a negrito</b></body></body></html> </html>
O texto contido no elemento <body> define tudo aquilo que o browser deve apresentar graficamente. O corpo da página ("body") é constituído por tudo o que se encontra entre <body> e </body>.
ExplicaçãoExplicação
<html><html><head><head><title>Título da página</title><title>Título da página</title></head></head><body> Esta é a minha primeira página da <body> Esta é a minha primeira página da
Web. Web. <b><b>Este texto está a negritoEste texto está a negrito</b></b></body></body></html> </html>
O texto contido entre as etiquetas <b> e </b> será apresentado em negrito (b de bold).
ElementosElementosOs documentos HTML são simples ficheiros de texto Os documentos HTML são simples ficheiros de texto
que contêm "etiquetas de markup". Estas que contêm "etiquetas de markup". Estas etiquetas definem os elementos da linguagem etiquetas definem os elementos da linguagem HTML e os seus conteúdos. A lista seguinte indica HTML e os seus conteúdos. A lista seguinte indica algumas das suas características:algumas das suas características:
As "etiquetas de markup" do HTML são usadas As "etiquetas de markup" do HTML são usadas para definir os para definir os elementoselementos..
As etiquetas do HTML escrevem-se usando os As etiquetas do HTML escrevem-se usando os
caracteres caracteres << e e >> a envolverem o nome do a envolverem o nome do elemento e os seus atributos. elemento e os seus atributos.
Em regra, as etiquetas do HTML aparecem em Em regra, as etiquetas do HTML aparecem em pares, como em <b> e </b>. pares, como em <b> e </b>.
ElementosElementos A primeira etiqueta do par é a A primeira etiqueta do par é a etiqueta de inícioetiqueta de início (ou de abertura) e a (ou de abertura) e a
segunda etiqueta do par é a segunda etiqueta do par é a etiqueta de fimetiqueta de fim (ou de fecho). (ou de fecho).
Tudo o que se encontrar entre as etiquetas de início e de fim faz parte do Tudo o que se encontrar entre as etiquetas de início e de fim faz parte do conteúdo do elementoconteúdo do elemento..
Em HTML as etiquetas podem ser escritas com letra grande ou com letra Em HTML as etiquetas podem ser escritas com letra grande ou com letra pequena. Os resultados são os mesmos porque os nomes dos elementos pequena. Os resultados são os mesmos porque os nomes dos elementos não dependem do tipo de letra. As etiquetas <b> e <B> representam o não dependem do tipo de letra. As etiquetas <b> e <B> representam o mesmo elemento. (recomenda-se a escrita em letras pequenas)mesmo elemento. (recomenda-se a escrita em letras pequenas)
Por exemplo:Por exemplo:<b>Este texto está a negrito</b><b>Este texto está a negrito</b>
O elemento começa com a O elemento começa com a etiqueta de inícioetiqueta de início (ou abertura): <b> (ou abertura): <b>
O O conteúdoconteúdo do elemento <b> é apenas texto ("Este texto está em negrito") do elemento <b> é apenas texto ("Este texto está em negrito")
O elemento termina com a O elemento termina com a etiqueta de fimetiqueta de fim (ou de fecho): </b> (ou de fecho): </b>
A etiqueta <b> serve para definir o elemento do HTML que provoca a escrita do texto A etiqueta <b> serve para definir o elemento do HTML que provoca a escrita do texto em negrito. em negrito.
AtributosAtributosA etiqueta <body> define o corpo ("body") de uma página HTML. No exemplo seguinte A etiqueta <body> define o corpo ("body") de uma página HTML. No exemplo seguinte
adicionamos-lhe o atributo adicionamos-lhe o atributo bgcolorbgcolor (que significa "background color", ou cor de fundo) (que significa "background color", ou cor de fundo) para indicarmos que queremos que a página seja pintada com a cor de fundo encarnada:para indicarmos que queremos que a página seja pintada com a cor de fundo encarnada:
<html> …<html> …<body bgcolor="red"><body bgcolor="red"> Esta é a minha primeira página da Web. Esta é a minha primeira página da Web.
<b>Este texto está em negrito</b><b>Este texto está em negrito</b></body></body></html> </html>
ExemploExemploUsando o bloco de notas, cria um ficheiro com o nome pagina2.html e escreve nele o texto Usando o bloco de notas, cria um ficheiro com o nome pagina2.html e escreve nele o texto
seguinte:seguinte:
<html><html><body><body><table border="0"><table border="0"><tr><tr><td> Esta é a minha primeira tabela. </td><td> Esta é a minha primeira tabela. </td></tr></tr></table></table></body></body></html> </html>
ExemploExemploAssim, podemos concluir que os atributos aparecem sempre em pares nome/valor, Assim, podemos concluir que os atributos aparecem sempre em pares nome/valor,
assim:assim:
nome="valor"nome="valor"
Notas:Notas: Os atributos só podem aparecer nas etiquetas de início. É proibido colocar Os atributos só podem aparecer nas etiquetas de início. É proibido colocar atributos nas etiquetas de fim.atributos nas etiquetas de fim.
Os valores dos atributos devem ser sempre colocados entre aspas. Normalmente Os valores dos atributos devem ser sempre colocados entre aspas. Normalmente usam-se aspas normais (") mas as plicas ou apóstrofos (') também são permitidos. usam-se aspas normais (") mas as plicas ou apóstrofos (') também são permitidos.
Elementos Básicos do HTMLElementos Básicos do HTML
Algumas das etiquetas mais Algumas das etiquetas mais importantes em HTML são aquelas importantes em HTML são aquelas que definem cabeçalhos de secção, que definem cabeçalhos de secção, parágrafos, divisões e quebras de parágrafos, divisões e quebras de linha.linha.
ParágrafoParágrafo
Sintaxe:Sintaxe:
<p> … </p><p> … </p>
O HTML adiciona de forma automática uma linha em branco antes e depois de um O HTML adiciona de forma automática uma linha em branco antes e depois de um parágrafo.parágrafo.
Parágrafo - exemploParágrafo - exemplo
<html><html><head><head><title>Exemplo - Parágrafo</title><title>Exemplo - Parágrafo</title></head></head><body><body><p>Isto é um parágrafo.</p><p>Isto é um parágrafo.</p><p>Isto é outro parágrafo.</p><p>Isto é outro parágrafo.</p><p> Os parágrafos definem-se com o elemento <p> Os parágrafos definem-se com o elemento
<p> </p><p> </p></body></body></html> </html>
CabeçalhosCabeçalhosSintaxe:Sintaxe:
<h1> … </h1><h1> … </h1>……
<h6> … </h6><h6> … </h6> <h1> define o cabeçalho mais importante (maior) e <h1> define o cabeçalho mais importante (maior) e
<h6> define o menos importante (menor) <h6> define o menos importante (menor) O HTML adiciona de forma automática uma linha em O HTML adiciona de forma automática uma linha em
branco antes e depois de um cabeçalho.branco antes e depois de um cabeçalho.
Cabeçalhos - exemploCabeçalhos - exemplo<html><html><head><head><title>Exemplo - Cabeçalhos</title><title>Exemplo - Cabeçalhos</title></head></head><body><body><h1>Isto é um cabeçalho h1</h1><h1>Isto é um cabeçalho h1</h1><h2>Isto é um cabeçalho h2</h2><h2>Isto é um cabeçalho h2</h2><h3>Isto é um cabeçalho h3</h3><h3>Isto é um cabeçalho h3</h3><h4>Isto é um cabeçalho h4</h4><h4>Isto é um cabeçalho h4</h4><h5>Isto é um cabeçalho h5</h5><h5>Isto é um cabeçalho h5</h5><h6>Isto é um cabeçalho h6</h6> <h6>Isto é um cabeçalho h6</h6> </body></body></html> </html>
Cabeçalhos – outro exemploCabeçalhos – outro exemplo<html><html><head><head><title> Outro Exemplo de Cabeçalho</title><title> Outro Exemplo de Cabeçalho</title></head></head><body><body><h1 style="text-align: center">Este é um cabeçalho de nível <h1 style="text-align: center">Este é um cabeçalho de nível
1</h1>1</h1><p>Este cabeçalho mostrado mais acima está alinhado ao <p>Este cabeçalho mostrado mais acima está alinhado ao
centro da página.centro da página.</p></p></body></body></html></html>
Quebra de linhaQuebra de linha
Sintaxe:Sintaxe:
<br><br> A etiqueta <br> usa-se para terminar uma linha sem iniciar um novo parágrafo. Esta etiqueta A etiqueta <br> usa-se para terminar uma linha sem iniciar um novo parágrafo. Esta etiqueta
(<br>, ou "line break") provoca uma mudança de linha forçada no local em que aparece.(<br>, ou "line break") provoca uma mudança de linha forçada no local em que aparece. A etiqueta <br> é uma etiqueta vazia. Ela não pode ter qualquer conteúdo e não tem etiqueta A etiqueta <br> é uma etiqueta vazia. Ela não pode ter qualquer conteúdo e não tem etiqueta
de fim.de fim.
Quebra de Linha - exemploQuebra de Linha - exemplo
<html><html><head><head><title>Exemplo – Quebra de Linha</title><title>Exemplo – Quebra de Linha</title></head></head><body><body><p> Isto<br> é um pará-<br>grafo com <p> Isto<br> é um pará-<br>grafo com
quebra de linha </p>quebra de linha </p></body></body></html> </html>
Separador HorizontalSeparador Horizontal
Sintaxe:Sintaxe:
<hr> … [</hr>]<hr> … [</hr>] A etiqueta <hr> usa-se para inserir uma linha separadora horizontal.A etiqueta <hr> usa-se para inserir uma linha separadora horizontal. A etiqueta <hr> pode conter atributos (ex:size). Pode ou não ter etiqueta de fim.A etiqueta <hr> pode conter atributos (ex:size). Pode ou não ter etiqueta de fim.
Separador horizontal - exemploSeparador horizontal - exemplo<html><html><head><head><title>Exemplo – Separador Horizontal</title><title>Exemplo – Separador Horizontal</title></head></head><body><body><p>O elemento hr desenha uma linha <p>O elemento hr desenha uma linha
horizontal:</p>horizontal:</p><hr><hr><p>Isto é um parágrafo</p><p>Isto é um parágrafo</p><p>Isto é um parágrafo</p><p>Isto é um parágrafo</p></body></body></html></html>
ComentáriosComentáriosSintaxe:Sintaxe:
<!-- … --><!-- … --> As etiquetas de comentário são especiais porque não se escrevem da mesma forma que as As etiquetas de comentário são especiais porque não se escrevem da mesma forma que as
etiquetas que representam elementos normais.etiquetas que representam elementos normais.
Os comentários servem para dizer ao browser que o seu conteúdo é um comentário e não Os comentários servem para dizer ao browser que o seu conteúdo é um comentário e não pode ser apresentado graficamente. Eles usam-se para fazer anotações que explicam a pode ser apresentado graficamente. Eles usam-se para fazer anotações que explicam a forma como o código fonte está feito para que mais tarde consigamos compreender aquilo forma como o código fonte está feito para que mais tarde consigamos compreender aquilo que fizemos antes.que fizemos antes.
Lista de elementos básicosLista de elementos básicos(resumo)(resumo)
Elemento Descrição
<html> Elemento que contém todas as definições da página HTML
<body> Elemento que contém o corpo ("body") da página
<h1> ... <h6>
Define cabeçalhos desde o nível 1 (mais importante) até ao nível 6 (menos importante)
<p> Define um parágrafo<br> Provoca uma mudança de linha forçada<hr> Insere uma linha horizontal<!-- --> Insere um comentário no código fonte
top related