Material de Apoio - HTML, CSS

HTML - CSS
ETEC SALES GOMES

Programação para Web – Prof Diogo
COMO AS PESSOAS ACESSAM A
INTERNET?
Pessoas acessam a Internet por meio de software chamado Browser (navegador)
Quando você inicia o acesso a uma web page, o Browser irá enviar uma requisição
dessa página para um computador especial chamado Web Server (servidor web)
Youtube
Facebook
Browser Google Chrome
Você acessando youtube

O QUE É HTML?
HTML - Hipertext Markup Languagem
É a linguagem utilizada para construção de páginas web.
Utilizando HTML podemos definir a estrutura (esqueleto) de nossa página web.
Como é definida hoje
Como era antes

VERSÕES HTML
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
VAMOS CORRIGIR OS
PROBLEMAS DO HTML 4.01 1999
HTML 4!
XHTML 2000
HTML5 2014
VAMOS JUNTAR E MELHORAR
O XHTML E HTML 4!
ELEMENTOS HTML
Elementos HTML possuem início e fim.
Elementos HTML possuem um nome que determina o quer faz cada elemento.
O elemento H1 abaixo cria uma região de título primário.
<h1>Meu Primeiro Título </h1>

O elemento P cria uma região para digitar um parágrafo de texto.
<p> Esse elemento é utilizado para criar um bloco

para texto em formato de parágrafo. </p>
Consulte: https://www.w3schools.com/html/html_elements.asp
TAG
DECLAÇÃO DO ELEMENTO
SÍMBOLO MENOR QUE SÍMBOLO MAIOR QUE
<p>
• Todo elemento HTML estará sempre entre simbologias de “maior que” e
“menor que”
• Após a declaração da TAG normalmente adicionamos o conteúdo a qual ela

faz parte
• Normalmente uma TAG deve ser fechada utilizando uma barra
FECHANDO UMA TAG
<p> Este é um parágrafo! </p>
ATRIBUTOS
Elementos HTML podem possuir atributos, que são informações ou configurações adicionais para
complemento do elemento
NOME DO ATRIBUTO
<p lang=”pt-br”> Conteúdo </p>
VALOR DO ATRIBUTO
O nome do atributo indica qual O valor do atributo é uma

informação extra está atrelada ao informação ou configuração do que
elemento HTML. está sendo adicionado ao elemento
Consulte: https://www.w3schools.com/html/html_attributes.asp
BODY, HEAD, TITLE, META
Declaração que estamos utilizando um documento HTML 5
<!DOCTYPE html>
Declaração de início do documento
<html>
Cabeçalho que conterá informações
sobre a página
<head>
Configurações adicionais que serão
adicionadas para a página, há vários
atributos para meta
Elemento que irá determinar qual

<meta>
será o título da página no navegador
<title>
Corpo do documento HTML
<body>
Consulte: https://www.w3schools.com/html/html_intro.asp
INFORMAÇÕES ADICIONAIS NA
PÁGINA Todo documento HTML deve
<!DOCTYPE html> começar com essa declaração
Atributo que especifica a
<html lang=”pt-br”> linguagem da página
<head> Atributo configurando a

simbologia a ser utilizada
<meta charset=”utf-8”>
<title> Meu título do site </title>
</head>
<body>
Todo conteúdo do meu site aqui!
</body>
</html>
ELEMENTO HEAD
Dentro do elemento head poderão ser adicionados elementos extras (metadata), não visíveis ao usuário, de
informação ou configuração.
Simbologia a ser utilizado ao longo da página
<meta charset=”utf-8”> Simbologia utilizada pelo site
Autor do site 666

Definindo o nome do autor da página
<meta name=”author” content=”Xuxa”>

Declarando palavras chaves correspondentes ao site
<meta name=”keywords” content=”termo,

termo, termo”> Palavras chaves sobre o site. Bom para
que motores de busca encontrem mais
facilmente seu site
Adicionando uma descrição para o site
Uma breve descrição do site para
<meta name=”description” aparecer nos motores de busca
content=”Descrição do site”>
Consulte: https://www.w3schools.com/html/html_head.asp
INSPECIONE SEU SITE
Analisando o código fonte do Google.
Botão direito na região desejada e

selecione Inspecionar
Código HTML Código CSS

HTML BÁSICO
CABEÇALHO
<h1> Cabeçalho Primário </h1>
<h2> Cabeçalho Secundário </h2>
<h3> Cabeçalho Ternário </h3>
<h4> Cabeçalho Quaternário </h4>
<h5> Cabeçalho Quinário </h5>
<h6> Último nível de cabeçalho </h6>
Cabeçalho Primário O elemento de nível primário define o
cabeçalho mais importante. O elemento
Cabeçalho Secundário
<h6>, define o cabeçalho de menor
Cabeçalho Ternário importância. Todos esses elementos de
Cabeçalho Quaternário cabeçalhos definem título que podem ser
Cabeçalho Quinário aplicados a blocos de textos da página web.
Último nível de cabeçalho
Consulte: https://www.w3schools.com/html/html_headings.asp
COMENTÁRIOS

Exclamação somente no início!

PARÁGRAFO
<p>
Este é um parágrafo.
Outra linha do meu parágrafo.
Mais uma linha do parágrafo.
<br>Última linha do meu parágrafo.
</p>
QUEBRA DE LINHA
Este é um parágrafo. Outra linha do meu parágrafo. Mais uma linha do meu parágrafo.
Última linha do meu parágrafo.
Consulte: https://www.w3schools.com/html/html_paragraphs.asp
FORMATANDO ELEMENTOS
<b> Texto Negrito </b>

<i> Texto Itálico </i>
E=MC<sup>2</sup>
CO<sub>2</sub>
Texto Negrito
Texto Itálico
E=MC2
CO2
Consulte: https://www.w3schools.com/html/html_formatting.asp
MARCAÇÕES SEMÂNTICAS
Marcações semânticas irão demonstrar para o navegador o significado do elemento. Quando utilizamos
o elemento <b>, estamos apensar formatando o texto em negrito, porém ao utilizar <strong> estamos
demonstrando para o navegador que esse trecho de texto deve estar em destaque.
<strong> Texto em destaque forte </strong>

<em> Texto em ênfase </em>
Texto com <mark> marcação </mark>
Texto em destaque forte

Texto em ênfase
Texto com marcação
Consulte: https://www.w3schools.com/html/html_formatting.asp
ASPAS
<blockquote> Texto que “utiliza” aspas </blockquote>
Aspas são utilizadas em atributos dos elementos, e para não haver conflito entre a
declaração dos atributos e trechos de texto que utilizam aspas, podemos isolar esses
trechos utilizando o comando blockquote
Consulte: https://www.w3schools.com/html/html_quotation_elements.asp
INFORMAÇÕES DE ENDEREÇO
<address>
<p> Praça Adelaide B. Guedes, Centro</p>
<p> Tatuí – SP </p>
<p> 18270-020 </p>
</address>
Address é semântico, e demonstra para o navegador que essa região de texto

contém dados sobre endereço como rua, cidade, bairro, cep, ...
Consulte: https://www.w3schools.com/tags/tag_address.asp
LISTAS
LISTA NÃO ORDENADA
<ul> Definição para lista não ordenada
<li> Cada elemento da lista é colocado entre <li> e </li>
<ul>
<li>Pizza Grande</li> • Pizza Grande
<li>Pizza Média</li> • Pizza Média
• Pizza Pequena
<li>Pizza Pequena</li>
</ul>
Consulte: https://www.w3schools.com/html/html_lists.asp
LISTA ORDENADA
<ol> Definição para lista ordenada
<li> Cada elemento da lista é colocado entre <li> e </li>
<ol type=”A”>
<li>Pizza Grande</li> A. Pizza Grande
B. Pizza Média
<li>Pizza Média</li>
C. Pizza Pequena
<li>Pizza Pequena</li>
</ol>
LISTA DEFINIDAS
<dl> Lista de definição é criada com <dl>
<dt> Declaração do título da lista
<dd> Declaração do texto da lista
<dl>
<dt>HTML</dt>
<dd>Linguagem de marcação de
hipertexto</dd>
</dl>
HTML
Linguagem de marcação de hipertexto
LINKS
LINK PARA OUTRO SITE
<a> O elemento <a> e </a> determina o início e fim de um link.
Texto do link
<a href=”http://www.google.com.br” target=”_blank”>Acessar</a>
Atributo que determina qual página Atributo para fazer a página ser aberta
será acessada ao clicar sobre o link em uma nova janela/guia.
Consulte: https://www.w3schools.com/html/html_links.asp
LINK PARA O MESMO SITE
<a href=”contato.html” target=”_blank”>Acessar</a>
Página que está contida junto ao diretório

do seu site
LINK PARA REGIÃO ESPECÍFICA
DO SITE
<a href=”#contato”>Acessar Contato</a>
LINK DE E-MAIL
Irá iniciar o programa padrão de e-mail

usuário. É necessário ter uma aplicação
de e-mail pré-definida no computador
<a href=”mailto:etec@etec.sp.gov.br”>
Acessar Contato</a>
ENDEREÇO DO LINK
Endereço absoluto, ou seja, o caminho completo
<a href=”http://www.meusite.com.br/sobre.html”>
Endereço relativo
<a href=” sobre.html”>

Página dentro da pasta
Pasta Pasta
<a href=”conteudo/dados/sobre.html”>
Irá retornar a pasta anterior (um nível do diretório)
<a href=”../sobre.html”>
IMAGENS
DICAS PARA SELECIONAR
IMAGENS
Imagens devem
Ser relevantes
Informação complementar
De fácil reconhecimento
Conter cores que combinam com o site
Site de imagens
pexels.com
istockphoto.com
gettyimages.com
veer.com
sxc.hu
fotolia.com
1000imagens.com
Sempre verifique os direitos autorais das imagens/site que está sendo utilizado!
SALVANDO IMAGENS
Ao salvar as imagens, coloque-as de forma organizada

dentro do diretório do seu site
ADICIONANDO IMAGENS NO
SITE
<img> Elemento que define a aplicação de uma imagem
src=”url” Diretório absoluto ou relativo da imagem
alt=”Exemplo” Texto alternativo para imagem
<img src=”img_logo.png” alt=”Imagem do logo”>
Consulte: https://www.w3schools.com/html/html_images.asp
LARGURA E ALTURA
width Largura da imagem
height Altura da imagem
<img src=”img_logo.png” width=”35” height=”35”>

FORMATOS DE IMAGENS
PNG Permite excelente qualidade, mantém as mesmas cores em diferentes

dispositivos, e permite transparência
JPG
Imagem compacta, as cores e qualidade pode variar dependendo do
dispositivo que for visualizada
GIF Permite animações e imagens com cores simples
SVG Imagens em formato de vetor para web

AGRUPANDO ELEMENTOS
DIV
Div são frequentemente utilizadas para agrupar elementos HTML.
<div id=”menu”>
<ul>
<li> Início </li>
<li> Sobre </li>
<li> Contato </li>
</ul>
</div>
SPAN
Span são elementos similares a DIV, porém irão agrupar elementos em linha.
<p>
Exemplo de aplicação de um span em uma linha,
para <span>agrupar elementos</span>
semelhantemente a aplicação de DIV
</p>
SÍMBOLOS
NOME DO TIPO DE CARACTERE A SER UTILIZADO
€
INÍCIO FIM
CONSULTE PARA VER MAIS SÍMBOLOS
Consulte: https://www.w3schools.com/html/html_symbols.asp
ELEMENTOS SEMÂNTICOS HTML
5
MAIN
Quando dizemos que um elemento é semântico,
significa que esse mesmo elemento possui algum
significado para o browser
O elemento Main demonstra para o navegador qual é o

conteúdo principal do site.
<main>
<h1>Navegadores Web </h1>
<p> Google chrome, Firefox, Internet
explorer, e há diversos outros
browsers!
</main>
Consulte: https://www.w3schools.com/tags/tag_main.asp
HEADER
<article> O elemento Header representa um cabeçalho para
iniciar tópicos, ou um cabeçalho para página onde
pode ser adicionado links
<header>
<h1>Navegadores Web </h1>
<p> Google chrome, Firefox,
Internet explorer, e há diversos
outros browsers!
</header>
</article>
Consulte: https://www.w3schools.com/tags/tag_header.asp
NAV
O elemento Nav define um local que irá conter links

de navegação
<nav>
<a href=”/html/”>HTML</a>
<a href=”/css/”>CSS</a>
<a href=”/js/”>JS</a>
</nav>
Consulte: https://www.w3schools.com/tags/tag_nav.asp
SECTION
O elemento Section engloba uma região que irá

demonstrar um assunto específico contendo
capítulos, cabeçalhos, rodapés, entre outros.
<section>
<h1>HTML</h1>
<p> Linguagem de Marcação de
Hipertexto</p>
</section>
Consulte: https://www.w3schools.com/tags/tag_section.asp
ARTICLE
<article>
<h1>Perguntas e Respostas</h1>
<p> O que é HTML?</p>
</article>
O elemento Article especifica uma região específica para conteúdo de fórum, post de
blog, comentários.
Consulte: https://www.w3schools.com/tags/tag_article.asp
HGROUP
<hgroup>
<h1>Tópico Principal</h1>
< h2> Perguntas e Respostas</ h2>
</hgroup>
< p> Primeira Pergunta</ p>
O elemento Hgroup define um grupo para títulos e subtítulos

FOOTER
O elemento Footer define a região do rodapé para a página, ou para um rodapé para
parte específica da página como por exemplo um Section, Article, Main, Div.
<footer>
<p>Postado por: Inocêncio</p>
< p> Contato: inocêncio@net.com</p>
</footer>
Consulte: https://www.w3schools.com/tags/tag_footer.asp
CSS
COMO CSSS FUNCIONA?
Quando falamos em estilizar, estamos dizendo que podemos formatar: cor da letra, tamanho, organização dos
elementos, bordas, cores, etc.
CSS é a linguagem para estilizar o documento

HTML
CSS descreve como os elementos HTML devem
ser exibidos
Consulte: https://www.w3schools.com/css/default.asp
BLOCO DE ELEMENTOS
Normalmente elementos nativos costumam ser agrupados em blocos de elementos
<h1>7 Maravilhas do Mundo Moderno </h1>

<h2>Petra </h2>
<img src=”petra.png”>
Maravilhas do mundo Moderno

Petra
Block Elements
Consulte: https://www.w3schools.com/css/css_inline -block.asp

LINHA DE ELEMENTOS
Alguns elementos podem ser organizados em linha
<b>7 Maravilhas do Mundo Moderno </b> é um

projeto para <em>classificar </em> as
maravilhas espalhadas pelo mundo.
Maravilhas do Mundo Moderno é um projeto para
classificar as maravilhas espalhadas pelo mundo
Inline Elements
Consulte: https://www.w3schools.com/css/css_inline -block.asp

VINCULAR CSS E HTML
Index.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/main.css"> HTML
<title>Maravilhas</title>
</head>
<body>
</body>
</html>
Ligação CSS externo
Main.css
body {
background-image: url("../imagem/fundo.jpeg");
CSS background-repeat: no-repeat;
background-size: cover;
padding: 0;
margin: 0;
}
Consulte: https://www.w3schools.com/css/css_howto.asp
CSS INTERNO
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Maravilhas</title>
<style>
body {
background-image: url("../imagem/fundo.jpeg");
background-repeat: no-repeat;
background-size: cover;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
CSS EM LINHA
<h1 style=”color:blue;”> Exemplo </h1>
CSS em linha aplicado ao elemento H1

do documento HTML
SELETORES E DECLARAÇÕES
SELETOR
DECLARAÇÃO DECLARAÇÃO
h1 {color: blue; font-size: 12px;}

PROPRIEDADE VALOR PROPRIEDADE VALOR
Consulte: https://www.w3schools.com/css/css_syntax.asp
ID E CLASS
#box {
Declaração de background-color: red;
ID
}
.box {
Declaração de background-color: red;
CSS
}
Consulte: https://www.w3schools.com/css/css_syntax.asp
FONT
font-family: “Times New Roman”, Arial, Serif;

Tipo da Letra
font-style: italic;
Itálico
font-size: 30px;
Tamanho do texto
font-weight: bold; Peso da fonte
Consulte: https://www.w3schools.com/css/css_font.asp
TEXT
color: blue;
Cor da letra
text-align: center;
Texto centralizado
text-decoration: overline; Sublinhado superior
text-decoration: underline;
Sublinhado inferior
Letra em maiúscula
text-transformation: uppercase;
Letra minúscula
text-transformation: lowercase;
text-transformation: capitalize;
Primeira letra somente em
Maiúscula
Consulte: https://www.w3schools.com/css/css_font.asp
letter-spacing: 20px;
Espaçamento entre letras
letter-spacing: -5px; Espaçamento entre letras
word-spacing: 5px;
Espaçamento entre palavras
word-spacing: -5px; Espaçamento entre palavras
line-height: 1.5; Altura da linha de uma linha e

meia
text-shadow: 3px 2px 5px red; Sombra no texto
deslocamento
deslocamento
horizontal
vertical
desfoque do cor do
sombreamento sombreamento
Consulte: https://www.w3schools.com/cssref/css3_pr_text -shadow.asp

MARGIN (MARGEM EXTERNA)
margin-top 5px; Margem externa superior
margin-left: 5px;
Margem externa esquerda
margin-right: 5px;
Margem externa direita
margin-bottom: 5px; Margem externa inferior
margin: 25px 5px 4 px 3px;

Configurando cada lado da
margem em uma única linha
margin: 5px;
Todas as margens com mesma medida
Consulte: https://www.w3schools.com/css/css_margin.asp
PADDING (MARGEM INTERNA)
padding-top 2px; Margem interna superior
padding-left: 2px;
Margem interna esquerda
padding-right: 2px;
Margem interna direita
padding-bottom: 2px; Margem interna inferior
padding: 5px 3px 4px 2px;

Configurando cada lado da
margem em uma única linha
padding: 5px;
Todas as margens com mesma medida
Consulte: https://www.w3schools.com/css/css_padding.asp
BOX MODEL
Margem Externa
Margem Interna
Borda
Conteúdo
Consulte: https://www.w3schools.com/css/css_boxmodel.asp
HEIGTH E WIDTH
height: 5px;
Largura do elemento
width: 5px;
Altura do elemento
Consulte: https://www.w3schools.com/css/css_dimension.asp
BORDER (BORDA)
border-style: solid;
Borda de todos os lados do tipo sólida
border-width: 5px;
Largura da borda
border-color: red;
Cor da borda de todos os lados em vermelho
border-radius: 5px;
Borda arredondada em 5 pixels
Consulte: https://www.w3schools.com/css/css_border.asp
BOX SHADOW (SOMBRA)
box-shadow: 5px 4px 10px black;

Descolamento horizontal da sombra
Descolamento vertical da sombra
Desfoque da sombra
Cor da sombra
Sombra que pode ser aplicada aos elementos
HTML como DIV, Span, IMG, dentre outros.
Consulte: https://www.w3schools.com/css/css3_shadows.asp
GRADIENT (DEGRADÊ)
Efeito de gradiente
background-image: linear-gradient(-90deg, red, yellow);
Ângulo de rotação do gradiente
Cores do gradiente
Consulte: https://www.w3schools.com/css/css3_gradients.asp
Aguarde os próximos capítulos!!!

Material de Apoio - HTML, CSS

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Material de Apoio - HTML, CSS

Enviado por

Direitos autorais:

Formatos disponíveis

HTML - CSS

ETEC SALES GOMES

Browser Google Chrome

Você acessando youtube

É a linguagem utilizada para construção de páginas web.

Utilizando HTML podemos definir a estrutura (esqueleto) de nossa página web.

Como é definida hoje

Como era antes

Elementos HTML possuem início e fim.

O elemento H1 abaixo cria uma região de título primário.

<h1>Meu Primeiro Título </h1>

<p> Esse elemento é utilizado para criar um bloco

SÍMBOLO MENOR QUE SÍMBOLO MAIOR QUE

• Após a declaração da TAG normalmente adicionamos o conteúdo a qual ela

• Normalmente uma TAG deve ser fechada utilizando uma barra

<p> Este é um parágrafo! </p>

<p lang=”pt-br”> Conteúdo </p>

O nome do atributo indica qual O valor do atributo é uma

Elemento que irá determinar qual

<!DOCTYPE html> começar com essa declaração

Atributo que especifica a

<html lang=”pt-br”> linguagem da página

<head> Atributo configurando a

Simbologia a ser utilizado ao longo da página

<meta charset=”utf-8”> Simbologia utilizada pelo site

Autor do site 666

<meta name=”author” content=”Xuxa”>

<meta name=”keywords” content=”termo,

Analisando o código fonte do Google.

Botão direito na região desejada e

Código HTML Código CSS

Exclamação somente no início!

<b> Texto Negrito </b>

<strong> Texto em destaque forte </strong>

Texto em destaque forte

<blockquote> Texto que “utiliza” aspas </blockquote>

Address é semântico, e demonstra para o navegador que essa região de texto

<li> Cada elemento da lista é colocado entre <li> e </li>

<li> Cada elemento da lista é colocado entre <li> e </li>

<dt> Declaração do título da lista

<dd> Declaração do texto da lista

<a href=”http://www.google.com.br” target=”_blank”>Acessar</a>

<a href=”contato.html” target=”_blank”>Acessar</a>

Página que está contida junto ao diretório

<a href=”#contato”>Acessar Contato</a>

Irá iniciar o programa padrão de e-mail

<a href=” sobre.html”>

Ao salvar as imagens, coloque-as de forma organizada

src=”url” Diretório absoluto ou relativo da imagem

alt=”Exemplo” Texto alternativo para imagem

<img src=”img_logo.png” alt=”Imagem do logo”>

width Largura da imagem

height Altura da imagem

<img src=”img_logo.png” width=”35” height=”35”>

PNG Permite excelente qualidade, mantém as mesmas cores em diferentes

GIF Permite animações e imagens com cores simples

SVG Imagens em formato de vetor para web

NOME DO TIPO DE CARACTERE A SER UTILIZADO

CONSULTE PARA VER MAIS SÍMBOLOS

O elemento Main demonstra para o navegador qual é o

O elemento Nav define um local que irá conter links

O elemento Section engloba uma região que irá

O elemento Hgroup define um grupo para títulos e subtítulos