Apostila html

HTML

Multimídia
Prof.: Fernanda

Introdução

Hyper Text Markup Language
É a linguagem básica da Internet
Utilizaremos o Bloco de Notas (Notepad)
(Iniciar/Programas/Acessórios/Bloco de
Notas)
Todos os arquivos deverão ser salvos
com a extensão .html

Exemplo 1

A estrutura de um documento HTML
apresenta os seguintes componentes:
<HTML>
<HEAD><TITLE>PRIMEIRO
EXEMPLO</TITLE></HEAD>
<BODY>
texto,
imagem,
links, ...
</BODY>
</HTML>

Cabeçalhos

Há 6 níveis de cabeçalho em HTML, de <h1> a
<h6>
Exemplo:
<H1>Este é um cabeçalho de nível 1</H1>

Separadores

Quebra de linha: usamos o elemento 
Parágrafo: usamos o elemento 
Exemplo:
Parágrafo 1; linha 1 do parágrafo 1, linha 2 do
parágrafo 1.Parágrafo 2; linha 1 do parágrafo 2,
 linha 2 do parágrafo 2.

ALINHAMENTOS

 tem atributo de alinhamento, como os
cabeçalhos:
Exemplo:

Assim como os trens, as boas idéias
às vezes chegam com atraso. (Giovani
Guareschi)
Como diz o provérbio chinês: “É
melhor passar por ignorante uma vez do que
permanecer ignorante para sempre”.
Este é o alinhamento padrão (default), e
por isso não vou colocar nenhuma frase especial.

Linha Horizontal

<HR> insere uma linha horizontal
HR SIZE=7> insere uma linha de largura 7 (pixels)
<HR WIDTH=50%> insere uma linha que ocupa 50% do
espaço horizontal disponível
<HR WIDTH=30% ALIGN=RIGHT NOSHADE> insere
uma linha de comprimento 30% (do espaço horizontal
disponível), alinhada à direita, sem efeito tridimensional

Listas

Listas não numeradas:
<UL>
<LI>item de uma lista
<LI>item de uma lista, que pode ser tão grande quanto se
queira, sem que seja necessário se preocupar com a
formatação das margens de texto
<LI>item
</UL>

Listas

Essa lista pode ter marcadores diferentes,
indicados através do atributo TYPE, que
assume
os valores CIRCLE, SQUARE e DISC (default):
<UL TYPE=CIRCLE>
<LI>um item
<LI>mais um item
</UL>

Listas

Listas Numeradas
<OL>
<LI>item de uma lista numerada
<LI>item de uma lista numerada, que pode ser tão grande
quanto se queira, sem que seja necessário se preocupar
com a formatação das margens de texto
<LI>item de lista numerada
</OL>

Formatação de textos

 Quando disponível no browser, é
mostrado em negrito (em alguns
browsers, pode aparecer sublinhado)
 Itálico (em alguns casos, caracteres
inclinados)
 Sublinhado; deve ser usado com
cuidado, pois confunde-se com a
apresentação de links.

Cores e Tamanhos

Introduzidos através dos elementos font
Cores:
Texto
Tamanho:
Texto
Exemplo:
Letra maior
Letra normal
Letra menor

Fontes

Utilizamos o atributo face para o tipo de
fonte:
Exemplo:
Fonte Verdana
azul

Fonte Arial verde

Fonte Courier New
vermelha

Atributos de body

Cor de fundo:
<body bgcolor=#6600FF>
Imagem de fundo:
<body background=#6600FF>

Marquee
É possível obter o efeito de animação de texto, através da formatação
<MARQUEE>

Exemplo:

<MARQUEE BEHAVIOR=SCROLL WIDTH=30%>Texto</MARQUEE>

Ligações (uso de links)

<a href="arquivo.extenção">Texto
Link</a>

ou
< a href="http://www.google.com.br">Google</a>
Para imagens
<a href="arquivo.html"><img src="imagem.gif"></a>

Imagens
É necessário o uso da extensão da
imagem para ser mostrada!
<img src="imagem.jpg">
Para ajuste de tamanho utilizam-
se dois parâmetros ex:
<img src=“Inverno.jpg” width=100
height=100>
*O tamanho da imagem fica a seu critério, neste caso é 100 pixels de
largura, e 100 pixels de altura.

Tabela simples

<table border=1>
<tr>
<td>coluna 1, linha 1</td>
<td>coluna 2, linha 1</td>
</tr>
<tr>
<td>Coluna1, linha 2</td>
<td>Coluna 2, linha 2</td>
</tr>
</table>

Frames

É a divisão do navegador em janelas ex:

Frames

As 3 páginas deverão ser
construídas em separado. Para
juntá-las não usaremos o
comando <body> mas usaremos
o seguinte programação:

Junção das Páginas (Frames)
<html>
O atributo rows
<head> corresponde as
<title>Frames</title> linhas divisórias
da pagina
</head>
<frameset rows=“15%,*,75” border=1>
<frame src=“pagina1.html”>
</frameset:
</html>

Trabalho Frames
Criar uma página toda em html Produto Descrição Preço
onde haja 3 páginas no
mesmo corpo. O site será
sobre produtos para
Placa-mãe R$500,00
computadores.
No 1º frame será o nome da
loja.
No 2º frame deverá ser
mostrada uma tabela, com a
imagem dos produtos (todas
do mesmo tamanho), a
descrição do produto e o
preço. Exemplo ao lado:
No 3º frame deverá ser feito
um menu com 3 opções,
sendo elas Contato, Clube do
Hardware, Equipe de
desenvolvimento do site.

Apostila html

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (13)

Destacado

Destacado (9)

Similar a Apostila html

Similar a Apostila html (20)

Apostila html