Anda di halaman 1dari 11

HTML / CSS

Conceitos Bsicos:

HTML Hyper Text Markup Language

XHTML Extensible HTML

XML Extensible Markup Language

CSS Cascading Style Sheets

URL Uniform Resource Locator Localizador uniforme de recursos.

http://www.cafestarbuzz.com.br/index.html
http:// - Protocolo utilizado (hyper text transfer protocol) Protocolo de transferncia de hipertexto.
www.cafestarbuzz.com.br Nome do site.
/index.html Path Absoluto a partir da raiz. Todos os diretrios at chegar no arquivo.

Comentrios:

<!-- Esse um comentrio em HTML -->

HTML Bsico
Estrutura Bsica:

<!DOCTYPE html> <!-- Aqui define o tipo de documento: HTML5 -->


<html>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8 />
<title>Ttulo da Pgina</title>
<style type=text/css></style>
</head>
<body>

</body>
</html>

Paragrafo:

<p> Texto que vai dentro do paragrafo </p> <!-- Esse um exemplo de elemento -->

Tag cada codigo entre Menor que (< ) e Maior que(> )


Elemento Todo contedo desde a tag de abertura at a tag de fechamento,ou seja, tag + contedo.
Angle Bracket So os sinais de Maior que e Menor que (<, >)
Atributos Esto dentro de uma tag de abertura e so parametros passados a essa tag, ou seja,
informaes adicionais.

Obs: Alguns elementos no tem tag de fechamento. Exemplos: <meta />, <br />

Ttulos
Os ttulos vo de h1 at h6, sendo que o maior o h1 e o menor o h6. Dentro de um documento pode
haver ttulos e subttulos.

<h1>Exemplo de Ttulo</h1>
<h2>Esse um subttulo de h1</h1>
Links:
<a href=url target=_blank title=Ttulo de Destino> Texto lincado</a>

target atributos:
_blank
_self
_parent
_top
Se temos vrios links e dentro desses links colocarmos o mesmo valor para o atribulo target por
exemplo: target=teste. Todos os links vo ser abertos na mesma janela.

Inserindo Imagem:
Para inserir uma imagem dentro de um documento html usamos a tag: img seguida do parametro src.
<img src=imagem.png alt=texto alternativo width=200px height=20px/>

Obs: Elementos em linha devem ser colocados em blocos.

Citaes simples:
Para realizar citaes em linha, ou seja, de poucas linhas usa-se o elemento inline chamado q:
<q> Seja impetuoso, um livre pensador, supere suas limitaes</q>

Citaes longas:
Esse tipo de citao um elemento em bloco, ou seja, para citaes longas com se fosse um paragrafo.
Usa-se o elemento blockquote:
<blockquote>Essa citao pode ser tratada como um paragrafo</blockquote>

Quebrar linha Break row:


Para realizar quebra de linhas usamos o elemento vazio br:
Vai have uma quebra aqui <br /> viu?
Lista Ordenada:
Listas ordenadas so listas que seguem uma ordem, seja por nmero ou por letras.
<ol type=1 start=x>
<li>Primeiro Item da lista</li>
<li>Segundo Item da lista</li>
</ol>

O elemento ol significa ordered list. As propriedades do atributo type podem ser:


1 Nmeros decimais;
a Letras em minusculas;
A Letras em Maiusculas;
i Algarismos Romanos maiusculas;
I Algarismos Romanos Maiusculos
O atributo start recebe o nmero relativo ao termo de incio.
Lista no Ordenada:
Listas no ordenadas usam o paramentro ul de unordered list
<ul type=circle>
<li>Item</li>
<li>Item</li>
</ul>
O atributo type pode receber:
disc
circle
square
Lista de Definio:
Para criar uma lista de definio usamos a tag dl que significa defition list seguido de dt (define term) e
dd.
<dl>
<dt>Palavra</dt>
<dd>Definio</dd>
<dt>Palavra</dt>
<dd>Definio</dd>
</dl>

Aninhamento Ato de colocar um elemento dentro de outro.

Enfatizar texto:
Para enfatizar um texto podemos utilzar em ou strong.
<em>Texto Enfatizado</em>
em Enfatizar o texto.

<strong>Texto Enfatizado</strong>
Strong Texto importante para SEO.

Code e Pre
Code diz que um cdigo de computador. S ele no adianta pois no fica bem ordenado.
<code>if x > 10: break </code>
Pre auxilia de forma a mater da forma que escreveu.
<pre>Fica
da
forma
que
escreveu
</pre>
Caso seja necessrio escrever um cdigo de computador que fica da maneira que escreveu basta.
<code>
<pre>
while x < 10:
if x % 2 == 0:
print(x)
x += 1
<pre>
<code>

Informaes de contato
Para definir que um espao contem informaes de contato de uma pgina basta usar a tag address.
<address>
<p >Daniel Marcos Miranda de Sousa</p>
<p>danielmiranda132@yahoo.com</p>
</address>
Linhas Horizontais
Usamos a tag hr para criar uma linha horizonal (horizontal row).
<hr />
Deletar contedo ou adicionar:
<ins>Indica ao browser que essa uma linha nova</ins>
<del>Indica ao browser que isso foi removido</del>

ncora:
Ancoras so links que remetem a algum lugar da prpria pgina. Utliza-se a tag a da mesma maneira
que dos links. A nica diferena que o atributo href ser direcionado a um id criado para identicar o
objeto que estamos referenciando.

<a href=#teste title=Ir para o exemplo >Clique aqui</a>

<h1 id=teste>Exemplo de ncora</h1>

Agrupamento Inline:
Para agrupar elemento em linha basta usar o elemento span.
<span>
Esse um <b>agrupamento</b> de elementos inline.
</span>
Dividir elementos:
Para dividir os elementos em sees lgicas usa-se div.
<div>
<p>Ol Mundo</p>3
</div>
Tabela:
<table summary=descrio da tabela>
<tr>
<th>Titulo 1</th>
<th>Ttulo 2</th>
<th>Ttulo 3</th>
</tr>
<tr>
<td colspan=2>Elemento</td>
<td>Elemento</td>
</tr>
<caption>
descrio da tabela.
</caption>
</table>

CSS Bsico
Todo contudo CSS deve estar dentro do elemento: <style type=text/css></style>.
Outra opo lincar o CSS de outro arquivo na extenso .css, para isso basta colocar no head:
<link type=text/css rel=stylesheet href=bar.css media=screen />

Media opes:
print
handheld
aural
braille
projection
tty teletipos e terminais
TV

Cometrio:
/*Cometrio no css */

Herana:
O css trabalha com Herana, ou seja, um elemento herda a propriedade de seu pai, seu superior.

OBS: Quando houver conflitos. A ltima regra que vale.

Seletor:
O objeto ao qual estamos aplicando uma propriedade chamado de seletor.

Classes:
Classes servem para que se possa personalizar um elemento, sem alterar fazer modificaes em outros
elementos com mesma tag. Deve ser colocada o nome da classe, ao qual pertence o elemento, no html e
para personalizar usar o css.

<p class=teste> Ol Mundo</p>

p.teste{
background-color:blue;
}

.teste{
background-color:gray;
}
No primeiro caso: somente pargrafos que tiverem essa classe vo receber a propriedade.
No segundo caso: Todos os elementos que tiverem essa classe sero personalizados.

ID:
Estiliza um elemento que tenha o id.

<p id=teste> Ol Mundo</p>

#teste{
color: red;
}
Agrupamento de propriedades:
Posso aplicar a mesma propriedade para diversos elementos. Basta separ-los por virgulas:
h1, h2{
color:gray;
}

Alterar cor da fonte:


Para alterar cor de cor basta utilizar o atributo color
p{
color:pink;
}

Tamanho da fonte:
Para mudar o tamanho da fonte usa a propriedade font-size. Recomenda-se usar body com uma das
palavras-chave abaixo e os outros elementos de forma relativa, usando % ou em
h1{
font-size: 20px;
}

palavras-chave:
xx-small
x-small
small
medium
large
x-large
xx-large

Caso seja em % - Ela ser em relao ao pai.


Caso seja em px Ser o valor em pixel.
Caso seja em em - Quantidade relativa em relao ao pai. Seria o mesmo que %, mas em decimal

Peso da fonte:
Para mudar a grossura da fonte. Usamos font-weight
body{
font-weight: bold;
}

lighter Relativo ao pai (menor que o pai um pouco).


normal -
bold Negrito
bolder Relativo ao pai (maior que o pai um pouco).
Cor de fundo de um elemento:
Para atribuirmos uma cor a um elemento qualquer usamos a propriedade background-color:
p{
background-color:#d2b448c;
}
Fonte de um elemento:
Para mudarmos a fonte usada por um elemento basta usar a propriedade font-family:
body{
font-family: sans-serif;
}
Text-Decoration:
A propriedade text-decoration serve para atribuir alguns tipos de riscos na palavra do texto. E seus
parmetros so:
none Nenhum tipo;
underline Por baixo da linha;
overline Por cima da linha;
line-through - Riscado
initial Valor padro
inherit O que tiver no elemento pai.

Obs: Se quiser posso colocar uma cor diferente para o atributo:

p{
text-decoration: underline yellow;
}

Preenchimento dentro do contedo:


Para encher o espao em que encontra o contedo usa-se a propriedade padding:
h1{
padding: 20px 0px 20px 0px;
}
A atribuio de valores para um propriedade funciona da seguinte forma: O primeiro valor top, o
seguido por: right, bottom e left.

Borda em torno do contedo:


Para colocar uma borda usa-se a propriedade boder:
h1{
boder: dotted 1px gray; /// Tipo, tamanho e cor.
}

Tipos de bordas possveis:


solid Slido;
dotted Forma de bolinha;
double Duas bordas uma dentro da outra;
dashed Tracejado
Inset Afunda na pgina
Ridge Sulco que se levanta.

Margem em volta do elemento:


Enquanto que a propriedade padding usada para encher o elemento, a propriedade margin usada
para que haja um espacamento em volta dele.
P{
margin: 20px 10px 20px 10px;
}
Essa propriedade pode ser subdividida em:
margin-left:
margin-right:
margin-top:
margin-bottom:

Famlias de fonte:
Sem serifa - sen-serif
Com serifa - serif
Monoespaada - monoespace
Cursivas -
Fantasias -

Fundo de Elemento:
Para colocar fundo em qualquer elemento usa-se a propriedade background.
div{
background: white url(link_da_imagem.jpg) repeat-x;
background-position: top left;
}
Podemos tambm usar de forma isolada:
div{
background-image: url(link_da_imagem.jpg);
background-repeat: repeat-x;
}

Propriedades do Repeat:
repeat Vertical e Horizontal
repeat-x Horizontal
repeat-y Vertical
no-repeat Sem repetio
inherit Mesmo que o pai.

Todas as opes de fonte:


Declarar vrios atributos de uma nica vez.
div{
font: font-style font-variant font-weight line-height font-size font-family;
}
Os de vermelhos so opcionais, os de laranja so exigidos. Sendo que as fontes devem ser separadas
por virgulas.

Pseudo-Classes:
No so classes inseridas no html, porm podem ser modificadas no CSS.
a:links{
color: green;
}

a:visited{
color: yellow;
}

a:hover{
color: red;
}
Elemento Flutuar:
D um id, d um largura e faa o flutuar.
div{
float:right;
clear: both;
}
O atributo clear no permite que outro elemento o sobreponha.

Dois elementos um do lado do outro. Soma-se a margem.


Dois elementos um em cima do outro. Fica a margem maior.

Layouts Lquidos Se expandem para ocupar a tela inteira.


Layouts Congelados Fixados com determinado tamanho. Coloca em uma div e determina o tamanho
dela.

Absoluto:
Com a propriedade absolute o elemento removido do fluxo da pgina. Por conta disso pode ficar por
cima de outros elementos.

#barralateral{
position: absolute;
top: 100px;
right: 200px;
width: 280px;
}

Position pode ser:


absolute
Fixed
Relative
Font-Style:
Pode-se usar as seguintes palavras-chave para o atributo font-style.
div{
font-style: italic
}

Palavras-chave:
italic
oblique
normal

Cores:
Para especificar cores usa-se o sistema rgb ou hexadecimal.

div{
background-color: rgb(80%, 40%, 0%);
}

div{
background-color: #cc6600;
}

Cor da Borda:
h1{
border: 10px;
border-color: blue;
}

Altura da Linha:

div{
line-height: 1.6 em;
}

Modelo de Caixa:
O css trata os elementos como se fossem caixas.
rea do contedo Armazena o contedo e tem o tamanho exato dele.
Enchimento Opcional. Espao circundando a rea do contedo.
Borda Opcional. Espao em torno do enchimento. Separa elementos.
Margem Opcional. Adiciona espao entre elementos.

Espessura da borda:
div{
border-width: thin;
}
Tipos:
thin
medium
large

Alinha Texto
Alinhar qualquer elemento inline.
div{
text-align: center;
}

Selecionar descendente:
Para selecionar apenas elementos que descende de um pai.
Pai filho{
color: black;
}

div h1{
color:black;
}
Nesse caso s vai selecionar elementos h2 que estejam dentro de uma div.

#nomeClasse elementofilho{
color:red;
}

#elixires h2{
color: red;
}
Nesse caso s seleciona os h2 que estejam dentro da classe elixires.

Agrupar direes:
Quando top = bottom e right = left. Podemos agrupar da seguinte fomra.

div{
margin: 0px 20px;
}

Pseudo-Elementos:
p: first-letter{
font-size: 3em;
}
p: first-line{
font-size: 3em;
}