O documento introduz conceitos fundamentais da World Wide Web, incluindo seu histórico, modelo cliente-servidor, protocolos HTTP e URL, e linguagem HTML. O documento também discute a diferença entre Internet e WWW.
O documento apresenta uma aula introdutória sobre HTML5. Apresenta os tópicos a serem abordados: o que é HTML5, suas vantagens, comandos básicos, como salvar e enviar arquivos. Inclui explicações sobre tags como <canvas> e <video> e recursos como geolocalização e cache de aplicações. Demonstra como criar um arquivo HTML simples, inserir imagens, hospedar o site na internet e concluir o processo de publicação.
O documento descreve como criar tabelas em HTML. Explica que tabelas são usadas para apresentar dados tabulares em linhas e colunas e fornece exemplos básicos de tabelas usando as tags <table>, <tr> e <td>. Também discute atributos comuns como border, width, align e valign.
A selection of teacher training materials on the area of developing creative ideas in order to build personalised content. The activities are suitable for both resource poor and resource rich contexts and have been tested with teachers in a range of different learning contexts, globally.
O documento apresenta Luiz Felipe F. M. Costa, um estudante de Sistemas de Informação que estuda front-end web por conta. Ele explica o objetivo do documento que é entender como sites funcionam, o poder das aplicações web e como aprender a desenvolver para a web. O documento é dividido em duas partes, a primeira sobre front-end e back-end e a segunda sobre HTML5, PHP e onde aprender mais.
1) O documento apresenta um caderno de exercícios de HTML com 8 exercícios iniciais que ensinam elementos básicos como cabeçalhos, parágrafos, links e imagens.
2) Os exercícios subsequentes abordam tópicos mais avançados como cores, alinhamento, tabelas e frames.
3) O objetivo é que os alunos aprendam a linguagem HTML através da realização prática destes exercícios.
Desenvolvimento-web-com-html-css-e-javascriptManuel Fernando
Este documento é um treinamento sobre desenvolvimento web com HTML, CSS e JavaScript. Ele contém instruções e exercícios sobre essas tecnologias, incluindo 289 exercícios de fixação, 164 exercícios complementares e 56 questões de prova.
O documento apresenta uma aula introdutória sobre HTML5. Apresenta os tópicos a serem abordados: o que é HTML5, suas vantagens, comandos básicos, como salvar e enviar arquivos. Inclui explicações sobre tags como <canvas> e <video> e recursos como geolocalização e cache de aplicações. Demonstra como criar um arquivo HTML simples, inserir imagens, hospedar o site na internet e concluir o processo de publicação.
O documento descreve como criar tabelas em HTML. Explica que tabelas são usadas para apresentar dados tabulares em linhas e colunas e fornece exemplos básicos de tabelas usando as tags <table>, <tr> e <td>. Também discute atributos comuns como border, width, align e valign.
A selection of teacher training materials on the area of developing creative ideas in order to build personalised content. The activities are suitable for both resource poor and resource rich contexts and have been tested with teachers in a range of different learning contexts, globally.
O documento apresenta Luiz Felipe F. M. Costa, um estudante de Sistemas de Informação que estuda front-end web por conta. Ele explica o objetivo do documento que é entender como sites funcionam, o poder das aplicações web e como aprender a desenvolver para a web. O documento é dividido em duas partes, a primeira sobre front-end e back-end e a segunda sobre HTML5, PHP e onde aprender mais.
1) O documento apresenta um caderno de exercícios de HTML com 8 exercícios iniciais que ensinam elementos básicos como cabeçalhos, parágrafos, links e imagens.
2) Os exercícios subsequentes abordam tópicos mais avançados como cores, alinhamento, tabelas e frames.
3) O objetivo é que os alunos aprendam a linguagem HTML através da realização prática destes exercícios.
Desenvolvimento-web-com-html-css-e-javascriptManuel Fernando
Este documento é um treinamento sobre desenvolvimento web com HTML, CSS e JavaScript. Ele contém instruções e exercícios sobre essas tecnologias, incluindo 289 exercícios de fixação, 164 exercícios complementares e 56 questões de prova.
O documento discute as principais diferenças entre HTML e XHTML. Apresenta uma introdução sobre o que é XHTML, destacando que se trata de uma padronização praticamente idêntica ao HTML 4.01, mas com algumas diferenças para torná-lo compatível com XML. Também aborda tópicos como sintaxe, validação de documentos XHTML e benefícios do uso de XHTML.
Montando sites com XHTML e CSS utilizando os padrões webigorpimentel
O documento apresenta uma introdução sobre a história da web, desde sua criação por Tim Berners-Lee até os padrões atuais. Aborda conceitos como HTML, XHTML, CSS e a importância da semântica e dos padrões web para um código acessível.
O documento traça a história da internet desde sua criação em 1969 até os dias atuais, destacando marcos como a criação da World Wide Web em 1991, o lançamento do navegador Netscape em 1995, e a popularização do termo "Web 2.0" em 2004. Também discute conceitos como intranet, extranet, protocolos e arquiteturas da internet, além de abordar seus impactos sociais e desenvolvimentos recentes.
1) O documento introduz os Web Services e a tecnologia Apache Axis para criar e consumir serviços web. 2) Os Web Services permitem a integração de sistemas distintos através da internet usando protocolos padronizados como SOAP e WSDL. 3) O framework Apache Axis facilita a criação de serviços web e clientes em Java.
O documento introduz os Web Services, discutindo sua definição, características, principais tecnologias (SOAP, WSDL, UDDI), exemplos de aplicação e desafios como composição e semântica. É apresentada uma visão geral dos Semantic Web Services que combinam as tecnologias dos Web Services tradicionais com recursos da Web Semântica como ontologias.
Fabrício Lopes Sanchez e André Baltieri apresentarão sobre as novidades do ASP.NET 5, MVC 6 e além, incluindo a mudança para um framework independente de plataforma, desacoplado e leve, além de demonstrações das novas funcionalidades em diferentes sistemas operacionais.
Introdução a eXtensible Markup Language (XML)Ivo Calado
O documento discute introdução à linguagem XML, especificações, elementos constituintes e sintaxe. Apresenta XML como linguagem de marcação flexível projetada para armazenar dados, diferente de HTML focado em exibição. Explica importância de XML para armazenamento estruturado e reutilização de informações.
O documento descreve a história e funcionamento do protocolo TCP/IP. O TCP/IP foi criado pelo Departamento de Defesa dos EUA em 1969 para permitir a comunicação confiável de dados através de redes. Ele se tornou o padrão da Internet ao longo do tempo à medida que a Internet crescia e se tornava comercial na década de 1980 e 1990. O TCP/IP funciona por meio de quatro camadas que realizam funções como endereçamento, controle de fluxo e entrega confiável de dados entre dispositivos de rede.
Este documento fornece um resumo sobre HTML avançado, CSS e JavaScript. Ele é dividido em três partes, cobrindo HTML avançado, CSS e uma introdução a JavaScript. A estrutura visa fornecer conceitos básicos no início e aumentar gradativamente o nível técnico ao longo dos capítulos.
Este documento fornece uma introdução à programação web com Java Server Pages (JSP). Discute a sintaxe básica de JSP, diretivas como page e include, e objetos implícitos como request e response. Também apresenta Expression Language (EL) como uma forma de reduzir o acoplamento entre código Java e HTML em páginas JSP.
Curso de Desenvolvimento Web - Módulo I - HTML.pdfailton bsj
1. O documento apresenta um curso de desenvolvimento web com foco em HTML, abordando conceitos básicos como o que é a internet, protocolos de rede, HTML e como estruturar um documento HTML.
2. É apresentada a estrutura básica de um documento HTML com as tags HTML, HEAD e BODY e demonstrado como formatar texto e inserir elementos como imagens e links.
3. O documento ensina como usar diferentes tags HTML para formatação como TÍTULOS, PARÁGRAFOS, LISTAS e TABELAS, além de cores, imagens e frames.
O documento discute o papel de um técnico em redes de computadores, incluindo onde as redes estão presentes, o que elas proporcionam e como um técnico pode atuar. Ele também descreve os conhecimentos necessários para a profissão e como o curso de técnico em redes é estruturado no Senac-TI.
Este documento apresenta uma introdução à programação web com servlets em Java. Ele discute o que são servlets e a classe HttpServlet, demonstra um exemplo simples de uma servlet "Olá Mundo" e explica como habilitar a execução da servlet mapeando uma URL para ela no arquivo web.xml.
Este documento fornece uma introdução aos conceitos fundamentais do jQuery, incluindo:
1) O que é jQuery e suas principais características como biblioteca JavaScript.
2) Exemplos básicos de sintaxe jQuery, incluindo seletores e eventos como click.
3) Uma explicação de diferentes tipos de eventos no jQuery como mouseenter e focus.
4) Demonstrações de como usar métodos jQuery como hide, show e addClass.
This document provides an overview of Bootstrap, a popular front-end framework for building responsive, mobile-first websites and web applications. It defines key Bootstrap elements, discusses typography and text formatting features, and provides code examples for common elements like headings, quotes, and text styling. The document is presented in Portuguese.
O documento discute protocolos de transporte no kernel Linux, incluindo TCP e DCCP. Detalha como o TCP implementa controle de congestionamento e como o DCCP usa módulos CCID plugáveis. Também descreve implementações específicas de CCIDs como 2, 3 e 249 e atividades como adicionar novos CCIDs ou logs.
O documento apresenta uma palestra sobre programação para o kernel Linux. Aborda tópicos como introdução ao Linux e seu kernel, montando o ambiente de desenvolvimento, criação de módulos, gerenciamento de memória e estruturas de dados. A agenda inclui explicações sobre o que é um sistema operacional, características do kernel Linux, diferenças entre desenvolvimento para kernel e espaço de usuário.
O documento apresenta um roteiro para um curso sobre JavaScript, dividido em quatro seções: Introdução, JavaScript Básico, JavaScript Avançado e JavaScript Avançado II. A introdução discute o que é JavaScript, sua relação com outras linguagens como Java, e onde colocar códigos JavaScript em páginas web.
Este documento apresenta uma introdução sobre Java EE e desenvolvimento web com Java usando Eclipse. Ele discute conceitos como conteúdo estático versus dinâmico, programação do lado do cliente versus do servidor, e especificações da plataforma Java EE como JSP, Servlets e EJB. O documento também descreve servidores de aplicação como Tomcat e Glassfish e como instalar o Tomcat.
Este documento introduz os conceitos básicos de CSS (Cascading Style Sheets), incluindo sua sintaxe, tipos, propriedades e casos de uso. Ele discute como o CSS separa a estrutura do conteúdo da formatação visual, permitindo alterar o layout de um site sem modificar o HTML. O documento também fornece exemplos de como definir regras CSS para estilizar diferentes elementos da página.
O documento discute as principais diferenças entre HTML e XHTML. Apresenta uma introdução sobre o que é XHTML, destacando que se trata de uma padronização praticamente idêntica ao HTML 4.01, mas com algumas diferenças para torná-lo compatível com XML. Também aborda tópicos como sintaxe, validação de documentos XHTML e benefícios do uso de XHTML.
Montando sites com XHTML e CSS utilizando os padrões webigorpimentel
O documento apresenta uma introdução sobre a história da web, desde sua criação por Tim Berners-Lee até os padrões atuais. Aborda conceitos como HTML, XHTML, CSS e a importância da semântica e dos padrões web para um código acessível.
O documento traça a história da internet desde sua criação em 1969 até os dias atuais, destacando marcos como a criação da World Wide Web em 1991, o lançamento do navegador Netscape em 1995, e a popularização do termo "Web 2.0" em 2004. Também discute conceitos como intranet, extranet, protocolos e arquiteturas da internet, além de abordar seus impactos sociais e desenvolvimentos recentes.
1) O documento introduz os Web Services e a tecnologia Apache Axis para criar e consumir serviços web. 2) Os Web Services permitem a integração de sistemas distintos através da internet usando protocolos padronizados como SOAP e WSDL. 3) O framework Apache Axis facilita a criação de serviços web e clientes em Java.
O documento introduz os Web Services, discutindo sua definição, características, principais tecnologias (SOAP, WSDL, UDDI), exemplos de aplicação e desafios como composição e semântica. É apresentada uma visão geral dos Semantic Web Services que combinam as tecnologias dos Web Services tradicionais com recursos da Web Semântica como ontologias.
Fabrício Lopes Sanchez e André Baltieri apresentarão sobre as novidades do ASP.NET 5, MVC 6 e além, incluindo a mudança para um framework independente de plataforma, desacoplado e leve, além de demonstrações das novas funcionalidades em diferentes sistemas operacionais.
Introdução a eXtensible Markup Language (XML)Ivo Calado
O documento discute introdução à linguagem XML, especificações, elementos constituintes e sintaxe. Apresenta XML como linguagem de marcação flexível projetada para armazenar dados, diferente de HTML focado em exibição. Explica importância de XML para armazenamento estruturado e reutilização de informações.
O documento descreve a história e funcionamento do protocolo TCP/IP. O TCP/IP foi criado pelo Departamento de Defesa dos EUA em 1969 para permitir a comunicação confiável de dados através de redes. Ele se tornou o padrão da Internet ao longo do tempo à medida que a Internet crescia e se tornava comercial na década de 1980 e 1990. O TCP/IP funciona por meio de quatro camadas que realizam funções como endereçamento, controle de fluxo e entrega confiável de dados entre dispositivos de rede.
Este documento fornece um resumo sobre HTML avançado, CSS e JavaScript. Ele é dividido em três partes, cobrindo HTML avançado, CSS e uma introdução a JavaScript. A estrutura visa fornecer conceitos básicos no início e aumentar gradativamente o nível técnico ao longo dos capítulos.
Este documento fornece uma introdução à programação web com Java Server Pages (JSP). Discute a sintaxe básica de JSP, diretivas como page e include, e objetos implícitos como request e response. Também apresenta Expression Language (EL) como uma forma de reduzir o acoplamento entre código Java e HTML em páginas JSP.
Curso de Desenvolvimento Web - Módulo I - HTML.pdfailton bsj
1. O documento apresenta um curso de desenvolvimento web com foco em HTML, abordando conceitos básicos como o que é a internet, protocolos de rede, HTML e como estruturar um documento HTML.
2. É apresentada a estrutura básica de um documento HTML com as tags HTML, HEAD e BODY e demonstrado como formatar texto e inserir elementos como imagens e links.
3. O documento ensina como usar diferentes tags HTML para formatação como TÍTULOS, PARÁGRAFOS, LISTAS e TABELAS, além de cores, imagens e frames.
O documento discute o papel de um técnico em redes de computadores, incluindo onde as redes estão presentes, o que elas proporcionam e como um técnico pode atuar. Ele também descreve os conhecimentos necessários para a profissão e como o curso de técnico em redes é estruturado no Senac-TI.
Este documento apresenta uma introdução à programação web com servlets em Java. Ele discute o que são servlets e a classe HttpServlet, demonstra um exemplo simples de uma servlet "Olá Mundo" e explica como habilitar a execução da servlet mapeando uma URL para ela no arquivo web.xml.
Este documento fornece uma introdução aos conceitos fundamentais do jQuery, incluindo:
1) O que é jQuery e suas principais características como biblioteca JavaScript.
2) Exemplos básicos de sintaxe jQuery, incluindo seletores e eventos como click.
3) Uma explicação de diferentes tipos de eventos no jQuery como mouseenter e focus.
4) Demonstrações de como usar métodos jQuery como hide, show e addClass.
This document provides an overview of Bootstrap, a popular front-end framework for building responsive, mobile-first websites and web applications. It defines key Bootstrap elements, discusses typography and text formatting features, and provides code examples for common elements like headings, quotes, and text styling. The document is presented in Portuguese.
O documento discute protocolos de transporte no kernel Linux, incluindo TCP e DCCP. Detalha como o TCP implementa controle de congestionamento e como o DCCP usa módulos CCID plugáveis. Também descreve implementações específicas de CCIDs como 2, 3 e 249 e atividades como adicionar novos CCIDs ou logs.
O documento apresenta uma palestra sobre programação para o kernel Linux. Aborda tópicos como introdução ao Linux e seu kernel, montando o ambiente de desenvolvimento, criação de módulos, gerenciamento de memória e estruturas de dados. A agenda inclui explicações sobre o que é um sistema operacional, características do kernel Linux, diferenças entre desenvolvimento para kernel e espaço de usuário.
O documento apresenta um roteiro para um curso sobre JavaScript, dividido em quatro seções: Introdução, JavaScript Básico, JavaScript Avançado e JavaScript Avançado II. A introdução discute o que é JavaScript, sua relação com outras linguagens como Java, e onde colocar códigos JavaScript em páginas web.
Este documento apresenta uma introdução sobre Java EE e desenvolvimento web com Java usando Eclipse. Ele discute conceitos como conteúdo estático versus dinâmico, programação do lado do cliente versus do servidor, e especificações da plataforma Java EE como JSP, Servlets e EJB. O documento também descreve servidores de aplicação como Tomcat e Glassfish e como instalar o Tomcat.
Este documento introduz os conceitos básicos de CSS (Cascading Style Sheets), incluindo sua sintaxe, tipos, propriedades e casos de uso. Ele discute como o CSS separa a estrutura do conteúdo da formatação visual, permitindo alterar o layout de um site sem modificar o HTML. O documento também fornece exemplos de como definir regras CSS para estilizar diferentes elementos da página.
1. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Programa¸˜o para Web
ca
HTML
Ivo Calado
Instituto Federal de Educa¸˜o, Ciˆncia e Tecnologia de Alagoas
ca e
20 de Mar¸o de 2012
c
1 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
2. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Roteiro
1 Introdu¸˜o
ca
2 Introdu¸ao linguagem HTML
c
3 Formata¸˜o de texto
ca
4 Referenciamento
5 Tabelas e *frames
2 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
3. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
O que ´ Internet?
e
O que ´ Internet?
e
3 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
4. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
O que ´ Internet?
e
O que ´ Internet?
e
Estamos acostumados a ouvir que...
Internet ´ a “grande rede mundial de computadores”
e
3 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
5. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
O que ´ Internet?
e
O que ´ Internet?
e
Estamos acostumados a ouvir que...
Internet ´ a “grande rede mundial de computadores”
e
Entretanto, essa defini¸˜o n˜o ´ exata...
ca a e
3 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
6. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
O que ´ Internet?
e
O que ´ Internet?
e
Estamos acostumados a ouvir que...
Internet ´ a “grande rede mundial de computadores”
e
Entretanto, essa defini¸˜o n˜o ´ exata...
ca a e
Internet ´ “o conjunto de diversas redes de computadores que se
e
comunicam atrav´s dos protocolos TCP/IP”
e
3 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
7. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
O que ´ World Wide Web?
e
O que ´ a World Wide Web?
e
4 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
8. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
O que ´ World Wide Web?
e
O que ´ a World Wide Web?
e
Defini¸˜o
ca
´
E um sistema de documentos hipertexto inteligados atrav´s de
e
hiperlinks
4 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
9. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
O que ´ World Wide Web?
e
O que ´ a World Wide Web?
e
Defini¸˜o
ca
´
E um sistema de documentos hipertexto inteligados atrav´s de
e
hiperlinks
Qual a diferen¸a entre WWW e a Internet?
c
4 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
10. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
O que ´ World Wide Web?
e
O que ´ a World Wide Web?
e
Defini¸˜o
ca
´
E um sistema de documentos hipertexto inteligados atrav´s de
e
hiperlinks
Qual a diferen¸a entre WWW e a Internet?
c
Internet ´ toda a infraestrutura de rede, enquanto que a WWW ´
e e
apenas um servi¸o provido.
c
Quais seriam outros exemplos de servi¸os providos pela Internet
c
4 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
11. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
O que ´ World Wide Web?
e
O que ´ a World Wide Web?
e
Defini¸˜o
ca
´
E um sistema de documentos hipertexto inteligados atrav´s de
e
hiperlinks
Qual a diferen¸a entre WWW e a Internet?
c
Internet ´ toda a infraestrutura de rede, enquanto que a WWW ´
e e
apenas um servi¸o provido.
c
Quais seriam outros exemplos de servi¸os providos pela Internet
c
Email, FTP, P2P, transmiss˜es multim´ etc
o ıdia
4 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
12. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
O que ´ World Wide Web?
e
Defini¸˜o de Hipertexto I
ca
Conjunto de documentos que fazem referˆncia entre si,
e
possibilitando navega¸˜o entre os diferentes t´picos
ca o
A partir da interreferˆncia entre as diversas p´ginas ´ criado
e a e
uma malha de inteconex˜es (de onde vem o termo Web).
o
5 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
13. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
O que ´ World Wide Web?
e
Defini¸˜o de Hipertexto II
ca
O conceito de hipertexto n˜o ´ unico da WWW. Ele ´ bem
a e´ e
anterior a Internet.
Qual seria um outro exemplo de Hipertexto?
6 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
14. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
O que ´ World Wide Web?
e
Defini¸˜o de Hipertexto II
ca
O conceito de hipertexto n˜o ´ unico da WWW. Ele ´ bem
a e´ e
anterior a Internet.
Qual seria um outro exemplo de Hipertexto? O dicion´rio! No
a
dicion´rio os termos existentes se auto-referenciam
a
6 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
15. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Hist´ria
o
Como surgiu a WWW?
Criado entre os anos de 1989-1991 (proposi¸˜o do projeto,
ca
desenvolvimento e apresenta¸˜o p´blica)
ca u
Criado pelo f´ısico Tim Berners-Lee que ainda se mant´m no
e
comitˆ para o desenvolvimento da WWW, chamado W3C
e
A ideia original era criar uma infraestrutura para acesso a
documentos em uma abordagem de comunica¸˜o ca
cliente-servidor.
7 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
16. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Hist´ria
o
Como surgiu a WWW?
Criado entre os anos de 1989-1991 (proposi¸˜o do projeto,
ca
desenvolvimento e apresenta¸˜o p´blica)
ca u
Criado pelo f´ısico Tim Berners-Lee que ainda se mant´m no
e
comitˆ para o desenvolvimento da WWW, chamado W3C
e
A ideia original era criar uma infraestrutura para acesso a
documentos em uma abordagem de comunica¸˜o ca
cliente-servidor.
Mas o que seria uma abordagem cliente-servidor?
7 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
17. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Hist´ria
o
Como surgiu a WWW?
Criado entre os anos de 1989-1991 (proposi¸˜o do projeto,
ca
desenvolvimento e apresenta¸˜o p´blica)
ca u
Criado pelo f´ısico Tim Berners-Lee que ainda se mant´m no
e
comitˆ para o desenvolvimento da WWW, chamado W3C
e
A ideia original era criar uma infraestrutura para acesso a
documentos em uma abordagem de comunica¸˜o ca
cliente-servidor.
Mas o que seria uma abordagem cliente-servidor?
Trata-se de uma abordagem de comunica¸˜o em que uma
ca
m´quina, chamada servidora, disponibiliza recursos a serem
a
acessados por outras m´quinas, chamadas de clientes.
a
7 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
18. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Hist´ria
o
Modelo cliente-servidor
8 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
19. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Conceitos importantes
Trˆs conceitos s˜o de fundamental importˆncia no estudo da
e a a
WWW: HTTP, URL e HTML
A partir dessas 3 ferramentas, os recursos podem ser acessados na
Web fazendo-se uso de programas conhecidos como Browsers
9 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
20. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Conceitos importantes
HTTP
Abrevia¸˜o de Hypertext Transfer Protocol
ca
Trata-se de um protocolo de camada de aplica¸˜o, utilizado
ca
para recupera¸˜o de recursos na Internet
ca
Diferentemente do TCP, o protocolo HTTP ´ um
e
protocolo textual (ou human-readable)
Possui um conjunto limitado de opera¸˜es poss´
co ıveis: GET,
POST, PUT, HEAD etc.
Ver Wireshark...
10 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
21. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Conceitos importantes
Contextualizando...
O que s˜o protocolos da camada de aplica¸˜o?
a ca
11 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
22. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Conceitos importantes
Contextualizando...
O que s˜o protocolos da camada de aplica¸˜o?
a ca
S˜o protocolos respons´veis por prover servi¸os `s aplica¸˜es
a a c a co
Representam a 7ª camada no modelo OSI ou a 5ª no modelo
TCP/IP
Normalmente s˜o os protocolos que diretamente s˜o
a a
acessados pelas aplica¸˜es
co
Outros exemplos de protocolos incluem: FTP, SSH, Bitorrent
etc.
11 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
23. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Conceitos importantes
O que ´ um protocolo textual?
e
12 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
24. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Conceitos importantes
O que ´ um protocolo textual?
e
S˜o protocolos que apresentam uma estrutura textual nas suas
a
descri¸˜es de mensagens
co
12 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
25. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Conceitos importantes
URL
Abrevia¸˜o de Uniform Resource Locator
ca
´ uma forma padr˜o para representa¸˜o da localiza¸˜o de um
E a ca ca
recurso
Pode ser utilizado por diversos protocolos (inclusive o HTTP)
para identificar um recurso remoto
Possui o seguinte formato:
protocolo://m´quina/caminho/recurso
a
13 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
26. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Conceitos importantes
HTML
Linguagem de marca¸˜o para transmitir documentos
ca
formatados atrav´s da rede
e
Trata-se de uma das formas mais b´sicas de transmiss˜o de
a a
informa¸˜o pela Web
ca
Conte´do ´ considerado est´tico
u e a
14 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
27. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Conceitos importantes
HTML
Linguagem de marca¸˜o para transmitir documentos
ca
formatados atrav´s da rede
e
Trata-se de uma das formas mais b´sicas de transmiss˜o de
a a
informa¸˜o pela Web
ca
Conte´do ´ considerado est´tico
u e a
N˜o ´ uma linguagem de programa¸˜o!!!
a e ca
14 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
28. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Conceitos importantes
HTML
Linguagem de marca¸˜o para transmitir documentos
ca
formatados atrav´s da rede
e
Trata-se de uma das formas mais b´sicas de transmiss˜o de
a a
informa¸˜o pela Web
ca
Conte´do ´ considerado est´tico
u e a
N˜o ´ uma linguagem de programa¸˜o!!!
a e ca
Conte´do Est´tico x Conte´do Dinˆmico
u a u a
No conte´do est´tico as p´ginas HTML criadas previamente e
u a a
s˜o apenas requisitadas
a
No conte´do dinˆmico, h´ uma requisi¸˜o por uma p´gina e a
u a a ca a
p´gina HTML ´ gerada em tempo real e entregue ao
a e
requisitante
14 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
29. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Hist´ria
o
Hist´ria
o
A linguagem HTML foi desenvolvida em 1990 a partir de dois
padr˜es existentes:
o
SGML: padr˜o que possibilitava a formata¸˜o de texto
a ca
HyTime: padr˜o para representa¸˜o de documentos
a ca
hipertextos
A partir da uni˜o das funcionalidades do SGML e HyTime foi
a
poss´ a cria¸˜o do HTML. Atualmente o HTML est´ na vers˜o
ıvel ca a a
5.0 (draft) e sua especifica¸˜o pode ser encontrada em
ca
http://www.w3.org/TR/html5/
15 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
30. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Primeiros passos
Nossa primeira p´gina HTML
a
Crie um arquivo texto com a seguinte estrutura:
<HTML>
<HEAD >
<TITLE>Minha p r i m e i r a p a g i n a</TITLE>
</HEAD >
<BODY >
H e l l o World
</BODY >
</HTML>
Salve o arquivo com extens˜o .html ou .htm e abra-o com o
a
navegador padr˜o (ex.: firefox index.html)
a
16 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
31. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Primeiros passos
Estrutura hierarquica da p´gina
a
HTML
|
−HEAD
| |
| −TITLE
| |
| −" T ´ tulo da p´ gina "
ı a
|
−BODY
|
" Corpo do d o c u m e n t o "
17 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
32. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Primeiros passos
Estrutura da p´gina HTML
a
Formado por tags que especificam a estrutura e a formata¸˜o
ca
do documento
Possui como elemento inicial a tag HTML
As tags HTML n˜o s˜o sens´
a a ıveis ` caixa. Traduzindo: tanto
a
faz escrever <HTML>, <Html>, <html>, <HtMl>, ...
18 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
33. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Primeiros passos
Estrutura da p´gina HTML
a
Formado por tags que especificam a estrutura e a formata¸˜o
ca
do documento
Possui como elemento inicial a tag HTML
As tags HTML n˜o s˜o sens´
a a ıveis ` caixa. Traduzindo: tanto
a
faz escrever <HTML>, <Html>, <html>, <HtMl>, ...
Mas o que s˜o tags
a
18 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
34. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Primeiros passos
Estrutura da p´gina HTML
a
Formado por tags que especificam a estrutura e a formata¸˜o
ca
do documento
Possui como elemento inicial a tag HTML
As tags HTML n˜o s˜o sens´
a a ıveis ` caixa. Traduzindo: tanto
a
faz escrever <HTML>, <Html>, <html>, <HtMl>, ...
Mas o que s˜o tags
a
S˜o elementos de formata¸˜o da linguagem HTML. A partir delas
a ca
´ poss´ definir a formata¸˜o de algumas por¸˜es de texto
e ıvel ca co
18 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
35. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
<Head>
Se¸˜o Head
ca
O elemento HEAD cont´m informa¸˜es sobre o documento.
e co
Nele, o t´
ıtulo da p´gina pode serO elemento ¡TITLE¿, por
a
exemplo, define um t´ ıtulo, que ´ mostrado no alto da janela
e
do browser.
<HEAD><TITLE>Nossa primeira p´gina</TITLE></HEAD>
a
19 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
36. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
<Head>
Sobre o t´
ıtulo da p´gina
a
Todo documento WWW deve ter um t´
ıtulo
Esse t´
ıtulo ´ referenciado em buscas pela rede, dando uma
e
identidade ao documento
Para ver na pr´tica a importˆncia do t´
a a ıtulo, se vocˆ adicionar
e
a p´gina criada aos favoritos do seu navegador o t´
a ıtulo da
p´gina ser´ usado como ˆncora de acesso
a a a
´ sugerido que os t´
E ıtulos dos documentos sejam sugestivos,
evitando-se t´
ıtulos gen´ricos como “Introdu¸˜o”
e ca
20 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
37. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
<Head>
Campos META
Al´m do t´
e ıtulo, <HEAD> cont´m outras informa¸˜es de
e co
importˆncia para os robˆs de pesquisa, indicadas nos campos
a o
<META>
Os campos <META> tˆm dois atributos principais:
e
NAME, indicando um nome para a informa¸˜o
ca
HTTP-EQUIV, que faz uma correspondˆncia com campos de
e
cabe¸alho do protocolo HTTP (ex.: definir a codifica¸˜o
c ca
utilizada)
21 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
38. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
<Head>
Exemplo META
<HEAD>
<META HTTP−EQUIV=" content - type " CONTENT text / html ; ="
c h a r s e t = iso -8859 -1 ">
<TITLE> T u t o r i a l HTML </TITLE>
<META NAME A u t h or " CONTENT Ivo Calado - ivo .
=" ="
c a l a d o @ e e . ufcg . edu . br ">
<META NAME G e n e r a t o r " CONTENT Namo W e b E d i t o r v5 .0 ">
=" ="
<META NAME D e s c r i p t i o n " CONTENT Manual de
=" ="
r e f e r ˆ n c i a para w e b d e s i g n e r s e d e s e n v o l v e d o r e s de
e
sites ">
<META NAME K e y W o r d s " CONTENT HTML , WWW ,
=" ="
W e b p u b l i s h i n g , Internet , W e b d e s i g n ">
</HEAD>
22 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
39. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
<Head>
Ainda sobre a tag META...
Alguns valores dos atributos META NAME s˜o inseridos
a
automaticamente por alguns editores, por exemplo: Generator
e Author.
Os campos Description e KeyWords ajudam a classifica¸˜o
ca
da p´gina em algumas ferramentas de busca.
a
As informa¸˜es nas tags META n˜o tˆm qualquer efeito na
co a e
apresenta¸˜o da p´gina, mas servem como uma explica¸˜o ou
ca a ca
documenta¸˜o sobre as informa¸˜es contidas nela.
ca co
23 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
40. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
<Head>
Ainda sobre a tag META...
H´ poucos valores para META HTTP-EQUIV em uso
a
Os parˆmetros mais utilizados s˜o content-type e Refresh
a a
content-type
Indica a codifica¸˜o que o browser deve utilizar para decodificar o
ca
documento recuperado. Existem diversos padr˜es de codifica¸˜o
o ca
como UTF-8 e ISO 8859-1
24 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
41. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
<Head>
Ainda sobre a tag META...
Refresh
Define uma URL a ser carregada ap´s a expira¸˜o de um per´
o ca ıodo
espec´
ıfico
<HEAD>
<TITLE> . . . </TITLE>
<META HTTP−EQUIV=" R e f r e s h " CONTENT s e g u n d o s ; URL =
="
pag i n a . html ">
</HEAD>
onde,
pagina.html ´ a p´gina a ser carregada automaticamente
e a
segundos ´ o n´mero de segundos passados at´ que a p´gina
e u e a
indicada seja carregada
25 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
42. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
<Head>
Ainda sobre a tag META...
Ver exemplo Refresh...
26 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
43. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
<Head>
Ainda sobre a tag META...
Ver exemplo Refresh...
Mas quando um recurso como refresh deveria ser utilizado?
26 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
44. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
<Head>
Ainda sobre a tag META...
Ver exemplo Refresh...
Mas quando um recurso como refresh deveria ser utilizado?
Em situa¸˜es onde o conte´do da p´gina necessita ser atualizado
co u a
constantemente, como em uma p´gina de chat
a
26 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
45. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
<Body>
Se¸˜o Body
ca
O objetivo da se¸˜o Body ´ conter o conte´do que ser´, de
ca e u a
fato, visualizado pelo usu´rio
a
Deste modo ´ poss´ adicionar cabe¸alhos, par´grafos, listas,
e ıvel c a
tabelas, links para outros documentos, imagens, formul´rios,
a
anima¸˜es, v´
co ıdeos, sons e scripts embutidos.
27 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
46. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Atributos
Atributos da Se¸˜o Body
ca
<BODY BGCOLOR=" # r rggbb " TEXT=" # rrggbb " LINK=" # rrggbb "
ALINK=" # r r g g b b " VLINK=" # rrggbb " BACKGROUND URL ">
="
Bgcolor: cor de fundo (quando n˜o ´ indicada, o browser ir´
a e a
mostrar uma cor padr˜o, geralmente o cinza ou branco; alguns
a
editores poder˜o estabelecer o branco para o fundo da p´gina)
a a
Text: cor dos textos da p´gina (padr˜o: preto)
a a
Link: cor dos links (padr˜o: azul)
a
Alink: cor dos links, quando acionados (padr˜o: vermelho)
a
Vlink: cor dos links, depois de visitados (padr˜o: azul escuro
a
ou roxo)
28 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
47. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Atributos
Atributos da Se¸˜o Body
ca
Seus valores s˜o dados em hexadecimal, equivalentes a cores no
a
padr˜o RGB (Red, Green, Blue).
a
29 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
48. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Atributos
Atributos da Se¸˜o Body
ca
Seus valores s˜o dados em hexadecimal, equivalentes a cores no
a
padr˜o RGB (Red, Green, Blue).
a
Como definir a cor a ser utilizada?
29 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
49. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Atributos
Atributos da Se¸˜o Body
ca
Seus valores s˜o dados em hexadecimal, equivalentes a cores no
a
padr˜o RGB (Red, Green, Blue).
a
Como definir a cor a ser utilizada?
Existem tabelas de cores com esses valores, como
http://immigration-usa.com/html_colors.html. Al´m disso, a e
partir da vers˜o HTML 3.2, uma s´rie de constantes foram
a e
definidas para facilitar (aqua, black, blue, fuchsia, gray, green,
lime, maroon, navy, olive, purple, red, silver, teal, white, yellow)
29 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
50. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Atributos
Atributos da Se¸˜o Body
ca
Background: Indica a URL da imagem a ser replicada no
fundo da p´gina, como uma marca d’´gua.
a a
30 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
51. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Cabe¸alhos, separadores e listas
c
Cabe¸alhos
c
H´ seis n´
a ıveis de cabe¸alhos em HTML, de <H1> a <H6>:
c
<H1>E s t e ´
e um cabecalho
¸ de n´ v e l
ı 1</H1>
<H2>E s t e ´
e um cabecalho
¸ de n´ v e l
ı 2</H2>
<H3>E s t e ´
e um cabecalho
¸ de n´ v e l
ı 3</H3>
<H4>E s t e ´
e um cabecalho
¸ de n´ v e l
ı 4</H4>
<H5>E s t e ´
e um cabecalho
¸ de n´ v e l
ı 5</H5>
<H6>E s t e ´
e um cabecalho
¸ de n´ v e l
ı 6</H6>
O prop´sito dos cabe¸alhos ´ possibilitar a demarca¸˜o de se¸˜es
o c e ca co
no texto
31 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
52. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Cabe¸alhos, separadores e listas
c
Aninhamento de cabe¸alhos
c
Os cabe¸alhos n˜o podem ser aninhados, isto ´, a formata¸˜o:
c a e ca
<H2>E s t e ´ <H1>um c a b e c a l h o de n´ v e l 1</H1> d e n t r o de
e ¸ ı
um c a b e c a l h o de n´ v e l 2</H2>
¸ ı
32 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
53. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Cabe¸alhos, separadores e listas
c
Aninhamento de cabe¸alhos
c
Os cabe¸alhos n˜o podem ser aninhados, isto ´, a formata¸˜o:
c a e ca
<H2>E s t e ´ <H1>um c a b e c a l h o de n´ v e l 1</H1> d e n t r o de
e ¸ ı
um c a b e c a l h o de n´ v e l 2</H2>
¸ ı
O que acontece com forma¸˜es dessa forma?
co
32 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
54. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Cabe¸alhos, separadores e listas
c
Aninhamento de cabe¸alhos
c
Os cabe¸alhos n˜o podem ser aninhados, isto ´, a formata¸˜o:
c a e ca
<H2>E s t e ´ <H1>um c a b e c a l h o de n´ v e l 1</H1> d e n t r o de
e ¸ ı
um c a b e c a l h o de n´ v e l 2</H2>
¸ ı
O que acontece com forma¸˜es dessa forma?
co
pode produzir redutados diferentes dependendo de como o browser
interprete, visto que ele pode adotar duas abordagens:
Considerar o aninhamento, ou (caso do firefox)
Considerar que o programador esqueceu de fechar o primeiro
cabe¸alho H2 e de abrir o segundo cabe¸alho H2 (caso do
c c
Opera)
32 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
55. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Cabe¸alhos, separadores e listas
c
Alinhamento de cabe¸alhos
c
´
E poss´ alinhas os cabe¸alho (em rela¸˜o as margens direita,
ıvel c ca
esquerda ou centro) a partir do uso de atributos dos cabe¸alhos...
c
Ex.:
<H2 ALIGN=CENTER>C a b e ¸ a l h o c e n t r a l i z a d o</H2>
c
<H3 ALIGN=RIGHT>C a b e c a l h o a l i n h a d o ` d i r e i t a</H3>
¸ a
<H4 ALIGN=LEFT>C a b e ¸ a l h o a l i n h a d o ` e s q u e r d a ( d e f a u l t )
c a
</H4>
33 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
56. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Cabe¸alhos, separadores e listas
c
O que acontece quando usamos a quebra de linha em um
documento HTML? (abrir exemplo separadores/index.html em
editor de texto)
34 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
57. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Cabe¸alhos, separadores e listas
c
O que acontece quando usamos a quebra de linha em um
documento HTML? (abrir exemplo separadores/index.html em
editor de texto)
Nada, pois os Browsers desconsideram tais quebras de linha unindo
o texto... (ver novamente o exemplo, agora no browser). Sendo
assim para organizar os textos, precisamos de separadores!!
Existem diferentes separadores poss´
ıveis:
<Br>
<P>
<HR>
34 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
58. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Cabe¸alhos, separadores e listas
c
<Br>
Quando queremos mudar de linha, usamos o elemento <BR>
Isso s´ ´ necess´rio quando queremos uma quebra de linha em
oe a
determinado ponto, pois os browsers j´ quebram as linhas
a
automaticamente para apresentar os textos. (exemplo
br.html)
Deste modo ´ poss´ inserir diversas linhas no nosso
e ıvel
documento...
U t i l i z a n d o o <BR> e l e m e n t o BR <BR><BR><BR> ´ <BR> e
p o s s´ v e l <BR><BR> a d i c i o n a r d i v e r s a s l i n h a s <BR><BR
ı
><BR><BR> no documento
35 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
59. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Cabe¸alhos, separadores e listas
c
<P>
Para separar blocos de texto, usamos o elemento <P>
P a r ´ g r a f o 1 ;<P>P a r ´ g r a f o 2 .
a a
que possui como efeito a cria¸˜o de um par´grafo
ca a
36 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
60. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Cabe¸alhos, separadores e listas
c
<P>
Para separar blocos de texto, usamos o elemento <P>
P a r ´ g r a f o 1 ;<P>P a r ´ g r a f o 2 .
a a
que possui como efeito a cria¸˜o de um par´grafo Combinando
ca a
par´grafos e quebras de linha, podemos construir estruturas mais
a
organizadas de texto como o apresentado no exemplo
separadores/paragrafo.html
36 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
61. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Cabe¸alhos, separadores e listas
c
Atributos da tag <P>
Assim como nos cabe¸alhos, a tag P possibilita o alinhamento
c
a partir da utiliza¸˜o do parˆmetro ALIGN
ca a
<P ALIGN=CENTER>Assim como o s t r e n s , a s b o a s i d ´ i a s ` s
e a
v e z e s chegam com a t r a s o . <BR>( G i o v a n i G u a r e s c h i )<
/P>
37 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
62. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Cabe¸alhos, separadores e listas
c
Listas
Uma das formas mais comuns de estruturar uma por¸˜o de um
ca
documento ´ no formato de listas. Nesse sentido, existem diversas
e
maneiras de estruturar o documento no formato de listas em
HTML, sendo as mais conhecidas:
Listas de Defini¸˜o ou Listas de gloss´rio
ca a
Listas n˜o-numeradas: s˜o equivalentes `s listas com
a a a
marcadores do MS Word
Listas Numeradas
38 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
63. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Cabe¸alhos, separadores e listas
c
Listas de defini¸oes
c˜
Esta classe de lista s˜o chamadas tamb´m de “Listas de
a e
Gloss´rios”, uma vez que tem o formato semelhante ao utilizado
a
em estruturas de gloss´rios. Ex.:
a
termo a s e r d e f i n i d o
definic˜o
¸a
termo a s e r d e f i n i d o
definic˜o
¸a
Este tipo de lista ´ muito utilizado para diversos efeitos de
e
organiza¸˜o de p´ginas, por permitir a tabula¸˜o do texto.
ca a ca
39 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
64. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Cabe¸alhos, separadores e listas
c
Listas n˜o-numeradas
a
S˜o equivalentes `s listas com marcadores do MS Word:
a a
<UL>
<L I>i t e m de uma l i s t a
<L I>i t e m de uma l i s t a , que pode s e r t ˜ o g r a n d e q u a n t o
a
s e q u e i r a , sem que s e j a n e c e s s ´ r i o s e p r e o c u p a r
a
com a f o r m a t a c ˜ o d a s margens de t e x t o
¸a
<L I>i t e m
</UL>
UL: Define o in´ da lista
ıcio
LI: Define um novo item
40 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
65. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Cabe¸alhos, separadores e listas
c
Listas n˜o-numeradas
a
Em listas n˜o-numeradas ´ poss´ a adi¸˜o de subn´
a e ıvel ca ıveis
Para tal, adiciona-se novos elementos UL
Exemplo:
<UL>
<L I>N´v e l
ı
<UL>
<L I>S u b n´v e l
ı
</UL>
<L I>N´v e l 2
ı
</UL>
41 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
66. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Cabe¸alhos, separadores e listas
c
Alterando o indicador da lista
Um recurso dispon´ ´ a escolha de qual ser´ o marcador
ıvel e a
utilizado para identificar os itens. Por default o pr´prio browser faz
o
a escolha de acordo com o n´ da lista, por´m ´ poss´ fazer um
ıvel e e ıvel
controle mais apurado. Para isso basta fazer uso dos atributos
disc, circle e square
Exemplo:
<UL>
<L I TYPE=DISC>um i t e m
<L I TYPE=CIRCLE>m a i s um i t e m
<L I TYPE=SQUARE>´ l t i m o i t e m
u
</UL>
42 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
67. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Cabe¸alhos, separadores e listas
c
Listas Numeradas
Nas listas numeradas ´ poss´ fazer a adi¸˜o de diversos itens a
e ıvel ca
serem representados de maneira ordenada.
<OL>
<L I>i t e m de uma l i s t a numerada
<L I>i t e m de uma l i s t a numerada , que pode s e r t ˜ o g r a n d e
a
quanto se queira
<L I>i t e m de l i s t a numerada
</OL>
43 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
68. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Cabe¸alhos, separadores e listas
c
Listas Numeradas
Nas listas numeradas ´ poss´ fazer a adi¸˜o de diversos itens a
e ıvel ca
serem representados de maneira ordenada.
<OL>
<L I>i t e m de uma l i s t a numerada
<L I>i t e m de uma l i s t a numerada , que pode s e r t ˜ o g r a n d e
a
quanto se queira
<L I>i t e m de l i s t a numerada
</OL>
1 item de uma lista numerada
2 item de uma lista numerada, que pode ser t˜o grande quanto
a
se queira
3 item de lista numerada
43 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
69. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Blocos de texto e Frases
Blocos de texto: PRE
At´ agora, sempre que criamos um arquivo HTML o browser
e
fica respons´vel pelo espa¸amento e quebra de linhas
a c
Ver exemplo bloco texto
Mas e se desejassemos que o texto fosse exibido como digitado?
44 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
70. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Blocos de texto e Frases
Blocos de texto: PRE
At´ agora, sempre que criamos um arquivo HTML o browser
e
fica respons´vel pelo espa¸amento e quebra de linhas
a c
Ver exemplo bloco texto
Mas e se desejassemos que o texto fosse exibido como digitado?
Para isso fazemos uso da tag <PRE>
Estrutura
<p r e>
texto a ser exibido . . .
</ p r e>
44 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
71. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Blocos de texto e Frases
Blocos de texto: PRE
Mas quais os riscos de se utilizar a tag PRE?
45 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
72. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Blocos de texto e Frases
Blocos de texto: PRE
Mas quais os riscos de se utilizar a tag PRE?
Dispositivos com diferentes resolu¸˜es de tela!
co
Rever exemplos...
45 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
73. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Blocos de texto e Frases
Blocos de texto: Blockquote e Address
A tag Blockquote possibilita a estrutura¸˜o de textos no formato
ca
de cita¸˜es longas:
co
<b l o c k q u o t e>A massa do S o l a r q u e i a o e s p a c o −tempo de
¸
t a l m a n e i r a que , a i n d a que a T e r r a s i g a uma
t r a j e t ´ r i a r e t a no e s p a c o −tempo q u a d r i d i m e n s i o n a l
o ¸
, p a r e c e −n o s que s e d e s l o c a em ´ r b i t a c i r c u l a r no
o
e s p a c o t r i d i m e n s i o n a l .</ b l o c k q u o t e> ( S t e p h e n W.
¸
Hawking , " Uma Breve H i s t ´ r i a do Tempo " )
o
46 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
74. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Blocos de texto e Frases
Blocos de texto: Blockquote e Address
A tag Blockquote possibilita a estrutura¸˜o de textos no formato
ca
de cita¸˜es longas:
co
<b l o c k q u o t e>A massa do S o l a r q u e i a o e s p a c o −tempo de
¸
t a l m a n e i r a que , a i n d a que a T e r r a s i g a uma
t r a j e t ´ r i a r e t a no e s p a c o −tempo q u a d r i d i m e n s i o n a l
o ¸
, p a r e c e −n o s que s e d e s l o c a em ´ r b i t a c i r c u l a r no
o
e s p a c o t r i d i m e n s i o n a l .</ b l o c k q u o t e> ( S t e p h e n W.
¸
Hawking , " Uma Breve H i s t ´ r i a do Tempo " )
o
Por sua vez a tag address estrutura o conte´do no formato de
u
endere¸o de email.
c
E n v i e c r´ t i c a s e s u g e s t o e s p a r a <a d d r e s s>i v o . c a l a d o @ e e
ı ˜
. u f c g . edu . b r</ a d d r e s s>
46 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
75. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Blocos de texto e Frases
Estilos f´
ısicos e l´gicos
o
A linguagem HTML permite dois tipos de estilos de formata¸˜es:
co
f´
ısico e l´gico
o
Estilo f´
ısico: a formata¸˜o f´
ca ısica especifica explicitamente o
estilo que se quer para o texto: it´lico, grifado etc. Sua
a
apresenta¸˜o final n˜o sofre grande altera¸˜o entre os
ca a ca
navegadores
Estilo l´gico: a formata¸˜o l´gica segue o significado l´gico
o ca o o
do texto marcado. Deste modo, sua interpreta¸˜o depende
ca
grandemente de cada navegador
47 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
76. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Blocos de texto e Frases
Estilos f´
ısicos
<b> => Texto em negrito
<I> => Texto em it´lico
a
<TT> => Texto monoespacado (espa¸o entre letras
¸ c
reduzido)
<U> => Texto sublinhado
<strike> => Texto riscado
<big> => Texto um pouco maior
<small> => Texto um pouco menor
<sub> => Frase em estilo indice , como em H2 O
<sup> => Frase em estilo expoente , como em Km2
48 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
77. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Caracteres especiais
Problem´tica
a
Alguns caracteres como <, >, & tem significados na
linguagem e n˜o podem ser usados diretamente
a
49 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
78. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Caracteres especiais
Problem´tica
a
Alguns caracteres como <, >, & tem significados na
linguagem e n˜o podem ser usados diretamente
a
HTML foi originalmente desenvolvido tendo como base a
tabela ASCII (sem caracteres especiais)
Neste sentido, a utiliza¸˜o de tais caracteres requerem o uso
ca
de um sistema de codifica¸˜o espec´
ca ıfica
Qual seria a defini¸˜o de sistema de codifica¸˜o e quais seriam os
ca ca
exemplos?
49 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
79. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Caracteres especiais
Problem´tica
a
Alguns caracteres como <, >, & tem significados na
linguagem e n˜o podem ser usados diretamente
a
HTML foi originalmente desenvolvido tendo como base a
tabela ASCII (sem caracteres especiais)
Neste sentido, a utiliza¸˜o de tais caracteres requerem o uso
ca
de um sistema de codifica¸˜o espec´
ca ıfica
Qual seria a defini¸˜o de sistema de codifica¸˜o e quais seriam os
ca ca
exemplos?
UTF-8, ISO8859-1, latin1 ...
49 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
80. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Caracteres especiais
Exemplos de codifica¸˜o
ca
&alt; ==> <
> ==> >
& ==> &
á ==> ´
a
â ==> ˆ
a
Lista completa:
http://www.degraeve.com/reference/specialcharacters.php
50 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
81. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Caracteres especiais
Outra abordagem...
Al´m dessa abordagem, vimos uma abordagem anterior mais
e
simples, qual ´ ela?
e
51 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
82. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Caracteres especiais
Outra abordagem...
Al´m dessa abordagem, vimos uma abordagem anterior mais
e
simples, qual ´ ela?
e
<META HTTP−EQUIV=" Content - Type "
CONTENT text / html ; c h a r s e t = ISO -8859 -1 ">
="
A abordagem de caracteres especiais era mais utilizada em
navegadores antigos
51 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
83. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Cores e fontes
Cores
As cores s˜o introduzidas atrav´s do elemento FONT, usando
a e
o sistema RGB
A mesma tabela de cores que vimos pode ser utilizada para as
fontes Os valores definidos neste elemento sobrescrever os
atributos do elemento body
<FONT COLOR=" # r r ggbb ">Texto</FONT>
52 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
84. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Cores e fontes
Tamanho
Um outra forma de manipula¸˜o poss´ ´ a altera¸˜o do
ca ıvel e ca
tamanho da fonte
Fazemos uso tamb´m do elemento FONT, por´m utilizando o
e e
atributo size
O tamanho 3 ´ o valor default
e
Pode ser utilizado valores absolutos ou relativo ao default
53 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
85. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Cores e fontes
Tamanho
Um outra forma de manipula¸˜o poss´ ´ a altera¸˜o do
ca ıvel e ca
tamanho da fonte
Fazemos uso tamb´m do elemento FONT, por´m utilizando o
e e
atributo size
O tamanho 3 ´ o valor default
e
Pode ser utilizado valores absolutos ou relativo ao default
<FONT SIZE=−2>Qual ´ e s s e tamanho ?</FONT
e >
<FONT SIZE=+2>E e s s e ?</FONT >
<FONT SIZE=2>e e s s e o u t r o ?</FONT>
53 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
86. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Cores e fontes
Fontes
At´ agora, sempre utilizamos a mesma fonte
e
Por´m, ´ poss´ customizar a fonte a ser utilizada
e e ıvel
Novamente fazemos uso da tag FONT, mas com o atributo
face
<FONT FACE=" V e r d a n a " COLOR=" #0000 AA ">F o n t e Verdana a z u l
</FONT >
<FONT FACE=" Arial " COLOR=" #00 AA00 ">F o n t e A r i a l v e r d e</
FONT>
<FONT FACE=" C o u r i e r New " COLOR=" # AA0000 ">F o n t e C o u r i e r
New v e r m e l h a</FONT >
54 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
87. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Links
Usando links
Um dos mais importantes recursos do HTML ´ a capacidade
e
de referenciar outros documentos
Al´m disso ´ poss´ fazer referˆncia a pontos dentro do
e e ıvel e
pr´prio documento (chamado ˆncoras)
o a
Tudo isso ´ poss´ atrav´s da tag <a>
e ıvel e
55 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
88. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Links
Usando links
Um dos mais importantes recursos do HTML ´ a capacidade
e
de referenciar outros documentos
Al´m disso ´ poss´ fazer referˆncia a pontos dentro do
e e ıvel e
pr´prio documento (chamado ˆncoras)
o a
Tudo isso ´ poss´ atrav´s da tag <a>
e ıvel e
<A HREF = " www . g o ogle . com ">meu l i n k</A>
55 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
89. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Links
Links
Al´m disso, os seguintes atributos podem ser utilizados:
e
href: indica a URL que ser´ carregada
a
target: indica o frame em que ser´ carregado. Possibilita a
a
abertura do link em uma nova p´gina atrav´s do valor blank
a e
name: marca um ponto de referˆncia a ser utilizado como
e
ˆncora. Geralmente ´ utilizado em p´ginas Web longas para
a e a
possibilitar um retorno para um ponto espec´
ıfico
<A NAME i n i c i o "> I n d i c a d o r e s ( u s o de l i n k s )</A>
="
<A HREF=" # i n i c i o ">Topo do documento</A>
56 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
90. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Inser¸˜o de imagens
ca
Inserindo imagens
Para inser¸˜o de imagens fazemos uso da tag img, com os
ca
seguintes parˆmetros
a
src: indica a url para a imagem a ser carregada
alt: texto a ser exibido caso a imagem n˜o possa ser carregada
a
width: largura da imagem
height: altura da imagem
border: define a largura da linha que circunda a imagem
Exemplo:
<IMG SRC = " http :// l i b r a r y . t h i n k q u e s t . org / 1 5 0 7 4 / media /
html2 . gif ">
57 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
91. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Tabelas
O que s˜o?
a
As tabelas foram uma das primeiras abordagens utilizadas
para a organiza¸˜o das p´ginas Web
ca a
A ideia original era organizar a p´gina Web como uma grade,
a
onde cada parte do documento se encaixava em c´lulas
e
espec´
ıficas
58 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
92. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Tabelas
O que s˜o?
a
As tabelas foram uma das primeiras abordagens utilizadas
para a organiza¸˜o das p´ginas Web
ca a
A ideia original era organizar a p´gina Web como uma grade,
a
onde cada parte do documento se encaixava em c´lulas
e
espec´
ıficas
Deste modo, torna-se poss´ a inser¸˜o de textos,
ıvel ca
par´grafos, imagens, formul´rios, e v´rias outras formata¸˜es,
a a a co
inclusive outras tabelas!!
58 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
93. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Tabelas
Elementos b´sicos
a
Para constru¸˜es de tabelas, os seguintes elementos s˜o utilizados:
co a
Table: elemento que delimita uma tabela. Cont´m como um
e
dos atributos border para indicar apresenta¸˜o de borda:
ca
<TABLE BORDER=" borda ">
...
</TABLE>
T´
ıtulos, linhas e elementos:
Caption: define o t´ ıtulo da tabela
Tr: delimita uma linha
Th: delimita um cabe¸alho para colunas ou linhas
c
Td: delimita um elemento ou c´lula
e
59 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
94. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Tabelas
Exemplo de tabela
<TABLE BORDER=4>
<CAPTION>P r i m e i r o e x e m p l o</CAPTION>
<TR><TH o l u n a 1</TH
>C ><TH o l u n a 2</TH
>C ></TR>
<TR><TD i n h a 1 , c o l u n a 1</TD
>l ><TD l i n h a 1 , c o l u n a 2</TD
>
></TR>
<TR><TD l i n h a 2 , c o l u n a 1</TD
> ><TD l i n h a 2 , c o l u n a 2</TD
>
></TR>
</TABLE>
60 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
95. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Tabelas
Mesclando colunas e c´lulas
e
Uma das tarefas mais comuns ao se trabalhar com tabelas ´ a
e
possibilidade de mesclar v´rias colunas ou c´lulas em um
a e
unico elemento
´
Para tal, s˜o utilizados os atributos Colspan e rowspan
a
<TABLE BORDER=1>
<TR><TH COLSPAN=2>C o l u n a s 1 e 2</TH ></TR>
<TR><TD i n h a 1 , c o l u n a 1</TD
>l ><TD l i n h a 1 , c o l u n a 2</TD
>
></TR>
<TR><TD l i n h a 2 , c o l u n a 1</TD
> ><TD l i n h a 2 , c o l u n a 2</TD
>
></TR>
<TR><TH ROWSPAN=3>3 l i n h a s</TH ><TD>uma l i n h a</TD ></TR>
<TR><TD u a s l i n h a s</TD
>d ></TR>
<TR><TD t r e s l i n h a s</TD
> ></TR>
</TABLE>
61 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
96. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Tabelas
Criando tabelas sem bordas
At´ aqui, trabalhamos com tabelas que apresentam bordas
e
das c´lulas
e
Por´m, ´ poss´ eliminar as bordas, tornando a visualiza¸˜o
e e ıvel ca
mais “limpa”
Para tal, basta definir o atributo border para “0”
<TABLE BORDER=" 0 ">
...
</TABLE>
62 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
97. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Tabelas
Alinhamento
Um outro recurso, bastante interessante ´ a possibilidade de
e
alinhamento do conte´do dentro de cada c´lula. Por padr˜o, o
u e a
alinhamento segue as seguintes regras:
63 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
98. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Tabelas
Alinhamento
Um outro recurso, bastante interessante ´ a possibilidade de
e
alinhamento do conte´do dentro de cada c´lula. Por padr˜o, o
u e a
alinhamento segue as seguintes regras:
no sentido horizontal: alinhamento ` esquerda
a
no sentido vertical: alinhamento no centro da c´lula
e
63 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
99. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Tabelas
Alinhamento
Um outro recurso, bastante interessante ´ a possibilidade de
e
alinhamento do conte´do dentro de cada c´lula. Por padr˜o, o
u e a
alinhamento segue as seguintes regras:
no sentido horizontal: alinhamento ` esquerda
a
no sentido vertical: alinhamento no centro da c´lula
e
As linhas e c´lulas podem ter alinhamentos definidos atrav´s dos
e e
atributos:
ALIGN: alinhamento horizontal
VALIGN: alinhamento vertical
63 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca
100. Introdu¸˜o
ca Introdu¸ao linguagem HTML
c Formata¸˜o de texto
ca Referenciamento Tabelas e *frames
Tabelas
Exemplo
<TABLE BORDER=1>
<TR><TD >Padr˜ o</TD
a ><TD a l i g n= l e f t> a l i g n= l e f t</TD ><TD
a l i g n=c e n t e r> a l i g n=c e n t e r</TD ><TD a l i g n=r i g h t> a l i g n=
r i g h t</TD >
</ t r>
<TR><TD >Padr˜ o</TD
a ><TD v a l i g n=t o p> v a l i g n=t o p</TD ><TD
v a l i g n=m i d d l e> v a l i g n=m i d d l e</TD><TD v a l i g n=bottom>
v a l i g n=bottom</TD >
</ t r>
</TABLE>
64 / 85 Ivo Calado IFAL
Programa¸˜o para Web
ca