Criação de páginas Web HTML
O que é o HTML? HTML (Hypertext Markup Language) Linguagem que permite criar páginas Web Prof: Mara Castro
Conceitos básicos de HTML Estrutura principal <html> <head> </head> <body> </body> </html> Prof: Mara Castro
Conceitos básicos de HTML Estrutura principal <html> <head> <title> A página da turma </title> </head> <body> </body> </html> Prof: Mara Castro
Conceitos básicos de HTML Parâmetros do <body> <body bgcolor=“”> para definir uma cor de fundo para a página. <body background=“”> para definir uma imagem de fundo da página. Prof: Mara Castro
Conceitos básicos de HTML Parâmetros do <body> <body text=“”> para definir uma cor do texto da página. <body link=“”> para definir a cor dos links. <body vlink=“”> para definir a cor dos links que já foram visitados. Prof: Mara Castro
Conceitos básicos de HTML <head> <title> A página da turma </title> </head> <body bgcolor=“blue”> </body> </html> lightblue darkblue Prof: Mara Castro
Conceitos básicos de HTML <head> <title> A página da turma </title> </head> <body bgcolor= “#0000FF” text=“#FFFFFF”> </body> </html> Prof: Mara Castro
Exemplo - Código <html> <head> <title> A página da turma </title> </head> <body bgcolor= “#0000FF” text=“#FFFFFF”> <center> <h1> Heading 1 </h1> <h2> Heading 2 </h2> <h3> Heading 3 </h3> <h4> Heading 4 </h4> <h5> Heading 5 </h5> </center> </body> </html> FIM - parte1 Prof: Mara Castro
Conceitos básicos de HTML Parágrafos <p> </p> Linhas <hr> Prof: Mara Castro
Exemplo - Código <html> <head> <title> Página simples de exemplo </title> <!-- Isto é um comentário, não aparece na página --> </head> <body> <h1> Isto é um título de 1º nível</h1> <h2> Isto é um título de 2º nível</h2> <p> Isto é um parágrafo normal <p> <!-- em cima um parágrafo em branco--> <hr> <!--Isto é uma linha horizontal--> <hr width="50%"> <!-- Linha horizontal com 50% da largura da página--> <p align="center"> Este parágrafo é centrado e com uma <br> quebra ou mudança de linha a meio. </body> </html> Prof: Mara Castro
Conceitos básicos de HTML Estilos e efeitos no texto Negrito <b> </b> Itálico <i> </i> Sublinhado (underline) <u> </u> Cor em destaque <strong> </strong> Texto a piscar <blink> </blink> Texto rolante <marquee> <marquee> Prof: Mara Castro
Exemplo - Código <html> <head> <title> Página exemplo </title> <!-- Isto é um comentário, não aparece na página --> </head> <body> <h2> Estilos tipográficos</h2> <p><b> Texto a negrito </b> <p><i> Texto em itálico </i> <p><u> Texto sublinhado </u> <p><b><i> Texto a negrito e a itálico </i></b> <p><TT> Texto espaçado</TT> </body> </html> Prof: Mara Castro
Listas Listas de itens em HTML: <OL></OL> listas ordenadas, ou seja, em que os itens surgem numerados (1,2,3,…) <UL></UL> listas não ordenadas Prof: Mara Castro
Exemplo - Código <html> <head> <title> Listas </title> <!-- Isto é um comentário, não aparece na página --> </head> <body> <h2> Lista ordenada </h2> <ol> <li> primeiro item </li> <li> segundo item </li> </ol> <h2> Lista não ordenada </h2> <ul> <li> Um item </li> <li> Outro item </li> </ul> </body> </html> Prof: Mara Castro
Tabelas <table> Tag principal, tem como parâmetros width e border. <caption> Onde se coloca o nome ou título da tabela. <th> Tag que define o cabeçalho (heading) de cada coluna da tabela. <tr> define cada linha da tabela. <td> define cada célula da tabela. Prof: Mara Castro
Tabelas Parâmetros Significado width Largura da tabela border Espessura das molduras align Alinhamento horizontal. Valores: left, center e right. valign Alinhamento vertical. Valores: top, middle e bottom. colspan Especifica quantas colunas são abrangidas pela célula. rowspan Especifica quantas linhas são abrangidas pela célula. bgcolor Especifica a cor de fundo da célula. Prof: Mara Castro
Exemplo Uma tabela de três linhas e três colunas, com 60% de tamanho relativo, com o título «Tabelinha», cabeçalhos col, col2, col3, para cada coluna, respectivamente. Algumas células estão coloridas. Prof: Mara Castro
Código <html><head></head><body> <table border="1" width="60%"> <caption> Tabelinha </caption> <th> Col 1 </th> <th> Col 2 </th> <th> Col 3 </th> <tr> <td width="33%" bgcolor="green"> </td> <td width="33%"> </td> <td width="34%"> </td> </tr> <td width="33%" bgcolor="yellow"> </td> <td width="34%" bgcolor="red"> </td> </table></body></html>
Resultado Prof: Mara Castro
Outras linguagens Existem outras linguagens de programação de páginas Web, tais como: Java e JavaScript Visual Basic Script JSP (Java Server Pages) ASP (Active Server Pages) PHP Prof: Mara Castro
Outros programas Existem programas que permitem criar páginas web sem necessidade de escrita HTML, tais como: Macromedia Dreamweaver FrontPage Publisher FIM – parte2 Prof: Mara Castro
Alguns sites… www.nosoftware.com www.globalaigs.org www.aol.com/shopping www.pixyland.org www.museumofbadart.org www.toyota.com www.amazon.co.uk Prof: Mara Castro