2 Programação HTML 2
Pré-visualização3 páginas
Programação Web - HTML 1 AUTARQUIA EDUCACIONAL DO VALE DO SÃO FRANCISCO – AEVSF FACULDADE DE CIÊNCIAS APLICADAS E SOCIAIS DE PETROLINA – FACAPE CURSO DE CIÊNCIA DA COMPUTAÇÃO PROFESSOR LUIS NÍCOLAS DE AMORIM TRIGO APOSTILA DE PROGRAMAÇÃO WEB HTML (HyperText Markup Language) Petrolina-PE, 2008 Programação Web - HTML 2 PROGRAMAÇÃO WEB DO LADO DO CLIENTE TECNOLOGIAS 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. ESTRUTURA BÁSICA DO DOCUMENTO HTML <HTML>...</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> <HEAD> </HEAD> <BODY > </BODY> </HTML> O código acima não mostra nada, mas contém as tags necessárias para um documento HTML. <HEAD>…</HEAD> 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 <TITLE>…</TITLE> Esta tag identifica o título do documento. Ela não contém nenhum atributo e só aparece uma vez em cada documento. <HTML> <HEAD> <TITLE>Testando ...</TITLE> </HEAD> <BODY > </BODY> </HTML> Testando … Navegador <META …> 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. <BODY...>...</BODY> 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 00 corresponde ao preto, FF corresponde ao branco. Programação Web - HTML 4 Nome Código Nome Código Red FF0000 Maroon 800000 Lime 00FF00 Green 008000 Blue 0000FF Navy 000080 Yellow FFFF00 Olive 808000 Aqua 00FFFF Teal 008080 Fuchsia FF00FF Purple 800080 White FFFFFF Silver C0C0C0 Black 000000 Gray 808080 <BODY BGCOLOR="Gray"> - Cinza <BODY BGCOLOR="#FFFFFF"> - Branco <BODY BGCOLOR="#000000"> - Preto <BODY BGCOLOR="#FF0000"> - Vermelho. <BODY BGCOLOR="#00FF00"> - Verde. <BODY BGCOLOR="#0000FF"> - Azul. 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. ESTRUTURA BÁSICA DO CORPO DO DOCUMENTO HTML <P>…</P> 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. <H?>...</H?> 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 <HR> 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> <FONT>…</FONT> 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. <ADDRESS>…</ADDRESS> 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>. <MARQUEE>…</MARQUEE> 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. <PRE>…</PRE> Estas tags mantêm a formatação e o espaçamento original do texto que se encontra entre elas. <!-- COMENTÁRIO --> Esta