março-2001 html hipertext markup language 1 cleiton bassani
Post on 07-Apr-2016
213 Views
Preview:
TRANSCRIPT
HTML HiperText Markup Language 1Março-2001
HTMLHiperText Markup Language
Cleiton Bassani
HTML HiperText Markup Language
2
Introdução
Evolução bbs (apenas texto não formatado) Internet (serviço http) HyTime + SGML HTML (Linguagem de Marcação de HiperTexto)
HTML HiperText Markup Language
3
Edição do HTML Código editado em ASCII comum
Ferramentas: Editores de texto simples (bloco de notas, edit) Editores de texto fonte Editores WYSIWYG
Normalmente com extensão .html
HTML HiperText Markup Language
4
Etiquetas Comandos por etiquetas (TAGS) de HTML
Podem definir a formatacao de uma regiao de texto: <etiqueta>...</etiqueta>
Ou apenas inserir elementos no texto: <etiqueta>
HTML HiperText Markup Language
5
Atributos Todos os elementos podem conter atributos:
<etiqueta atributo1=valor1 atributo2=valor2>...</etiqueta>
Os atributos definem características especiais de uma determinada etiqueta (TAG).
HTML HiperText Markup Language
6
Alô... Alô... Aaalô... Alôôôôô... Alô Mundo
Estrutura básica:<HTML><HEAD><TITLE>Titulo do Documento</TITLE></HEAD><BODY>texto,imagem,links,...</BODY></HTML>
HTML HiperText Markup Language
7
Estruturas Identificadas Seção <HEAD>
Define informações sobre o documento para buscas Ex.: <title> define o título do documento
Seção <BODY> É tudo que deve ser mostrado na janela do browser Pode conter links, imagens, tabelas, formulários, etc
OBS.: As TAGs não são sensíveis à caixa
HTML HiperText Markup Language
8
Formatação de textos Blocos de texto Frases Caracteres Especiais Cores e Fontes Blink Marquee Estilos de texto
HTML HiperText Markup Language
9
Blocos de Texto
<PRE> mantém quebras e tabulações <BLOCKQUOTE> citações longas <ADRESS> formatar endereços e referências
HTML HiperText Markup Language
10
Formatação de Frases Estilos Lógicos
<CITE> títulos de livros, citações curtas <CODE> códigos fonte <DFN> definições de palavras <EM> ênfase <KBD> entrada via teclado <SAMP> indica um resultado <STRONG> ênfase forte <VAR> variáveis ou valores
HTML HiperText Markup Language
11
Formatação de Frases Estilos Físicos
<B> negrito <I> itálico <TT> fonte de espaçamento fixo <U> sublinhado <STRIKE> frase riscada <BIG> frase um pouco maior <SMALL> frase um pouco menor <SUB> sub-escrito <SUP> sobre-escrito
HTML HiperText Markup Language
12
Caracteres Especiais Caracteres especiais são representados por
sequências de escapes: &+<identificador>+;Ex.: Entidade Caracter Entidade Caracter Entidade Caracter
< < á á Á Á
> > â â Â Â
& & à à À À
© © ã ã Ã Ã
® ® ç ç Ç Ç
§ § é é É É
õ õ ê ê Ê Ê
ü ü í í Í Í
Ü Ü ó ó &<ASCII>; Caracter
HTML HiperText Markup Language
13
Cores e Fontes
TAG <FONT> Aceita os atributos:
• COLOR=“#rrggbb”• SIZE=• FACE=
HTML HiperText Markup Language
14
Blink
TAG <BLINK> Frase pisca
HTML HiperText Markup Language
15
Marquee TAG <MARQUEE>
Anima texto Aceita os atributos:
• WIDTH=• DIRECTION=
– RIGHT– LEFT– ALTERNATE
• BEHAVIOR– SCROLL– SLIDE
HTML HiperText Markup Language
16
Ligações (links) TAG <A>
Aceita os atributos:• HREF=• NAME=
Caminho relativo: referencia documentos no mesmo servidor que o do documento atual
Caminho absoluto:referencia documentos em servidor diferente que o do documento atual
Ligações para trechos de documentos:envia para o trecho com determinado nome em um documento
HTML HiperText Markup Language
17
Inserção de imagens TAG <IMG>
Aceita os atributos:• SRC=• ALT=• WIDTH=• HEIGHT=• BORDER=• ALIGN=• ISMAP• VSPACE=• HSPACE=• LOWSRC=
HTML HiperText Markup Language
18
Tabelas<TABLE BORDER=1> <TR><TH COLSPAN=2>Colunas 1 e 2</TH></TR> <TR><TD>linha1, coluna 1</TD><TD> linha 1, coluna
2</TD></TR> <TR><TD>linha 2, coluna 1</TD><TD>linha 2, coluna
2</TD></TR> <TR><TH ROWSPAN=3>3 linhas</TH><TD>uma
linha</TD></TR> <TR><TD>duas linhas</TD></TR> <TR><TD>tres linhas</TD></TR> </TABLE>
HTML HiperText Markup Language
19
Níveis de Texto
Seis níveis de cabeçalhos (de H1 a H6) Ex.: <H1>Texto do Cabeçalho</H1>
Aceita atributos de alinhamento: ALIGN=
• CENTER• RIGHT• LEFT
HTML HiperText Markup Language
20
Separadores
<BR> : Quebra de linha <P>...</P> : Parágrafo
Aceita atributos de alinhamento <HR> : Linha horizontal
Aceita os atributos:• SIZE=• WIDTH=• ALIGN=• NOSHADE
HTML HiperText Markup Language
21
Outra TAG TAG <META>
Atributos: • NAME indica um nome para a informação
• CONTENT a informação relacionada ao NAME
• HTTP-EQUIV provoca ações no browser (mudança de página, etc)
Ex.:<HEAD> <TITLE>Titulo do Documento</TITLE> <META NAME="nome" CONTENT="valor"> <META HTTP-EQUIV="nome" CONTENT="valor"> </HEAD>
HTML HiperText Markup Language
22
Listas
Listas de Definição <DL> Listas Não-Numeradas <UL> Listas Numeradas <OL> Listas e Sub-Listas
HTML HiperText Markup Language
23
Listas de Definição
<DL><DT>termo a ser definido<DD>definição<DT>termo a ser definido<DD>definição</DL>
HTML HiperText Markup Language
24
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>
HTML HiperText Markup Language
25
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>
HTML HiperText Markup Language
26
Listas e Sub-Listas<DL><DT>termo a ser definido<DD>definição <OL> <LI>item de uma lista numerada <UL> <LI>item de uma lista </UL> </OL></DL>
HTML HiperText Markup Language
27
Links Relevantes
Mindy's HTML Workshop - http://mindy.mcadams.com/h/t/m/l/index.html
Tutorial HTML do ICMC-USP - http://www.icmsc.sc.usp.br/manuals/HTML/
HTML HiperText Markup Language
28
FIM
top related