HTML e CSS

HTML E CSS
O que um arquivo HTML?
HTML significa Hyper Text Markup Language (Linguagem de Marcao de Hipertexto)

Um arquivo HTML um arquivo de texto contendo pequenas etiquetas de marcao (markup tags)
As marcaes dizem para o navegador Web como mostrar a pgina
Um arquivo HTML deve ter uma extenso de arquivo htm ou html
Um arquivo HTML pode ser criado usando um simples editor de textos
ESTRUTURA BSICA HTML

<html>
<head>
<title>Ttulo da pgina</title>
</head>
<body>
Esta minha primeira pgina. <b>Este texto est em negrito</b>
</body>
</html>
A ordem da marcao no seu documento HTML

<html>. Esta tag diz para o seu navegador que este o incio de um documento HTML.
<head> a informao de cabealho. No mostrada na janela do navegador.
<title> o ttulo do seu documento. O ttulo mostrado na barra de ttulo do navegador
<body> o texto que ser mostrado no seu navegador.
Toda tag fecha com </nome da tag>
Em alguns casos fecha com />
Tags (etiquetas) HTML

As tags HTML so usadas para marcar elements HTML
As tags HTML so cercadas pelos dois caracteres < e >
Os caracteres circundantes so chamados chaves angulares
As tags HTML normalmente vm em pares como <b> e </b>
A primeira tag em um par a tag de abertura, a segunda tag a tag de fechamento
O texto entre as tags de abertura e fechamento o contedo do elemento
As tags HTML no so sensveis caixa, <b> significa o mesmo que <B>
Atributos da Tag
As tags podem ter atributos. Os atributos podem prover informao adicional sobre os
elementos HTML na sua pgina.
Esta tag define o elemento corpo da sua pgina HTML: <body>. Com um atributo adicional
bgcolor, voc pode dizer ao navegador que a cor de fundo da sua pgina deve ser vermelha,
assim: <body bgcolor="red">.
Estilos de aspas, "red" ou 'red'?

Os valores dos atributos sempre devem ser inseridos entre aspas. Aspas
duplas so as mais comuns, mas aspas simples so tambm permitidas.
Em algumas situaes raras, como quando um valor de atributo j contm
aspas, necessrio usar aspas simples:
name='Joo "Espingarda" da Silva'
Tags HTML Bsicas

Ttulos
Ttulos so definidos com as tags <h1> a <h6>. A <h1> define o ttulo maior. A
<h6> define o ttulo menor.
<h1>Este um ttulo</h1>
Tags HTML Bsicas

Pargrafos
Os pargrafos so definidos com a tag<p>.
<p>Este um pargrafo</p>
<p>Este outro pargrafo</p>
Quebras de linha
A tag <br> usada quando voc quer terminar uma linha, mas no quer
comear um novo pargrafo. A tag <br> fora a quebra de linha onde quer que
voc a coloque.
A tag <br> uma tag vazia. Ela no tem tag de fechamento.
<p>Este <br> um par<br>grafo

com quebras de linha</p>
Comentrios em HTML
A tag de comentrio usada para inserir um comentrio no cdigo fonte HTML. Um comentrio
ser ignorado pelo navegador. Voc pode usar comentrios para explicar o seu cdigo, o que
pode ajuda-lo quando voc editar o cdigo fonte numa data posterior.
Observe que voc necessita de um ponto de exclamao aps a chave de abertura, mas no
antes da chave de fechamento

Tag de formao de texto

<b>
Define texto em negrito
<big>Define texto grande
<em>Define texto enfatizado;
<i>
Define texto em itlico
<small>
Define texto pequeno
<strong> Define texto forte
<sub>
Define texto subescrito
<sup>
Define texto superescrito
<ins>
Define texto inserido
<del>Define texto cancelado
A Tag ncora e o Atributo Href

A HTML usa a tag <a> (ncora) para criar um vnculo (link) com outro documento.
Uma ncora pode apontar para qualquer recurso na Web: uma pgina em HTML, uma
imagem, um arquivo de som, um filme, etc.
Sintaxe para criar uma ncora:
<a href="url">Texto a ser exibido</a> cria m link
A tag <a> usada para criar uma ncora de onde vincular, o atributo href usado para onde
enderear o documento, e as palavras entre as tags de abertura e fechamento da ncora
sero exibidas como um hipervnculo.
Tabelas
As tabelas so definidas com a tag <table>. Uma tabela dividida em linhas (com a tag <tr>), e cada linha dividida em clulas
de dados (com a tag <td>). As letras td significam "table data," que o contedo de uma clula de dados. Uma clula de dados
pode conter texto, imagens, listas, pargrafos, formulrios, filetes horizontias, tabelas, etc.
Para celulas vazias adicione &nbsp

<table border="1">
<tr>
<th>Cabealho</th>
<th>Outro Cabealho</th>
</tr>
<tr>
<td>linha 1, clula 1</td>
</tr>
<tr>
</tr>
</table>
A Tag Image e o Atributo Src

Na HTML, as imagns so definidas com a tag <img>
A tag <img> vazia, o que significa que ela somente atributos e no tem tag de fechamento
Para exibir uma imagen em uma pgina, voc necessita usar o atributo src. Src significa
"source" [fonte]. O valor do atributo src a URL da imagem que voc quer exibir na sua
pgina.
A sintaxe para definir uma imagem :
<img src="boat.gif" alt="texto alternativo">
CSS
O Que CSS?
CSS significa Cascading Style Sheets (Folhas de Estilo em Cascata)
Os estilos definem como exibir elementos HTML
Os estilos so normalmente armazenados em Folhas de Estilo
Os estilos foram adicionados HTML 4.0 para resolver um problema
Folhas de Estilo Externas podem poupar-lhe muito trabalho
As Folhas de Estilo Externas so armazenadas em arquivos CSS
Sintexe CSS
A sintaxe CSS constituida de trs partes: um seletor (selector), um propriedade (property) e um valor
(value):
selector {property: value}
body {color: black}
Se o valor contm mltiplas palavras, ponha aspas em torno do valor:
p {font-family: "sans serif"}
Se voc deseja especificar mais de uma propriedade, voc deve separar cada propriedade com um ponto e
vrgula.
p {text-align:center;color:red}
Preparao do arquivo HTML

Uma folha de estilo ideal quando o estilo aplicado a muitas pginas. Com uma folha de
estilo externa, voc pode mudar a aparncia de um stio Web inteiro mudando apenas um
arquivo. Cada pgina deve vincular-se com a folha de estilo usando a tag <link>. A tag <link>
vai dentro da seo head da pgina no HTML:
<head>
<link rel="stylesheet" type="text/css"
href="nome do arquivo.css" />
</head>
Agrupamento de seletores
Voc pode agrupar seletores. Separe cada seletor com uma vrgula. No exemplo abaixo agrupamos todos os
elementos header (ttulo). Todos os elementos header sero verdes:
h1,h2,h3,h4,h5,h6
{
color: green
}
O Seletor class (classe)

Com o seletor class voc pode definir diferentes estilos para o mesmo tipo de elemento HTML. Digamos que
voc gostaria de ter dois tipos de pargrafos em seu documento: uma pargrafo alinhado direita, e um
pargrafo centralizado. Eis como voc pode fazer isso com estilos:
Arquivo CSS
.right {text-align: right}
.center {text-align: center}
arquivo HTML
<p class="right">
Este pargrafo ser alinhado direita.
</p>
<p class="center">
Este pargrafo ser centralizado.
</p>
Fontes em CSS
As propriedades de fonte permitem-lhe mudar a famlia da fonte, a espessura, o tamanho, e o estilo de um texto.
Bordas em CSS
As propriedades de borda permitem-lhe especificar o estilo, a cor, e a largura de um elemento border. Em HTML usamos tabelas
para criar bordas em torno de um texto, mas com as propriedades de borda na CSS podemos criar bordas com belos efeitos, e
elas podem ser aplicadas a qualquer elemento.
O Plano de Fundo em CSS

A propriedade Background permite que voc controle a cor do plano de fundo de um elemento, configure uma imagem como
plano de fundo, e posicione uma imagem em uma pgina.
Imagens no CSS
Insira no seu arquivo HTML a sintaxe:
<body>
<div class="css">
<img src="imagem.jpg" alt="Tutorial de CSS" title="Logo do CSS" width="150" height="150" />
</div>
<p> CSS significa Cascading Style Sheets e uma linguagem de estilos usada para criar sites.<br />
<br/>
A grande vantagem do CSS na criao de sites, que podemos fazer a separao do contedo e do
formato (estilo). <br />
<br/>
</p>
</body>
Imagem no CSS
Insira no seu arquivo CSS a sintaxe:
.css img
{
float: left;
width: 15%;
border: thin solid;
padding: 5px;
margin: 0px 10px 10px 0;
}

HTML e CSS

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML e CSS

Uploaded by

Copyright:

Available Formats

HTML E CSS

O que um arquivo HTML?

HTML significa Hyper Text Markup Language (Linguagem de Marcao de Hipertexto)

ESTRUTURA BSICA HTML

A ordem da marcao no seu documento HTML

Tags (etiquetas) HTML

Estilos de aspas, "red" ou 'red'?

Tags HTML Bsicas

Tags HTML Bsicas

<p>Este <br> um par<br>grafo

Tag de formao de texto

A Tag ncora e o Atributo Href

Para celulas vazias adicione &nbsp

A Tag Image e o Atributo Src

<img src="boat.gif" alt="texto alternativo">

Preparao do arquivo HTML

O Seletor class (classe)

O Plano de Fundo em CSS

You might also like