Embed Size (px)
Citation preview
UFCD 0792:
Criação de páginas para a web em hipertexto
Joaquim Frias
<HTML>
Esta é a minha primeira página
</HTML>
Conceito de HTML
A linguagem de marcação de hipertexto ou HTML, do
inglês HyperText Markup Language (Linguagem de
marcação de Hipertexto)
Visa a preparação de documentos com gráficos e
hiperligações, para visualização na World Wide Web
(WWW)
Edição de código HTML
Existem diversos programas que nos permitem editar e
construir uma página HTML
Exemplo:
o Microsoft FrontPage
o Macromedia Dreamweaver
o BlueGriffon
o Bloco de Notas (Notepad)
o …
Requisitos para a criação de páginas HTML
Requisitos:
o Browser (Ex: Internet Explorer)
o Bloco de notas
Nota: Não é necessário estar ligado à Internet para se
visualizar o resultado e as alterações efetuadas numa
página HTML
Edição HTML – Bloco de notas
Tags HTML
Tags são rótulos utilizados para informar o browser de
como deve ser apresentado o Website
Todas as tags têm o mesmo formato, começam pelo
sinal de “<“ e terminam com o sinal de “>”
Existem dois tipos de tags
o Abertura <comando>
o Fecho </comando>
Tags HTML
Exemplo de algumas Tags:
“<html>” primeira e última Tag “</html>”
Tag <b> Texto</b>
<h1> Texto</h1>
<h2> Texto</h2>
<p> Texto </p>
O texto ficou a negrito
Título
Subtítulo
Insere um parágrafo
Página HTML
Uma página HTML é também ela um "objeto" que
obedece a uma estrutura bastante semelhante à do
“ser humano”
Também ela tem uma cabeça, com início <head> e fim
</head>, um corpo, delimitado pelas tags <body> e
</body> e este é composto por vários elementos
Página HTML
Em vez de tronco, pernas, mãos, braços temos cabeçalhos
(<h1>, <h2>, ..., <h6>), parágrafos (<p>), listas (<ul>),
tabelas de dados (<table>), e mais uns quantos outros
elementos
Tal como num ser humano, que é possível delimitar, ou seja
observar onde começa e onde acaba, também o início e o fim
de uma página Web se encontram delimitados: o seu início
com <html> e o seu fim com </html>
Estrutura base de uma página HTML
Exemplo de uma página HTML
<html>
<head>
<title>A minha segunda página Web</title>
</head>
<body>
( .... conteúdo da página .... )
</body>
</html>
Pagina2.html
Guardar uma página HTML
Elementos HTML
Estrutura de um cabeçalho
<h1>Exemplo de um cabeçalho</h1>
No HTML estão disponíveis 6 níveis de cabeçalho assim
identificados h1, h2, h3, h4, h5, h6
Visualmente o seu grau de importância é distinguível
através do tamanho de letra que lhe está associada,
sendo o h1 o mais importante
Mais Tags
<i>Este texto está em itálico.</i>
<small>Este texto está em tamanho pequeno.</small>
<b><i>Texto em negrito e itálico.</i></b>
Mais Tags
<ul>
<li>Um item da lista</li>
<li>Outro item da lista</li>
</ul>
Resultado:
• Um item de lista
• Outro item de lista
Mais Tags
<ol>
<li>Primeiro item da lista</li>
<li>Segundo item da lista</li>
</ol>
Resultado:
1. Primeiro item da lista
2. Segundo item da lista
Tags de exceção
Existem tags que são abertas e fechadas em única tag:
o <br /> serve para criar uma quebra de linha
o <hr /> serve para definir uma linha horizontal
Pagina3.html
<html>
<head>
<title>Meu website</title>
</head>
<body>
<i>Itálico</i>
<small>Texto tamanho pequeno</small>
<br /> Quebra de linha
<hr /> Linha Horizontal
<blockquote>Indentação</blockquote>
<ul>Lista</ul>
<ol>Lista ordenada</ol>
<li>Item de lista</li>
</body>
</html>
