Você está na página 1de 121
Introdução
Introdução
Introdução
Introdução
Introdução
Introdução
Introdução  HTML é a base para sites da Internet e muitas vezes achamos que
Introdução  HTML é a base para sites da Internet e muitas vezes achamos que
Introdução  HTML é a base para sites da Internet e muitas vezes achamos que
Introdução  HTML é a base para sites da Internet e muitas vezes achamos que

Introdução

HTML é a base para sites da Internet e muitas vezes achamos que é extremamente difícil fazer um site. Isso não

é o caso! Todo mundo pode aprender a fazer um site.

Outros pensam - erroneamente - que softwares avançados

e caros é necessários para fazer sites. É verdade que existem

muitos programas diferentes, que afirmam que eles podem criar um site para você. Alguns mais completos que outros.

Mas se você deseja que seja feito certo, você deve fazê-lo sozinho. Felizmente, é simples e gratuito e você já tem todo

o software que você precisa.

Introdução  O objetivo das nossas aulas é dar-lhe uma introdução fácil, porém, completa e
Introdução  O objetivo das nossas aulas é dar-lhe uma introdução fácil, porém, completa e
Introdução  O objetivo das nossas aulas é dar-lhe uma introdução fácil, porém, completa e
Introdução  O objetivo das nossas aulas é dar-lhe uma introdução fácil, porém, completa e

Introdução

O objetivo das nossas aulas é dar-lhe uma introdução

fácil, porém, completa e correta de como fazer sites. As

aulas partirão do zero e não requer nenhum

conhecimento prévio de programação.

As aulas não pode mostrar-lhe tudo. Então, dedicação

e vontade de aprender são obrigatórios. Mas não se

preocupe - aprender a fazer sites é muito divertido e dá

uma tremenda quantidade de satisfação quando você

consegue!

HTML  Quando acessamos uma página web estamos interessados na informação contida nessa página, seja
HTML  Quando acessamos uma página web estamos interessados na informação contida nessa página, seja
HTML  Quando acessamos uma página web estamos interessados na informação contida nessa página, seja
HTML  Quando acessamos uma página web estamos interessados na informação contida nessa página, seja

HTML

Quando acessamos uma página web estamos

interessados na informação contida nessa página, seja

ela na forma de texto, imagem ou vídeo. O conteúdo

de uma página web é, em geral, escrito na linguagem

HTML (HyperText Markup Language), que é uma

linguagem de marcação originalmente proposta por

Tim Berners-Lee no final da década de 1980. Sua ideia

era disseminar documentos científicos de uma

maneira simples e com uma sintaxe flexível o

suficiente para que mesmo aqueles sem muita

familiaridade com a linguagem pudessem fazer o

mesmo.

HTML  Desde sua proposta até os dias de hoje a linguagem sofreu diversas alterações
HTML  Desde sua proposta até os dias de hoje a linguagem sofreu diversas alterações
HTML  Desde sua proposta até os dias de hoje a linguagem sofreu diversas alterações
HTML  Desde sua proposta até os dias de hoje a linguagem sofreu diversas alterações

HTML

Desde sua proposta até os dias de hoje a linguagem

sofreu diversas alterações em sua especificação de uma

versão para outra, sendo a mais atual a especificação

do HTML5.

As especificações do HTML são publicadas pelo World

Wide Web Consortium, mais conhecido por sua sigla

W3C. Alémdo HTML, o W3C também é responsável

por linguagens como o XML, o SVG e pela interface

DOM (Document ObjectModel), por exemplo.

Mais afinal, o que é HTML?
Mais afinal, o que é HTML?
Mais afinal, o que é HTML?
Mais afinal, o que é HTML?
Mais afinal, o que é HTML?

Mais afinal, o que é HTML?

Mais afinal, o que é HTML?  HTML ( HyperText Markup Language ) é a
Mais afinal, o que é HTML?  HTML ( HyperText Markup Language ) é a
Mais afinal, o que é HTML?  HTML ( HyperText Markup Language ) é a
Mais afinal, o que é HTML?  HTML ( HyperText Markup Language ) é a

Mais afinal, o que é HTML?

HTML (HyperText Markup Language) é a linguagem de marcação predominante de páginas Web. Essa

linguagem consiste basicamente de elementos que são

a forma básica de construção de sites na Internet.

Através desses elementos, é possível realizar inúmeras

operações em textos, como marcar partes específicas

ou criar hiperligações (links), que em suma consistem

de seções clicáveis no documento que, ao serem

acionadas, encaminham o usuário a outro documento

(ou outra seção de um documento).

Mais afinal, o que é HTML?  De certa forma, HTML é a "língua franca"
Mais afinal, o que é HTML?  De certa forma, HTML é a "língua franca"
Mais afinal, o que é HTML?  De certa forma, HTML é a "língua franca"
Mais afinal, o que é HTML?  De certa forma, HTML é a "língua franca"

Mais afinal, o que é HTML?

De certa forma, HTML é a "língua franca" da Internet, pois quase todas as linguagens voltadas para Web,

quando têm seu conteúdo interpretado, retorna texto

em HTML. Linguagens como ASP, PHP e JSP são exemplos disso. De acordo com puristas, HTML não é uma linguagem

propriamente dita, e de certa forma eles tem razão. O

HTML consiste simplesmente de elementos que

mudam propriedades de texto.

Sintaxe (Estrutura de um Documento HTML e Semântica)
Sintaxe (Estrutura de um Documento HTML e Semântica)
Sintaxe (Estrutura de um Documento HTML e Semântica)
Sintaxe (Estrutura de um Documento HTML e Semântica)
Sintaxe (Estrutura de um Documento HTML e Semântica)

Sintaxe (Estrutura de um Documento HTML e Semântica)

Estrutura de um Documento HTML Um documento HTML é estruturado em quatro partes:  DOCTYPE:
Estrutura de um Documento HTML Um documento HTML é estruturado em quatro partes:  DOCTYPE:
Estrutura de um Documento HTML Um documento HTML é estruturado em quatro partes:  DOCTYPE:
Estrutura de um Documento HTML Um documento HTML é estruturado em quatro partes:  DOCTYPE:

Estrutura de um Documento HTML

Um documento HTML é estruturado em quatro partes:

DOCTYPE: Indica que versão do HTML será utilizada;

HTML: Engloba todo documento;

HEAD: Onde concentram-se, em sua maioria, os conteúdos não-visuais;

BODY: Onde concentram-se os conteúdos visuais da página.

Fazendo uma pequena analogia com uma pessoa:

DOCTYPE: Características da família (“Genética”);

HTML: Conjunto que engloba as características da pessoa,

sendo elas:

HEAD: Características de personalidade e estilo da pessoa;

BODY: Características físicas.

Estrutura de um Documento HTML  Esses elementos são obrigatórios em um documento HTML. Todo
Estrutura de um Documento HTML  Esses elementos são obrigatórios em um documento HTML. Todo
Estrutura de um Documento HTML  Esses elementos são obrigatórios em um documento HTML. Todo
Estrutura de um Documento HTML  Esses elementos são obrigatórios em um documento HTML. Todo

Estrutura de um Documento HTML

Esses elementos são obrigatórios em um documento HTML. Todo documento HTML deve ter como

primeira linha o elemento <!DOCTYPE>, seguido do

elemento <html> e de sub-elementos <head> e

<body> dentro deste.

Estrutura de um Documento HTML

Estrutura de um Documento HTML
Estrutura de um Documento HTML
Estrutura de um Documento HTML  Veja um exemplo:
Estrutura de um Documento HTML  Veja um exemplo:
Estrutura de um Documento HTML  Veja um exemplo:
Estrutura de um Documento HTML  Veja um exemplo:

Estrutura de um Documento HTML

Veja um exemplo:

Estrutura de um Documento HTML  Veja um exemplo:
Estrutura de um Documento HTML  Veja um exemplo:
Estrutura de um Documento HTML  Exercícios de Fixação: 1. Na pasta Desktop do seu
Estrutura de um Documento HTML  Exercícios de Fixação: 1. Na pasta Desktop do seu
Estrutura de um Documento HTML  Exercícios de Fixação: 1. Na pasta Desktop do seu
Estrutura de um Documento HTML  Exercícios de Fixação: 1. Na pasta Desktop do seu

Estrutura de um Documento HTML

Exercícios de Fixação:

1.

Na pasta Desktop do seu usuário crie uma nova pasta

com o seu primeiro nome. Dentro dessa pasta crie

outra pasta com o nome html (para facilitar, utilize

apenas letras minúsculas em todas as pastas e

arquivos que criarmos durante o curso).

2.

Agora utilizando um editor de texto crie um novo

arquivo com o nome ola-mundo.html e salve dentro

da pasta html. Em seguida insira o seguinte código

dentro do arquivo ola-mundo.html:

1. <html > 2. <head > 3. <meta http - equiv =“ Content-Type ” content
1. <html > 2. <head > 3. <meta http - equiv =“ Content-Type ” content

1.

<html >

2.

<head >

3.

<meta http - equiv =“Content-Typecontent=“text/html

charset=“UTF-8” />

4.

<title >Exemplo da estrutura básica de um documento HTML </ title >

5.

</ head >

6.

<body >

7.

<p>Olá mundo !</p>

8.

</ body >

9.

</ html >

Abra o arquivo ola-mundo.html em um navegador e veja o

resultado.

Semântica HTML  As regras de codificação de HTML respondem exatamente à forma o qual
Semântica HTML  As regras de codificação de HTML respondem exatamente à forma o qual
Semântica HTML  As regras de codificação de HTML respondem exatamente à forma o qual
Semântica HTML  As regras de codificação de HTML respondem exatamente à forma o qual

Semântica HTML

As regras de codificação de HTML respondem

exatamente à forma o qual o código é escrito. No geral,

elementos em HTML correspondem à Tags que vêm

em pares:

Tag de abertura (Ex.: <title>) e a Tag de fechamento (Ex.: </title>).

De acordo com a especificação, cada tag possui um significado, isto é, o que o conteúdo de um determinado elemento representa. Muitos autores

utilizam o termo semântica HTML ao se referirem ao

uso correto dos significados de cada tag.

Semântica HTML  Ambas as Tags juntas compõem um elemento HTML. Como uma boa prática
Semântica HTML  Ambas as Tags juntas compõem um elemento HTML. Como uma boa prática
Semântica HTML  Ambas as Tags juntas compõem um elemento HTML. Como uma boa prática
Semântica HTML  Ambas as Tags juntas compõem um elemento HTML. Como uma boa prática

Semântica HTML

Ambas as Tags juntas compõem um elemento HTML. Como uma boa prática de programação, todas as Tags

HTML devem ser fechadas, ou seja, ter uma Tag de

abertura e outra de fechamento, conforme o exemplo:

todas as Tags HTML devem ser fechadas, ou seja, ter uma Tag de abertura e outra
todas as Tags HTML devem ser fechadas, ou seja, ter uma Tag de abertura e outra
Semântica HTML  Entre um par de Tags HTML, situa-se seu conteúdo em texto puro,
Semântica HTML  Entre um par de Tags HTML, situa-se seu conteúdo em texto puro,
Semântica HTML  Entre um par de Tags HTML, situa-se seu conteúdo em texto puro,
Semântica HTML  Entre um par de Tags HTML, situa-se seu conteúdo em texto puro,

Semântica HTML

Entre um par de Tags HTML, situa-se seu conteúdo em

texto puro, conforme os exemplos abaixo:

<h1>Meu Sumário</h1>

<p>Meu Parágrafo</p>

Vale ressaltar que nem todos os elementos HTML

possuem Tags de fechamento. Alguns elementos, que

não recebem conteúdo entre a Tag de abertura e de

fechamento, fecham-se automaticamente (Ex.: <br />).

Essas são chamadas de Tags vazias.

Semântica HTML  Para fechar uma Tag vazia, basta pôr uma barra ao fim da
Semântica HTML  Para fechar uma Tag vazia, basta pôr uma barra ao fim da
Semântica HTML  Para fechar uma Tag vazia, basta pôr uma barra ao fim da
Semântica HTML  Para fechar uma Tag vazia, basta pôr uma barra ao fim da

Semântica HTML

Para fechar uma Tag vazia, basta pôr uma barra ao fim da Tag, antes do símbolo de menor-que (>), conforme

demonstrado no exemplo abaixo:

<tagvazia />

ao fim da Tag , antes do símbolo de menor-que (>), conforme demonstrado no exemplo abaixo:
Atributos e valores
Atributos e valores
Atributos e valores
Atributos e valores
Atributos e valores
Atributos e valores
Atributos e Valores  A maioria dos elementos possuem aspectos adicionais que podem ser customizados.
Atributos e Valores  A maioria dos elementos possuem aspectos adicionais que podem ser customizados.
Atributos e Valores  A maioria dos elementos possuem aspectos adicionais que podem ser customizados.
Atributos e Valores  A maioria dos elementos possuem aspectos adicionais que podem ser customizados.

Atributos e Valores

A maioria dos elementos possuem aspectos adicionais que podem ser customizados. Essas opções chamam-se

atributos, aparecem dentro da Tag de abertura e seus

valores são postos sempre entre aspas duplas. O

exemplo a seguir mostra um elemento que contém dois

atributos:

<tag atributo1="valor" atributo2="valor">Texto</tag> Os atributos aparecem sempre dentro da Tag de abertura. Podemos também especificar mais de um

atributo, desde que cada um seja separado com espaço.

Regras de Sintaxe de XHTML  Nas versões mais antigas do HTML, a forma como
Regras de Sintaxe de XHTML  Nas versões mais antigas do HTML, a forma como
Regras de Sintaxe de XHTML  Nas versões mais antigas do HTML, a forma como
Regras de Sintaxe de XHTML  Nas versões mais antigas do HTML, a forma como

Regras de Sintaxe de XHTML

Nas versões mais antigas do HTML, a forma como escrever documentos nessa linguagem era bem menos

“regrada”, o que acarretava em diversos problemas de

compatibilidade, dependendo do navegador utilizado.

Tendo isso em mente, o XHTML (Versão mais estrita e

limpa de HTML, recomendada pela W3C) impôs

algumas novas regras muito importantes de serem

seguidas:

Regras de Sintaxe de XHTML  Nomes de atributos devem estar em minúsculo:  Errado
Regras de Sintaxe de XHTML  Nomes de atributos devem estar em minúsculo:  Errado
Regras de Sintaxe de XHTML  Nomes de atributos devem estar em minúsculo:  Errado
Regras de Sintaxe de XHTML  Nomes de atributos devem estar em minúsculo:  Errado

Regras de Sintaxe de XHTML

Nomes de atributos devem estar em minúsculo:

Errado = <table WIDTH="100%">

Certo =

<table width="100%">

Valores de atributos devem estar entre aspas duplas:

Errado = <table WIDTH=100%>

Certo =

<table width="100%">

Não é permitida minimização de atributos:

Errado = <option selected>

Certo =

<option selected="selected" />

Atributos Padrões  O HTML possui uma lista enorme de elementos, com vastas possibilidades de
Atributos Padrões  O HTML possui uma lista enorme de elementos, com vastas possibilidades de
Atributos Padrões  O HTML possui uma lista enorme de elementos, com vastas possibilidades de
Atributos Padrões  O HTML possui uma lista enorme de elementos, com vastas possibilidades de

Atributos Padrões

O HTML possui uma lista enorme de elementos, com

vastas possibilidades de codificação. No entanto, a

grande maioria deles possui em comum alguns tipos

de atributos. Estes são tidos como “Atributos Padrões”.

As tabelas abaixo mostram alguns atributos

considerados padrões e suportados por quase todos os

elementos HTML:

Definição de Tipo de Documento (DTD)
Definição de Tipo de Documento (DTD)
Definição de Tipo de Documento (DTD)
Definição de Tipo de Documento (DTD)
Definição de Tipo de Documento (DTD)

Definição de Tipo de Documento (DTD)

Definição de Tipo de Documento (DTD) em XHTML  A declaração DOCTYPE é obrigatória, sempre

Definição de Tipo de Documento (DTD) em XHTML

A declaração DOCTYPE é obrigatória, sempre sendo a

primeira linha no documento.

Criado depois da versão 1.0, o XHTML 1.1 é a

recomendação XHTML mais recente da W3C. Baseado

no XHTML 1.0 Estrito (Strict), esta definição consiste

de uma reformulação do DTD o qual se baseou, com a

adição de módulos XHTML. Modularização é um

conceito que fornece uma coleção abstrata de

componentes aos quais o XHTML pode ser expandido.

Definição de Tipo de Documento (DTD) em XHTML  Esse conceito têm como intuito ajudar

Definição de Tipo de Documento (DTD) em XHTML

Esse conceito têm como intuito ajudar o XHTML a expandir seu alcance para novas plataformas, como por

exemplo dispositivos móveis e TVs com suporte a Web. Para declara em seu site que ele segue o padrão da

família XHTML 1.1, você deve digitar na primeira linha

do seu arquivo HTML o seguinte texto:

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML

1.1//EN”

“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

Definição de Tipo de Documento (DTD) em HTML5  Vale ressaltar que HTML5 será o

Definição de Tipo de Documento (DTD) em HTML5

Vale ressaltar que HTML5 será o novo padrão

para HTML, XHTML, e HTML DOM. Atualmente, está

em fase de esboço, porém diversos navegadores já

implementam algumas de suas funcionalidades.

HTML5 adiciona várias novas funções sintáticas. Elas

incluem as tags de <video>, <audio>, <header> e

elementos bi e tridimensionais que substituem o uso

de tags <object> genéricas.

Definição de Tipo de Documento (DTD) em HTML5  Estas funções são projetadas para tornar

Definição de Tipo de Documento (DTD) em HTML5

Estas funções são projetadas para tornar mais fácil a

inclusão e a manipulação de conteúdo gráfico e

multimídia na web sem ter de recorrer a plugins

proprietário (pagos) e APIs. Outros novos elementos,

como <section>, <article>, <header> e <nav>, são

projetados para enriquecer o conteúdo semântico dos

documentos.

Para declara em seu site que ele segue o padrão da

família HTML5, você deve digitar na primeira linha do

seu arquivo HTML o seguinte texto:

<!DOCTYPE html>

Definição de Tipo de Documento (DTD)  Exercícios de Fixação: 1. Na pasta Desktop do

Definição de Tipo de Documento (DTD)

Exercícios de Fixação:

1. Na pasta Desktop do seu usuário abra a pasta com o

seu primeiro nome. Dentro dessa pasta abra a outra

pasta com o nome html (se ambas já não estiverem

abertas, é lógico!!!).

2. Agora utilizando um editor de texto abra o arquivo

com o nome ola-mundo.html. Em seguida insira o

seguinte na primeira linha do código dentro do

arquivo ola-mundo.html:

1. <!DOCTYPE html> 2. <html > 3. <head > 4. <meta http - equiv =“
1. <!DOCTYPE html> 2. <html > 3. <head > 4. <meta http - equiv =“

1.

<!DOCTYPE html>

2.

<html >

3.

<head >

4.

<meta http - equiv =“Content-Typecontent=“text/html

charset=“UTF -8” />

5.

<title >Exemplo da estrutura básica de um documento HTML </ title >

6.

</ head >

7.

<body >

8.

<p>Olá mundo !</p>

9.

</ body >

10.

</ html >

Salve o arquivo. Podemos dizer que agora você já tem uma

estrutura básica para iniciar todos os arquivos de seu site!!!

Elementos (Tags)
Elementos (Tags)
Elementos (Tags)
Elementos (Tags)
Elementos (Tags)
Elementos (Tags)
Elementos (Tags)  Agora você está pronto para aprender a essência do HTML: elementos (Tags).
Elementos (Tags)  Agora você está pronto para aprender a essência do HTML: elementos (Tags).
Elementos (Tags)  Agora você está pronto para aprender a essência do HTML: elementos (Tags).
Elementos (Tags)  Agora você está pronto para aprender a essência do HTML: elementos (Tags).

Elementos (Tags)

Agora você está pronto para aprender a essência do

HTML: elementos (Tags).

Elementos vão dar a estrutura de um documento

HTML e indica ao navegador como você quer que seu

site a ser apresentado.

Tags são etiquetas que são utilizadas para marcar o início e o fim de um elemento e como foi dito

anteriormente começam com um sinal de menor

"<" e terminam com um sinal de maior que ">"

Elementos (Tags)  Como também falamos anteriormente, de um modo geral, existem dois tipos de
Elementos (Tags)  Como também falamos anteriormente, de um modo geral, existem dois tipos de
Elementos (Tags)  Como também falamos anteriormente, de um modo geral, existem dois tipos de
Elementos (Tags)  Como também falamos anteriormente, de um modo geral, existem dois tipos de

Elementos (Tags)

Como também falamos anteriormente, de um modo

geral, existem dois tipos de tags:

De abertura: <html> e De fechamento: </ html>.

A única diferença entre uma tag de abertura e uma tag

de fechamento é a barra "/".

Lembrando, também que existem tags que não

necessitam de seu par de fechamento. Essas tags

fecham-se automaticamente e são conhecidas como tags vazias” (<tagvazia />).

Elementos (Tags)  Você vai “rotular” o conteúdo do seu site, colocando-o entre uma tag
Elementos (Tags)  Você vai “rotular” o conteúdo do seu site, colocando-o entre uma tag
Elementos (Tags)  Você vai “rotular” o conteúdo do seu site, colocando-o entre uma tag
Elementos (Tags)  Você vai “rotular” o conteúdo do seu site, colocando-o entre uma tag

Elementos (Tags)

Você vai “rotular” o conteúdo do seu site, colocando-o entre uma tag de abertura e uma tag de fechamento,

quando o elemento, não for uma tag vazia, é óbvio! Em HTML é tudo feito sobre os elementos. Para

aprender HTML é basicamente, aprender a usar as tags

e seus atributos.

Comentários em HTML  Em arquivos HTML, para inserir comentários no código, é utilizado o
Comentários em HTML  Em arquivos HTML, para inserir comentários no código, é utilizado o
Comentários em HTML  Em arquivos HTML, para inserir comentários no código, é utilizado o
Comentários em HTML  Em arquivos HTML, para inserir comentários no código, é utilizado o

Comentários em HTML

Em arquivos HTML, para inserir comentários no código, é utilizado o elemento de comentários. Um

comentário é ignorado pelo navegador, não sendo

exibido na tela, ao passo que é visível quando você

visualiza o código fonte de uma página através do

navegador. A sintaxe de um comentário em HTML é:

<!-- Texto comentado -->

Comentários em HTML  Comentários em HTML começam com símbolo de exclamação seguido de dois
Comentários em HTML  Comentários em HTML começam com símbolo de exclamação seguido de dois
Comentários em HTML  Comentários em HTML começam com símbolo de exclamação seguido de dois
Comentários em HTML  Comentários em HTML começam com símbolo de exclamação seguido de dois

Comentários em HTML

Comentários em HTML começam com símbolo de exclamação seguido de dois traços (<!--) e terminam

com dois traços (-->). Não é recomendado pôr dois

traços em lugar algum no comentário, pois pode

prejudicar o funcionamento desse elemento.

Comentários podem conter múltiplas linhas, mas que

não é possível aninhar comentários um dentro do

outro. Não há atributos padrões em comentários.

Comentários em HTML 1. <!-- Isso é um comentário --> 2. <!-- Isso é 3.
Comentários em HTML 1. <!-- Isso é um comentário --> 2. <!-- Isso é 3.
Comentários em HTML 1. <!-- Isso é um comentário --> 2. <!-- Isso é 3.
Comentários em HTML 1. <!-- Isso é um comentário --> 2. <!-- Isso é 3.

Comentários em HTML

1.

<!-- Isso é um comentário -->

2.

<!-- Isso é

3.

outro comentário -->

4.

<!--

5.

Isso é

6.

outro

7.

comentário

8.

-->

9.

<h2>Texto de Sumário</h2>

Elementos (Tags)  Exercícios de Fixação: 1. Na pasta Desktop do seu usuário abra a
Elementos (Tags)  Exercícios de Fixação: 1. Na pasta Desktop do seu usuário abra a
Elementos (Tags)  Exercícios de Fixação: 1. Na pasta Desktop do seu usuário abra a
Elementos (Tags)  Exercícios de Fixação: 1. Na pasta Desktop do seu usuário abra a

Elementos (Tags)

Exercícios de Fixação:

1. Na pasta Desktop do seu usuário abra a pasta com o

seu primeiro nome. Dentro dessa pasta abra a outra

pasta com o nome html (se ambas já não estiverem

abertas, é lógico!!!).

2. Agora utilizando um editor de texto crie um novo

arquivo com o nome elementos.html e salve dentro

da pasta html. Em seguida insira o seguinte código

dentro do arquivo elementos.html:

1.

<!DOCTYPE html>

1. <!DOCTYPE html> 2. <html > 3. <head > 4. <meta http - equiv =“

2.

<html >

3.

<head >

4.

<meta http - equiv =“Content-Typecontent=“text/html

charset=“UTF -8” />

5.

<title >Tags HTML</ title >

6.

</ head >

7.

<body >

8.

<h1>Elementos (TAGS)</h2>

9.

<!- Parágrafos para exercícios práticos de Tags-->

10.

<p>1-Aqui copiem o 1º parágrafo Lorem Ipsum</p>

11.

<!Crie mais 5 paragráfos Lorem Ipsum enumerando até

5-->

12.

</ body >

Elementos de Cabeçalho da Página ( Tag <head>)
Elementos de Cabeçalho da Página ( Tag <head>)
Elementos de Cabeçalho da Página ( Tag <head>)
Elementos de Cabeçalho da Página ( Tag <head>)
Elementos de Cabeçalho da Página ( Tag <head>)

Elementos de Cabeçalho da Página (Tag <head>)

Elementos de Cabeçalho da Página ( Tag <head>) 1. <!DOCTYPE html> 2. <html > 3.

Elementos de Cabeçalho da Página (Tag <head>)

1.

<!DOCTYPE html>

2.

<html >

3.

<head >

 

<base>;

<link>;

<meta>;

<script>;

<style>;

4.

</ head >

5.

<body >

6.

<h1>Elementos (TAGS)</h2>

7.

<!- Parágrafos para exercícios práticos de Tags-->

8.

<p>1-Lorem Ipsum</p>

9.

<p>2-Lorem Ipsum</p>

10.

</ body >

Elementos de Cabeçalho da Página ( Tag <head>)  Como apresentado anteriormente, existem vários elementos

Elementos de Cabeçalho da Página (Tag <head>)

Como apresentado anteriormente, existem vários

elementos que ajudam a estruturar o comportamento e o

estilo de seu site através do HEAD.

<head >

<base>; <script>;

<meta>;

<title>;

<style>.

<link>;

</ head >

Porém, vamos nos concentrar nos quatro mais utilizados!

Elemento <meta>  Este elemento é utilizado para fornecer metadados sobre o documento HTML. Não
Elemento <meta>  Este elemento é utilizado para fornecer metadados sobre o documento HTML. Não
Elemento <meta>  Este elemento é utilizado para fornecer metadados sobre o documento HTML. Não
Elemento <meta>  Este elemento é utilizado para fornecer metadados sobre o documento HTML. Não

Elemento <meta>

Este elemento é utilizado para fornecer metadados

sobre o documento HTML. Não são renderizados na

página, mas são interpretadas pelo navegador. São

comumente usados para especificar a descrição do

documento, palavras-chave para motores de sites de

busca como o Google e informações do autor.

Segue abaixo sua sintaxe básica:

<meta content=“textohttp-equiv=“cabeçalho de

resposta httpname=“texto/>

Elemento <meta>  A tabela abaixo mostra alguns de seus atributos:
Elemento <meta>  A tabela abaixo mostra alguns de seus atributos:
Elemento <meta>  A tabela abaixo mostra alguns de seus atributos:
Elemento <meta>  A tabela abaixo mostra alguns de seus atributos:

Elemento <meta>

A tabela abaixo mostra alguns de seus atributos:

Elemento <meta>  A tabela abaixo mostra alguns de seus atributos:
Elemento <meta>  Os exemplos a seguir demonstram formas básicas de uso desse elemento: 
Elemento <meta>  Os exemplos a seguir demonstram formas básicas de uso desse elemento: 
Elemento <meta>  Os exemplos a seguir demonstram formas básicas de uso desse elemento: 
Elemento <meta>  Os exemplos a seguir demonstram formas básicas de uso desse elemento: 

Elemento <meta>

Os exemplos a seguir demonstram formas básicas de uso desse elemento:

a seguir demonstram formas básicas de uso desse elemento:  Sendo o último exemplo, praticamente obrigatório

Sendo o último exemplo, praticamente obrigatório para todos os sites em português!

1.

<!DOCTYPE html>

1. <!DOCTYPE html> 2. <html > 3. <head > 4. <meta http - equiv =“

2.

<html >

3.

<head >

4.

<meta http - equiv =“Content-Typecontent=“text/html

charset=“UTF -8” />

5.

<title >Tags HTML</ title >

6.

</ head >

7.

<body >

8.

<h1>Elementos (TAGS)</h2>

9.

<!- Parágrafos para exercícios práticos de Tags-->

10.

<p>1-Aqui copiem o 1º texto Lorem Ipsum</p>

11.

<!Crie mais 5 textos Lorem Ipsum enumerando até 5-->

12.

</ body >

Elemento <title>  Como já mensionado anteriormente, este elemento é utilizado para definir o título
Elemento <title>  Como já mensionado anteriormente, este elemento é utilizado para definir o título
Elemento <title>  Como já mensionado anteriormente, este elemento é utilizado para definir o título
Elemento <title>  Como já mensionado anteriormente, este elemento é utilizado para definir o título

Elemento <title>

Como já mensionado anteriormente, este elemento é

utilizado para definir o título do documento (página

do site). É obrigatório em documentos

HTML/XHTML.

O exemplo a seguir demonstra a forma básica de uso

desse elemento:

<title>Texto de título</title>

1.

<!DOCTYPE html>

1. <!DOCTYPE html> 2. <html > 3. <head > 4. <meta http - equiv =“

2.

<html >

3.

<head >

4.

<meta http - equiv =“Content-Typecontent=“text/html

charset=“UTF -8” />

5.

<title >Tags HTML</ title >

6.

</ head >

7.

<body >

8.

<h1>Elementos (TAGS)</h2>

9.

<!- Parágrafos para exercícios práticos de Tags-->

10.

<p>1-Aqui copiem o 1º texto Lorem Ipsum</p>

11.

<!Crie mais 5 textos Lorem Ipsum enumerando até 5-->

12.

</ body >

Elemento <style>  Este elemento é utilizado para definir informações de estilo para um documento
Elemento <style>  Este elemento é utilizado para definir informações de estilo para um documento
Elemento <style>  Este elemento é utilizado para definir informações de estilo para um documento
Elemento <style>  Este elemento é utilizado para definir informações de estilo para um documento

Elemento <style>

Este elemento é utilizado para definir informações de

estilo para um documento HTML. Geralmente usado

para apontar a um arquivo de estilos (CSS) interno.

Para CSS externo, utiliza-se o elemento <link>.

Sintaxe:

<style type="tipo de conteúdo" >conteúdo</style>

Elemento <style>  A tabela abaixo mostra o seu atributo básico:  O exemplo a
Elemento <style>  A tabela abaixo mostra o seu atributo básico:  O exemplo a
Elemento <style>  A tabela abaixo mostra o seu atributo básico:  O exemplo a
Elemento <style>  A tabela abaixo mostra o seu atributo básico:  O exemplo a

Elemento <style>

A tabela abaixo mostra o seu atributo básico:

 A tabela abaixo mostra o seu atributo básico:  O exemplo a seguir demonstra uma

O exemplo a seguir demonstra uma forma básica de

uso desse elemento:

A tabela abaixo mostra o seu atributo básico:  O exemplo a seguir demonstra uma forma

1.

<!DOCTYPE html>

1. <!DOCTYPE html> 2. <html > 3. <head > 4. <meta http - equiv =“

2.

<html >

3.

<head >

4.

<meta http - equiv =“Content-Typecontent=“text/htmlcharset=“UTF -8” />

5.

<style type="text/css">

6.

h1 { color: red }

7.

p { color: blue }

8.

</style>

9.

<title >Tags HTML</ title >

10.

</ head >

11.

<body >

12.

<h1>Elementos (TAGS)</h2>

13.

<!- Parágrafos para exercícios práticos de Tags-->

14.

<p>1-Aqui copiem o 1º texto Lorem Ipsum</p>

15.

<!Crie mais 5 textos Lorem Ipsum enumerando até 5-->

16.

</ body >

Elemento <link>  Este elemento é utilizado para definir o relacionamento entre um documento e
Elemento <link>  Este elemento é utilizado para definir o relacionamento entre um documento e
Elemento <link>  Este elemento é utilizado para definir o relacionamento entre um documento e
Elemento <link>  Este elemento é utilizado para definir o relacionamento entre um documento e

Elemento <link>

Este elemento é utilizado para definir o

relacionamento entre um documento e um recurso

externo. Geralmente é usado para ligar um documento

HTML a um arquivo de estilos (CSS) externo.

Segue abaixo sua sintaxe básica:

<link href="URL" rel="relacionamento" type="tipo de

conteúdo" />

Elemento <link>  A tabela abaixo mostra alguns de seus atributos:  O exemplo a
Elemento <link>  A tabela abaixo mostra alguns de seus atributos:  O exemplo a
Elemento <link>  A tabela abaixo mostra alguns de seus atributos:  O exemplo a
Elemento <link>  A tabela abaixo mostra alguns de seus atributos:  O exemplo a

Elemento <link>

A tabela abaixo mostra alguns de seus atributos:

 A tabela abaixo mostra alguns de seus atributos:  O exemplo a seguir demonstra uma

O exemplo a seguir demonstra uma forma básica de

uso desse elemento:

tabela abaixo mostra alguns de seus atributos:  O exemplo a seguir demonstra uma forma básica

1.

<!DOCTYPE html>

1. <!DOCTYPE html> 2. <html > 3. <head > 4. <meta http - equiv =“

2.

<html >

3.

<head >

4.

<meta http - equiv =“Content Typecontent =“text/htmlcharset=“UTF-8” />

5.

<style type="text/css">

6.

h1 { color: red }

7.

p { color: blue }

8.

</style>

9.

<link href="estilo.css" rel="stylesheet" type="text/css"/>

10.

<title >Tags HTML</ title >

11.

</ head >

12.

<body >

13.

<h1>Elementos (TAGS)</h2>

14.

<!- Parágrafos para exercícios práticos de Tags-->

15.

<p>1-Aqui copiem o 1º texto Lorem Ipsum</p>

16.

<!Crie mais 5 textos Lorem Ipsum enumerando até 5-->

17.

</ body >

Revisão  Vimos que antes de começar a sair criando páginas e páginas de site,
Revisão  Vimos que antes de começar a sair criando páginas e páginas de site,
Revisão  Vimos que antes de começar a sair criando páginas e páginas de site,
Revisão  Vimos que antes de começar a sair criando páginas e páginas de site,

Revisão

Vimos que antes de começar a sair criando páginas e

páginas de site, precisamos primeiro fazer algumas

configurações básicas nas duas primeiras estrutura do

nosso arquivo HTML. Vocês lembram quais são essas

duas primeiras estruturas?

Não!? Então

Revisão  Vamos ver se essa imagem ajuda?  E agora! Lembram quais os dois
Revisão  Vamos ver se essa imagem ajuda?  E agora! Lembram quais os dois
Revisão  Vamos ver se essa imagem ajuda?  E agora! Lembram quais os dois
Revisão  Vamos ver se essa imagem ajuda?  E agora! Lembram quais os dois

Revisão

Vamos ver se essa imagem ajuda?

E agora! Lembram quais os dois

primeiros elementos devemos configurar?

Isso mesmo! O Doctype e os elementos do HEAD, afinal, todos nós temos “herança genética e

cabeça formada”, e nosso site

também tem que ter (rsrsrs) .

do HEAD, afinal, todos nós temos “herança genética e cabeça formada”, e nosso site também tem

Revisão

Revisão  Em suma, bastamos no início dos nossos arquivos HTML, digitar nas primeiras linhas o

Em suma, bastamos no início dos nossos arquivos HTML, digitar nas primeiras linhas o seguinte texto em destaque:

1.

<!DOCTYPE html>

2.

<html >

3.

<head >

4.

<meta http - equiv =“Content-Typecontent=“text/html

charset=“UTF-8”>

5.

<title >Descrição da aba do navegador (browser)</ title >

6.

</ head >

7.

<body >

8.

<!- Aqui ficará todo o conteúdo da sua página-->

9.

</ body >

Elementos de Conteúdo da Página (Tag <body>)
Elementos de Conteúdo da Página (Tag <body>)
Elementos de Conteúdo da Página (Tag <body>)
Elementos de Conteúdo da Página (Tag <body>)
Elementos de Conteúdo da Página (Tag <body>)

Elementos de Conteúdo da Página (Tag <body>)

Elementos de Conteúdo da Página (Tag <body>)  Os elementos de conteúdo da página situam-se

Elementos de Conteúdo da Página (Tag <body>)

Os elementos de conteúdo da página situam-se dentro das Tags <body> e </body>. Situa-se abaixo do

elemento <head> e é neste que concentram-se todos os

elementos HTML que serão renderizados na tela, ou

em outros tipos de mídia. Sua sintaxe é descrita

conforme ao lado:

os elementos HTML que serão renderizados na tela, ou em outros tipos de mídia. Sua sintaxe

1.

<!DOCTYPE html>

1. <!DOCTYPE html> 2. <html > 3. <head > 4. <meta http - equiv =“

2.

<html >

3.

<head >

4.

<meta http - equiv =“Content-Typecontent=“text/htmlcharset=“UTF-8” />

5.

<title >Tags HTML</ title >

6.

</ head >

7.

<body >

8.

<!- Aqui ficará todo o conteúdo da sua página, que por

sua vez, será formatado pelas Tags que serão

apresentadas nesse conteúdo das aulas -->

9.

</ body >

10.

</ html >

Elementos de Formatação de Texto  Existem inúmeros tipos de Tags de formatação de texto,
Elementos de Formatação de Texto  Existem inúmeros tipos de Tags de formatação de texto,

Elementos de Formatação de Texto

Existem inúmeros tipos de Tags de formatação de texto, inclusive algumas sendo repetidas com outro nome, para fins de melhorias semânticas. Segue abaixo as Tags mais comuns que serão abordadas neste tópico:

com outro nome, para fins de melhorias semânticas. Segue abaixo as Tags mais comuns que serão
Elemento <a>  O elemento <a> é utilizado para definir uma âncora ( A nchor
Elemento <a>  O elemento <a> é utilizado para definir uma âncora ( A nchor
Elemento <a>  O elemento <a> é utilizado para definir uma âncora ( A nchor
Elemento <a>  O elemento <a> é utilizado para definir uma âncora ( A nchor

Elemento <a>

O elemento <a> é utilizado para definir uma âncora (Anchor), geralmente referenciado como um link. Uma

âncora pode ser usada para:

1) Criar um link para outro documento, por meio do

atributo href;

2) Criar um favorito (bookmark) dentro de um

documento, por meio dos atributos id ou name.

Esta Tag possui a seguinte sintaxe:

<a href="URL"></a>

Elemento <a>  Por padrão, links em navegadores aparecem geralmente da seguinte forma:  Um
Elemento <a>  Por padrão, links em navegadores aparecem geralmente da seguinte forma:  Um
Elemento <a>  Por padrão, links em navegadores aparecem geralmente da seguinte forma:  Um
Elemento <a>  Por padrão, links em navegadores aparecem geralmente da seguinte forma:  Um

Elemento <a>

Por padrão, links em navegadores aparecem geralmente da seguinte forma:

Um link que não foi visitado antes aparece sublinhado e

em cor azul;

Um link que foi visitado pelo menos uma vez aparece

sublinhado e em cor roxo;

Um link ativo (quando clicado ou tocado) aparece

sublinhado e em cor vermelho.

vez aparece sublinhado e em cor roxo;  Um link ativo (quando clicado ou tocado) aparece

Elemento <a>

Elemento <a>  Também é possível alterar a forma como os links aparecem em navegadores. Através

Também é possível alterar a forma como os links aparecem em navegadores. Através de CSS (veremos esse conteúdo

mais adiante), podemos mudar a cor e o tipo de texto para

cada uma de suas formas. Outro exemplo:

(veremos esse conteúdo mais adiante), podemos mudar a cor e o tipo de texto para cada
Elemento <a>  O exemplo acima demonstra como reproduzir links que, quando clicados, apontam para
Elemento <a>  O exemplo acima demonstra como reproduzir links que, quando clicados, apontam para
Elemento <a>  O exemplo acima demonstra como reproduzir links que, quando clicados, apontam para
Elemento <a>  O exemplo acima demonstra como reproduzir links que, quando clicados, apontam para

Elemento <a>

O exemplo acima demonstra como reproduzir links que,

quando clicados, apontam para uma linha específica de um

documento HTML. No navegador, o documento acima têm

aproximadamente 53 linhas, assim produzindo uma barra de rolagem, onde na última linha do documento há dois links que, quando clicados, retornam ao topo da página, precisamente na primeira linha.

Pode-se tanto apontar para um favorito na página atual,

como em outra, desde que a página seja especificada no

atributo href e seja especificado o nome do favorito após o

sustenido (#).

Elemento <a>  Exercícios de Fixação: 1. Na pasta Desktop do seu usuário abra a
Elemento <a>  Exercícios de Fixação: 1. Na pasta Desktop do seu usuário abra a
Elemento <a>  Exercícios de Fixação: 1. Na pasta Desktop do seu usuário abra a
Elemento <a>  Exercícios de Fixação: 1. Na pasta Desktop do seu usuário abra a

Elemento <a>

Exercícios de Fixação:

1. Na pasta Desktop do seu usuário abra a pasta com o

seu primeiro nome. Dentro dessa pasta abra a outra

pasta com o nome html (se ambas já não estiverem

abertas, é lógico!!!).

2. Copie e cole nessa pasta o arquivo

body_1_tag_a_1.html, fornecido pelo professor (via e-

mail). Agora utilizando um editor de texto abra o

arquivo e digite na primeira linha do corpo (body) o

seguinte:

<a id="Topo">Topo da página</a><br/><br/>

Elemento <a> 3. Depois digite na última linha do corpo (body) o seguinte: <a href="#Topo">Clique
Elemento <a> 3. Depois digite na última linha do corpo (body) o seguinte: <a href="#Topo">Clique
Elemento <a> 3. Depois digite na última linha do corpo (body) o seguinte: <a href="#Topo">Clique
Elemento <a> 3. Depois digite na última linha do corpo (body) o seguinte: <a href="#Topo">Clique

Elemento <a>

3. Depois digite na última linha do corpo (body) o

seguinte:

<a href="#Topo">Clique aqui para voltar ao inícío da

página!</a>

4. Salve o arquivo e em seguida abra-o em seu

navegador (browser)!

5. Vá ao final da página e clique no link, para ver uma

das utilidades dessa tag!

Elemento <a> Outro exercício de fixação: 1. Na pasta Desktop do seu usuário abra a
Elemento <a> Outro exercício de fixação: 1. Na pasta Desktop do seu usuário abra a
Elemento <a> Outro exercício de fixação: 1. Na pasta Desktop do seu usuário abra a
Elemento <a> Outro exercício de fixação: 1. Na pasta Desktop do seu usuário abra a

Elemento <a>

Outro exercício de fixação:

1. Na pasta Desktop do seu usuário abra a pasta com o

seu primeiro nome. Dentro dessa pasta abra a outra

pasta com o nome html (se ambas já não estiverem

abertas, é lógico!!!).

2. Copie e cole nessa pasta os arquivos

body_1_tag_a_2.html e body_1_tag_a_3.html,

fornecidos pelo professor (via e-mail).

Elemento <a> 3. Agora utilizando um editor de texto abra o 1º arquivo e digite
Elemento <a> 3. Agora utilizando um editor de texto abra o 1º arquivo e digite
Elemento <a> 3. Agora utilizando um editor de texto abra o 1º arquivo e digite
Elemento <a> 3. Agora utilizando um editor de texto abra o 1º arquivo e digite

Elemento <a>

3. Agora utilizando um editor de texto abra o 1º arquivo

e digite na primeira linha após a tag </p> o seguinte:

<a href="body_1_tag_a_3.html">Clique aqui para abrir o

arquivo de destino (body_1_tag_a_3.html)!</a>

4. Faça o mesmo com o 2º arquivo, agora digitando o

seguinte:

<a href="body_1_tag_a_2.html">Clique aqui para abrir o

arquivo de origem (body_1_tag_a_2.html)!</a>

Elemento <a> 5. Salve os arquivos e em seguida abra o 1º em seu navegador
Elemento <a> 5. Salve os arquivos e em seguida abra o 1º em seu navegador
Elemento <a> 5. Salve os arquivos e em seguida abra o 1º em seu navegador
Elemento <a> 5. Salve os arquivos e em seguida abra o 1º em seu navegador

Elemento <a>

5. Salve os arquivos e em seguida abra o 1º em seu

navegador (browser)!

6. Vá ao final da página e clique no link, para ver mais

uma das utilidades dessa tag!

7. Quando o 2º arquivo abrir, vá ao final da página e

clique no link, para outra das utilidades dessa tag!

Elemento <a>  No arquivo modelo_body_1_tag_a_4ª.html existem mais exemplos de uso do elemento <a>:
Elemento <a>  No arquivo modelo_body_1_tag_a_4ª.html existem mais exemplos de uso do elemento <a>:
Elemento <a>  No arquivo modelo_body_1_tag_a_4ª.html existem mais exemplos de uso do elemento <a>:
Elemento <a>  No arquivo modelo_body_1_tag_a_4ª.html existem mais exemplos de uso do elemento <a>:

Elemento <a>

No arquivo modelo_body_1_tag_a_4ª.html existem mais exemplos de uso do elemento <a>:

Elemento <a>  No arquivo modelo_body_1_tag_a_4ª.html existem mais exemplos de uso do elemento <a>:
Elemento <b> e Equivalentes  O elemento <b> é utilizado para negritar texto (O “b”
Elemento <b> e Equivalentes  O elemento <b> é utilizado para negritar texto (O “b”
Elemento <b> e Equivalentes  O elemento <b> é utilizado para negritar texto (O “b”
Elemento <b> e Equivalentes  O elemento <b> é utilizado para negritar texto (O “b”

Elemento <b> e Equivalentes

O elemento <b> é utilizado para negritar texto (O “b” é

de bold, negrito em inglês). Sua sintaxe é demonstrada

conforma abaixo:

<b>texto</b>

Exemplo de uso deste elemento:

inglês). Sua sintaxe é demonstrada conforma abaixo: <b> texto </b>  Exemplo de uso deste elemento:
Elemento <b> e Equivalentes  Existem outros elementos equivalentes que exercem ao menos a mesma
Elemento <b> e Equivalentes  Existem outros elementos equivalentes que exercem ao menos a mesma
Elemento <b> e Equivalentes  Existem outros elementos equivalentes que exercem ao menos a mesma
Elemento <b> e Equivalentes  Existem outros elementos equivalentes que exercem ao menos a mesma

Elemento <b> e Equivalentes

Existem outros elementos equivalentes que exercem ao menos a mesma função, como por exemplo o

<strong>. No entanto, apesar de visualmente

apresentarem o mesmo resultado, semanticamente são

diferentes.

É fortemente recomendado usar o elemento <b> para quando no contexto do artigo for necessário colocar uma palavra em negrito, onde esta palavra não seja

relevante para os user agents, como, por exemplo, uma

data ou uma fórmula matemática:

Data não relevante: <b>25/01/2016</b>

Elemento <b> e Equivalentes  Já o uso do elemento <strong> é recomendado quando for
Elemento <b> e Equivalentes  Já o uso do elemento <strong> é recomendado quando for
Elemento <b> e Equivalentes  Já o uso do elemento <strong> é recomendado quando for
Elemento <b> e Equivalentes  Já o uso do elemento <strong> é recomendado quando for

Elemento <b> e Equivalentes

Já o uso do elemento <strong> é recomendado quando for necessário colocar uma palavra em negrito no texto

e esta palavrar for de muita relevância para os user

agents, pois eles aplicam forte ênfase à Tag <strong>,

como, por exemplo, uma palavra-chave do artigo. No

passado, essa forma de uso desse elemento é muito

comum na criação de artigos via HTML.

Texto importante:

<strong>alguma palavra chave do artigo</strong>

Elemento <b> e Equivalentes  Exercícios de Fixação: 1. Na pasta Desktop do seu usuário
Elemento <b> e Equivalentes  Exercícios de Fixação: 1. Na pasta Desktop do seu usuário
Elemento <b> e Equivalentes  Exercícios de Fixação: 1. Na pasta Desktop do seu usuário
Elemento <b> e Equivalentes  Exercícios de Fixação: 1. Na pasta Desktop do seu usuário

Elemento <b> e Equivalentes

Exercícios de Fixação:

1.

Na pasta Desktop do seu usuário abra a pasta com o seu

primeiro nome. Dentro dessa pasta abra a outra pasta

com o nome html (se ambas já não estiverem abertas, é lógico!!!).

2.

Copie e cole nessa pasta o arquivo body_2_tag_b.html,

fornecido pelo professor (via e-mail). Agora utilizando

um editor de texto abra o arquivo e digite nas

extremidades das palavras de sua escolha as tags <b></b>

e <strong></strong>, como no exemplo abaixo:

<b>Palavra de sua</b> <strong>Palavra de sua</strong>

Elemento <b> e Equivalentes 3. Salve o arquivo e em seguida abra-o em seu navegador
Elemento <b> e Equivalentes 3. Salve o arquivo e em seguida abra-o em seu navegador
Elemento <b> e Equivalentes 3. Salve o arquivo e em seguida abra-o em seu navegador
Elemento <b> e Equivalentes 3. Salve o arquivo e em seguida abra-o em seu navegador

Elemento <b> e Equivalentes

3. Salve o arquivo e em seguida abra-o em seu

navegador (browser) para ver as utilidades dessa tag!

Elemento <br>  O elemento <br> é utilizado para criar uma quebra de linha manual
Elemento <br>  O elemento <br> é utilizado para criar uma quebra de linha manual
Elemento <br>  O elemento <br> é utilizado para criar uma quebra de linha manual
Elemento <br>  O elemento <br> é utilizado para criar uma quebra de linha manual

Elemento <br>

O elemento <br> é utilizado para criar uma quebra de linha manual dentro de um bloco de texto (O “br” é

abreviação de break. Line Break). Sua sintaxe é demonstrada conforme abaixo:

<br /> Comumente, em códigos, este elemento é utilizado

sem que sua Tag seja fechada (<br> sem a barra), e na

maioria dos navegadores o resultado acaba não sendo

afetado.

Elemento <br>  Mas é recomendado fechá-la, pois senão isso pode gerar problemas de compatibilidade
Elemento <br>  Mas é recomendado fechá-la, pois senão isso pode gerar problemas de compatibilidade
Elemento <br>  Mas é recomendado fechá-la, pois senão isso pode gerar problemas de compatibilidade
Elemento <br>  Mas é recomendado fechá-la, pois senão isso pode gerar problemas de compatibilidade

Elemento <br>

Mas é recomendado fechá-la, pois senão isso pode gerar problemas de compatibilidade com alguns

navegadores.

pois senão isso pode gerar problemas de compatibilidade com alguns navegadores.  Exemplos de uso deste

Exemplos de uso deste elemento:

pois senão isso pode gerar problemas de compatibilidade com alguns navegadores.  Exemplos de uso deste
Elemento <i> e Equivalentes  O elemento <i> é utilizado para deixar textos em itálico.
Elemento <i> e Equivalentes  O elemento <i> é utilizado para deixar textos em itálico.
Elemento <i> e Equivalentes  O elemento <i> é utilizado para deixar textos em itálico.
Elemento <i> e Equivalentes  O elemento <i> é utilizado para deixar textos em itálico.

Elemento <i> e Equivalentes

O elemento <i> é utilizado para deixar textos em itálico. Sua sintaxe é exibida abaixo:

<i>texto</i> Exemplo de uso deste elemento:

textos em itálico. Sua sintaxe é exibida abaixo: <i> texto </i>  Exemplo de uso deste
Elemento <i> e Equivalentes  Existem inúmeros elementos equivalentes a este, que exercem a mesma
Elemento <i> e Equivalentes  Existem inúmeros elementos equivalentes a este, que exercem a mesma

Elemento <i> e Equivalentes

Existem inúmeros elementos equivalentes a este, que exercem a mesma função visual, com algumas

diferenças semânticas e técnicas na página. A tabela

abaixo demonstra alguns desses equivalentes, bem

como sua sintaxe:

semânticas e técnicas na página. A tabela abaixo demonstra alguns desses equivalentes, bem como sua sintaxe:
Elemento <i> e Equivalentes  Exercícios de Fixação: 1. Na pasta Desktop do seu usuário
Elemento <i> e Equivalentes  Exercícios de Fixação: 1. Na pasta Desktop do seu usuário
Elemento <i> e Equivalentes  Exercícios de Fixação: 1. Na pasta Desktop do seu usuário
Elemento <i> e Equivalentes  Exercícios de Fixação: 1. Na pasta Desktop do seu usuário

Elemento <i> e Equivalentes

Exercícios de Fixação:

1. Na pasta Desktop do seu usuário abra a pasta com o seu

primeiro nome. Dentro dessa pasta abra a outra pasta

com o nome html (se ambas já não estiverem abertas, é

lógico!!!).

2. Copie e cole nessa pasta o arquivo body_3_tag_i.html,

fornecido pelo professor (via e-mail). Agora utilizando

um editor de texto abra o arquivo e digite nas extremidades das palavras de sua escolha as tags <i></i> e

demais tags da tabela anterior, como no exemplo abaixo:

<i>Palavra de sua</i>

Elemento <i> e Equivalentes 3. Aproveite para praticar as outras tags já comentadas nas aulas
Elemento <i> e Equivalentes 3. Aproveite para praticar as outras tags já comentadas nas aulas
Elemento <i> e Equivalentes 3. Aproveite para praticar as outras tags já comentadas nas aulas
Elemento <i> e Equivalentes 3. Aproveite para praticar as outras tags já comentadas nas aulas

Elemento <i> e Equivalentes

3. Aproveite para praticar as outras tags já comentadas

nas aulas anteriores!

4. Salve o arquivo e em seguida abra-o em seu

navegador (browser) para ver as utilidades dessa tag!

Elementos <h1> a <h6>  Os elementos <h1> , <h2> , <h3> , <h4> ,
Elementos <h1> a <h6>  Os elementos <h1> , <h2> , <h3> , <h4> ,
Elementos <h1> a <h6>  Os elementos <h1> , <h2> , <h3> , <h4> ,
Elementos <h1> a <h6>  Os elementos <h1> , <h2> , <h3> , <h4> ,

Elementos <h1> a <h6>

Os elementos <h1>, <h2>, <h3>, <h4>, <h5>, <h6>,

são utilizados para estruturar páginas particionando o

conteúdo em subtópicos. O <h1> deve ser utilizado

para os tópicos mais gerais e a partir de cada subtópico

deve-se utilizar o número seguinte, por exemplo,

<h2>, depois <h3>, e assim sucessivamente até o <h6>.

É importante que os elementos estejam aninhados

corretamente, de acordo com sua estrutura.

Sua sintaxe é descrita abaixo:

<h1>Texto</h1>

Elementos <h1> a <h6>  Exemplos de uso desse elemento:  É recomendado usar esses
Elementos <h1> a <h6>  Exemplos de uso desse elemento:  É recomendado usar esses

Elementos <h1> a <h6>

Exemplos de uso desse elemento:

a <h6>  Exemplos de uso desse elemento:  É recomendado usar esses elementos especificamente

É recomendado usar esses elementos especificamente para títulos e subtítulos. Não é bom usá-los apenas para negritar textos.

Elementos <h1> a <h6>  Exercícios de Fixação: 1. 2. Na pasta Desktop do seu
Elementos <h1> a <h6>  Exercícios de Fixação: 1. 2. Na pasta Desktop do seu
Elementos <h1> a <h6>  Exercícios de Fixação: 1. 2. Na pasta Desktop do seu
Elementos <h1> a <h6>  Exercícios de Fixação: 1. 2. Na pasta Desktop do seu

Elementos <h1> a <h6>

Exercícios de Fixação:

1.

2.

Na pasta Desktop do seu usuário abra a pasta com o seu

primeiro nome. Dentro dessa pasta abra a outra pasta

com o nome html (se ambas já não estiverem abertas, é lógico!!!).

Copie e cole nessa pasta o arquivo body_4_tag_h.html,

fornecido pelo professor (via e-mail). Agora utilizando um editor de texto abra o arquivo e digite nas

extremidades das frases Eu sou um cabeçalho H1, Eu sou

um cabeçalho H2

<h1></h1>, <h2></h2>

abaixo:

Eu sou um cabeçalho h6, as tags

<h6></h6>, como no exemplo

<h1> Eu sou um cabeçalho H1 </h1>

Elementos <h1> a <h6> 3. Aproveite para praticar as outras tags já comentadas nas aulas
Elementos <h1> a <h6> 3. Aproveite para praticar as outras tags já comentadas nas aulas
Elementos <h1> a <h6> 3. Aproveite para praticar as outras tags já comentadas nas aulas
Elementos <h1> a <h6> 3. Aproveite para praticar as outras tags já comentadas nas aulas

Elementos <h1> a <h6>

3. Aproveite para praticar as outras tags já comentadas

nas aulas anteriores!

4. Salve o arquivo e em seguida abra-o em seu

navegador (browser) para ver as utilidades dessa tag!

Elemento <p>  O elemento <p> é utilizado para definir um parágrafo. Por padrão, é
Elemento <p>  O elemento <p> é utilizado para definir um parágrafo. Por padrão, é
Elemento <p>  O elemento <p> é utilizado para definir um parágrafo. Por padrão, é
Elemento <p>  O elemento <p> é utilizado para definir um parágrafo. Por padrão, é

Elemento <p>

O elemento <p> é utilizado para definir um parágrafo.

Por padrão, é incluso um espaço antes e depois de um

texto nesse elemento. Sua sintaxe é descrita abaixo:

<p>Texto</p>

Exemplos de uso desse elemento:

Elemento <p>
Elemento <p>
Elemento <p>
Elemento <p>

Elemento <p>

Elemento <p>
Elemento <p>  Exercícios de Fixação: 1. Na pasta Desktop do seu usuário abra a
Elemento <p>  Exercícios de Fixação: 1. Na pasta Desktop do seu usuário abra a
Elemento <p>  Exercícios de Fixação: 1. Na pasta Desktop do seu usuário abra a
Elemento <p>  Exercícios de Fixação: 1. Na pasta Desktop do seu usuário abra a

Elemento <p>

Exercícios de Fixação:

1.

Na pasta Desktop do seu usuário abra a pasta com o seu

primeiro nome. Dentro dessa pasta abra a outra pasta com o

nome html (se ambas já não estiverem abertas, é lógico!!!).

2.

Copie e cole nessa pasta o arquivo body_5_tag_p.html,

fornecido pelo professor (via e-mail). Agora utilizando um

editor de texto abra o arquivo e digite nas extremidades das

linhas do conteúdo do <body>, as tags <p></p>, como no exemplo abaixo:

<p>Lorem ipsum dolor sit amet, eum latine quaeque molestiae id.</p>

Elemento <p> 3. Aproveite para praticar as outras tags já comentadas nas aulas anteriores! 4.
Elemento <p> 3. Aproveite para praticar as outras tags já comentadas nas aulas anteriores! 4.
Elemento <p> 3. Aproveite para praticar as outras tags já comentadas nas aulas anteriores! 4.
Elemento <p> 3. Aproveite para praticar as outras tags já comentadas nas aulas anteriores! 4.

Elemento <p>

3. Aproveite para praticar as outras tags já comentadas

nas aulas anteriores!

4. Salve o arquivo e em seguida abra-o em seu

navegador (browser) para ver as utilidades dessa tag!

Elemento <code> e Equivalentes  O elemento <code> é utilizado para identificar texto como código
Elemento <code> e Equivalentes  O elemento <code> é utilizado para identificar texto como código
Elemento <code> e Equivalentes  O elemento <code> é utilizado para identificar texto como código
Elemento <code> e Equivalentes  O elemento <code> é utilizado para identificar texto como código

Elemento <code> e Equivalentes

O elemento <code> é utilizado para identificar texto

como código de computador. A maioria dos

navegadores renderiza conteúdos dentro deste

elemento com fontes monoespaçadas (de largura fixa),

geralmente a Courier (e suas variantes) por ser a mais

popular.

Sua sintaxe é descrita abaixo:

<code>texto</code>

(e suas variantes) por ser a mais popular.  Sua sintaxe é descrita abaixo: <code> texto

Elemento <code> e Equivalentes

Exemplos de uso desse elemento:

e Equivalentes  Exemplos de uso desse elemento:  Existem inúmeros elementos equivalentes a este, que

Existem inúmeros elementos equivalentes a este, que exercem a mesma função visual, com algumas diferenças semânticas e técnicas na página. A tabela abaixo demonstra alguns desses equivalentes, bem como sua sintaxe:

semânticas e técnicas na página. A tabela abaixo demonstra alguns desses equivalentes, bem como sua sintaxe:
Elemento <code> e Equivalentes
Elemento <code> e Equivalentes

Elemento <code> e Equivalentes

Elemento <code> e Equivalentes
Elemento <code> e Equivalentes  Exercícios de Fixação: 1. Na pasta Desktop do seu usuário
Elemento <code> e Equivalentes  Exercícios de Fixação: 1. Na pasta Desktop do seu usuário
Elemento <code> e Equivalentes  Exercícios de Fixação: 1. Na pasta Desktop do seu usuário
Elemento <code> e Equivalentes  Exercícios de Fixação: 1. Na pasta Desktop do seu usuário

Elemento <code> e Equivalentes

Exercícios de Fixação:

1.

Na pasta Desktop do seu usuário abra a pasta com o seu

primeiro nome. Dentro dessa pasta abra a outra pasta

com o nome html (se ambas já não estiverem abertas, é lógico!!!).

2.

Copie e cole nessa pasta o arquivo

body_6_tag_code.html, fornecido pelo professor (via e-

mail). Agora utilizando um editor de texto abra o arquivo

e digite nas extremidades das palavras de sua escolha as tags <code><code/> e demais tags da tabela anterior, como no exemplo abaixo:

<code>Palavra de sua<code/>

Elemento <code> e Equivalentes 3. Aproveite para praticar as outras tags já comentadas nas aulas
Elemento <code> e Equivalentes 3. Aproveite para praticar as outras tags já comentadas nas aulas
Elemento <code> e Equivalentes 3. Aproveite para praticar as outras tags já comentadas nas aulas
Elemento <code> e Equivalentes 3. Aproveite para praticar as outras tags já comentadas nas aulas

Elemento <code> e Equivalentes

3. Aproveite para praticar as outras tags já comentadas

nas aulas anteriores!

4. Salve o arquivo e em seguida abra-o em seu

navegador (browser) para ver as utilidades dessas

tags!

Elemento <small>  O elemento <small> é utilizado para exibir texto em tamanho pequeno. Sua
Elemento <small>  O elemento <small> é utilizado para exibir texto em tamanho pequeno. Sua
Elemento <small>  O elemento <small> é utilizado para exibir texto em tamanho pequeno. Sua
Elemento <small>  O elemento <small> é utilizado para exibir texto em tamanho pequeno. Sua

Elemento <small>

O elemento <small> é utilizado para exibir texto em tamanho pequeno. Sua sintaxe é descrita abaixo:

<small>Texto pequeno</small> Exemplos de uso desse elemento:

Sua sintaxe é descrita abaixo: <small> Texto pequeno </small>  Exemplos de uso desse elemento:
Elemento <small>  Exercícios de Fixação: 1. Na pasta Desktop do seu usuário abra a
Elemento <small>  Exercícios de Fixação: 1. Na pasta Desktop do seu usuário abra a
Elemento <small>  Exercícios de Fixação: 1. Na pasta Desktop do seu usuário abra a
Elemento <small>  Exercícios de Fixação: 1. Na pasta Desktop do seu usuário abra a

Elemento <small>

Exercícios de Fixação:

1. Na pasta Desktop do seu usuário abra a pasta com o seu

primeiro nome. Dentro dessa pasta abra a outra pasta com

o nome html (se ambas já não estiverem abertas, é

lógico!!!).

2. Copie e cole nessa pasta o arquivo

body_7_tag_small.html, fornecido pelo professor (via e-

mail). Agora utilizando um editor de texto abra o arquivo

e digite nas extremidades das palavras de sua escolha as

tags <small></small> , como no exemplo abaixo:

<small>Palavra de sua escolha</small>

Elemento <small> 3. Aproveite para praticar as outras tags já comentadas nas aulas anteriores! 4.
Elemento <small> 3. Aproveite para praticar as outras tags já comentadas nas aulas anteriores! 4.
Elemento <small> 3. Aproveite para praticar as outras tags já comentadas nas aulas anteriores! 4.
Elemento <small> 3. Aproveite para praticar as outras tags já comentadas nas aulas anteriores! 4.

Elemento <small>

3. Aproveite para praticar as outras tags já comentadas

nas aulas anteriores!

4. Salve o arquivo e em seguida abra-o em seu

navegador (browser) para ver as utilidades dessa tag!

Elemento <sub>  O elemento <sub> é utilizado para definir texto subscrito. Um texto que
Elemento <sub>  O elemento <sub> é utilizado para definir texto subscrito. Um texto que
Elemento <sub>  O elemento <sub> é utilizado para definir texto subscrito. Um texto que
Elemento <sub>  O elemento <sub> é utilizado para definir texto subscrito. Um texto que

Elemento <sub>

O elemento <sub> é utilizado para definir texto subscrito. Um texto que esteja nessas condições é

exibido meio caractere abaixo da linha-base.

Sua sintaxe é descrita abaixo:

<sub>texto</sub>

Exemplos de uso desse elemento:

linha-base.  Sua sintaxe é descrita abaixo: <sub> texto </sub>  Exemplos de uso desse elemento:
Elemento <sub>  Exercícios de Fixação: 1. Na pasta Desktop do seu usuário abra a
Elemento <sub>  Exercícios de Fixação: 1. Na pasta Desktop do seu usuário abra a
Elemento <sub>  Exercícios de Fixação: 1. Na pasta Desktop do seu usuário abra a
Elemento <sub>  Exercícios de Fixação: 1. Na pasta Desktop do seu usuário abra a

Elemento <sub>

Exercícios de Fixação:

1. Na pasta Desktop do seu usuário abra a pasta com o seu

primeiro nome. Dentro dessa pasta abra a outra pasta com

o nome html (se ambas já não estiverem abertas, é

lógico!!!).

2. Copie e cole nessa pasta o arquivo body_8_tag_sub.html,

fornecido pelo professor (via e-mail). Agora utilizando um

editor de texto abra o arquivo e digite nas extremidades das letras que devem estar sub postas, as tags

<sub></sub>, como no exemplo abaixo:

<sub>Letra sub posta</sub>

Elemento <sub> 3. Tente fazer com que sua página fique com o exemplo abaixo: 1
Elemento <sub> 3. Tente fazer com que sua página fique com o exemplo abaixo: 1
Elemento <sub> 3. Tente fazer com que sua página fique com o exemplo abaixo: 1
Elemento <sub> 3. Tente fazer com que sua página fique com o exemplo abaixo: 1

Elemento <sub>

3. Tente fazer com que sua página fique com o exemplo abaixo:

1 - A formula da água é: H 2 0;

2 - A formula do gás carbônico é: C0 2 ;

3 - Com a proporção definida (6:12:6), temos a fórmula molecular da glicose: C 6 H 12 O 6 ;

4 - Função horária da velocidade: v = v 0 + at;

5 - Função horária da posição horizontal: x = x 0 + v 0x T

4. E aproveite para praticar as outras tags já comentadas nas

aulas anteriores!

5. Salve o arquivo e em seguida abra-o em seu navegador

(browser) para ver as utilidades dessa tag!

Elementos <sup>  O elemento <sup> é o oposto do <sub> , por ser utilizado
Elementos <sup>  O elemento <sup> é o oposto do <sub> , por ser utilizado
Elementos <sup>  O elemento <sup> é o oposto do <sub> , por ser utilizado
Elementos <sup>  O elemento <sup> é o oposto do <sub> , por ser utilizado

Elementos <sup>

O elemento <sup> é o oposto do <sub>, por ser utilizado para definir texto sobrescrito. Um texto que esteja nessas

condições é exibido meio caractere acima da linha-base. Sua

sintaxe é descrita abaixo:

<sup>texto</sup> Exemplos de uso desse elemento:

da linha-base. Sua sintaxe é descrita abaixo: <sup> texto </sup>  Exemplos de uso desse elemento:
Elemento <sup>  Exercícios de Fixação: 1. Na pasta Desktop do seu usuário abra a
Elemento <sup>  Exercícios de Fixação: 1. Na pasta Desktop do seu usuário abra a
Elemento <sup>  Exercícios de Fixação: 1. Na pasta Desktop do seu usuário abra a
Elemento <sup>  Exercícios de Fixação: 1. Na pasta Desktop do seu usuário abra a

Elemento <sup>

Exercícios de Fixação:

1. Na pasta Desktop do seu usuário abra a pasta com o seu

primeiro nome. Dentro dessa pasta abra a outra pasta com

o nome html (se ambas já não estiverem abertas, é

lógico!!!).

2. Copie e cole nessa pasta o arquivo body_9_tag_sup.html,

fornecido pelo professor (via e-mail). Agora utilizando um

editor de texto abra o arquivo e digite nas extremidades das letras que devem estar sobre postas, as tags

<sup></sup>, como no exemplo abaixo:

<sup>Letra sobre posta</sup>

Elemento <sup> 3. Tente fazer com que sua página fique com o exemplo abaixo: 1
Elemento <sup> 3. Tente fazer com que sua página fique com o exemplo abaixo: 1
Elemento <sup> 3. Tente fazer com que sua página fique com o exemplo abaixo: 1
Elemento <sup> 3. Tente fazer com que sua página fique com o exemplo abaixo: 1

Elemento <sup>

3. Tente fazer com que sua página fique com o exemplo abaixo:

1 - A formula da água é: H 2 0;

2 - A formula do gás carbônico é: C0 2 ;

3 - Com a proporção definida (6:12:6), temos a fórmula molecular da glicose: C 6 H 12 O 6 ;

4 - Função horária da velocidade: v = v 0 + at;

5 - Função horária da posição horizontal: x = x 0 + v 0x T

4. E aproveite para praticar as outras tags já comentadas nas

aulas anteriores!

5. Salve o arquivo e em seguida abra-o em seu navegador

(browser) para ver as utilidades dessa tag!

Elementos <ul> e <ol> e Sub- Elemento <li> Os elementos <ul> e <ol> , em

Elementos <ul> e <ol> e Sub- Elemento <li>

Os elementos <ul> e <ol>, em conjunto com seu sub-elemento

<li>, são utilizados para definir listas. O primeiro, <ul>, serve

para listas desordenadas (unordered list):

Um membro da lista; Outro membro da lista;

Mais um membro da lista.

Enquanto que o segundo, <ol>, serve para listas ordenadas

(ordered list):

1.

Membro um da lista;

2.

Membro dois da lista;

Elementos <ul> e <ol> e Sub- Elemento <li>  Cada membro da lista é definido

Elementos <ul> e <ol> e Sub- Elemento <li>

Cada membro da lista é definido pelo sub-elemento <li>. A sintaxe desses elementos é descrita abaixo:

<ul>

 

<li>um membro da lista desordenada</li>

</ul>

<ol>

 

<li>um membro da lista ordenada</li>

</ol>

Elementos <ul> e <ol> e Sub- Elemento <li>  Exemplos de uso desses elementos:

Elementos <ul> e <ol> e Sub- Elemento <li>

Elementos <ul> e <ol> e Sub- Elemento <li>  Exemplos de uso desses elementos:

Exemplos de uso desses elementos:

Elementos <ul> e <ol> e Sub- Elemento <li>  Exercícios de Fixação: 1. Na pasta

Elementos <ul> e <ol> e Sub- Elemento <li>

Exercícios de Fixação:

1. Na pasta Desktop do seu usuário abra a pasta com o seu

primeiro nome. Dentro dessa pasta abra a outra pasta com

o nome html (se ambas já não estiverem abertas, é

lógico!!!).

2. Copie e cole nessa pasta o arquivo

body_10_tag_listas.html, fornecido pelo professor (via e-

mail). Agora utilizando um editor de texto abra o arquivo

e digite nas extremidades das linhas do conteúdo do

<body>, as tags <ul></ul>, <ol></ol> e <li></li>, para que

sua páginal fique como no exemplo abaixo:

Elementos <ul> e <ol> e Sub- Elemento <li> 3. Salve o arquivo e em seguida

Elementos <ul> e <ol> e Sub- Elemento <li>

<ul> e <ol> e Sub- Elemento <li> 3. Salve o arquivo e em seguida abra-o em

3. Salve o arquivo e em seguida abra-o em seu

navegador (browser) para ver as utilidades dessa tag!

Elementos <div> e <span>  Os elementos <div> e <span> são utilizados para agrupar e
Elementos <div> e <span>  Os elementos <div> e <span> são utilizados para agrupar e
Elementos <div> e <span>  Os elementos <div> e <span> são utilizados para agrupar e
Elementos <div> e <span>  Os elementos <div> e <span> são utilizados para agrupar e

Elementos <div> e <span>

Os elementos <div> e <span> são utilizados para

agrupar e estruturar um documento. São

frequentemente usados para formatar conteúdo com

estilos através de CSS.

A sintaxe de ambos é descrita abaixo:

<div>elementos html</div>

<span>elementos html</span>

Elementos <div> e <span>  Embora sejam bastante parecidos e sejam projetados praticamente  para
Elementos <div> e <span>  Embora sejam bastante parecidos e sejam projetados praticamente  para
Elementos <div> e <span>  Embora sejam bastante parecidos e sejam projetados praticamente  para
Elementos <div> e <span>  Embora sejam bastante parecidos e sejam projetados praticamente  para

Elementos <div> e <span>

Embora sejam bastante parecidos e sejam projetados praticamente

para o mesmo fim, esses elementos distinguem-se na

sintaxe. O <div> é usado para agrupar um ou mais elementos a nível de bloco, para nestes adicionar efeitos

visuais via CSS, enquanto que o <span> é um elemento

neutro que não adiciona qualquer tipo de semântica ao

documento, ao passo que também pode adicionar efeitos

visuais via CSS em partes específicas do documento.

Outra diferença entre esses elementos é: No <div>, a maioria dos navegadores insere automaticamente uma

quebra de linha antes e depois deste elemento, enquanto

que no <span>, a quebra de linha não existe.

Elementos <div> e <span>  Exemplos de uso do elemento <div> :
Elementos <div> e <span>  Exemplos de uso do elemento <div> :
Elementos <div> e <span>  Exemplos de uso do elemento <div> :
Elementos <div> e <span>  Exemplos de uso do elemento <div> :

Elementos <div> e <span>

Exemplos de uso do elemento <div>:

Elementos <div> e <span>  Exemplos de uso do elemento <div> :
Elementos <div> e <span>  Exemplos de uso do elemento <span> :
Elementos <div> e <span>  Exemplos de uso do elemento <span> :
Elementos <div> e <span>  Exemplos de uso do elemento <span> :
Elementos <div> e <span>  Exemplos de uso do elemento <span> :

Elementos <div> e <span>

Exemplos de uso do elemento <span>:

Elementos <div> e <span>  Exemplos de uso do elemento <span> :
Elementos <div> e <span>  Exercícios de Fixação: 1. Na pasta Desktop do seu usuário
Elementos <div> e <span>  Exercícios de Fixação: 1. Na pasta Desktop do seu usuário
Elementos <div> e <span>  Exercícios de Fixação: 1. Na pasta Desktop do seu usuário
Elementos <div> e <span>  Exercícios de Fixação: 1. Na pasta Desktop do seu usuário

Elementos <div> e <span>

Exercícios de Fixação:

1. Na pasta Desktop do seu usuário abra a pasta com o seu

primeiro nome. Dentro dessa pasta abra a outra pasta com

o nome html (se ambas já não estiverem abertas, é

lógico!!!).

2. Copie e cole nessa pasta o arquivo

body_11_tag_estilos.html, fornecido pelo professor (via e-

mail). Agora utilizando um editor de texto abra o arquivo e digite nas extremidades das linhas do conteúdo do

<body>, as tags <div></div> e <span></span>, para que

sua páginal fique como no exemplo abaixo:

Elementos <div> e <span> 3. Salve o arquivo e em seguida abra-o em seu navegador
Elementos <div> e <span> 3. Salve o arquivo e em seguida abra-o em seu navegador
Elementos <div> e <span> 3. Salve o arquivo e em seguida abra-o em seu navegador
Elementos <div> e <span> 3. Salve o arquivo e em seguida abra-o em seu navegador

Elementos <div> e <span>

Elementos <div> e <span> 3. Salve o arquivo e em seguida abra-o em seu navegador (browser)
Elementos <div> e <span> 3. Salve o arquivo e em seguida abra-o em seu navegador (browser)

3. Salve o arquivo e em seguida abra-o em seu

navegador (browser) para ver as utilidades dessa tag!

Estude mais sobre todos os aspectos apresentados

até aqui, com os conteúdos de sua apostila!!!!

Elementos de Imagem e Multimídia
Elementos de Imagem e Multimídia
Elementos de Imagem e Multimídia
Elementos de Imagem e Multimídia