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

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Apostila html

Apostila html