O documento descreve os principais comandos HTML para estruturar páginas web, incluindo cabeçalhos, parágrafos, fontes, links, listas, imagens e tabelas. Ele explica como usar as tags e parâmetros associados a cada um desses elementos para formatar e estilizar o conteúdo.

1. Aula 004
Aplicativos
PRONATEC
Programa Nacional de Acesso ao
Ensino Técnico e Emprego

2. PRONATEC
Programa Nacional de Acesso
ao Ensino Técnico e Emprego

3. 1. Comandos HTML
• Cabeçalhos: H1, H2, ..., H6 são formatos padronizados no
HTML para produzir textos de cabeçalho de forma
estruturada, assim os textos maiores mais destacados ficam
em H1 e os menores e menos destacados em H6
• As tag H tem o parâmetro ALIGN (alinhar) que pode receber
os valores “right” (a direita), “left” (a esquerda) ou “center”
(ao centro)
• Parágrafo: <P>..</P> contem um parágrafo completo e
também possui o parâmetro ALIGN
• Fonte: <font>..</font> configura o formato do texto a ser
exibido. Os parâmetros mais importantes são COLOR para as
cores HTML, FACE faz com que um conjunto de fontes
auxiliares possam ser usadas caso a principal não esteja
instalada, SIZE informa o tamanho da fonte que pode ser
absoluto (número) ou relativo (+/-)

4. 2. Mais comandos HTML
• A tag body já vista tem alguns parâmetros
importantes: BGCOLOR informa a cor de fundo da
sua página, BACKGROUND informa uma imagem
para ser mostrada no fundo da página como uma
marca d’água,TEXT informa a cor do texto normal,
LINK informa a cor dos links para outros
documentos e VLINK é a cor dos links já visitados
• <center>..</center> centraliza o conteúdo
• <hr> pode ter os parâmetros: COLOR para cor da
linha, SIZE para o comprimento e WIDTH para a
largura do traço que pode ser um valor absoluto ou
um valor percentual

5. 3. Sobre Links
• Uma das tags mais importantes do HTML é tag de link para outras páginas
html, isso é o conceito principal por trás do hipertexto
• <a href=“pagina2.html”>Página 2</a> - essa tag mostra o texto “Página 2”
de cor diferenciada indicando que se você passa como o mouse nele e
clica irá abrir o documento indicado pelo parâmetro “href” – nesse caso
“pagina2.html”
• URL – Uniform Ressource Locator – Localizador de Recurso Universal, são
assim chamados todos os endereços eletrônicos da internet para se abrir
algum site, normalmente se compõe de 3 partes: protocolo, domínio,
pasta e documento
• Protocolo: http, https, ftp são os mais usados na web. HTTP é o padrão
para textos, FTP somente é usado para transferência de arquivos.
• Domínio varia de acordo com o nome registrado na internet, por exemplo
www.gontijoamaral.com
• Pasta e documento, pasta é onde fica no domínio o documento descrito,
por exemplo: “aula/aula4.pptx”
• Montando a URL: http://www.pronatec.com/aula/Aula4.pptx

6. 4. Mais sobre Links
• Um link pode referenciar uma URL qualquer mas também
pode referenciar outra parte da própria página em que está
usando. Para isso devemos criar uma âncora com o
parâmetro “NAME” e depois referenciá-lo
• Ex: <a name=“parte1”>Parte 1</a> depois em outro local do
documento você coloca
• <a href=“#parte1”>Vai para a parte 1</a> e ao clicar nesse
link o navegador volta para o título “Parte 1” que está
ancorado como “parte1”. A “#” (tralha) serve para indicar
que o link se refere a uma âncora e não a uma URL
• Você pode usar URL junto com âncora para ir para um
determinado ponto de outro documento. Assim: <a
href=“www.pronatec.com/aula4.html#parte1”> indica para
o navegador abrir o documento html “aula4.html” no
domínio “www.pronatec.com” e deslocar para a âncora
“parte1” do mesmo.

7. 5. Listas
• <ul>..</ul> cria uma lista dos textos dentro da tag
• <li>..</li> cria um item quando dentro da tag <ul>
• Exemplo:
<ul>
<li>Material da aula 1</li>
<li>Material da aula 2</li>
<li>Material da aula 3</li>
</ul>
• Esse exemplo cria uma lista com 3 itens dentro

8. 6. Imagens
• <img> insere um arquivo imagem definido pelo
parâmetro “src”. Ex: <img src=“c:foto.jpg”> irá
mostrar a imagem do arquivo “c:foto.jpg” no local
onde está o comando na página
• Use os parâmetros WIDTH e HEIGHT para definir a
largura e altura da imagem a ser exibida. Pode ser
valor absoluto (pontos) ou percentual
• O parâmetro BORDER coloca uma moldura em volta
da imagem na cor definida por BORDERCOLOR
• VSPACE e HSPACE definem o espaço vertical e
horizontal da imagem para o texto onde ela está
inserida
• ALIGN indica o alinhamento da imagem na linha do
texto onde ela é exibida: TOP, MIDDLE, LEFT, RIGHT

9. 7. Tabelas
• Uma tabela é uma planilha: linhas x colunas
• <table>..</table> cria uma tabela
• <tr>..</tr> cria uma linha na tabela
• <td>..</td> cria uma coluna na linha
• Então a ordem é: TABELA tem LINHA que tem COLUNA
• Exemplo: Cria uma tabela com 3 linhas e 3 colunas
<table>
<tr>
<td>Coluna 1 na Linha 1</td>
<td>Coluna 2 na Linha 1</td>
<td>Coluna 3 na Linha 1</td>
</tr>
<tr>
<td>Coluna 1 na Linha 2</td>
<td>Coluna 2 na Linha 2</td>
<td>Coluna 3 na Linha 2</td>
</tr>
<tr>
<td>Coluna 1 na Linha 3</td>
<td>Coluna 2 na Linha 3</td>
<td>Coluna 3 na Linha 3</td>
</tr>
</table>

10. 8. Tabelas - parâmetros
<TABLE border=numero cellspacing=numero
cellpadding=numero width=numero
align=alinhamento bgcolor=cor bordercolor=cor>
BORDER: Especifica a largura da linha das bordas que separam
as células da tabela. Se
não for especificado, não será exibido uma borda para a
tabela.
CELLSPACING: Especifica o espaçamento em pixels entre as
células.
CELLPADDING: Espaçamento entre o conteúdo e a borda da
célula.
WIDTH: Largura da tabela em pixels.
ALIGN: Alinhamento da tabela na página. Pode ser right, left
ou center.
BGCOLOR: Especifica a cor de fundo de toda a tabela
BORDERCOLOR: Especifica a cor das bordas da tabela

11. 9. Linhas - parâmetros
<TR align=alinhamento valign=alinhamento bgcolor=cor
bordercolor=cor>
ALIGN: Alinhamento horizontal do conteúdo da linha:
right, left, center ou justify
VALIGN: Alinhamento vertical do conteúdo da linha: top,
middle ou bottom
BGCOLOR: Especifica a cor de fundo da linha
BORDERCOLOR: Especifica a cor de borda da linha

12. 10. Coluna - parâmetros
<TD align=alinhamento valign=alinhamento bgcolor=cor
bordercolor=cor nowrap colspan=numero rowspan=numero>
ALIGN: Alinhamento horizontal do conteúdo da célula: right,
left, center ou justify
VALIGN: Alinhamento vertical do conteúdo da célula: top,
middle ou bottom
BGCOLOR: Especifica a cor de fundo da célula
BORDERCOLOR: Especifica a cor de borda da célula
NOWRAP: Indica para não quebrar a linha dentro da célula
COLSPAN: Número de colunas que esta célula deverá ocupar
ROWSPAN: Número de linhas que esta célula deverá ocupar