Você está na página 1de 6

1

Módulo de Ambiente Web | Profª Kérolyn Melo


Estrututa Básica
<html>
<head>
<title>Título da página</title>
</head>
<body>
Esta é minha primeira página. <b>Este texto está em negrito</b>
</body>
</html>

<html> Define um documento HTML


<body> Define o corpo do documento
<h1> a <h6> Define título 1 a título 6
<p> Define um parágrafo
<br> Insere uma única quebra de linha
<hr> Define um filete horizontal
<!--> Define um comentário
<a href="http://www.w3schools.com/">Visite as W3Schools!</a> Ir para uma outra página ou imagem

Títulos
<h1>Este é um título</h1>
<h2>Este é um título</h2>
<h3>Este é um título</h3>
<h4>Este é um título</h4>
<h5>Este é um título</h5>
<h6>Este é um título</h6>

Tabelas
As tabelas são definidas com a tag <table>. Uma tabela é dividida em linhas (com a tag
<tr>), e cada linha é dividida em células de dados (com a tag <td>). As letras td
significam "table data," que é o conteúdo de uma célula de dados. Uma célula de
dados pode conter texto, imagens, listas, parágrafos, formulários, filetes horizontias,
tabelas, etc.

<table border="1">
<tr>
<td>linha 1, célula 1</td>
<td>linha 1, célula 2</td>
</tr>
2
<tr>
<td>linha 2, célula 1</td>
<td>linha 2, célula 2</td>
</tr>
</table>
Módulo de Ambiente Web | Profª Kérolyn Melo
Listas Não Ordenadas
Uma lista não ordenada é uma lista de itens. As listas de itens são marcadas com
bullets (tipicamente pequenos círculos pretos).

Uma lista não ordenada começa com a tag <ul>. Cada item da lista começa com a tag
<li>.

<ul>
<li>Café</li>
<li>Leite</li>
</ul>

Listas ordenadas
Uma lista ordenada é também uma lista de itens. As listas de itens são marcadas com
números.

Uma lista ordenada começa com a tag <ol>. Cada item da lista começa com a tag <li>.

<ol>
<li>Café</li>
<li>Leite</li>
</ol>

Formulários
Um formulário é uma área que pode conter elementos de formulário.

Os elementos de formulário são elementos que permitem o usuário entrar informação


(como campos de texto, campos de área de texto, menus drop-down, botões radiais,
caixas de seleção, etc.) em um formulário.

Um formulário é definido pela tag <form>.

<form>
<input>
<input>
</form>
3

Entrada (Input)

Módulo de Ambiente Web | Profª Kérolyn Melo


A tag de formulário mais usada é a tag <input>. O tipo de input é especificado com o
atributo type (tipo). Os tipos de input mais cumumente usados são explicados abaixo.

Campos de Texto

Os campos de texto são usados quando você quer que o usuário digite letras,
números, etc. em um formulário.

<form>
Primeiro nome:
<input type="text" name="firstname">
<br>
Último nome:
<input type="text" name="lastname">
</form>

Como aparece no navegador:

Primeiro nome:
Último nome:

Botões Radiais

Botões Radiais são usados quando você quer que o usuário selecione uma entre uma
quantidade limitada de escolhas.

<form>
<input type="radio" name="sex" value="male"> Masculino
<br>
<input type="radio" name="sex" value="female"> Feminino

</form>

Como aparece no navegador:

Masculino

Feminino

Caixas de Seleção

As Caixas de Seleção são usadas quando você quer que o usuário selecione uma ou
mais opções de uma quantidade limitada de escolhas. 4

<form>
<input type="checkbox" name="bike">
Eu tenho uma bicicleta

Módulo de Ambiente Web | Profª Kérolyn Melo


<br>
<input type="checkbox" name="car">
Eu tenho um carro
</form>

Como aparece no navegador:

Eu tenho uma bicicleta

Eu tenho um carro

O Atributo Ação do Formulário (Form's Action) e o Botão Enviar (Submit)

Quando o usuário clica no botão "Enviar", o conteúdo do formulário é enviado para


outro arquivo. O atributo de ação do formulário define o nome do arquivo para o qual
enviar o conteúdo. O arquivo definido no atributo action geralmente faz algo com a
entrada recebida.

<form name="input" action="html_form_action.asp"


method="get">
Nome do Usuário:
<input type="text" name="user">
<input type="submit" value="Enviar">
</form>

Como aparece no navegador:

Nome do Usuário:

Bgcolor

O atributo bgcolor configura o plano de fundo em uma cor. O valor deste atributo
pode ser um número hexadecimal, um valor RGB, ou um nome de cor.

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

Background

O atributo background configura o plano de fundo para uma imagem. O valor do 5


atributo é a URL da imagem que você quer usar. Se a imagem é menor do que a janela
do navegador, a imagem será repetida até preencher a janela inteira do navegador.

<body background="clouds.gif">
Módulo de Ambiente Web | Profª Kérolyn Melo
<body background="http://www.w3schools.com/clouds.gif">

A tag <font> na HTML

Com um código HTML como este, você pode especificar tanto o tamanho quanto o
tipo da saída no navegador

<p>
<font size="2" face="Verdana">
This is a paragraph.
</font>
</p>
<p>
<font size="3" face="Times">
This is another paragraph.
</font>
</p>

Módulo de Ambiente Web | Profª Kérolyn Melo