Embed Size (px)
Citation preview
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 CSSExemplos:
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 | 900Exemplos:
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 | obliqueExemplos:
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 | noneExemplos:
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.Possíveis valores: Unidades CSS.Exemplos:
margin-right: 5%;margin-right: 1in;
margin-top - Indicamos com este atributo o tamanho da margem acima da página.Possíveis valores: Unidades CSS.Exemplos:
margin-top: 0px;margin-top: 10px;
margin-bottom - Com ele indica-se o tamanho da margem na parte debaixo da página.Possíveis valores: Unidades CSS.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. Possíveis valores: Unidades CSS.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.
Possíveis valores: Unidades CSS.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.
Possíveis aplicações: Unidades CSS.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.
Possíveis aplicações: Unidades CSS.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.
