02/03/13

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 >

Esta pgina da web no est disponvel

O Google Chrome no consegue acessar este site. Normalmente, isso causado por problemas na rede, mas tambm pode ser resultado de problemas na configurao de um firewall ou servidor proxy. Veja algumas sugestes: Recarregue esta pgina da web mais tarde. Adicione o Google Chrome como um
TOP 10 - ARTIGOS TOP 10 - AUTORES

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 "/ >

importante seguir alguns padres ao criar seu arquivo HTML.

- Primeiramente tente sempre que possvel usar as letras em caixa baixa, ou seja, todas em minsculo. - Nesse artigo irei abordar somente o HTML. Antigamente os desenvolvedores personalizavam a aparncia da pgina no prprio HTML, porm atualmente estamos fazendo isso pelo arquivo CSS. Portanto, caso gostem desse artigo, posso escrever um sobre CSS bsico para personalizar uma pgina HTML - O comentrio em HTML feito da seguinte maneira <!Comentrio a seguir > - Tente manter seu documento indentado para facilitar a manuteno. Uma tabulao com 2-4 espaos o suficiente para ajudar na endentao do documento. Ex:
1 2 3 < t a g > < o u t r a T a g/ > < / t a 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

Quais editores HTML usar.

Para escrever cdigo HTML basta um simples editor de texto como o bloco de notas (notepad). Porm eu recomendo editores mais robustos para facilitar um pouco sua vida. Os principais so es seguintes: - Sublime Text 2: Considero o melhor editor atualmente. Experimente usar a extenso Zen Coding em conjunto com ele e experimente o mximo da performance ao criar seus arquivos HTML. - Notepad ++: Outro excelente editor. Possui uma interface simples mas bem poderoso tambm. - Dreamweaver : Um excelente editor para iniciantes. Cuidado com o modo Design. Evite de editar seu HTML por ele pois ele no gera um cdigo muito semntico.

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 >

Corpo da pgina <body>

Dentro da tag <body> que vo entrar todos os elementos que ficaro visveis aos usurios. As tags usadas dentro do body podem ser divididas em inline e block. Tags inline so tags que mantem o fluxo comum do contedo e tags block quebram o fluxo e geram o elemento abaixo do ltimo block. Voc pode usar uma tag inline dentro de uma block, mas no pode usar uma block dentro de uma inline por questes de semntica. Vou agrupa as principais tags e explicar o seu funcionamento: <h1></h1> O H1 utilizado para marcar um ttulo. Voc pode utilizar diversos nveis de relevncia, para isso basta mudar o nmero na tag. As heading tags como so chamadas, vo de 1 6. Ou seja, voc pode ter um<h1></h1> <h2></h2> <h6></h6>. recomendvel por questes de otimizao e semntica que voc utilize apenas um <h1>, que seria o ttulo da pgina como um todo, e que posicione ele o quanto antes no <body>. Porm as demais tags de ttulo podem ser usadas conforme a necessidade. Ex:
1 < h 1 > S o uu mt t u l or e l e v a n t e < / h 1 >

<p></p> O P utilizado para definir um pargrafo. Ex:

1 < p > S o uu me l e m e n t od ep a r g r a f o < / p >

<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

<u></u> A tag U usada para sublinhar um termo. Ex:

1 < p > P e q u e n ot e x t oc o mt r e c h o < u > s u b l i n h a d o < / u > < / p >

<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 "/ >

ALGUMAS TAGS HTML 5

No irei muito a fundo nesse tpico pois boa parte das tags HTML 5 ainda no esto totalmente compatveis com todos os navegadores. Principalmente quando falamos do Internet Explorer 8 ou inferior. <header></header> A tag HEADER serve para limitar o cabealho da sua pgina. Ele foi criado com a inteno de simplificar o famoso <div id="cabecalho"> / <div id="header">. Cuidado para no confundi-lo com a tag HEAD. O HEADER deve ser utilizado dentro do BODY como auxiliar semntico,

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.

Exemplo de uma pgina HTML completa:

1 2 < ! D O C T Y P EH T M L > < h t m ll a n g = " e n U S " >

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 >

ORGANIZANDO E HOSPEDANDO SEU SITE

De aqui em diante falarei de coisas que saem um pouco do escopo do HTML mas que so essenciais para o desenvolvimento de um site. A principal dela a organizao. Seu site vai ter diversos arquivos HTML. Vamos supor que seja um site empresarial. De cara teramos uma pgina para a Home, uma para Empresa, uma para Clientes e uma para Contatos. Ento na pasta principal do site, teramos um arquivo home.html (ou index.html), empresa.html, clientes.html e contato.html. Porm o site teria diversos outros arquivos como por exemplo, arquivos Css, Imagens usadas no site, Javascripts, documentos anexados nas pginas Ento acaba sendo interessante, criar pastas para arquivos semelhantes. Geralmente trabalho com a seguinte estrutura: - Site (aqui ficam os arquivos html) Css (aqui ficam os arquivos css) JS (aqui ficam os arquivos javascript) Img (aqui ficam as imagens do site) Docs (aqui ficam os demais documentos, pdfs, txt) Aps isso necessrio providenciar duas coisas para que seu site entre de vez no ar. Uma hospedagem e um domnio. O domnio .com.br pode ser adquirido no registro.br por apenas R$ 30,00 mensais. J a hospedagem deve ser paga a uma empresa terceirizada. Existem planos de R$ 10,00 mensais at planos bem mais caros, porm importante pesquisar o que melhor se adequa ao seu caso. Existem hospedagens gratuitas, porm no recomendo nenhuma delas. Aps o registro do domnio e o plano de hospedagem, vai ser necessrio que voc envie seus arquivos para o servidor. Para isso necessrio uma programa de envio ftp. Eu recomendo o filezilla (http://filezilla-project.org/). Basta preencher no programa os dados de host, username e password que a hospedagem ir fornecer e subir o seu diretrio com os arquivos do site para o servidor. importante que na raiz do site tenha um arquivo chamado index.html que seria a pgina inicial do site. Geralmente a pasta raiz do site no servidor se chama public_html. Leandro Oriente Desenvolvedor Front-End

Leandro Oriente - Desenvolvedor Front-End no Peixe Urbano.

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

Entendendo a pseudoclasse Hover

HTML

Detectando Suporte para HTML 5

HTML

Validando formulrios com Javascript e HTML5

HTML

Como criar pginas responsivas para vrios dispositivos

HTML

Estamos aqui: Linha de Cdigo faz parte do grupo Web-03

Poltica de privacidade e de uso | Anuncie | Cadastre-se | Fale conosco

2013 Linha de Cdigo. Todos os direitos reservados

www.linhadecodigo.com.br/artigo/81/html-basico.aspx

8/8