Conceitos Básicos de HTML e CSS

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:

HTML Bsico
Estrutura Bsica:
<!DOCTYPE html> 

<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> 
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;
}

Conceitos Básicos de HTML e CSS

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Conceitos Básicos de HTML e CSS

Diunggah oleh

Hak Cipta:

Format Tersedia

HTML / CSS

HTML Hyper Text Markup Language

XHTML Extensible HTML

XML Extensible Markup Language

CSS Cascading Style Sheets

URL Uniform Resource Locator Localizador uniforme de recursos.

<!DOCTYPE html>

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

Obs: Elementos em linha devem ser colocados em blocos.

Quebrar linha Break row:

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

Aninhamento Ato de colocar um elemento dentro de outro.

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

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

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

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

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

Alterar cor da fonte:

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

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

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

Preenchimento dentro do contedo:

Borda em torno do contedo:

Tipos de bordas possveis:

Margem em volta do elemento:

Todas as opes de fonte:

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

Layouts Lquidos Se expandem para ocupar a tela inteira.

Position pode ser:

Anda mungkin juga menyukai