Você está na página 1de 48

Programao Web Prof. Ricardo S.

Arajo (Carvo)

HTML

CSS

HyperText Mark-up Language

DTD Document Type Definition


Ele define o que pode (ou no pode)

Composto por tags ou etiquetas

Tags so rtulos usados para informar ao


navegador como o documento deve ser apresentado o website Sempre entre os sinais < e >
<tag>

Se abrir, feche!

A maioria tem sua equivalente para fechamento


<tag> ... </tag>

Ou seja, tudo que estiver entre a tag ser devidamente interpretado pelo navegador

Elementos vazios no marcam uma regio do texto, apenas introduzem alguma coisa no documento Elemento visvel
<hr /> (cria uma linha horizontal)

Elemeto invisvel
<br /> (quebra de linha)

Primeira a abrir a ultima a fechar


<a> <b> <c> .. </c> </b> </a> (correto) <a> <b> <c> .. </a> </b> </c> (incorreto)

Documento HTML comea (e finaliza) com a TAG <html> e de preferncia possui duas filhas
<head> ... </head> <body> ... </body>

HEAD
Cabealho da pgina
title, meta, script*, style*, ...

BODY
Corpo do documento
table, form, ul, ...

Demais tags
http://www.w3schools.com/html/default.asp

Detalhe da linguagem

CASE INSENSITIVE Comentrio <!-- ... --> Acentuaes e caracteres especiais


http://www.w3schools.com/tags/ref_entities.asp

No

linguagem de programao!!

<html> <body> <h1>Cabe&ccedil;alho tipo 1</h1> <hr> <p>Um exemplo de como fazer um texto formatado por um par&aacute;grafo</p> </body> </html>

<h1> <hr> <p>

Preparar um documento com os elementos abaixo: 1) Cabealhos do tipo 2, 3 e 4, nesta ordem.

2) Adicionar um pargrafo abaixo.


3) Adicionar uma linha horizontal vermelha abaixo do pargrafo.

Cada tag tem o seu conjunto de atributos e seus possveis valores


<tag atributo1=valor1 atributo2=valor2>

No exemplo acima, faltou??


FECHAR A TAG!!

Atributos informam caractersticas especficas da tag Sempre so informados na tag de abertura

Lembrete: normalmente aos pares nome=valor

nome: nome do atributo aceito pela tag valor: valor aceito pelo atributo

<html> <body> <h3>Exemplo com atributo</h3> <hr color=blue> <a href=http://sc.senai.br>Link para o site do Senai</a> </body> </html>

Preparar um documento com os elementos abaixo: 1) Cabealho do tipo 2. 2) Adicionar uma linha horizontal vermelha abaixo do cabealho. 3) Colocar um link para algum site (ex: Senai ou Google). 4) Inserir um pargrafo em azul. 5) Inserir um link dentro do pargrafo.

Cabealho / Ttulo

Usar cabealho apenas como cabealho! No utilizar apenas para ter letras grandes ou negrito
Motores de busca costumam usar os ttulos para indexar a estrutura e contedo da pgina

Definido pela tag <p>

No esquea de fechar a tag


Diferente da quebra de linha <br> De preferncia feche a tag <br />

Era utilizada para estilizar fontes

ERA!
Est deprecated no HTML 4 e foi removido no HTML 5

Utilizado para navegao

Pode ser um texto ou uma imagem


Serve para direcionar para outro documento ou como ncora

Direcionar para outro documento


<a href=url>Link text</a>

Fazer uma ncora

<a name=ancora1>Texto da ancora 1</a> <a href=#ancora1>Click aqui para ir a ancora 1</a>

Uma ncora uma boa opo para textos longos Se o link fizer referencia para uma ncora inexistente, ir para o incio do documento

Definida pela tag <table>

Cada tabela dividida por linhas <tr> (table rows)


Cada linha dividida por clula <td> (table data) que contm o dado para ser exibido Este dado pode ser texto, links, imagens, listas, outras tabelas, formulrios, etc

<table> <tr> <td>linha <td>linha </tr> <tr> <td>linha <td>linha </tr> </table>

1, celula 1</td> 1, celula 2</td> 2, celula 1</td> 2, celula 2</td>

Usados para definir o ttulo de cada coluna

Definido por <thead> com o filho <th>


Poderia ser um <td>? Ento por que utilizar um <th> ?

Dois tipos: ordenadas e no ordenadas

No ordenadas so definidas pela tag <ul> (unordered list)


Ordenadas so definidas pela tag <ol> (ordered list) Ambas utilizam <li> (list item) para definir os itens que a compe

No ordenadas <ul> <li>Item 1</li> <li>Item 2</li> </ul> Ordenadas <ol> <li>Item 1</li> <li>Item 2</li> </ol>

1) Criar uma pasta chamada Ex2 e nele 3 arquivos HTML (pag1, pag2 e pag3). 2) Criar uma tabela no arquivo 1. Nesta tabela, uma coluna com um link pra cada arquivo (pag2 e pag3).

3) No arquivo 2 uma lista com itens a sua escolha e uma imagem associada a cada item.

Definido pela tag <form>

Objetivo de enviar dados para o servidor


No mnimo um campo para entrada de dado

No mnimo um boto para enviar o formulrio

Composto por tags <input>

Opes da tag input

Definido por um input do tipo radio

Serve para escolha nica


Identifica-se o grupo pelo atribuo name

Ex:
<input type='radio name=sexo /> F <input type='radio name=sexo /> M

Definido pela tag <select>

Serve para escolha nica


Tambm conhecido como combobox ou dropdown

Composto pela tag <option>

Ex:
<select name=estado> <option value=1>SC</option> <option value=2>SP</option> </select>

4) No arquivo 3 um titulo tipo 2 e um formulrio como o modelo abaixo:

Opes da tag <select>: -Em cartaz -Lanamento -Pr-estria -Acervo -Outra

Cascading Style Sheet


Define a apresentao do documento
Define a apresentao do documento!! Centraliza solues (poupa trabalho redundante)

Sintaxe
SELETOR { propriedade: valor; }

Possveis seletores

Prpria tag HTML ID da tag Nome da classe css criada

Exemplo tag HTML


p{ color: red; font-size: 12px;

Exemplo id da tag
#idTag { color: red; font-size: 12px; }

Exemplo classe CSS


.paragrafoVermelho { color: red; font-size: 12px; }

Para aplicar o CSS, tem-se:

Seletor de tag: ser aplicado em todas as tags do documento Seletor por ID: apenas a tag com aquele ID ter os estilos
<div id=idTag > .. </div>

Seletor classe: tags que posuirem o atributo CLASS igual ao definido no style
<div class=paragrafoVermelho > .. </div>

Para usar os estilos


CSS externo ao documento:
<link rel="stylesheet" type="text/css" href="mystyle.css" />

CSS interno ao documento:


<style type="text/css"> hr { color:sienna; } </style>

Inline (interno a tag)


<p style="color:sienna;"> </p>

INLINE
Estilos internos
Estilos externos Padro do navegador

Ambas possuem os principais atributos:


style class id

<div> tem por objetivo dividir a pgina em sesses / reas


<span> semelhante a <div> mas com objetivo de estilizar textos

1) Faa uma lista desordenada com smbolos tipo circle, fonte arial tamanho 10px (usando CSS externo para definir sua apresentao) 2) Faa uma lista ordenada com nmeros romanos utilizando CSS interno ao documento 3) Faa uma lista ordenada com nmeros romanos e dentro uma sub-lista ordenada com letras (alpha) e de cor azul, sem utilizar CSS inline 4) Crie uma tabela definindo cores diferentes para a clula, cabealho e bordas