Aula de HTML e CSS

HTML
Introdução
■ Criando um documento HTML
– Menu Iniciar > Programas > Acessórios > Bloco de notas;
– No Bloco de notas: Arquivo > Salvar como...;
– Alterar o tipo de arquivo para: Todos os arquivos;
– Codificação: UTF-8;
– Salvar o arquivo com extensão .html;
Conceitos básicos sobre HTML
■ Sigla para HyperText Markup Language (Linguagem de

Marcação de Hipertexto);
■ HTML é a linguagem utilizada na comunicação entre o
desenvolvedor de uma página WEB e o navegador (Internet
Explorer, Mozilla Firefox, Safari, ...);
■ A HTML utiliza identificadores que são chamados de TAG. Essas
TAGs indicam ao navegador o elemento a ser exibido;
■ Cada TAG apresenta uma lista de atributos que podem definir
as propriedades dos elementos como aparência, tamanho,
posição, cores, fontes, etc.
Estrutura de uma Página Web Simples
<html>
<head> Limite do Cabeçalho (aqui

vai informação da página)
Limite Principal </head>
do Programa
(o mais
importante)
Limite do Corpo do
<body> Programa (aqui vai o
Conteúdo da página)
</body>
</html>
Sintaxe das TAGs
■ As TAGs são palavras definidas, em inglês, e são escritas entre

os sinais ‘<’ e ‘>’;
■ As TAGs devem ser abertas e fechadas para que o navegador
saiba de onde e até onde está definido o elemento. Para se
fechar uma TAG é utilizado o sinal ‘/’.
■ Algumas poucas TAGs não necessitam ser fechadas, sendo
recomendado a inserção do sinal ‘/’ na TAG de abertura;
■ Exemplos:
– <tag> ... </tag> - TAG aberta e fechada;
– <tag/> - TAG que não precisa ser fechada;
Sintaxe das TAGs
■ Os atributos de uma TAG são inseridos dentro da TAG de

abertura e seus valores devem estar entre aspas simples ou
dupla.
■ Exemplos:
– <tag atr1='prop1'> ... </tag>
– <tag atr1='prop1' atr2="prop2"/>
TAGs fundamentais
■ <html> e </html>
– Usadas em toda página WEB, é a primeira e a última TAG a ser
inserida em um documento HTML. Entre elas fica escrita toda a
página.
■ <head> e </head>
– Head (cabeça) é uma TAG de cabeçalho. Nela são inseridas as
primeiras configurações da página a serem utilizadas durante a
interpretação feita pelo navegador. Algumas dessas configurações são
as folhas de estilo, CSS (Cascading Style Sheets), o título da página e
scripts de execução;
■ <title> e </title>
– title (título) é a TAG que define o título da página e fica inserida dentro
de head.
TAGs fundamentais
■ <body> e </body>
– body (corpo) é a TAG onde ficam escritos todos os elementos visíveis da página:
textos, links, imagens, formulários e etc.
■ Principais atributos de <body>:

 Bgcolor
• conjunto de cores: {blue, red, yellow, green, ...};
• utilizado para definir a cor de fundo; as cores também podem ser representadas
com codificação hexadecimal; o número de cores distintas disponíveis utilizando
o sistema RGB (Reb-Green-Blue) de cores (sistema mais simples) supera 16mi.
 Background
• seleciona uma imagem para plano de fundo;
• deve ser inserido o endereço da imagem.
Exemplo 1
<html>
<head>
<title>Sou o título</title>
</head>
<body bgcolor=‘pink’>
Olá! Aqui fica o corpo da pagina.
</body>
</html>
Formatação de Texto
■ Quebra de Linha e parágrafo:

• <br>  quebra de linha;
• <p> e </p>  parágrafo.
■ Principal atributo de <p>
• align
 conjunto de valores: {center, left, right, justify};
 utilizado para alinhar um texto;
 caso não seja definido, o valor padrão é left.
Exemplo 2
<body>
Um parágrafo com quebra de linhas alinhado ao
centro:<p align='center'>"Quem crer pudera, tempo em
fora, no meu verso,<br/>Se o vosso alto valor eu
proclamasse nele?<br/>Então – e sabe-o o céu – como em
tumba, ao inverso,<br/>Vossa vida aí oculto e o mais que
em vós excele.<br/>Dissesse eu o que minha alma em
vossos olhos sente,<br/>Vossas graças, fiel, todas
enumerasse,<br/>E o futuro diria: Este poeta
mente;<br/>Beleza assim não há da terra sobre a
face".</p>
</body>
Formatação de textos
■ Títulos
• <h1> e </h1>  título maior;
• <h2> e </h2>
• <h3> e </h3>
• <h4> e </h4>
• <h5> e </h5>
• <h6> e </h6>  título menor.
 Principal atributo
• align
Exemplo 3
<html>
<body>
<h1>Título 1 (esquerda)</h1>
<h2 align='left'>Título 2 (esquerda)</h2>
<h3 align='center'>Título 3 (centro)</h3>
<h4 align='center'>Título 4 (centro)</h4>
<h5 align='right'>Título 5 (direita)</h5>
<h6 align='right'>Título 6 (direita)</h6>
</body>
<html>
Formatação de textos
■ Formatações gerais
• <b> e </b>  negrito;
• <i> e </i>  itálico;
• <u> e </u>  sublinhado;
• <s> e </s>  riscado;
• <font> e </font>  define propriedades da fonte como, tamanho,
cor, fundo.
■ Principais atributos de <font>
• size  conjunto de tamanhos: {1, ..., 7}, sendo 1 o menor
tamanho;
 utilizado para definir o tamanho do texto;
• color  mesmo conjunto de cores do atributo bgcolor;
 utilizado para definir a cor da letra.
Exemplo 4
<body>
<h4>Formatações gerais:</h4>
Negrito: <b>texto</b><br/>
Itálico: <i>texto</i><br/>
Sublinhado: <u>texto</u><br/>
Riscado: <s>texto</s><br>
<font color='red' size='2'>Vermelho tamanho 2 </font><br/>
<font color='#0000FF' size='5'>Azul tamanho 5 </font>
</body>
Trabalhando com figuras
■ Inserção
– <img>  insere uma figura.
■ Principais atributos
– align;
– src  indica onde está a imagem;
– border  define a espessura da borda;
– height  define a altura;
– width  define a largura.
Exemplo 5
<body background=images.jpg'>
<img src='images2.jpg' border='2px'/>
<img src='images2.jpg' height='100px' width='200px;'/>
<img src='images2.jpg' height='150px'/>
</body>
Organização dos elementos
■ Listas
• <ul> e </ul>  lista não-ordenada (Unordered List);
• <ol> e </ol>  lista ordenada (Ordered List);
• <li> e </li>  item da lista (List Item);  deve ser utilizado dentro da ol
ou da ul.
■ Principal atributo das listas
– Type
 conjunto de tipos: {1, a, A, i, I, circle, disc, square};
 utilizado para definir o marcador a ser utilizado na lista;
 a TAG ol utiliza apenas os valores {1, a, A, i, I};
 a TAG ul utiliza apenas os valores {circle, disc, square};
 a TAG li utiliza qualquer um dos tipos apresentados.
 pode-se usar o type como none para que não mostre nenhum
marcador.
Exemplo 6
<ol type='i'>
<li> Cores:
<ul type='square'>
<li>Vermelho</li>
<li>Verde</li>
<li>Azul</li>
</ul>
</li>
<li>Símbolos
<ul>
<li>Quadrado</li>
<li type='disc'>Triângulo</li>
<li>Ponto</li>
</ul>
</ol>
Organização dos Elementos
■ Tabelas
• <table> e </table>  tabela;
• <tr> e </tr>  linha da tabela (Table Row);
• <td> e </td>  célula (Table Data Cell);
• <th> e </th>  célula cabeçalho (Table Header Cell).
Organização dos Elementos
■ Principais atributos de <table>
• border, width, bgcolor, background.
■ Principais atributos de <tr>
• align, bgcolor;
• valign  alinha o conteúdo do elemento verticalmente;
• conjunto de valores: {bottom, middle, baseline, top}.
■ Principais atributos de <td> e <th>
– align, valign, bgcolor, background;
– colspan  define a quantidade de colunas ocupadas pela célula.
Exemplo 7 <table border='1px'>
<tr>
<th colspan='3'>Dados</th>
</tr>
<tr>
<th>Nome</th>
<th>Sobrenome</th>
<th>Idade</th>
</tr>
<tr>
<td>Andreina</td>
<td>Moreira</td>
<td>35</td>
</tr>
</table>
Organização dos elementos
■ Atributos de espaçamento de <table>

• cellspacing  define o espaço entre as células de uma
tabela;
• cellpadding  define o espaço entre o conteúdo de
uma célula e sua borda.
Exemplo 8
<table border='1px' cellspacing='60px' cellpadding='20px'>

<tr>
<td>Célula 1</td>
<td>Célula 2</td>
</tr>
<td>Célula 3</td>
<td>Célula 4</td>
</table>
Estruturação da página
 Frames
■ <frameset> e </frameset>
 define a disposição dos frames (quadros) na página;
* Não pode ser usado junto com a tag body;
■ <frame> e </frame>
 cria um frame;
 deve ser usado dentro da tag frameset.
■ Principais atributos de <frameset>
• border;
• Cols  define quantas colunas conterão frames,
informando suas larguras respectivamente.
■ Principais atributos de <frame>

• src;
• name  define um nome para o elemento;
• frameborder  define se o frame terá borda ou não;
 conjunto de valores: {no, yes};
• noresize  mantém fixo o tamanho do frame.
Exemplo 9
<head>
<title>Título</title>
</head>
<frameset cols='30%,55%,15%' border='5px'>
<frame name='frame1' src='exemplo6.html' frameborder='no'
noresize/>
<frame name='frame2' src='exemplo2.html' frameborder='no'/>
<frame name='frame3' src='exemplo1.html'/>
</frameset>
 Frames
■ <iframe> e </iframe>
 tag que permite inserir frames dentro da tag body;
 uma vez que não se pode utilizar frameset junto
com body deve-se usar iframe quando precisar
inserir algum frame em body.
 Principais atributos de <iframe>
• frameborder, height, name, src, width.
<body> Exemplo 10
<table width='700px' border='1px'>
<tr height='300px'>
<td width='150px' valign='top'>
Fora do frame!
</td>
<td>
<iframe src='exemplo7.html' width='100%' height='100%'
frameborder='no'></iframe>
</tr>
</table>
</body>
Interatividade da página
 Link
■ <a> e </a>
 tag que permite inserir links ná página;
 com esta tag torna-se possível a navegação em uma
página web.
■ Principais atributos de <a>
• href  indica a página ou arquivo a ser aberto;
• target  indica aonde a página ou arquivo deve ser
aberto;
 conjunto de valores: {_self, _blank, *}.
Exemplo 11
<table width='700px' border='1px’>
<tr height='300px'>
<td width='150px' valign='top'>
<a href='exemplo4.html' target='meuFrame'>Página 1</a><br/>
<a href='exemplo2.html' target='meuFrame'>Página 2</a>
</td>
<td>
<iframe name='meuFrame' src='exemplo1.html' width='100%' height='100%'
frameborder='no'></iframe>
</tr>
</table>
CSS
O que é CSS?
■ Acrônimo de Cascading Style Sheets (em português,
“folhas de estilo em cascata”), uma “linguagem” de
folhas de estilo usada para definir o layout de
documentos HTML, XML e XHTML;
■ Graças a ela, podemos separar a definição das tags
(HTML) da definição de formatação/layout (CSS);
■ O CSS traz toda a informação do layout (cores,
posicionamento, fontes, tamanhos, imagens de fundo,
margens etc.);
■ O HTML fornece uma “arquitetura” para o conteúdo.
■ Atualmente encontra-se na versão 3 (CSS3).
Folhas de Estilo
■ Folhas de estilo é um conjunto de regras que informa como deve
ser a formatação e a organização da página, definindo
características e comportamento dos elementos HTML.
■ Vantagens:
• Separa a estrutura da forma de apresentação
• Maior Controle da aparência da página
• Páginas mais leves
• Maior facilidade para fazer manutenção num site.
■ Todo esse controle via CSS pode ser descrito em um arquivo a
parte, com extensão .css, que é chamado de dentro do marcador
<head> ... </head> do seu código.
A Sintaxe do CSS (Seletores)
O CSS é composto por regras de estilo que são interpretadas pelo seu navegador e, em seguida,
aplicadas aos elementos correspondentes em sua página. Uma regra de estilo é feita de três
partes:
• Seletor ou Nome de Classe: Um seletor é uma tag HTML na qual o estilo será aplicado.
Um Nome de Classe é um nome personalizado de um estilo, que inicia com um “.”(ponto)
(ele pode ser aplicado em qualquer tag html).
• Propriedade: A propriedade é um tipo de atributo de tag HTML. Simplificando, todos os
atributos HTML são convertidos em propriedades CSS. Eles poderiam ser a cor ou a beira
etc.
• Valor: Os valores são atribuídos às propriedades. Por exemplo, a propriedade de cor pode
ter valor de vermelho ou #F1F1F1 etc.
Considerando essas três partes, a sintaxe de um código CSS fica assim:
seletor {propriedade: valor}

por exemplo: p {color: red}
.verde {color: green}
■ O selector é normalmente o nome de um elemento do
HTML, mas também pode ser um selector de classe,
um selector de ID ou um selector contextual (estes
conceitos serão esclarecidos mais à frente.)
Como implementar e usar o CSS?
No trecho abaixo, o elemento link foi definido com os atributos rel=“stylesheet”, que
quer dizer que trata-se de um arquivo de estilo, que será do tipo type=“text/css” e
está no arquivo de referência href=“estilo1.css”. Esse arquivo, que contém todo
código de estilo css, deve ser criado por você e posto no mesmo lugar que o arquivo
htlm.
<html>
<head>
<link rel=“stylesheet” type=“text/css” href=“estilo1.css”>
</head>
<body>
</body>
</html>
O que tem dentro do arquivo estilo1.css?
Arquivo estilo1.css
p {color: red}
.verde {color: green}
Utilizando o arquivo estilo1.css?
<html>
<head>
<link rel=“stylesheet” type=“text/css” href=“estilo1.css”>
</head>
<body>
<p> Texto Formatado com CSS </p>
<p class=‘verde’> Texto utilizando a classe
verde</p>
</body>
</html>
Alterando a cor do fundo de um parágrafo
Primeiro, altere o arquivo estilo1.css, incluindo o atributo
background-color:
Arquivo estilo1.css
.minhacor {color: red}

.corfundo {background-color: yellow}
Alterando a cor do fundo de um parágrafo
depois, aplique o estilo no seu código html, dentro da tag <p>, de parágrafo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Folha de estilo</title>
<link rel="stylesheet" type="text/css" href="estilo1.css">
</head>
<body>
<p class='minhacor'> Texto Formatado com CSS </p>
<p class='corfundo'>Este é um parágrafo com fundo AMARELO definido por
você </p>
<a href="../testes/exemplo11.html">Aqui</a>
</body>
</html>
Altere a formatação do seu texto
Dentro do seu arquivo estilo1.css você pode alterar o tamanho da fonte, o estilo, a largura, o tipo e muito mais.
Para isso, crie uma tag css para cada formato:
Altere a altura da fonte:

.alturafonte {font-weight: 900}
Altere o tamanho da fonte:

.tamanhofonte {font-size: 20px}
Altere a família da fonte:

.familiafonte {font-family: georgia, garamond, serif
Adicionando Desenhos
Adicionando Desenhos com SVG
SVG é a abreviatura de Scalable Vector Graphics que pode

ser traduzido do inglês como gráficos vetoriais escaláveis
Trata-se de um elemento de página Web que permite você construir

páginas que contenham desenhos e gráficos bidimensionais, quer de
forma estática, quer dinâmica ou animada.
Exemplo simples de um Código com
HTML e SVG
<html>
<body>
<svg>
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
Resultado!!
Outro Exemplo
<html>
<body>
<svg width="400" height="100">
<rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
</body>
</html>
Resultado!!
Mais um Exemplo
<html>
<body>
<rect x="50" y="20" rx="20" ry="20" width="150" height="150“ style="fill:red; stroke:black;stroke width:5;opacity:0.5" />
</svg>
</body>
</html>
Resultado!!
Mais um Exemplo
<html>
<body>
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
</body>
</html>
Resultado!!

Aula de HTML e CSS

Enviado por

Dados do documento

Descrição original:

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

Aula de HTML e CSS

Enviado por

Direitos autorais:

Formatos disponíveis

HTML

■ Sigla para HyperText Markup Language (Linguagem de

<head> Limite do Cabeçalho (aqui

■ As TAGs são palavras definidas, em inglês, e são escritas entre

■ Os atributos de uma TAG são inseridos dentro da TAG de

■ Principais atributos de <body>:

■ Quebra de Linha e parágrafo:

■ Atributos de espaçamento de <table>

<table border='1px' cellspacing='60px' cellpadding='20px'>

■ Principais atributos de <frame>

seletor {propriedade: valor}

<link rel=“stylesheet” type=“text/css” href=“estilo1.css”>

.minhacor {color: red}

Altere a altura da fonte:

Altere o tamanho da fonte:

Altere a família da fonte:

SVG é a abreviatura de Scalable Vector Graphics que pode

Trata-se de um elemento de página Web que permite você construir

Você também pode gostar