Faculdade de Excelência Educacional
do Rio Grande do Norte
INTRODUÇÃO À HTML
Curso: Desenvolvimento de Sistemas para Internet
Disciplina: Tecnologia Hipermídia e Multimídia
Prof. Rudson
rudsondant@gmail.com
apostilas.wikidot.com/hipermidia
O que é HTML?



Linguagem de marcação que descreve a
estrutura, o conteúdo e a apresentação de
um documento e sua relação com outros
documentos
Podemos apresentar uma informação e vinculála a outros recursos: texto, áudio, vídeo,
gráficos, etc.
Permite que várias informações sejam exibidas
de forma simultânea
O que é HTML?

Tags

Elementos que compõe a estrutura de um
documento HTML



Uma tag sempre está entre os caracteres: “<” e “>”
Na maioria das vezes, uma tag possui uma tag de
fechamento


Elementos de marcação que definirão como os
navegadores exibirão as informações contidas nas páginas
do sítio
Exemplo: <body> ... </body>
Podem possuir atributos, que definem suas
características ou propriedades
Elementos

<html> ... </html>


Indicam, respectivamente, o início e o fim do
documento
<head> ... </head>


Seção do cabeçalho, definições lógicas
sobre o documento (identificação,
catalogação, título, vínculos, etc.)
<title> ... </title>:
Exemplo1

<HTML>
<HEAD>

<TITLE>Minha Página</TITLE>

</HEAD>

</HTML>

Elementos

<body> ... </body>


<h*> ... </h*>


Definição de todo o conteúdo do documento que
será exibido pelos navegadores
Identificação dos 6 níveis de títulos diferentes em um
documento (* = 1, 2, 3, 4, 5, ou 6)
<p> ... </p>

Definem um bloco de texto como um parágrafo
Exemplo 2





<body>
<h1>Bem Vindo!!!</h1>
Essa é minha primeira página
<p>O que você achou dela?</p>
</body>
Elementos do corpo

<em> ... </em>



<strong> ... </strong>



Enfatizam o texto em negrito
equivalente a <b>...</b>
<br>



Enfatizam o texto em itálico
equivalente a <i>...</i>
insere uma quebra na linha do parágrafo
utilizado para pular linhas
<hr>

insere uma linha horizontal no parágrafo
Exemplo 3





<body>
<h1>Bem Vindo!!!</h1>
<strong>Essa</strong> é minha
<em>primeira</em> página
<p>O que <i>você</i> <b>achou</b>
dela?</p>
<hr>
Ligações e Imagens

<a href=" endereço do link"> Nome do
link</a>



insere um link
href representa o endereço
<img src="nome da imagem"
width="largura" height="altura">




insere uma imagem
src representa o nome do arquivo
width – a largura em pixels
height – altura em pixels
Exemplo 4




<p>Conheça minha páginas
favoritas</p>
<a href="http://html-colorcodes.com/">Cores para Web</a>
<br>
<a
href="http://apostilas.wikidot.com/hipermi
dia">Tecnologia Hipermídia</a>
Exemplo 5



<hr>
<p>Minhas imagens</p>
<img src="PC.jpg" width="200"
height="150">
Exercício

Crie um documento HTML, no bloco de notas,
contendo as seguintes informações:


Cabeçalho (com título: nome meu do seu sítio)
Corpo:





Seu nome (título 1)
Curso (título 2)
Matrícula (título 3)
Lista das disciplinas cursadas
links para 3 páginas que você goste
Download

Introdução à HTML DESENVOLVIMENTO DE SISTEMAS PARA