Criação de páginas Web HTML. Prof: Mara Castro O que é o HTML? HTML (Hypertext Markup Language)...
23
Criação de páginas Web HTML
Transcript of Criação de páginas Web HTML. Prof: Mara Castro O que é o HTML? HTML (Hypertext Markup Language)...
Criação de páginas Web
HTML
Prof: Mara Castro
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
<html> <head> <title> A página da turma </title> </head> <body bgcolor=“blue”> </body></html>
lightbluedarkblue
Prof: Mara Castro
Conceitos básicos de HTML
<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.
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> <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>
Prof: Mara Castro
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
