HTML Atalhos

HTML
Para dar continuidade ao curso, vamos falar mais um pouco

mais sobre as Tags HTML. Elas so responsveis por criar todos
os elementos dos quais precisamos, tais como listas,
pargrafos, ttulos, blocos e qualquer elemento que seja
necessrio para seu site. Elas so formadas por um sinal de
menor que (<), seu nome e um sinal de maior que (>). Por
exemplo <h1>, <p>, <body>, <html>, <style> e assim por
diante.
A maioria das tags html devem ser abertas e fechadas, o que
deve ser feito atravs de uma barra (/) aps o sinal de menor
que (<). Por exemplo:
<h1>Ttulo</h1>
<p>Pargrafo</p>
<body>Corpo do site</body>
Algumas tags HTML necessitam de atributos para
funcionarem corretamente. Tais atributos devem vir entre
do nome da tag e o sinal de maior que (>) separadas por
um espao na abertura da mesma. Por exemplo:
A tag em questo a tag de link <a>.
Um dos atributos da tag <a> o href que vai ser mostrado
no exemplo logo abaixo:
<a href="www.tutsup.com">Isto um link para um site</a>
O atributo
href indica o link que o navegador deve abrir quando

o usurio clicar neste link, neste caso www.tutsup.com
Uma tag tambm pode receber vrios atributos, por exemplo:
A tag <font> altera as letras. Porm ela precisa de alguns
atributos para funcionar, sendo eles: SIZE, FACE, COLOR. Olhe
o exemplo abaixo:
<font size = 5 face = arial color = red> Texto a ser
formatado. </font>
Observao: Reparem que no fechamento da tag eu s fecho
</font> e no </font size face color>
Tags HTML e seus atributos

A W3C, World Wide Web Consortium, que a principal
organizao de padronizao da World Wide Web (www), tem
uma lista de todas as tags HTML e seus atributos em seu site,
voc deve ler suas recomendaes para criar seus sites, no
entanto, vou passar alguns atributos que voc sempre vai
utilizar. Porm, antes disso, vamos ver algumas regrinhas
bsicas sobre eles:
Os atributos devem estar dentro da abertura da tag;
Atributos diferentes devem ser separados por espaos;
Os valores dos atributos devem estar dentro de aspas;
possvel utilizar aspas duplas e simples, no entanto, se
voc abrir um atributo com aspas simples, deve fechar
com aspas simples. O mesmo acontece para as aspas
duplas.
Exemplos corretos da utilizao de atributos e aspas:
1 <a href="http://exemplo.com">link</a>
2 <a href='http://exemplo.com'>link</a>
Exemplos incorretos da utilizao de atributos com

aspas:
1 <ahref="http://exemplo.com">link</a>
2 <a href="http://exemplo.com'>link</a>
3 <a href='http://exemplo.com">link</a>
4 <a href=http://exemplo.com>link</a>
Principais tags com atributos

<a> </a>
As tags que geram os links. Seu atributo principal
o href="link", onde voc coloca o link que deseja entre as
aspas. Exemplo:
<a href="http://www.google.com.br/">Site do Google</a>
<img>
As tags img servem para exibir imagens na tela do navegador.
Seu principal atributo o src="link_da_imagem"(source),
mas tambm existem atributos
como width="largura" e height="altura" para definir a
largura e altura da imagem. Exemplo:
1
2
3
4
5
<img
src="http://www.tutsup.com/tutsup-logo.png"
width="1024"
height="768 />
Outra peculiaridade da tag <img> que ela no tem uma tag

de fechamento, portanto, utilizamos uma barra antes do sinal
de maior que (>).
1 <img />
Observao: A barra (/) no final das tags que no necessitam
de tags de fechamento s necessria em documentos XHTML.
Como estamos criando documentos declarados com
<!DOCTYPE> do HTML5, no necessrio incluir tal barra.
Portanto, isto:
1 <img src="http://www.tutsup.com/tutsup-logo.png" />

E isto:
1 <img src="http://www.tutsup.com/tutsup-logo.png">
Funcionam da mesma maneira.
<Iframe>
As tags de iframe server para abrir um site dentro do seu site,
ou seja, criar um frame (quadro) com outro site dentro do seu
cdigo. seu principal atributo tambm o src="link_do_site",
e ele tambm suporta width="largura" eheight="altura".
Exemplo:
<iframe src="http://tutsup.com" width="640"

height="480"></iframe>
Mas ao contrrio das tags de imagem, as tags

de <iframe> precisam ser fechadas com </iframe>.
Outro ponto interessante do <iframe> que ele no tem nada
entre suas tags, ou seja, tudo criado por atributos.
Estrutura Bsica Html
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
TAG
DESCRIO DO QUE A TAG FAZ

Faz um comentrio
Exemplo: 
Obs: A letra fica verde
<!doctype>
Define o tipo de documento que o

navegador vai ler
<html>
Abre e inicia o documento html.
</html>
Sempre vai estar no final e ele vai

encerrar documento html.
Define o cabealho de um documento
html. Algumas tags devero ficar dentro
do head.
<head>
Exemplo: <title>, <meta>, <link> e

entre outras.
</head>
Encerra o cabealho.
<title>
Define o ttulo de um documento html.

Obs: O ttulo vai ficar na aba do site
quando estiver aberto no navegador.
<meta>
Meta Tag um comando implementado no

cdigo de pginas web, dentro da rea Head do
site (entre as tags <head> e </head>) para
passar instrues a programas externos ou
aes mais simples, como por exemplo passar
para o navegador a codificao do seu site (utf8) e as palavras chaves para os buscadores
como o google poderem encontra seu site na
internet.
Atributos Exemplo: charset, name, content e
entre outros.
</title>
Encerra o ttulo
Inicia e Define o corpo (estrutura) de um
documento html.
<body>
Obs: A maioria das tags deve ficar dentro

do body pois dentro do body que vamos
definir o documento html.
Exemplo: <h1>,<font>,<img>,<a> e
entre muitas outras.
</body>
Encerra o corpo do documento html.
<br>
Pula uma linha no documento html.

Obs: No necessria tag de
fechamento.
<p>
Pula 2 linhas.
Obs: No necessria tag de
fechamento.
<h1></h1>
So tags de ttulos.
Vai at o
Obs: A tag <h1> a maior, da tag <h2> em

diante s vai dimuindo o tamanho do ttulo.
<h6> </h6>
<hr>
Cria uma linha horizontal no seu

documento html.
Obs: podemos usar atributos width, size ,
align e height para aumentar a largura e
altura da linha.
<hr size =10
<a>
As tags que geram os links. Seu atributo

principal o href.
<a href =www.globo.com.br> clique aqui </a>
<font>
Altera o tipo, a cor e o tamanho das letras. Tudo

isso usando os atributos: face, size e color.
<font face =arial size =3 color = blue>
Texto formatado
</font>
As tags img servem para exibir imagens na tela

do navegador. Seu principal atributo
o src="link_da_imagem"(source), mas
tambm existem atributos
<img>
como width="largura" e height="altura" para

definir a largura e altura da imagem. Exemplo:
<img src="natureza.jpg"
width="1024"height="768"/>
<b> </b>
ou
<Strong>
<b> e <Strong> tem a mesma funo que

deixar o texto entre as tags em negrito.
Ex: <b>Texto em negrito</b>
</strong>
<Strong> Outro exemplo </Strong>
<u> </u>
A tag <u> deixa o texto com underline.

Ex: <u>texto sublinhado ou underline </u>
<i> </i>
Ou
As tags <i> e <em> vo deixar o texto em

itlico.
Ex: <i>texto formatado </i>
<em> </em>
<em> texto com itlico </em>
<audio>
Insere um contedo com udio no

documento html.
Ex: <audio controls>
<source src="som.mp3"
type="audio/mpeg">
</audio>
Insere um video no document html.
<vdeo>
Ex:
<video width=320 height=240 controls>
<source src=video.mp4 type=video/mp4>
<source src=video.ogg type=video/ogg>
Seu navegador no suporta.
<button>
</8deo>
Cria um boto em formulrio html.
Ex:
<button type=button>Clique aqui!</button>
Cria uma tabela no html.

Porm dentro da tabela ter que ser inserio
a quantidade de linhas que o usurio quiser
atravs do <tr> e as colunas atravs do
<th>
<table>
<table>
<tr> <th> </th>

<th> </th> </tr>
<tr> <th> </th>
<th> </th> </tr>
</table>
Foi criada uma tabela com duas linhas e
duas colunas em cada linha.
<tr>
Define uma linha em uma tabela.
<th>
Define uma clula (coluna) de uma tabela.

Lista no ordenada
<ul>
<ul> </ul>
<li> * Elemento 1 </li>

</ul>
Lista ordenada
<ol>
<ol> </ol>
<li> 1- Elemento 1 </li>

</ol>
<style>
Define o estilo para vrios elementos em um

documento (CSS).
Ex: <h1 style "font-size:16px;font-family:arial;
color:red> texto </h1>
<input>
Define uma entrada em formulrio html.

como no exemplo abaixo.
Define o Incio de um formulrio.
<form>
<fieldset>
<legend>Formulrio:</legend>
<form>
Nome: <input type="text"><br>

Email: <input type="text"><br>
Senha: <input type =password><br>
</fieldset>
</form>
<fieldset>
<link>
Agrupa Elementos relacionados a um

formulrio. Como no exemplo acima.
Define um link para um contedo externo
(normalmente CSS).

HTML Atalhos

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

HTML Atalhos

Hochgeladen von

Copyright:

Verfügbare Formate

HTML

Para dar continuidade ao curso, vamos falar mais um pouco

href indica o link que o navegador deve abrir quando

Tags HTML e seus atributos

Exemplos incorretos da utilizao de atributos com

Principais tags com atributos

Outra peculiaridade da tag <img> que ela no tem uma tag

1 <img src="http://www.tutsup.com/tutsup-logo.png" />

<iframe src="http://tutsup.com" width="640"

Mas ao contrrio das tags de imagem, as tags

Estrutura Bsica Html

DESCRIO DO QUE A TAG FAZ

Define o tipo de documento que o

Abre e inicia o documento html.

Sempre vai estar no final e ele vai

Exemplo: <title>, <meta>, <link> e

Define o ttulo de um documento html.

Meta Tag um comando implementado no

Obs: A maioria das tags deve ficar dentro

Encerra o corpo do documento html.

Pula uma linha no documento html.

Obs: A tag <h1> a maior, da tag <h2> em

Cria uma linha horizontal no seu

As tags que geram os links. Seu atributo

Altera o tipo, a cor e o tamanho das letras. Tudo

As tags img servem para exibir imagens na tela

como width="largura" e height="altura" para

<b> e <Strong> tem a mesma funo que

<Strong> Outro exemplo </Strong>

A tag <u> deixa o texto com underline.

As tags <i> e <em> vo deixar o texto em

<em> texto com itlico </em>

Insere um contedo com udio no

Cria um boto em formulrio html.

Cria uma tabela no html.

<tr> <th> </th>

Define uma linha em uma tabela.

Define uma clula (coluna) de uma tabela.

<li> * Elemento 1 </li>

<li> 1- Elemento 1 </li>

Define o estilo para vrios elementos em um

Define uma entrada em formulrio html.

Nome: <input type="text"><br>

Agrupa Elementos relacionados a um

Das könnte Ihnen auch gefallen