A ULA DE HTML BÁSICO. 2 Introdução Criando um documento HTML A ULA DE HTML BÁSICO Menu Iniciar > Programas > Acessórios > Bloco de notas; No Bloco de

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


• 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


• 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


◊ 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


◊ <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


◊ <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...


◊ 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



◊ Exemplo 1 - página

10

Formatação de textosFormatação de textos


◊ 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



◊ 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




13



◊ 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




<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




16



◊ 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




<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




19

Trabalhando com figurasTrabalhando com figuras


◊ 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



◊ 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




22

Organização dos elementosOrganização dos elementos


◊ 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



◊ 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




25



◊ 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



◊ Principais atributos de <td> e <th>• align, valign, bgcolor, background;

• colspan define a quantidade de colunas ocupadas pela célula.

27



◊ 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




29



◊ 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



◊ 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




32

Estruturação da páginaEstruturação da página


◊ 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



◊ 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



◊ 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



◊ Exemplo 9 – código de pagina1.html<html>


</head><body bgcolor='orange'>

Página 1<br/>Laranja

</body></html>

36





</head><body bgcolor='blue'>

Página 2<br/>Azul

</body></html>

37





</head><body bgcolor='yellow'>

Página 3<br/>Amarelo

</body></html>

38




39



◊ 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



◊ 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




42

Interatividade da páginaInteratividade da página


◊ 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



◊ 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



◊ 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




Documents

A ULA DE HTML BÁSICO. 2 Introdução Criando um documento HTML A ULA DE HTML BÁSICO Menu Iniciar > Programas > Acessórios > Bloco de notas; No Bloco de