HTML

Competências Digitais
Básico de HTML
Introdução
 O que é uma página WEB?
• É um documento composto por texto e
códigos especiais chamados tags;
• Pode conter também sons, imagens, links
para outros documentos e códigos de
programação;
• As páginas podem ser codificadas num editor
de texto comum.
Introdução (2)
 As páginas são “interpretadas” pelo
Browser e apresentadas;
 O código HTML é independente de
plataforma, sistema operacional ou
hardware.
HTML
 HTML não é uma linguagem em si;
 Trata-se apenas de comandos
específicos para formatação e
apresentação de componentes gráficos.
 HTML - Hypertext Markup Language
HTML (2)
 Todo o HTML é estruturado em tags.
 Uma tag tem o seguinte formato:
• <nome_da_tag>Conteudo_da_tag</nome_da_tag>
 A grande maioria das tags ocorre em pares e
pode ser utilizada de maneira aninhada.
Estrutura Básica de uma Página
<html>
<head>
<title> Titulo da Página </title>
</head>
<body>
 Parágrafo 1 
</body>
</html>
Cabeçalhos
 Tags de cabeçalho servem para definir tópicos
em um documento HTML.
 Os tipos de cabeçalhos podem ser:
• <h1> Cabeçalho nível 1 </h1>
Espaços
 Espaços em branco não tem sentido em
HTML. O browser substitui qualquer
sequência de espaços por um único
espaço simples.
 Se quisermos forçar uma sequência de
espaços em branco, devemos substituir
o espaço em branco por &nbsp
Quebras de Linha
 Para produzir uma quebra de linha em
HTML não basta apenas dar <enter> no
código.
 É preciso utilizar um caracter especial:
 
Parágrafos
 Uma forma mais simples e correta de
produzir um parágrafo em um
documento HTML (melhor do que
colocar uma sequência de quatro
&nbsp) é utilizar a tag:
 Conteúdo_do_Parágrafo
Formatação de Caracter
 Texto_em_negrito 
 Texto_em_itálico 
 Texto_sublinhado 
 Texto_sobrescrito 
 Texto_subscrito 
 <blink> Texto_piscante </blink>
Formatação de Caracter (2)
 Texto_com_ênfase 
 Texto_mais_enfático 
 <big> Tamanho_grande </big>
 Tamanho_pequeno 
Texto sem formatação
 Algumas vezes é necessária a
apresentação de texto sem qualquer
formatação adicional realizada pelo
browser. Para isto, temos a tag:
<pre> Texto_sem_formatação </pre>

Formatação de Fonte
 Para formatar a fonte dos caracteres a
tag é:


Onde:
n : Tamanho da fonte;
face: Nome da fonte;
color: cor da fonte em RGB ou nome.
Listas
 Existem alguns tipos de listas. São elas:
• Listas Ordenadas: <ol>
• Listas Não Ordenadas: <ul>
Listas (2)
 Exemplos:
• Listas Ordenadas:
<ol>
<li> Item 1 </li>
<li> Item 2 </li>
</ol>
Listas (3)
 Exemplos (2):
• Listas não ordenadas:
<ul>
<li> Item 1 </li>
<li> Item 2 </li>
</ul>
Links
 Links em uma mesma página:
• É possível criar links direcionados para uma
mesma página. Para tal, primeiramente é
necessário criar uma âncora (ponto de
referência para onde o link irá apontar)
<a name=“#Nome da âncora”>Texto em destaque</a>

Links (2)
 Links em uma mesma página (2):
• Para criar um link que aponte para a âncora
previamente estabelecida a sintaxe é:
<a href=“#Nome da âncora”>Texto usado como hipertexto</a>

Links (3)
 Links para outras páginas:
• Para direcionar um link para uma outra página basta
usar a sintaxe:
<a href=“intro.htm”>Introdução</a>
<a href=“conceitos.htm#parte2”>Conceitos Básicos</a>
<a href=“biblio/refer.htm”>Referências</a>
<a href=“www.redevalorizar.pt”>Legal</a>
Imagens
 Geralmente GIF, JPG ou PNG
 Sintaxe:
<IMG SRC=“arquivo.gif”>
<IMG ALiGN=“top/middle/BOTTOM” SRC=“paisagem.jpg”>
<IMG SRC=“arquivo.gif” HEIGHT=100 WIDTH=165>
<A HREF=“livro-bd.htm”> <IMG SRC=“korth.gif”> </A>
Cores e Fundos
 Pode alterar as cores e alguns padrões
alterando atributos da tag <body>:
<body bgcolor=#000000 text=#EEEEBB link=#33CCFF

vlink=#CC0000>
<BODY BACKGROUND=“marmore.gif”>
Endereço e Rodapé de Página
 Para dar informações adicionais sobre a
data de criação e o autor da página
usamos a tag:
<address> Informações </address>

Tabelas
 As tabelas servem para a apresentação
de informação de forma tabular, porém
são também um poderoso recurso para
a definição do layout de uma página
HTML.
Tabelas (2)
 Tags:
 <table> : Indica o início de uma tabela
 <caption>: Cria uma legenda para a tabela
 <tr> : (table row) – Cria uma linha na tabela
 <td> : (table data) : Define os dados de uma
celula
 <th> : (table header) : Faz o mesmo que o
<td> porém com a formatação diferenciada
Tabelas (3)
 Atributos importantes:
• align : Define o alinhamento horizontal da célula
• valign: Define o alinhamento vertical da célula
• colspan: Indica quantas colunas da tabela a célula
deve ocupar
• rowspan: Indica quantas linhas da tabela a célula
deve ocupar
• border: Define a espessura da borda da tabela
• width: Define a largura da tabela (em % ou absoluta)
Frames
 Os frames (molduras) permitem
apresentar mais de uma página HTML
no ecrã, simultaneamente.
 É necessário, inicialmente, criar um
documento especial que contém as
definições de todas as janelas.
Frames (2)
<frameset cols=tamanho
frameborder=1/0
framespacing=espaçamento
rows=tamanho>
<frame name=nome scrolling=yes/no
noresize src=endereço>
...
</frameset>
Frames (3)
 Exemplo
<html>
<frameset cols=30%, * >
<frame name=“menu” SRC=“indice.htm”>
<frame name=“texto”>
</frameset>
</html>
Frames (4)
<html>
<head><title>Menu Principal</title>
<base target=“texto”>
</head>
<body>
...
</body>
</html>
Dúvidas

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

Competências Digitais

<pre> Texto_sem_formatação </pre>

<font size=n face=nome color=cor>

<a name=“#Nome da âncora”>Texto em destaque</a>

<a href=“#Nome da âncora”>Texto usado como hipertexto</a>

<body bgcolor=#000000 text=#EEEEBB link=#33CCFF

<address> Informações </address>

Você também pode gostar