HTML

HTML
Linguagem de Marcao de Hipertexto
Introduo
HTML (HyperText Markup Language Linguagem de Marcao de Hipertexto) uma linguagem considerada a base de todas as outras linguagens de desenvolvimento de pginas para WEB. Para conhecermos a linguagem HTML devemos dominar as suas TAGs.
Introduo
O que so tags HTML? As tags html a estrutura onde ser montada nossas pginas html. As Tags so responsveis pelo navegador interpretar o que est entre Elas. Sem elas no seria possvel interpretar a pgina.
ESTRUTURA BSICA DA PAGINA HTML

<html> <head> <title>Escrever titulo da Pagina aqui</title> </head> <body> Texto, tags, tabelas, frames, formularios, imagens, videos, etc. </body>
Elaborado por dr. Incio G. 44

<html> a tag de abertura do html. <head> cabealho da pgina, onde ficam informaes adicionais. </head> tag de fechamento do cabealho. <title> a tag de abertura do ttulo da janela. </title> tag de fechamento do ttulo da janela. Elaborado por dr. Incio G. 55

Exemplo: <html> <head> <title>Meu website</title> </head> <body> Alo Mundo!
Tags: Ttulo da Janela da pgina

<html> <head> <title>Meu website</title> </head> <body> </body> </html>
As so a <h1> ao <h6>. <html> <head>
Tags: Subttulos da Pgina subttulos tags utilizadas para os
<title>Meu website</title> </head> <body>

Elaborado por dr. Incio G. <h1>Um cabealho</h1> 88
Tags: Pargrafo
A tag para o texto pargrafo o <p>. <html> <head> <title>Meu website</title> </head> <body> <h1>Um cabealho</h1>
Tags: Negrito e Itlico

Texto negrito Para colocarmos um texto em negrito devemos adicionar entre a tags <b> e </b>. Exemplo: <b> Este texto deve ser negrito.</b>
Tags: Texto com letras menores letras Para fazermos textos usando
menores podemos usar a tag <small></small>. Exemplo: <html> <head> <title>Meu website</title> Elaborado por dr. Incio G.
1111
Tags: Uso de vrias tags simultaneamente Para utilizarmos vrias tags

simultaneamente devemos aninh-las de forma conveniente. Por exemplo, quando desejamos apresentar um texto a negrito e itlico simultaneamente teremos: <b><i> texto a Negrito e Itlico 1212 </i></b> ou Elaborado por dr. Incio G. <i><b> texto a Negrito
Tags: MAIS TAGS

Existem tags que so abertas e fechadas em nica tag. Estas tags so comandos isolados, ou seja, no contm nenhum texto dentro delas para poder funcionar. A titulo de exemplo temos as tags (a) <br /> que serve para criar uma quebra de linha
Listas
(a)
No Ordenadas
(b) Ordenadas
(a) Listas- No Ordenadas

i)
Lista de definio Lista com booletes

i)
(i) Lista de definio

Para listas de definio, usa-se o tag <DL> para abrir a lista, <DT> para cada item desejado e <DD> para cada subitem.
Elaborado por dr. Incio G.
1616
Exemplo: <html> <head>
(i) Lista de definio
<title> Lista de Difinicao</title> </head> <body> <dl> <dt> Termo aElaboradodefinido</dt> ser por dr. Incio G.
1717
(ii) Lista com booletes

Para lista com booletes, usa-se o tag <ul> para abrir a lista, <li> para cada item desejado. O type especifica o tipo de boolete.
1818
(ii) Lista com booletes

Para lista com booletes, usa-se o tag <ul> para abrir a lista, <li> para cada item desejado. O type especifica o tipo de boolete. <ul type=DISC/SQUARE/CIRCLE> <li> item1</li> <li> item2</li>
Elaborado <li> item3</li> por dr. Incio G. 1919
Exemplo:
(ii) Lista com booletes <ul type= SQUARE>

<li> Programacao Web</li> <li> Introducao a Base de Dados</li> <li> Redes de Computadores</li> <li> Programacao em C#</li> </ul> </body> </html> Elaborado por dr. Incio G. 2020
<html> <head> <title> My Unordened List Web Site </title> </head> <body> <p> <h1> Cadeiras do Curso </h1></p> <hr/>
(b) ListasOrdenadas
(b) Listas- Ordenadas

Para lista ordenada, usa-se o tag <ol> para abrir a lista, <li> para cada item desejado. <ol start=numero/letra type=numero/letra> <li> item1</li> <li> item2</li> <li> item3</li> por dr. Incio G. Elaborado
2222
(b) Listas- Ordenadas

Exemplo:
<html> <head> <title> My Ordened List Web Site </title> </head> <body> <p> <h1> Cadeiras do Curso </h1></p> <hr/> <ol start=1 type=1> <li> Introducao a Base de Dados </li> <li> Programacao em C# </li> <li> Programacao Web </li> <li> Redes de Computadores </li> </ol> </body> </html>
2323
EXERCCIO 1
2424
Construa a seguinte pagina Web
2525
MAIS TAGS
DIV <DIV ALIGN="alinhamento" > </DIV>

RESUMO DE TAGS
Resumo de Tags
Tag <html> <head> <title> <body> <h1/h2/ /h6> <p> <b> <i> <u> <tt> <sub> <sup> Funo Inicio da pgina HTML Cabealho da Pgina Ttulo da pgina Corpo da pgina Subttulos na Pgina Criar Pargrafo Texto a Negrito Texto a Negrito Texto Sublinhado Texto a estilo de mquina Texto Subscrito (ex: para indexao) Texto Elaborado por dr. Incio G. expoentes) Sobrescrito (ex: para
2828
Resumo de Tags (cont.)

Tag <br> <s> <ul> <li> <ol> <dl> <dt> <dd> <div> <font> <blink> Funo Quebra de Linhas Texto riscado Lista no ordenada Item da Lista Lista Ordenada Lista de definio Item a definir Definio do item Usado para alinhamento Para formatao de texto (veremos c/ detalhes) Para por o texto a piscar

Tag Funo Para servir de letreiro <marquee direction=left / right/down/up > Para endereo do autor do documento HTML. <address>  Para Comentrio Para marcar o inicio do pargrafo (Para mais <dd> espao usa-se &nbsp) <blockquote> Para separar o texto com um tabular Para inserir imagens no Body (veremos c/ <img> detalhes) Pr-formatao. O texto aparecer conforme <pre> Elaborado por dr. Incio G. 3030 escrito

Tag <a href > <table> <tr> <td> <frame> Funo Utilizado para criar link (veremos c/ detalhes) Criao de tabelas (veremos c/ detalhes) Criao de linha na tabela Criao de coluna na tabela Diviso da tela do browser de modo a apresentar vrias pginas em simultneo (veremos c/ detalhes) Utilizado para criar formulrios (veremos c/ detalhes)
<form>
3131

Tag <EMBED SRC="musica.mp3" WIDTH="comprimento" HEIGHT="altura" AUTOSTART="true/fals e" LOOP="true/false"> <BGSOUND SRC="musica" LOOP="nmero"> Funo Para exibir vdeos ou tocar musica
Para tocar musica de fundo da pagina at a quantidade de loops. Para infinitas vezes usa se -1. Nem todos browsers reconhecem esta tag. Elaborado por dr. Incio G. 3232
ATRIBUTOS NAS TAGS

Atributos Nas Tags

Antes, tratvamos tags HTML de forma bsica (sem nos preocuparmos com suas propriedades). Daqui para adiante, cada tag ser tratado com suas respectivas propriedades. importante salientar que nem todas Elaborado por dr. Incio G. 3434
Atributos Nas Tags

Para comear, das tags j vistas, vejamos as suas propriedades:
1. Body <body BGCOLOR="cor/ URL da imagem"

3535
Atributos Nas Tags
Fig1
3636
Atributos Nas Tags

EXERCCIO 2 Coloque o fundo da pgina do exerccio 1 a 333cccc.
3737
Atributos Nas Tags

2. Subtitulos <h16 style="backgroundcolor: cor ALIGN=ALINHAMENTO> Alinhamento pode ser LEFT, CENTER, RIGHT ou JUSTIFY .
Atributos Nas Tags

Exemplo: <h1 style=background-color:ff0000 align= CENTER> Este e um exemplo complete sobre Subtitulo </h1>
3939
Atributos Nas Tags

3. Pargrafo <p style="background-color: cor ALIGN=ALINHAMENTO> Alinhamento pode ser LEFT, CENTER, RIGHT ou JUSTIFY .
Atributos Nas Tags

Exemplo: <p style=background-color:ff0000 align= CENTER> Este e um exemplo complete sobre paragrafo </p>
4141
Atributos Nas Tags

4. FONT <FONT FACE="nome da fonte" SIZE="tamanho da fonte" COLOR="cor da fonte"> </FONT> Exemplo: <p style=background-color:ff0000 4242 Elaborado por dr. Incio G.
Atributos Nas Tags

5. IMG <IMG SRC="IMAGEM" ALIGN=Alinhamento WIDTH="LARGURA" HEIGHT="ALTURA" BORDER=NUMERO ALT=Legenda em tooltipe> Align= LEFT, RIGHT, TOP, TEXTOP, Elaborado por dr. MIDDLE, ABSMIDDLE, Incio G.
4343
Acentuao
Acentos:
acute; ~ - tilde; ^ - circ; ` - grave; , - cedil;

Acentuao (cont.)
Regra geral &+ letra+ acento Exemplo 1: = ç = ã Exemplo 2:
4545 Acentuao= Elaborado por dr. Incio G. Acentuação
Tabela de acentos e caracteres especiais em HTML .............. Á

............... á ................. Â ................ â ............... À ............... à ................. Å ................ å ................ Ã ............... ã .................. Ä ................. ä ................. Æ .................. æ ................ É ............... é ................. Ê ................ ê ................ È ............... è .................. Ë ................. ë ................... Ð .................. ð ................ Í ............... í ................. Î ................ î ................ Ì ............... ì .................. Ï ................. ï ........... Ó .............. ó ................ Ô ................. ô .............. Ò ............... ò ................ Ø ............... ø ................ Õ ............... õ .................. Ö ................. ö
.............. Ú ............... ú ................ Û ................ û ............. Ù .............. ù ................. Ü ................. ü ............... Ç ............... ç ............... Ñ ............... ñ < ................. < > ................. > & ................ & " ................. " .................. ® ............... © ............ Ý ............ ý .............. Þ ................ þ ................ ß
4646

HTML

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

HTML

Caricato da

Copyright:

Formati disponibili

HTML

Linguagem de Marcao de Hipertexto

ESTRUTURA BSICA DA PAGINA HTML

ESTRUTURA BSICA DA PAGINA HTML

ESTRUTURA BSICA DA PAGINA HTML

Tags: Ttulo da Janela da pgina

As so a <h1> ao <h6>. <html> <head>

Tags: Subttulos da Pgina subttulos tags utilizadas para os

<title>Meu website</title> </head> <body>

Tags: Negrito e Itlico

Tags: Uso de vrias tags simultaneamente Para utilizarmos vrias tags

Tags: MAIS TAGS

(a) Listas- No Ordenadas

Lista de definio Lista com booletes

(i) Lista de definio

Elaborado por dr. Incio G.

Exemplo: <html> <head>

(i) Lista de definio

(ii) Lista com booletes

Elaborado por dr. Incio G.

(ii) Lista com booletes

(ii) Lista com booletes <ul type= SQUARE>

(b) Listas- Ordenadas

(b) Listas- Ordenadas

Elaborado por dr. Incio G.

Elaborado por dr. Incio G.

Construa a seguinte pagina Web

Elaborado por dr. Incio G.

DIV <DIV ALIGN="alinhamento" > </DIV>

Resumo de Tags (cont.)

Resumo de Tags (cont.)

Resumo de Tags (cont.)

Elaborado por dr. Incio G.

Resumo de Tags (cont.)

ATRIBUTOS NAS TAGS

Atributos Nas Tags

Atributos Nas Tags

1. Body <body BGCOLOR="cor/ URL da imagem"

Atributos Nas Tags

Elaborado por dr. Incio G.

Atributos Nas Tags

Elaborado por dr. Incio G.

Atributos Nas Tags

Atributos Nas Tags

Elaborado por dr. Incio G.

Atributos Nas Tags

Atributos Nas Tags

Elaborado por dr. Incio G.

Atributos Nas Tags

Atributos Nas Tags

acute; ~ - tilde; ^ - circ; ` - grave; , - cedil;

Tabela de acentos e caracteres especiais em HTML .............. &Aacute;

Elaborado por dr. Incio G.

Potrebbero piacerti anche

Tabela de acentos e caracteres especiais em HTML .............. Á