HTML

TAGS são rótulos usados para informar como deve ser apresentado o website.
Tags de abertura “<comando>” , tags de fechamento “</comando>”
Ex: <b> TreinaWeb curso em negrito</b>
Excepções: <br /> - salta uma linha, <hr /> - sublinha a frase
Tags de títulos <h1>, <h2>, <h3>, <h4>, <h5>, <h6> informam o navegador que se trata de um
cabeçalho
<h1>Treinaweb</h1>
<h3>ensino á distancia</h3>
Estrutura de uma página web:
<html>
<head>
</head>
<body>
</body>
</html>
“Head” – Dar o titulo á pagina web, aparece apenas no topo da barra do navegador.
Exemplo: <title>A minha primeira página</title>
tudo o que quisermos que apareça na página web tem que ser programado entre a estrutura
<body> </body>
“Body” :
<p> é usado para paragrafos</p>
<b>torna o texto negrito</b>
<br />
<i>torna o texto itálico</i>
<br />
<small>torna a letra do texto pequena</small>
<big> aumenta a fonte e atribui negrito</big>
<tt>aplica um espaçamento regular ao texto</tt>
<sup>faz com que o texto fique sobrescrito</sup>
<sub>faz com que o texto fique subscrito</sub>

<hr /> - serve para sublinhar a frase
<h1>cabeçalho</h1>
<h2>subtítulo</h2>
<h3>sub-subtitulo</h3>
Exemplo:
<body>
<b>TreinaWEB e-Learning</b><br />
<i>TreinaWEB e-Learning</i><br />
<u>TreinaWEB e-Learning</u><br />
<sup>TreinaWEB e-Learning</sup><br />
<sub>TreinaWEB e-Learning</sub><br />
<big>TreinaWEB e-Learning</big><br />
<small>TreinaWEB e-Learning</small><br />
<tt>TreinaWEB e-Learning</tt>
</body>
TreinaWEB e-Learning
Itens de lista não ordenada
<body>
<ul>
<li>Item 1 da lista</li>
</ul>
 Item 1 da lista
 Item 2 da lista
 Item 3 da lista
 Item 4 da lista
</body>
Itens de lista ordenada
<body>
<ol>
<li>Ajax</li>
<li>CSS</li>
<li>XHTML</li>
<li>Tableless</li>
</ol>
</body>
Exemplo:
1. Ajax
2. CSS
3. XHTML
4. Tableless
<blockquote> - utilizado para a criação de citações
<body>
<blockquote><b>Web Standard</b></blockquote>
<ol>
<li>Ajax</li>
<li>CSS</li>
<li>XHTML</li>
<li>Tableless</li>
</ol>
<blockquote><b>Programação</b></blockquote>
<ul>
<li>Pascal</li>
<li>Delphi</li>
<li>VB</li>
<li>C#</li>
</ul>
</body>
Exemplo:
Web Standard
1. Ajax
2. CSS
3. XHTML
4. Tableless
Programação
 Pascal
 Delphi
 VB
 C#
Atributos :
 Style – cor de fundo
<body style="background-color:#E9E9E9;">
<h1>Cor de fundo cinza</h1>
</body>
• Style – cor de fundo do paragrafo e cor de letra
<body style="background-color:#E9E9E9;">
<p style="background-color:red;color:blue">
Parágrafo com fundo vermelho e cor da fonte Azul.
</p>
</body>
Exemplo:
ParÃ¡grafo com fundo vermelho e cor da fonte Azul.
Links – para se programarem links utilizam-se uma tag com um elemento e um

atributo
<a href=”http://www.google.pt”>Ir para</a>
No navegador fica assim: Ir para
O elemento “a” refere-se a “anchor”-âncora. O atributo “href” refere-se a hypertext

reference – referência a hipertexto - especifica o destino do link (endereço de internet
ou arquivo).
Com imagem:
<body>
<a href="http://www.treinaweb.com.br">
<img border="0" src="logo.png" />
</a>
</body>
Clica-se na imagem e é direccionado para a página web.
Links entre páginas:
De página 1 para página 2
<a href=”pagina2.html”>página 2</a>
De página 1 para página 3
<a href=”pagina3.html”>página 3</a>
Se estiver na página 2 noutro directório e quiser ir para a página 1
<a href=”../pagina1.html>ir para página 1</a>
Links Internos dentro da própria página
O atributo “id” serve para identificar o elemento, o “nome” do elemento, que será o
destino do link.
<h1 id=”produtos”>Nosso Produto</h1>

Temos um titulo h1 e o seu id “produtos”, para criar um link interno usamos “#” e o id
de referencia dele no link.
<a href=”#produtos”>ir para produtos</a>
Exemplo:
<body>
<a id="topo" href="#dom"><h5>DOM</h5></a>
<a href="#xml"><h5>XML</h5></a>
<a href="#ajax"><h5>AJAX</h5></a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p id="dom">
<b>DOM</b><br>
Document Object Model.<br />
<a href="#topo">Subir</a>
</p><br />
<p id="xml">
<b>XML</b><br />
Extensible Markup Language.<br />
</p><br />
<p id="ajax">
<b>AJAX</b><br />
Asynchronous Javascript And XML.<br />
</p>
</body>
Link para endereço de e-mail
<a href=”mailto:nelson.duarte31@gmail.com”>o meu email</a>
O utilizador tem que ter um programa de email instalado no pc (Outlook, Windows liv
email, etc).
Exemplo de todos os links:
<body>
<b id="topo">Link para páginas do diretório</b><br><br>
<a href="teste/teste.html">Link para a página teste.html</a><br><br>
<b>Link em imagem</b><br><br>
<a href="http://www.w3.org/">
<img src="w3c.jpg">
</a>
<br><br>
<b>Link para endereço de email</b><br><br>
<a href="mailto:contato@site.com.br">Entre em contato com o TreinaWeb</a>
<br><br>
<b>Link interno</b><br><br>
<a href="#la-em-baixo">Vamos descer lá pra baixo da página?</a>
<b id="la-em-baixo">
Opa, você veio aqui pra baixo da página. Quer subir novamente?
Então <a href="#topo">clique aqui</a>
</b>
</body>
Atributo: title
É utilizado para fornecer uma breve descrição do link e é exibido entre aspas.
Exemplo:
<a href=”http://www.google.pt” title =”site de pesquisa”>ir para Google</a>
Adicionar imagens a página.
<img src=”imagem.jpg” alt=”A minha Imagem” />
O atributo alt funciona como o atributo title
Extensões de arquivos de imagens permitidos: JPG / JPEG, GIF, PNG
Inserir imagens localizadas em outros directórios ou até em websites:
<img src=”images/w3c.jpg”>
<img src=”http://www.network.com/w3c.jpg”>
Imagens podem ser links:
<a href=”http://www.treinaweb.com”><img src=”logo.jpg”></a>
Definir largura e altura de uma imagem
Os atributos width e height podem ser usados para definir a altura e largura de uma
imagem em pixéis. Se não forem definidos valores a imagem é inserida no seu
tamanho real.
<img src=”logo.jpg” width=”150 height=”80”>
Tabelas
Apresentam informação em linhas e colunas
<table> começa e termina uma tabela
<tr> significa linha da tabela – começa e termina em uma linha horizontal da tabela.
<td> significa dados da tabela – começa e termina em cada célula contida nas linhas da
tabela.
Exemplo:
<body>
<h1>Tabela com Borda</h1>
<hr />
<table border="1">
<tr>
<td>Célula 1</td>
<td>Célula 2</td>
<td>Célula 3</td>
</tr>
<tr>
<td>Célula 4</td>
<td>Célula 5</td>
<td>Célula 6</td>
</tr>
</table>
</body>
Célula 1 Célula 2 Célula 3

Célula 4 Célula 5 Célula 6
Definir borda da tabela e largura da tabela:
<table border=”1” width=”25%”>
Align: define o alinhamento horizontal da tabela, de uma linha ou da célula: left, right
ou center.
Valign: define o alinhamento vertical de uma célula: top, middle ou bottom.
td align=”left” valign=”top”>célula 1</td>
Colspan: é usada na tag <td> para indicar quantas colunas estarão contidas numa
célula.
Exemplo:
<body>
<table border="1">
<tr>
<td colspan="3">Célula 1</td>
</tr>
<tr>
<td>Célula 2</td>
<td>Célula 3</td>
<td>Célula 4</td>
<td>Célula 5</td>
<td>Célula 6</td>
</tr>
</table>
</body>
rowspan: especifica quantas linhas estão contidas numa célula.
Exemplo:
<body>
<table border="1">
<tr>
<td rowspan="4">Célula 1</td>
<td>Célula 2</td>
</tr>
<tr>
<td>Célula 3</td>
</tr>
<tr>
<td>Célula 4</td>
</tr>
<tr>
<td>Célula 5</td>
</tr>
</table>
</body>
Tag <font>
Permite alterar o tipo de fonte, tamanho e a cor.
<font size=”10” face=”arial” color=”black”>texto</font>
n: varia de 1 a 7 e o 3 é o valor padrão
nome: é o nome da fonte a ser utilizada
côr: cor da fonte, em hexadecimal ou por extenso

Exemplo:
</body>
<font size="5" face="Times New Roman" color="#FF0000">
Fonte Times, tamanho 7 e cor Vermelha.</font><br />
<font size="3" face="Arial" color="blue">
Fonte Arial com tamanho 5 e cor Azul.</font><br />
<font size="2" face="Tahoma" color="#009900">
Fonte Tahoma com tamanho 2 e cor Verde.</font><br />
</body>
Fonte Times, tamanho 7 e cor Vermelha.

Fonte Arial com tamanho 5 e cor Azul.
Fonte Tahoma com tamanho 2 e cor Verde.
A Tag <div>
É bastante utilizada, é considerada uma espécie de container que se pode, através de

um script alterar o conteúdo.
Div é uma tag de bloco muito utilizada por programadores web
<div align=”left”>elementos a serem alinhados</div> (pode ser texto ou imagem)
Onde a posição pode ser: left, right, center, justify.
Exemplo:
<body>
<div align="center"> Texto centrado </div><br />
<div align="left"> Texto alinhado à esquerda </div><br />
<div align="right"> Texto alinhado à direita </div>
</body>
Criar Formulários
<form name=”nome” method=”método” action=”URL”>elementos do

formulário</form>
Method: pode ser POST, que é o mais utilizado, e GET anexa o conteúdo do formulário
ao URL.
Action: especifica o programa ou página do servidor que processara os dados do

formulário.
Name: define o nome do formulário.
Campos input – define um campo de entrada de dados
<input type=”tipo” src=”imagem” name=”nome” value=”valor” size=”tamanho”

maxlength=”comprimento” checked />
Type: define o tipo de variável que pode ser:

<body style="font:Arial">
<h4 style="color:#0033FF">Opinião dos alunos TreinaWeb</h4>
<form action="pagina" method="post">
<b>Nome:</b>
<input type="text" value="" name="txtnome" size="65" />
<br />
<b>Email:</b>
<input type="text" value="" name="txtemail" size="35" />
<b>Idade:</b>
<input type="text" value="" name="txtidade" size="3" />
<br /><hr />
<h4 style="color:#0033FF">Que nota você daria ao site? </h4>
<div style="border-style:solid;border-width:1px">
<input type="radio" value="" name="valor1" checked="checked" />

Excelente<br />
<input type="radio" value="" name="valor1" /> Bom<br />
<input type="radio" value="" name="valor1" /> Razoável<br />
<input type="radio" value="" name="valor1" /> Ruim<br />
</div>
</form>
</body>
Campo Select – define uma lista de itens que podem ser seleccionados pelo utilizador.
<select name=”nome” size=”tamanho” multiple=”multiple”>
<option value=”opt1”>Opção 1</option>
<option value=”opt2”>Opção 2</option>
<option value=”opt3” selected=”selected”>Opção 3</option>
</selected>
option recebe o atributo value, que é o valor da opção, por exemplo ao enviar o
formulário para o servidor, o valor que ele recebera é o que esta no atributo value do
option.
<h4 style="color:#0033FF">Opinião dos alunos TreinaWEB</h4>
<form action="pagina" method="post">
<b>Nome:</b>

<br />
<b>Email:</b>
<br />
<h4 style="color:#0033FF">
Estado civil</h4>
<select name="listbox">
<option value="casado">Casado</option>
<option value="solteiro" selected="selected">Solteiro</option>
<option value="divorciado">Divorciado</option>
<option value="viúvo">Viúvo</option>
</select>
</form>
</body>
Campo textarea – define uma caixa de texto de varias linhas onde o utilizador pode
digitar.
<textarea name=”nome” rows=”n” cols=”n”>texto</textarea>
Name=”nome” define o nome do campo
Rows=”n” define o numero de linhas da caixa
Cols=”n” define o numero de colunas da caixa

Texto: define o texto inicial que aparece
<h4 style="color:#0033FF">Opinião dos alunos TreinaWEB</h4>
<form action="pagina.html" method="post">
<b>Nome:</b>
<br />
<b>Email:</b>
<b>Idade:</b>
<input type="text" value="" name="txtidade" size="3" />
<br />
<hr />
<h4 style="color:#0033FF">Qual sua opinião sobre o

site?</h4>
<textarea name="sugestao" cols="30" rows="5">Escreva aqui</textarea>
<br /><br />
<input type="submit" value="Enviar" />
</form>
</body>
Frames– são divisões da tela do browser em diversa telas podendo apresentar mais do
que uma página de cada vez.
<HEAD>
<TITLE>Curso de HTML - Frames</TITLE>
</HEAD>
<FRAMESET COLS="40%,*" FRAMEBORDER="1" BORDER="5">
<FRAME NAME="Frame_1" SCROLLING="No" NORESIZE
SRC="pagina1.html">
<FRAME NAME="Frame_2" SCROLLING="Auto" NORESIZE
SRC="pagina2.html">
</FRAMESET>
<Framset> …</framset> é utilizada para criar um conjunto de frames e seus

elementos.
<Frame …> é utilizada para definir uma frame (quadro) dentro de ummconjunto de
frames. Não necessita de tag de encerramento .
<body style="background-color:#0099FF">
<h2>Página 1</h2>
</body>
Texto rolante – esta tag coloca uma faixa de texto decorativa animada
<body>
<marquee
align="middle"
behavior="scroll"
bgcolor="#0099FF"
direction="left"
height="5%"
width="30%"
hspace="20"
vspace="20"
loop="infinite"
scrollamount="4"
scrolldelay="20">
</marquee>
</body>

HTML

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

HTML

Enviado por

Direitos autorais:

Formatos disponíveis

TAGS são rótulos usados para informar como deve ser apresentado o website.

Tags de abertura “<comando>” , tags de fechamento “</comando>”

Ex: <b> TreinaWeb curso em negrito</b>

Estrutura de uma página web:

Exemplo: <title>A minha primeira página</title>

<p> é usado para paragrafos</p>

<b>torna o texto negrito</b>

<i>torna o texto itálico</i>

<small>torna a letra do texto pequena</small>

<big> aumenta a fonte e atribui negrito</big>

<tt>aplica um espaçamento regular ao texto</tt>

<sup>faz com que o texto fique sobrescrito</sup>

<sub>faz com que o texto fique subscrito</sub>

<b>TreinaWEB e-Learning</b><br />

<i>TreinaWEB e-Learning</i><br />

<u>TreinaWEB e-Learning</u><br />

<sup>TreinaWEB e-Learning</sup><br />

<sub>TreinaWEB e-Learning</sub><br />

<big>TreinaWEB e-Learning</big><br />

<small>TreinaWEB e-Learning</small><br />

Itens de lista não ordenada

Itens de lista ordenada

<blockquote> - utilizado para a criação de citações

 Style – cor de fundo

<h1>Cor de fundo cinza</h1>

Parágrafo com fundo vermelho e cor da fonte Azul.

Links – para se programarem links utilizam-se uma tag com um elemento e um

<a href=”http://www.google.pt”>Ir para</a>

No navegador fica assim: Ir para

O elemento “a” refere-se a “anchor”-âncora. O atributo “href” refere-se a hypertext

<img border="0" src="logo.png" />

Clica-se na imagem e é direccionado para a página web.

Links entre páginas:

De página 1 para página 2

<a href=”pagina2.html”>página 2</a>

De página 1 para página 3

<a href=”pagina3.html”>página 3</a>

Se estiver na página 2 noutro directório e quiser ir para a página 1

<a href=”../pagina1.html>ir para página 1</a>

Links Internos dentro da própria página

<h1 id=”produtos”>Nosso Produto</h1>

<a href=”#produtos”>ir para produtos</a>

<a id="topo" href="#dom"><h5>DOM</h5></a>

Document Object Model.<br />

Extensible Markup Language.<br />

Asynchronous Javascript And XML.<br />

<a href=”mailto:nelson.duarte31@gmail.com”>o meu email</a>

Exemplo de todos os links:

<b id="topo">Link para páginas do diretório</b><br><br>

<a href="teste/teste.html">Link para a página teste.html</a><br><br>

<b>Link para endereço de email</b><br><br>

<a href="mailto:contato@site.com.br">Entre em contato com o TreinaWeb</a>

<a href="#la-em-baixo">Vamos descer lá pra baixo da página?</a>

Então <a href="#topo">clique aqui</a>

<a href=”http://www.google.pt” title =”site de pesquisa”>ir para Google</a>

Adicionar imagens a página.

<img src=”imagem.jpg” alt=”A minha Imagem” />

O atributo alt funciona como o atributo title

Extensões de arquivos de imagens permitidos: JPG / JPEG, GIF, PNG

Inserir imagens localizadas em outros directórios ou até em websites:

Imagens podem ser links:

<a href=”http://www.treinaweb.com”><img src=”logo.jpg”></a>

Definir largura e altura de uma imagem

<img src=”logo.jpg” width=”150 height=”80”>