Capitulo 1 - Linguagem HTML

Sistemas de
Informação
CAPITULO 1 10º Ano

Curso Profissional
Técnico de Multimédia
Linguagem
HTML Prof. Alexandre Lourenço
Objectivos
 Enumerar e distinguir as Tags do HTML
 Compreender e definir as limitações do HTML
Criação de páginas web
Estrutura de uma página Html
<HTML>
<TITLE> Aqui fica o título da página</TITLE>
<BODY>
<H1> Título com o nível mais elevado</H1>
<p> Aqui fica um parágrafo</p>

</BODY>
</HTML>
Comentários

Títulos pré-definidos
<h1> Título com o nível 1 </h1>
<h2> Título com o nível 2 </h2>
Parágrafos
Para criarmos um novo parágrafo:
<p>
</p>
<br> - cria uma quebra de linha
<p align = “center”> - parágrafo alinhado ao centro

<p align = “left”> - parágrafo alinhado à esquerda
<p align = “right”> - parágrafo alinhado à direita
Linhas horizontais
<hr>
<hr width=“50%”>
Formatação de textos
Formatação de texto
<H1> Este é o título maior </h1>
<H6> Este é o subtítulo menor </h6>
<H2 align=right> Este título fica alinhado à direita </h2>
<FONT Face=“Verdana”, “ArialBlack”, “Futura”>
<FONT size=10>
<FONT size=-1>
<FONT color=#FF0000> <!–- cor vermelha -->

FORMATAÇÃO DE TEXTO EM
HTML
<B> Texto em negrito </B>
<I> Texto em itálico </I>
<U> Texto sublinhado </U>

Tags de Estrutura
Função Tag Attributos Tag

Ínicio Fim
Ficheiro <html> none </html>

HTML
Cabeçalho <head> none </head>
Título <title> none </title>
Comentários 

tag de fim
Body <body> background="nome do ficheiro" </body>

bgcolor="colo"
text="color"
link="color"
vlink="color"
Division <div> align="right/left/center" </div>

style="property:value;"
class="classname"
Span (inline) <span> style="property:value;" </span>

class="classname"
Listas
LISTAS DE ITENS EM HTML
<OL>Lista ordenada</OL>
<UL>Lista não ordenada </UL>
<LI> Adicionar item à lista </LI>

Inserção de imagens
<img src=“montanhas.jpg”>
<img src=“C:\montanhas.jpg”>
Atributo Align  Middle  Left Bottom Top  Right
<img scr=“montanha.jpg” border=5>
<img scr=“montanha.jpg” heigth=50 width=150>

Tabelas
<TABLE>…</TABLE> Define o ínicio e fim da tabela <TABE border=3>
<TR> define uma linha na tabela <TABE cellpading=3>
<TR colspan=3>
<TH> define cada célula de cabeçalho da tabela
<TD> define o conteúdo de cada célula da tabela <TD IMG SRC=“I1.jpg”>

União de células - rowspan e colspan
Hiperligações
 <a href = "http://www.google.com">google</a>
 <a href = "http://www.google.com"

target="_blank">google numa janela</a>
 <a href = "http://www.google.com"><img src = "

imagem.jpg" alt = "google"></a>
 <a href="mailto:enderço de email">

<A HREF=“http://www.externatobenedita.net”>ecb</a> hiperligações
<A HREF=“listas.htm”>Listas</a>
<A HREF=“montanha.htm”><img src”montanhas.jpg”></a>
HIPERLIGAÇÕES EM HTML
<A NAME=“Texto”>Formatação de texto</a>
<A HREF=“#Texto”>Formatação de texto</a>

<FRAMESET ROWS=“20%, *”>
<FRAME SRC=“Titulo.htm”>
<FRAME SRC=“Direita.htm” Name=“Direita”>
<A HREF=“direita.htm#Texto” Target”direita”>

<BLINK> Texto que deve piscar </BLINK>
<font color=#00BFFF><b><blink>Novo!</font></b></blink></font>
<MARQUEE BEHAVIOR=EFEITO>TEXTO QUE SE MOVIMENTA</MARQUEE>

ANIMAÇÕES
<MARQUEE BEHAVIOR="ALTERNATE"><IMG
SRC="../FIG/ESTREL01.GIF"></MARQUEE>
Formulários
legend
Formulários
Input type = “text”
Input type = “radio”

Input type = “checkbox”
fieldset
Input type = “submit”
Input type = “reset”

Formulários
<input type = “tipo” name=“ ” value =“”>
Tipo: checkbox; text; password; radio
nome – identifica o campo
Value – identifica o valor do campo

Conjunto de opções
<select name = "c-postal">
<option> 1000-001 LISBOA </option>
<option> 2040-001 LEIRIA </option>
<option>2000-001 PORTO</option>
<option selected = "selected" >2475-001
BENEDITA</option>
</select>
Área de texto
<textarea name=“nome da área de texto" rows
=“numero de linhas" cols=“nume de colunas">
Texto que fica dentro da área
</textarea>

Capitulo 1 - Linguagem HTML

Enviado por

Dados do documento

Descrição 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

Capitulo 1 - Linguagem HTML

Enviado por

Direitos autorais:

Formatos disponíveis

Sistemas de

CAPITULO 1 10º Ano

<p> Aqui fica um parágrafo</p>

<br> - cria uma quebra de linha

<p align = “center”> - parágrafo alinhado ao centro

<H1> Este é o título maior </h1>

<H6> Este é o subtítulo menor </h6>

<H2 align=right> Este título fica alinhado à direita </h2>

<FONT Face=“Verdana”, “ArialBlack”, “Futura”>

<FONT color=#FF0000> <!–- cor vermelha -->

<B> Texto em negrito </B>

<I> Texto em itálico </I>

<U> Texto sublinhado </U>

Função Tag Attributos Tag

Ficheiro <html> none </html>

Cabeçalho <head> none </head>

Título <title> none </title>

Comentários

Body <body> background="nome do ficheiro" </body>

Division <div> align="right/left/center" </div>

Span (inline) <span> style="property:value;" </span>

LISTAS DE ITENS EM HTML

<UL>Lista não ordenada </UL>

<LI> Adicionar item à lista </LI>

Atributo Align  Middle  Left Bottom Top  Right

<img scr=“montanha.jpg” border=5>

<img scr=“montanha.jpg” heigth=50 width=150>

<TABLE>…</TABLE> Define o ínicio e fim da tabela <TABE border=3>

<TR> define uma linha na tabela <TABE cellpading=3>

<TD> define o conteúdo de cada célula da tabela <TD IMG SRC=“I1.jpg”>

 <a href = "http://www.google.com"

 <a href = "http://www.google.com"><img src = "

 <a href="mailto:enderço de email">

<A HREF=“montanha.htm”><img src”montanhas.jpg”></a>

<A HREF=“#Texto”>Formatação de texto</a>

<FRAME SRC=“Direita.htm” Name=“Direita”>

<A HREF=“direita.htm#Texto” Target”direita”>

<MARQUEE BEHAVIOR=EFEITO>TEXTO QUE SE MOVIMENTA</MARQUEE>

Input type = “radio”

Input type = “reset”

Tipo: checkbox; text; password; radio

nome – identifica o campo

Value – identifica o valor do campo

Texto que fica dentro da área

Você também pode gostar