Carregar apresentação
A apresentação está carregando. Por favor, espere
1
Criação de páginas Web HTML
2
O que é o HTML? HTML (Hypertext Markup Language)
Linguagem que permite criar páginas Web Prof: Mara Castro
3
Conceitos básicos de HTML
Estrutura principal <html> <head> </head> <body> </body> </html> Prof: Mara Castro
4
Conceitos básicos de HTML
Estrutura principal <html> <head> <title> A página da turma </title> </head> <body> </body> </html> Prof: Mara Castro
5
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
6
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
7
Conceitos básicos de HTML
<head> <title> A página da turma </title> </head> <body bgcolor=“blue”> </body> </html> lightblue darkblue Prof: Mara Castro
8
Conceitos básicos de HTML
<head> <title> A página da turma </title> </head> <body bgcolor= “#0000FF” text=“#FFFFFF”> </body> </html> Prof: Mara Castro
9
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
10
Conceitos básicos de HTML
Parágrafos <p> </p> Linhas <hr> Prof: Mara Castro
11
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
12
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
13
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
14
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
15
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
16
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
17
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
18
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
19
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>
20
Resultado Prof: Mara Castro
21
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
22
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
23
Alguns sites… www.nosoftware.com www.globalaigs.org
Prof: Mara Castro
Apresentações semelhantes
