TECNOLOGIA WEB HTML Profa. Rosemary Melo
HTML Estrutura básica de todo documento html
HTML TAG title
Selecione e copie aqui a template básica: HTML Template HTML - Comentário Selecione e copie aqui a template básica: <html> <!-- Trecho a comentar... --> <head> <! --Cabeçalho do documento HTML--> <title> Minha PáginaWeb </title> </head> <body> <! Corpo do documento HTML> <p> Bem vindo a HTML ! </p> </body> </html>
HTML Cabeçalho do documento HTML: <head> ... </head> contém informações sobre o documento, como o seu título e também pode conter instruções especiais de formatação do documento <title> ... </title> Título do documento, mostrado na barra de status e no bookmark do navegador.
HTML Comando <p> ... </p> Usado para editar parágrafos, gerando um espaçamento entre eles. Aceita o parâmetro align="método de alinhamento“ Sintaxe: <p align="método de alinhamento" > Aqui vai o texto do parágrafo </p> align pode ser igual a: "left" ( `a esquerda), "right" ( à direita), "center" (centralizado) e "justify" (justificado)
HTML Comando <p> ... </p> <html> <head> <title> Minha PáginaWeb </title> </head> <body bgcolor="#ffcccc"> <p align="center"> Este é um parágrafo centralizado </p> <p align="right"> Parágrafo alinhado à direita</p> <p> É usado para parágrafos </p> </body> </html>
HTML Criando uma lista ordenada <ol> ... </ol> <head> <title> Minha PáginaWeb </title> </head> <body> Minha Lista Ordenada: <ol> <li> Primeiro ítem <li> Segundo ítem <li> Terceiro ítem <li> Quarto ítem </ol> </body> </html>
HTML Lista Não ordenada <ul> ... </ul> <html> <head> <title> Minha PáginaWeb </title> </head> <body> Minha Lista Não Ordenada: <ul> <li> Primeiro ítem <li> Segundo ítem <li> Terceiro ítem <li> Quarto ítem </ul> </body> </html>
HTML Cabeçalhos <body> <h1>Cabeçalho nivel 1</h1>
HTML Vínculos – Links <body> </body> <h1>Sites Favoritos</h1> <!-- Cria 3 hyperlinks de texto --> <p><a href=“http://www.deitel.com”>Deitel</a></p> <p><a href=“http://www.prehall.com”>Prentice Hall</a></p> <p><a href=“http://www.portal.estacio.br”>Portal</a></p> </a></p> </body>
HTML Tabelas: comando <table> ... </table> Usado para formatar tabela. Aceita parâmetros, como: border=“borda" width=“largura da célula” height=“altura da (pode ser em pixels ou percentual em relação a tabela) célula" cellspacing=“espaço entre células da tabela“ Sintaxe: <table border="2" width="240” height="120“ cellspacing="10"> </table>
HTML Tabelas Possuem três seções distintas – cabeçalho, corpo e rodapé. Sintaxe: <table> <thead> <tr><th>título cabeçalho </th></tr> </thead> <tfoot> <tr><th>título rodapé</th></tr> </tfoot> <tbody> <tr><td>nome coluna</td></tr> </tbody> </table>
HTML Tipos de tags utilizadas na tabela: inclui linha: <tr>nome da linha</tr> Rowspan = “número de linhas que você quer mesclar” inclui coluna: (para definir título em cabeçalho e rodapé) <th> nome da coluna </th> inclui coluna: <td> nome da coluna </td> Colspan = “número de colunas que você quer mesclar” Sintaxe: <tr><th>título cabeçalho </th></tr> <tr><td>texto</td></tr>
HTML Exemplo 3: <table border="1" width="220“ height="120" cellspacing="5"> <thead><tr> <th>Fruta </th> <th>Preço</th> <th>Preço c/ desconto</th> </tr></thead> <tfoot><tr> <td colspan="2">Total</td> <td>R$2,00</td> </tr></tfoot> <tbody><tr> <td>Laranja</td> <td>R$5,00</td> <td>R$3,00</td> </tr></tbody> </table>
HTML Exercícios: 1) Faça as seguintes tabelas:
HTML Exercícios: 2) Faça as seguintes tabelas:
HTML Exercícios: 3) Faça as seguintes tabelas: