Programação WEB HTML
O que é Hyper Text Markup Language (Linguagem de formatação de Hiper-Texto) Linguagem de formatação para disseminação de conteúdo. Padrão nos navegadores utiliza o protocolo HTTP do TCP/IP.
Características Não e uma linguagem de programação, por este motivo não tem regras de sintaxe. Ela é interpretada pelo navegador em tempo de execução Utiliza a tecnologia CSS para auxiliar a formatação padronizada entre página. Utiliza o javascript para auxiliar na validação de formulários e melhor a navegabilidade.
TAGS O html é composto por tags (etiquetas) que identificam ao navegador como formatar um determinado conteúdo, podemos dividir em 3 categorias: Tags de Estrutura – São responsáveis por delimitar seções e espaços dentro da página. Tags de formatação – fornecem a formatação direta de cor, fonte e estilo de conteúdo. Tags de Objeto – coletam dados de um formulário, e permitem integração com o javascript.
Tags de Estrutura <HTML> </HTML> Exemplo: Identificam o inicio e o fim de um página. Exemplo: <html> <head> <Tiltle> Minha Primeira Página </title> </head> <body> Ola mundo ! </body> </html>
Tags de Estrutura <HEAD> </HEAD> Área para publicação de informações sobre a página que auxiliam a indexação por buscadores. <TITLE></TITLE> Define o titulo da página que aparece no topo dos navegadores. Exemplo: <html> <head> <Tiltle> Minha Primeira Página </title> </head> <body> Ola mundo ! </body> </html>
Tags de Estrutura <META NAME.... Exemplo: publicação de informações sobre a página que auxiliam a indexação por buscadores. Exemplo: <html> <head> <Tiltle> Minha Primeira Página </title> <meta name=“Description” content=“pagina sobre”> <meta name=“keywords” content=“html, css, web”> <meta name=“author” content=“Norton”> </head> <body> Ola mundo ! </body> </html>
Tags de Estrutura <BODY></BODY> Exemplo: Define o inicio e fim do corpo de uma página Exemplo: <html> <head> <Tiltle> Minha Primeira Página </title> </head> <body> Ola mundo ! </body> </html>
Tag de Estrutura <P></P> Define um paragrafo Exemplo: <html> <head> <Tiltle> Minha Primeira Página </title> </head> <body> <P> Ola mundo ! </p> </body> </html>
Tag de Estrutura <br> Quebra de linha Exemplo: <html> <head> <Tiltle> Minha Primeira Página </title> </head> <P> Ola mundo ! <BR> Minha primeira página </p> </html>
Tags de Estrutura <h1></h1> Definição de títulos Podem ir de 1 ate 8 Exemplo: <html> <head> <Tiltle> Minha Primeira Página </title> </head> <h1>Titulo Tipo 1 </h1> <P> Ola mundo ! <BR> Minha primeira página </p> </html>
Tags de Estrutura <div></div> Definem uma área isolada de formatação na página Exemplo: <html> <head> <Tiltle> Minha Primeira Página </title> </head> <P> Ola mundo ! <BR> Minha primeira página </p> <DIV> Menu </DIV> </html>
Tags de Estrutura <table></table> <tr></tr> Tag para criação de tabelas <tr></tr> Table Row - Linha de tabla <td></td> Table Detail – coluna de tabela
Tag de Estrutura Exemplo: <html> <head> <Tiltle> Minha Primeira Página </title> </head> <table border=1> <tr> <td> Azul </td> <td> Verde </td> <td> Amarelo </td> </tr> </table> </html>
Tags de Estrutura Comentários Para colocar um comentário na página que não será exibido pelo navegado Exemplo: <html> <head> <Tiltle> Minha Primeira Página </title> </head> <!– - Pagina principal - -> <P> Ola mundo ! <BR> Minha primeira página </p> </html>
Atividade 1 Crie uma página livre em htm com as tags de estrutura apresentadas.