HTML - I

Enviado por

Mariana Lourenço

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

5 visualizações15 páginas

HTML - I

Enviado por

Mariana Lourenço

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 15

Interfaces e Tecnologias

Web
Introdução ao HTML
Sumário:

O que é o HTML ?
Ferramentas de Desenvolvimento ?
Os quatro conceitos fundamentais
Estrutura básica de um programa em HTML?

Introdução ao HTML
O que é o HTML ?
O HTML (Hyper Text Markup Language)

Conjunto estruturado de instruções, conhecidas por etiquetas ou tags (em inglês) <>, que informam
um browser ou visualizador como publicar uma página web, ou seja, o browser interpreta essas
etiquetas e desenha a página no ecrã.

Estes conjuntos de instruções estão agrupados em ficheiros de tipo texto, i.e., sem qualquer tipo
especial de formatação

Introdução ao HTML
O que é o HTML ?
O HTML (Hyper Text Markup Language) – o inicio

A linguagem de marcação HTML surgiu como solução para a disseminação e partilha de documentos
científicos entre investigadores.

Tim Berners-Lee, físico britânico, criou com a ajuda do estudante do CERN (European Council for
Nuclear Research), Robert Cailliau, a Linguagem de Marcação de Hipertexto (HTML), em 1989,
conseguiu realizar de forma bem sucedida a primeira comunicação entre um cliente HTTP e um
servidor.
HTML não é uma linguagem de programação; é uma linguagem de marcação,
usada para definir a estrutura do seu conteúdo.

Introdução ao HTML
O que é o HTML ?
O HTML (Hyper Text Markup Language)

Os hipertextos são conjuntos de elementos ligados. Podem ser palavras, imagens, vídeos,
documentos, etc. Quando ligados, formam uma rede de informações que permite a comunicação de
dados, organizando conhecimentos e guardando informações.

Introdução ao HTML
O que é o HTML ?
O HTML (Hyper Text Markup Language) - a evolução

HTML 1.0, standard de facto (Mosaic)

HTML 2.0, Internet standard para vários navegadores
HTML 3.0, tabelas, fórmulas, estilos, ...
HTML 4.0
HTML 5.0

Introdução ao HTML
Ferramentas de Desenvolvimento ?
São necessários um editor e um navegador

Para escrever páginas podem ser usados 2 métodos:

Primeiro escrever o texto e depois marcá-lo

Editor (Emacs, pico, vi)
Processador de texto normal, correctores ortográficos, Save as... Txt
MS Office tem Save as... HTML Notepad++
HTML Author é shareware Visual Studio Code
CoffeeCup Free Editor
Escrita simultânea do conteúdo e das marcas Brackets
Uso de editores que facilitam a geração de código HTML com Komodo Edit
visualização num navegador (HomeSite) Sublime Text
Uso de editores WYSIWYG com a opção de ver e editar o código gerado Atom
(Adobe PageMill)

Introdução ao HTML
Ferramentas de Desenvolvimento ?
O QUE ESCOLHER… A minha opinião:
Notepad++, Komodo Edit e Sublime Text são ótimos, se gosta de
interfaces simples e limpas com bastantes recursos recursos.

O Visual Studio Code é pesado nos recursos, funcionando de forma

semelhante a um IDE, então escolha-o para obter o máximo de
funcionalidades.

CoffeeCup e Brackets foram feitos especificamente para

desenvolvimento web em HTML, por isso são ótimos se necessitar
de uma solução focada.

E o Atom é definitivamente a escolha certa se necessitar de recursos

colaborativos ou apenas quer ter controle absoluto sobre seu
espaço de trabalho.

Introdução ao HTML
Oportunidades de Emprego com HTML???

Introdução ao HTML
O primeiro passo na aprendizagem do HTML é o
estudo dos termos básicos que descrevem a maior Os quatro conceitos
parte das funções desta linguagem, assim:
fundamentais
Elementos
Todas as páginas de HTML são compostas por elementos. Um elemento pode ser visto com um
contentor em que é colocada uma secção de uma página web. Tudo o que estiver dentro desse
contentor fica com as características desse mesmo elemento. Se, por exemplo, se quiser fazer uma
tabela toda a informação referente a essa tabela terá que estar colocado no interior do elemento .

Introdução ao HTML
Etiquetas ou tags Os quatro conceitos
Por vezes os termos elemento ou tag, de uma forma fundamentais
errada são usados indistintamente. Um elemento é
composto por duas etiquetas: uma a abrir e outra a
fechar.
Apesar de no HTML esta distinção não ser muito importante já no caso do XHTML ela torna-se
fundamental.

A etiqueta inicia-se com o sinal de “menor que” (<) seguido do nome do elemento e termina com o
sinal de “maior que” (>). A forma da etiqueta para a abertura de um parágrafo é: <p>

A tag de fim diferencia-se apenas por possuir uma barra (/) antes do nome do elemento:
O conteúdo fica entre as etiquetas de início e fim:

Introdução ao HTML
Atributos e valores Os quatro conceitos
Um atributo é utilizado para definir as características de fundamentais
um elemento e é colocado no interior da tag de abertura
do elemento.

Por exemplo, para atribuir a cor a uma palavra utiliza-se o elemento FONT em conjunto com o atributo
COLOR: . O sinal de igual e as aspas são fundamentais pois atribuem um valor a um atributo.

<font color=“ ”>

A utilização de letras minúsculas ou maiúsculas no
nome dos elementos, tags e atributos é
indiferente.
. Se for escrita uma etiqueta que não exista em
HTML ou que um determinado browser não
entenda essa etiqueta será ignorada não
produzindo qualquer output

Introdução ao HTML
Aninhamento (Nesting) Os quatro conceitos
fundamentais
Numa página web existem quase sempre múltiplos
elementos que nunca se devem sobrepor. Os elementos
devidamente aninhados são sempre independentes uns
dos outros.
<a>
<b>
<c>
</c>
</b>
</a>

Introdução ao HTML
Estrutura básica de um programa em HTML?
<html></html>
Definem o início e o fim do programa

<head></head>
É o cabeçalho do programa e, normalmente, não
aparece na janela web.

<title></title>
Este elemento está aninhado no
HEAD e escreve o título da página na barra de
título no cima da janela do browser.

<body></body>
Contém o conteúdo principal da página web.