Aula HTML

AULA DE HTML
Introduo
Criando um documento HTML
Menu Iniciar > Programas > Acessrios > Bloco de notas; No Bloco de notas: Arquivo > Salvar como...; Alterar o tipo de arquivo para: Todos os arquivos; Salvar o arquivo com extenso .html;
AULA DE HTML BSICO
Introduo
Conceitos bsicos sobre HTML
Sigla para HyperText Markup Language (Linguagem de Marcao de Hipertexto);
HTML a linguagem utilizada na comunicao entre o desenvolvedor de uma pgina WEB e o navegador (Internet Explorer, Mozilla Firefox, Safari, ...);
A HTML utiliza identificadores que so chamados de TAG. Essas TAGs indicam ao navegador o elemento a ser exibido;
Cada TAG apresenta uma lista de atributos que podem definir as propriedades dos elementos como aparncia, tamanho, posio, cores, fontes, etc.
Sintaxe das TAGs

As TAGs so palavras definidas, em ingls, e so escritas entre os sinais < e >;
AULA DE HTML BSICO 3
Introduo
Sintaxe das TAGs
As TAGs so palavras definidas, em ingls, e so escritas entre os sinais < e >;
As TAGs devem ser abertas e fechadas para que o navegador saiba de onde e at onde est definido o elemento. Para se fechar uma TAG utilizado o sinal /. Algumas poucas TAGs no necessitam ser fechadas, sendo recomendado a insero do sinal / na TAG de abertura; Exemplos: <tag> ... </tag> <tag/> - TAG aberta e fechada; - TAG que no precisa ser fechada;
AULA DE HTML BSICO
Introduo
Sintaxe das TAGs
Os atributos de uma TAG so inseridos dentro da TAG de abertura e seus valores devem estar entre aspas simples ou dupla. Exemplos: <tag atr1='prop1'> ... </tag> <tag atr1='prop1' atr2="prop2"/>
AULA DE HTML BSICO
TAGs fundamentais
<html> e </html>
Usadas em toda pgina WEB, so a primeira e a ltima TAGs a serem inseridas num documento HTML. Entre elas fica escrita toda a pgina.
<head> e </head>
head (cabea) uma TAG de cabealho. Nela so inseridas as primeiras configuraes da pgina a serem utilizadas durante a interpretao feita pelo navegador. Algumas dessas configuraes so as folhas de estilo, CSS (Cascading Style Sheets), o ttulo da pgina e scripts de execuo; <title> e </title> title (ttulo) a TAG que define o ttulo da pgina e fica inserida dentro de head.
AULA DE HTML BSICO
TAGs fundamentais
<body> e </body>
body (corpo) a TAG onde ficam escritos todos os elementos visveis da pgina: textos, links, imagens, formulrios e etc.
Principais atributos de <body>

bgcolor conjunto de cores: {blue, red, yellow, green, ...};
utilizado para definir a cor de fundo; as cores tambm podem ser representadas com codificao hexadecimal; o nmero de cores distintas disponveis utilizando o sistema RGB (Reb-Green-Blue) de cores (sistema mais simples) supera 16mi. background seleciona uma imagem para plano de fundo;
deve ser inserido o endereo da imagem.

Na prtica...
Exemplo 1 - cdigo
<html> <head> <title>Este o ttulo</title> </head> <body bgcolor='orange'> Ol.
Eu fao parte do corpo da pgina. </body> </html>
AULA DE HTML BSICO
Na prtica...
Exemplo 1 - pgina
AULA DE HTML BSICO
Formatao de textos
Quebra de linha e pargrafo
<br> <p> e </p> quebra de linha; pargrafo.
Principal atributo de <p>

align conjunto de valores: {center, left, right, justify}; utilizado para alinhar um texto; caso no seja definido, o valor padro left.
AULA DE HTML BSICO
10
Na prtica...
Exemplo 2 - cdigo
<body> Um pargrafo com quebra de linhas alinhado ao centro:<p align='center'>"Quem crer pudera, tempo em fora, no meu verso,<br/>Se o vosso alto valor eu proclamasse nele?<br/>Ento e sabe-o o cu como em tumba, ao inverso,<br/>Vossa vida a oculto e o mais que em vs excele.<br/>Dissesse eu o que minha alma em vossos olhos sente,<br/>Vossas graas, fiel, todas enumerasse,<br/>E o futuro diria: Este poeta mente;<br/>Beleza assim no h da terra sobre a face".</p> </body>
AULA DE HTML BSICO
11
Na prtica...
Exemplo 2 - pgina
AULA DE HTML BSICO
12
Formatao de textos
Ttulos
<h1> <h2> <h3> <h4> <h5> <h6> e e e e e e </h1> </h2> </h3> </h4> </h5> </h6> ttulo maior;
ttulo menor.
Principal atributo
align.
AULA DE HTML BSICO
13
Na prtica...
Exemplo 3 - cdigo
<body> <h1>Ttulo 1 (esquerda)</h1> <h2 align='left'>Ttulo 2 (esquerda)</h2> <h3 align='center'>Ttulo 3 (centro)</h3> <h4 align='center'>Ttulo 4 (centro)</h4> <h5 align='right'>Ttulo 5 (direita)</h5> <h6 align='right'>Ttulo 6 (direita)</h6> </body>
AULA DE HTML BSICO
14
Na prtica...
Exemplo 3 - pgina
AULA DE HTML BSICO
15
Formatao de textos
Formataes gerais
<b> e </b> <i> e </i> <u> e </u> <s> e </s> negrito; itlico; sublinhado; riscado;
<font> e </font>
define propriedades da fonte como, tamanho, cor, fundo.
Principais atributos de <font>

size conjunto de tamanhos: {1, ..., 7}, sendo 1 o menor tamanho; utilizado para definir o tamanho do texto;
mesmo conjunto de cores do atributo bgcolor;
color
utilizado para definir a cor da letra.

Na prtica...
Exemplo 4 - cdigo
<body> <h4>Formataes gerais:</h4> Negrito: <b>texto</b><br/> Itlico: <i>texto</i><br/> Sublinhado: <u>texto</u><br/> Riscado: <s>texto</s><br> <font color='red' size='2'>Vermelho tamanho 2</font><br/> <font color='#0000FF' size='5'>Azul tamanho 5</font> </body>
AULA DE HTML BSICO
17
Na prtica...
Exemplo 4 - pgina
AULA DE HTML BSICO
18
Trabalhando com figuras
Insero
<img> insere uma figura.
Principais atributos
align; src border height width indica onde est a imagem; define a espessura da borda; define a altura; define a largura.
AULA DE HTML BSICO
19
Na prtica...
Exemplo 5 - cdigo
<body background='fundo_exemplo.jpg'> <img src='imagem/sol.jpg' border='2px'/> <img src='imagem/sol.jpg' height='100px' width='200px;'/> <img src='imagem/sol.jpg' height='150px'/> </body>
AULA DE HTML BSICO
20
Na prtica...
Exemplo 5 - pgina
AULA DE HTML BSICO
21
Organizao dos elementos

Listas
<ul> e </ul> lista no-ordenada (Unordered List); <ol> e </ol> lista ordenada (Ordered List); <li> e </li> item da lista (List Item); deve ser utilizado dentro da ol ou da ul.
Principal atributo das listas

type conjunto de tipos: {1, a, A, i, I, circle, disc, square}; utilizado para definir o marcador a ser utilizado na lista; a TAG ol utiliza apenas os valores {1, a, A, i, I}; a TAG ul utiliza apenas os valores {circle, disc, square}; a TAG li utiliza qualquer um dos tipos apresentados. pode-se usar o type como none para que no mostre nenhum marcador.
Na prtica...
Exemplo 6 - cdigo
<ol type='i'> <li>Cores: <ul type='square'> <li>Vermelho</li> <li>Verde</li> <li>Azul</li> </ul> </li> <li>Smbolos <ul> <li>Quadrado</li> <li type='disc'>Tringulo</li> <li>Ponto</li> </ul> </li> </ol>
Na prtica...
Exemplo 6 - pgina
AULA DE HTML BSICO
24

Tabelas
<table> e </table> <tr> e </tr> <td> e </td> <th> e </th> tabela; linha da tabela (Table Row); clula (Table Data Cell); clula cabealho (Table Header Cell).
Principais atributos de <table>

border, width, bgcolor, background.
Principais atributos de <tr>

align, bgcolor; valign alinha o contedo do elemento verticalmente; conjunto de valores: {bottom, middle, baseline, top}.

Principais atributos de <td> e <th>
align, valign, bgcolor, background;
colspan define a quantidade de colunas ocupadas pela clula.
AULA DE HTML BSICO
26
Na prtica...
Exemplo 7 - cdigo
<table border='1px'> <tr> <th colspan='3'>Dados</th> </tr> <tr> <th>Nome</th> <th>Sobrenome</th> <th>Idade</th> </tr> <tr> <td>Fernanda</td> <td>Diniz Santana</td> <td>22</td> </tr> </table>
Na prtica...
Exemplo 7 - pgina
AULA DE HTML BSICO
28

Atributos de espaamento de <table>
cellspacing cellpadding define o espao entre as clulas de uma tabela; define o espao entre o contedo de uma clula e sua borda.
AULA DE HTML BSICO
29
Na prtica...
Exemplo 8 - cdigo
<table border='1px' cellspacing='60px' cellpadding='20px'> <tr> <td>Clula 1</td> <td>Clula 2</td> </tr> <tr> <td>Clula 3</td> <td>Clula 4</td> </tr> </table>
AULA DE HTML BSICO
30
Na prtica...
Exemplo 8 - pgina
AULA DE HTML BSICO
31
Estruturao da pgina
Frames
<frameset> e </frameset> define a disposio dos frames (quadros) na pgina; * No pode ser usado junto com a tag body; <frame> e </frame> cria um frame; deve ser usado dentro da tag frameset.
Principais atributos de <frameset>

border; cols define quantas colunas contero frames, informando suas larguras respectivamente.
AULA DE HTML BSICO
32
Estruturao da pgina
Principais atributos de <frame>
src; name frameborder noresize define um nome para o elemento; define se o frame ter borda ou no; conjunto de valores: {no, yes}; matm fixo o tamanho do frame.
AULA DE HTML BSICO
33
Na prtica...
Exemplo 9 - cdigo
<html> <head> <title>Ttulo</title> </head> <frameset cols='30%,55%,15%' border='5px'> <frame name='frame1' src='pagina1.html' frameborder='no' noresize/> <frame name='frame2' src='pagina2.html' frameborder='no'/> <frame name='frame3' src='pagina3.html'/> </frameset> </html>
AULA DE HTML BSICO
34
Na prtica...
Exemplo 9 cdigo de pagina1.html
<html> <head> <title>Ttulo</title> </head> <body bgcolor='orange'> Pgina 1<br/> Laranja </body> </html>
AULA DE HTML BSICO
35
Na prtica...
<html> <head> <title>Ttulo</title> </head> <body bgcolor='blue'> Pgina 2<br/> Azul </body> </html>
AULA DE HTML BSICO
36
Na prtica...
<html> <head> <title>Ttulo</title> </head> <body bgcolor='yellow'> Pgina 3<br/> Amarelo </body> </html>
AULA DE HTML BSICO
37
Na prtica...
Exemplo 9 - pgina
AULA DE HTML BSICO
38
Estruturao da pgina
Frames
<iframe> e </iframe> tag que permite inserir frames dentro da tag body; uma vez que no se pode utilizar frameset junto com body deve-se usar iframe quando precisar inserir algum frame em body.
Principais atributos de <iframe>

frameborder, height, name, src, width.
AULA DE HTML BSICO
39
Na prtica...
Exemplo 10 cdigo
<body> <table width='700px' border='1px'> <tr height='300px'> <td width='150px' valign='top'> Fora do frame! </td> <td> <iframe src='pagina1.html' width='100%' height='100%' frameborder='no'></iframe> </td> </tr> </table> </body>
AULA DE HTML BSICO
40
Na prtica...
Exemplo 10 - pgina
AULA DE HTML BSICO
41
Interatividade da pgina
Link
<a> e </a> tag que permite inserir links n pgina; com esta tag torna-se possvel a navegao em uma pgina web.
Principais atributos de <a>

href target indica a pgina ou arquivo a ser aberto; indica aonde a pgina ou arquivo deve ser aberto; conjunto de valores: {_self, _blank, *}.
AULA DE HTML BSICO
42
Na prtica...
Exemplo 11 cdigo
<table width='700px' border='1px'> <tr height='300px'> <td width='150px' valign='top'> <a href='pagina1.html' target='meuFrame'>Pgina 1</a><br/> <a href='paginaLink.html' target='meuFrame'>Pgina com link</a> </td> <td> <iframe name='meuFrame' src='pagina1.html' width='100%' height='100%' frameborder='no'></iframe> </td> </tr> </table>
Na prtica...
Exemplo 11 cdigo de paginaLink.html
<html> <head> <title>Ttulo</title> </head> <body> <a href='pagina3.html' target='_self'> Abrir pgina 3 </a> </body> </html>
AULA DE HTML BSICO
44
Na prtica...
Exemplo 11 - pgina
AULA DE HTML BSICO
45

Aula HTML

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Aula HTML

Transféré par

Droits d'auteur :

Formats disponibles

AULA DE HTML

AULA DE HTML BSICO

Sintaxe das TAGs

AULA DE HTML BSICO

AULA DE HTML BSICO

AULA DE HTML BSICO

Principais atributos de <body>

deve ser inserido o endereo da imagem.

Eu fao parte do corpo da pgina. </body> </html>

AULA DE HTML BSICO

AULA DE HTML BSICO

Principal atributo de <p>

AULA DE HTML BSICO

AULA DE HTML BSICO

AULA DE HTML BSICO

AULA DE HTML BSICO

AULA DE HTML BSICO

AULA DE HTML BSICO

define propriedades da fonte como, tamanho, cor, fundo.

Principais atributos de <font>

utilizado para definir a cor da letra.

AULA DE HTML BSICO

AULA DE HTML BSICO

Trabalhando com figuras

<img> insere uma figura.

AULA DE HTML BSICO

AULA DE HTML BSICO

AULA DE HTML BSICO

Organizao dos elementos

Principal atributo das listas

AULA DE HTML BSICO

Organizao dos elementos

Principais atributos de <table>

Principais atributos de <tr>

Organizao dos elementos

AULA DE HTML BSICO

AULA DE HTML BSICO

Organizao dos elementos

AULA DE HTML BSICO

AULA DE HTML BSICO

AULA DE HTML BSICO

Principais atributos de <frameset>

AULA DE HTML BSICO

AULA DE HTML BSICO

AULA DE HTML BSICO

AULA DE HTML BSICO

AULA DE HTML BSICO

AULA DE HTML BSICO

AULA DE HTML BSICO

Principais atributos de <iframe>

AULA DE HTML BSICO

AULA DE HTML BSICO

AULA DE HTML BSICO

Principais atributos de <a>

AULA DE HTML BSICO

AULA DE HTML BSICO

AULA DE HTML BSICO

Vous aimerez peut-être aussi