Livro HTML por Carlos Majer, Pesquisas de Sistemas de Informação. Universidade de São Paulo (USP)
daniele-dias
daniele-dias20 de Maio de 2017

Livro HTML por Carlos Majer, Pesquisas de Sistemas de Informação. Universidade de São Paulo (USP)

PDF (3 MB)
119 páginas
2Números de download
89Número de visitas
Descrição
libro de html por carlos majer
20pontos
Pontos de download necessários para baixar
este documento
baixar o documento
Pré-visualização3 páginas / 119
Esta é apenas uma pré-visualização
3 shown on 119 pages
baixar o documento
Esta é apenas uma pré-visualização
3 shown on 119 pages
baixar o documento
Esta é apenas uma pré-visualização
3 shown on 119 pages
baixar o documento
Esta é apenas uma pré-visualização
3 shown on 119 pages
baixar o documento
(Microsoft Word - Cole\347\343o Biblioteca Universit\341ria - 01 - HTML)

INTRODUÇÃO AO DESENVOLVIMENTO WEB HTML

Licença e Apresentação 1

PÁGINA EM BRANCO Introdução ao

Desenvolvimento

WEB - HTML Versão 2.0 Este documento aborda tópicos técnicos e conceituais

utilizados na criação da página Web, através da linguagem de

marcação HTML – Hypertext Markup Language, ideal para o

iniciante ou desenvolvedor que deseja conhecer um pouco

mais dos detalhes da linguagem padrão para criação de

páginas da Internet.

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

2 <html>

3 <head>

4 <html xmlns="http://www.w3.org/1999/xhtml">

5 <meta http-equiv="Content-Type" content="text/html;

6 charset=iso-8859-1" />

7 <title>Meu primeiro site</title>

8 </head>

9 <body>

10 Oi mundo!

11 </body>

12 </html>

2011

Professor Carlos Majer

Introdução ao Desenvolvimento WEB © 2004 ~2011

Coleção Biblioteca Universitária

INTRODUÇÃO AO DESENVOLVIMENTO WEB

Licença e Apresentação

Este livreto pertence a Carlos Consultor de TI e Professor Universitário de Tecnologia da Informação. Ele encontra disponível em www.carlosmajer.com.br/web

Introdução ao Desenvolvimento Web: HTML de Carlos Majer licenciado sob uma Licença Creative Commons Atribuição comercial-Vedada a criação de obras derivadas 3.0 Brasil http://creativecommons.org/licenses/by-nc-nd/3.0/br/

Isto significa que você PODERÁ distribuir, exibir e imprimir esta obra. Algumas restrições existem:-

 Você NÃO PODERÁ cobrar valor algum para distribuir esta obra. Caso tenha interesse comercial, entre em contato.

 Você deverá sempre fazer referência ao autor: Carlos Majer.  Você não poderá alterar ou derivar esta obra (mas poderá

citá-la em trabalhos). Caso tenha interesse em utilizar esta obra como base para criação de material para sua empresa, escola ou instituição, entre em contato.

 Você não poderá utilizar este trabalho para fins ilegais, imorais ou de forma a denegrir ou prejudicar outras pessoas ou instituições.

Para maiores informações envie um e-mail para cmajer@uol.com.br ou contato@carlosmajer.com.br ou cmajer@ig.com.br Donativo

O donativo representa um agradecimento e reconhecimento da importância

do trabalho do autor, bem como serve de incentivo para ele

desenvolvendo este tipo de material e disponibilizá-lo para o público.

Caso acredite que este material tenha lhe ajudado, envie um e

solicitando os dados da conta. Donativos a partir de R$ 5,00 são apreciados.

HTML

2

A. Majer,

-se

é -Uso não- .

copiar,

continuar

-mail

INTRODUÇÃO AO DESENVOLVIMENTO WEB HTML

Licença e Apresentação 3

DEDICATÓRIA Dedico este livreto aos alunos que conheci, de forma pessoal ou

virtual, aos amigos e professores que compartilham os mesmos

esforços e ideais, no sentido de se fazer a diferença, através da

aplicação de uma educação de qualidade, na formação do aluno e

cidadão, aos diversos colaboradores e influenciadores, que através de

seus esforços, via sites, artigos, e-mails, etc., compartilham seu

conhecimento e experiência, no sentido da difusão da informação e

conhecimento permitindo às pessoas que se esforçam, a melhoria da

qualidade de seu trabalho no dia a dia.

INTRODUÇÃO AO DESENVOLVIMENTO WEB HTML

Índice 4

CONTEÚDO Introdução à Internet ..................................................................... 7 Funcionamento da World Wide Web ............................................ 7 Conectando-se na Grande Rede ................................................... 8 IPs fixos e IPs dinâmicos ............................................................. 8 Números IPs e Resolução de Nomes ............................................ 9 URL – Uniform Resource Locator ................................................ 10 Protocolo ............................................................................... 11 Host do domínio ..................................................................... 12 Nome do domínio. .................................................................. 12 :Número da Porta ................................................................... 12

A linguagem html .......................................................................... 13 A página da Internet .................................................................. 13 Elementos da página.................................................................. 14 Versão do HTML ........................................................................ 15 Extensão HTML ou HTM ? .......................................................... 16 As marcas HTML ........................................................................ 16 Regras Básicas para criação de marcas HTML .......................... 17 Ciclo de vida .......................................................................... 17 Propriedades da marca ........................................................... 18 Marcas atuando como containeres ........................................... 19

Estrutura da página HTML .......................................................... 20 Apresentação e Estilo ................................................................. 22 Marcas e elementos básicos da página ........................................ 23 Cabeçalho .............................................................................. 23 Parágrafos ............................................................................. 24 Quebras de Linha ................................................................... 25 Comentários .......................................................................... 26

Estruturando conteúdos ............................................................. 26 Trabalhando com texto .............................................................. 28 A marca PRE .......................................................................... 28 Marcas de estilização de texto mais utilizadas .......................... 29 Entidades: Caracteres Especiais............................................... 30 Estilizando cores no texto ....................................................... 32 Estilizando tamanhos do texto ................................................. 33

INTRODUÇÃO AO DESENVOLVIMENTO WEB HTML

Índice 5

Estilizando fontes no texto ...................................................... 34 Imagens ................................................................................... 36 Formatos de imagem mais utilizados na Internet ...................... 36 Inserindo imagens na página .................................................. 37

Links ......................................................................................... 41 Criando Links Internos ............................................................ 43 Criando Links Externos ........................................................... 46 Inserindo um link numa imagem ............................................. 47 Inserindo um link numa imagem externa ................................. 47 Abrindo o link numa outra página ............................................ 49

Tabelas ..................................................................................... 49 Tamanho das células numa tabela ........................................... 50 Bordas ................................................................................... 52 Inserindo título / legenda numa tabela .................................... 53 Cabeçalhos na tabela .............................................................. 54 Cores nas Tabelas .................................................................. 54 Trabalhando o Layout das tabelas ........................................... 58 Agrupando elementos de tabelas ............................................. 65

Listas ........................................................................................ 67 Listas Ordenadas .................................................................... 67 Listas Não Ordenadas ............................................................. 69 Listas de Definição ................................................................. 72

Frameset ................................................................................... 73 Criando Frames ...................................................................... 76 Frame de Navegação .............................................................. 78 Vantagens e desvantagens no uso de frameset ........................ 80

Quadros Inseridos (In-Line Frames) ............................................ 81 Formulários ............................................................................... 82 Criando formulários ................................................................ 83 Métodos de Envio de Objetos de Formulários ........................... 84 Elementos de Formulários ....................................................... 86 Elemento Caixa de Texto ........................................................ 86 Elemento Senha ..................................................................... 89 Elemento Botão de Rádio ........................................................ 89 Elemento Caixa de Verificação ................................................. 91 Elemento Lista de Seleção ...................................................... 94 Elemento Área de Texto ......................................................... 95

INTRODUÇÃO AO DESENVOLVIMENTO WEB HTML

Índice 6

Elemento Conjunto de Campos ............................................... 96 Elemento Botão ...................................................................... 97 Elemento LABEL ..................................................................... 98 Elemento Upload de Arquivo ................................................... 99

Conjunto de caracteres ............................................................... 101 Língua ........................................................................................ 104 Seu público ............................................................................. 104

XHTML ....................................................................................... 106 XML ........................................................................................ 106 Linguagem XHTML ................................................................... 106 DTD - Definição de Tipo de Documento .................................... 107 Tipo de documento: Transitional ........................................... 108 Tipo de documento: Strict ..................................................... 108

Regras do XHTML .................................................................... 109 Proibições ............................................................................ 113

DOCTYPEs padrões .................................................................. 113 HTML 4.01 ........................................................................... 113 XHTML 1.0 ........................................................................... 114

Exemplos de Estrutura de Páginas ............................................ 114 XHTML Transitional .............................................................. 114

Conclusão ................................................................................... 116 Marcas mais usadas ................................................................. 116 Html5 ..................................................................................... 117 Layout de Páginas para Internet ............................................... 118 Contato ................................................................................... 118

INTRODUÇÃO AO DESENVOLVIMENTO WEB

Introdução à INTERNET

INTRODUÇÃO À INTERNET Funcionamento da World Wide Web

urante a guerra fria, os Estados Unidos estavam muito preocupados com a fragilidade de seu sistema de telecomunicações, e em particular, do que poderia acontecer caso sofressem um ataque dos soviéticos, o que poderia interromper a comunicação entre alguns elos (nós) de sua rede (quartéis generais, bases de silos, etc.), impedindo uma pronta resposta a um ataque nuclear.

Em função disto, foi criada a ARPANET experimental de telecomunicações do Departamento de Defesa (DoD) dos Estados Unidos. Ela era composta por diversos computadores e dispositivos conectados de tal

forma que eles poderiam se comunicar através do uso de rotas alternativas para envio de dados. Assim, caso uma rota fosse comprometida, os pacotes de dados utilizariam outras rotas chegar a seus destinos. No processo de criação e aprimoramento da ARPANET, diversas tecnologias de telecomunicações foram criadas ou adaptadas. Protocolos, números de identificação, métodos de recuperação de erro e transporte de dados, dentre outros elementos, foram desenvolvidos no sentido de viabilizar e maximizar o funcionamento desta rede. Com o tempo e o esfriamento da guerra fria, esta rede evoluiu e passou a ser utilizada também no meio acadêmico, sendo posteriormente aberta para o público geral, resultando naquilo que hoje conhecemos como teia de alcance mundial (World Wide Web) ou Internet.

D

HTML

7

-os de

, rede

para

INTRODUÇÃO AO DESENVOLVIMENTO WEB HTML

Introdução à INTERNET 8

Atualmente, a Internet caracteriza-se por ser uma grande rede de dispositivos, em sua maior parte computadores, que se interligam através de um grande cabo imaginário (backbone), através do qual os dados fluem, o que permite que as pessoas se comuniquem, trocando informações em velocidades cada vez maiores.

Conectando-se na Grande Rede

No momento da conexão de um computador com a rede, este recebe um número IP (Internet Protocol). Este número IP serve como identificação única, para este computador. Isto quer dizer que num determinado momento, cada dispositivo conectado na tem sua identificação que é única, e que possibilita à ele ser localizado e identificado por outros dispositivos.

Quando um usuário se conecta num provedor de acesso, como por exemplo, no IG ® , um de seus servidores gera um número IP para este computador. Neste momento, este computador faz parte da rede de computadores do IG,

passando a ter acesso à Internet. O processo é análogo em qualquer outro provedor, como por exemplo, do Virtua ® ou aJato ® . Sendo um dispositivo interligado na InternetNet, e tendo um número IP de identificação, ele pode efetuar consultas e solicitações por serviços na Internet. Da mesma forma, ele também passa a ser passível de varreduras, podendo ser sondado, receber solicitações de acesso, de serviços e até ser invadido (ao menos enquanto estiver conectado na rede).

IPs fixos e IPs dinâmicos

A diferença entre uma conexão que utiliza um IP fixo e uma que utiliza um IP dinâmico é a de o IP fixo nunca muda. Exemplos típicos de IPs fixos são os das servidores que hospedam páginas web. Exemplos típicos de IPs dinâmicos são aqueles utilizados por usuários

@

INTRODUÇÃO AO DESENVOLVIMENTO WEB

Introdução à INTERNET

de diversos tipos de provedores, especialmente os de conexão via linha discada, que ao conectar num provedor de acesso recebem um número IP que esteja disponível, que provavelmente não será (mas em alguns casos pode ser) igual ao da última vez que acessou.

Números IPs e Resolução de Nomes

Cada byte, sendo composto de 8 bits pode conter até 256 combinações diferentes (de 0 até 255). Um número IP é um conjunto de 4 bytes separados por um ponto, utilizando este formato de endereçamento de bits. Exemplo do site da UOL (outubro de 2010): 200.221.2.45

O número IP de um servidor, pode ser mudado pel empresa, de forma que não é seguro utilizar números IPS em links permanentes.

Como é mais simples de se lembrar de um nome do que de um número IP, foi criada uma maneira para se utilizar nomes do que

ping www.uol.com.br

Disparando www.uol.com.br [200.221.2.45] com 32 bytes de

dados:

Resposta de 200.221.2.45: bytes=32 tempo=7ms TTL=55

Resposta de 200.221.2.45: bytes=32 tempo=8ms TTL=55

Resposta de 200.221.2.45: bytes=32 tempo=7ms TTL=55

Resposta de 200.221.2.45: bytes=32 tempo=8ms TTL=55

Estatísticas do Ping para 200.221.2.45:

Pacotes: Enviados = 4, Recebidos = 4, Perdidos = 0 (0% de

perda),

Aproximar um número redondo de vezes em milissegundos:

Mínimo = 7ms, Máximo = 8ms, Média = 7ms

C:\>

HTML

9

-

a

INTRODUÇÃO AO DESENVOLVIMENTO WEB HTML

Introdução à INTERNET 10

números. O serviço DNS (Domain Name Server) efetua a resolução de nomes, associando os números IPs à nomes (alias) que ficam armazenando em tabelas nos servidores da Internet, que efetuam constantes trocas de tabelas entre si, para ficarem sempre atualizados. Isto quer dizer que você pode digitar no seu navegador tanto 200.221.2.45 quanto www.uol.com.br, para acessar o site da UOL. Que tal tentar?

URL – Uniform Resource Locator

Diversos serviços podem ser encontrados nos computadores conectados na Internet. Os mais comuns são:-

 Servidor WEB (Internet)  Servidor FTP  Servidor de e-Mails  Servidor de Notícias  Servidor de Banco de Dados

Os computadores que têm softwares que provêm (servem) estes serviços são conhecidos como servidores. URL significa Uniform Resource Locator, ou seja, Localizador de Recurso Uniforme e é a forma pela qual formatamos o endereçamento para acesso a um determinado recurso da Internet. A Estrutura da URL é definida da seguinte forma:-

1) Protocolo 2) Domínio 3) Porta de Acesso 4) Pasta

URI significa Uniform Resource Identifier, ou seja, Identificador de Recurso Uniforme e é a formatação para se acessar um recurso específico, como por exemplo, uma página web.

INTRODUÇÃO AO DESENVOLVIMENTO WEB HTML

Introdução à INTERNET 11

Para formatamos um URI, adicionamos o nome do recurso na URL. Exemplo:-

1) Protocolo 2) Domínio 3) Porta de Acesso 4) Pasta 5) Arquivo

Vamos ver estes itens em detalhe:-

Protocolo

O protocolo é como se fosse uma língua, que as partes utilizam para se comunicar. Em telecomunicações, um protocolo é a maneira pela qual as duas pontas (remetente e destinatário) se comunicam, na troca de informações (pacotes de dados). Em geral, um programa faz uma solicitação e o servidor sabe o que deve enviar. Um exemplo bem prático disto é o do navegador web solicitando uma página de um servidor. O usuário em seu navegador (cliente), tenta acessar uma página:-

Assim que o usuário teclar ENTER, o navegador, por padrão, insere o texto HTTP (Hyper Text Transfer Protocol), na frente do nome de página:-

O navegador faz isto para que o servidor (computador que irá receber a solicitação, localizado no endereço fornecido acima) ao receber a solicitação de abertura de página consiga passar esta

INTRODUÇÃO AO DESENVOLVIMENTO WEB HTML

Introdução à INTERNET 12

responsabilidade (localizar e disponibilizar a página) para o software correto (software servidor web. Os mais conhecidos são Microsoft IIS – Internet Information Services ou Apache). Sem o uso do protocolo, o servidor (computador) não saberia como tratar a informação que está vindo, para atender a demanda. Com base neste protocolo, o servidor web (software que está rodando no computador servidor) identifica a solicitação web (http), localiza a página desejada e devolve-a ao navegador. Os protocolos mais comuns são:- Protocolo Utilização http:// Localiza um recurso (página www, imagem, etc) num

servidor Web ftp:// Localiza um arquivo num servidor FTP news:// Localiza um servidor de notícias na Web file:// Localiza um arquivo num computador ou rede local

Host do domínio

Quando não informado, o host é assumido como www.

Nome do domínio.

É o nome pelo qual seu domínio foi registrado na entidade de registro de domínios de seu país. No Exemplo abaixo estará sendo utilizado o domínio da UOL (uol.com.br)

:Número da Porta

Como um dispositivo (computador) pode ter diversos serviços disponíveis (veja lista acima) , e considerando que o endereço do dispositivo é único, a maneira pela qual ele disponibiliza seus serviços é através do uso de portas. As portas são identificações específicas de certos serviços, e muitas vezes sua utilização se dá de forma transparente, sem que o usuário note sua utilização.

INTRODUÇÃO AO DESENVOLVIMENTO WEB HTML

Introdução à INTERNET 13

Os navegadores estão configurados para acessar um endereço na Internet através da porta 80, que é a porta padrão para acesso web da Internet. Alguns exemplos de portas são:- Porta Uso 20 e 21 Serviço FTP 23 Telnet 25 SMTP - Simple Mail Transfer Protocol

Para Envio de e-Mails 53 DNS – Domain Name Server 80 INTERNET – Porta de acesso para serviço de página 109 e 110 POP – Post Office Protocol – Para Recebimento de e-

Mails 119 NNTP – Network News Transfer Protocol

Para recebimento de Notícias Vamos destrinchar um endereço de um recurso na Internet:- http://www.cidadesp.edu.br:8080/pastavirtual/docs/historia.html

HTTP:// É o protocolo padrão da Internet www.cidadesp.edu.br Compõe o computador host e domínio

consultado 8080 Identifica uma porta no domínio consultado pastavirtual Identifica uma pasta dentro do domínio docs Identifica uma subpasta historia.html Identifica o recurso desejado que é um

arquivo/página

A LINGUAGEM HTML A página da Internet

HTML significa Hyper Text Markup Language, que traduzida para o português significa Linguagem de Marcação de Hipertexto. Esta

INTRODUÇÃO AO DESENVOLVIMENTO WEB

A Linguagem HTML

linguagem permite a utilização de um conjunto de comandos para disponibilização de conteúdo para Internet. A página web nada mais é do que um arquivo HTML arquivo de texto, ou seja, pode ser aberto e editado pelo Notas ou qualquer programa editor de textos simples Dreamweaver, Notepad++ e Microsoft Expression Web Este arquivo, após sua criação, é copiado em conjunto com outros (imagens, vídeo, áudio, etc.) para um computador (servidor) que tenha um software (Apache, IIS, etc.) que ofereça páginas para Internet. Estes arquivos compõem os elementos de um site que fica disponível a quem acessá-lo. O usuário acessará o arquivo, através de seu navegador, que o lerá e interpretará seus comandos (marcas) de forma a exibir (desenhar) a página em seu monitor. Em função de seu formato aberto, não proprietário e padronizado, este tipo de arquivo pode ser visualizado em diversas plataformas, dentre elas Windows, Linux, Unix, Macintosh, nos mais diversos navegadores:-

Mozilla Firefox

Internet Explorer

Google Chrome

Apple Safari

Opera

Elementos da página

Uma página web pode conter diversos tipos de elementos: • Texto: É o tipo de informação mais comum em páginas da

INTERNET. Costumam ser dispostos em diversos tamanhos e cores, despertando o interesse do usuário.

HTML

14

que é um Bloco de , como .

KDE Konkeror

-

INTRODUÇÃO AO DESENVOLVIMENTO WEB HTML

A Linguagem HTML 15

• Link: O link é a base de funcionamento da web, visto que se baseia no conceito de Hipertexto, no qual um texto (ou parte dele) ao ser clicado pode conduzir o usuário para um outro texto, localizado em qualquer local do documento (página). O mesmo ocorre com outros tipos de mídia (hipermídia).

• Imagem: Diversos tipos de imagens são utilizados para enriquecer a experiência do usuário na rede. Dentre elas podemos destacar as imagens estáticas, geralmente nos padrões JPEG e PNG, as imagens animadas no formato GIF.

• Animação principalmente as feitas em FLASH e Silverlight, como também as disponibilizadas pelo HTML5.

• Elementos de Formulário: Os formulários representam um meio para se coletar informações do usuário, de forma padronizada. São utilizados para muitos fins, dentre eles o de se cadastrar o usuário no site para receber informações, inserir pedidos de informações específicas, efetuar buscas de informações diversas, efetuar pedidos de compras, etc.

• Arquivo de Áudio: O arquivo de áudio é uma forma útil e diferenciada para o envio de informação, especialmente quando o usuário tem problemas de acessibilidade (Exemplo: Dificuldades com a visão).

• Arquivo de Vídeo: Atualmente muito em uso, os arquivos de vídeo inseridos em páginas web permitem uma maior facilidade na transmissão da informação, além do que, também serve como ferramenta de marketing e propaganda.

• Jogos e aplicações Java: Diversos tipos de aplicações estão sendo construídos para Internet através da utilização da linguagem Java, dentre elas acesso a bancos, interfaces com dispositivos diversos, jogos e muito mais.

Versão do HTML

O HTML tem evoluído regularmente e a cada nova versão ele traz diferentes formas de se desenvolver a página Internet.

INTRODUÇÃO AO DESENVOLVIMENTO WEB HTML

A Linguagem HTML 16

A versão atualmente em uso do HTML é a 4.01, porém o mercado trabalha arduamente nas definições para liberação do HTML versão 5, que trará novos elementos e certamente será um marco na história desta linguagem. Neste meio tempo, uma fusão entre o HTML 4.01 e o XML (iremos verificar futuramente, neste documento) gerou o XHTML 1.0, que permite uma forma de padronizar o uso e funcionamento das tecnologias relacionadas ao uso e desenvolvimento de elementos na página web.

Extensão HTML ou HTM ?

Pode ser utilizada tanto uma quanto a outra. Em função de restrições de alguns sistemas operacionais antigos (DOS), os arquivos só podiam utilizar três letras em sua extensão. Hoje, não importa qual a extensão utilizada, pois ambas são válidas e aceitas nos sistemas operacionais mais em uso.

As marcas HTML

Ao examinarmos o conteúdo de um arquivo HTML, notamos a existência de comandos, conhecidos também como marcas (ou tags, em inglês), que são lidas pelo navegador do usuário e instruem o navegador a inserir os conteúdos a ser exibido na tela. As marcas são conhecidas pelos navegadores e seguem a especificação definida para o HTML. Isto significa que não é correto escrever qualquer coisa. O HTML permite que você escreva a marca em qualquer tipo de caixa (maiúscula, minúscula ou ambas, misturadas), porém, caso você altere seu arquivo para XHTML (explicado adiante), você deverá deixar todas as marcas em minúsculo.

INTRODUÇÃO AO DESENVOLVIMENTO WEB HTML

A Linguagem HTML 17

Regras Básicas para criação de marcas HTML

Para inserir uma marca HTML, devemos seguir algumas regrinhas:- • Toda marca começa com um sinal de menor e termina com

um sinal de maior • Logo após o sinal de menor não pode existir espaço (Se

colocar não vai funcionar) • A marca inserida deve ser reconhecida pelo navegador (caso

contrário, o navegador irá ignorá-la) Exemplo de marca simples:-

<hr>

A marca hr (do inglês Horizontal Ruler) instrui o navegador a desenhar uma linha horizontal. Esta linha régua ocupa a linha inteira onde foi inserida.

Ciclo de vida

Através da continua evolução da tecnologia, certas marcas HTML vão se tornando obsoletas (depreciadas), ou seja, deixando de ser utilizadas. Outras são trocadas por marcas ou tecnologias mais novas. Isto é uma evolução natural. O ciclo de vida das marcas HTML é basicamente o seguinte:- Concepção  Proposta  Especificação  Depreciação  Obsoletismo Fase Descrição Concepção Quando a marca é concebida para uso em

determinadas circunstâncias. Proposta A marca (ou tecnologia) é enviada para o W3C que

irá verificar vantagens e viabilidade de implementação

Especificação Ocorre quando uma marca (ou tecnologia) é aceita pelo W3C e faz parte da especificação de uma versão do HTML.

INTRODUÇÃO AO DESENVOLVIMENTO WEB

A Linguagem HTML

Depreciação Quando uma marca (ou tecnologia) é trocada por outra melhor, mas deve ainda ser suportada pelos navegadores por questões de compatibilidade com versões de páginas anteriores.

Obsoleta Quando uma marca (ou tecnologia) é considerada obsoleta de forma que não existe mais garantia de que a mesma será suportada por um navegador.

Embora algumas marcas possam ser consideradas depreciadas, pois foram trocadas por outras mais consistentes com seu uso, é comum o fato das mesmas continuarem a ser utilizadas por um bom tempo, que a comunidade absorva e utilize com regularidade as novas terminologias. Isto significa que futuramente, certas marcas não passarão no teste de validação de páginas para Internet, mas isto é algo a ser estudado futuramente. As definições sobre padrões Internet são efetuadas pelo W3C Wide Web Consortium.

Nos próximos exemplos irei exibir apenas o trecho de código HTML desejado. O desenvolvedor deverá sempre digitar as seções da páginas HTML (<html>, <head> e <body> seus respectivos conteúdos e par finalizador. Os trechos exemplificados deverão ser inseridos dentro da seção <body>.

Propriedades da marca

A maior parte das marcas precisa de informações complementares para definição do que deve como deve ser exibido na página do navegador. As propriedades das marcas são utilizadas para isto.

HTML

18

até

– World

), com

INTRODUÇÃO AO DESENVOLVIMENTO WEB HTML

A Linguagem HTML 19

Elas podem ter valores informados que informam ou modificam a maneira pela qual o conteúdo será visualizado pelo usuário. Exemplo de marca com propriedade e valor:-

<img src="imagem.jpg">

A marca img, acima, exibe a imagem, no navegador, com base no arquivo imagem.jpg, informado na propriedade src (source = origem do arquivo).

Marcas atuando como containeres

Algumas marcas desenvolvem ação única, como as exibidas nos exemplos acima. Porém, a grande maioria das marcas permite conter/encapsular algum tipo de conteúdo, como por exemplo, um trecho de texto. Ocorre que para isto é necessário que a marca funcione como um bloco (ou uma espécie de uma caixa), para conter este texto. Neste sentido, a marca inicia num determinado lugar e finaliza em outro.

<p>Eu sou um parágrafo</p>

Para marcas que funcionam como containeres, o encerramento da marca é determinado pelo seu par finalizador, que nada mais é do que a própria marca aplicada no final do conteúdo contido, porém, precedida de um sinal de barra “/” logo após o sinal de maior “>”. Isto permite que a página HTML tenha elementos de diversos tipos (incluindo texto livre/solto). Veja:-

INTRODUÇÃO AO DESENVOLVIMENTO WEB

A Linguagem HTML

A página Web pode ter vários elementos. <p> O parágrafo é um

deles.</p>

Qualquer conteúdo inserido antes e depois da marca de parágrafo é

exibido em linhas diferentes. Isto é algo que a marca p (parágrafo)

faz automaticamente, na página HTML.

ATENÇÃO Marcas criadas de forma incorreta:-

< hr> Marca tem um espaço logo após o sinal de menor

<linha> Marca não reconhecida pelos navegadores

Escreva as marcas em minúsculo, assim, quando você pensar em alterar seu arquivo do formato HTML para XHTML (comentado futuramente), sua página já estará parcialmente pronta.

Estrutura da página HTML

Uma página HTML é uma estrutura de marcas, dentro de outras marcas e, naturalmente, seus conteúdos. Ela é delimitada pelas marcas:-

<html> .... </html>

Dentro dela temos uma área de cabeçalho, onde inserimos alguns comandos de configuração e é criada através das marcas:

<head> .... </head>

Em seguida existe uma segunda área, que é a área do corpo da página, que irá abrigar o conteúdo a ser exibido na tela do navegador. Esta área é criada através das marcas:-

<body> .... </ body >

HTML

20

-

INTRODUÇÃO AO DESENVOLVIMENTO WEB

A Linguagem HTML

A seguir notamos um exemplo da estrutura em código HTML de uma página web:-

1 <html>

2 <head>

3 <title>Minha primeira página</title>

4 </head>

5 <body>

6 Seja bem vindo (a) à minha primeira página HTML.

7 </body>

8 </html>

E em seguida como ela é exibida no navegador Safari:-

HTML

21

INTRODUÇÃO AO DESENVOLVIMENTO WEB

A Linguagem HTML

Para verificar como está ficando sua página, salve numa pasta (diretório) e em seguida abra de seu navegador. Clicando duplamente no arquivo gerado irá automaticamente acionar seu navegador padrão (Firefox, Microsoft Internet Explorer) para a abertura da página web. O conteúdo de uma página web fica em cache, que é uma espécie de memória temporária que o seu navegador utiliza para agilizar o carregament uma página. Muitas vezes, ao tentar abrir-se uma página, o conteúdo que aparece é o que está neste cache (e não a página que acabou de ser alterada e salva). Quando isto ocorrer, utilize o botão de recarga de página (geralmente F5) do Navegador para seu cache com o conteúdo atualizado da página.

Apresentação e Estilo

As marcas HTML permitem a inserção de conteúdo na página web. O tipo mais comum de conteúdo é o texto. Algumas marcas HTML podem ser usadas para estilizar um trecho de texto (Exemplo: Cor do texto, tamanho e família de fonte). Outras marcas têm propriedades

HTML

22

-a -a através

o de

atualizar

INTRODUÇÃO AO DESENVOLVIMENTO WEB HTML

A Linguagem HTML 23

(cor de fundo, borda, etc.) que também podem ser usadas para estilizar o texto ou outro elemento HTML (tabelas, imagens, etc.). Com o advento do CSS (tecnologia que permite separar o conteúdo do estilo de apresentação), a apresentação dos conteúdos se dá de maneira muito mais fácil e permite redução do código, redução dos erros, rapidez na manutenção e na carga de páginas. Assim, logo após o estudo do HTML, indico o estudo do CSS. O objetivo em mostrar a maneira pela qual o desenvolvedor pode estilizar os conteúdos através das marcas HTML, dentro deste livro, se dá em função da necessidade do conhecimento, pelo leitor, da linguagem HTML e suas possibilidades de uso.

Marcas e elementos básicos da página

Cabeçalho

Cabeçalhos são elementos de formatação similares (Títulos, subtítulos, etc.) aos encontrados em livros e documentos relacionados. Eles são criados através das marcas <h1> (Tamanho maior) até <h6> (Tamanho menor), são formatados em negrito e comportam-se como parágrafos. Exemplo:-

<h1>Cabeçalho do tipo h1</h1>

<h2>Cabeçalho do tipo h2</h2>

<h3>Cabeçalho do tipo h3</h3>

<h4>Cabeçalho do tipo h3</h4>

<h5>Cabeçalho do tipo h5</h5>

<h6>Cabeçalho do tipo h6</h6>

INTRODUÇÃO AO DESENVOLVIMENTO WEB

A Linguagem HTML

Quando uma marca de cabeçalho é inserida na página, ela ocupará uma linha para seu conteúdo, deslocando elementos posteriores para a linha de baixo. Note que a marca aplica uma margem entre o elemento inferior e superior (para cima e para baixo).

Parágrafos

Os parágrafos são criados através da marca <p> e de forma similar aos encontrados em livros, são utilizados para agrupar, bloco, um trecho de texto. Exemplo:-

<p>Eu sou um parágrafo</p>

<p>Eu sou outro parágrafo</p>

HTML

24

num único

INTRODUÇÃO AO DESENVOLVIMENTO WEB

A Linguagem HTML

Note que de forma similar à marca de cabeçalho, a marca de parágrafo também aplica uma margem entre o elemento inferior e superior (para cima e para baixo).

Quebras de Linha

Quebras de linha são criadas através da marca <br>. Ela deve ser utilizada quando se deseja forçar uma nova linha. Note que se esta marca for inserida no meio de um texto, o conteúdo após esta marca é exibido na linha de baixo. Exemplo:-

<p>O conteúdo desta linha foi <br>quebrado para a linha

baixo</p>

Atualmente, não podemos ter a certeza onde a página será exibida, isto é, se num monitor de 23 polegadas widescreen, ou dispositivo do tipo Tablet (iPad), SmartPhone ou numa televisão. Querer forçar um determinado layout através do uso de espaços e quebra de linhas pode não gerar o mesmo resultado esperado, caso a página seja exibida em dispositivos diversos. É o navegador quem verifica a resolução de vídeo (número de linhas e colunas) e adapta o conteúdo a ser exibido, ajustando o texto e outros elementos da página, conforme o tamanho da janela no dispositivo utilizado.

A configuração dos navegadores e a configuração do vídeo do usuário fazem com que seja muito difícil um site ser exibido exatamente igual em dois

HTML

25

<br>de

parágrafos,

comentários (0)
Até o momento nenhum comentário
Seja o primeiro a comentar!
Esta é apenas uma pré-visualização
3 shown on 119 pages
baixar o documento