Escolar Documentos
Profissional Documentos
Cultura Documentos
HTML Bsico
Seguir @linhadecodigo 2.897 seguidores 2.432
Enviar
Log In / Cadastre-se
Pesquisar
HOME
DESENVOLVIMENTO
FRONT-END
BANCO DE DADOS
SEO
UTILITRIOS HTML
EM DESTAQUE
TODOS
Publicidade
PUBLIQUE
CURSOS
VDEOS
Desenvolvimento - HTML
HTML Bsico
Neste tutorial veremos uma introduo de como funciona a linguagem HTML. Veremos as principais tag's da linguagem.
por Leandro Oriente
Este artigo trata de uma introduo ao HTML. O HTML uma abreviao de HyperText Markup Language ou seja que em portugus significa, Linguagem de marcao de Hipertexto. Os arquivos HTML so interpretados pelos navegadores (browsers), portanto, caso voc tenha algum arquivo HTML no computador, basta pedir que o seu navegador abra ele. O HTML trabalha com o sistema de tags (etiquetas). Esse sistema funciona da seguinte maneira. Ex:
1 < t a g > C o n t e d od at a g < / t a g >
REVISTAS DEVMEDIA
Toda tag aberta, deve ser fechada, salvo raras excees, nesses casos ela pode ser fechada da seguinte maneira:
1 < / t a g >
easy .net mag 28 .net Magazine 102
VER TODAS ASSINE
Uma tag HTML pode conter outra tag dentro dela, e quantas forem necessrias.
1 2 3 < t a g > < o u t r a T a g > t e x t o < / o u t r a T a g > < / t a g >
Algumas tag's possuem propriedades que podem possuir valores. Um exemplo claro a tag de imagem que possui o caminho da imagem.
1 < i m gs r c = " c a m i n h o I m g . j p g "/ >
1 2 3 4 5 6
Principais Frameworks de Javascript As 52 palavras reservadas do Java Comandos bsicos em SQL - insert, update, delete e select HTML Bsico HTML Avanado Tratando os eventos do mouse com jQuery Trabalhando com Linked Server no SQL Server 2005
- Evitem de colocar elementos redundantes no cdigo. Um uso comum o de <br /> para pular linhas e definir uma altura para um elemento, enquanto o correto seria definir a altura atravs do Css.
www.linhadecodigo.com.br/artigo/81/html-basico.aspx
1/8
02/03/13
HTML Bsico
- Uma pgina HTML tem a extenso .html, porm elas podem ser geradas dinamicamente com alguma linguagem com o PHP, ASP, PYTHON Ento em alguns casos essa extenso alterada para a extenso da linguagem utilizada para gerar a pgina HTML.
8 9 10
Quanto vale o seu servio? Aprenda a cobrar pelo seu trabalho. Recursividade em JAVA Guia prtico para o desenvolvimento de Aplicaes C# em Camadas - parte 2
VER TODOS
Linha de Cdigo
LinhaDeCodigo LinhaDeCodigo Quer ver seu artigo publicado em nosso site? Entre em contato com nosso coordenador @ricoarrigoni 23 days ago reply retweet favorite javafree O portal JavaFree inicia mais uma promoo para seus usurios. bit.ly/UohrHm 46 days ago reply retweet favorite LinhaDeCodigo #FF @DevMedia @javafree @alienudos @CuboStudioWeb @ricoarrigoni @mrboolteam @maujor @competiva @LinhaDeCodigo 57 days ago reply retweet favorite mais_visual Como criar pginas responsivas para vrios dispositivos? #desenvolvimento #html | migre.me/cDf8s | via @LinhaDeCodigo 59 days ago reply retweet favorite Join the conversation
Vou abordar agora as principais tags HTML e explicar um pouco de seu funcionamento.
HTML <html> </html> Essa tag responsvel por definir o incio de um documento HTML e seu fim. Logo deve ser aberta no incio do documento e fechado no seu final. HEAD <head></head> Tag que define o incio e o fim do cabealho do documento. Abordaremos mais abaixo o que deve ser inserido no cabealho. BODY <body></body> Tag onde devem ser inseridos os contedos do site que devero ficar visveis ao usurios quando a pgina for renderizada no navegador. Somente com essas trs tags j podemos ter uma estrutura HTML bsica. Segue um exemplo.
1 2 3 4 5 6 7 8 9 < ! D O C T Y P Eh t m l > < h t m l > < h e a d > < ! c o n t e u d od oh e a d > < / h e a d > < b o d y > < ! c o n t e u d od ob o d y > < / b o d y > < / h t m l >
O <!DOCTYPE html> inserido antes da tag <html> no exemplo anterior para especificar para o navegador o tipo de pgina HTML que ele vai renderizar. Existem diferentes tipos de HTML usados atualmente porm os mais usados so o HTML 5, cujo doctype especificado o que eu utilizei no exemplo, o HTML 4.1 e o XHTML. Nos ltimos dois exemplos o doctype um pouco mais complexo, trazendo informaes sobre o tipo de documento (Strict, transitional e frameset). Porm recomendo que sempre utilizem o doctype do HTML 5, pois ele mais enxuto e mesmo que no utilize HTML 5 em sua pgina no vai prejudicar em nada a renderizao da pgina pelo browser.
Cabealho <head>
No cabealho trazemos informaes que sero usadas pelo navegador como: TITLE <title>Sou o ttulo da pgina</title> Ttulo da pgina a ser exibido (texto que fica na aba de seu navegador quando uma pgina esta aberta) LINK <link href="" type="" media="" rel="" /> Geralmente usado para selecionar arquivo externo no HTML. Um uso comum dele para selecionar arquivos CSS (responsveis por definir a aparncia da sua pgina para o usurio final). Ex:
1 < l i n kh r e f = " e s t i l o . c s s "t y p e = " t e x t / c s s "m e d i a = " s c r e e n "r e l = " s t y l e s h e e t "/ >
Nessa linha, definimos que arquivo a ser utilizado na pgina do tipo CSS, para ser renderizado em telas (Monitores, TV's, smartphones) METATAGS code><meta name="" content="" /> Metatags tem uma infinidade de funes que no irei citar aqui, porm nesse link existem mais
www.linhadecodigo.com.br/artigo/81/html-basico.aspx
2/8
02/03/13
HTML Bsico
informaes sobre todas elas, http://www.w3.org/TR/html401/struct/global.html#h-7.4.4. Atualmente s costumo utilizar duas. Uma para referenciar para os buscadores um breve resumo sobre a pgina, chamada DESCRIPTION. O seu uso basicamente da seguinte forma: <meta name="description" content="Aqui entra o resumo sobre a pgina. recomendvel que voc no ultrapasse 160 caracteres nesse texto" /> E a metatag CHARSET. Com ela voc define que tipo de codificao que o seu texto vai usar ao ser renderizado pelo navegador. Recomendo utilizar o utf-8 mesmo. Porm existem casos onde preciso usar uma diferente. Existem duas formas de usar o charset. Uma para HTML 5 e uma para os demais. Seguem os exemplos: HTML 5: <code><meta charset="utf-8" /></code> Demais: <code><meta http-equiv=Content-Type content=text/html;charset=utf-8 /></code> Novamente, recomendo utilizar a marcao do HTML 5 por ser mais enxuta. Existe ainda a tag <script> que chamada no cabealho por alguns desenvolvedores, porm, prefiro chama-la no final do <body> para no atrapalhar no carregamento dos demais componentes de suas pgina. Segue uma exemplo de um cabealho:
1 2 3 4 5 6 7 < ! d o c t y p eh t m l > < h e a d > < t i t l e > T t u l od ap g i n a < / t i t l e > < m e t ac h a r s e t = " u t f 8 "/ > < m e t an a m e = " d e s c r i p t i o n "c o n t e n t = " B r e v er e s u m os o b r eoc o n t e d od e s t ap g i n a "/ > < l i n kh r e f = " e s t i l o . c s s "r e l = " s t y l e s h e e t "t y p e = " t e x t / c s s "/ > < / h e a d >
<span></span> SPAN uma tag inline usada para marcar um trecho de texto. Ele frequentemente usado para personalizar um trecho de texto em um paragrfo via css, j que naturalmente no altera nada no HTML. Ex:
1 < p > S o uu m < s p a n > p e q u e n op a r g r a f o < / s p a n > < / p >
<Strong></Strong> O STRONG utilizado para deixar um texto em negrito. A tag <b></b> tem um comportamento semelhante porm a W3C recomenda utilizar o <Strong>. Ex:
1 < p > Ot r e c h oas e g u i re s t e m < b > n e g r i t o < / b > < / p >
www.linhadecodigo.com.br/artigo/81/html-basico.aspx
3/8
02/03/13
muito tempo para isso porm a W3C recomenda que utilize o <em> mesmo. Ex:
1 < p > Ot r e c h oas e g u i re s t e m < e m > i t l i c o < / e m > < / p >
HTML Bsico
<em></em> A tag EM utilizada para deixar um elemento em itlico. A tag <i> foi utilizada durante
<br /> A tag BR utilizada para definir uma quebra de linha. Seu uso deve ser cauteloso. Evite usar muitos BR's em casos onde deveriam existir paragrfos. Ex:
1 2 < p > P r i m e i r al i n h a < b r/ > s e g u n d al i n h a < / p >
<ul></ul> <ol></ol> <li></li> Os elementos UL e OL so usados para iniciar uma lista, sendo o <ul> para uma sem ordenao numrica e o <ol> para uma com ordenao numrica. Os elementos dentro dessa lista devem ser marcados com a tag LI. Ex:
1 2 3 4 < u l > < l i > S o uu me l e m e n t od eu m al i s t a < / l i > < l i > S o uo u t r oe l e m e n t od e n t r od al i s t a < / l i > < / u l >
<a></a> O A um elemento responsvel por "linkar" pginas/arquivos na sua pgina. Atravs do atributo href voc pode especificar aonde est a pgina/arquivo a ser linkado na pgina. Ex:
1 2 < ah r e f = " c l i e n t e s . h t m l " > P g i n ad ec l i e n t e s < / a > < ah r e f = " c u r r c u l o . p d f " > C u r r i c u l o < / a >
Link externo:
1 < ah r e f = h t t p : / / w w w . s i t e e x t e r n o . c o m > S i t ee x t e r n os e n d ol i n k a d o < / a >
<img /> A tag IMG usada para renderizar uma imagem no site. necessrio que o campo src seja preenchido com o caminho para a imagem. Os campos width e height devem ser preenchidos com a largura e a altura da imagem em pixels, muito importante que esse campo esteja sempre preenchido para evitar que o navegador tenha que calcular sozinho o tamanho da imagem. O campo alt, deve conter uma pequena descrio da imagem para o caso do navegador no conseguir reproduzir a imagem e por questes de acessibilidade para leitores de tela usados por cegos. Ex:
1 < i m gs r c = " i m a g e m . j p g "w i d t h = " 5 0 "h e i g h t = " 5 0 "a l t = " D e s c r i od ai m a g e m "/ >
<div></div> O DIV uma tag de bloco, usado para agrupar elementos semelhantes. Um uso comum dele para categorizar o cabealho (Header) da pgina, o contedo (content) e o rodap (footer). muito utilizado para auxiliar na personalizao do site atravs do Css. Ex:
1 2 3 4 < d i v > < h 2 > T t u l or e l e v a n t e < / h 2 > < p > T e x t od ob l o c o < / p > < i m gs r c = " a l e r t a . j p g "w i d t h = " 1 0 "h e i g h t = " 7 "a l t = " a l e r t a "/ > < / d i v >
<table></table> <td></td> <tr></tr > A tag TABLE usada para dermacar uma tabela. As linhas so marcadas com a tag TR enquanto as colunas ficam com a tag TD. possvel agrupar colunas com o atributo colspan e linhas com o atributo rowspan. Um <td colspan="2"></td> significa que aquela coluna vai ocupar o espao de duas colunas.
www.linhadecodigo.com.br/artigo/81/html-basico.aspx
4/8
02/03/13
Ex: Tabela 22
1 2 3 4 5 6 7 8 9 1 0 < t a b l e > < t r > < t d > P r i m e i r ac o l u n ad ap r i m e i r al i n h a < / t d > < t d > S e g u n d ac o l u n ad ap r i m e i r al i n h a < / t d > < / t r > < t r > < t d > P r i m e i r ac o l u n ad as e g u n d al i n h a < / t d > < t d > S e g u n d ac o l u n ad as e g u n d al i n h a < / t d > < / t r > < / t a b l e >
HTML Bsico
<form></form> A tag FORM serve para demarcar a rea de um formulrio. No caso do form abordarei as tags utilizadas por ele em grupos diferentes pois so muitos. A tag form tem o atributo action, que determina qual ao vai ser executada quando ele for submetido. Ex:
1 2 < f o r ma c t i o n = " e n v i o F o r m u l a r i o . p h p " > < / f o r m >
<input /> A tag INPUT pode adquirir caractersticas especificas de acordo com o atributo type que ele receber. Ex:
1 2 3 4 5 6 7 8 9 1 0 1 1 1 2 1 3 1 4 1 5 < i n p u tt y p e = " t e x t "v a l u e = " D i g i t ea q u i "/ > < ! C a m p oo n d eou s u r i op o d ed i g i t a ru mp e q u e n ot e x t o . C a s oq u e i r ad e i x a ru mv a l o rp o rp a d r o , b a s t aa d i c i o n a ru ma t r i b u t ov a l u ec o mov a l o rd e s e j a d o . > < i n p u tt y p e = " s u b m i t "/ > < ! -C r i au mb o t oq u ev a is u b m e t e rof o r m u l r i oa os e rc l i c a d o . > < i n p u tt y p e = " f i l e "/ > < ! -C r i au mc a m p op a r af a z e ru p l o a d sd ea r q u i v o s . > < i n p u tt y p e = " r a d i o "t y p e = " g r u p o "/ > < ! -C r i au mc a m p op a r as e l e o n i c a . A so p e sd i s p o n v e i ss oa g r u p a d a sp e l ot y p e ,o us e j a , s eh o u v e r e m3i n p u t sr a d i oc o mom e s m ot y p e , ou s u r i os p o d e r e s c o l h e ru md e l e s . > < i n p u tt y p e = " c h e c k b o x "/ > < ! -B e ms e m e l h a n t ea or a d i o ,p o r mp e r m i t em l t i p l as e l e o . >
<textarea></textarea> A tag TEXTAREA tem um comportamento semelhante ao do input text, porm ele destinado a textos maiores. Ex:
1 < t e x t a r e a > < / t e x t a r e a >
<label></label> A tag LABEL permite que voc atribua uma legenda a um campo do seu formulrio. Existem duas formas de usa-la: Ex: 11 2 3 < l a b e l > S o uu m al e g e n d a < i n p u tt y p e = " t e x t "/ > < / l a b e l >
21 2 < l a b e lf o r = " c a m p o " > S o uu m al e g e n d a < / l a b e l > < i n p u tt y p e = " t e x t "i d = " c a m p o "/ >
www.linhadecodigo.com.br/artigo/81/html-basico.aspx
5/8
02/03/13
HTML Bsico
enquanto o HEAD fica dentro da tag HTML e trs informaes somente visveis para o navegador. <footer></footer> O FOOTER assim como o HEADER serve para auxiliar na formatao da pgina e veio para substituir a famoso <div id="rodap">/<div id="footer">. <aside></aside> A tag ASIDE utilizada para demarcar as regies laterais das pginas que geralmente carregam elementos de navegao, ou informaes auxiliares ao contedo principal. <section></section> -A tag SECTION tem um funcionamento muito semelhante ao da DIV porm ela serve para demarca que um bloco de contedo possui uma relao mais prxima. Enquanto o DIV no carrega valor semntico algum. <article></article> A tag ARTICLE serve para definir o contedo principal de uma pgina. <nav></nav> A tag NAV usada para indicar uma navegao. Ela deve ser usada para agrupar links de navegao. A principal diferena dessas tags novas das DIV's que elas passam valor semntico enquanto a DIV s serve como auxiliar para formatao, sem passar valor algum. Caso queiram utilizar as tags citadas acima em qualquer navegador, mesmo que ele no leia HTML 5, basta inserir o seguinte script no final de sua pgina:
1 2 3 < ! [ i fl tI E9 ] > < s c r i p ts r c = " / / h t m l 5 s h i v . g o o g l e c o d e . c o m / s v n / t r u n k / h t m l 5 . j s " > < / s c r i p t > < ! [ e n d i f ] >
ID's e CLASS
OsID'sso atributos que podem ser atribudos a qualquer tag presente no <body>. Com ele possvel identificar um elemento facilmente. Isso ajuda muito no desenvolvimento do Css e na programao do Javascript (falaremos adiante sobre isso). importante ressaltar que o ID deve ser nico, ou seja, s pode existir um por pgina. Exemplos clssicos de ID's so para definir cabealhos, rodaps e blocos de contedo. Ex:
1 2 3 < d i vi d = " c a b e a l h o " > < / d i v > < i m gs r c = " p e r f i l . j p g "h e i g h t = " 5 0 "w i d t h = " 2 0 "i d = " i m a g e m P e r f i l "/ > < s p a ni d = " h o r a r i o " > 1 2 : 3 0 < / s p a n >
J oCLASSdeve ser utilizado para agrupar elementos com atribuies semelhantes. Se voc vai usar um boto com as mesmas caractersticas em vrios locais do site, vale a pena colocar um CLASS nele e personalizar somente uma vez no css. Ex:
1 < i n p u tt y p e = " s u b m i t "v a l u e = " E n v i a r "c l a s s = " b o t a o F o r m "/ >
CSS e JAVASCRIPT
OCss um arquivo que visa personalizar o modo como seu HTML aparece para o usurio. Ele deve ser chamado dentro da tag <head> no topo do site. Ex: <code><link href="estilo.css" type="text/css" media="screen" rel="stylesheet" /></code> O Javascript uma linguagem muito ponderosa que permite que o desenvolvedor altere elementos na pgina HTML. O ideal que ele seja chamado no fim da pgina (antes do fechamento da tag body) para no atrasar o carregamento dos demais componentes do seu HTML. Caso tenha interesse em estudar, recomendo olhar tambm a biblioteca javascript jQuery. Ex:
1 2 < s c r i p tt y p e = " t e x t / j a v a s c r i p t "s r c = " s c r i p t . j s " > < / s c r i p t > < s c r i p tt y p e = " t e x t / j a v a s c r i p t " > / / A q u iv a ios e uc d i g oj a v a s c r i p t < / s c r i p t >
Vou me conter as esses comentrios para no sair do foco do artigo. Em breve postarei sobre Css e Javascript tambm.
www.linhadecodigo.com.br/artigo/81/html-basico.aspx
6/8
02/03/13
3 4 5 6 7 8 9 1 0 1 1 1 2 1 3 1 4 1 5 1 6 1 7 1 8 1 9 2 0 2 1 2 2 2 3 2 4 2 5 2 6 2 7 2 8 2 9 3 0 3 1 3 2
HTML Bsico
< h e a d > < m e t ac h a r s e t = " U T F 8 " > < t i t l e > T t u l od ap g i n a < / t i t l e > < m e t an a m e = " d e s c r i p t i o n "c o n t e n t = " S o uod e s c r i p t i o nd ap g i n a .U m ab r e v ed e s c r e i o "/ > < l i n kh r e f = " c s s / e s t i l o . c s s "t y p e = t e x t / c s sr e l = s t y l e s h e e t > < ! [ i fl tI E9 ] > < s c r i p ts r c = " / / h t m l 5 s h i v . g o o g l e c o d e . c o m / s v n / t r u n k / h t m l 5 . j s " > < / s c r i p t > < ! [ e n d i f ] > < / h e a d > < b o d y > < h e a d e r >< ah r e f = " / " > < i m gs r c = " l o g o . j p g "a l t = " L o g os i t e "w i d t h = " 2 0 0 "h e i g h t = " 5 0 " > < / a > < n a v > < u l > < l i > < ah r e f = " / " > H o m e < / a > < / l i > < l i > < ah r e f = " c l i e n t e s . h t m l " > C l i e n t e s < / a > < / l i > < l i > < ah r e f = " e m p r e s a . h t m l " > E m p r e s a < / a > < / l i > < l i > < ah r e f = " c o n t a t o . h t m l " > C o n t a t o < / a > < / l i > < / u l > < / n a v > < / h e a d e r > < s e c t i o n > < h 1 > S o uot t u l od ap g i n a < / h 1 > < h 2 > S o uu ms u b t i t u l o < / h 2 > < p > S o uu mc o n t e d oc o m u m . < e m > E s t o ue mi t a l i c o < / e m > . < b > E s t o ue mn e g r i t o < / b > < u > E s t o us u b l i n h a d o < / u > < / p > < / s e c t i o n > < f o o t e r > S o uor o d a p < / f o o t e r > < s c r i p ts r c = " j s / j a v a s c r i p t . j s "t y p e = " t e x t / j a v a s c r i p t " >< / s c r i p t > < / b o d y > < / h t m l >
www.linhadecodigo.com.br/artigo/81/html-basico.aspx
7/8
02/03/13
HTML Bsico
Leia tambm
Principais Frameworks para desenvolvimento Front-end
HTML
www.linhadecodigo.com.br/artigo/81/html-basico.aspx
8/8