Curso Subsequente em Manutenção e Suporte em Informática
Introdução às Tecnologias Web
eXtensible Hypertext Markup Language
Prof. Cesar - Copyright©2008
2
Prepare-se para as provas
Estude fácil! Tem muito documento disponível na Docsity
Ganhe pontos para baixar
Ganhe pontos ajudando outros esrudantes ou compre um plano Premium
Guias e Dicas
Prepare-se para as provas
Estude fácil! Tem muito documento disponível na Docsity
Encontrar documentos
Prepare-se para as provas com trabalhos de outros alunos como você, aqui na Docsity
Encontra documentos específicos para os exames da tua universidade
Encontra documentos específicos para os exames da tua universidade
Videoaulas
Prepare-se com as videoaulas e exercícios resolvidos criados a partir da grade da sua Universidade
Quiz
Responda perguntas de provas passadas e avalie sua preparação.
Ganhe pontos para baixar
Ganhe pontos ajudando outros esrudantes ou compre um plano Premium
Conceitos Básicos de Marcação de Documentos Web, Notas de estudo de Engenharia Telemática
Este documento fornece uma apresentação em poucos slides sobre conceitos importantes relacionados à elaboração de documentos web utilizando padrões web, tais como a estruturação de documentos html, xhtml, elementos de um documento, marcadores, atributos, vínculos hipertexto, organização de sites, boas práticas, edição de arquivos html e validação de documentos. Além disso, é abordada a formatação feita através dos marcadores e a diferença entre elementos de bloco e elementos em linha.
Tipologia: Notas de estudo
Antes de 2010
1 / 54
Esta página não é visível na pré-visualização
Não perca as partes importantes!
Documentos relacionados
Pré-visualização parcial do texto
Baixe Conceitos Básicos de Marcação de Documentos Web e outras Notas de estudo em PDF para Engenharia Telemática, somente na Docsity!
Curso Subsequente em Manutenção e Suporte em Informática
Introdução às Tecnologias Web
eXtensible Hypertext Markup Language
Prof. Cesar - Copyright©
[email protected]
Roteiro
- Em poucos slides, apresentar conceitos
conceitos importantes relacionados à
elaboração de documentos Web utilizando padrões Web
- Estruturação de documentos HTML, XHTML, elementos de um documento,
marcadores, atributos, vínculos hipertexto, organização de sites, boaspráticas, editando os primeiros arquivos HTML, validando documentos, etc...
- Apesar de breve, este módulo é, essencialmente, prático
prático!
- Por isso, cada assunto comentado em sala deve ser codificado e testado.– Várias práticas de laboratório/casa serão implementadas!– Nenhuma ferramenta específica é necessária
- Apenas um editor de textos convencional
Até aqui…
O browser cria uma requisiçãoHTTP para o servidor Web
Servidor Web
Através da infra-estrutura daInternet, esta requisição HTTP éenviada até o servidor Web.
O servidorencontra a páginaHTML estática
Cliente
O servidor cria uma respostaHTTP já contendo toda apágina HTML (no nosso caso)
O browser irá renderizar o HTML
&
n
o
p
q
r
*.html
*.css
body
{
body
{
fontfont-
-size:small
}
size:small
}
...<title>...
</head></head><body><body><img<
src img
src=…>
=…>
</body></body> </html></html>
Em dois Padrões Web^ Em dois Padrões
Web estamos
estamos
interessados:interessados
: CSS e XHTML!
CSS e XHTML!
*.html
*.css
Modus operandi
- Em primeiro lugar, comece seu documento
HTML com as tag’s
- Adicione
- Esta parte não será visível na página. Ela
contém informações sobre a página
- O corpo da página é identificado pelas
tag’s
- Tudo o que você escrever (texto, etc.) entre
estas tags ficará visível na página
...<title>...
</head></head> <body><body>
<img src<
img src=…>
=…>
</body></body>
</html></html>
index.html
Servidor Web
Preste atenção na disposição das tags!Preste atenção na disposiçãoPreste atenção na disposição das tags!
das tags!
Elementos (básicos) de um cabeçalho
- O bloco de cabeçalho de uma página html será marcado pelas tag’s
e poderá conter metadados
metadados sobre a página
- Na verdade, este bloco apenas armazena informações sobre o conteúdo do
documento utilizadas para fins de indexação, organização, etc. Ex:
Boletim
Eletrônico
do
Esporte
-^
Goiás
parte
visível
da
página
Obs.:
caso não queira indexar a página:
Elementos (básicos) do corpo de um documento
- Note que, ao planejar inicialmente a estrutura da sua página html,
procure, com base no conteúdo da página que se deseja conceber,identificar quem serão os grandes elementos
elementos de
de blocos
blocos
(chunks) e
aplique os descritores (tag’s) adequados da linguagem para tal fim
-^ –
,
…,
,
…,
,
,
,
,
- Estes descritores (tag’s) da linguagem forçam o navegador a realizar um
salto de linha (Enter) antes e depois do conteúdo marcado
- Depois, procure identificar quem serão os elementos inline
inline “em-linha”
que irão aparecer dentro do texto:
,,<
>,,,<
>,
,,
>,,
Vínculos em documentos
- Documentos hipertexto permitem estabelecer fluxos não-lineares de
leitura (é a parte ‘HT’ na linguagem de marcação)
- Um marcador especial da linguagem é reservado para espeficicar a ligação
de um elemento do texto origem (chamado âncora) com o recurso de destino(pode ser uma imagem, outra página num outro servidor, um vídeo, etc.)
- Para criar links, usa-se a tag
href
=“...”>texto
texto
- Esta tag possui um atributo
href=…
usado para especificar o recurso
- Quando clicado, o browser lê o valor de href no link e trata o recurso
- Já o conteúdo da tag age apenas como o texto para o link; o browser irá
aplicar uma folha de estilos default (sublinhado, azul e clicável)
Vínculos em documentos(cont.)
- Exemplo:
Principal
Conheça
nossos
produtos hoje!
O atributo é um par nome=“valor” usado paraprover informação adicional a um elemento.
Cuidado:
nem todas as tags possuem atributos!
Na página:
Conheça nossos produtos hoje!
Uma tag pode possuir mais de um atributo e aordem dos atributos listados não é importante.
Servidor
Uniform Resource Locator(cont.)
- A URL é a forma padronizada e integrada de identificação de
qualquer recurso no domínio da Internet
- Sintaxe (mais simplificada que a anterior):• Outros exemplos:
- http://www.cefeturutai.edu.br/concursos2008/edital.pdf– ftp://ftp.dsc.ufcg.edu.br/pub/software/download/tweak.exe– Entre outras.
protocolo://máquina:porta/caminho/recurso^ protocolo://máquina:porta/caminho/recurso
Uniform Resource Locator(cont.)
- URL’s Absolutas versus Relativas• Onde:
concursos.html
http://www.cefet http://www.
cefet.
.edu
edu.
.br
br/
/concursos
concursos.html
.html
http://www.cefethttp://www.
cefet.
.edu
edu.
.br
br/
/usr
usr/docs/
/docs/edital
edital.
edital.pdf
Concursos
edital edital
Há desvantagens em se utilizar uma URL absoluta?
Servidor
Como organizar recursos?(cont.)
Servidor Assumindo o
Tomcat
como container Web…
UmaUma boa
boa organização
organização:
: estruturada em níveis
estruturada em níveis!
!
A raiz é conhecida como contexto
da aplicação!
Cuidado:Cuidado^ Exemplos:
: links
links
precisamprecisam ser
ser revistos
revistos!
!
help.html
index.html
produtos
produtos.html
Voltar
à^
página
inicial
URL absoluta ou relativa?
- Você deve ter percebido que podemos utilizar tanto URL’s absolutas
como também caminhos relativos na construção de nossas páginas.
- Até aqui, usamos estes caminhos nos atributos
hrefhref
do descritor
(links) e também
srcsrc
do marcador
(imagens)
- Mas, qual forma devemos dar preferência?
- A literatura sugere que você utilize URL’s
URL’s relativas
relativas quando desejar
referenciar um recurso que está localizado dentro
dentro do
do seu
seu servidor
servidor.
- Por outro lado, quando se deseja acessar um recurso localizado num
servidor externoservidor
externo, utilize URL’s
URL’s absolutas
absolutas.
Dica:
também pode-se colocar um link para uma
âncora de destino dentro da própria página. Ex.:
Topo
da
página
Links internos
- Documentos HTML muito extensos podem ser indexados, facilmente
- É possível criar links para partes internas específicas (seções, etc.)
- A idéia é simples: iremos utilizar o atributo
- É possível criar links para partes internas específicas (seções, etc.)
idid
para criar uma âncora
âncora
de destinode
destino (uma espécie marcação) dentro de uma página longa
Pós-graduação
index.html
cursos.html
Encontre maiores
detalhes
sobre
a
Pós-graduação
A âncora de destino se chama posgrad.O atributo id não irá afetar a aparênciado texto que está dentro de !Nada de sublinhado, azul, clicável, etc.
Para acessar uma parte específica deuma página, basta colocar o sinal de #junto com o nome da âncora interna
Usabilidade em vínculos
- Evite criar sentenças inteiras de texto (longas) em um link
- Apenas algumas poucas palavras (não mais do que 5 ou 6)!– A maioria dos usuários tendem a “escanear” a página, primeiro, pelos links.
Só em seguida lêem algum conteúdo periférico (quando houver algum).
- Por isso, teste suas páginas lendo apenas os links. Veja se há algum sentido!
- Forneça sempre uma “dica do link” usando o atributo
titletitle
- Cuidado^ –
Cuidado!
! Isto é um atributo. Logo, este não tem relação alguma com o
descritor utilizado até aqui no cabeçalho de páginas html
Ex:
Você
pode
<a
href=”docs/edital08.pdf”
title=“Edital
Concurso
Professores”>
baixar
o
edital</a>
do
concurso
público
para
professores
hoje
mesmo!