html, css e javascript - alfamídia [versão 2007]
TRANSCRIPT
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
1/136
WEB
HTML, CSS e
JavaScript
Agosto de 2007Versão 1
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
2/136
Web, HTML, CSS e JavaScript
2 2007 Alfamidia Prow LTDA.
Todos os direitos reservados para Alfamídia Prow LTDA.
AVISO DE RESPONSABILIDADE
As informações contidas neste material de treinamento são distribuídas “NO ESTADO EMQUE SE ENCONTRAM”, sem qualquer garantia, expressa ou implícita. Embora todas as precauções tenham sido tomadas na preparação deste material, a Processor AlfamídiaLTDA. não tem qualquer responsabilidade sobre qualquer pessoa ou entidade com respeitoà responsabilidade, perda ou danos causados, ou alegadamente causados, direta ouindiretamente, pelas instruções contidas neste material ou pelo software de computador e produtos de hardware aqui descritos.
01/08/2007
Alfamídia Prow LTDAAv. Cristóvão Colombo 1496Porto Alegre, RS(51) 3073-2100http://www.alfamidia.com.br
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
3/136
Web, HTML, CSS e JavaScript
3 2007 Alfamidia Prow LTDA.
WEB,
HTML, CSS eJavaScript
UNIDADE 1 ARQUITETURA DE APLICAÇÕES WEB................................................................................................. 7
1.1 I NTERNET – UM POUCO DE HISTÓRIA ............................................................................................... 7 1.2 PÁGINAS ESTÁTICAS ....................................................................................................................... 7 1.3 I NTRODUÇÃO A CLIENT SIDE SCRIPTS E SERVER SIDE SCRIPTS ...................................................... 8
1.3.1 Client Side Scripts e Server Side Scripts ................................................................................... 8 1.3.2 Client Side scripts – Javascript ................................................................................................. 8 1.3.3 Server Side Scripts – ASP, ASP.NET, PHP e JSP ..................................................................... 9
1.4 AMBIENTE DE DESENVOLVIMENTO ............................................................................................... 11 1.5 SERVIDORES WEB E DE APLICAÇÃO ............................................................................................. 11
1.5.1 O que é um Servidor WEB? ..................................................................................................... 11 1.5.2 O que é um servidor de aplicações? ........................................................................................ 13
1.6 NAVEGADORES ............................................................................................................................. 13 1.6.1 Padronização e protocolos de acesso .......... .......... ........... .......... ........... .......... .......... ........... ... 14 1.6.2 HTTPS (HyperText Transfer Protocol Secure) ............ ........... .......... ........... .......... .......... ....... 14
UNIDADE 2 INTRODUÇÃO AO HTML E WEB STANDARDS.................................................................................. 16
2.1 A LINGUAGEM HTML E A I NTERNET ............................................................................................ 16 2.2 AS LIMITAÇÕES DO HTML ........................................................................................................... 16
2.3 OS WEB STANDARDS .................................................................................................................... 17 2.4 W3C ............................................................................................................................................. 17 2.5 IMPORTÂNCIA DOS WEB STANDARDS ........................................................................................... 17
UNIDADE 3 HTML – RECURSOS BÁSICOS ............................................................................................................. 19
3.1 POR QUE E NTENDER O HTML? ..................................................................................................... 19 3.2 CONCEITOS BÁSICOS DE HTML ................................................................................................... 19 3.3 TAGS BÁSICAS .............................................................................................................................. 20
3.3.1 Exemplo de HTML com Tags Básicas ........... .......... ........... .......... .......... ........... .......... ........... . 20 3.3.2 Familiarizando-se com o HTML .......... .......... ........... .......... ........... .......... .......... ........... .......... 21
3.4 FORMATAÇÃO DE TEXTOS ............................................................................................................ 21 3.4.1 Exemplo de Títulos e Subtítulos .......... ........... .......... .......... ........... .......... .......... ........... ........... . 22 3.4.2 Exemplo de Alinhamentos ........... ........... .......... .......... ........... .......... ........... .......... ........... ........ 23 3.4.3
Exemplo de Formatação de Textos.......... ........... .......... ........... .......... ........... .......... .......... ....... 25
3.5 CORES EM HTML ......................................................................................................................... 26 3.5.1 Utilizando o Vermelho ............................................................................................................. 27 3.5.2 Utilizando o Vermelho com Verde .......... .......... ........... .......... .......... ........... .......... .......... ......... 28
UNIDADE 4 INCLUINDO IMAGENS EM UMA PÁGINA ............................................................................................ 29
4.1 FAZENDO R EFERÊNCIA A OUTROS DOCUMENTOS ......................................................................... 29 4.1.1 Referência Relativa ........... .......... ........... .......... ........... .......... .......... ........... .......... .......... ......... 29 4.1.2 Referência Absoluta ........... .......... ........... .......... ........... .......... .......... ........... .......... .......... ......... 29 4.1.3 Referência Externa .......... .......... ........... .......... ........... .......... ........... .......... ........... .......... .......... 30
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
4/136
Web, HTML, CSS e JavaScript
4 2007 Alfamidia Prow LTDA.
4.2 I NCLUINDO IMAGENS COM A TAG IMG ......................................................................................... 30 4.2.1 Incluindo Imagens – Exemplo 1 .............................................................................................. 30 4.2.2 Alinhando Imagens – Exemplo2 .............................................................................................. 31
4.3 I NCLUINDO IMAGENS NO FUNDO DA PÁGINA – TAG BODY ......................................................... 33 4.3.1 Fundo com Padronagem ............... .......... ........... .......... ........... .......... ........... .......... .......... ....... 34
UNIDADE 5 CRIANDO LINKS .................................................................................................................................... 35
5.1 HIPERLINKS................................................................................................................................... 35 5.1.1 Página com Links – Exemplo 1 ............................................................................................... 35
UNIDADE 6 CRIANDO TABELAS .............................................................................................................................. 37
6.1 TABELAS E LAYOUT DE PÁGINAS .................................................................................................. 37 6.2 CONSTRUINDO UMA TABELA ........................................................................................................ 37
6.2.1 Exemplo de uma Tabela Simples .......... .......... ........... .......... ........... .......... .......... ........... .......... 38 6.2.2 Tabelas Mais Sofisticadas ....................................................................................................... 39 6.2.3 Construindo uma Tabela mais Sofisticada .............................................................................. 43 6.2.4 Integrando Recursos em Tabelas............. ........... .......... ........... .......... .......... ........... .......... ....... 44
UNIDADE 7 FORMULÁRIOS ...................................................................................................................................... 45
7.1 I NTRODUÇÃO A FORMULÁRIOS ..................................................................................................... 45 7.2 CRIANDO UM FORMULÁRIO .......................................................................................................... 45 7.3 UM PRIMEIRO FORMULÁRIO ......................................................................................................... 46 7.4 FORMULÁRIOS COM DIFERENTES TIPOS DO INPUT ...................................................................... 47 7.5 E NTRADA DE VÁRIAS LINHAS DE TEXTO - TEXTAREA ................................................................ 49 7.6 MENUS COM OPÇÕES - SELECT ................................................................................................... 50
UNIDADE 8 INTRODUÇÃO A ESTILOS CSS ............................................................................................................ 52
8.1 O CSS ........................................................................................................................................... 52 8.2 BENEFÍCIOS EM UTILIZAR CSS ..................................................................................................... 52 8.3 CSS PARA SEPARAR CONTEÚDO DA APRESENTAÇÃO ................................................................... 53 8.4 PÁGINAS COM SEMÂNTICA CORRETA ........................................................................................... 54 8.5 SINTAXE DO CSS .......................................................................................................................... 55 8.6 APLICANDO ESTILOS A UMA PÁGINA ............................................................................................. 56
8.6.1 Aplicando estilos a toda a página HTML ........... .......... ........... .......... ........... .......... .......... ....... 56 8.6.2 Aplicando estilos à apenas uma tag HTML específica .......... .......... ........... .......... .......... ......... 56 8.6.3 Utilizando um arquivo de estilos externo ................................................................................ 57
8.7 FORMAS DE UTILIZAÇÃO DOS SELETORES ..................................................................................... 57 8.7.1 Aplicando estilos à uma tag: .............. ........... .......... .......... ........... .......... ........... .......... ........... . 57 8.7.2 Definindo estilos para mais um grupo de tags ............... .......... ........... .......... ........... .......... ..... 58 8.7.3 Definindo uma classe de estilos .......... ........... .......... .......... ........... .......... .......... ........... ........... . 59 8.7.4 Definindo um ID de estilos ................. ........... .......... .......... ........... .......... ........... .......... ........... . 59
8.8 EXERCÍCIOS .................................................................................................................................. 62
UNIDADE 9
CSS NA PRÁTICA .................................................................................................................................. 63 9.1 UTILIZANDO CSS EM SITUAÇÕES R EAIS ....................................................................................... 63
9.2 CRIANDO TABELAS COM ESTILOS CSS ......................................................................................... 63 9.3 DADOS EXIBIDOS EM UMA TABELA COM CSS ............................................................................... 63 9.4 ALTERANDO O ESTILO CSS .......................................................................................................... 65 9.5 DADOS E FORMULÁRIOS COM CSS................................................................................................ 66 9.6 EXERCÍCIOS COM CSS ................................................................................................................... 68
UNIDADE 10 INTRODUÇÃO AO JAVASCRIPT ..................................................................................................... 69
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
5/136
Web, HTML, CSS e JavaScript
5 2007 Alfamidia Prow LTDA.
10.1 O QUE É JAVASCRIPT?................................................................................................................... 69 10.2 O NDE OS SCRIPT PODEM SER EXECUTADOS ? ................................................................................ 69
UNIDADE 11 NOÇÕES BÁSICAS DE JAVASCRIPT ............................................................................................. 70
11.1 UTILIZANDO COMENTÁRIOS ......................................................................................................... 70 11.2 TIPOS DE DADOS ............................................................................................................................ 70
11.2.1 Tipos de dados Primitivos (por valor) ................................................................................ 71 11.2.2 Tipos de dados Compostos (por referência) ....................................................................... 71 11.2.3 Tipos de dados especiais (undefined e Null) .......... ........... .......... ........... .......... ........... ........ 71
11.3 VARIÁVEIS .................................................................................................................................... 72 11.4 OPERADORES ................................................................................................................................ 73 11.5 A ESTRUTURA DE UM SCRIPT JAVASCRIPT .................................................................................... 74 11.6 CRIANDO UM SCRIPT EM UMA PÁGINA HTML ............................................................................... 75 11.7 ESTRUTURAS DE TESTE ................................................................................................................. 75 11.8 ESTRUTURAS DE REPETIÇÃO ......................................................................................................... 77
11.8.1 While ................................................................................................................................... 77 11.8.2 For ........... .......... ........... .......... ........... .......... .......... ........... .......... ........... .......... ........... ........ 77
UNIDADE 12 UTILIZANDO FUNÇÕES ................................................................................................................... 79
12.1 UTILIZANDO FUNÇÕES NO JAVASCRIPT ......................................................................................... 79 12.2 AS FUNÇÕES INTRÍNSECAS DO JAVASCRIPT ................................................................................... 79
12.2.1 A função Eval() ........... .......... ........... .......... ........... .......... ........... .......... ........... .......... .......... 79 12.2.2 A função parseInt() e parseFloat() ................ .......... ........... .......... ........... .......... .......... ....... 80 12.2.3 Função escape() e unescape() ................ .......... ........... .......... ........... .......... .......... ........... ... 81 12.2.4 A função isNaN() ............. ........... .......... .......... ........... .......... ........... .......... .......... ........... ..... 81
12.3 FUNÇÕES CRIADAS PELO USUÁRIO ................................................................................................ 81
UNIDADE 13 UTILIZANDO OBJETOS ................................................................................................................... 83
13.1 OBJETOS INTRÍNSECOS .................................................................................................................. 83 13.1.1 O Objeto Date ..................................................................................................................... 83 13.1.2 O Objeto Array ................................................................................................................... 84 13.1.3 O Objeto Math .................................................................................................................... 85 13.1.4 O Objeto String ................................................................................................................... 86
13.2 OBJETOS CRIADOS PELO USUÁRIO ................................................................................................. 86 13.3 MÉTODOS ...................................................................................................................................... 87
13.3.1 Métodos estáticos .......... .......... ........... .......... .......... ........... .......... ........... .......... .......... ......... 87 13.3.2 A declaração this ............................................................................................................ 87 13.3.3 A declaração with ............................................................................................................ 87
UNIDADE 14 CONHECENDO OBJECTS DOM ...................................................................................................... 89
14.1 I NTRODUÇÃO A DOM: .................................................................................................................. 89 14.2 O QUE É HTML DOM? ................................................................................................................ 89 14.3 QUANDO DEVEMOS USAR JAVASCRIPT ......................................................................................... 89 14.4 AS DIVISÕES DE DOM ................................................................................................................... 89 14.5 ALTERAR CONTEÚDO COM HTML DOM ...................................................................................... 89 14.6 DOCUMENT OBJECTS .................................................................................................................... 90 14.7 PROPRIEDADES DO OBJETO BODY .................................................................................................. 90 14.8 OBJETO FORM ............................................................................................................................... 91
14.8.1 Atributos do Form .......... ........... .......... ........... .......... ........... .......... ........... .......... .......... ....... 93 14.8.2 Métodos de um FORM .......... ........... .......... ........... .......... ........... .......... ........... .......... .......... 93 14.8.3 Eventos de um form ........... .......... ........... .......... ........... .......... ........... .......... ........... .......... ... 93 14.8.4 “Elements” de um FORM ................................................................................................... 94
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
6/136
Web, HTML, CSS e JavaScript
6 2007 Alfamidia Prow LTDA.
14.9 MÉTODO GETELEMENTBYID......................................................................................................... 94 14.10 OBJETO FRAMESET ....................................................................................................................... 95
14.10.1 Atributos do Objeto frameset ........... .......... ........... .......... ........... .......... .......... ........... .......... 96
14.10.2 Metodos de Objeto Frameset ........... .......... ........... .......... ........... .......... .......... ........... .......... 96 14.10.3 Eventos de objeto de um Frameset ................ .......... ........... .......... ........... .......... .......... ....... 96
UNIDADE 15 MANIPULANDO FORMS COM DOM ................................................................................................ 98
15.1 TUTORIAL ..................................................................................................................................... 98 15.2 MAPEANDO EVENTOS DE UM FORMULÁRIO ................................................................................. 102
15.2.1 Mapeando Eventos através da tag script .......... ........... .......... ........... .......... ........... .......... . 102 15.2.2 Mapeando eventos através de funções ........... .......... ........... .......... ........... .......... .......... ..... 103 15.2.3 Mapeamento de eventos através de atribuição .......... .......... ........... .......... ........... .......... ... 104
15.3 EXTRAINDO INFORMAÇÕES DOS FORMULÁRIOS HTML .............................................................. 105 15.3.1 Buscando informações de formulários não nomeados ................... .......... .......... ........... ... 105 15.3.2 Buscando informações de formulários nomeados .......... ........... .......... .......... ........... ........ 106
15.4 VALIDANDO INFORMAÇÕES NO FORMULÁRIO ............................................................................. 107 15.4.1 Validando informações de caixas de texto .......... .......... ........... .......... ........... .......... .......... 107 15.4.2 Validando listas de seleção simples e múltipla (Combo e ListBox) .......... ........... .......... ... 108 15.4.3 Validando caixas de escolha simples e múltipla (RadioButton e CheckBox) ................... 110 15.4.4 Criando uma função para mascaras de campos .......... .......... ........... .......... ........... .......... . 112
15.5 VALIDAÇÃO COM R EGULAR EXPRESSIONS (R EGEX)................................................................... 114
UNIDADE 16 OBJETO WINDOW .......................................................................................................................... 115
7.1 MÉTODOS DO OBJETO WINDOW ................................................................................................... 115
UNIDADE 17 - ANEXO 1 PRINCIPAIS TAGS ....................................................................................................... 119
UNIDADE 18 - ANEXO 2 FRAMES ....................................................................................................................... 124
18.1 ESTRUTURA BÁSICA - FRAMESET ................................................................................................ 124 18.1.1 Atributos de Frameset .......... .......... ........... .......... .......... ........... .......... ........... .......... .......... 125
18.1.2 Frame............ .......... ........... .......... ........... .......... ........... .......... ........... .......... ........... .......... . 130
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
7/136
Web, HTML, CSS e JavaScript
7 2007 Alfamidia Prow LTDA.
Unidade 1
Arquitetura de Aplicações WEB
1.1 Internet – um pouco de história
A Internet teve início nos Estados Unidos em 1969 sob o nome de ARPANET. Compostainicialmente de quatro computadores interligados, ela tinha como finalidade demonstraras potencialidades da construção de redes usando computadores dispersos em uma grandeárea. Em 1972, 50 universidades e instituições militares já possuíam conexões.
Hoje a Internet é uma arquitetura de software e hardware interligados que são mantidas por organizações comerciais e governamentais. Uma de suas principais características é
que não possui um proprietário único, responsável pelo seu funcionamento. Existemapenas associações e grupos que se dedicam a desenvolver protocolos e procedimentos para suportar a interligação entre os computadores, ratificar padrões e resolver questõesoperacionais.
1.2 Páginas Estáticas
A exibição de páginas estáticas na Web inclui dois componentes: o navegador e oservidor Web. O processo é o seguinte:
1. O usuário solicita a página digitando a URL em um navegador.
2. O navegador solicita a página ao servidor Web usando o HTTP (Hypertext TransferProtocol).
3. O servidor Web envia a página ao navegador no formato HTML.
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
8/136
Web, HTML, CSS e JavaScript
8 2007 Alfamidia Prow LTDA.
Solicitação HTTP
4. O navegador interpreta o HTML e exibe a página para o usuário. Ele tambéminterpreta algumas linguagens de script, como JavaScript.
Processamento de página pelo navegador
1.3 Introdução a Client Side Scripts e Server Side Scripts
1.3.1 Client Side Scripts e Server Side Scripts
Embora existam diversas linguagens com diferentes objetivos, nos exemplos práticosdeste curso estaremos nos concentrando em dois tipos de linguagens muito utilizados emaplicações Web: client side scripts e server side scripts.
1.3.2 Client Side scripts – Javascript
São códigos de programa que são processados pela estação cliente. Geralmente em
aplicações voltadas à Internet, o código que é executado no cliente cuida apenas de pequenas consistências de telas e validações de entrada de dados.
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
9/136
Web, HTML, CSS e JavaScript
9 2007 Alfamidia Prow LTDA.
Tratando-se de páginas web, os client-side scripts terão de ser processados por um browser. O maior problema de se utilizar este tipo de artifício em uma aplicação é aincompatibilidade de interpretação da linguagem entre os browsers. O Microsoft Internet
Explorer, por exemplo, é capaz de interpretar o Visual Basic Script, porém o Netscapenão o faz sem o auxílio de um plug in (que foi desenvolvido por terceiros). Há ainda o problema de versões muito antigas de navegadores, que não conseguem interpretarnenhum script.
Em grande parte das situações, não é possível exigir que o usuário final disponha dedeterminado produto para acessar a aplicação. Portanto é importante pesar todos estesfatores ao planejar alguma aplicação com client-side scripts.
A linguagem script mais indicada para se construir client-side scripts é o JavaScript,devido a sua compatibilidade com os diversos browsers (Internet Explorer, FireFox,Opera, Safári, etc).
Os scripts client-side são geralmente indicados para:
menus dinâmicos
movimento e trocas dinâmicas de imagens e textos
validação de campos de formulários sem acesso ao servidor
efeitos na página de acordo com o movimento do mouse
Funcionamento de scripts client-side
1.3.3 Server Side Scripts – ASP, ASP.NET, PHP e JSP
São códigos de programa que são processados no servidor. Devido a este fato, não énecessário preocupar-se com a linguagem que o código foi criado: o servidor é quem seencarrega de interpretá-lo e de devolver uma resposta para o cliente. Em páginas Asp, sãoesses códigos os maiores responsáveis pelos resultados apresentados, e a linguagemdefault utilizada é o Visual Basic Script. Em páginas PHP, a linguagem é o próprio PHP.Em páginas JSP, a linguagem utilizada é o Java.
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
10/136
Web, HTML, CSS e JavaScript
10 2007 Alfamidia Prow LTDA.
A cada acesso a uma página, estes scripts geram dinamicamente uma página que éenviada para o browser. Desta forma, diferente de scripts no cliente, estes nunca sãovistos pelo cliente, não podendo ser copiados.
Os scripts server-side são geralmente indicados para:
acesso a bancos de dados
criação de páginas em tempo real
lojas virtuais com carrinhos de compra
sistemas de cadastro e consulta de dados
sites de busca na Internet
Requisição Normal
Requisição de página dinâmica
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
11/136
Web, HTML, CSS e JavaScript
11 2007 Alfamidia Prow LTDA.
1.4 Ambiente de desenvolvimento
Como scripts, sejam server-side (ASP, PHP) ou client-side (Javascript) são arquivos dotipo texto (ASCII), eles podem ser escritos em um editor de textos comum – Edit ou Notepad, por exemplo. Para o desenvolvimento em ASP existe também o MS VisualStudio(ASP.NET), que proporciona um ambiente mais agradável de desenvolvimento,mas exige os mesmos conhecimentos do programador.
Diferentes fabricantes desenvolvem ambientes de desenvolvimento, que podem ou nãoser específicos para uma linguagem. A Adobe, por exemplo, tem como produto oDreamweaver, que além de definir a digramação de sites, pode da mesma forma serutilizado como ambiente de desenvolvimento
Também em software livre existem inúmeros ambientes de desenvolvimento para Java,PHP e mesmo para linguagens proprietárias como ASP.
1.5 Servidores WEB e de Aplicação
1.5.1 O que é um Servidor WEB?
Um servidor web é um aplicativo responsável por fornecer ao computador do cliente(usuários de sites e páginas eletrônicas), em tempo real, os dados solicitados. O processose inicia com a conexão entre o computador onde está instalado o servidor e ocomputador do cliente; como na web não é possível prever a que hora se dará essa
conexão, os servidores precisam estar disponíveis dia e noite. A partir daí é processado o pedido do cliente, e conforme as restrições de segurança e a existência da informaçãosolicitada, o servidor devolve os dados.
Quando falamos em servidor web, estamos na verdade falando de servidores capazes delidar com o protocolo HTTP, que é o padrão para transmissão de hipertexto. Muitosservidores trabalham, paralelamente, com outros protocolos, como HTTPS (que é oHTTP "seguro"), FTP, RPC, etc.
Além de transmitir páginas HTML, imagens e aplicativos (Java, Microsoft, etc), osservidores também podem executar programas e scripts, interagindo mais com o usuário.
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
12/136
Web, HTML, CSS e JavaScript
12 2007 Alfamidia Prow LTDA.
Computador Cliente: Computador utilizado pelo usuário. Computador Servidor: Computador utilizado para armazenar sites, sistemas,
arquivos e conteúdos em geral.
Resumo: Servidor WEB é um programa de computador que responde requisições.Exemplo: quando digito www.alfamidia.com.br na barra de endereços do navegador eteclo ENTER, o meu computador localiza o servidor onde está hospedado o site, queresponde a minha solicitação. Os servidores mais comuns são o IIS da Microsoft, oApache da Apache Software Foundation e o TomCat da Apache Jakarta Project. Abaixo,listamos alguns servidores existentes no mercado:
Apache HTTP Server
BadBlue
Boa
Caudium, uma derivação do Roxen
Covalent Enterprise Ready Server, baseado no Apache HTTP Server Fnord
IBM HTTP Server (baseado no Apache HTTP Server), antigo Domino GoWebserver
Internet Information Services (IIS) da Microsoft, incluso no Windows
Light HTTP Server (lighttpd)
NaviServer
Oracle HTTP Server, baseado no Apache HTTP Server
Roxen TomCat da Apache Jakarta Project.
thttpd da ACME Laboratories
Zeus Web Server
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
13/136
Web, HTML, CSS e JavaScript
13 2007 Alfamidia Prow LTDA.
1.5.2 O que é um servidor de aplicações?
Um servidor de aplicação é um software que disponibiliza um ambiente para a instalação
e execução de certas aplicações. O objetivo é disponibilizar uma plataforma, que abstraiado desenvolvedor de software algumas das complexidades de um sistema computacional. No desenvolvimento de aplicações comerciais, por exemplo, o foco dos desenvolvedoresdeve ser a resolução de problemas relacionados ao negócio da empresa, e não de questõesde infraestrutura da aplicação. O servidor de aplicações responde a algumas questõescomuns à todas as aplicações, como segurança, garantia de disponibilidade, balanceamento de carga e tratamento de exceções.
1.5.2.1 J2EE(Java 2 Enterprise Edition)
Devido a popularização da plataforma Java, o termo servidor de aplicação é
frequentemente uma referência a "Servidor de aplicação J2EE". O servidor WebSphereApplication Server da IBM e o WebLogic Server da BEA Systems são dois dos maisconhecidos servidores J2EE comerciais. Alguns servidores de software livre também sãomuito utilizados, como JBoss, JOnAS e Apache Geronimo. Como mencionado, alinguagem de programação destes softwares é Java. Os módulos Web são implementadosatravés de servlets e JSP e a lógica de negócio através de EJBs. A plataforma J2EEdisponibiliza padrões para os containers Web e EJB. O Tomcat é um exemplo decontainer de software livre, onde os módulos Web podem ser publicados.
1.5.2.2 NET
Na plataforma Microsoft .NET, o servidor de aplicação não é visto como um elementoseparado. O sistema operacional Windows 2003 contém a infraestrutura necessária paraservir aplicações, como o IIS, COM+ e Framework .NET.
1.6 Navegadores
Um dos aspectos mais visados pelos usuários e desenvolvedores é a segurança dosnavegadores, devido ao crescimento e as inovações das técnicas de invasões e infecçõesque existem hoje em dia na internet.
Atualmente, os navegadores são “obrigados” a ter proteções contra scripts maliciosos, javascripts entre outros conteúdos que poderiam existir em sites que os mesmos acessam.
Atualmente o Mozilla Firefox é considerado o navegador mais seguro (principalmente emrelação ao Internet Explorer ), mas a Microsoft está lançando periodicamente atualizaçõesem seu Windows Update. Na área de segurança o Firefox possui um interruptor de scripts(caso venham a atrapalhar sua navegação ou caso sejam maliciosos) e uma proteçãocontra sites falsos que podem ocasionar em ataques do tipo phishing entre outros.
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
14/136
Web, HTML, CSS e JavaScript
14 2007 Alfamidia Prow LTDA.
1.6.1 Padronização e protocolos de acesso
Navegadores se comunicam com servidores Web usando o protocolo HTTP (HyperText
Transfer Protocol), que são por sua vez identificadas por uma URL (ex:http://www.alfamidia.com.br ). O protocolo HTTP permite aos navegadores tantorecuperar como submeter informações para um servidor de Internet. O formato dearquivo que uma página usa geralmente é o HTML, sendo identificado no protocoloHTTP através de um indicador do seu tipo de conteúdo (content type) MIME.
A maioria dos navegadores suporta uma grande variedade de formatos em adição aoHTML, tais como JPEG, GIF e PNG para imagens, e também podem geralmente serestendidos para suportar outros formatos através de plugins. Da mesma forma, muitosnavegadores suportam vários outros tipos de URLs com seus protocolos correspondentes,tais como ftp, gopher , https(uma versão encriptada via SSL do HTTP). A combinação dotipo de conteúdo e da URL do protocolo de transferência de arquivos permite que
desenvolvedores de páginas Web publiquem imagens, animações, sons e vídeo nasmesmas, ou tornem tais conteúdos acessíveis através dessas páginas.
1.6.2 HTTPS (HyperText Transfer Protocol Secure)
É uma implementação do protocolo HTTP sobre uma camada SSL (Secure SocketsLayer), criado pela Netscape Corporation e vem se tornando sinônimo de segurança paraaplicações que utilizam a internet para efetuarem negócios on-line. O SSL foi concebido primordialmente pela necessidade de se ter um mecanismo que possibilitasse o sigiloabsoluto dos dados e a garantia de autenticidade dos mesmos nas transações eletrônicason-line. Desde sua concepção, o protocolo SSL vem se tornando padrão de fato a cada
dia. As principais características do SSL são: Segurança em conexões cliente/servidor: o SSL garante o sigilo dos dados trocados
entre as partes envolvidas na conexão através do uso de criptografia simétrica. A fimde evitar que as mensagens, mesmo decifradas, sejam modificadas e com isso umataque de escuta ativa seja possível, o SSL adiciona à todas as mensagens um MAC(Message Authentication Code). Calculado a partir de funções de hash seguras, oMAC garante a integridade das mensagens trocadas. Além de sigilo e integridade, oSSL ainda provê a autenticação das partes envolvidas a fim de garantir e verificar aidentidade das mesmas. Neste processo, o SSL utiliza criptografia assimétrica ecertificados digitais (ex: todas as URLs que aparecem o https:// antes do endereço).
Independência de protocolo: o SSL roda sobre qualquer protocolo de transporte
confiável. Porém, a maioria das implementações são feitas para redes TCP/IP. Interoperabilidade: dado a sua especificação bem detalhada e o uso de algoritmos
criptográficos conhecidos, diferentes implementações do protocolo tem a garantia deinteragir entre si.
Extensibilidade: dado a necessidade, permitir que novos parâmetros e métodos decriptografia (assimétrica ou simétrica) sejam incorporados ao protocolo, sem que sejanecessária a criação de um novo protocolo ou a implementação inteira de uma nova biblioteca.
http://www.alfamidia.com.br/http://www.alfamidia.com.br/http://www.alfamidia.com.br/
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
15/136
Web, HTML, CSS e JavaScript
15 2007 Alfamidia Prow LTDA.
Eficiência: devido a demanda por recursos computacionais que este tipo de operaçãorequer, o protocolo dispõe da opção de armazenamento em cache de informaçõesreferentes a sessão, diminuindo desta forma o esforço computacional em sucessivas
conexões. Vantagens: O SSL preenche todos os critérios que o fazem aceitável para o uso nas
transmissões das mais sensíveis informações, como dados pessoais e números docartão de crédito. A aplicação pode optar entre utilizar todos ou somente uma partedesses critérios dependendo do tipo e natureza das transações que estão sendoefetuadas.
A criptografia é a arte de empregar certas regras em mensagens ou informações de formaa esconder seu verdadeiro conteúdo. A mensagem ou informação codificada pelo uso dacriptografia, que pode ser transmitida por meios de comunicação considerados inseguros, pois só o receptor, conhecedor das regras poderá reverter o processo e ler o documentooriginal.
Com o SSL, uma conexão é estabelecida onde todos os dados trafegam criptografados pela rede, sem que haja o risco de serem interceptados e decifrados por alguém. Paragarantir a integridade dos dados, é necessário um protocolo seguro para orientar aconexão, como por exemplo, o TCP/IP. O uso do SSL se disseminou por meio de suaimplementação nos EURZVHUV da Netscape, fornecendo aos usuários uma formasegura de acessar servidores ZHE, permitindo inclusive a execução de transaçõescomerciais. Sua versão mais recente é a 3.0.
Seu funcionamento ocorre por meio do sistema de criptografia de chaves públicas e privadas desenvolvido por Rivest, Shamir e Adleman, o RSA. O SSL é mais usado nos browsers, como Mozilla, Internet Explorer entre outros.
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
16/136
Web, HTML, CSS e JavaScript
16 2007 Alfamidia Prow LTDA.
Unidade 2
Introdução ao HTML eWeb Standards
2.1 A Linguagem HTML e a Internet
Um dos principais elementos que levaram a popularização da Internet foi a World WideWeb (teia de abrangência mundial), também conhecida como WWW. Trata-se de umanova forma dos usuários navegarem pelas informações e arquivos disponíveis nos várioscomputadores ligados a Internet. O modelo WWW é tratar todos os dados da Internet
como hipertexto, isto é, vinculações entre diferentes documentos, para permitir que asinformações sejam exploradas interativamente e não apenas de uma forma linear.
A principal linguagem que popularizou a Web, e que ainda é a linguagem mais utilizada éo HTML (Hypertext Markup Language), uma linguagem criada com o objetivo deformatar informações de um texto e definir os hiperlinks entre um texto e outro, ou seja,os pontos de vinculação entre documentos.
Hoje existem diversas ferramentas que permitem navegar na Internet e visualizar as páginas HTML. Estas ferramentas são popularmente conhecidas como navegadores oubrowsers. Da mesma forma, existem também inúmeros editores visuais, dos quais oAdobe Dreamweaver é o mais utilizado, que gravam arquivos no formato HTML.
2.2 As Limitações do HTML
A linguagem HTML originalmente tinha como propósito apenas definir a estrutura de umdocumento e os hiperlinks entre documentos. Assim, ela permitia especificar quandoiniciava e terminava um parágrafo, definir títulos, sub-títulos, listas numeradas, textos emitálico e negrito e outras características semelhantes.
Quase que imediatamente após seu surgimento, porém, novos recursos começaram a sercriados, principalmente voltados para a construção de layouts mais sofisticados. Nestemomento surgiram recursos para especificar imagens de fundo, alinhar elementos emtabelas, posicionar imagens, entre outros. Muitas destas novidades eram iniciativa dasempresas que desenvolviam os principais navegadores utilizados na internet, o que muitas
vezes obrigava o Web Designer a criar páginas diferentes para cada navegador, paraaproveitar ao máximo os novos recursos recém lançados.
Dois problemas tiveram sua origem derivada deste contexto: a falta de uma padronização, pois diferentes empresas criavam novos recursos próprios para o HTML, e a mistura entrelayout e conteúdo. Ambos, problemas endereçados pelos Web Standards, como será vistoao longo deste curso.
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
17/136
Web, HTML, CSS e JavaScript
17 2007 Alfamidia Prow LTDA.
2.3 Os Web Standards
O W3C (World Wide Web Consortium), juntamente com outros grupos e organismosreguladores, estabeleceu tecnologias para criação e interpretação de conteúdo para a Web,visando resolver de forma definitiva os problemas mencionados anteriormente.
Estas tecnologias, a que chamamos Web Standards, têm como objetivo principal fazercom que o conteúdo desenvolvido dentro destes padrões possa ser visualizadoindependente do equipamento (computador, PDA, celular), do tipo do navegador (IE,Mozilla, Opera, Netscape, etc) e da forma (banda de conexão) com que o usuário estiveracessando a Internet. É um conceito de acessibilidade estendido.
Um dos objetivos dos Web Standards é a separação do conteúdo, definido através delinguagens estruturais como XHTML e XML, e do layout, definido através de linguagensde apresentação, em particular o CSS (Cascading Style Sheet). Outros Web Standards,como o DOM (Document Object Model) e o ECMAScript 262 (versão padrão doJavaScript) são voltados para a programação em páginas Web.
2.4 W3C
O que é o W3C?
O World Wide Web Consortium (W3C) é um consorcio de indústrias dedicado em levar aWeb ao seu potencial máximo. Fundada em 1994 por Tim Berners-Lee (invertor daWeb), o W3C tem mais de 450 organizações associadas, incluindo Microsoft, AmericaOnline (incorporou a Netscape Communications), Apple ,Adobe, Macromedia, SunMicrosystems, e uma variedade de outras empresas fabricantes de hardware e software,
provedores de conteúdo, instituições acadêmicas e empresas de telecomunicações. Oconsórcio tem o apoio (estrutura física e intelectual) de três instituições de pesquisa: MITnos EUA, INRIA na Europa e Keio University no Japão.
Qual a sua função?
O W3C desenvolve especificações abertas (padrões) para aumentar a interoperabilidadede produtos relacionados com a Web. As recomendações do W3C são desenvolvidas porgrupos de trabalhos originados das organizações membros e experts convidados.
2.5 Importância dos Web Standards
Conceber e construir sites usando estes padrões simplifica o processo e reduz os custos de produção, obtendo-se ao mesmo tempo sites acessíveis a um maior número de pessoas edispositivos com acesso a Internet. Os sites desenvolvidos desta forma continuarão afuncionar corretamente à medida que os browsers tradicionais evoluem e novosdispositivos de Internet surgem no mercado.
"Web standards têm o objetivo de ser uma base comum... um fundamento para a World
Wide Web para que navegadores e outros programas compreendam o mesmovocabulário básico".
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
18/136
Web, HTML, CSS e JavaScript
18 2007 Alfamidia Prow LTDA.
Eric Meyer – Autor do livro Cascading Style Sheets: The Definitive Guide.
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
19/136
Web, HTML, CSS e JavaScript
19 2007 Alfamidia Prow LTDA.
Unidade 3
HTML – Recursos Básicos
3.1 Por que Entender o HTML?
O HTML é uma linguagem de marcação utilizada para criar e formatar páginas oudocumentos Web. Com o tempo passou a ser utilizado para descrever a estrutura dosdocumentos. O HTML permite criar documentos com componentes como cabeçalhos(h1,h2,....), parágrafos (p), quebras de linha (br), tabelas (table, tr, td, th), listas (li, ul, ol),imagens (img) e links (a). Uma tecnologia complementar foi criada, o Cascading StyleSheets (CSS), responsável pela apresentação (formatação visual) dos documentos.
Novas especificações HTML não serão mais definidas. HTML 4.1 é o último padrãoHTML, e agora substituído pelo XHTML 1.0. No entanto, o XHTML não ésubstancialmente diferente do HTML, sendo na verdade um subconjunto do HTML quesegue as regras do XML. Assim sendo, ao dominarmos o HTML, estaremos tambémadquirindo os conhecimentos necessários para desenvolver também em XHTML.
3.2 Conceitos Básicos de HTML
Quando um browser exibe uma página HTML, ele lê um arquivo texto (que pode seraberto em qualquer editor de texto) com o conteúdo do site e marcações, chamadas tags,que informam os elementos da página e sua formatação.
As marcações do HTML - tags - consistem do sinal () ("maior que").
De um modo geral, as tags aparecem em pares, por exemplo, Cabeçalho. Osímbolo que termina uma determinada marcação é igual àquele que a inicia, antecedido por uma barra (/) e precedido pelo texto referente.
No exemplo, avisa ao cliente Web para iniciar a formatação do primeiro nível decabeçalho e avisa que o cabeçalho acabou.
Há tags que não exigem o fechamento, funcionando – via de regra – com ou sem adefinição de uma tag de fechamento, como é o caso da tag de definição de parágrafo
.O padrão mais recente de uso do HTML, entretanto, recomenda que esta tag seja sempre
fechada, para termos um padrão mais próximo do utilizado em XHTML, como seráexplicado nas unidades finais desta apostila.
Outras tags efetivamente não tem marcações de final, como a tag
que apenasdefine uma linha em branco, e a tag que exibe uma linha divisória.Este tutorial tem por objetivo mostrar como criar e exibir páginas HTML. Tais páginassão criadas a partir de arquivos texto ASCII, contendo caracteres de marcação dalinguagem HTML. Uma vez criados, estes arquivos são salvos com uma extensão .html ou .htm
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
20/136
Web, HTML, CSS e JavaScript
20 2007 Alfamidia Prow LTDA.
3.3 Tags Básicas
A seguir apresentamos as tags básicas de uma página HTML, que são suficientes paracriar uma página mínima. Nas lições seguintes apresentaremos diretamente exercíciosque incluirão novas tags que permitirão controlar diversas características da página.
Estas e todas as futuras tags são mostradas dentro de uma estrutura de tabela, parafacilitar sua consulta, e são repetidas em anexo ao final deste material, de forma a facilitarseu uso no futuro como material de referência.
TAG O QUE FAZ
Insere comentários nas páginas
Toda página HTML deve estar entre o tag de início de umdocumento HTML e o tag de fim deste documento.
Envolvem a seção de cabeçalho do documento, no qual sãoespecificadas informações que não são exibidas na página,como título do documento e informações sobre o assunto dapágina.
Indica o título do documento para o Browser. Geralmente osBrowsers apresentam este título na barra de título da suaJanela no Windows
Envolvem a seção de corpo do documento. Aqui fica oconteúdo principal da Home Page. Opcionalmente podemosindicar um arquivo de imagem para formar o fundo, usandoa opção: BACKGROUND.
Insere uma quebra de linha3.3.1 Exemplo de HTML com Tags Básicas
Todo documento HTML deve ser identificado como HTML ( ... ), ter umaárea de cabeçalho ( ... ) com o nome do documento ( ), umtítulo principal e uma área definida como corpo ( ... ) do conteúdo do
documento. Como o exemplo a seguir, basico1.html:
Minha primeira página
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
21/136
Web, HTML, CSS e JavaScript
21 2007 Alfamidia Prow LTDA.
Minha Primeira Página
3.3.2 Familiarizando-se com o HTML
Seguindo as orientações do instrutor, construa agora a sua primeira página HTML. Copie
ou crie um texto, utilizando o Dreamweaver, o bloco de notas do Windows ou qualquereditor de texto. Salve e abra pelo browser que estiver instalado no computador.
Apenas com os códigos acima apresentados, é fácil perceber limitações. Não há aindacomo definir títulos, salientar palavras ou frases ou fazer qualquer tipo de estruturação dainformação, exceto quebrar os parágrafos utilizando a tag
.Para começar a melhorar sua primeira página, observe a seção seguinte. Acompanhe osexemplos mostrados com o instrutor e desenvolva novas páginas conforme orientação.
3.4 Formatação de Textos
Mesmo em uma página apenas com textos, é fundamental podermos estruturar ainformação, de forma a deixá-la mais legível. Para tanto, novas tags se fazem necessárias,como as mostradas na próxima tabela.
TAG O QUE FAZ
Marca um título. Sendo que “n” representa um valor quepode ser de 1 a 6, o tamanho muda de forma decrescente,ou seja, o número 1 é o maior tamanho do título.
Insere uma linha horizontal
Marca um parágrafo
Centraliza todo o conteúdo entre as tags e
Coloca o texto em negrito
Coloca o texto em itálico
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
22/136
Web, HTML, CSS e JavaScript
22 2007 Alfamidia Prow LTDA.
Coloca o texto sublinhado
Coloca o texto em fonte monoespaçada. (fonteCourier,como máquina de escrever)
Modifica a formatação do texto.
Atributos:
Size = define o tamanho da letra. Ex: Texto
Face = define o estilo da letra. Ex: Texto
Color = define a cor da letra. Ex:Texto
Marca um trecho formatado com fonte monoespaçada. Aformatação com espaços e entrada de parágrafos érespeitada.
Modifica a formatação padrão do texto.
Ex:
3.4.1 Exemplo de Títulos e Subtítulos
Na listagem abaixo faremos um novo exemplo e utilizaremos algumas das novas tags.Digite a listagem abaixo e salve com o nome basico2.html.
Melhorando minha home page
Este é o título Principal
Este é o título SecundárioEstou adorando criar páginas
Este é o 1º primeiro paragráfo
Esta é 2ª linha do 1º paragráfoCom este recurso inicio um paragráfo
E com este recurso quebro uma linha -
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
23/136
Web, HTML, CSS e JavaScript
23 2007 Alfamidia Prow LTDA.
Veja o resultado no browser .
3.4.2 Exemplo de Alinhamentos
O alinhamento padrão que vem configurado nos navegadores é a esquerda, porém emmuitos casos podemos querer que todo ou parte do texto tenha outros alinhamentos Paraentender isto, digite a listagem abaixo, e salve como basico3.html, e acompanhe oconceito de tag que marcam o alinhamento dos títulos e parágrafos nas páginas.
Tags para Alinhamentos
Título Centralizado
Título À Direita
Título À Esquerda
Parágrafo ao Centro
Parágrafo à direita
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
24/136
Web, HTML, CSS e JavaScript
24 2007 Alfamidia Prow LTDA.
Paragráfo à esquerda
Este é um texto justificado. Na linguagem HTML temos vários tipos dealinhamentos que você poderá aplicar em sua página. Nesta parte do livro,veremos como
alinhar linhas, parágrafos e cabeçalhos.
Texto com mais margem
Tem com mais margem ainda
Para ver o resultado deste exemplo abra o browser :
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
25/136
Web, HTML, CSS e JavaScript
25 2007 Alfamidia Prow LTDA.
3.4.3 Exemplo de Formatação de Textos
Neste exemplo trabalharemos com a formatação das letras bem como cor, tamanho de
fonte e estilo. Para entender isto, digite a listagem abaixo, e salve como basico4.html,
Formatando Estilos
Mudando o Estilo dos Caracteres
Texto em Negrito
Texto em Itálico
Texto sublinhado
Texto Monoespaçado
Texto em Vermelho
Texto em Tamanho 5
Texto com a letra VerdanaOlá Mundo!!!
Você poderá os atributos para cada tipo de letra!Olá Mundo
Estamos progredindo
no curso de HTML.
Este tag permite que todos os espaços feitos no código fonte
sejam respeitados. Certo?
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
26/136
Web, HTML, CSS e JavaScript
26 2007 Alfamidia Prow LTDA.
3.5 Cores em HTMLA definição de cores já foi vista como atributo da tag . Entretanto, paraefetivamente utilizarmos as cores de forma eficiente no código HTML e necessárioentender como as mesmas são especificadas na linguagem.
O uso de cores em HTML pode ser feito através de duas formas básicas, utilizando onome em inglês de algumas cores específicas ou fazendo uso do código hexadecimalRGB. O segundo método é mais recomendável pois permite a definição de todas as cores possíveis.
Exemplos de uso de cores em fonte:
texto em pretotexto em branco
texto em vermelho
Nos exemplos acima, valores diferentes de código permitem a definição de coresdiferentes. É importante entendermos como estas cores são formadas para podermosmanipular estes códigos, porém na prática geralmente normalmente será utilizado algum
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
27/136
Web, HTML, CSS e JavaScript
27 2007 Alfamidia Prow LTDA.
editor visual para escolher a cor desejada. Abaixo vamos fazer alguns exercícios paraentendermos melhor o uso de cores, utilizando as tags que já vimos anteriormente.
3.5.1 Utilizando o Vermelho
Digite o código abaixo como cores1.html
vermelhos
vermelho escuro, apenas 51 de vermelho e 0 de verde e azul
vermelho menos escurovermelhos cada vez mais claros
vermelho claro
o vermelho mais claro e puro possível
Observe o resultado em seu browser para poder conferir as tonalidades e note que nãoforam utilizadas as cores verde e azul. Obviamente podemos criar vários tons devermelho com parcelas também das outras cores.
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
28/136
Web, HTML, CSS e JavaScript
28 2007 Alfamidia Prow LTDA.
3.5.2 Utilizando o Vermelho com Verde
O exemplo abaixo, cores2.html, utiliza cores misturando tons vermelhos e verde. Abaixo,
uma imagem mostra a tela resultante, mas é recomendável visualizar no browser paraobservar as cores em si.
vermelhos e verdes
laranja: vermelho com algum verde
amarelo (vermelho + verde)
amarelo esverdeado
verde puroObserve a imagem abaixo em seu browser para poder conferir as cores:
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
29/136
Web, HTML, CSS e JavaScript
29 2007 Alfamidia Prow LTDA.
Unidade 4
Incluindo Imagens em uma Página
4.1 Fazendo Referência a Outros Documentos
Como foi mostrado anteriormente, uma página HTML é apenas uma texto com algumastags que definem características da página. Entretanto, quando observamos uma páginaHTML normalmente visualizamos elementos gráficos que não podem ser definidos destaforma, como, por exemplo, fotos.
A forma que o HTML trata esta questão é muito simples: todas as imagens da página – assim como muitos outros elementos que veremos ao longo deste curso – não estão no
mesmo arquivo da página HTML, mas sim em outros arquivos.Antes de analisarmos a tag que define a utilização de imagens, vamos primeiro entenderalgumas formas de referência externa que podemos encontrar em documentos HTML
4.1.1 Referência Relativa
Vamos imaginar que os arquivos que desejamos referenciar estejam no mesmo diretóriode nossa página HTML. Neste caso, a referência pode ser feita simplesmenteespecificando o nome do arquivo em questão. Observe a parte em negrito do exemploabaixo (os outros elementos serão estudados em seguida):
Também podemos ter uma imagem ou outro arquivo referenciado que esteja em outrodiretório, acima ou abaixo do diretório em que está nossa página HTML, como nosexemplos abaixo:
4.1.2 Referência Absoluta
Em alguns casos, pode não ser interessante mantermos apenas referências relativas, emespecial se nosso site for um pouco mais complexo. Podemos ter muitas páginas quedesejamos colocar em diferentes diretórios que utilizem uma mesma imagem. Nestescasos, muitas vezes é mais interessante criarmos um diretório padrão que sejareferenciado por todas as páginas da mesma forma, independente da localização de cada página. O exemplo abaixo mostra este caso, fazendo uso de um diretório imagens na raizdo site:
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
30/136
Web, HTML, CSS e JavaScript
30 2007 Alfamidia Prow LTDA.
4.1.3 Referência Externa
Poderemos ter ainda situações em que temos sites em diferentes domínios fazendo
referência ao mesmo arquivo, ou podemos querer utilizar, por exemplo, uma imagem queesteja localizada em outro site da Internet. Nestes casos fazemos uma referência externaespecificando a URL completa do site:
Obs: nestes casos nos podemos nos abster de incluir a especificação http:// , de outromodo o browser não tem como saber que não se trata de um diretório local.
4.2 Incluindo Imagens com a Tag IMG
Uma vez entendido o conceito de fazer referências a outros arquivos, incluir imagens setornou bastante simples, basta conhecermos algumas características da tag imagem,conforme apresentado na tabela abaixo.
TAG O QUE FAZ
Insere uma imagem
Atributos
src=indica o nome da imagem a ser carregado.
align=middle centraliza o base do texto com o centro daimagem
align=left faz a imagem flutuar a esquerda enquanto o textocircunda imagem à direita.
align=top alinha o texto no topo
align=right faz a imagem flutuar a direita enquanto o textocircunda imagem à esquerda.
alt=”n” indica o texto para ser exibido quando o navegadornão exibe a imagem. Sendo que n é o título que identifiquea imagem.
Exemplo:
4.2.1 Incluindo Imagens – Exemplo 1
Neste exercício exercitaremos os tags que permitem a inserção de imagens em uma página. Utilizaremos uma imagem do próprio site da Alfamídia. Crie o arquivo comoimagem1.html
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
31/136
Web, HTML, CSS e JavaScript
31 2007 Alfamidia Prow LTDA.
Imagens
Agora estamos trabalhando com imagens
O comando acima inseriu uma imagem do site da Alfamídia nesta página.4.2.2 Alinhando Imagens – Exemplo2
Neste exemplo trabalharemos com o alinhamento da imagem e do texto. Para entenderisto, digite a listagem a seguir, e salve como imagens2.html
Imagens
Note neste exemplo que a imagem está entre o texto
Neste exemplo a imagem está à esquerda e o texto está no topo.
Observe que quando o texto continua na l inha seguinte ele segue para abaixo da imagem
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
32/136
Web, HTML, CSS e JavaScript
32 2007 Alfamidia Prow LTDA.
A imagem está à esquerda e o texto no centro, porém a
situação da quebra de linha persiste, com o texto seguindo, na linha seguinte, para
abaixo da imagem.
Neste exemplo a imagem ficou alinhada à esquerda,
permitindo que o texto ficasse todo à direita ao redor da imagem. Utilize este recurso
toda vez que desejar que o texto fique ao lado da imagem
Neste exemplo a imagem ficou alinhada à direita,
permitindo que o texto ficasse todo à esquerda ao redor da imagem.
Acompanhe com o professor como cada comando de alinhamento posiciona de formadiferente o texto e a imagem.
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
33/136
Web, HTML, CSS e JavaScript
33 2007 Alfamidia Prow LTDA.
4.3 Incluindo Imagens no Fundo da Página – Tag BODY
É muito comum encontrarmos páginas com uma imagem ou padronagem como fundo.Para entendermos como isto é feito, teremos que utilizar um parâmetro de uma tag vistaanteriormente, a tag .
Envolvem a seção de corpo do documento. Aqui fica oconteúdo principal da Home Page. Opcionalmente podemosindicar um arquivo de imagem para formar o fundo, usandoa opção: BACKGROUND.
Quando definimos uma imagem para o fundo de uma página, se a página mostrada formaior que a imagem, ela será replicada na horizontal, vertical ou em ambas as dimensões.
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
34/136
Web, HTML, CSS e JavaScript
34 2007 Alfamidia Prow LTDA.
Esta característica pode inclusive ser utilizada com um recurso de layout, permitindo, porexemplo, a repetição de um padrão.
4.3.1 Fundo com Padronagem
No exemplo a seguir, imagem3.html, uma padronagem é utilizada como fundo. Em geral, para um resultado esteticamente interessante, são utilizadas padronagens muito maissuaves, ou imagens maiores que a tela.
Exemplo com Fundo
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
35/136
Web, HTML, CSS e JavaScript
35 2007 Alfamidia Prow LTDA.
Unidade 5
Criando Links
5.1 Hiperlinks
Hiperlink é o elemento fundamental da navegação pela internet. O conceito é simples:selecionando-se determinado elemento em uma página Web, somos levados para umanova página.
Para criarmos um site inteiro precisamos fazer uso destes links para estabelecer a ligaçãoentre as páginas de nosso site, de forma que, através de um único clique sobre a frase ouimagem, navegarmos para algum lugar no site ou na WEB.
Como padrão em nosso curso, observe a tag utilizada para a definição dos hiperlinks etrabalhe junto com o instrutor nos exemplos:
TAG O QUE FAZ
Define um link
Atributos
Href = indica o endereço do link.
Target = define onde o link será aberto:
_blank define que será aberta uma nova janela. _top define que irá abrir na mesma janela.
_self define que será aberto no mesmo Frame.
_parent define que irá abrir a em um Frame Pai.
5.1.1 Página com Links – Exemplo 1
Confira a página link1.html:
Estudando links
Exemplo de links internos
Exemplo1
Exemplo2
Exemplo de links externos
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
36/136
Web, HTML, CSS e JavaScript
36 2007 Alfamidia Prow LTDA.
Visite o site da alfamídia
Site da AdobeVocê também pode usar imagens como links, mas é recomendável utilizar borda=0 para
não aparecer uma moldura de link.. Observe que neste exemplo o link abre em uma nova janela
Veja o resultado na figura a seguir:
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
37/136
Web, HTML, CSS e JavaScript
37 2007 Alfamidia Prow LTDA.
Unidade 6
Criando TABELAS
6.1 Tabelas e Layout de Páginas
O recurso de tabelas foi originalmente criado, no HTML, com o objetivo de organizarinformações e exibir dados na forma de planilhas. Este ainda é um dos principais usos de planilhas em HTML, e será bastante explorado nesta unidade.
Entretanto, com este recurso também foi possível exercer um controle muito maior sobreo layout de uma página HTML. Utilizando uma série de técnicas envolvendo imagens de1 pixel de altura, planilhas com bordas invisíveis e formas inteligentes de posicionar
imagens, é possível criar layouts bastante sofisticados.Esta técnica está caindo em desuso, porém, pois com o HTML 4.1 e o CSS é possívelcontrolar de forma bastante precisa a diagramação de um site sem ter que utilizar astabelas como um subterfúgio. Nas próximas unidades serão apresentadas técnicas dediagramação sem o uso de tabelas (tableless design), enquanto que nesta unidade o foco éno uso de tabelas para a exibição de informações em planilhas.
6.2 Construindo uma Tabela
Tabelas são definidas, em HTML, com a definição das linhas e, dentro das linhas, das
células de cada coluna. Com apenas 4 tags, vistas na tabela seguinte, é possível definirdiversos tipos de tabelas:
TAG O QUE FAZ
Define uma tabela. Antes e depois de uma tabela, acontecesempre uma quebra de linha.
Atributos
Border: define espessura da borda da tabela
Cellspacing: espaço entre cada célula
Cellpadding: distância entre borda e conteúdo de cadacélula.
Width: largura da tabela, em pixels ou valor percentual
Define uma linha normal da tabela (table row).
Atributos
Align: valores left , right e center definem o alinhamento
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
38/136
Web, HTML, CSS e JavaScript
38 2007 Alfamidia Prow LTDA.
horizontal.
Valign: valores top, middle e bottom definem o alinhamentovertical.
Esta é a marcação que define cada célula de uma tabela. As células de uma tabela devem sempre aparecer entre asmarcações de linhas ( e ). Como padrão, o textonas células é alinhado a esquerda.
Atributos
Align: valores left , right e center definem o alinhamentohorizontal.
Valign: valores top, middle e bottom definem o alinhamentovertical.
Nowrap: não há quebra de linhas dentro das células
Colspan: número de colunas que a célula irá ocupar
Rowspan: número de linhas que a célula irá ocupar
Width: largura da célula, em pixels ou valor percentual
Desta forma são definidos os títulos de uma tabela. Estespodem ser posicionados em qualquer célula. A diferençaentre a marcação de célula e título de célula é que o títuloaparece em negrito.
Atributos: os mesmos apresentados acima, para td
6.2.1 Exemplo de uma Tabela Simples
O exemplo tabelas1.html abaixo mostra uma tabela utilizando as tags apresentadas. Afigura em seqüência apresenta a imagem desta página:
Itens/Mês
JaneiroFevereiroMarço
Usuarios8093120
Linhas335
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
39/136
Web, HTML, CSS e JavaScript
39 2007 Alfamidia Prow LTDA.
Como foi dito, a tabela é construída linha a linha. Observe os comentários no códigoacima.
6.2.2 Tabelas Mais Sofisticadas
As marcações das tabelas podem apresentar resultados diferentes, se acompanhadas dealguns atributos mostrados na tabela anterior. Vamos ver os principais em exemplos práticos:
Tabela2.html – exemplo de alinhamento horizontal (align)
Primeira célulaSegunda célulaTerceira célula
centro
esquerda
direita
Tabela3.html – alinhamento vertical (valign)
Teste para alinhamento
com relação a bordas
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
40/136
Web, HTML, CSS e JavaScript
40 2007 Alfamidia Prow LTDA.
inferior e superior
TOP
MIDDLEBOTTOM
Tabela4.html – Célula em várias colunas (colspan)
3colunas
normal
normal
col 1
col 2col3
col 4
col 5
Tabela5.html – Célula em várias linhas (rowspan)
3 linhas
col 2
col 3
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
41/136
Web, HTML, CSS e JavaScript
41 2007 Alfamidia Prow LTDA.
col4
col5
col 2
col 3
col4
col 5
col 2
col 3
col4
col 5
Tabela6.html –
borda maior (border)
teste1 teste2 teste3
teste4 teste5 teste6
Tabela7.html – Espaço entre células (cellspacing)
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
42/136
Web, HTML, CSS e JavaScript
42 2007 Alfamidia Prow LTDA.
teste1 teste2 teste3
teste4 teste5 teste6
Tabela 8.html – Espaçamento interno a célula (cellpadding)
teste1 teste2 teste3
teste4 teste5 teste6
Tabela9.html – largura da tabela em percentuais (width)
segunda
terça
quarta
quinta
sexta
sábado
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
43/136
Web, HTML, CSS e JavaScript
43 2007 Alfamidia Prow LTDA.
Tabela10.html – espaçamento em célula (width)
segunda
terça
quarta
quintasexta
sábado
6.2.3 Construindo uma Tabela mais Sofisticada
Tente reproduzir a tabela mostrada na figura abaixo utilizando códigos HTML. Observeum cuidado especial com os detalhes de alinhamento.
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
44/136
Web, HTML, CSS e JavaScript
44 2007 Alfamidia Prow LTDA.
6.2.4 Integrando Recursos em Tabelas
Crie agora uma tabela, utilizando sua imaginação, fazendo uso do maior número possívelde recursos vistos anteriormente. Inclua imagens, links para outras páginas e asformatações de textos vistos anteriormente.
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
45/136
Web, HTML, CSS e JavaScript
45 2007 Alfamidia Prow LTDA.
Unidade 7
Formulários
7.1 Introdução a Formulários
Até o presente momento vimos diversos recursos do HTML para criar uma página,definindo seu layout e conteúdo. Neste capítulo apresentaremos a forma principal deobter dados do usuário e poder assim interagir com ele.
O elemento FORM, da linguagem HTML, é o responsável por tal interação. Ele provêuma maneira agradável e familiar para coletar dados do usuário através da criação deformulários com janelas de entrada de textos, botões e outros elementos de entrada de
dados.Os dados que o usuário preenche em uma página HTML são enviados para o servidor, para serem então processados por um programa, por exemplo um CGI em linguagemPERL ou um página de acesso a banco de dados em ASP ou PHP. Também é possível processar localmente um campo de formulário utilizando um script em JavaScript ouVBScript, o que muitas vezes é feito para validar um campo antes do mesmo ser enviadoao servidor.
Nesta lição iremos nos concentrar em aprender todos os tags HTML de criação deformulários e a diferença entre eles.
7.2 Criando um Formulário
Observe na tabela a seguir, os principais tags utilizados na criação de formulários, eobserve os exercícios seguintes:
TAG O QUE FAZ
Define um formulário
Atributos
method: get, que envia as informações na própria URL, ou
post, que envia de forma não visível para o usuárioaction: url que será chamada, a priori um aplicativo capazde tratar os dados enviados pelo formulário (PHP, ASP,JSP).
Define uma entrada de dados
Atributos
Type: text, campo tipo texto; password, para senhas;
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
46/136
Web, HTML, CSS e JavaScript
46 2007 Alfamidia Prow LTDA.
hidden, não aparece para o usuário; checkbox, paramarcar; radio, para escolher entre um conjunto de opções.submit cria um botão para enviar os dados e reset um
botão para limpar o formulário.Name: nome do campo
Value: valor pré-definido para o campo
Size: tamanho do campo a ser exibido
Maxlength: tamanho máximo de caracteres
Checked: para campos checkbox e radio, define comomarcado
Define uma entrada de texto com várias linhas
Atributos
Rows: número de linhas
Cols: número de colunas
Define uma lista de opções para selecionar
Atributos
Name: nome do campo
Multiple: permite selecionar vários campos da lista
Site: define o número de linhas a serem exibidas
Item de uma lista aberta
Atributos
Value: valor do campo se este item for selecionado
Selected: indica que este valor está selecionado
7.3 Um Primeiro Formulário
O exemplo a seguir mostra um formulário simples, form1.html, que apenas pergunta onome da pessoa. Ele ainda não tem um botão para confirmar, porém ao pressionarENTER o formulário será acionado.
Form1.html – utlizando um campo de formulário
Qual o seu primeiro nome?
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
47/136
Web, HTML, CSS e JavaScript
47 2007 Alfamidia Prow LTDA.
Observe que o formulário não tem um comando action, o que significa que, ao seracionado, o formulário irá chamar a própria página. Digite seu nome, pressione ENTER eobserve a URL no topo da página mudar para incluir o parâmetro do formulário.
Experimente substituir o método de envio para POST.
7.4 Formulários com Diferentes Tipos do INPUT
Vamos agora estudar vários exemplos de pequenos formulários, cada um apresentandoum recurso diferente. Teste cada um deles para se familiarizar com a tag apresentada:
Form2.html – utilizando tipo password
Informe sua senha de acesso (8 caracteres):
Obs: neste exemplo não faz sentido utilizarmos o método get, pois a função do tipo password perderia o sentido.
Form3.html – Botões de limpar e enviar formulário (submit e reset)
Qual o seu primeiro nome?
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
48/136
Web, HTML, CSS e JavaScript
48 2007 Alfamidia Prow LTDA.
Form4.html – Campos para marcar opções (checkbox)
Sim, eu desejo receber o boletim de notícias.
Sim, eu gostaria de receber mais informações turísticas.
Form5.html – campos de opção (radio)
Suas preferências na viagem:
Classe do bilhete:
econômica
executivaprimeira
Localização:
área fumante
área não fumante
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
49/136
Web, HTML, CSS e JavaScript
49 2007 Alfamidia Prow LTDA.
Obs: neste exemplo os dois grupos de botões tem o valor “name” diferente. Se fosse omesmo, só poderia ser selecionada uma entre todas as cinco opções.
7.5 Entrada de várias linhas de texto - TEXTAREA
Observe o exemplo a seguir. Se você deseja que um texto seja exibido no campo textualao abrir o formulário, simplesmente coloque este texto entre as marcações de início e fimda TEXTAREA. É recomendável utilizar o método post para este tipo de campo, poisexiste uma limitação para o máximo de informações que podem ser transmitidas atravésdo método get.
Form6.hrml – Texto em várias linhas
Por favor, escreva aqui suas sugestões, dúvidas e críticas:
gostaria de obter mais informações sobre
este servidor. grato.
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
50/136
Web, HTML, CSS e JavaScript
50 2007 Alfamidia Prow LTDA.
7.6 Menus com opções - SELECT
A marcação SELECT segue a mesma convencão de TEXTAREA. Ou seja, as opções demenu ficam entre a marcação de início e a de fim . Observe osdois exemplos a seguir:
Form7.html – Menu de opções
Onde você pretende fazer turismo nas férias?
fortaleza
Florianópolis ou Porto alegre
Rio de janeiro
BrasíliaManaus
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
51/136
Web, HTML, CSS e JavaScript
51 2007 Alfamidia Prow LTDA.
Form8.html – Opção com múltiplas escolhas
Onde você pretende fazer turismo nas férias?
fortaleza
Florianópolis ou Porto alegre
Rio de janeiro
Brasília
Manaus
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
52/136
Web, HTML, CSS e JavaScript
52 2007 Alfamidia Prow LTDA.
Unidade 8
Introdução a Estilos CSS
8.1 O CSS
O CSS (Cascading Style Sheets ou Folhas de Estilo em Cascata) é uma linguagem deformatação proposta pelo W3C. Visa remover a formatação dos documentos (X)HTML,separando conteúdo e formatação.
A especificação inicial, chamada CSS1, tornou-se uma recomendação do W3C no finalde 1996 e define praticamente todos estilos de apresentação utilizados hoje em dia. Asegunda versão da especificação, chamada CSS2, foi aprovada em 1998 e acrescentou
vários estilos novos, principalmente na área de posicionamento e tabelas. Uma novaversão está em desenvolvimento e espera-se que seja aprovada em um futuro próximo.
Todos os browser atuais, o Internet Explorer 6, Netscape Navigator 7, Mozilla Firefox 1,Opera 7 e Safari suportam o CSS. Entretanto o suporte ao CSS Nível 2 foi implementadoem níveis diferentes, o que torna a adoção dos conceitos de posicionamento via CSS, ouTableless, como é conhecido, ainda um pouco complicado, necessitando muitas vezes detruques de correção, conhecido como CSS Hacks.
Algumas considerações sobre CSS:
Os estilos definem para o browser como devem ser exibidos os elementos do(X)HTML.
Os estilos são geralmente definidos em folhas de estilo.
O CSS foi implementado na versão HTML 4.0 para resolver o problema deseparação entre conteúdo e formatação.
Os estilos quando armazenados em folhas de estilo externas (arquivos .css) ecompartilhadas entre documentos do mesmo website, poupam muito trabalho esimplificam enormemente a manutenção.
Definições de estilo múltiplas serão refletidas em cascata em uma definiçãoresultante final.
8.2 Benefícios em Utilizar CSS
Utilizar CSS além de ser essencial para o XHTML para garantir a separação entreconteúdo e formatação, possibilita inúmeros benefícios a desenvolvedores e usuários:
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
53/136
Web, HTML, CSS e JavaScript
53 2007 Alfamidia Prow LTDA.
Produtividade aumentada.
Facilidade em criar sites com identidade visual unificada e coerente.
Facilidade em fazer mudanças em todo o site – basta alterar um arquivo CSSinvés de mudar todas as páginas HTML.
Arquivos mais leves => download mais rápido => experiência de usuáriomelhorada.
Menos código na página => mais fácil codificar.
Permitir que visitantes alterem suas preferências definindo estilosdinamicamente.
Mais acessível para uma ampla variedade de aparelhos.
Mais controle sobre o código - interpretação do código na ordem correta para osleitores de tela.
Disponibiliza versões para impressão sem duplicação de conteúdo, somentealternando o CSS.
Permite formatar elementos do HTML como formulários e barras de rolagem,impossível via atributos HTML.
Permite controlar aspectos visuais como tipo e cor de borda, posicionamento,
visibilidade e margens – propriedades inexistentes no HTML.
8.3 CSS para Separar Conteúdo da Apresentação
Uma das metas ao se utilizar os conceitos do Web Standards é remover toda aapresentação do código (X)HTML, deixando-o limpo e semanticamente correto.
Enquanto o (X)HTML define a estrutura, O CSS fica responsável pela formatação visuale posicionamento de elementos dentro de uma página Web.
Utilizando CSS, um desenvolvedor pode definir elementos da apresentação (o layout,fonts, cores, bordas, etc), independentemente da marcação do documento Web. Os estilos
podem (e devem, na maioria dos casos) serem definidos em um documento separado comextensão .css e compartilhados entre todos ou um grupo de documentos relacionados domesmo website. Desta forma, alterar ou implementar novos estilos é tarefa fácil, bastando para isso alterar somente um arquivo do projeto, já que ele está referenciado entrediversos documentos, sendo renderizado dinamicamente na medida que o browsercarrega o arquivo de definições ou a folha de estilos externa (.css).
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
54/136
Web, HTML, CSS e JavaScript
54 2007 Alfamidia Prow LTDA.
Ao separar formatação do conteúdo, você está tornando seu código semanticamentecorreto. Ou seja, não utilizando marcação de conteúdo (HTML) para formatação (usoincorreto).
Outra vantagem na separação é a possibilidade de tornar disponível o mesmo conteúdo para múltiplos devices (aparelhos) sem necessidade de duplicar o conteúdo, alterandosomente a formatação (CSS). Isto inclusive pode ser feito de forma dinâmica ouutilizando linguagem script (Javascript, por exemplo). Entre os devices que suportamconteúdo Web podemos citar:
Browsers.
Impressoras.
PDAs (Personal Digital Assistants).
Telefones Celulares.
Equipamentos wireless.
Para obter uma demonstração do que pode ser conseguido visualmente por meio de umdesign baseado em CSS, acesse o site Zen Garden, onde diferentes desenvolvedorescriaram para o mesmo conteúdo (documento HTML), diferentes arquivos CSS,resultando em documentos com o design 100% diferentes entre si.Vale a pena conferir! http://www.csszengarden.com/tr/portuguese/
8.4 Páginas Com Semântica Correta
Uma marcação semanticamente correta utiliza elementos HTML para o seu objetivodefinido. Um HTML bem estruturado tem significado semântico para um amplo númerode User Agents (navegadores sem folhas de estilo, navegadores baseados em texto,PDAs, sites de busca, etc.).
Utilizar código semanticamente correto é uma forma de organizar e estruturar ainformação na Web.
Você deve utilizar HTML padrão e evitar fazer com que os elementos HTML se pareçamcom outros elementos HTML. Ou seja:
Para cabeçalhos e títulos, utilize elementos de header começando com o para o título de maior importância.
Para títulos em tabelas, utilize a tag em vez da tag .
Para listas, utilize elementos de lista , e .
Para o layout, utilize a tag em vez de .
http://www.csszengarden.com/tr/portuguese/http://www.csszengarden.com/tr/portuguese/http://www.csszengarden.com/tr/portuguese/http://www.csszengarden.com/tr/portuguese/
-
8/18/2019 HTML, CSS e Javascript - Alfamídia [Versão 2007]
55/136
Web, HTML, CSS e JavaScript
55 2007 Alfamidia Prow LTDA.
Conceito concebido pelo físico inglês Tom Berners-Lee, o criador do World Wide Web,cuja proposta, ainda em desenvolvimento, por um grupo de pesquisadores do W3C, porele liderado, é estruturar todo o conteúdo disponível na Internet. Essa estruturação será
baseada num conjunto de regras, que permitirá a localização eficiente e precisa dainformação desejada.
Por mais sofisticados que sejam os mecanismos de buscas, atualmente existentes, todos,sem exceção, oferecem para cada solicitação um grande número de páginas, que, em suamaioria, não atendem às necessidades do usuário. Esse é, então, obrigado a verificar umaa uma, até encontrar exatamente o que procura.
A Web semântica se propõe objetivar essa busca, de modo que o conteúdo exato sejaencontrado em uma única consulta. Esse conceito bas