Download - Aula1
![Page 1: Aula1](https://reader033.vdocuments.com.br/reader033/viewer/2022051817/548e24a1b479595a178b4594/html5/thumbnails/1.jpg)
PROGRAMAÇÃO PARA PROGRAMAÇÃO PARA WEBWEBHTMLAula 1 – 26/01/2009Instrutor: Nelson Luis Rodrigues Pereira
![Page 2: Aula1](https://reader033.vdocuments.com.br/reader033/viewer/2022051817/548e24a1b479595a178b4594/html5/thumbnails/2.jpg)
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.
![Page 3: Aula1](https://reader033.vdocuments.com.br/reader033/viewer/2022051817/548e24a1b479595a178b4594/html5/thumbnails/3.jpg)
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.
![Page 4: Aula1](https://reader033.vdocuments.com.br/reader033/viewer/2022051817/548e24a1b479595a178b4594/html5/thumbnails/4.jpg)
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>
![Page 5: Aula1](https://reader033.vdocuments.com.br/reader033/viewer/2022051817/548e24a1b479595a178b4594/html5/thumbnails/5.jpg)
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>
![Page 6: Aula1](https://reader033.vdocuments.com.br/reader033/viewer/2022051817/548e24a1b479595a178b4594/html5/thumbnails/6.jpg)
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.
![Page 7: Aula1](https://reader033.vdocuments.com.br/reader033/viewer/2022051817/548e24a1b479595a178b4594/html5/thumbnails/7.jpg)
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.
![Page 8: Aula1](https://reader033.vdocuments.com.br/reader033/viewer/2022051817/548e24a1b479595a178b4594/html5/thumbnails/8.jpg)
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.
![Page 9: Aula1](https://reader033.vdocuments.com.br/reader033/viewer/2022051817/548e24a1b479595a178b4594/html5/thumbnails/9.jpg)
ParágrafosParágrafos
SINTAXE:
<P align=”alinhamento”> texto do parágrafo</p>
Onde:◦Alinhamento assume valor nesse
caso de LEFT, RIGHT e CENTER.
![Page 10: Aula1](https://reader033.vdocuments.com.br/reader033/viewer/2022051817/548e24a1b479595a178b4594/html5/thumbnails/10.jpg)
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.
![Page 11: Aula1](https://reader033.vdocuments.com.br/reader033/viewer/2022051817/548e24a1b479595a178b4594/html5/thumbnails/11.jpg)
FontesFontesSINTAXE:
<FONT size=”tamanho” face=”tipo” color=”cor”>
Texto </FONT>
![Page 12: Aula1](https://reader033.vdocuments.com.br/reader033/viewer/2022051817/548e24a1b479595a178b4594/html5/thumbnails/12.jpg)
Estilos de textoEstilos de texto
![Page 13: Aula1](https://reader033.vdocuments.com.br/reader033/viewer/2022051817/548e24a1b479595a178b4594/html5/thumbnails/13.jpg)
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
![Page 14: Aula1](https://reader033.vdocuments.com.br/reader033/viewer/2022051817/548e24a1b479595a178b4594/html5/thumbnails/14.jpg)
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.
![Page 15: Aula1](https://reader033.vdocuments.com.br/reader033/viewer/2022051817/548e24a1b479595a178b4594/html5/thumbnails/15.jpg)
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.
![Page 16: Aula1](https://reader033.vdocuments.com.br/reader033/viewer/2022051817/548e24a1b479595a178b4594/html5/thumbnails/16.jpg)
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>
![Page 17: Aula1](https://reader033.vdocuments.com.br/reader033/viewer/2022051817/548e24a1b479595a178b4594/html5/thumbnails/17.jpg)
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.
![Page 18: Aula1](https://reader033.vdocuments.com.br/reader033/viewer/2022051817/548e24a1b479595a178b4594/html5/thumbnails/18.jpg)
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>
![Page 19: Aula1](https://reader033.vdocuments.com.br/reader033/viewer/2022051817/548e24a1b479595a178b4594/html5/thumbnails/19.jpg)
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>
![Page 20: Aula1](https://reader033.vdocuments.com.br/reader033/viewer/2022051817/548e24a1b479595a178b4594/html5/thumbnails/20.jpg)
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.
![Page 21: Aula1](https://reader033.vdocuments.com.br/reader033/viewer/2022051817/548e24a1b479595a178b4594/html5/thumbnails/21.jpg)
Â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.
![Page 22: Aula1](https://reader033.vdocuments.com.br/reader033/viewer/2022051817/548e24a1b479595a178b4594/html5/thumbnails/22.jpg)
Â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>
![Page 23: Aula1](https://reader033.vdocuments.com.br/reader033/viewer/2022051817/548e24a1b479595a178b4594/html5/thumbnails/23.jpg)
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>
![Page 24: Aula1](https://reader033.vdocuments.com.br/reader033/viewer/2022051817/548e24a1b479595a178b4594/html5/thumbnails/24.jpg)
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.
![Page 25: Aula1](https://reader033.vdocuments.com.br/reader033/viewer/2022051817/548e24a1b479595a178b4594/html5/thumbnails/25.jpg)
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.
![Page 26: Aula1](https://reader033.vdocuments.com.br/reader033/viewer/2022051817/548e24a1b479595a178b4594/html5/thumbnails/26.jpg)
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.
![Page 27: Aula1](https://reader033.vdocuments.com.br/reader033/viewer/2022051817/548e24a1b479595a178b4594/html5/thumbnails/27.jpg)
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.
![Page 28: Aula1](https://reader033.vdocuments.com.br/reader033/viewer/2022051817/548e24a1b479595a178b4594/html5/thumbnails/28.jpg)
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.
![Page 29: Aula1](https://reader033.vdocuments.com.br/reader033/viewer/2022051817/548e24a1b479595a178b4594/html5/thumbnails/29.jpg)
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>
![Page 30: Aula1](https://reader033.vdocuments.com.br/reader033/viewer/2022051817/548e24a1b479595a178b4594/html5/thumbnails/30.jpg)
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).
![Page 31: Aula1](https://reader033.vdocuments.com.br/reader033/viewer/2022051817/548e24a1b479595a178b4594/html5/thumbnails/31.jpg)
InputInputSINTAXE:<INPUT type=”tipo de input”>
</input>Onde type pode ser:
◦TEXT, PASSWORD, NAME, CHECKBOX, RADIO, HIDDEN, RESET e SUBMIT.
![Page 32: Aula1](https://reader033.vdocuments.com.br/reader033/viewer/2022051817/548e24a1b479595a178b4594/html5/thumbnails/32.jpg)
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).
![Page 33: Aula1](https://reader033.vdocuments.com.br/reader033/viewer/2022051817/548e24a1b479595a178b4594/html5/thumbnails/33.jpg)
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.
![Page 34: Aula1](https://reader033.vdocuments.com.br/reader033/viewer/2022051817/548e24a1b479595a178b4594/html5/thumbnails/34.jpg)
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.
![Page 35: Aula1](https://reader033.vdocuments.com.br/reader033/viewer/2022051817/548e24a1b479595a178b4594/html5/thumbnails/35.jpg)
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.
![Page 36: Aula1](https://reader033.vdocuments.com.br/reader033/viewer/2022051817/548e24a1b479595a178b4594/html5/thumbnails/36.jpg)
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.