março-2001 html hipertext markup language 1 cleiton bassani

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)


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


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>


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).


6

Alô... Alô... Aaalô... Alôôôôô... Alô Mundo

Estrutura básica:<HTML><HEAD><TITLE>Titulo do Documento</TITLE></HEAD><BODY>texto,imagem,links,...</BODY></HTML>


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


8

Formatação de textos Blocos de texto Frases Caracteres Especiais Cores e Fontes Blink Marquee Estilos de texto


9

Blocos de Texto

<PRE> mantém quebras e tabulações <BLOCKQUOTE> citações longas <ADRESS> formatar endereços e referências


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


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


12

Caracteres Especiais Caracteres especiais são representados por

sequências de escapes: &+<identificador>+;Ex.: Entidade Caracter Entidade Caracter Entidade Caracter

< < á á Á Á

> > â â Â Â

& & à à À À

© © ã ã Ã Ã

® ® ç ç Ç Ç

§ § é é É É

õ õ ê ê Ê Ê

ü ü í í Í Í

Ü Ü ó ó &<ASCII>; Caracter


13

Cores e Fontes

TAG <FONT> Aceita os atributos:

• COLOR=“#rrggbb”• SIZE=• FACE=


14

Blink

TAG <BLINK> Frase pisca


15

Marquee TAG <MARQUEE>

Anima texto Aceita os atributos:

• WIDTH=• DIRECTION=

– RIGHT– LEFT– ALTERNATE

• BEHAVIOR– SCROLL– SLIDE


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


17

Inserção de imagens TAG <IMG>

Aceita os atributos:• SRC=• ALT=• WIDTH=• HEIGHT=• BORDER=• ALIGN=• ISMAP• VSPACE=• HSPACE=• LOWSRC=


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>


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


20

Separadores

<BR> : Quebra de linha <P>...</P> : Parágrafo

Aceita atributos de alinhamento <HR> : Linha horizontal

Aceita os atributos:• SIZE=• WIDTH=• ALIGN=• NOSHADE


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>


22

Listas

Listas de Definição <DL> Listas Não-Numeradas <UL> Listas Numeradas <OL> Listas e Sub-Listas


23

Listas de Definição

<DL><DT>termo a ser definido<DD>definição<DT>termo a ser definido<DD>definição</DL>


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>


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>


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>


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/


28

FIM

março-2001 html hipertext markup language 1 cleiton bassani

Documents