Академический Документы
Профессиональный Документы
Культура Документы
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:
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>
Antes de digitar
Depois de digitar
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
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>
Divs
So definidas pela TAG <div> </div> Usadas para dividir a pgina, assim como Frame. Possuem atributos como:
Id Class Style Align
Divs
Exemplo