Aula 1 - HTML

HTML
Tcnico em Informtica - FISMA

Professor Rafael Pinto
Ento, o que HTML?

Abreviao para expresso inglesa HyperText Markup
Language, que significa
Hipertexto em portugus.
Linguagem
de
Marcao
de
Tag
Uma Tag uma etiqueta ou marcao que utilizada no
HTML para definir oscomandos de formatao da linguagem;
Um elemento formado por uma tag, que pode conter

atributos, valores e filhos;
Exemplos de Tags
<a>
<head>
<p>
<h1>
<br/>
<font>
Entre outras;
Estrutura bsica de uma pgina

HTML
Uma pgina HTML deve manter sempre uma estrutura bsica, a partir da qual so inseridos outros
elementos com formataes avanadas.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ttulo da pgina</title>
</head>
<body>
Corpo do documento. Texto, imagens, tabelas, etc.
</body>
</html>
Tags bsicas: <html>, <head> e

<body>
<html>: define o incio de um documento HTML e indica ao navegador que
todo contedo posterior deve ser tratado como uma srie de cdigos
HTML;
<head>: define o cabealho de um documento HTML, que traz informaes

sobre o documento que est sendo aberto;
<body>: define o contedo principal, o corpo do documento. Esta a parte

do documento HTML que exibida no navegador. No corpo podem-se
definir atributos comuns a toda a pgina, como cor de fundo, margens, e outras
formataes.
Tag <body>
Permite definir propriedades gerais para toda a pgina.
Por exemplo, possvel determinar a cor do plano de
fundo da pgina, ou usar uma imagem para essa funo,
e a cor dos links em vrias situaes (visitados, no
visitados, clicados).
Atributos de <body>
bgcolor: cor do plano de fundo. Deve ser usado o cdigo hexadecimal ou
o nome da cor (conforme tabela vista mais adiante), assim como em

todos os atributos de cores.
background: URL de uma imagem para ser usada como plano de fundo.
link: cor natural dos links, ou seja, enquanto eles ainda no foram
clicados (o padro azul).
alink: cor dos links quando so clicados (o padro vermelho).
vlink: cor dos links aps serem visitados (o padro roxo).
text: cor do texto da pgina.
Algumas cores para usar no

<body>
Cor
Nome (no HTML)
Cdigo Hexadecimal
Preto
black
#000000
Branco
white
#ffffff
Azul
blue
#0000ff
Amarelo
yellow
#ffff00
Verde
green
#009000
Roxo
purple
#800080
Vermelho
red
#ff0000
Cinza
gray
#000080
Marrom
maroon
#800000
Cabealhos (ttulos)
6 nveis, <h1>, ..., <h6>, sendo <h1> o maior
<h1>Ttulo
<h2>Ttulo
<h3>Ttulo
<h4>Ttulo
<h5>Ttulo
<h6>Ttulo
de
de
de
de
de
de
nvel
nvel
nvel
nvel
nvel
nvel
1</h1>
2</h2>
3</h3>
4</h4>
5</h5>
6</h6>
Alinhando os Cabealhos
possvel alterar o alinhamento dos ttulos definindo seu
atributo align com um dos seguintes valores: center,
left e right;
<h1 align=center>Ttulo de nvel 1 - centralizado</h1>
<h2 align=left>Ttulo de nvel 2 - esquerda</h2>
<h3 align=right>Ttulo de nvel 3 - direita</h3>
Tag <font> - tamanho e cor do

texto
Usando a tag <font> possvel alterar algumas das
caractersticas primordiais do texto como o tipo da fonte
(Arial, Times New Roman, etc), a cor e o tamanho. Essas
propriedades so alteradas com a definio dos atributos
face, color e size, respectivamente, da tag <font>.
Exemplos com a tag <font>

<font face="Arial" size="3" color="blue">Arial 3
Azul</font>
<font face="Times" size="4" color="green">Times 4
Verde</font>
<font face="Courier" size="5" color="red">Courrier 5
Vermelho</font>
Formatao adicional do texto

Existem algumas tags bastante teis que permitem aplicar uma formatao a
um trecho do texto, apenas adicionando as tags de abertura e fechamento antes
e depois do texto a ser formatado, assim como foi visto para a tag <font>.
<b></b>: marca o texto como em negrito (bold).

<i></i>: marca o texto como em itlico (italics).
*<u></u>: marca um texto como sublinhado (underlined).
*<s></s> ou <strike></strike>: marca um texto como riscado.
Observao: as tagas marcadas com asterisco (*) foram descontinuadas na verso
5 da HTML, ou seja, seu uso no mais indicado.
Formatao adicional do texto

cont.
<sub></sub>: marca um texto como subscrito.

<sup></sup>: marca o texto como sobrescrito.
*<center></center>: centraliza o texto.
<sub>subscrito</sub>
<sup>sobrescrito</sup>
Observao: as tagas marcadas com asterisco (*) foram descontinuadas na

verso 5 da HTML, ou seja, seu uso no mais indicado.
Pargrafos e quebras de linha

<br/> - quebra de linha;
<p></p> - sinalizao de um pargrafo;
Alinhamento de Pargrafos
Podemos ainda alterar seu alinhamento para atender s
diversas situaes que surgem no dia-a-dia. Isso pode ser
feito com a definio do atributo align da tag <p>, com
um dos seguintes valores: left (alinhado esquerda), right
(alinhado direita), Center (centralizado) e justify
(justificado).
<p align=left/right/center/justify></p>
Imagens
Inserir imagens na pgina uma das necessidades mais comuns e, por
esse motivo, tambm consideravelmente simples de ser feito. Para esse
fim existe a tag <img>, cujos atributos so mostrados a seguir:
src: caminho completo do arquivo de imagem (incluindo a extenso do

arquivo).
alt: texto alternativo para a imagem, geralmente uma descrio da
mesma.
width: largura da imagem em pixels.
height: altura da imagem em pixels.
Observao: os atributos src e alt so obrigatrios para a tag <img>. Alm
disso, a tag deve ser fechada nela mesma, ou seja, a sintaxe mnima <img
src="caminho" alt="texto"/>
Inserindo Imagens
<img src="Java_05.png" alt="Imagem 1"/>
<img src="Java_05.png" alt="Imagem 2" width="100"/>
<img src="Java_05.png" alt="Imagem 3" height="200"/>
Observaes sobre as imagens

Caso no sejam definidas a largura e/ou a altura, a
imagem ser adicionada pgina em seu tamanho
original.
Ao alterar apenas uma das dimenses, a outra redefinida

proporcionalmente. Caso se deseje alterar tanto a largura
quanto a altura com valores especficos, os dois atributos
devem ser definidos.
Criando Links
<a href=https://www.google.com>Meu Link</a>
<a href="http://www.fisma.edu.br/"><img
src=download.jpg alt="Download"/></a>
<a href=http://www.terra.com.br"><h1>Titulo como
link</h1></a>
Listas
Outra estrutura bastante comum de ser utilizada em
pginas web a lista, que serve pra organizar um
conjunto de itens, sequencialmente ou no. As listas
podem ser ordenadas ou no, ou seja, cada item podem ou
no ter um nmero/letra/smbolo que o identifique
sequencialmente.
As tags para listas ordenadas e no ordenadas so,
respectivamente, <ol></ol> e <ul></ul>. Entre essas
marcaes devem ser inseridos os itens, que levam a tag
<li></li>
Usando listas
Listas ordenadas:
<ol>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
</ol>
Listas no ordenadas:
<ul>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
</ul>
Lista de Definio
usada para apresentar itens com um ttulo seguido de sua definio. A tag
principal desse tipo de lista a <dl></dl>, enquanto os itens so compostos
por duas tags: <dt></td> para o ttulo e <dd></dd> para a definio.
<dl>
<dt>Item 1</dt>
<dd>Definicao do item 1</dd>
<dt>Item 2</dt>
<dt>Item 3</dt>
</dl>
Tabelas
As tabelas so criadas sobre a tag base <table></table>
e dividida em linhas <tr></tr> e colunas <td></td>.
A ordem de hierarquia essa: table > tr > td, uma dentro
da outra. Ou seja, a tabela dividida em linhas que, por
sua vez, so divididas em colunas.
A tag table possui o atributo border, que define a
borda das clulas com um nmero inteiro representando a
espessura.
Exemplo de Uso de Tabela

<table border="1">
<tr>
<td>Linha 1, Coluna 1</td>
</tr>
<tr>
</tr>
</table>
Exerccios
Crie uma pgina que identifique uma cidade. A pgina dever conter dados como
nome da cidade, ano de fundao, populao total, rea, IDH, gentlico, etc. Tais
itens devero aparecer em negrito e itlico (apenas os itens).
Insira dois pargrafos falando sobre a cidade. Um alinhado esquerda e outro
justificado.
Insira 3 imagens da cidade que est sendo apresentada.
Insira uma lista (ordenada) de pontos tursticos e uma lista (no ordenada) de
pontos gastronmicos da cidade.
Crie uma tabela com a distncia da sua cidade (em km) at 3 outras cidades
quaisquer.
Por fim, crie 3 links para sites reais de cidades vizinhas.
Referncias
HTML
bsico
cdigos
HTML
http://www.devmedia.com.br/html-basico-codigoshtml/16596#ixzz3lj7Cxovk
http://www.devmedia.com.br/curso/curso-de-introducaoao-css/385
http://www.devmedia.com.br/curso/curso-de-javascriptcompleto/388
Material cedido pelo Professor Jones Franco.

Aula 1 - HTML

Enviado por

Dados do documento

Título original

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

Aula 1 - HTML

Enviado por

Direitos autorais:

Formatos disponíveis

HTML

Tcnico em Informtica - FISMA

Ento, o que HTML?

Um elemento formado por uma tag, que pode conter

Estrutura bsica de uma pgina

Tags bsicas: <html>, <head> e

<head>: define o cabealho de um documento HTML, que traz informaes

<body>: define o contedo principal, o corpo do documento. Esta a parte

o nome da cor (conforme tabela vista mais adiante), assim como em

Algumas cores para usar no

Nome (no HTML)

Tag <font> - tamanho e cor do

Exemplos com a tag <font>

Formatao adicional do texto

<b></b>: marca o texto como em negrito (bold).

Formatao adicional do texto

<sub></sub>: marca um texto como subscrito.

Observao: as tagas marcadas com asterisco (*) foram descontinuadas na

Pargrafos e quebras de linha

src: caminho completo do arquivo de imagem (incluindo a extenso do

Observaes sobre as imagens

Ao alterar apenas uma das dimenses, a outra redefinida

Exemplo de Uso de Tabela

Você também pode gostar