Upload
internet
View
106
Download
1
Embed Size (px)
Citation preview
AULA DE
HTML
BÁSICO
2
IntroduçãoIntrodução◊ Criando um documento HTML
AULA DE HTML BÁSICO
• Menu Iniciar > Programas > Acessórios > Bloco de notas;• No Bloco de notas: Arquivo > Salvar como...;• Alterar o tipo de arquivo para: Todos os arquivos;• Salvar o arquivo com extensão .html;
3
IntroduçãoIntrodução◊ Conceitos básicos sobre HTML
AULA DE HTML BÁSICO
• Sigla para HyperText Markup Language (Linguagem de Marcação de Hipertexto);
• HTML é a linguagem utilizada na comunicação entre o desenvolvedor de uma página WEB e o navegador (Internet Explorer, Mozilla Firefox, Safari, ...);
• A HTML utiliza identificadores que são 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 aparência, tamanho, posição, cores, fontes, etc.
◊ Sintaxe das TAGs• As TAGs são palavras definidas, em inglês, e são escritas entre os sinais ‘<’ e ‘>’;
4
IntroduçãoIntrodução◊ Sintaxe das TAGs
AULA DE HTML BÁSICO
• As TAGs são palavras definidas, em inglês, e são 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 não necessitam ser fechadas, sendo recomendado a inserção do sinal ‘/’ na TAG de abertura;
• Exemplos:<tag> ... </tag> - TAG aberta e fechada;
<tag/> - TAG que não precisa ser fechada;
5
IntroduçãoIntrodução
AULA DE HTML BÁSICO
◊ Sintaxe das TAGs• Os atributos de uma TAG são 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"/>
6
TAGs fundamentaisTAGs fundamentais
AULA DE HTML BÁSICO
◊ <html> e </html>• Usadas em toda página WEB, são a primeira e a última TAGs a serem inseridas num documento HTML. Entre elas fica escrita toda a página.
◊ <head> e </head>• head (cabeça) é uma TAG de cabeçalho. Nela são inseridas as primeiras configurações da página a serem utilizadas durante a interpretação feita pelo navegador. Algumas dessas configurações são as folhas de estilo, CSS (Cascading Style Sheets), o título da página e scripts de execução;
• <title> e </title> title (título) é a TAG que define o título da página e fica inserida dentro de head.
7
TAGs fundamentaisTAGs fundamentais
AULA DE HTML BÁSICO
◊ <body> e </body>• body (corpo) é a TAG onde ficam escritos todos os elementos visíveis da página: textos, links, imagens, formulários e etc.
◊ Principais atributos de <body>• bgcolor
utilizado para definir a cor de fundo; as cores também podem ser representadas com codificação hexadecimal; o número de cores distintas disponíveis utilizando o sistema RGB (Reb-Green-Blue) de cores (sistema mais simples) supera 16mi.
conjunto de cores: {blue, red, yellow, green, ...};
• background
deve ser inserido o endereço da imagem.
seleciona uma imagem para plano de fundo;
8
Na prática...Na prática...
AULA DE HTML BÁSICO
◊ Exemplo 1 - código<html>
<head><title>Este é o título</title>
</head><body bgcolor='orange'>
Olá.
Eu faço parte do corpo da página.</body>
</html>
9
Na prática...Na prática...
AULA DE HTML BÁSICO
◊ Exemplo 1 - página
10
Formatação de textosFormatação de textos
AULA DE HTML BÁSICO
◊ Quebra de linha e parágrafo• <br> quebra de linha;• <p> e </p> parágrafo.
◊ Principal atributo de <p>• align
utilizado para alinhar um texto; caso não seja definido, o valor padrão é left.
conjunto de valores: {center, left, right, justify};
11
Na prática...Na prática...
AULA DE HTML BÁSICO
◊ Exemplo 2 - código<body>
Um parágrafo 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/>Então – e sabe-o o céu – como em tumba, ao inverso,<br/>Vossa vida aí oculto e o mais que em vós excele.<br/>Dissesse eu o que minha alma em vossos olhos sente,<br/>Vossas graças, fiel, todas enumerasse,<br/>E o futuro diria: Este poeta mente;<br/>Beleza assim não há da terra sobre a face".</p>
</body>
12
Na prática...Na prática...
AULA DE HTML BÁSICO
◊ Exemplo 2 - página
13
Formatação de textosFormatação de textos
AULA DE HTML BÁSICO
◊ Títulos• <h1> e </h1> título maior;• <h2> e </h2>• <h3> e </h3>• <h4> e </h4>• <h5> e </h5>• <h6> e </h6> título menor.
◊ Principal atributo• align.
14
Na prática...Na prática...
AULA DE HTML BÁSICO
◊ Exemplo 3 - código<body>
<h1>Título 1 (esquerda)</h1><h2 align='left'>Título 2 (esquerda)</h2><h3 align='center'>Título 3 (centro)</h3><h4 align='center'>Título 4 (centro)</h4><h5 align='right'>Título 5 (direita)</h5><h6 align='right'>Título 6 (direita)</h6>
</body>
15
Na prática...Na prática...
AULA DE HTML BÁSICO
◊ Exemplo 3 - página
16
Formatação de textosFormatação de textos
AULA DE HTML BÁSICO
◊ Formatações gerais• <b> e </b> negrito;• <i> e </i> itálico;• <u> e </u> sublinhado;• <s> e </s> riscado;
• <font> e </font> define propriedades da fonte como, tamanho, cor, fundo.
◊ Principais atributos de <font>
• color mesmo conjunto de cores do atributo bgcolor;
• size conjunto de tamanhos: {1, ..., 7}, sendo 1 o menor tamanho;
utilizado para definir a cor da letra.
utilizado para definir o tamanho do texto;
17
Na prática...Na prática...
AULA DE HTML BÁSICO
◊ Exemplo 4 - código<body>
<h4>Formatações gerais:</h4>Negrito: <b>texto</b><br/>Itálico: <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>
18
Na prática...Na prática...
AULA DE HTML BÁSICO
◊ Exemplo 4 - página
19
Trabalhando com figurasTrabalhando com figuras
AULA DE HTML BÁSICO
◊ Inserção• <img> insere uma figura.
◊ Principais atributos
• src indica onde está a imagem;• align;
• border define a espessura da borda;• height define a altura;• width define a largura.
20
Na prática...Na prática...
AULA DE HTML BÁSICO
◊ Exemplo 5 - código<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>
21
Na prática...Na prática...
AULA DE HTML BÁSICO
◊ Exemplo 5 - página
22
Organização dos elementosOrganização dos elementos
AULA DE HTML BÁSICO
◊ Listas• <ul> e </ul> lista não-ordenada (Unordered List);• <ol> e </ol> lista ordenada (Ordered List);• <li> e </li> item da lista (List Item);
◊ Principal atributo das listas
utilizado para definir o marcador a ser utilizado na lista;
• type
a TAG ol utiliza apenas os valores {1, a, A, i, I}; a TAG ul utiliza apenas os valores {circle, disc,
square};
deve ser utilizado dentro da ol ou da ul.
a TAG li utiliza qualquer um dos tipos apresentados.
conjunto de tipos: {1, a, A, i, I, circle, disc, square};
pode-se usar o type como none para que não mostre nenhum marcador.
23
Na prática...Na prática...
AULA DE HTML BÁSICO
◊ Exemplo 6 - código<ol type='i'>
<li>Cores:<ul type='square'>
<li>Vermelho</li><li>Verde</li><li>Azul</li>
</ul></li><li>Símbolos
<ul><li>Quadrado</li><li type='disc'>Triângulo</li><li>Ponto</li>
</ul></li>
</ol>
24
Na prática...Na prática...
AULA DE HTML BÁSICO
◊ Exemplo 6 - página
25
Organização dos elementosOrganização dos elementos
AULA DE HTML BÁSICO
◊ Tabelas• <table> e </table> tabela;• <tr> e </tr> linha da tabela (Table Row);• <td> e </td> célula (Table Data Cell);
◊ Principais atributos de <table>• border, width, bgcolor, background.
• <th> e </th> célula cabeçalho (Table Header Cell).
• align, bgcolor;• valign alinha o conteúdo do elemento verticalmente;
◊ Principais atributos de <tr>
conjunto de valores: {bottom, middle, baseline, top}.
26
Organização dos elementosOrganização dos elementos
AULA DE HTML BÁSICO
◊ Principais atributos de <td> e <th>• align, valign, bgcolor, background;
• colspan define a quantidade de colunas ocupadas pela célula.
27
Na prática...Na prática...
AULA DE HTML BÁSICO
◊ Exemplo 7 - código<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>
28
Na prática...Na prática...
AULA DE HTML BÁSICO
◊ Exemplo 7 - página
29
Organização dos elementosOrganização dos elementos
AULA DE HTML BÁSICO
◊ Atributos de espaçamento de <table>• cellspacing define o espaço entre as células de uma tabela;• cellpadding define o espaço entre o conteúdo de uma célula e sua borda.
30
Na prática...Na prática...
AULA DE HTML BÁSICO
◊ Exemplo 8 - código<table border='1px' cellspacing='60px' cellpadding='20px'>
<tr><td>Célula 1</td><td>Célula 2</td>
</tr><tr>
<td>Célula 3</td><td>Célula 4</td>
</tr></table>
31
Na prática...Na prática...
AULA DE HTML BÁSICO
◊ Exemplo 8 - página
32
Estruturação da páginaEstruturação da página
AULA DE HTML BÁSICO
◊ Frames• <frameset> e </frameset>
define a disposição dos frames (quadros) na página;* Não 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 conterão frames, informando suas larguras respectivamente.
33
Estruturação da páginaEstruturação da página
AULA DE HTML BÁSICO
◊ Principais atributos de <frame>• src;• name define um nome para o elemento;
• frameborder define se o frame terá borda ou não;
conjunto de valores: {no, yes};
• noresize matém fixo o tamanho do frame.
34
Na prática...Na prática...
AULA DE HTML BÁSICO
◊ Exemplo 9 - código<html>
<head><title>Título</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>
35
Na prática...Na prática...
AULA DE HTML BÁSICO
◊ Exemplo 9 – código de pagina1.html<html>
<head><title>Título</title>
</head><body bgcolor='orange'>
Página 1<br/>Laranja
</body></html>
36
Na prática...Na prática...
AULA DE HTML BÁSICO
◊ Exemplo 9 – código de pagina2.html<html>
<head><title>Título</title>
</head><body bgcolor='blue'>
Página 2<br/>Azul
</body></html>
37
Na prática...Na prática...
AULA DE HTML BÁSICO
◊ Exemplo 9 – código de pagina3.html<html>
<head><title>Título</title>
</head><body bgcolor='yellow'>
Página 3<br/>Amarelo
</body></html>
38
Na prática...Na prática...
AULA DE HTML BÁSICO
◊ Exemplo 9 - página
39
Estruturação da páginaEstruturação da página
AULA DE HTML BÁSICO
◊ Frames• <iframe> e </iframe>
tag que permite inserir frames dentro da tag body;
◊ Principais atributos de <iframe>• frameborder, height, name, src, width.
uma vez que não se pode utilizar frameset junto com body deve-se usar iframe quando precisar inserir
algum frame em body.
40
Na prática...Na prática...
AULA DE HTML BÁSICO
◊ Exemplo 10 – código
<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>
41
Na prática...Na prática...
AULA DE HTML BÁSICO
◊ Exemplo 10 - página
42
Interatividade da páginaInteratividade da página
AULA DE HTML BÁSICO
◊ Link• <a> e </a>
tag que permite inserir links ná página; com esta tag torna-se possível a navegação
em uma página web.
◊ Principais atributos de <a>• href indica a página ou arquivo a ser aberto;• target indica aonde a página ou arquivo deve ser
aberto; conjunto de valores: {_self,
_blank, *}.
43
Na prática...Na prática...
AULA DE HTML BÁSICO
◊ Exemplo 11 – código
<table width='700px' border='1px'><tr height='300px'>
<td width='150px' valign='top'><a href='pagina1.html' target='meuFrame'>Página 1</a><br/><a href='paginaLink.html' target='meuFrame'>Página com link</a>
</td><td>
<iframe name='meuFrame' src='pagina1.html' width='100%' height='100%' frameborder='no'></iframe>
</td></tr>
</table>
44
Na prática...Na prática...
AULA DE HTML BÁSICO
◊ Exemplo 11 – código de paginaLink.html
<html><head>
<title>Título</title></head><body>
<a href='pagina3.html' target='_self'>Abrir página 3
</a></body>
</html>
45
Na prática...Na prática...
AULA DE HTML BÁSICO
◊ Exemplo 11 - página