Aula 02- Programação para Web I

Aula 02 - Estrutura do HTML

Aborda os princiais recursos do HTML como linguagem de marcação e suas estruturas

Exemplos de aula

exemplos_aula02.zip

Estrutura do HTML

Exemplo de Documento HTML

Um documento HTML padronizado e com elementos básicos pode ser representado da seguinte maneira:

html index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Minha página de teste</title>
    </head>
    <body>
        <img src="imagens/firefox-icon.png" alt="minha página de teste">
    </body>
</html>

Repare que o código acima está identado de forma a destacar que o elemento principal da página html contém outros dois elementos: head e body (que por sua vez podem possuir outros elementos). Essa identação (que não é obrigatória, mas é muito importante) reforça uma das principais características de um documento HTML: a organização em formato de árvore.

O primeiro elemento <!DOCTYPE html> é um elemento que faz parte de uma especificação antiga do HTML, já não sendo mais obrigatório em navegadores atuais.

O elemento head contém elementos de meta-dados do documento, como o meta charset=utf-8, que especifica a codificação de texto do documento e o title, que define o título do documento

O elemento body define o corpo do documento, que é o que geralmente vai ser exibido pelo navegador/cliente. Neste exemplo temos dentro do corpo o elemento img, responsável por exibir uma imagem.

Estrutura em Árvore do HTML

Os elementos HTML são combinados para formar uma espécie de árvore (estrutura de dados). Isso permite ao navegador interpretar e renderizar corretamente os elementos na tela do navegador. Outros softwares como leitores de tela, Crawlers e Spiders também devem ser capazes de interpretar corretamente a estrutura deste documento. Por isso é muito importante desenvolver uma estrutura simples e eficiente.

Estrutura de um Elemento HTML

Elemento

Um elemento HTML é sempre representado pelos sinais de < e > (maior e menor que). Esses elementos correspondem aos nós da árvore no HTML, podendo ser aninhados de forma a construir uma estrutura de dados coerente para o navegador e outros clientes que farão a leitura do documento. Os elementos HTML são previamente definidos por especificação e possuem funções variadas: definir parágrafos, incluir imagens e videos, referenciar outros documentos, definir uma estrutura semântica. A maioria dos elementos possui uma tag de abertura <nome_elemento> e de fechamento </nome_elemento>, indicando o fim do bloco.

Atributo

Os atributos estão sempre relacionados com um elemento HTML. Estes atributos possuem geralmente a característica de personalizar o comportamento de um determinado elemento ou fornecer instruções adicionais para o interpretador (navegador). Alguns atributos podem ser utilizados em praticamente qualquer elemento (como o id e class), enquanto outros são específicos de um determinado elemento.

Estrutura Vazio no HTML

Alguns elementos no HTML dispensam o uso das tags de fechamento e por isso são chamados de Elementos Vazios. Isso deve-se ao fato de que estes elementos não possuem ou não exigem nenhum tipo de conteúdo. Ainda assim é possível alterar a assinatura destes elementos através dos seus respectivos atributos, como no caso da tag img.

Elementos Básicos

Elementos Textuais no HTML

Títulos (h)

Estes elementos são responsáveis por definir títulos de vários níveis

Parágrafos (p)

Estes elementos são responsáveis por definir títulos de vários níveis

Listas (ul, ol,li)

Estes elementos são responsáveis por definir títulos de vários níveis

Elementos textuais de apresentação (b, i, u)

Elementos textuais de apresentação podem ser utilizados para destacar partes de um bloco de texto.

Os elementos textuais como b, i e u foram muito usados em uma época onde o CSS tinha pouco ou nenhum suporte nos navegadores. Elementos dessa categoria passaram a ser evitados por geralmente não possuírem características semânticas adequadas. No entanto, o HTML5 introduziu algum papel semântico para o uso desses elementos em situações especiais:

i pode ser usado para representar palavras estrangeiras, taxonomias, termos técnicos, pensamentos...
b pode ser usado para palavras chaves, nomes de produtos, sentenças importantes
u pode ser usado para nomes próprios ou erros de ortográficos, porém deve ser evitado pois elementos sublinhados são frequentemente confundidos com links.

Elementos de Hiperlink no HTML

Links (a)

Estes elementos são responsáveis por inserir hiperligações em um documento (que pode ser qualquer tipo de mídia).

Atributos Importantes

href

Ex.: href="https://venson.net.br"

Referencia o destino do hiperlink. Pode ser um caminho interno ou externo, ou em casos especiais, até mesmo um binário. Pode-se usar o fragmento especial #top para indicar o topo da página.

target

Ex.: target="_blank"

Em qual local o navegador deverá carregar a ligação. Geralmente pode ser na própria página usandotarget="_self" (padrão), em uma nova janela target="_blank", ou em uma área específica target="#personagem".

Elementos de Áudio e Vídeo no HTML

Imagens (img)

Representa uma imagem renderizada no documento.

Atributos Importantes

src

Ex.: src="img/teste.png"

Referencia o caminho da imagem. Pode ser um caminho interno ou externo, ou em casos especiais, até mesmo um binário.

alt

Ex.: alt="Paisagem de Criciúma"

O atributo alt descreve um texto alternativo para caso a imagem não seja carregada. No entanto, é atualmente muito utilizado como descritor para leitores de tela

Fonte (source)

O elemento source é utilizado para representar uma mídia a ser inserida no documento. Deve ser integrado com outros elementos como o video e video

Atributos Importantes

src

Ex.: src="crazy_frog.avi"

Referencia o caminho da mídia. Pode ser um caminho interno ou externo, ou em casos especiais, até mesmo um binário.

Audio (audio)

Define uma forma padronizada para inserir audio a uma página web. Deve ser utilizado junto do elemento source

Atributos Importantes

controls

Ex.: controls

Oferece os controles de reprodução para o usuário

autoplay

Ex.: autoplay

Permite a reprodução automática da mídia ao carregar a página

loop

Ex.: loop

Se especificado, mídia é reproduzida indefinidamente.

Vídeos (video)

Define uma forma padronizada para inserir vídeo a uma página web. Deve ser utilizado junto do elemento source

Atributos Importantes

Ver os mesmos do elemento audio

A utilização de diferentes sources em um mesmo elemento de audio ou video tem o único proposito de possibilitar formatos de arquivos diferentes de uma mesma mídia. Por exemplo: navegadores que não suportem o formato mp3 podem necessitar da inclusão de um segundo arquivo no formato ogg. O source também pode ser utilizado com o elementopicture (Exemplo)

Organização de Projeto

Uniform Resource Identifier

O que é um URI?

O URI (Uniform Resource Identifier) foi introduzido à web para facilitar a identificação de documentos entre diferentes sistemas e codificações. Esse identificador é utilizado para nomear e/ou referênciar outros documentos e possui uma sintaxe abrangente o suficiente para permitir diversos usos além da localização. Na web, frequentemente utilizamos o termo URL, que basicamente corresponde a um URI que descreve o mecanismo básico para localização e acesso de um determinado recurso. Nos exemplos abaixo, apenas os três primeiros URIs podem ser considerados também como URLs:

ftp://ftp.is.co.za/rfc/rfc1808.txt
https://tools.ietf.org/html/rfc3986
mailto:john@doe.com
/img/imagem.jpg
../musica.mp3
tel:+1-816-555-1212
urn:oasis:names:docbook:dtd:xml:4.1
urn:isbn:1234567890

Caminhos e Links de Documentos

Uma ligação entre dois documentos precisa seguir algumas regras para garantir que o local correto será referenciado. Para melhor entendimento, podemos dividir os endereços do sistema em três tipos: Absolutos, Relativos e Externos.

Link Interno

Caminhos Absolutos

O caminho absoluto é uma referência completa para o documento linkado. Essa referência costuma levar em consideração o endereço raiz que será exposto ao cliente, independente da localização do documento que partimos. Um caminho absoluto interno sempre começará com /

/img/ronaldinho.png
/css/venson.css
/aula/aula01.html

Caminhos Relativos

Este tipo de caminho sempre leva em consideração a relação entre a origem e o destino da ligação. Dessa forma, podemos referênciar um determinado documento partindo de uma localização específica.

ronaldinho.png
../css/venson.css
aula/aula01.html

Link Externo

Quando referenciamos um documento externo (que está em outro host), precisamos utilizar a URL completa para localizar o recurso. Dessa forma, indicamos também atributos do URI como o protocolo e host destino

https://developer.mozilla.org/en-US/docs/Learn
https://en.wikipedia.org/wiki/Uniform_Resource_Identifier
https://twitter.com/

Arquivos do Sistema

Os arquivos que são lidos diretamente do computador, sem o uso de um servidor de paginas web, recebem uma URI diferente dos links tradicionais. Estes endereços são geralmente representados da seguinte forma, levando em consideração a estrutura do sistema operacional:

file:///mnt/storage/unesc/website/aulas/aula02.html
file://C:/Users/wins/Desktop/audiobook.ogg

Mão na Massa

Exercício: Página Simples

Crie um documento HTML que contenha:

Um título principal de primeiro nível no corpo do documento
Um parágrafo contendo uma descrição sua. A descrição pode conter, entre outros assuntos, cidade onde mora e/ou morou, disciplinas de maior interesse, hobbies, idade, trabalho, escolas por onde passou, gosto musical/cinema/séries...
Uma lista com as disciplinas já cursadas no curso
Uma lista ordenada com até três links de páginas que indica, com uma breve descrição
Não esqueça de alterar o título do documento no head e adicionar um elemento meta que define a codificação dos caracteres

Ao final do exercício, empacote o projeto em um arquivo .zip ou .tar e envie ao professor.

Exercício: Crie uma Página Wiki

Segundo a Alexa, a Wikipedia encontra-se entre os 15 sites mais visitados do mundo. Neste exercício, você deverá reproduzir o conteúdo de uma página da wikipedia de algum artista, jogo, filme ou série de sua preferência. Para isso, você deverá seguir alguns critérios:

O projeto deve conter dois arquivos:
- index.html, contendo ao menos uma imagem e um link para a próxima pagina
- perfil.html, contendo todos os dados do perfil escolhido
Ambos os documentos deverão conter a estrutura básica de um documento HTML, com os elementos html, head e body
O conteúdo de perfil.html deverá estar separado por títulos usando os elementos h1, h2, h3...
O conteúdo de perfil.html deverá conter pelo menos uma imagem
Cada página deve conter o nome do estudante no título + o nome da página (ex.: Página Inicial - Ramon)
O documento perfil.html deverá conter uma seção final com links para outras páginas da wikipedia
No início do documento perfil.html deve haver um link voltar, redirecionando para a página inicial (index.html)
O documento perfil.html deverá conter uma seção com as referências, listadas em forma de lista ordenada (ol)
Procure organizar o conteúdo no HTML na forma em que são apresentados, mas não se preocupe com estilização

Ao final do exercício, empacote o projeto em um arquivo .zip ou .tar e envie ao professor.

Exercícios Complementares

Exercício: Caminhos

Utilizando o projeto do exercício 04 como base, crie um arquivo html chamadocaminhos.html descrevendo a URI de todos os arquivos e pastas contidos na pasta nas seguintes situações:

O caminho absoluto de todos os arquivos
O caminho relativo considerando a pasta /atores/ como origem

A listagem dos caminhos deverá estar organizada em formato de lista, como no exemplo a seguir:

/
- /img
- /atores

Envie apenas o arquivo caminhos.html ao professor.

Exercício: Hiperbagunça

Utilize esse arquivo como referência: Projeto

Alguém resolveu criar uma wiki com seus atores preferidos e ainda não domina o uso das URIs. Descompacte a pasta acima e organize a bagunça nos links e imagens deste projeto para que ele possa ser navegável. Siga as instruções abaixo como requisitos mínimos:

Não há necessidade de mexer na estrutura das pastas e nome dos arquivos
Todos os links externos devem ser abertos em uma nova aba / janela
Todos os links internos devem utilizar caminho relativo e serem abertos na mesma janela
Todas as imagens devem estar devidamente linkadas com seus respectivos atores
Lembre-se de verificar todos os links que voltam para a página principal (index.html)

Após realizar todas as alterações, empacote a pasta toda e envie ao professor.

Exercício: Mídia Embutida

Crie uma nova pasta chamada minhasMidias e crie uma página HTML com os seguintes requisitos:

Deve possuir pelo menos um vídeo provindo de um link externo, com os controles de vídeo
Um arquivo de som no formato ogg, provindo de link interno, que toca automaticamente e em loop na página

Após realizar todos os requisitos, empacote a pasta toda e envie ao professor (lembre-se que o arquivo inteiro não poderá conter mais do que 5 Megabytes).