Aula III HTML - Criação de Sites I

Aula anterior
 Formatação de documentos HTML
 Recursos

NESTA AULA!
 Atributos
 Estilos

OBJETIVOS:
 Apresentar atributos dos elementos HTML
 Apresentar exemplos
 Formatar documentos HTML utilizando o
recurso de estilização
 Apresentar exemplos

Atributos HTML
 Fornecem informações adicionais sobre os elementos HTML;
 Especificados na tag de início;
 Atributos vem em pares nome/valor;
Exemplo:
<p title=”Exemplo”>Exemplo de aplicação de uma cor especifica no texto de um
paragrafo.</p>

Atributo lang
 Declarado na tag <html>;
 Declara o idioma;
 importante para aplicativos de acessibilidade;
Exemplo:
<html lang="pt-BR">

Atributo title
 Declarado na tag <p>;
 Declara uma descrição do paragrafo;
 Quando movemos o mouse sobre o elemento, o título será exibido como uma dica
do texto.
Exemplo:
<p title="Sobre a Turma de Criação de Sites">
A turma de Criação de Sites estuda HTML, CSS, JavaScript, SQL, PHP, etc.
</p>

Atributo href
 Definido na tag <a>;
 O endereço do link é especificado no atributo href;
Exemplo:
<a href=”http://www.cimol.g12.br” >Cimol</a>

Atributos de tamanho
 Definidos na tag <img>;
 Largura do elemento – width;
 Altura do documento – height;
Exemplo:
<img src="./images/coca.jpg" width="200" height="100">

Atributo alt
 Especifica um texto alternativo;
 Usado quando um elemento HTML não pode ser exibido;
 Atributo pode ser lido por "leitores de tela“;
 Uma pessoa cega, pode "ouvir" o elemento;
Exemplo:
<img src="../images/coca.jpg" alt=”Coca Cola” width="200" height="100">

Aspas simples ou duplas?
Aspas duplas é o estilo mais comum em HTML, mas o estilo simples também pode
ser usado.

Estilizando HTML
 Cada elemento HTML tem um estilo padrão;
 (cor de fundo é branco e cor do texto é preto);
 Mudar o estilo padrão de um elemento HTML;
 Atributo de estilo – style
<body style="background-color:lightgrey">
<h1>Título</h1>
<p>Paragrafo.</p>
</body>

Estilizando HTML – Sintaxe
style="property:value"
Exemplo:
<h1 style="color:blue">Cor Azul</h1>
<p style="color:red">Parágrafo com o texto na cor vermelha</p>

Atributos – FONTES (font)
 color - Serve para indicar a cor do texto. Admitem quase todas as etiquetas de HTML. Nem
todos os nomes de cores são admitidos no padrão, é aconselhável então utilizar o valor RGB.
Possíveis valores: Valor RGB ou nome da cor.
Exemplos:
color: #009900;
color: red;
 font-size - Serve para indicar o tamanho das fontes com maior exatidão.
Possíveis valores: xx-small | x-small | medium | large | x-large | xx-large - Unidades de CSS
Exemplos:
font-size:12pt;
font-size:x-large;
 font-Family - Com este atributo indicamos a família de tipografia do texto. Os primeiros valores
são genéricos, ou seja, os exploradores as compreendem e utilizam as fontes que o usuário tenha
em seu sistema. Também podem se definir com tipografias normais, como ocorria em HTML. Se o
nome de uma fonte tem espaços se utilizam aspas para que se entenda bem.
Possíveis valores: serif | sans-serif | cursive | fantasy | monospace -Todas as fontes habituais.
Exemplos:
font-Family: arial, helvética;
font-size: fantasy;

Atributos – FONTES (font)
 font-weight – Serve para definir a largura dos caracteres, ou com outras palavras, para colocar
negritas com total liberdade. Normal e 400 são o mesmo valor, assim como bold e 700.
Possíveis valores: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Exemplos:
font-weight: bold;
font-weight: 200;
 font-style – É o estilo da fonte, que pode ser normal, itálico ou oblíquo. O estilo oblíquo é similar
ao itálico.
Possíveis valores: normal | italic | oblique
Exemplos:
font-style: normal;
font-style: italic;

Atributos – PARÁGRAFOS (text)
 line-height – A altura de uma linha, e portanto, o espaçamento entre linhas. É uma dessas
características que não se podiam modificar utilizando HTML.
Possíveis valores: normal e unidades CSS.
Exemplos:
line-height: 12px;
line-height: normal;
 text-decoration – Para estabelecer a decoração de um texto, ou seja, se está sublinhado, etc.
Possíveis valores: none | [ underline || overline || line-through].
Exemplos:
text-decoration: none;
text-decoration: underline;
 text-align – Serve para indicar o alinhamento do texto.
Possíveis valores: left | right | center | justify.
Exemplos:
text-align: right;
text-align: center;

Atributos – PARÁGRAFOS (text)
 text-indent – Atributo que serve para fazer recuos ou margens nas páginas.
Possíveis valores: unidades CSS.
Exemplos:
text-indent: 10px;
text-indent: 2in;
 text-transform – Permite-nos transformar o texto, fazendo com que tenha a primeira letra em
maiúsculas de todas as palavras, ou ainda tudo em maiúsculo ou minúscula.
Possíveis valores: capitalize | uppercase | lowercase | none
Exemplos:
text-transform: none;
text-transform: capitalize;

Atributos – FUNDO (background)
 background-color – Serve para indicar a cor de fundo de um elemento da página.
Possíveis valores: Uma cor, com seu nome ou seu valor RGB.
Exemplos:
background-color: green;
background-color: #000055;
 background-image – Colocamos com este atributo uma imagem de fundo em qualquer elemento
da página.
Possíveis valores: O nome da imagem com seu caminho relativo ou absoluto.
Exemplos:
background-image: url (imagem.gif);
background-image: url (http://www.x.com/imagem.gif);

Atributos – MARGENS (margin)
 margin-left – Indicamos com este atributo o tamanho da imagem à esquerda.
Possíveis valores: Unidades CSS.
Exemplos:
margin-left: 1cm;
margin-left: 0,5in;
 margin-right - Utiliza-se para definir o tamanho da margem à direita.
Exemplos:
margin-right: 5%;
margin-right: 1in;
 margin-top - Indicamos com este atributo o tamanho da margem acima da página.
Exemplos:
margin-top: 0px;
margin-top: 10px;
 margin-bottom - Com ele indica-se o tamanho da margem na parte debaixo da página.
Exemplos:
margin-bottom: 0pt;
margin-bottom: 1px;

Atributos – BORDA (border)
 border-color – Para indicar a cor da borda do elemento da página a qual aplica-se. Pode-se
colocar cores separadas com os atributos border-top-color, border-right-color, border-bottom-
color, bordr-left-color.
Possíveis valores: Cor RGB e nome de cor.
Exemplos:
border-color: red;
border-color: #ffccff;
 border-style – O estilo da borda. Os valores significam: none=nenhuma borda, dotted=pontilhado,
solid=sólido, double=borda dupla, e desde groove até outset são bordas com vários efeitos 3D.
Possíveis valores: none | dotted | solid | double | groove | ridge | inset | outset.
Exemplos:
border-style: solid;
border-style: double;
 border-width – O tamanho da borda do elemento ao qual o aplicamos.
Exemplos:
border-width: 10px;
border-width: 0.5in;

Atributos – ALINHAMENTO
 float – Serve para alinhar um elemento à esquerda ou à direita fazendo com que o texto se
agrupe ao redor de tal elemento, igual que o atributo align em imagens em seus valores right e
left.
Possíveis valores: none | left | right.
Exemplos:
float: left;
 padding-left – Indica o espaço inserido, pela esquerda, entre a borda do elemento que contém e o
conteúdo deste. É parecido ao atributo cellpadding das tabelas. O espaço inserido tem o mesmo
fundo do elemento que contém.
Exemplos:
padding-left: 0.5in;
padding-left:1px;

Atributos – ALINHAMENTO
 padding-right – Indica o espaço inserido, neste caso pela direita, entre a borda do elemento
que contém e o conteúdo deste. É parecido ao atributo cellpadding das tabelas. O espaço
inserido tem o mesmo fundo que o fundo do elemento que contém.
Possíveis aplicações: Unidades CSS.
Exemplos:
padding-right:1px;
padding-right:0.5cm;
 padding-top – Indica o espaço inserido, por cima, entre a borda do elemento que contém e o
conteúdo deste.
Exemplos:
padding-top: 10pt;
padding-top: 5px;
 padding-bottom – Indica o espaço inserido, neste caso por baixo, entre a borda do elemento
que contém e o conteúdo deste.
Exemplos:
padding-bottom:1px;
padding-bottom:0.5cm;

AGORA!
Um exemplo, contendo atributo e
estilos.

PRÓXIMA AULA!
 Organização do conteúdo do site
 Aplicação de sessões e agrupadores
de conteúdo.

DÚVIDAS?
Prof. Cândido Luciano de Farias
E-mail: cdcfarias@gmail.com
😉

Aula III HTML - Criação de Sites I

Mais conteúdo relacionado

Destaque

Semelhante a Aula III HTML - Criação de Sites I

Mais de info_cimol

Aula III HTML - Criação de Sites I