Aula1

PROGRAMAÇÃO PARA WEB HTML Aula 1 – 26/01/2009 Instrutor: Nelson Luis Rodrigues Pereira

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? 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 HTML <TAG atributos=”Valor do atributo”> texto </TAG> EXEMPLO: <FONT COLOR=”Blue”> Alô mundo </FONT>

Estrutura Básica do HTML <HTML> <HEAD> <TITLE> Título da página </TITLE> </HEAD> <BODY> Comandos – Corpo da página </BODY> </HTML>

Tag’s estruturais HTML: 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ç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á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ágrafos SINTAXE: <P align=”alinhamento”> texto do parágrafo</p> Onde: Alinhamento assume valor nesse caso de LEFT, RIGHT e CENTER.

Fontes 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.

Fontes SINTAXE: <FONT size=”tamanho” face=”tipo” color=”cor”> Texto </FONT>

Listas Boa 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-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 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ção Lista 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>

Links 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 servidor 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 servidores 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 download Possuem 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 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 SINTAXE: 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 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ática 1) 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.

Imagens 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.

Imagens SINTAXE: <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ática Baixe uma imagem na internet e insira ela através do código. Insira outra imagem como pano de fundo da página.

LAYERS Blocos 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.

LAYERS DIV: 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. Acrescentase uma linha antes de depois da tag div. <div align=”alinhamento”> Estrutura que estiver no bloco. </div>

Formulá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).

Input SINTAXE: <INPUT type=”tipo de input”> </input> Onde type pode ser: TEXT, PASSWORD, NAME, CHECKBOX, RADIO, HIDDEN, RESET e SUBMIT.

Input 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).

Input RADIO: 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.

Select 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.

Textarea 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 formulários Mé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.

Aula1

Mais conteúdo relacionado

Mais procurados

Semelhante a Aula1

Mais de softeam

Último

Aula1