Anda di halaman 1dari 46

CAPACITAO EM WEB: LINGUAGEM HTML Rodolfo Miranda Pereira

Introduo
HTML significa Hypertext Markup Language (Linguagem de marcao de textos) uma linguagem de descrio de documentos orientada por marcadores denominados TAGs.

Introduo
Cada TAG informa ao Browser (Navegador), como ele dever formatar o texto Deve estar dentro dos sinais de menor que (<) e maior que (>). Exemplo: <HTML>, <BODY>, etc. Os TAGs podem ser nicos ou duplos, com incio e fim. Exemplos: TAG nico: <BR> TAG duplo: <P>....</P>

Introduo
Todo o documento HTML fica contido entre os TAGS: <HTML> e </HTML>. Temos duas sees bsicas:

HEAD Contm parmetros de configurao do documento.


BODY Contm o documento em si.

Introduo
A estrutura bsica do documento fica da seguinte forma: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name = KeyWords content = HTML, Web> <title> Ttulo da Home Page </title> </head> <body> *** Contedo da Home Page *** </body> </html>

Introduo
Podemos adicionar atributos as TAGs: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name = KeyWords content = HTML, Web> <title> Ttulo da Home Page </title> </head> <body background = imagem.gif> *** Contedo da Home Page *** </body> </html>

Introduo
Podemos adicionar atributos as TAGs: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name = KeyWords content = HTML, Web> <title> Ttulo da Home Page </title> </head> <body bgcolor = blue> *** Contedo da Home Page *** </body> </html>

Introduo
Podemos adicionar atributos as TAGs: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name = KeyWords content = HTML, Web> <title> Ttulo da Home Page </title> </head> <body bgcolor = 00FF00> *** Contedo da Home Page *** </body> </html>

Introduo
Podemos adicionar atributos as TAGs: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name = KeyWords content = HTML, Web> <title> Ttulo da Home Page </title> </head> <body text = 00FF00> *** Contedo da Home Page *** </body> </html>

Ttulo e Subttulos
TAGs de header (h1 a h6) Exemplo: <h1> Ttulo Principal </h1> <h2> Subttulo </h2> Deixar o texto centralizado: <center> texto </center> Misturando TAGs: <h1><center> texto </center></h1>

Formatao de textos
<p></p> - Cria um pargrafo <br> - Pula uma linha

Formatao de textos
<b>...</b> - Aplica o estilo negrito <i>...</i> - Aplica o estilo itlico <u>...</u> - Aplica o estilo sublinhado

Formatao de textos
<sup>...</sup> - Faz com que o texto fique sobrescrito <sub>...</sub> - Faz com que o texto fique subscrito

Imagens
Uso da TAG <img>, que nica, no exigindo finalizao Uso do atributo src com o endereo da imagem Exemplo: <img src = "figura1.gif"> As imagens devero estar armazenados no seu Provedor de Acesso, juntamente com o documento HTML.

Links
Uso da TAG <a href=endereo> Nome do link </a> Para o prprio documento <a href = #>Nome do link</a>

Para outro documento da mesma pgina <a href=documento.html> Nome do link </a>
Para outra Home Page <a href="http://www.pagina.com.br/">Nome do Link</a>

Listas Ordenadas
Iniciadas pela TAG <ol> Cada item utiliza as TAGs <li> e por fim </ol> Exemplo: <ol> <li> facil fazer uma Home Page <li>Tem que ter pacincia <li>Bons Recursos <li>E no exagerar em imagens. </ol> Resultado: 1. facil fazer uma Home Page 2. Tem que ter pacincia 3. Bons Recursos 4. E no exagerar em imagens.

Listas No-Ordenadas
Iniciadas pela TAG <ul> Cada item utiliza as TAGs <li> e por fim </ul> Exemplo: <ul> <li>HTML <li>PHP <li>CSS </ul> Resultado: HTML PHP CSS

Listas No-Ordenadas
Podemos adicionar o atributo type em ul, o qual pode ser: circle, square ou disc. Exemplo: <ul type = square> <li>HTML <li>PHP <li>CSS </ul> Resultado: HTML PHP CSS

Refresh Page
Pginas que chamam outras depois de um tempo definido Exemplo:
<html> <head> <meta http-equiv = "refresh" content = s;url=documento.html"> <title> Ttulo </title> </head> <body> ***Corpo do Documento*** </body> </html>

Tabelas
Podem ser construdas pela TAG <TABLE></TABLE> A TAG <CAPTION> especifica o ttulo de uma tabela A TAG <TH></TH> usada para especificar as clulas de cabealho da tabela A TAG <TD></TD> especifica as clulas de dados de uma tabela A TAG <TR> indica o fim de uma linha na tabela

Tabelas
Exemplo:
<TABLE> <CAPTION> Nota da primeira avaliao </CAPTION> <TD>Notas/Alunos</TD> <TH>Eduardo</TH> <TH>Ana Lcia</TH> <TR> <TH>Notas</TH> <TD>8,0</TD> <TD>9.3<TD> <TR> <TH>No de Inscrio</TH> <TD>376234809</TD> <TD>387349048</TD> </TABLE>

Tabelas
Adicionando borda e alinhando <TABLE BORDER> <TD>Primeira clula</TD> <TD>Segunda clula</TD> <TD>Terceira clula</TD> <TR> <TD ALIGN="CENTER">Centro</TD> <TD ALIGN="LEFT">Esquerda</TD> <TD ALIGN="RIGHT">Direita</TD> </TABLE>

Tabelas
Adicionando borda e alinhando <TABLE BORDER = 4> <TD>Primeira clula</TD> <TD>Segunda clula</TD> <TD>Terceira clula</TD> <TR> <TD ALIGN="CENTER">Centro</TD> <TD ALIGN="LEFT">Esquerda</TD> <TD ALIGN="RIGHT">Direita</TD> </TABLE>

Formulrios
So construdos entre as TAGs <form> e </form> A TAG <input> especifica uma variedade de campos editveis dentro de um formulrio.

Exemplo genrico: <form> <input type = X name = Y value = Z size = W> </form>

Formulrios Tipo Texto


<form> <input type = text name = nome value = texto. size = 8> </form>

<form> <input type = text name = nome size = 8> </form>

Formulrios Tipo Password


<form> <input type = password name = nome maxlenght = 6> </form>

Antes de digitar

Depois de digitar

Formulrios Tipo Radio


<form> <input type = "radio" name = "nome" value = "sim"> sim <br> <input type = "radio" name = "nome" value = "no"> no </form>

Formulrios Tipo CheckBox


<form> <input type = checkbox" name = Chrome" value = chrome"> Google Chrome <br> <input type = checkbox" name = Firefox" value = firefox"> Mozilla Firefox <br> <input type = checkbox" name = Opera" value = opera"> Opera </form>

Formulrios Tipo TextArea


<form> <textarea name = "nome" cols = 20 rows = 3> texto </textarea> </form>

Formulrios Tipo Select


<form> <select> <option> opo 1 <option> opo 2 <option> opo 3 </select> </form>

Formulrios Tipo Reset


<form> <input type = reset" value = limpar"> </form>

Formulrios Tipo Submit


<form> <input type = submit" value = enviar"> </form>

Atributos da TAG <form>


Dois mtodos de passagem de dos dados: POST (internamente) GET (barra de endereo) Exemplo: <form action = tratarDados.html method = post>

Exerccio: Formulrio Completo

Frames
Os FRAMES so divises de telas do seu browser que permite a utilizao de vrios documentos no formato HTML. Pode ser usado para criao de menus. A TAG frameset possui os atributos rows e cols. A TAG frame possui os atributos: src name scrolling noresize target

Frames
Exemplo:

<html> <head> <title> Ttulo do Documento </title> </head> <frameset rows = "50%,50%" cols = "50%,50%"> <frame src ="exemplo_form.html> <frame src ="exemplo_form.html"> <frame src ="exemplo_form.html"> <frame src ="exemplo_form.html"> </frameset> </html>

Frames

Frames Atributo scrolling


Exemplo: <html> <head> <title> Ttulo do Documento </title> </head> <frameset rows = "50%,30%,20%"> <frame src ="exemplo_form.html scrolling = no> <frame src ="exemplo_form.html scrolling = yes> <frame src ="exemplo_form.html scrolling = auto> </frameset> </html>

Frames Atributo scrolling

Frames Atributo noresize


Exemplo: <html> <head> <title> Ttulo do Documento </title> </head> <frameset rows = 50%,30%,20%> <frame src =exemplo_form.html noresize> <frame src =exemplo_form.html noresize> <frame src =exemplo_form.html noresize> </frameset> </html>

Frames Atributo frameborder


Exemplo: <html> <head> <title> Home Page </title> </head> <frameset rows = "20%,80%" cols = "20%,80%"> <frame frameborder = "no"> <frame src ="exemplo_form.html" frameborder = "no"> <frame src ="exemplo_form.html" frameborder = "no"> <frame src ="exemplo_form.html" frameborder = "no"> </frameset> </html>

Frames Atributo frameborder

Frames Atributo target


Define qual a rea (FRAME) que aparecer o documento especificado pelo link.

Exemplo:
<html> <head> <title> Home Page </title> </head> <frameset rows = "20%,80%" cols = "20%,80%"> <frame frameborder = "no"> <frame src =menu.html" frameborder = "no> <frame src =cabecalho.html" frameborder = "no"> <frame src =corpo.html" frameborder = "no nome = corpo> </frameset> </html>

Link: <a href = formulario.html target = corpo> Inscrio </a>

Divs
So definidas pela TAG <div> </div> Usadas para dividir a pgina, assim como Frame. Possuem atributos como:
Id Class Style Align

O atributo Align pode ter os valores: Left Right Center

Divs

Exemplo

Grupo PET Informtica Site: www.din.uem.br/pet E-mail: petinformaticauem@gmail.com