Biblioteca de Códigos

BIBLIOTECA DE CDIGOS
Composio e Estrutura do HTML

Todo documento em HTML leva no topo, antes de iniciar o cdigo propriamente
dito, a tag <!DOCTYPE html>. Ela indica ao browser qual verso de html ser usada
em seguida.
O cdigo html composto pelas tags 1 <html>, <head> e <body> na seguinte
ordem:
<html> (incio do cdigo raiz do cdigo html e container de todos os demais
elementos html)
<head> (incio da tag head)
(Estabelece os parmetros de leitura da pgina, ou seja, auxilia o navegador
a processar a pgina, e contm os elementos de CSS. No apresenta informao
visvel na pgina Em HTML5 este elemento pode ser omitido, bastando para isso
colocar a tag <title> aps a tag <html>, j que <title> obrigatrio).
</head> (fim da tag head)
<body> (incio da tag body)
(Parte visvel da pgina, onde ficam as informaes escritas, tabelas, listas,
imagens, interativos, etc. a parte que ser influenciada pela formatao do CSS na
head).
</body> (fim da tag body)
</html> (fim do cdigo)
Elementos da tag <head>

Os elementos contidos na tag head iro auxiliar o browser na leitura e
processamento da pgina. Alguns elementos:
Meta: A tag <meta> vai dar informaes sobre os dados da pgina, ou seja,
metadados sobre o html. Suas informaes no aparecero em tela, mas sero
lidas pelo browser. So tipicamente usados para especificar a descrio da
pgina, palavras-chave, autor da pgina, ltima modificao, caracteres que
devem ser usados na leitura, etc. Os metadados podem ser usados pelo browser
(Como mostrar o contedo da pgina? Como carregar a pgina?) ou por
1 As tags so elementos representados entre < >. Em geral as tags tm

abertura e fechamento. A tag de abertura traz o comando dentro dela, como
em <head>, e a tag de fechamento traz uma barra na frente do comando,
como em </head>. Algumas tags no tem fechamento, como a tag <br>.
[Digite texto]
mecanismos de busca, por exemplo, (palavras-chave). Exemplos de tags

<meta>:
<meta charset=UTF-8>
<= define que a pgina deve ser lida em Unicode.
Essencial.
<meta name=description content=Free Web tutorials>
<= indica
ferramenta de busca um mini resumo sobre a pgina. Se ela entender que esse
resumo est relacionado busca que est sendo efetuada pelo usurio, a pgina
ser exibida como resultado.
<meta name=keywords content=HTML,CSS,XML,Javascript> <= indica
as palavras-chave ao sistema de busca. Vem de um tempo no qual os
navegadores tinham dificuldade de definir se o resultado era ou no relevante
para a busca. Nos dias atuais os algoritmos de busca ignoram esta tag.
<meta name=author content=Lily Silva> <= Indica o autor do cdigo. No
tem influncia nos sistemas de busca.
Title: A tag <title> define o ttulo do documento. obrigatria. Esse elemento
definir o nome mostrado no toolbar do browser, o nome que ser salvo quando
a pgina for adicionada aos favoritos e o ttulo que ser exibido nos
mecanismos de busca.
<title>Nome da Pgina</title>
Style: Elemento de CSS que definir o estilo do contedo mostrado na pgina.
Cores, fontes, tamanhos, bordas, tudo ser definido dentro desta tag.
<style>Elementos de CSS</style>
Comentrios
possvel fazer comentrios internos ao cdigo sem que os mesmos interfiram ou
influenciem o html ou o browser. A tag que permite comentrios :

Cdigos de texto
1. Texto em geral
<h1> - <h6>: Definem cabealhos dentro do html (ttulos de tpicos). h1 sendo
o mais importante e h6 o menos importante.
[Digite texto]
<h1>Ttulo 1</h1>
<h2>Ttulo 2</h2>
<h3>Ttulo 3</h3>
<h4>Ttulo 4</h4>
<h5>Ttulo 5</h5>
<h6>Ttulo 6</h6>
<p> contedo </p>: Estabelece um pargrafo. H um pequeno espaamento

entre um pargrafo e outro. Esse espaamento pode ser usado para criar um
afastamento entre elementos como tabelas e listas. Basta colocar o elemento
dentro de uma tag <p>. O browser adiciona margens automaticamente ao
pargrafo, antes e depois. Essas margens podem ser alteradas com CSS.
<br>: Efetua uma quebra da linha no ponto em que for colocada. Por exemplo,
para fazer os versos de um poema:
<p>Eu canto porque o instante existe <br> (o prximo trecho ir para a linha abaixo)
E minha vida est completa. </p>
Sem essa tag o texto seria contnuo at que terminasse o espao da linha do
navegador (ou seja, faz o que um enter faria aqui no word). No precisa de um par
</br>, sendo por isso chamada de tag vazia.
<strong>Contedo</strong>: Marca seu contedo como negrito. um
chamado elemento de frase. usada dentro de uma tag <p>, por exemplo:
[Digite texto]
<p>Sei que estou <strong>perdido</strong> e nada mais importa.</p>

= Sei que estou perdido e nada mais importa.
Neste caso, o strong ser uma tag para determinar negrito dentro do cdigo
html. Podem-se conseguir efeitos mais ricos com CSS.
<em>Contedo</em>: Marca seu contedo como itlico, e tambm um
elemento de frase. usada dentro de uma tag <p>, por exemplo:
<p>A vida no <em>to</em> difcil assim.</p>
= A vida no to difcil assim.
Podem-se conseguir efeitos mais ricos com CSS.
2. Listas
<ul>Contedo</ul>: Gera uma lista no numerada (unordered list). A estrutura
de lista usa a tag <li> </li> em cada elemento da lista:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ol>Contedo</ol>: Gera uma lista numerada (ordered list). Esta estrutura

tambm usa a tag <li> </li> em cada elemento:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
A numerao se rearranjar automaticamente em caso de excluso ou incluso

de itens.
Pode se estabelecer o atributo start para definir a partir de que nmero se dar
a contagem:
<ol start=50>
<li>Item 1</li>
[Digite texto]
<li>Item 2</li>
<li>Item 3</li>
</ol>
3. Textos com link

A tag <a> define um hiperlink. O atributo mais importante dessa tag ser o
href que vai dar a url referncia do link, ou seja, para onde o link deve levar. Entre
as tags <a> e </a> dever se escrever o texto que deve ser exibido na pgina.
<a href=url destino>Texto exibido</a>
O protocolo usado pelo browser para encontrar a webpage.

O domnio (+ host) o lugar onde a webpage est hospedada.
A rota onde a informao est localizada nesse servidor (ou seja, em que
parte do domnio est a informao).
Quando a url possui todos esses elementos, ela chamada de url absoluta e leva
para algum lugar fora da webpage de origem.
Quando a url possui somente a rota, ela chamada de url relativa e leva para
um lugar dentro do mesmo domnio, s que em um lugar diferente da webpage.
Atributo target: O atributo target responsvel por fazer o link abrir uma nova
janela ao encaminhar para a url. Para que o link direcione na mesma pgina,
basta no adicionar o atributo target.
<a target=_blank href=url destino>Texto exibido</a>
Links internos
Links que levam a algum lugar na mesma pgina. Usa-se o #id do elemento
como url.
<a href=#id>Texto exibido</a>
[Digite texto]
Cdigos de Imagem
As imagens sero inseridas atravs da tag <img>. Dentro dela sero colocados os
atributos necessrios para a devida apresentao da imagem.
src: O atributo src (source) se refere fonte da imagem, ou seja, sua origem.
Nela ser colocado o link da imagem, do lugar onde ela est hospedada. Este
atributo obrigatrio.
<img src=enter the url here>
alt: Outro atributo obrigatrio da tag <img>. Ele insere um texto descritivo
alternativo para a imagem, usado principalmente caso o browser no consiga
carregar a imagem.
<img src=enter the url here alt=helpful description>
Width e Height: Atributos de largura e altura da imagem. Recomenda-se usar
um OU outro para no correr o risco de deixar a imagem desproporcional.
Quando se adiciona apenas um dos dois o prprio browser calcula o segundo
proporcionalmente.
<img src=enter the url here alt=helpful description width=x>
Ou
<img src=enter the url here alt=helpful description height=y>
x e y so os valores desejados de largura e altura.
[Digite texto]

Biblioteca de Códigos

Загружено:

Сведения о документе

Исходное описание:

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Biblioteca de Códigos

Загружено:

Авторское право:

Доступные форматы

BIBLIOTECA DE CDIGOS

Composio e Estrutura do HTML

Elementos da tag <head>

1 As tags so elementos representados entre < >. Em geral as tags tm

mecanismos de busca, por exemplo, (palavras-chave). Exemplos de tags

<= define que a pgina deve ser lida em Unicode.

<p> contedo </p>: Estabelece um pargrafo. H um pequeno espaamento

<p>Sei que estou <strong>perdido</strong> e nada mais importa.</p>

<ol>Contedo</ol>: Gera uma lista numerada (ordered list). Esta estrutura

A numerao se rearranjar automaticamente em caso de excluso ou incluso

3. Textos com link

O protocolo usado pelo browser para encontrar a webpage.

Вам также может понравиться