02 - HTML

Autoria Web
HTML
Introduo a HTML e as principais tags
da linguagem
Thiago Miranda dos Santos Souza
Autoria Web
Contedos
Os materiais de aula, apostilas e outras informaes
estaro disponveis em:
www.thiagomiranda.net
Autoria Web
Objetivos
Apresentar a HTML
Apresentar as principais Tags do HTML
Autoria Web
Evoluo
Autoria Web
Evoluo
Autoria Web
Evoluo
Autoria Web
Evoluo
Autoria Web
Evoluo
Autoria Web
Evoluo
Autoria Web
Evoluo
Autoria Web
Evoluo
Autoria Web
Evoluo
Autoria Web
Evoluo
Autoria Web
Evoluo
Autoria Web
Evoluo
Autoria Web
Evoluo
Autoria Web
Evoluo
Autoria Web
Evoluo
Autoria Web
Evoluo
Autoria Web
Evoluo
Autoria Web
Evoluo
Atualmente
Autoria Web
HTML
HTML significa linguagem de marcao de hipertextos.
Utilizada para construo de pginas para Internet.
Na forma de documentos interpretados por aplicativos
denominados navegadores (browser).
Um hipertexto um documento que combina textos,
imagens, sons, vdeos, animaes, interaes e ligaes com
outros documentos.
Autoria Web
HTML
Hyper Text Markup Language:
no uma linguagem de programao;
- Linguagem de Marcao
Documento HTML:
formato texto, portanto pode ser feito em
qualquer editor simples de texto;
extenso .htm ou .html;
visualizado no navegador (eg. firefox, ie,
chrome);
Autoria Web
HTML
Um documento HTML formado atravs de

etiquetas (TAGs), as quais so constitudas na
forma <...>
A maioria das etiquetas tem uma correspondente
de abertura <...> e outra de fechamento </...>
Ex: <HTML>
</HTML>
Podem ser escritas em maisculas ou minsculas.
Autoria Web
Tags HTML
Tags HTML so palavras-chave entre colchetes
angulares como <html>
Tags HTML normalmente vm em pares, como
<strong> e </ strong>
A primeira tag em um par a tag de incio, a segunda
tag a tag final
Marca inicial e final so tambm chamados de
abertura tags e fechamento de tags
Documentos HTML = Pginas Web
Autoria Web
Sintaxe HTML
Tag:
<tag> ... </tag>
Tag com atributos:
<tag atributo1=... atributo2=...> ... </tag>
Tag sem marcador final:
<tag />
Tag com atributos e sem marcador final:
<tag atributo1=... atributo2=... />
Autoria Web
Exemplo HTML
Abrir o Bloco de Notas e digitar o seguinte texto:
<html>
<head>
</head>
<body>
<h1>Pgina de Teste</h1>
<p> Ol!
Este um exemplo de cdigo HTML.</p>
</body>
</html>
Criar uma pasta com seu nome e Salvar o arquivo com o
nome exemplo1.html
Autoria Web
Exemplo HTML
O texto entre <html> e </html> descreve
a pgina web
O texto entre <body> e </ body> o
contedo da pgina visvel
O texto entre <h1> e </ h1> exibida
como um ttulo
O texto entre <p> e </ p> exibido como
um pargrafo
Autoria Web
HTML
Autoria Web
HTML
No cabealho vo informaes como:
<title> para definio do ttulo da pgina.
<style> definio de formatao do contedo.
<script> programao de contedo dinmico.
<link> para ligao de arquivos externos.
<meta> define meta informaes da pgina.
Autoria Web
HTML
Comentrios
 para insero de comentrios.
<! Primeira pgina em HTML -->
<html>
<head>
<title>Pgina teste...</title>
</head>
<body>
Primeira pgina em HTML.
<hr color="red">
</body>
</html>
Autoria Web
HTML
Ttulos
<H1> ... </H1>, <H2> ... </H2> e <H3> ... </H3>

<html>
<head>
</head>
<body>
<h1>Ttulo em formato H1</h1>
</body>
</html>
Autoria Web
HTML
Pargrafos
<p> ... </p>

Define um pargrafo com quebra de linha e insero de uma linha de
separao entre os pargrafos.
<html>
<head>
</head>
<body>
<p>Este um pargrafo.</p>
<p>Este um segundo pargrafo.</p>
</body>
</html>
Autoria Web
HTML
Formatao do texto
<em>... </em> nfase com a mesma formatao

do Itlico
<strong> </strong> nfase com a mesma
formatao do Negrito
<sup> ... </sup> sobrescrito.
<sub> ... <sub> subscrito.
<blockquote> ... </blockquote> identado.
<address> ... </address> endereo.
<del>...</del> Risca o Texto
Autoria Web
HTML
Tag <br> - Quebra de Linhas
Caso voc queira simplesmente mudar de linha, ao
invs de mudar de pargrafo, coloque a tag <br>
Autoria Web
HTML
Tag <hr> - Linha
Uma tag que desenha uma linha na tela. Pode ser
utilizada para separar contedo.
HTML
Listas Ordenadas
Uma lista ordenada inicia com <ol> e finaliza

com </ol>
Cada item da lista inicia por <li> e finaliza com </li>
<ol>
<li>Caf</li>
<li>Leite</li>
</ol>
HTML
Listas Ordenadas
Uma lista ordenada consiste em criar uma lista com

numerao.
A tag para criar uma lista ordenada a tag ol
(ordened list).
Cada item da lista deve ter o comando li (list item):
<ol>
<li> Primeiro item da lista </li>
<li> Segundo item da lista </li>
</ol>
HTML
Listas Ordenadas
O comando ol tem os seguintes parmetros:

Start escolher em que posio sua lista ira iniciar
Type escolher o tipo de numerador pra lista entre: 1
/i/I/a/A
<ol start=3 type=a>

</ol>
HTML Listas Desordenadas

Uma lista desordenada consiste em criar uma lista
com marcadores.
A tag para criar uma lista ordenada a tag ul
(unordened list).
Cada item da lista deve ter o comando li (list item):
<ul>
</ul>
HTML Listas Desordenadas

O comando ul tem os seguintes parmetros:
Type escolher o tipo de marcador pra lista entre:
square / circle / disc
<ul type=square>
</ul>
Autoria Web
Endereos na Internet
Um objeto na internet possui uma URL
Tambm conhecido como endereo eletrnico

Exemplos:
Portal do IFBA:
http://www.ifba.edu.br
Facebook:
http://www.facebook.com.br/
Site de busca do Google:
http://www.google.com
Autoria Web
Endereo Absoluto
O endereo absoluto inclui o protocolo, o domnio e
o caminho no servidor para a pgina ou localizao
do recurso
http://www.ifba.edu.br/index/informatica.html
independente da pgina atual.
Autoria Web
Endereo Relativo
o endereo para a localizao do objeto a partir da
pgina atual
Usar o domnio e o caminho da pgina que est
visualizando para montar a URL dos objetos
Autoria Web
Endereo Relativo
o endereo para a localizao do objeto a partir da
pgina atual
Usar o domnio e o caminho da pgina que est
visualizando para montar a URL dos objetos
Autoria Web
HTML
Hyperlinks
<a> ... </a>
Permite a criao de elos entre pginas ou sees

de um hiperdocumento.
Autoria Web
HTML
Criao de elos entre documentos

<! Primeira pgina em HTML -->
<html>
<head>
</head>
<body>
<a href="segundo.html>Leva a prxima pgina.</a>
</body>
</html>
Autoria Web
HTML
Imagens
<img src=arquivo alt=texto alternativo/>

Permite a insero de imagens em um documento
HTML.
src define o caminho e nome do arquivo a ser inserido.
alt define um texto alternativo caso a imagem no seja
carregada.
Ex: <img src="barco.gif" alt=Um barco" />
HTML
ALT
O parmetro alt utilizado para quando a imagem
no for carregada exibir um texto(no mesmo local
da imagem) ALTernativo, este texto tambm
exibido quando o cursor estiver sobre a imagem.
<img src=bat.jpg alt=Cartaz do Batman>
HTML
Imagens
WIDTH e HEIGHT
Atributos de dimenso largura e altura da
imagem, em pixels. Grande parte dos
Uma das vantagens de se usar esses atributos
que o browser pode montar mais rapidamente as
pginas, por saber de antemo o espao que
dever ser reservado a elas.
Formato:
<img src="endereo_imagem alt="descrio_imagem
width="largura" height="altura>
Autoria Web
HTML
Imagens
Com o comando img podemos inserir uam imagem na pgina.

<img src=caminho\da\imagem>
Existem parmetros para:
Alterar altura e largura: height / width , os valores devem ser em pixel(no
utiliza nenhum simbolo) ou porcentagem (%)
<img src=foto.jpg width=10%>

<img src=foto.jpg width=100>
No primeiro exemplo a imagem ser exibida com largura de
10% de seu tamanho original, j no segundo a imagem ser
exibida com largura de 100 pixels.
HTML
Criando Tabelas
Uma tabela formada por linhas e colunas

Linha
Coluna
HTML
Criando Tabelas
Para criar a tabela anterior segue cdigo:

<table>
<tr>
<td> .... </td>
<td> .... </td>
<td> .... </td>
</tr>
<tr>
<td> .... </td>
<td> .... </td>
<td> .... </td>
</tr>
</table>
HTML
<table> ABRE UMA TABELA
<tr> ABRE UMA LINHA
<td> Segunda </td> UMA COLUNA
<td> Tera </td> UMA COLUNA
<td> Quarta </td> UMA COLUNA
<td>Quinta</td> UMA COLUNA
</tr> FECHA UMA LINHA
</table> FECHA A TABELA

02 - HTML

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

02 - HTML

Transféré par

Droits d'auteur :

Formats disponibles

Autoria Web

Thiago Miranda dos Santos Souza

Thiago Miranda dos Santos Souza

Thiago Miranda dos Santos Souza

Thiago Miranda dos Santos Souza

Thiago Miranda dos Santos Souza

Thiago Miranda dos Santos Souza

Thiago Miranda dos Santos Souza

Thiago Miranda dos Santos Souza

Thiago Miranda dos Santos Souza

Thiago Miranda dos Santos Souza

Thiago Miranda dos Santos Souza

Thiago Miranda dos Santos Souza

Thiago Miranda dos Santos Souza

Thiago Miranda dos Santos Souza

Thiago Miranda dos Santos Souza

Thiago Miranda dos Santos Souza

Thiago Miranda dos Santos Souza

Thiago Miranda dos Santos Souza

Thiago Miranda dos Santos Souza

Thiago Miranda dos Santos Souza

Thiago Miranda dos Santos Souza

Thiago Miranda dos Santos Souza

Um documento HTML formado atravs de

Thiago Miranda dos Santos Souza

Thiago Miranda dos Santos Souza

Thiago Miranda dos Santos Souza

Thiago Miranda dos Santos Souza

Thiago Miranda dos Santos Souza

Thiago Miranda dos Santos Souza

Thiago Miranda dos Santos Souza

<H1> ... </H1>, <H2> ... </H2> e <H3> ... </H3>

Thiago Miranda dos Santos Souza

<p> ... </p>

Thiago Miranda dos Santos Souza

<em>... </em> nfase com a mesma formatao

Thiago Miranda dos Santos Souza

Thiago Miranda dos Santos Souza

Uma lista ordenada inicia com <ol> e finaliza

Uma lista ordenada consiste em criar uma lista com

O comando ol tem os seguintes parmetros:

<ol start=3 type=a>

HTML Listas Desordenadas

HTML Listas Desordenadas

Tambm conhecido como endereo eletrnico

independente da pgina atual.

Permite a criao de elos entre pginas ou sees

Thiago Miranda dos Santos Souza

Criao de elos entre documentos

Thiago Miranda dos Santos Souza

<img src=arquivo alt=texto alternativo/>

Ex: <img src="barco.gif" alt=Um barco" />

Thiago Miranda dos Santos Souza

Com o comando img podemos inserir uam imagem na pgina.

<img src=foto.jpg width=10%>

Thiago Miranda dos Santos Souza

Uma tabela formada por linhas e colunas

Para criar a tabela anterior segue cdigo:

Vous aimerez peut-être aussi