Linguagem de Programação HTML, Notas de estudo de Linguagem de Programação

Baixe Linguagem de Programação HTML e outras Notas de estudo em PDF para Linguagem de Programação, somente na Docsity!

< P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > 1

Universo

Minas

< P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com >

< P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com >

< P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com >

• 1. Introdução __________________________________________________________________________
  • 1.1. Internet _________________________________________________________________________
  • 1.2. Intranet _________________________________________________________________________
  • 1.3. WWW (World Wide Web) __________________________________________________________
  • 1.4. Web ___________________________________________________________________________
  • 1.5. Hipertexto _______________________________________________________________________
  • 1.6. Links ou Hyperlinks ________________________________________________________________
  • 1.7. Home Page_______________________________________________________________________
  • 1.8. Site ____________________________________________________________________________
  • 1.9. Browsers (Navegadores da Web)______________________________________________________
  • 1.10. Protocolo ______________________________________________________________________
  • 1.11. Protocolo HTTP (HyperText Transfer Protocol)__________________________________________
  • 1.12. Protocolo FTP (File Transfer Protocol) ________________________________________________
    • 1.12.1. FTP Anônimo _______________________________________________________________
  • 1.13. URL (Uniform Resource Locator) ____________________________________________________
    • 1.13.1. URL Absoluto_______________________________________________________________
    • 1.13.2. URL Relativo________________________________________________________________
    • 1.13.3. Endereço___________________________________________________________________
    • 1.13.4. Entendendo uma URL _________________________________________________________
  • 1.14. ISP (Internet Service Provider) ______________________________________________________
    • 1.14.1. Provedores _________________________________________________________________
    • 1.14.2. Seu Site na Grande Rede _______________________________________________________
    • 1.14.3. Login _____________________________________________________________________
  • 1.15. Resolução _____________________________________________________________________
• 2. HTML (HyperText Markup Language)_____________________________________________________
  • 2.1. TAGs __________________________________________________________________________
  • 2.2. Estrutura Básica__________________________________________________________________
    • 2.2.1. Início e Fim do Documento ______________________________________________________
    • 2.2.2. Definições Lógicas sobre o Documento_____________________________________________
    • 2.2.3. Título da Página ______________________________________________________________
    • 2.2.4. Conteúdo da Página ___________________________________________________________
  • 2.3. TAG com Atributos _______________________________________________________________
• 3. Estrutura da Página ___________________________________________________________________
  • 3.1. HTML ... ____________________________________________________________
  • 3.2. HEAD ... ___________________________________________________________
    • 3.2.1. Elementos presentes em HEAD___________________________________________________
    • TITLE ______________________________________________________________
    • SCRIPT __________________________________________________________
    • META ____________________________________________________________________
  • 3.3. BODY ... ___________________________________________________________
    • Atributos de BODY________________________________________________________________
• 4. META TAGs _________________________________________________________________
• 5. Caracteres Especiais e Acentuação _______________________________________________________
     • 5.1. Por que usar estas formatações? ___________________________________________________
• 6. Cores Através de Valores Hexadecimais ____________________________________________________
• 7. Comentários ________________________________________________________________________
• 8. Controles de Formatação_______________________________________________________________
  • 8.1. Títulos / Subtítulos _______________________________________________________________
  • 8.2. Controles "Físicos"de Formatação de Texto _____________________________________________
  • 8.3. Controles de Fontes _______________________________________________________________
    • 8.3.1. FONT ... _________________________________________________________
    • 8.3.2. BASEFONT ________________________________________________________
  • 8.4. Formatação de Parágrafos __________________________________________________________
  • 8.5. Quebra de Linha__________________________________________________________________
  • 8.6. O TAG Blockquote

    ...

    ________________________________________
  • 8.7. O TAG DIV
    ...
    __________________________________________________________
  • 8.8. O TAG PRE

    ...

    __________________________________________________________
  • 8.9. O TAG CENTER ... __________________________________________________
  • 8.10. O TAG NOBR ... _____________________________________________________
• 9. Listas _____________________________________________________________________________
  • 9.1. Listas Ordenadas _________________________________________________________________
  • 9.2. Elementos LI
  • .
  ___________________________________________________________
  • 9.3. Listas Não Ordenadas _____________________________________________________________
  • 9.4. Listas de Definição________________________________________________________________
• 10. Links _____________________________________________________________________________
  • 10.1. Links para dentro da própria página __________________________________________________
  • 10.2. Para outras páginas de um mesmo Site ________________________________________________
  • 10.3. Links para outros Sites ____________________________________________________________
  • 10.4. Link especial: "mailto" ____________________________________________________________
• 11. Imagens __________________________________________________________________________
• 12. Formatos de Imagens_________________________________________________________________
  • 12.1. Usando o GIF (Graphics Interchange Format) ___________________________________________
  • 12.2. Usando o JPEG (Joint Photographic Experts Group) ______________________________________
  • 12.3. Sobre o PNG (Portable Networ Graphics)_______________________________________________
  • 12.4. Imagens no Browser______________________________________________________________
• 13. Mapas Sensitivos ___________________________________________________________________
  • 13.1. Definição ______________________________________________________________________
  • 13.2. Descrição______________________________________________________________________
• 15. Tabelas ___________________________________________________________________________
• 15. Espaçamento (Netscape Navigator) ______________________________________________________
• 16. Marquee (Microsoft Internet Explorer) ____________________________________________________
• 17. Formulários ________________________________________________________________________
  • 17.1. Envio de Arquivos _______________________________________________________________
  • 17.2. FORM FIELD - Exemplos __________________________________________________________
    • 17.2.1. One-Line Text Box____________________________________________________________
    • 17.2.2. Scolling Text Box_____________________________________________________________
    • 17.2.3. Check Box__________________________________________________________________
    • 17.2.4. Radio Button________________________________________________________________
    • 17.2.5. Drop-Down Menu____________________________________________________________
    • 17.2.6. Push Button ________________________________________________________________
• 18. Som______________________________________________________________________________
  • 18.1. Controles de Som do Microsoft Internet Explorer ________________________________________
    • BGSOUND (Microsoft Internet Explorer) _______________________________________
    • Atributos de BGSOUND ____________________________________________________________
  • 18.2. Controles de Som no Netscape Navigator______________________________________________
• 19. Frames ___________________________________________________________________________
  • 19.1. Definição ______________________________________________________________________
  • 19.2. Documentos de Layout e Documentos de Conteúdo______________________________________
    • 19.2.1. Documentos de Layout ________________________________________________________
    • 19.2.2. Documentos de Conteúdo______________________________________________________
  • 19.3. TAGs e Atributos Básicos _________________________________________________________
  • 19.4. Frames Sobrepostas Diretamente e Indiretamente ________________________________________
  • 19.5. Links em Frame Alvo _____________________________________________________________
• 20. SSI (Server Side Include) ______________________________________________________________
• 21. Etapas para Criação de um Site__________________________________________________________
  • 21.1. Planejamento ___________________________________________________________________
  • 21.2. Coleta de Material _______________________________________________________________
  • 21.3. Direção Editorial_________________________________________________________________
  • 21.4. Design ________________________________________________________________________
  • 21.5. Programação ___________________________________________________________________
  • 21.6. Divulgação_____________________________________________________________________
  • 21.7. Manutenção____________________________________________________________________
• 22. DHTML (HTML Dinâmico) ____________________________________________________________
• 23. XML (Extensible Markup Language) _____________________________________________________
• 24. Editores de HTML___________________________________________________________________
• 25. WebMails _________________________________________________________________________
• 26. Definições _________________________________________________________________________
• 26.1. Programas CGI (Commom Gateway Interface) ___________________________________________
• 26.2. Client Side _____________________________________________________________________
• 26.3. ASP (Active Server Pages)_________________________________________________________
• 26.4. PHP (Personal Home Page)_________________________________________________________
• 26.5. Criptografia ____________________________________________________________________
• 26.6. Plug-In ________________________________________________________________________
• 26.7. Applet ________________________________________________________________________
• 26.8. Servlet ________________________________________________________________________
• 26.9. Cookie ________________________________________________________________________
• 26.10. Download_____________________________________________________________________
• 26.11. Upload _______________________________________________________________________
• 26.12. RGB _________________________________________________________________________
• 26.13. CMYK _______________________________________________________________________

< P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > 7

Firewall (Parede de Fogo)

Firewall é um método para proteger os arquivos e programas em uma rede contra usuários em outra rede. Um firewall bloqueia o acesso indesejado a uma rede protegida, enquanto fornece à rede protegida o acesso às redes fora do firewall. Uma empresa geralmente irá instalar um firewall para dar aos usuários acesso à Internet enquanto protege as informações internas.

1.3. WWW (World Wide Web)

(Ampla Rede Mundial)

WWW é a sigla de World Wide Web que significa Rede Mundial (a grande rede de computadores interligados no mundo todo). A World Wide Web é resultado de um projeto para uma melhor distribuição de informações a grupos de pesquisas iniciado no ano de 1989 por cientistas do CERN (Centro European Researche Nucleare) laboratório de física sediado em Genebra, na Suiça, com o intuito de facilitar a comunicação interna e externa.

Antes da WWW, os cientistas, assim como toda a comunidade Internet, necessitavam de uma série de programas distintos para localizar, buscar e visualizar as informações.

Ao final de 1990, os pesquisadores no CERN possuiam um browser baseado em modo texto. Durante o ano de 1991 a WWW foi liberada para uso geral no CERN. Durante o ano de 1992, o CERN começou a anunciar o projeto WWW. No entanto, apenas em fins de 1993 a World Wide Web iniciou sua fase de crescimento explosivo, com a introdução da versão final do software NCSA Mosaic, um browser, para a comunidade Internet.

Muitos browsers foram desenvolvidos para muitos sistemas de computadores. Em 1994, a WWW já havia se tornado uma das formas mais populares de acesso aos recursos da Internet.

O objetivo inicial era, portanto, centralizar em uma única ferramenta as várias tarefas necessárias para se obter as informações disponíveis na Internet.

Usuários de todo o mundo foram atraídos pela forma simples e divertida que a WWW disponibilizava o conteúdo da Internet.

A organização World Wide Web Consortium (W3C) é responsável pela padronização do HTML. A especificação original do HTML foi desenvolvida, no CERN, por Tim Berners-Lee atual Preisidente do W3C, que transformou sua obra em patrimônio coletivo dos internautas.

A versão padrão do HTML hoje é a 4.0. Entretando algumas versões de Browsers ainda interpretam somente a versão 3.2 do HTML.

1.4. Web

< P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > 8

Web é o diminutivo para World Wide Web. Termo usado originalmente para a parte da Internet que surgiu no início da década de 90, composta por informações dispostas na forma de textos, imagens e sons, pela qual se navega com a ajuda de Browsers. Antes, trocava-se basicamente mensagens. As duas redes acabaram se fundindo e hoje a palavra Web é usada como sinônimo da própria Internet ("Grande Rede").

1.5. Hipertexto

Originalmente, Hipertexto é qualquer informação de texto em um computador, que contenha saltos para outras informações.

Os documentos visualizados através dos Browsers são escritos em Hipertextos, utilizando-se uma linguagem especial chamada HTML (HyperText Markup Language).

Através de hipertexto pode-se "navegar" de forma especial através de elementos especiais chamados "links" para outros documentos ou para partes do mesmo documento.

Um documento "não-hipertexto" permite somente que se navegue em uma sequência, percorrendo seu conteúdo para frente e para trás.

O hipertexto nas páginas da Web foi expandido para incluir hyperlinks a partir de texto, de uma figura, de um elemento gráfico, de mapas de imagens, som e até mesmo animações.

Para se ter uma idéia de hipertexto, basta visualizar o sistema de "Ajuda" do Microsoft Windows.

1.6. Links ou Hyperlinks

Link é um ponto de acesso ou salto até um local na mesma pasta de trabalho ou em outro arquivo, representado a partir de texto colorido ou sublinhado, de uma figura, de um elemento gráfico ou de um mapa de imagens.

Você pode clicar em um link para saltar até um local em um arquivo em seu sistema local, em um compartilhamento de rede na World Wide Web ou em uma Intranet.

1.7. Home Page

Home Page é um conjunto de "páginas", documentos diponíveis na Web, interligados entre si (através de links). O termo Home Page também é usado para designar a "página principal" de um conjunto de documentos. Um conjunto de "páginas" também é chamado de Site.

Alguns Servidores da Web reservam index.htm como o nome da home page (página principal), enquanto outros a denominam como default.htm.

< P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > 10

Internet Explorer Mozilla Firefox

1.10. Protocolo

Protocolo é um conjunto de regras estabelecidas com o objetivo de permitir a comunicação entre computadores. É um método de acesso a um documento ou serviço através da Internet, como File Transfer Protocol (FTP) ou Hypertext Transfer Protocol (HTTP). Também denominado tipo.

1.11. Protocolo HTTP (HyperText Transfer Protocol)

(Protocolo de Transferência de Hipertexto)

HTTP é um protocolo da Internet utilizado pelos computadores ligados à Web para comunicar-se entre si, ativa os navegadores da Web para recuperarem informações de servidores da World Wide Web.

O protocolo permite a um usuário usar um programa cliente para entrar em um URL (ou clicar em um hyperlink) e recuperar texto, elementos gráficos, som e outras informações digitais de um servidor da Web.

Endereços URL de recursos HTTP começam com http://

1.12. Protocolo FTP (File Transfer Protocol)

(Protocolo de Trasferência de Arquivo)

FTP é um protocolo que possibilita a transferência de arquivos de um local para outro pela Internet.

Normalmente, os sites têm áreas públicas de FTP, permitindo que os usuários façam download de programas por esse processo.

< P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > 11

Protegido por senhas, o FTP também é utilizado para atualizar a distância sites localizados em empresas hospedeiras.

URLs de arquivos em servidores FTP começam com ftp://

1.12.1. FTP Anônimo

A capacidade de acessar um sistema de computador remoto onde não se tem nenhuma conta, através do File Transfer Protocol (FTP - Protocolo de Transferência de Arquivo).

Os usuários têm direitos de acesso restritos com o FTP Anônimo e, geralmente, podem somente listar, exibir ou copiar arquivos para ou a partir de um diretório público no sistema remoto.

Muitos sites FTP não permitem o acesso ao FTP Anônimo para manter a segurança.

1.13. URL (Uniform Resource Locator)

(Localizador de Recursos Uniforme)

Um dos principais objetivos do projeto da WWW era o desenvolvimento de um padrão de referência a um item independente de seu tipo (som, filme, imagem, etc.). Para este objetivo foi desenvolvido a URL (Uniform Resource Locator).

URL (Uniforme Resource Locator, numa tradução literal, Localizador Uniforme de Recursos) é uma seqüência de caracteres que fornece o endereço Internet de um Site da Web ou um recurso da World Wide Web, juntamente com o protocolo (como FTP ou HTTP) através do qual o site ou o recurso é acessado.

A parte inicial do URL (a que termina com os dois pontos) indica qual protocolo Internet está sendo usado. As duas barras indicam que o que vem a seguir é o endereço de um servidor válido da Internet ou localização simbólica. Pode ser colocado um texto ( www.universominas.com.br , por exemplo) ou o endereço IP do site.

Endereço IP (Endereço do Protocolo Internet)

A maneira padrão de identificar um computador conectado à Internet, da mesma forma que um número de telefone identifica um telefone em uma rede telefônica. Um endereço IP é representado por quatro números separados por pontos e onde cada número é menor que 256, por exemplo, 192.200.44.69. O administrador de seu servidor Web ou o provedor de serviços de Internet irá atribuir um endereço IP a seu computador.

O tipo mais comum de URL é http:// , que fornece o endereço Internet de uma página da Web. Alguns outros tipos de URL são:

< P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > 13

1.13.4. Entendendo uma URL

http://www.Universominas.com.br/treinamento/cursos.htm#local

http:// Protocolo - Protocolo da Internet utilizado pelos computadores ligados à Web para comunicar-se entre si.

www.Universominas.com.br Nome do Domínio - Domínio são as categorias de endereços da Internet que representam países ou tipos de organização.

• www Sigla de World Wide Web, significa Rede Mundial
• UNIVERSOMINAS Nome específico que pode conter uma ou mais palavras, separadas ou não, por hifens (ex.: UNIVERSOMINAS-informatica).
• com Tipo de Domínio - Indica a natureza do Site. No caso como trata-se de um Site de uma empresa privada, ".com" vem de comercial. Outros Exemplo: .gov (governo) e .org (organizações sem fins lucrativos).
• br Sigla do País - composta de duas letras, significa que a página está situada em um computador no Brasil. Páginas que não possuem terminação indicando o país de origem estão situadas nos Estados Unidos. Outros Exemplo: .pt (Portugal) e .jp (Japão).

treinamento Diretório (pasta) onde está localizada a página (arquivo) cursos .htm. Às vezes uma URL indica apenas o diretório (ou o servidor). Nesse caso, o servidor se encarrega de procurar e enviar o arquivo adequado.

cursos.htm Nome da página escrita em HTML requerida (páginas da Web geralmente têm terminação em .htm ou .html ).

#local Aponta para o local específico dentro da página que será exibida.

< P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > 14

1.14. ISP (Internet Service Provider)

1.14.1. Provedores

O Provedor é uma Empresa ou Organização que oferece conexão para Internet. Através de um Provedor você pode ter acesso à Internet e serviços de hospedagem de Site. O Provedor disponibiliza as informações solicitadas pelos "navegadores" (Browsers) por uma combinação de computador e programas que formam os servidores situados em instalações apropriadas, neste caso, o Provedor aluga espaço em um disco rígido cuja máquina deve estar permanentemente conectada à rede, disponibilizando sua Home Page 24 horas por dia a todos os usuários da Internet. A ligação com o provedor pode ser feita por linhas telefônicas normais (conexão discada) ou por linhas especiais, ligadas 24 horas por dia (conexão dedicada).

Um provedor geralmente oferece várias funções de aplicações como World Wide Web (www, http), transferência de arquivos (ftp) e gerenciamento de conteúdo (armazenamento de dados). A maioria dos provedores também disponibilizam caixa postal eletrônica, "contas" de e-mail para seus usuários, juntamente com os serviços de acesso e hospedagem.

1.14.2. Seu Site na Grande Rede

Ao desenvolver sua Home Page, basta transferir seus arquivos via FTP para o Provedor. Alguns programas específicos podem facilitar o seu Upload, já que o Browser funciona apenas para busca de arquivos, e não para o envio. O CuteFTP é um dos mais indicados pelos provedores, que permite um acesso totalmente gráfico e interativo a servidores FTP. Mas, sem dúvida, existe um excelente, o Internet Neighborhood. Sua interface é comum ao do Microsoft Windows Explorer, funcionando de maneira simples, possibilitando Download e Upload da máquina local para o servidor FTP, transferindo arquivos de uma pasta para outra.

1.14.3. Login

Acesso. É o processo de identificar-se ao entrar num computador ou em uma rede de computadores. A cada entrada na Internet , você se "loga" (faz o login) em seu Provedor , colocando nome (username) e senha (password).

< P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > 16

O conjunto de caracteres de 7 bits do código padrão americano para intercâmbio de informações (ASCII, American Standard Code for Information Interchange) e que é amplamente usado para representar letras e símbolos encontrados em um teclado americano padrão. O conjunto de caracteres ASCII é igual aos 128 primeiros caracteres (0127) do conjunto de caracteres ANSI.

Conjunto de caracteres ANSI

O conjunto de caracteres de 8 bits do Instituto Nacional de Padronização Americano (ANSI, American National Standards Institute) que é usado pelo Microsoft Windows e que possibilita a representação de até 256 caracteres (0-255) através do teclado. Os 128 primeiros caracteres (0-127) correspondem a letras e símbolos de um teclado americano padrão. Os outros 128 caracteres (128-255) representam caracteres especiais, como letras de alfabetos internacionais, acentos, símbolos monetários e frações.

2.1. TAGs

TAGs são os "comandos" do HTML. Um documento HTML é composto de TAGs que farão com que o browser monte a página de acordo com a formatação definida pelo comando HTML.

Um TAG é sempre precedido de um caracter "<" (menor que) e seguido por um caracter ">" (maior que). Exemplo de TAG:

Na maioria dos casos, um TAG deve ter um correspondente, chamado de TAG de fechamento. Ou seja, um TAG indica onde começa sua área de influência, enquanto o seu correspondente TAG de fechamento indica onde termina a área de influência.

Um TAG de fechamento tem o mesmo nome do TAG de abertura , precedido do caracter "/". Exemplo de TAG de fechamento:

TAGs podem ser escritas em minúsculas ou maiúscula, mas nunca podem haver espaços em branco dentro de TAGs , exceto entre atributos e entre aspas. Exemplo : , , , , ...

< P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > 17

2.2. Estrutura Básica

A Estrutura Básica de um documento HTML é a seguinte: Exemplo: > Início do Documento

> Início do Cabeçalho do Documento > Fim do Título do Documento > Fim do Cabeçalho do Documento

**>** Início do Conteúdo do Documento Aqui entra todo o conteúdo que será exposto pelo Browser... **>** Fim do Conteúdo do Documento

> Fim do Documento

Vamos ver um pouco sobre os elementos básicos do HTML a seguir.

2.2.1. Início e Fim do Documento

Os TAGs ... indicam respectivamente o início e fim do documento.

2.2.2. Definições Lógicas sobre o Documento

Entre os TAGs ... estão as definições lógicas sobre o documento. Delimitam a seção de cabeçalho do documento. Trata-se da primeira seção do documento.

2.2.3. Título da Página

Os TAGs indicam o título do documento, que será apresentado na barra superior do browser. Estas marcas devem constar da seção de cabeçalho.

2.2.4. Conteúdo da Página

Entre os TAGs ... estão o conteúdo da página que será exposto pelo Browser, incluindo cabeçalho e rodapé.

< P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > 19

3. Estrutura da Página

O elemento contém o elemento e . O TAG

Aqui entra todo o conteúdo que será exposto pelo Browser...

3.1. HTML ...

Atributo: Não possui atributos Explicação: Indica que o documento presente é um documento HTML. Deve englobar todos os demais TAGs. Exemplo: ...todos os demais TAGs, textos, etc.

3.2. HEAD ...

Atributo: Não possui atributos Explicação: Contém o cabeçalho do documento diversas informações lógicas, isto é, que não fazem parte do corpo do documento e portanto não serão exibidas diretamente. Exemplo: ...diversos TAGs contendo informações lógicas sobre o documento...

< P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > 20

3.2.1. Elementos presentes em HEAD

TITLE

Atributo: Não possui atributos Explicação: Contém o título do documento. Muitos browsers utilizam o título como forma de referenciar a página em uma lista de links úteis criadas pelo usuário (conhecida como "Bookmarks" ou "Favorites"). Além disso, exibem o título como nome da janela em que a página é visualizada. O Título é obrigatório. Não confunda o título da página com o nome do arquivo gravado em disco. Exemplo:

SCRIPT

Explicação: É utilizado para inserção de código script (ex.: java Script, VB Script, etc.) dentro do documento HTML. Exemplo:

META

Explicação: Define valores especiais. os valores são definidos como pares "name/value" (nome/valor).

Atributos de META

Atributo: NAME Explicação: Especifica um nome ao qual um determinado valor será associado. O browser precisa entender esse nome para que o TAG tenha utilidade. Exemplo:

Atributo: CONTENT Explicação: Especifica o valor associado a um "NAME". Exemplo:

É obrigatório a presença do atributo "NAME" ou do atributo "HTTP-EQUIV".