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.
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.
DÚVIDAS?
Prof. Cândido Luciano de Farias
E-mail: cdcfarias@gmail.com
😉

Aula III HTML - Criação de Sites I

  • 1.
  • 2.
    Aula anterior  Formataçãode documentos HTML  Recursos
  • 3.
  • 4.
    OBJETIVOS:  Apresentar atributosdos elementos HTML  Apresentar exemplos  Formatar documentos HTML utilizando o recurso de estilização  Apresentar exemplos
  • 5.
    Atributos HTML  Forneceminformaçõ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>
  • 6.
    Atributo lang  Declaradona tag <html>;  Declara o idioma;  importante para aplicativos de acessibilidade; Exemplo: <html lang="pt-BR">
  • 7.
    Atributo title  Declaradona 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>
  • 8.
    Atributo href  Definidona tag <a>;  O endereço do link é especificado no atributo href; Exemplo: <a href=”http://www.cimol.g12.br” >Cimol</a>
  • 9.
    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">
  • 10.
    Atributo alt  Especificaum 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">
  • 11.
    Aspas simples ouduplas? Aspas duplas é o estilo mais comum em HTML, mas o estilo simples também pode ser usado.
  • 12.
    Estilizando HTML  Cadaelemento 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>
  • 13.
    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>
  • 14.
    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;
  • 15.
    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;
  • 16.
    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;
  • 17.
    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;
  • 18.
    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);
  • 19.
    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;
  • 20.
    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;
  • 21.
    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;
  • 22.
    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;
  • 23.
    AGORA! Um exemplo, contendoatributo e estilos.
  • 24.
    PRÓXIMA AULA!  Organizaçãodo conteúdo do site  Aplicação de sessões e agrupadores de conteúdo.
  • 25.