HTML - Aula 03 A 05

HTML5
CLEVER LOURENO DE SOUSA
LIO 03 HTML (HyperText Markup Language)

So vrias as tecnologias e ferramentas para desenvolvimento Web, dentre
elas est o HTML.
O HTML muitas vezes confundido com uma linguagem de programao,
pois as pessoas dizem coisas como: ...programar um site em HTML, de
forma equivocada. O HTML uma Linguagem de Marcao de Hiper Texto.
Ento vamos entender:
Linguagem de Marcao um conjunto de cdigos aplicados a um texto ou
a um conjunto de dados, com a finalidade de adicionar informaes sobre
esse texto ou dado, ou determinado trecho dever ser apresentado. Ou
seja, a Linguagem de Marcao define as caractersticas do objeto
marcado.
Outra coisa que devemos conhecer para entender o verdadeiro sentido do
HTML, o tal de HiperTexto. Bom, vamos l.
O termo HiperTexto foi criado para denominar uma forma No Linear de
leitura e escrita de textos, como ocorre na Internet com os Websites que
conhecemos. Por exemplo, ao acessar qualquer site, o internauta no
precisa seguir uma ordem ou sequncia especfica para visualizar as
informaes. Pelo contrrio, permitido pular para qualquer ponto do
texto sem que haja necessidade de olhar um item anterior.
Podemos dizer que um Site na Web um HiperTexto. Ou seja, um tipo de

documento eletrnico composto por pginas que possuem ligaes entre
elas (chamadas de links), que permitem a leitura ou visualizao de cada

pgina de forma no sequencial, atravs de uma Linguagem de Marcao.
Fim de lio! Procure verificar se voc aprendeu

realmente o contedo principal do texto, perguntando
e respondendo a voc mesmo:
O que HiperTexto?
O que Linguagem de Marcao
O que HTML?
O que um Website?
Lio 04 Iniciando no HTML

Chegando a este ponto, voc deve estar se perguntando: O que eu preciso
para criar Websites?
No precisa de nada de mais. Qualquer editor de textos simples permite a
criao de documentos HTML. Voc pode comear usando o Bloco de
Notas, ou qualquer outro editor de textos similar. Existem tambm, editores
prprios para o desenvolvimento de pginas para a Web, como o caso do
Adobe Dreamweaver.
TAGS
Como HTML uma Linguagem de Marcao de HiperTexto, possui aquilo
que chamamos de ETIQUETAS (TAGs) que marcam o incio e o fim de
algum elemento especfico no documento. Por exemplo, para criar uma
tabela para ser exibida no navegador de internet (browser), precisamos
marcar cada elemento da tabela, como suas linhas e colunas, inclusive a
prpria tabela.
Outro exemplo, um texto escrito para aparecer na Web. Suponha que no
texto de nosso exemplo existam palavras em negrito, itlico ou at mesmo
sublinhadas. Para que o navegador de internet interprete e exiba
corretamente os efeitos aplicados ao texto, estes devem ser informados
atravs das TAGs. Ou seja, o texto que deve ser exibido em negrito deve
conter uma TAG antes (para determinar o incio do efeito negrito), o texto
em si e uma TAG de fechamento (para informar o fim do efeito negrito). O
mesmo acontece para textos que devem ser exibidos em itlico ou
sublinhado.
ESCREVENDO TAGs
As TAGs devem ser escritas dentro de < (menor que) e > (maior que). Por
exemplo: <HTML> <HEAD> <TITLE> <BODY>
Para escrever uma pgina para Web usando HTML puro, no precisamos nos
preocupar com maisculas ou minsculas, pois, HTML no faz distino.
Porm, vlido lembrar que voc pode encontrar pginas utilizando uma
tecnologia de codificao chamada XHTML (eXtensible HyperText Mrkup
Language), considerada uma reformulao da linguagem HTML que
combina regras de XML. Isto a torna mais rgida e case sensitive, ou seja,
diferencia maisculas e minsculas. Parece complicado, no?
No incio, todos criavam sites em HTML e depois passaram a criar em XHTML,

que visava a exibio de paginas em televisores, palms, celulares, etc. Mas,
hoje em dia temos o HTML5, que traz diversas mudanas, como novas TAGs,
recursos que visam incluso e manipulao contedo grfico e multimdia, e
deixa de ser case sensitive.
No se confunda e tambm no queira bater a cabea na parede ou
xingar o autor caso encontre alguma TAG com sintaxe diferente do que viu
aqui. Lembro a voc que vamos focar o novo. Ou seja, vamos trabalhar com
HTML5!
ATRIBUTOS
Algumas TAGs especiais possuem o que pode ser chamado de atributos.
Os atributos so os elementos que modificam o comportamento ou as
caractersticas de objetos criados e/ou exibidos pelas TAGs.
Por exemplo, o marcador <BODY>. Veremos mais adiante que ele delimita o
corpo da pgina e capaz de receber atributos atravs dos quais podemos
modificar caractersticas como cor ou imagem de plano de fundo do
documento.
<body bgcolor=red>
A TAG acima alm de delimitar o corpo da webpage, indica que sua cor de
fundo ser vermelha. Mas no se preocupe com isso ainda. Estudaremos
cada TAG, suas aplicaes e atributos de forma bem prtica e didtica. Este
exemplo serve apenas para que voc entenda que alm de trabalhar com
as TAGs, devemos tambm estar atentos quanto aos atributos que elas
podem apresentar.

O que XHTML?
XHTML tambm Linguagem de Marcao?
O que HTML5?
O que so e para que servem os atributos?
Lio 05 NADANDO CONTRA A CORRENTE

Dizemos que vamos iniciar contra a corrente, pois, comearemos a criar
um pequeno website moda antiga, sem nos preocuparmos com as regras
da W3C - World Wide Web Consortium, que agrega empresas, rgos
governamentais e organizaes independentes com a finalidade de
estabelecer padres para a criao e a interpretao de contedos para
a Web.
Antigamente, as pginas Web eram compostas basicamente por textos com
ou sem formatao e imagens, sem haver muita preocupao com a
esttica e apresentao da pgina.
Com o passar do tempo, alguns desenvolvedores comearam a pensar em
formas de organizar o contedo de forma mais harmnica, se preocupando
com a construo do layout do site. Os layouts das pginas comearam a
ser construdos com base em tabelas! Alguns desenvolvedores ainda
insistem em cometer esta prtica que condenada pelos defensores do
TABLELESS.
Vamos agora esquecer tudo o que bom e focar no lado negro da fora,
isto , construiremos nosso mini site com layout baseado em tabelas,
somente para que voc comece a entender as primeiras TAGs de forma
mais amigvel. Depois, aumentaremos a complexidade, impondo os
conceitos defendidos pelo W3C.
Comeando:
<html>
<head>
<title>Primeira Pgina</title>
</head>
<body>
Este texto foi definido como pargrafo.
</body>
</html>
<html> ... </html>

considerada a TAG raiz de um documento HTML, sendo usado para
delimit-lo. Observe que o contedo iniciado por <html> e encerrado
com </html>. Isto ocorre com todas as TAGs, ou seja, os marcadores
precisam ser fechados.
<head> ... </head>

Apresenta uma coleo de metadados sobre o documento, incluindo links,
suas definies de scripts e folhas de estilo.
<title> ... </title>
Define o ttulo da pgina HTML a ser exibido pelo navegador.
<body> ... </body>
Envolve o principal contedo da pgina. No nosso caso, a frase: Este texto
foi definido como pargrafo.
 ... 
A TAG utilizada na delimitao de textos que devem ser considerados
como pargrafos.
Faa em seu computador, o teste das TAGs acima, digitando-as no Bloco de
Notas.
SALVANDO OS DOCUMENTOS HTML
Uma boa prtica, organizar nossos arquivos em pastas. Com a criao de
websites no diferente. Portanto, voc dever criar uma pasta onde ir
salvar os arquivos do seu site.
Outro ponto importante o nome que ser dado ao arquivo que voc criou.
Por conveno, costumamos salvar a primeira pgina de um site com o
nome de index. Ao trabalharmos com o Bloco de Notas, notaremos que
dentre os tipos de arquivos possveis para gravao no se encontra
documento HTML. Por isso, ao dar o nome de index ao arquivo,
adicionamos a extenso htm ou html, ficando assim: index.htm ou
index.html. Dessa forma, o arquivo ser associado ao navegador de internet
padro do sistema.
No nosso caso, vamos criar uma pasta chamada Lio 05, que ser usada
para gravar os arquivos referentes a esta lio. Assim que terminar de digitar
as TAGs, salve o seu arquivo dentro da pasta que voc criou, chamada
Lio 05. Para salvar o arquivo, utilize o nome index.htm ou index.html, onde
htm ou html a extenso do arquivo.
Veja em destaque na imagem a seguir, a pasta Lio 5 criada. Observe que

no usamos letras maisculas ou espaos. um padro entre os
desenvolvedores, utilizar letras minsculas e eliminar os espaos substituindoos por (_).
A seguir, temos o cdigo digitado no Bloco de Notas:
Na prxima imagem, vemos a gravao do arquivo como index.htm
Veja que o arquivo est gravado na pasta criada e o cone corresponde ao

navegador padro do sistema, no caso o Chrome.
Para visualizar o documento no navegador, basta acess-lo naturalmente

com o duplo clique.
Se voc digitar exatamente como nosso exemplo, poder observar a frase:
Este texto foi definido como pargrafo como contedo e o ttulo: Primeira
Pgina.

Lembra da funo da TAG <html> ?
As TAGs precisam ser fechadas?

HTML - Aula 03 A 05

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

HTML - Aula 03 A 05

Transféré par

Droits d'auteur :

Formats disponibles

HTML5

CLEVER LOURENO DE SOUSA

LIO 03 HTML (HyperText Markup Language)

Podemos dizer que um Site na Web um HiperTexto. Ou seja, um tipo de

elas (chamadas de links), que permitem a leitura ou visualizao de cada

Fim de lio! Procure verificar se voc aprendeu

Lio 04 Iniciando no HTML

No incio, todos criavam sites em HTML e depois passaram a criar em XHTML,

Fim de lio! Procure verificar se voc aprendeu

Lio 05 NADANDO CONTRA A CORRENTE

<html> ... </html>

<head> ... </head>

Veja em destaque na imagem a seguir, a pasta Lio 5 criada. Observe que

A seguir, temos o cdigo digitado no Bloco de Notas:

Na prxima imagem, vemos a gravao do arquivo como index.htm

Veja que o arquivo est gravado na pasta criada e o cone corresponde ao

Para visualizar o documento no navegador, basta acess-lo naturalmente

Fim de lio! Procure verificar se voc aprendeu

Vous aimerez peut-être aussi