Carregar apresentação
A apresentação está carregando. Por favor, espere
1
HTML Estrutura e Sintaxe
2
O que é que está dentro de um ficheiro HTML?
Um ficheiro HTML é constituído por texto que define os elementos da linguagem HTML usando “etiquetas de markup” As etiquetas de markup dão instruções ao browser sobre a estrutura do documento e sobre a forma como a página deve ser apresentada graficamente Os ficheiros HTML podem ser escritos usando um simples editor de texto e os seus nomes devem ter a extensão .html (preferencialmente)
3
A primeira página Usando o bloco de notas, cria um ficheiro com o nome pagina1.html e escreve nele o texto seguinte: <html> <head> <title>Título da página</title> </head> <body> Esta é a minha primeira página da Web. <b>Este texto está a negrito</b> </body> </html> Executa-o depois no teu browser.
4
Explicação <html> <head>
<title>Título da página</title> </head> <body> Esta é a minha primeira página da Web. <b>Este texto está a negrito</b> </body> </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).
5
Explicação <html> <head>
<title>Título da página</title> </head> <body> Esta é a minha primeira página da Web. <b>Este texto está a negrito</b> </body> </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.
6
Explicação <html> <head>
<title>Título da página</title> </head> <body> Esta é a minha primeira página da Web. <b>Este texto está a negrito</b> </body> </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.
7
Explicação <html> <head>
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>. <html> <head> <title>Título da página</title> </head> <body> Esta é a minha primeira página da Web. <b>Este texto está a negrito</b> </body> </html>
8
Explicação <html> <head>
O texto contido entre as etiquetas <b> e </b> será apresentado em negrito (b de bold). <html> <head> <title>Título da página</title> </head> <body> Esta é a minha primeira página da Web. <b>Este texto está a negrito</b> </body> </html>
9
Elementos Os documentos HTML são simples ficheiros de texto que contêm "etiquetas de markup". Estas etiquetas definem os elementos da linguagem HTML e os seus conteúdos. A lista seguinte indica algumas das suas características: As "etiquetas de markup" do HTML são usadas para definir os elementos. As etiquetas do HTML escrevem-se usando os caracteres < e > a envolverem o nome do elemento e os seus atributos. Em regra, as etiquetas do HTML aparecem em pares, como em <b> e </b>.
10
Elementos A primeira etiqueta do par é a etiqueta de início (ou de abertura) e a segunda etiqueta do par é a etiqueta de fim (ou de fecho). Tudo o que se encontrar entre as etiquetas de início e de fim faz parte do conteúdo do elemento. 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 não dependem do tipo de letra. As etiquetas <b> e <B> representam o mesmo elemento. (recomenda-se a escrita em letras pequenas)
11
<b>Este texto está a negrito</b>
Por exemplo: <b>Este texto está a negrito</b> O elemento começa com a etiqueta de início (ou abertura): <b> O conteúdo do elemento <b> é apenas texto ("Este texto está em negrito") O elemento termina com a etiqueta de fim (ou de fecho): </b> A etiqueta <b> serve para definir o elemento do HTML que provoca a escrita do texto em negrito.
12
Atributos <html> …
A etiqueta <body> define o corpo ("body") de uma página HTML. No exemplo seguinte adicionamos-lhe o atributo bgcolor (que significa "background color", ou cor de fundo) para indicarmos que queremos que a página seja pintada com a cor de fundo encarnada: <html> … <body bgcolor="red"> Esta é a minha primeira página da Web. <b>Este texto está em negrito</b> </body> </html>
13
Exemplo Usando o bloco de notas, cria um ficheiro com o nome pagina2.html e escreve nele o texto seguinte: <html> <body> <table border="0"> <tr> <td> Esta é a minha primeira tabela. </td> </tr> </table> </body> </html>
14
Exemplo Assim, podemos concluir que os atributos aparecem sempre em pares nome/valor, assim: nome="valor" Notas: Os atributos só podem aparecer nas etiquetas de início. É proibido colocar atributos nas etiquetas de fim. 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.
15
Elementos Básicos do HTML
Algumas das etiquetas mais importantes em HTML são aquelas que definem cabeçalhos de secção, parágrafos, divisões e quebras de linha.
16
<p> … </p>
Parágrafo Sintaxe: <p> … </p> O HTML adiciona de forma automática uma linha em branco antes e depois de um parágrafo.
17
Parágrafo - exemplo <html> <head>
<title>Exemplo - Parágrafo</title> </head> <body> <p>Isto é um parágrafo.</p> <p>Isto é outro parágrafo.</p> <p> Os parágrafos definem-se com o elemento <p> </p> </body> </html>
18
<h1> … </h1> … <h6> … </h6>
Cabeçalhos Sintaxe: <h1> … </h1> … <h6> … </h6> <h1> define o cabeçalho mais importante (maior) e <h6> define o menos importante (menor) O HTML adiciona de forma automática uma linha em branco antes e depois de um cabeçalho.
19
Cabeçalhos - exemplo <html> <head>
<title>Exemplo - Cabeçalhos</title> </head> <body> <h1>Isto é um cabeçalho h1</h1> <h2>Isto é um cabeçalho h2</h2> <h3>Isto é um cabeçalho h3</h3> <h4>Isto é um cabeçalho h4</h4> <h5>Isto é um cabeçalho h5</h5> <h6>Isto é um cabeçalho h6</h6> </body> </html>
20
Cabeçalhos – outro exemplo
<html> <head> <title> Outro Exemplo de Cabeçalho</title> </head> <body> <h1 style="text-align: center">Este é um cabeçalho de nível 1</h1> <p>Este cabeçalho mostrado mais acima está alinhado ao centro da página. </p> </body> </html>
21
Quebra de linha Sintaxe: <br>
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. A etiqueta <br> é uma etiqueta vazia. Ela não pode ter qualquer conteúdo e não tem etiqueta de fim.
22
Quebra de Linha - exemplo
<html> <head> <title>Exemplo – Quebra de Linha</title> </head> <body> <p> Isto<br> é um pará-<br>grafo com quebra de linha </p> </body> </html>
23
<hr> … [</hr>]
Separador Horizontal Sintaxe: <hr> … [</hr>] 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.
![<hr> … [</hr>]](http://slideplayer.com.br/slide/6103028/19/images/23/%3Chr%3E+%E2%80%A6+%5B%3C%2Fhr%3E%5D.jpg "Separador Horizontal. Sintaxe: <hr> … [</hr>] 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.")
24
Separador horizontal - exemplo
<html> <head> <title>Exemplo – Separador Horizontal</title> </head> <body> <p>O elemento hr desenha uma linha horizontal:</p> <hr> <p>Isto é um parágrafo</p> </body> </html>
25
Comentários Sintaxe: <!-- … -->
<! … > As etiquetas de comentário são especiais porque não se escrevem da mesma forma que as etiquetas que representam elementos normais. 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 forma como o código fonte está feito para que mais tarde consigamos compreender aquilo que fizemos antes.
26
Lista de elementos básicos (resumo)
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
Apresentações semelhantes
