Embed Size (px)
DESCRIPTION
Citation preview
PROGRAMAÇÃO PARA PROGRAMAÇÃO PARA WEBWEBHTMLAula 1 – 26/01/2009Instrutor: Nelson Luis Rodrigues Pereira
O que é HTML?O que é HTML?É a linguagem de marcação de
hipertexto, ou seja, e a linguagem na qual são escritas as páginas da Web, interpretada pelo navegador.
Hipertexto -> significa um texto não linear, com mais de uma dimensão. Através de ligações(links), o usuário pode pesquisar apenas os tópicos que lhe interessam e ignorar os que não lhe convém.
O que são TAG’s?O que são TAG’s?• São marcas padrões que designam os
comandos HTML a serem lidos pelo navegador ou Browser.
• Aparecem sempre delimitadas por um sinal. Ex: “<” e “>” ; “{“ e “}”; “[“ e “]”.
• Algumas necessitam vim aos pares, sendo que uma indica o início do comando e a outra o final do comando.– OBS: No HTML, algumas TAG's podem vim
isoladas. Já no XHTML, elas devem sempre aparecerem em pares.
Representação de uma TAG Representação de uma TAG HTMLHTML<TAG atributos=”Valor do atributo”> texto
</TAG>
EXEMPLO:
<FONT COLOR=”Blue”> Alô mundo </FONT>
Estrutura Básica do HTMLEstrutura Básica do HTML
<HTML><HEAD>
<TITLE> Título da página </TITLE></HEAD><BODY>
Comandos – Corpo da página</BODY>
</HTML>
Tag’s estruturaisTag’s estruturaisHTML: São usados para delimitar
os comandos HTML, indicando o início e o fim de cada documento.
HEAD: Delimitam a seção do cabeçalho do documento, onde serão definidos o Título e algumas opções de página.
BODY: Nesta TAG ficam os elementos da página, ou o corpo da página.
Níveis de cabeçalhoNíveis de cabeçalho• Chama-se de cabeçalhos os níveis dos
diversos tipos de tópicos textuais (Título, Subtítulo, Tópicos, Subtópicos).
• No HTML, cabeçalhos são definidos pela tag <Hn>, onde o n é um número de 1 a 6 que determina o nível do texto.
• Cada nível apresenta um tamanho de fonte diferente (do maior(1) para o menor(6)), onde o default é 3.
PáragrafosPáragrafos• Para delimitar parágrafos dentro do
HTML usa-se a tag <P>, que é inserida no início do parágrafo e encerra-se no final do parágrafo.
• Quando ela é encerrada, insere-se uma linha em branco automaticamente para separar os páragrafos.
• A tag <P> também é utilizada para fazer o alinhamento do parágrafo, através do atributo ALIGN.
• O alinhamento pode ser a Esquerda, Direita e Centro.
ParágrafosParágrafos
SINTAXE:
<P align=”alinhamento”> texto do parágrafo</p>
Onde:◦Alinhamento assume valor nesse
caso de LEFT, RIGHT e CENTER.
FontesFontes• Permitir utilizar fontes com
formatações diferentes em diversas partes do texto.
• Possui três atributos:– SIZE: Determina o tamanho da letra. Varia
de 1(menor tamanho) à 7(maior tamanho).– FACE: Determina o tipo de letra. Caso o
tipo informado não seja compatível, o navegador usará o default.
– COLOR: Determina a cor da fonte, que pode ser dada através do nome ou do número Hexadecimal equivalente.
FontesFontesSINTAXE:
<FONT size=”tamanho” face=”tipo” color=”cor”>
Texto </FONT>
Estilos de textoEstilos de texto
ListasListasBoa forma de organização de
páginas na web. São chamadas também de tópicos ou de marcadores e numeração.
Podem ser:◦Lista não-numerada◦Lista numerada◦Lista de descrição◦Lista mista
Lista Não-numeradaLista Não-numerada
Lista que utiliza os tradicionais Marcadores ou “Bullets”.
SINTAXE:<UL type=”formato do marcador”>
<LI> Tópico 1<LI> Tópico 2
</UL>
Onde TYPE pode receber os valores square, disc e circle.
Lista numeradaLista numerada
Lista que utiliza números, letras maiúsculas. minúsculas ou algarismos romanos.
SINTAXE:<OL type=”formato” start=”Valor
incial”><LI> Tópico 1<LI> Tópico 2<LI> Tópico 3
</OL>Onde TYPE pode receber os valores 1, A,
a, I ou i.
Lista de definiçãoLista de definiçãoLista que utiliza de tópicos com
suas definições.SINTAXE:
<DL><DT> Tópico 1<DD> Descrição<DT> Tópico 2<DD> Descrição
</DL>
LinksLinks• Antes de prosseguirmos com os links,
precisamos entender como funciona a estrutura de diretórios na web.
• Todas as vezes que o arquivo a ser localizado está no mesmo diretório do arquivo HTML, basta só colocar o nome do arquivo com sua extensão.
• Quando o arquivo está em um outro diretório acima do corrente, usa-se ../ para voltar a algum diretório acima e o caminho deste até o arquivo desejado.
• Quando o arquivo esta no subdiretório do atual, basta utilizar o nome do caminho a partir do diretório atual.
Links para o mesmo Links para o mesmo servidorservidor• Neste caso, usa-se a estrutura vista
no slide anterior, visto que o servidor onde é o hospedado o site apresenta uma estrutura dividida em diretórios.
• SINTAXE:<a href=”Endereço de destino”> Texto do link </a>
• EXEMPLO:<a href=”codigos/aula2.html”> Aula2 </a>
Links para outros Links para outros servidoresservidores
Neste caso, basta usar o endereço Web do arquivo ou página de destino.
SINTAXE:<a href=”http://endereco”> Texto
do link </a>EXEMPLO:<a
href=”http://www.softeam.com.br”> Softeam </a>
Links para downloadLinks para downloadPossuem a mesma estrutura dos
anteriores, podendo estar no mesmo servidor ou em servidores diferentes.
Geralmente aplicados para Documentos, Apresentações, Arquivos Compactados e outros.
Quando clicado abre-se em uma tela de download.
ÂncorasÂncoras• São links dentro do mesmo arquivo HTML.
Usados principalmente em aplicações de linguagens de programação, criação de índices, o tradicional “Voltar ao Topo”.
• Possuem duas estruturas bem definidas: a origem do link (o JOGAR), onde o usuário deve clicar, e o destino da âncora (o FIXAR), que será exibido na tela.
• Nesta estrutura, deve-se usar a tag <A> tanto na origem como no destino, só que com estruturas diferentes.
ÂncorasÂncorasSINTAXE:• Origem:<a href=”#nome_da_ancora”> Jogar âncora </a>
<a href=”#aula2”> Aula 2 </a>• Destino:<a name=”nome_da_ancora”> Fixar âncora </a>
<a name=”aula2”> Aula 2 </a>
Links para emailLinks para email• Utilizado para facilitar ao usuário um
contato com o webmaster do site ou com a empresa que administra o site.
• O tradicional “Fale Conosco”. Ao ser clicado, abre-se uma tela de envio de email do programa de gerenciamento de email que está instalado no computador do usuário. Ex: Outluock, Evolution, ThunderBird.
• SINTAXE:<a mailto=”endereco_de_email”> Fale
conosco </a>
PráticaPrática1) Crie dois arquivos HTML com os nomes
que quiser. EX: Exe01.html e Exe02.html .
2)Crie um link no arquivo Exe01.html para o arquivo Exe02.html .
3)No arquivo Exe02 crie um link para http://www.softeam.com.br
4)Crie um link para o arquivo aula2.pdf.5)Crie um link para o seu email.6)Crie uma âncora para um trecho dentro
da sua página.
ImagensImagens• Imagens de um site são fator marcante na
estética e no marketing deste.• Para inserir imagens, usa-se os mesmos
conceitos de link, mudando a tag e acrescentando-se alguns outros atributos.
• ATRIBUTOS:– SCR: Endereço da imagem.– WIDHT e HEIGTH: Largura e altura de
exibição.– ALIGN: Alinhamento da imagem.– ALT: Texto alternativo caso a imagem não
apareça.– BORDER: Tipo de borda da imagem.
ImagensImagensSINTAXE:
<IMG src=”endereco_da_imagem” alt=”texto alternativo”
border=”numero” align=”alinhamento”>
Para inserir uma imagem como pano de fundo, utilize o atributo background na tag body.
PráticaPráticaBaixe uma imagem na internet e
insira ela através do código.Insira outra imagem como pano
de fundo da página.
LAYERSLAYERSBlocos são
tag's que delimitam áreas dentro da página onde podem ser inseridos textos, tabelas, imagens, links e formulários.
Blocos são usados para facilitar a atribuição de formatações diferentes para os diversos blocos.
Também são usados para a construção de layouts de página através de uma técnica chamada de tableless.
Promove uma melhor organização do código.
LAYERSLAYERSDIV:Tag de delimitação de bloco que
promove o alinhamento horizontal a esquerda, a direita, no centro e justificado daquilo que estiver alocado dentro do bloco.
Acrescenta se uma linha antes de depois da tag div.
<div align=”alinhamento”> Estrutura que estiver no bloco.
</div>
FormuláriosFormulários Permite que o usuário interaja com o
servidor através do envio de informações pertinentes. Aplicado quando se usa uma linguagem de programação.
Usa-se a tag FORM para se delimitar formulário. Não se deve colocar formulários dentro de formulários.
Os elementos que formam os formulários são delimitados através de outras tags: TEXTAREA, SELECT e INPUT.
No formulário se determina o nome do arquivo ou biblioteca que fará uso do formulário(ACTION) e o método de submissão que será usado(METHOD).
InputInputSINTAXE:<INPUT type=”tipo de input”>
</input>Onde type pode ser:
◦TEXT, PASSWORD, NAME, CHECKBOX, RADIO, HIDDEN, RESET e SUBMIT.
InputInput TEXT: Armazena dados informados
pelo usuário. Possui os atributos NAME, SIZE(Tamanho de exibição) e MAXLENGTH(Tamanho máximo).
PASSWORD: Usado para armazenar dados confidenciais e possui os mesmos atributos de TEXT.
CHECKBOX: Define uma caixa de seleção para o visitante marcar aquela desejada. Possui os atributos NAME e VALUE (Valor definido para a resposta).
InputInputRADIO: Define uma caixa de seleção
para o visitante marcar apenas uma que seja desejada. Para opções do mesmo grupo devem ser apresentadas com o mesmo nome. Possui os mesmo atributos de CHECKBOX.
RESET: Botão que limpa os dados digitados no formulário.
SUBMIT: Botão que submete as informações do formulário ao servidor.
SelectSelect Permite definir uma lista de opções com barra de
rolagem ou fixa que podem ser selecionados pelo usuário.
SINTAXE:<SELECT MULTIPLE NAME=”softwares”>
<OPTION SELECTED VALUE=”adobe”>Adobe Photoshop
<OPTION VALUE=”corel”>CorelDraw
</SELECT> Onde:
OPTION: Item da lista; MULTIPLE: Mantém a lista sempre aberta. SELECTED: Indica qual o valor padrão da lista. VALUE: Valor a ser retornado ao servidor.
TextareaTextarea Insere uma caixa de texto com um
número pré-definido de linhas e colunas.
SINTAXE:<TEXTAREA NAME=”comentarios” ROWS=”4” COLS=”40”
VALUE=”comentarios”> Texto padrão – digite aqui seus comentários. </TEXTAREA>
Onde: NAME: obrigatório, pois define o nome dos dados
inseridos ROWS: número de linhas; COLS: número de colunas; VALUE: não é obrigatório, indica qual o texto será
referenciado ao autor.
Métodos de submissão de Métodos de submissão de formuláriosformuláriosMétodo GET:
◦Os dados do formulários são enviados na URL da página de destino.
Método POST:◦Os dados são enviados em um
pacote separado ao que é enviado a URL.
