Embed Size (px)
Citation preview
HTML
MultimídiaProf.: 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><H2>Este é um cabeçalho de nível 2</H2><H3>Este é um cabeçalho de nível 3</H3><H4>Este é um cabeçalho de nível 4</H4><H5>Este é um cabeçalho de nível 5</H5><H6>Este é um cabeçalho de nível 6</H6>
Separadores
Quebra de linha: usamos o elemento <br>Parágrafo: usamos o elemento <p>Exemplo: Parágrafo 1;<br> linha 1 do parágrafo 1, <br>linha 2 do
parágrafo 1.<P>Parágrafo 2;<br> linha 1 do parágrafo 2, <br>linha 2 do parágrafo 2.
<P> tem atributo de alinhamento, como os cabeçalhos:
Exemplo:
<P ALIGN=CENTER>Assim como os trens, as boas idéias às vezes chegam com atraso. <BR>(Giovani
Guareschi)</P> <P ALIGN=RIGHT>Como diz o provérbio chinês: “É
melhor passar por ignorante uma vez do que permanecer ignorante para sempre”.</P>
<P ALIGN=LEFT>Este é o alinhamento padrão (default), e por isso não vou colocar nenhuma frase especial.</P>
ALINHAMENTOS
Linha Horizontal
<HR> insere uma linha horizontalHR 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
assumeos 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
<B> Quando disponível no browser, émostrado em negrito (em alguns browsers, pode aparecer sublinhado)
<I> Itálico (em alguns casos, caracteres inclinados)
<U> Sublinhado; deve ser usado com cuidado, pois confunde-se com a apresentação de links.
Formatação de textos
Cores e Tamanhos
Introduzidos através dos elementos fontCores:<FONT COLOR="#rrggbb">Texto</FONT>
Tamanho:<FONT SIZE=tamanho_da_letra>Texto</FONT>Exemplo: <FONT SIZE=+2>Letra maior</FONT>
Letra normal
<FONT SIZE=-2>Letra menor</FONT>
Fontes
Utilizamos o atributo face para o tipo de fonte:
Exemplo:<FONT FACE="Verdana" COLOR="#0000AA">Fonte Verdana
azul</FONT>
<FONT FACE="Arial" COLOR="#00AA00">Fonte Arial verde</FONT>
<FONT FACE="Courier New" COLOR="#AA0000">Fonte Courier New vermelha</FONT>
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=100height=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><head><title>Frames</title></head><frameset rows=“15%,*,75” border=1><frame src=“pagina1.html”><frame src=“pagina2.html”><frame src=“pagina3.html”>
</frameset:</html>
O atributo rowscorresponde as linhas divisórias
da pagina
Trabalho Frames
� Criar uma página toda em htmlonde haja 3 páginas no mesmo corpo. O site serásobre produtos para 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.
R$500,00Placa-mãe
PreçoDescriçãoProduto
