Download - Tecnologias para Internet - 2015.2 - Aula 2
Objetivos
Aula 2: Introdução ao HTML
• Introduzir a linguagem HTML• Enquadrar a tecnologia em sua
respectiva camada na arquitetura de sistemas Web
• Definir e apresentar as principais tags HTML
• Fazer com que o aluno crie seu primeiro documento HTML
2
Introdução ao HTML
• HTML
– Hypertext Markup Language, ou linguagem de marcação de hipertexto;
– Utilizada na descrição e produção de páginas Web;– Lembre-se: Não é uma linguagem de
programação!!– Composta por uma série de TAGs de marcação;
4
Introdução ao HTML
• Tags HTML
– Palavras chave, digitadas entre < e > (Ex.: <b>);– Normalmente são utiilizadas em pares. Ex.:• <b>Texto em negrito</b>
– Onde:• <b> - Tag de abertura;• </b> - Tag de fechamento;
7
Introdução ao HTML
• Exemplo de um documento HTML:
– Digite o exemplo acima em um editor de texto simples, como o notepad, gedit ou Notepad++;
– Salve o arquivo com a extensão .htm ou .html8
<html><body>
<h1>Meu primeiro título</h1><p>Meu primeiro título</p>
</body></html>
Introdução ao HTML
• Onde:
– O texto entre <html> e </html> descreve a página Web;
– O texto entre <body> e </body> será o conteúdo visível da página;
– O texto entre <h1> e </h1> é apresentado em destaque, como um título;
– O texto entre <p> e </p> é apresentado em um parágrafo;
9
Introdução ao HTML
• Do que eu preciso para escrever documentos HTML?– Um editor de texto:• Bloco de Notas;• Notepad++;• Gedit (Linux);• Entre outros;
– OBS: Sempre salve os arquivos com a extensão .html ou .htm
– Um navegador Web:• Firefox, IE, Chrome, etc.;
10
Exemplos de Tags HTML
Tags de Título São definidas através das tags <hx> e </hx>, onde o x
define o nível do título, através de um número de 1 a 6; Exemplos:
12
<html><body>
<h1>Título da página</h1><h2>Subtítulo</h2><h3>Subtítulo do subtítulo</h3>
</body></html>
Exemplos de Tags HTML
Tag de Parágrafo É definida através das tags <p> e </p>; Exemplos:
13
<html><body>
<p>Sport Club do Recife</p><p>Campeão Brasileiro de 87</p><p>Campeão da Copa do Brasil de 2008</p>
</body></html>
Exemplos de Tags HTML
Tag de Link É definida através das tags <a> e </a>; Exemplos:
14
<html><body>
<a href=”http://www.sportrecife.com.br”>Ir para o site do Sport Club do Recife</a>
</body></html>
Exemplos de Tags HTML
Tag de Imagem É definida através das tag <img>; Exemplos:
15
<html><body>
<img src=”bandeira.jpg” width=”104” height=”142” />
</body></html>
Exemplos de Tags HTML
Linhas HTML A tag <hr/> cria uma linha horizontal em uma página
HTML, podendo ser usada para separar conteúdo; Exemplo:
16
<html><body>
<p>Sport Club do Recife</p><hr/><p>Campeão de 87!!!</p>
</body></html>
Exemplos de Tags HTML
Comentários HTML Comentários podem ser inseridos em um código HTML
para torná-lo mais legível e compreensível; São ignorados pelo navegador e não são apresentados;
17
<html><body>
<!-- Isto é um comentário --><p>Parágrafo</p>
</body></html>
Exemplos de Tags HTML
Quebras de Linha HTML Use a tag <br/> caso deseje pular uma linha em
um documento HTML; Exemplo:
18
<html><body>
Parágrafo<br/>Parágrafo
</body></html>
Elementos HTML
Elementos HTML Um elemento HTML é o conjunto formado por
uma tag de abertura, uma tag de fechamento e seu conteúdo (o que estiver entre as tags);
20
<html><body>
<a href=”http://www.sportrecife.com.br”>Ir para o site do Sport Club do Recife</a>
</body></html>
Um elemento HTML
Elementos HTML
Sintaxe dos elementos HTML Um elemento HTML começa com uma tag de abertura e
termina com uma tag de fechamento; O conteúdo de um elemento HTML é tudo aquilo que está
entre tags; Vários elementos HTML não tem conteúdo (como a tag de
imagem); Elementos sem conteúdo são fechados na própria tag de
abertura (como na tag de imagem); Vários elementos HTML podem ter atributos (como na tag
de imagem e de link);
21
Elementos HTML
Aninhamento de elementos HTML Alguns elementos HTML podem ser aninhados,
isto é, podemos inserir elementos HTML como conteúdo de outros elementos;
22
<html><body>
<p>Sport Club do Recife</p><p><img src=”fig.jpg” widht=”200” height=”10” /></p><p><b>O melhor do Nordeste</b></p>
</body></html>
Atributos HTML
Atributos HTML Atributos fornecem informações adicionais aos
elementos HTML; Elementos HTML podem ou não ter atributos; Atributos são sempre especificados nas tags de
abertura; Atributos são formados pelo seguinte conjunto:
nome=”valor” Valores de atributos sempre devem estar
delimitados por aspas duplas ou simples;24
Atributos HTML
Exemplo de atributo HTML Links HTML são definidos pela tag <a>. O
endereço do link é especificado pelo atributo href;
25
<html><body>
<a href=”http://www.sportrecife.com.br”>Ir para o site do Sport Club do Recife</a>
</body></html>
Tags de formatação
Tags de formatação em HTML HTML fornece tags como <b> (negrito) e <i>
(itálico) para formatação de texto; Exemplo:
27
<html><body>
<b>Este texto será exibido em negrito</b><br/><i>Este texto será exibido em itálico</i>
</body></html>
Tags de formatação
Tag de formatação de fontes em HTML A partir da tag <font>, podemos formatar a cor, tamanho
e tipo de fontes a ser utilizada no conteúdo do referido elemento;
Exemplo:
28
<html><body>
<font size=“5” face=“arial” color=“red”>Tamanho 5, fonte arial, cor vermelha</font>
</body></html>
Prática em Laboratório
• Faça um documento HTML que estruture um currículo online (o seu!)– A atividade vale de 0 a 1 ponto para a nota do 1º estágio;– Data de entrega: Até 18/08/2015
• Enviar os arquivos para [email protected]
– Critérios de avaliação: Conteúdo (uso de texto, imagem, vídeo, etc.), Formatação, Organização do Código e Pesquisa (o aluno pesquisou e utilizou tags não apresentadas em sala de aula);
– Os documentos deverão ser editados APENAS através dos softwares Notepad++, Notepad ou Gedit;
30