Você está na página 1de 34

Programao Para Web HTML Bsico

HTML
HyperText Markup Language
Hyper Text Markup Language

XHTML
eXtensible HyperText Markup Language Maneira mais estruturada de escrever HTML.

Tags
So comandos que a linguagem HTML u?liza para informar ao navegador como deve ser apresentado o website. Todas as tags tm o mesmo formato: comeam com um sinal de menor "<" e acabam com um sinal de maior ">". Genericamente falando, existem dois ?pos de tags - tags de abertura: <comando> e tags de fechamento: </comando>.

Tags
Mas, toda regra tem sua exceo. No HTML, a exceo que para algumas tags, a abertura e o fechamento se d na mesma tag. Elas contm comandos que no necessitam de um contedo para serem processados Ex.: um salto de linha conseguido com a tag <br />.

Exemplo - Tags
A tag <h1> informa ao navegador que se trata de um cabealho (Utulo). Todo o contedo que es?ver entre <h1> e </h1> mostrado em tamanho maior.
signicando o nvel de importncia do texto.

As tags <h1>, <h2>, <h3>, <h4>, <h5> e <h6> informam ao navegador que se trata de um cabealho (h vem de "heading" cabealho)

Exemplo - Tags
Sendo <h1>, o cabealho de primeiro nvel (maior) e <h6> o cabealho de sexto nvel (menor). <h1>Este um Utulo</h1> <h2>Este um sub Utulo</h2>

Tags
As tags devem ser escritas com letras maisculas ou minsculas?
Em HTML, tanto faz. Se padroniza o uso de minsculas. Em XHTML, as tags devem ser escritas em letras minsculas.

O Que necessrio para criar e visualizar um site?


Criar
Um editor de texto. Iniciar o arquivo com o tag <html> Finalizar o arquivo com o tag </html>

Visualizar
Um navegador web. Arquivos com extenso .htm ou .html

Estrutura Bsica de um Arquivo HTML

Formatao de documentos
Editor de texto simples que grave os arquivos em formato texto puro As pginas web contm marcadores (tags) especiais para determinar o papel de cada elemento dentro do texto
Ex.: <?tle> Programao para Web </?tle>

Aparncia
HTML no foi criada para controlar a aparncia dos documentos Os tags apenas informam ao navegador o que so os elementos que esto na pgina O navegador responsvel pela formatao do documento. Cada navegador mostra a pgina de um modo diferente.
Ex.: Firefox x Internet Explorer

Caracters?cas da linguagem HTML


Formatao de documentos Organizao de listas Capacidade de incluir hipertexto em documentos web Capacidade de incluir imagens

Estrutura HTML
<html> <head> <?tle> Curso de HTML </?tle> </head> <body> <!- comentrio --> </body> </html>

Ttulos
Pode haver at 6 nveis de Utulos no corpo do texto Vai de <h1> (maior Utulo) at <h6>

Pargrafos
O tag <p> indica o incio de um novo pargrafo e </p> indica o nal de pargrafo. Se o tag <p> for colocado antes de um Utulo (ex. <h2>) a marca de pargrafo ignorada
O prprio Utulo se encarrega de colocar o espao necessrio

Exerccio 1

Exercicio01.HTML

Usando seu editor de texto crie uma pgina com o ttulo do cabealho Programao para Web e o ttulo do corpo (nvel 1) Primeiro Exerccio Adicione ao corpo da pgina o seguinte texto: Bem-vindo ao mundo do HTML. Este um simples documento HTML. Este o primeiro pargrafo. Este o segundo pargrafo.

Linhas
As quebras de linha so indicadas com o tag <br />

Listas
O incio de uma lista indicado com <ul> e o nal com </ul> Esse tag descreve listas no-ordenadas Os tags <ol> e </ol> descrevem listas ordenadas O incio de cada item indicado com <li> Vrias listas podem ser aninhadas

Atributo type
Muda o formato do marcador da lista O seu valor pode ser disc, circle ou square (disco, crculo ou quadrado)
Ex.: <ul type="square"> <li>Elemento da lista</li> </ul>

Exemplo
Lista de compras a fazer: <ul> <li>Uma dzia de ovos</li> <li>Um pacote de acar</li> <li>Um pacote de farinha</li> </ul>

Alinhamento
Padro esquerda Para mudar o alinhamento, u?liza-se o atributo ALIGN dentro dos tags que marcam os Utulos e os pargrafos
Ex.: <h1 align=center> Ttulo </h1> <p align=center> Central </p>

Exerccio 2
LISTAS.HTML Na pgina criada no exerccio anterior, adicione um novo Utulo (nvel 2) centralizado: Listas numeradas e no numeradas Crie duas listas conforme descrito abaixo: Esta uma lista enumerada com trs itens: 1) laranjas 2) pssegos 3) uvas Esta uma lista no enumerada com dois itens: uvas cerejas

Exerccio 3 -
Crie uma pgina que contenha:
Uma lista no ordenada dos campi da Unipampa Para cada campi, a lista ordenada de cursos. E para cada curso, uma lista (ordenada ou no ordenada) das disciplinas
Coloque algumas apenas.

Es?los de caracteres
<b> Texto em negrito </b> <i> Texto em itlico </i> <s> Texto riscado </s> <u> Texto sublinhado </u> Os tags de es?lo podem ser usados uns sobre os outros, acumulando seus efeitos

Exerccio 4
Adicione es?los a sua pgina.
Coloque os Utulos sublinhados e em negrito. Coloque o nome das frutas em itlico.

Links
Para denir Links:
<a href=endereo do site>texto</a>

Endereo do site:
Caminho mais nome do arquivo. Sendo que o caminho pode ser rela?vo ou absoluto. E pode ser um endereo da web.

Exerccio 5 LINKS
Crie uma estrutura de pginas da seguinte forma: Sua pgina inicial deve conter um link para todas as disciplinas que voc est fazendo esse semestre.
Cada Disciplina deve ter sua prpria pgina com:
Um link para voltar a pgina inicial. Informaes sobre o horrio da disciplina. A bibliograa da disciplina.

Imagens
Para inserir uma imagem na pgina so usados:
A tag img para informar que se trata da insero de uma imagem. O atributo src para informar o caminho da imagem (pode ser um endereo da web). O atributo alt para fazer uma descrio da imagem, quando a imagem no for aberta, esse texto ir aparecer.

Exemplo - Imagens

Ajuste de Imagens

Exerccio 6
Coloque imagens para ilustrar as pginas criadas nos exerccios anteriores.
Na pgina inicial coloque uma imagem pessoal sua. Nas pginas das disciplinas coloque uma imagem que representa a disciplina. E para cada livro da bibliograa coloque uma foto do livro.

Outras Tags
<sub> Coloca o caractere em um nvel inferior na linha <sup> Coloca o caractere em um nvel superior na linha <cite> Formata no es?lo de citao(geralmente itlico) <pre> u?lizada para representar textos com sua representao

original
Espaos em branco, tabulao e quebras de linha so preservados Esse tag muda o ?po de caractere p/ uma fonte mono-espaada (todos os caracteres ocupam o mesmo espao)

Exerccio 07
Crie uma estrutura de pginas para representar um site de noUcias.
A pgina inicial deve ter um Utulo, uma imagem pequena e um link para cada noUcia. Cada noUcia deve estar na sua prpria pgina. Contendo:
Um link para a pgina inicial. Imagens ilustrando a noUcia. Link externo de onde foi re?rada a noUcia.

Detalhe: A imagem deve ser um link para a noUcia tambm.