HTML

Criao de pginas Web
HTML
O que o HTML?
HTML (Hypertext Markup Language)
Linguagem que permite criar pginas Web
Prof: Mara Castro
Conceitos bsicos de HTML

Estrutura principal
<html> <head> </head> <body> </body> </html>
Prof: Mara Castro

Estrutura principal
<html> <head> <title> A pgina da turma </title> </head> <body> </body> </html>
Prof: Mara Castro

Parmetros do <body>
<body bgcolor=> para definir uma cor de fundo para a pgina.

<body background=> para definir uma imagem de fundo da pgina.
Prof: Mara Castro

Parmetros do <body>
<body text=> para definir uma cor do texto da pgina. <body link=> para definir a cor dos links. <body vlink=> para definir a cor dos links que j foram visitados.
Prof: Mara Castro

<html> <head> <title> A pgina da turma </title> </head> <body bgcolor=blue> </body> </html>
lightblue darkblue
Prof: Mara Castro

<html> <head> <title> A pgina da turma </title> </head> <body bgcolor= #0000FF text=#FFFFFF> </body> </html>
Prof: Mara Castro
Exemplo - Cdigo
<html> <head> <title> A pgina 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>
Prof: Mara Castro
FIM - parte1

Pargrafos <p> </p> Linhas <hr>
Prof: Mara Castro
Exemplo - Cdigo
<html> <head> <title> Pgina simples de exemplo </title>  </head> <body> <h1> Isto um ttulo de 1 nvel</h1> <h2> Isto um ttulo de 2 nvel</h2> <p> Isto um pargrafo normal <p>  <hr>  <hr width="50%">  <p align="center"> Este pargrafo centrado e com uma <br> quebra ou mudana de linha a meio. </body> </html>
Prof: Mara Castro

Estilos e efeitos no texto
Negrito <b> </b> Itlico <i> </i> Sublinhado (underline) <u> </u> Cor em destaque <strong> </strong> Texto a piscar <blink> </blink> Texto rolante <marquee> <marquee>
Prof: Mara Castro
Exemplo - Cdigo
<html> <head> <title> Pgina exemplo </title>  </head> <body> <h2> Estilos tipogrficos</h2> <p><b> Texto a negrito </b>
<p><i> Texto em itlico </i> <p><u> Texto sublinhado </u> <p><b><i> Texto a negrito e a itlico </i></b> <p><TT> Texto espaado</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 no ordenadas
Prof: Mara Castro
Exemplo - Cdigo
<html>
<head> <title> Listas </title>

 </head> <body> <ol> <h2> Lista ordenada </h2> <li> segundo item </li>
<li> primeiro item </li> </ol> <h2> Lista no ordenada </h2> <ul>
<li> Um item </li> </ul>

</body> </html>
<li> Outro item </li>
Prof: Mara Castro
Tabelas
<table> Tag principal, tem como parmetros width e border. <caption> Onde se coloca o nome ou ttulo da tabela.
<th> Tag que define o cabealho (heading) de cada coluna da tabela.

<tr> define cada linha da tabela. <td> define cada clula da tabela.
Prof: Mara Castro
Tabelas
Parmetros width border Significado Largura da tabela Espessura das molduras
align
valign colspan rowspan bgcolor
Alinhamento horizontal. Valores: left, center e right.

Alinhamento vertical. Valores: top, middle e bottom. Especifica quantas colunas so abrangidas pela clula. Especifica quantas linhas so abrangidas pela clula. Especifica a cor de fundo da clula.
Prof: Mara Castro
Exemplo
Uma tabela de trs linhas e trs colunas, com 60% de tamanho

relativo, com o ttulo Tabelinha, cabealhos col, col2, col3, para cada coluna, respectivamente.
Algumas clulas esto coloridas.
Prof: Mara Castro
Cdigo
<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> <tr> <td width="33%"> </td> <td width="33%" bgcolor="yellow"> </td> <td width="34%"> </td> </tr> <tr> <td width="33%"> </td> <td width="33%"> </td> <td width="34%" bgcolor="red"> </td> </tr> </table></body></html>
Resultado
Prof: Mara Castro
Outras linguagens
Existem outras linguagens de programao de pginas 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 pginas 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

HTML

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

HTML

Transféré par

Droits d'auteur :

Formats disponibles

Criao de pginas Web

Prof: Mara Castro

Conceitos bsicos de HTML

Conceitos bsicos de HTML

Conceitos bsicos de HTML

<body bgcolor=> para definir uma cor de fundo para a pgina.

Prof: Mara Castro

Conceitos bsicos de HTML

Prof: Mara Castro

Conceitos bsicos de HTML

Conceitos bsicos de HTML

Prof: Mara Castro

Conceitos bsicos de HTML

Prof: Mara Castro

Conceitos bsicos de HTML

<UL></UL> listas no ordenadas

Prof: Mara Castro

<head> <title> Listas </title>

<li> Um item </li> </ul>

<li> Outro item </li>

Prof: Mara Castro

<th> Tag que define o cabealho (heading) de cada coluna da tabela.

Prof: Mara Castro

Alinhamento horizontal. Valores: left, center e right.

Uma tabela de trs linhas e trs colunas, com 60% de tamanho

Algumas clulas esto coloridas.

Prof: Mara Castro

Prof: Mara Castro

Prof: Mara Castro

Macromedia Dreamweaver FrontPage Publisher

Prof: Mara Castro

Prof: Mara Castro

Vous aimerez peut-être aussi