Programação HTML

Programação HTML

(Parte 1 de 2)

Programação Web - HTML 1

APOSTILA DE PROGRAMAÇÃO WEB HTML (HyperText Markup Language)

Programação Web - HTML 2

As tecnologias cliente adotadas para esta disciplina são:

− HTML (HyperText Markup Language – Linguagem de Marcação de Hipertextos) corresponde a uma linguagem utilizada para a construção de documentos/páginas para Web (Web Sites). Ela é composta por tags (comando cercado pelos caracteres “<” e “>”) e cada tag pode conter de nenhum a mais de um atributo. A versão adotada será o HTML 4.0.

− CSS (Cascading Style Sheets – Folha de Estilos em Cascata) corresponde a documentos de formatação de Web Sites. O CSS foi criado e padronizado no final de 1996 pela World Wide Web Consortium (W3C). a versão adotada será CSS 2.0.

− Javascript corresponde a uma linguagem de scripts desenvolvidos pela Netscape para gerar aplicativos web entrelaçando seu código com o HTML.

Todo documento HTML começa com a tag “<HTML>” e termina com a tag “</HTML>”. Entre estas tags está o código fonte do documento web que é composto por duas seções:

− Cabeçalho, que usa as tags <HEAD>...</HEAD>;

− Corpo, que usa as tags <BODY>...</BODY>.

O mais básico documento HTML é: <HTML>

O código acima não mostra nada, mas contém as tags necessárias para um documento HTML.

A tag <HEAD> corresponde à seção que é formada pelo cabeçalho do documento HTML e que contém informações necessárias para o navegador ou servidor processar este documento. Estas informações são título, dados para mecanismo de busca, âncora e o que for necessário para ser lido pelo navegador antes do documento ser mostrado na tela. As duas tags da seção HEAD são: TITLE e META.

Programação Web - HTML 3

Esta tag identifica o título do documento. Ela não contém nenhum atributo e só aparece uma vez em cada documento.

<TITLE>Testando</TITLE>

Testando …

Navegador

Esta tag tem a função de servir informações para o servidor para serem analisados. Ela tem dois atributos: “HTTP-EQUIV” e “CONTENT”. O atributo “HTTP-EQUIV” corresponde ao nome, ao rótulo de uma determinada informação ao servidor. O atributo “CONTENT” corresponde à própria informação analisada pelo servidor.

<META HTTP-EQUIV=”Keywords” CONTENT=”Palavras separadas por vírgulas”> A tag acima informa palavras que serão utilizadas pelos mecanismos de busca para a identificação do documento.

<META HTTP-EQUIV=”Refresh” CONTENT=”10”> Esta tag tem a função de atualizar o mesmo documento a cada 10 segundos.

<META HTTP-EQUIV=”Refresh” CONTENT=”5;URL=’documento.html’”> Esta tag tem a função de carregar o documento HTML indicado no atributo URL após 5 segundos.

A tag <BODY> corresponde à seção que é formada pelo corpo do documento. É nela que se encontra a parte visual e auditiva do documento, o texto, formulário, tabela, imagem, links, etc. Os principais atributos da tag <BODY> correspondem a plano de fundo, margens, links e textos.

Os atributos que se referem a plano de fundo são: “BACKGROUND” e “BGCOLOR”. O

“BACKGROUND” contém o nome do arquivo de imagem ou URL completo até chegar a esta imagem que será utilizada como plano de fundo. <BODY BACKGROUND=”Caminho/até/chegar/em/arquivo/de/imagem”>

O atributo “BGCOLOR” contém a cor que será usada como plano de fundo do documento. A cor poderá ser identificada pelo seu nome (em inglês) ou pelo código hexadecimal, que é formado pelo caractere “#”, seguido de seis dígitos. Destes, os dois primeiros correspondem à cor vermelha, os dois do meio correspondem à cor verde e os dois últimos correspondem à cor azul. Enquanto 0 corresponde ao preto, F corresponde ao branco.

Programação Web - HTML 4

Red F0Maroon 800000
Lime 0F0Green 008000
Blue 0FNavy 000080
Yellow F0Olive 808000
Aqua 0FTeal 008080
Fuchsia F0FPurple 800080
White FSilver C0C0C0
Black 0Gray 808080

Nome Código Nome Código

<BODY BGCOLOR="Gray"> - Cinza <BODY BGCOLOR="#F"> - Branco

Os atributos que tratam das margens são: “TOPMARGIN” e “LEFTMARGIN”, que atendem ao

Internet Explorer; e “MARGINWIDTH” e “MARGINHEIGHT”, que atendem aos demais navegadores. Os atributos “TOPMARGIN” e “MARGINWIDTH” correspondem à margem superior e “LEFTMARGIN” e “MARGINHEIGHT” correspondem à margem esquerda.

Os atributos que tratam dos links e textos são: LINK, VLINK, ALINK, TEXT. O atributo LINK corresponde a cor de todos os links de um documento que ainda não foram acessados, VLINK corresponde a cor dos links que já foram acessados, ALINK afeta a cor do link ativo, que está sendo acessado e TEXT afeta a cor do texto.

Esta tag cerca um parágrafo do documento. O atributo ALIGN corresponde ao alinhamento deste parágrafo. As opções são: LEFT, RIGHT, CENTER e JUSTIFY, sendo o padrão a opção LEFT.

Esta tag corresponde à identificação de um determinado texto como título. A interrogação acima corresponde, na verdade, a um número entre 1 e 6, sendo 1, o texto maior e 6, o menor. As tags são assim: <H1>...</H1>, <H2>...</H2>, <H3>...</H3>, <H4>...</H4>, <H5>...</H5> e <H6>...</H6>.

Programação Web - HTML 5

Esta tag corresponde a uma linha horizontal. Os seus atributos são ALIGN: que corresponde ao alinhamento; WIDTH, que corresponde à largura, podendo ser em porcentagem ou pixels; SIZE, que corresponde à espessura em pixels; e NOSHADE, que cria uma linha sem efeito 3D. <HR ALIGN=”CENTER” WIDTH=”100%” SIZE=”2” NOSHADE>

A tag <FONT> corresponde a configuração do texto no que se refere ao tipo de fonte, cor e tamanho. Os atributos desta tag são: FACE, que corresponde ao nome da fonte; SIZE, que corresponde ao tamanho do texto, variando de 1 a 7; e COLOR, que corresponde a cor do texto, podendo ser o nome da cor ou em código hexadecimal. <FONT FACE=”Verdana” SIZE=”3” COLOR=”#000080”>...</FONT>

<BR> Esta tag corresponde à quebra de linha.

<I>…</I> Esta tag coloca o texto, a qual cerca, em itálico.

<U>…</U> Esta tag coloca o texto, a qual cerca, sublinhado.

<B>…</B> Esta tag coloca o texto, a qual cerca, em negrito.

<S>…</S> Esta tag coloca o texto, a qual cerca, riscado.

<BLOCKQUOTE>…</BLOCKQUOTE> Esta tag gera um espaçamento no conteúdo.

<CENTER>…</CENTER> Esta tag coloca o texto, a qual cerca, centralizado.

<BIG>…</BIG> Esta tag aumenta o texto. Quanto mais tags inserir, maior ficará o texto.

Programação Web - HTML 6

<SMALL>…</SMALL> Esta tag diminui o texto. Quanto mais tags inserir, menor ficará o texto.

Esta tag serve para referenciar o autor (créditos). Ao visualizar o resultado da tag, o texto torna-se semelhante ao resultado das tags <I>...</i>.

Esta tag permite aplicar um efeito conhecido como “letreiro eletrônico”, onde o texto que fica entre as tags desliza de um lado para outro do monitor.

Estas tags mantêm a formatação e o espaçamento original do texto que se encontra entre elas.

Esta estrutura é utilizada para inserir comentários, textos que não deverão ser visíveis no monitor. Basta inserir o texto que será o comentário entre <!-- e -->.

Programação Web - HTML 7

LISTAS Existem três tipos de tags direcionados para listagem. Elas são: <UL>, <OL> e <DL>.

A tag <UL> corresponde a listas desordenadas, que são listadas por elementos geométricos.

O atributo desta tag é TYPE, que pode assumir os seguintes valores: “DISC” (círculo preenchido – padrão), “CIRCLE” (círculo oco) e “SQUARE” (quadrado). Cada elemento da lista deverá ser iniciado com a tag <LI>.

<UL> <LI>Primeiro item

<LI>Segundo item

A tag <OL> corresponde a listas ordenadas, que são listadas por números e letras. O atributo desta tag também é TYPE, que pode assumir os seguintes valores: “1” (algarismo arábico - padrão), “A” (letra maiúscula), “a” (letra minúscula), “i” (algarismo romano minúsculo) e “I” (algarismo romano maiúsculo). Cada um dos elementos desta lista também é iniciado com a tag <LI>.

Programação Web - HTML 8

A tag <DL> corresponde a lista de definições. Esta inicia a lista. As tags <DT> e <D> tratam do conteúdo. Enquanto <DT> trata do termo, <D> trata da definição em si, dos dados, da explicação.

Esta tag corresponde a que demonstra uma figura no documento. Os atributos são: SRC, que corresponde ao caminho do arquivo que contém a imagem; WIDTH, que corresponde a largura da imagem em pixels; HEIGHT, a altura em pixels; BORDER, que indica se a imagem tem borda (1) ou não (0); e ALT, que corresponde a uma descrição da imagem. <IMG SRC=”imagens/foto.jpg” WIDTH=”150” HEIGHT=”90” BORDER=”0” ALT=”Foto do professor”>

Os links correspondem ao ponto que encaminha algo para outro lugar. A tag de links é <A>.

Os seus atributos são: HREF, que corresponde a um link para outro documento ou para um determinado local do documento; e NAME, que corresponde a um local receptor do documento. Quando se trata de um local específico pelo HREF, deve-se colocar “#” antes do valor do referenciado. Existe um atributo chamado TARGET que, recebendo o valor “_blank”, tem a função de abrir o link destino em outra janela. <A HREF=”index.html”>

<A HREF=”arquivo.html#item”> text.html

<A NAME=”item”> arquivo.html

Estas tags correspondem à estrutura geral de uma tabela. Os atributos básicos são: WIDTH, largura medida em porcentagem ou pixels; HEIGHT, altura também medida em porcentagem ou pixels; BORDER, que indica a largura da borda em pixels, variando de 0 (sem borda) até 1000; CELLPADDING, margem dentro das células medida em pixels; CELLSPACING; largura da borda das células medida em pixels; BORDERCOLOR, que corresponde a cor da borda da tabela, podendo ser o nome ou o código hexadecimal; ALIGN, que corresponde ao alinhamento desta tabela; BACKGROUND, que contém o nome do arquivo de imagem ou URL completo até chegar a esta

Programação Web - HTML 9 imagem que será utilizada como plano de fundo da tabela; e BGCOLOR, que contém a cor de fundo da tabela, sendo o nome ou código hexadecimal.

Estas tags correspondem à estrutura de uma linha da tabela. Os atributos aplicados a estas tags são os mesmos aplicados nos das tags de célula.

Estas tags correspondem à estrutura de uma célula da tabela. Os atributos básicos são:

ALIGN, que corresponde ao alinhamento horizontal do conteúdo da célula; VALIGN, que corresponde ao alinhamento vertical do conteúdo da célula, sendo as opções TOP (superior), MIDDLE (meio) e BOTTOM (base); WIDTH, largura medida em porcentagem ou pixels; HEIGHT, altura também medida em porcentagem ou pixels; BACKGROUND, que contém o caminho até o arquivo de imagem que será utilizada como plano de fundo da célula; e BGCOLOR, que contém a cor de fundo da célula, sendo o nome ou código hexadecimal. Tem dois atributos específicos para TD e TH: COLSPAN, que mescla “N” células da mesma linha; e ROWSPAN, que mescla “N” células da mesma coluna.

Estas tags são semelhantes às tags <TD>...</TD>. A diferença entre elas é que o texto que

<TH>…</TH> fica dentro da tags “TH” fica em negrito como padrão. Geralmente, elas são utilizadas como linha de cabeçalho da tabela. Os atributos são os mesmos das tags <TD ...>...</TD>.

Programação Web - HTML 10

Na linguagem HTML é permitido que o usuário interaja com o servidor através de formulários ligados a scripts desenvolvidos em linguagens como PHP, Servlets, JSP, ASP, etc.

Determina o início e o fim de um formulário. O FORM possui dois atributos que são: ACTION, destino após a submissão do formulário; e METHOD, método como os dados serão enviados para o destino, sendo os valores deste atributo, os métodos GET e POST.

Esta tag especifica vários campos dentro de um formulário. Ele pode receber diversos atributos que definem o tipo de campo (botão, caixa de texto, etc). O atributo mais importante do input é o NAME, ele associa o valor da entrada no elemento. Quando receber os dados processados irá aparecer NAME = resposta dada pelo usuário. Outro atributo importante é o TYPE que identifica o tipo de campo. Tem também os atributos SIZE (define o tamanho do campo), MAXLENGHT (define a quantidade máxima de caracteres em um determinado campo) e VALUE (valor default).

Caixa de Texto

Caixa de texto simples. <INPUT TYPE = "TEXT" NAME="NOME">

<INPUT TYPE = "TEXT" NAME="NOME" VALUE = "Texto"> Texto

Password

Esconde a informação digitada. <INPUT TYPE = "PASSWORD" NAME="PASSWORD">

Radio

O usuário deve escolher uma resposta em uma única alternativa. sim<INPUT TYPE = "RADIO" NAME="RESPOSTA" VALUE = "SIM" CHECKED><BR> não<INPUT TYPE = "RADIO" NAME="RESPOSTA" VALUE = "NÃO"> sim não

Programação Web - HTML 1

Textarea

Caixa de texto em tamanho maior. <TEXTAREA NAME=“CAIXA” ROWS=“5” COLS=“30”>Texto</TEXTAREA>

Texto

Checkbox

O usuário pode escolher várias alternativas. FrontPage<INPUT TYPE = "CHECKBOX" NAME="OPCAO" VALUE = "FRONT" CHECKED><BR>

Dreamweaver<INPUT TYPE = "CHECKBOX" NAME="OPCAO" VALUE = "DREAM">

Front Page Dreamweaver

Select

Menu com várias opções para o usuário escolher. <SELECT NAME=”OPCOES”>

<OPTION value=”1” SELECTED>MENU</OPTION>

<OPTION value=”2”>Outra opção</OPTION> menu

Submit

Botão que envia os dados do formulário. <INPUT TYPE = "SUBMIT" VALUE="Enviar">

Enviar

Reset

Botão que limpa os dados do formulário. <INPUT TYPE="RESET" VALUE="Limpar">

Limpar

Hidden Corresponde a uma “caixa de texto invisível”. Armazena informações que poderão ser utilizadas por formulários, mas que não fica visível no navegador. <INPUT TYPE = "HIDDEN" NAME="NOME" VALUE = "Texto">

Programação Web - HTML 12

Frame corresponde a uma estrutura que tem a finalidade de definir o layout do web site utilizando vários outros documentos web, separando-os através de molduras.

Correspondem às tags que inicia e finaliza a estrutura Frame, respectivamente. Os seus principais atributos são:

• ROWS, que define as dimensões das linhas da estrutura. A quantidade de valores separados por vírgulas corresponde à quantidade de linhas e estes valores podem ser em pixel (número sem unidade), porcentagem (número seguido pelo sinal %) e/ou * (asterisco), que determina flexibilidade na dimensão (completa o espaço que o resto da área disponível).

• COLS, que define as dimensões das colunas da estrutura. Valores semelhantes ao atributo ROWS.

• FRAMEBORDER, que define se a estrutura terá moldura ou não. Se o valor for igual a 1 (um), terá moldura, senão for igual a 0 (zero), não terá moldura.

• BORDER, que define a espessura da borda da moldura.

• BORDERCOLOR, que define a cor da borda, podendo ser o nome em inglês ou sistema RGB em hexadecimal.

Corresponde a tag que abre um documento web em uma parte da estrutura Frame. Os seus principais atributos são:

• SRC, que define o caminho do arquivo.

• NAME, que define um identificador para cada parte do Frame.

• TARGET, que define o Frame-destino dos links que serão clicados.

• SCROLLING, que define se tem barra de rolagem obrigatória, representado por

“YES”; “NO”, se não tem barra de rolagem; e “AUTO”, só terá barra de rolagem quando necessário.

• NORESIZE, que define as bordas da estrutura Frame como imóveis quando aplicado na tag.

A tag <IFRAME> corresponde a um documento HTML dentro de outro documento HTML. Os atributos são: SRC, que corresponde ao caminho até o documento HTML que será inserido dentro do documento ativo; WIDTH, que é a largura da área, podendo ser em porcentagem ou pixels; HEIGHT,

(Parte 1 de 2)

Comentários