Aulas 01 HTML e CSS PDF

Introdução
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 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
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 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?
 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).
 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)
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.
 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.
 Veja um exemplo:
 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=“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 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 de programação, todas as Tags
HTML devem ser fechadas, ou seja, ter uma Tag de
abertura e outra de fechamento, conforme o exemplo:
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 Tag, antes do símbolo de menor-que (>), conforme
demonstrado no exemplo abaixo:
<tagvazia />
Atributos e valores
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
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 = <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 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) 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.
(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”>
(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.
(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>
(DTD)
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 >
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)
 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 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 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 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 é:

 Comentários em HTML começam com símbolo de
exclamação seguido de 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.
1. 
2. 
4. 
9. <h2>Texto de Sumário</h2>
10. <p>Texto de Parágrafo</p>
Elementos (Tags)
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>
2. <html >
3. <head >
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 >
13. </ html >
Elementos de Cabeçalho da Página (Tag <head>)
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 >
8. <p>1-Lorem Ipsum</p>
9. <p>2-Lorem Ipsum</p>
10. </ body >
11. </ html >
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 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=“texto” http-equiv=“cabeçalho de
resposta http” name=“texto” />
Elemento <meta>
 A tabela abaixo mostra alguns de seus atributos:
Elemento <meta>
 Os exemplos a seguir demonstram formas básicas de
uso desse elemento:
 Sendo o último exemplo, praticamente obrigatório

para todos os sites em português!
1. <!DOCTYPE html>
2. <html >
3. <head >
6. </ head >
7. <body >
10. <p>1-Aqui copiem o 1º texto Lorem Ipsum</p>
11. <!– Crie mais 5 textos Lorem Ipsum enumerando até 5-->
12. </ body >
13. </ html >
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>
2. <html >
3. <head >
6. </ head >
7. <body >
12. </ body >
13. </ html >
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 seguir demonstra uma forma básica de

uso desse elemento:
1. <!DOCTYPE html>
2. <html >
3. <head >
5. <style type="text/css">
6. h1 { color: red }
7. p { color: blue }
8. </style>
10. </ head >
11. <body >
16. </ body >
17. </ html >
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 seguir demonstra uma forma básica de

uso desse elemento:
1. <!DOCTYPE html>
2. <html >
3. <head >
4. <meta http - equiv =“Content – Type” content =“text/html”
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"/>
11. </ head >
12. <body >
17. </ body >
18. </ html >
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

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) .
Revisã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 >
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 >
10. </ html >
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 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:
1. <!DOCTYPE html>
2. <html >
3. <head >
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, 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:
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 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.
Elemento <a>
 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:
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>
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 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:
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 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 (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 <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:
 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>
 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>
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>
navegador (browser) para ver as utilidades dessa tag!
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 com alguns
navegadores.
 Exemplos de uso deste elemento:

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:
 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:
lógico!!!).
2. Copie e cole nessa pasta o arquivo body_3_tag_i.html,
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>
3. Aproveite para praticar as outras tags já comentadas
nas aulas anteriores!
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>
 Exemplos de uso desse elemento:
 É recomendado usar esses elementos especificamente para

títulos e subtítulos. Não é bom usá-los apenas para negritar
textos.
lógico!!!).
2. Copie e cole nessa pasta o arquivo body_4_tag_h.html,
extremidades das frases Eu sou um cabeçalho H1, Eu sou
um cabeçalho H2 ... Eu sou um cabeçalho h6, as tags
<h1></h1>, <h2></h2>... <h6></h6>, como no exemplo
abaixo:
<h1> Eu sou um cabeçalho H1 </h1>
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.
<p>Texto</p>

Elemento <p>
Elemento <p>
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>
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.
<code>texto</code>
 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:
lógico!!!).
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/>
navegador (browser) para ver as utilidades dessas
tags!
Elemento <small>
 O elemento <small> é utilizado para exibir texto em
tamanho pequeno. Sua sintaxe é descrita abaixo:
<small>Texto pequeno</small>
Elemento <small>
primeiro nome. Dentro dessa pasta abra a outra pasta com
o nome html (se ambas já não estiverem abertas, é
lógico!!!).
body_7_tag_small.html, fornecido pelo professor (via e-
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>
Elemento <sub>
 O elemento <sub> é utilizado para definir texto
subscrito. Um texto que esteja nessas condições é
exibido meio caractere abaixo da linha-base.
<sub>texto</sub>
Elemento <sub>
lógico!!!).
2. Copie e cole nessa pasta o arquivo body_8_tag_sub.html,
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 - A formula da água é: H20;
2 - A formula do gás carbônico é: C02;
3 - Com a proporção definida (6:12:6), temos a fórmula
molecular da glicose: C6H12O6;
4 - Função horária da velocidade: v = v0 + at;
5 - Função horária da posição horizontal: x = x0 + v0xT
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
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>
Elemento <sup>
lógico!!!).
2. Copie e cole nessa pasta o arquivo body_9_tag_sup.html,
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 - A formula da água é: H20;
2 - A formula do gás carbônico é: C02;
3 - Com a proporção definida (6:12:6), temos a fórmula
molecular da glicose: C6H12O6;
4 - Função horária da velocidade: v = v0 + at;
5 - Função horária da posição horizontal: x = x0 + v0xT
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 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;
3. Membro três da lista.
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>
Elemento <li>
 Exemplos de uso desses
elementos:
Elemento <li>
lógico!!!).
body_10_tag_listas.html, fornecido pelo professor (via e-
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:
Elemento <li>

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>
 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.
 Exemplos de uso do elemento <div>:
 Exemplos de uso do elemento <span>:
lógico!!!).
body_11_tag_estilos.html, fornecido pelo professor (via e-
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:

Estude mais sobre todos os aspectos apresentados

até aqui, com os conteúdos de sua apostila!!!!
Elementos de Imagem e Multimídia

Aulas 01 HTML e CSS PDF

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Aulas 01 HTML e CSS PDF

Caricato da

Copyright:

Formati disponibili

Introdução

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

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

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

 Sendo o último exemplo, praticamente obrigatório

 O exemplo a seguir demonstra uma forma básica de

 O exemplo a seguir demonstra uma forma básica de

 Não!? Então ....

 E agora! Lembram quais os dois

 Isso mesmo! O Doctype e os

 Exemplos de uso deste elemento:

 É recomendado usar esses elementos especificamente para

 Exemplos de uso desse elemento:

 Existem inúmeros elementos equivalentes a este, que

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

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

Estude mais sobre todos os aspectos apresentados

Potrebbero piacerti anche