[ratings]<\/p>\n
HTML\u00a0\u00e9 uma abrevia\u00e7\u00e3o de HyperText Markup Language, que em portugu\u00eas significa Linguagem de Marca\u00e7\u00e3o de Hipertexto. Os arquivos HTML s\u00e3o interpretados pelos navegadores (browsers). Portanto, caso voc\u00ea tenha algum arquivo HTML no computador, basta pedir que o seu navegador o abra.<\/p>\n
O HTML trabalha com o sistema de tags (etiquetas). Esse sistema funciona da seguinte maneira:<\/p>\n
<tag>Conte\u00fado da tag<\/tag><\/pre>\nToda\u00a0tag aberta deve ser fechada, salvo raras exce\u00e7\u00f5es. Nesses casos, ela pode ser fechada da seguinte maneira:<\/p>\n
<\/tag><\/pre>\nUma\u00a0tag HTML pode conter outra tag dentro dela e quantas forem necess\u00e1rias.<\/p>\n
<tag>\r\n <outraTag>texto<\/outraTag>\r\n<\/tag><\/pre>\nAlgumas\u00a0tag’s possuem propriedades que podem possuir valores. Um exemplo claro \u00e9 a tag de imagem que possui o caminho da imagem.<\/p>\n
<img src=\"caminhoImg.jpg\" \/><\/pre>\n\u00c9 importante seguir alguns padr\u00f5es ao criar seu arquivo HTML:<\/p>\n
<tag>\r\n <outraTag \/>\r\n<\/tag>\r\n<\/pre>\n
QUAIS EDITORES USAR?<\/strong><\/p>\n Para\u00a0escrever c\u00f3digo HTML basta um simples editor de texto como o bloco de notas (notepad). Por\u00e9m, recomendo editores mais robustos para facilitar um pouco sua vida. Os principais s\u00e3o:<\/p>\n PRINCIPAIS TAGS HTML<\/strong><\/p>\n HTML \u2013 <html> <\/html><\/b> HEAD \u2013 <head><\/head><\/b> BODY \u2013 <body><\/body><\/b> Somente com essas tr\u00eas tags j\u00e1 podemos ter uma estrutura HTML b\u00e1sica. Segue um exemplo.<\/p>\n O\u00a0<!DOCTYPE html> inserido antes da tag <html> no exemplo anterior \u00e9 para especificar para o navegador o tipo de p\u00e1gina HTML que ele vai renderizar. Existem diferentes tipos de HTML usados atualmente, por\u00e9m os mais usados s\u00e3o o HTML 5, cujo doctype especificado \u00e9 o utilizado\u00a0no exemplo, o HTML 4.1 e o XHTML. Nos \u00faltimos dois exemplos, o doctype \u00e9 um pouco mais complexo, trazendo informa\u00e7\u00f5es sobre o tipo de documento (Strict, transitional e frameset). Por\u00e9m, recomendo que sempre utilize o doctype do HTML 5, pois ele \u00e9 mais enxuto e mesmo que n\u00e3o utilize HTML 5 em sua p\u00e1gina, n\u00e3o vai prejudicar em nada a renderiza\u00e7\u00e3o da p\u00e1gina pelo browser.<\/p>\n CABE\u00c7ALHO <head><\/strong> TITLE \u2013<\/strong> <title>Sou o t\u00edtulo da p\u00e1gina<\/title> LINK \u2013<\/strong> <link href=”” type=”” media=”” rel=”” \/> Nessa\u00a0linha, definimos que o arquivo a ser utilizado na p\u00e1gina \u00e9 do tipo CSS, para ser renderizado em telas (Monitores, TV’s, smartphones\u2026)<\/p>\n METATAGS \u2013<\/strong>\u00a0<meta name=”” content=”” \/> E a metatag CHARSET. Com ela voc\u00ea define que tipo de codifica\u00e7\u00e3o o seu texto vai usar ao ser renderizado pelo navegador. Recomendo utilizar utf-8 mesmo. Por\u00e9m existem casos onde \u00e9 preciso usar uma diferente. Existem duas formas de usar o charset: uma para HTML 5 e uma para os demais. Seguem os exemplos:<\/p>\n HTML 5: <code><meta charset=”utf-8″ \/><\/code><\/p>\n Demais: <code><meta http-equiv=\u201dContent-Type\u201d content=\u201dtext\/html;charset=utf-8\u2033 \/><\/code><\/p>\n Novamente, recomendo utilizar a marca\u00e7\u00e3o do HTML 5 por ser mais enxuta.<\/p>\n Existe ainda a tag <script> que \u00e9 chamada no cabe\u00e7alho por alguns desenvolvedores, por\u00e9m, prefiro cham\u00e1-la no final do <body> para n\u00e3o atrapalhar no carregamento dos demais componentes das p\u00e1gina.<\/p>\n Segue um exemplo de um cabe\u00e7alho:<\/p>\n CORPO DA P\u00c1GINA \u2013<\/strong>\u00a0<body> <h1><\/h1>\u00a0<\/b>\u2013 O H1 \u00e9 utilizado para marcar um t\u00edtulo. Voc\u00ea pode utilizar diversos n\u00edveis de relev\u00e2ncia; para isso, basta mudar o n\u00famero na tag. As heading tags, como s\u00e3o chamadas, v\u00e3o de 1 \u00e1 6. Ou seja, voc\u00ea pode ter um\u00a0<h1><\/h1> <h2><\/h2> \u2026 <h6><\/h6><\/b>. \u00c9 recomend\u00e1vel, por quest\u00f5es de otimiza\u00e7\u00e3o e sem\u00e2ntica, que voc\u00ea utilize apenas um <h1> que seria o t\u00edtulo da p\u00e1gina como um todo e que posicione ele o quanto antes no <body>. Por\u00e9m, as demais tags de t\u00edtulo podem ser usadas conforme a necessidade.<\/p>\n <p><\/p>\u00a0<\/b>\u2013 O p \u00e9 utilizado para definir um par\u00e1grafo.<\/p>\n <span><\/span>\u00a0<\/b>\u2013 SPAN \u00e9 uma tag inline usada para marcar um trecho de texto. Ele \u00e9 freq\u00fcentemente usado para personalizar um trecho de texto em um paragr\u00e1fo via CSS, j\u00e1 que naturalmente n\u00e3o altera nada no HTML.<\/p>\n <strong><\/strong>\u00a0<\/b>\u2013 O STRONG \u00e9 utilizado para deixar um texto em negrito. A tag <b><\/b> tem um comportamento semelhante por\u00e9m a W3C recomenda utilizar o <strong>.<\/p>\n <em><\/em>\u00a0<\/b>\u2013 A tag EM \u00e9 utilizada para deixar um elemento em it\u00e1lico. A tag <i> foi utilizada durante muito tempo para isso. Por\u00e9m, a W3C recomenda que utilize o <em> mesmo.<\/p>\n <u><\/u>\u00a0<\/b>\u2013 A tag U \u00e9 usada para sublinhar um termo.<\/p>\n <br \/>\u00a0<\/b>\u2013 A tag BR \u00e9 utilizada para definir uma quebra de linha. Seu uso deve ser cauteloso. Evite usar muitos BR’s em casos onde deveriam existir par\u00e1grafos.<\/p>\n <ul><\/ul> \u2013 <ol><\/ol> \u2013 <li><\/li>\u00a0<\/b>\u2013 Os elementos UL e OL s\u00e3o usados para iniciar uma lista, sendo o <ul> para uma sem ordena\u00e7\u00e3o num\u00e9rica e o <ol> para uma com ordena\u00e7\u00e3o num\u00e9rica. Os elementos dentro dessa lista devem ser marcados com a tag LI.<\/p>\n <a><\/a>\u00a0<\/b>\u2013 O A \u00e9 um elemento respons\u00e1vel por “linkar” p\u00e1ginas\/arquivos na sua p\u00e1gina. Atrav\u00e9s do atributo href voc\u00ea pode especificar onde est\u00e1 a p\u00e1gina\/arquivo a ser linkado na p\u00e1gina.<\/p>\n Link externo:<\/p>\n <img \/> \u2013<\/strong> A tag IMG \u00e9 usada para renderizar uma imagem no site. \u00c9 necess\u00e1rio 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. \u00c9 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 descri\u00e7\u00e3o da imagem para o caso do navegador n\u00e3o conseguir reproduzir a imagem e por quest\u00f5es de acessibilidade para leitores de tela usados por cegos.<\/p>\n <div><\/div>\u00a0<\/b>\u2013 O DIV \u00e9 uma tag de bloco, usado para agrupar elementos semelhantes. Um uso comum dele \u00e9 para categorizar o cabe\u00e7alho (header) da p\u00e1gina, o conte\u00fado (content) e o rodap\u00e9 (footer). \u00c9 muito utilizado para auxiliar na personaliza\u00e7\u00e3o do site atrav\u00e9s do CSS.<\/p>\n <table><\/table> \u2013 <td><\/td> \u2013 <tr><\/tr<\/b>> \u2013 A tag TABLE\u00a0\u00e9 usada para demacar uma tabela. As linhas s\u00e3o marcadas com a tag TR enquanto as colunas ficam com a tag TD. \u00c9 poss\u00edvel agrupar colunas com o atributo colspan e linhas com o atributo rowspan. Um <td colspan=”2″><\/td> significa que aquela coluna vai ocupar o espa\u00e7o de duas colunas.<\/p>\n <form><\/form>\u00a0<\/b>\u2013 A tag FORM serve para demarcar a \u00e1rea de um formul\u00e1rio. A tag form tem o atributo action, que determina qual a\u00e7\u00e3o vai ser executada quando ele for submetido.<\/p>\n <input \/>\u00a0<\/b>\u2013 A tag INPUT\u00a0pode adquirir caracter\u00edsticas especificas de acordo com o atributo type que ela receber.<\/p>\n <textarea><\/textarea>\u00a0<\/b>\u2013 A tag TEXTAREA tem um comportamento semelhante ao do input text, por\u00e9m ele \u00e9 destinado a textos maiores.<\/p>\n <label><\/label>\u00a0<\/b>\u2013 A tag LABEL permite que voc\u00ea atribua uma legenda a um campo do seu formul\u00e1rio. Existem duas formas de usa-la:<\/p>\n TAGS HTML5<\/strong><\/p>\n N\u00e3o\u00a0irei muito a fundo nesse t\u00f3pico pois boa parte das tags HTML5\u00a0ainda n\u00e3o est\u00e3o totalmente compat\u00edveis com todos os navegadores. Principalmente quando falamos do Internet Explorer 8 ou inferior.<\/p>\n <header><\/header>\u00a0<\/b>\u2013 A tag HEADER serve para limitar o cabe\u00e7alho da sua p\u00e1gina. Ele foi criado com a inten\u00e7\u00e3o de simplificar o famoso <div id=”cabecalho”> \/ <div id=”header”>. Cuidado para n\u00e3o confundi-lo com a tag HEAD. O HEADER deve ser utilizado dentro do BODY como auxiliar sem\u00e2ntico, enquanto o HEAD fica dentro da tag HTML e traz informa\u00e7\u00f5es somente vis\u00edveis para o navegador.<\/p>\n <footer><\/footer>\u00a0<\/b>\u2013 O FOOTER, assim como o HEADER, serve para auxiliar na formata\u00e7\u00e3o da p\u00e1gina e veio para substituir a famoso <div id=”rodap\u00e9”>\/<div id=”footer”>.<\/p>\n <aside><\/aside>\u00a0<\/b>\u2013 A tag ASIDE \u00e9 utilizada para demarcar as regi\u00f5es laterais das p\u00e1ginas que geralmente carregam elementos de navega\u00e7\u00e3o, ou informa\u00e7\u00f5es auxiliares ao conte\u00fado principal.<\/p>\n <section><\/section> \u2013\u00a0<\/b>A tag SECTION tem um funcionamento muito semelhante ao da DIV, por\u00e9m ela serve para demarcar que um bloco de conte\u00fado possui uma rela\u00e7\u00e3o mais pr\u00f3xima, enquanto a DIV n\u00e3o carrega valor sem\u00e2ntico algum.<\/p>\n <article><\/article>\u00a0<\/b>\u2013 A tag ARTICLE serve para definir o conte\u00fado principal de uma p\u00e1gina.<\/p>\n <nav><\/nav>\u00a0<\/b>\u2013 A tag NAV \u00e9 usada para indicar uma navega\u00e7\u00e3o. Ela deve ser usada para agrupar links de navega\u00e7\u00e3o.<\/p>\n A principal diferen\u00e7a entre essas tags novas e as DIV’s \u00e9 que elas passam valor sem\u00e2ntico, enquanto a DIV s\u00f3 serve como auxiliar para formata\u00e7\u00e3o, sem passar valor algum.<\/p>\n Caso queiram utilizar as tags citadas acima em qualquer navegador, mesmo que ele n\u00e3o leia HTML 5, basta inserir o seguinte script no final de sua p\u00e1gina:<\/p>\n ID’s E CLASS<\/strong><\/p>\n Os\u00a0ID’s s\u00e3o\u00a0atributos que podem ser atribu\u00eddos a qualquer tag presente no <body>. Com ele \u00e9 poss\u00edvel identificar um elemento facilmente. Isso ajuda muito no desenvolvimento do CSS e na programa\u00e7\u00e3o do Javascript. \u00c9 importante ressaltar que o ID deve ser \u00fanico, ou seja, s\u00f3 pode existir um por p\u00e1gina.\u00a0Exemplos cl\u00e1ssicos de ID’s s\u00e3o para definir cabe\u00e7alhos, rodap\u00e9s e blocos de conte\u00fado.<\/p>\n J\u00e1 o CLASS deve\u00a0ser utilizado para agrupar elementos com atribui\u00e7\u00f5es semelhantes. Se voc\u00ea vai usar um bot\u00e3o com as mesmas caracter\u00edsticas em v\u00e1rios locais do site, vale a pena colocar um CLASS nele e personalizar somente uma vez no CSS.<\/p>\n CSS E JAVASCRIPT<\/strong><\/p>\n O CSS \u00e9\u00a0um arquivo que visa personalizar o modo como seu HTML aparece para o usu\u00e1rio. Ele deve ser chamado dentro da tag <head> no topo do site.<\/p>\n O Javascript \u00e9\u00a0uma linguagem muito poderosa que permite ao desenvolvedor alterar elementos na p\u00e1gina HTML. O ideal \u00e9 que ele seja chamado no fim da p\u00e1gina (antes do fechamento da tag body) para n\u00e3o atrasar o carregamento dos demais componentes do seu HTML.<\/p>\n Vamos nos conter a esses coment\u00e1rios para n\u00e3o sair do foco do artigo.\u00a0CSS e Javascript\u00a0s\u00e3o assuntos para um pr\u00f3ximo post em espec\u00edfico.<\/p>\n EXEMPLO DE UMA P\u00c1GINA HTML COMPLETA<\/strong><\/p>\n ORGANIZANDO E HOSPEDANDO SEU SITE<\/strong><\/p>\n Apesar de n\u00e3o fazer parte do escopo do HTML, falarei de algumas coisas que s\u00e3o essenciais para o desenvolvimento de um site. A principal \u00e9 a organiza\u00e7\u00e3o. Seu site\u00a0vai ter diversos arquivos HTML. Vamos supor que seja um site empresarial. De cara ter\u00edamos uma p\u00e1gina para a Home, uma para Empresa, uma para Clientes e uma para Contatos. Ent\u00e3o na pasta principal do site ter\u00edamos um arquivo home.html (ou index.html), empresa.html, clientes.html e contato.html.<\/p>\n Por\u00e9m, o site teria diversos outros arquivos, como por exemplo arquivos CSS, imagens usadas no site, javascripts, documentos anexados nas p\u00e1ginas, etc. Sendo assim, \u00e9 interessante\u00a0criar pastas para arquivos semelhantes. Uma dica seria criar a seguinte estrutura:<\/p>\n \u2013 Site (aqui ficam os arquivos HTML) Ap\u00f3s isso \u00e9 necess\u00e1rio providenciar duas coisas para que seu site entre de vez no ar: uma hospedagem e um dom\u00ednio.<\/p>\n O dom\u00ednio .com.br pode ser adquirido no registro.br por apenas R$ 30,00 mensais.<\/p>\n J\u00e1 a hospedagem deve ser paga a uma empresa terceirizada. Existem planos de R$ 10,00 mensais at\u00e9 planos bem mais caros. Por\u00e9m \u00e9 importante pesquisar o que melhor se adequa ao seu caso. Existem hospedagens gratuitas, por\u00e9m n\u00e3o recomendo nenhuma delas.<\/p>\n\n
\nEssa tag \u00e9 respons\u00e1vel por definir o in\u00edcio de um documento HTML e seu fim. Logo deve ser aberta no in\u00edcio do documento e fechada no seu final.<\/p>\n
\nTag que define o in\u00edcio e o fim do cabe\u00e7alho do documento.<\/p>\n
\nTag onde devem ser inseridos os conte\u00fados do site que dever\u00e3o ficar vis\u00edveis ao usu\u00e1rios quando a p\u00e1gina for renderizada no navegador.<\/p>\n<!DOCTYPE html>\r\n<html>\r\n <head>\r\n <!-- conte\u00fado do head -->\r\n <\/head>\r\n <body>\r\n <!-- conte\u00fado do body -->\r\n <\/body>\r\n<\/html><\/pre>\n
\nNo\u00a0cabe\u00e7alho trazemos informa\u00e7\u00f5es que ser\u00e3o usadas pelo navegador como:<\/p>\n
\nT\u00edtulo da p\u00e1gina a ser exibido (texto que fica na aba de seu navegador quando uma p\u00e1gina esta aberta)<\/p>\n
\nGeralmente usado para selecionar arquivo externo no HTML. Um uso comum dele \u00e9 para selecionar arquivos CSS (respons\u00e1veis por definir a apar\u00eancia da sua p\u00e1gina para o usu\u00e1rio final). Exemplo:<\/p>\n<link href=\"estilo.css\" type=\"text\/css\" media=\"screen\" rel=\"stylesheet\" \/><\/pre>\n
\nMetatags tem uma infinidade de fun\u00e7\u00f5es. Atualmente, s\u00f3 costumo utilizar duas: uma para referenciar aos\u00a0buscadores um breve resumo sobre a p\u00e1gina, chamada DESCRIPTION. O seu uso \u00e9 basicamente da seguinte forma:<\/p>\n<meta name=\"description\" content=\"Aqui entra o resumo sobre a p\u00e1gina. \u00c9 recomend\u00e1vel que voc\u00ea n\u00e3o ultrapasse 160 caracteres nesse texto\" \/><\/pre>\n
<!DOCTYPE html>\r\n<head>\r\n <title>T\u00edtulo da p\u00e1gina<\/title>\r\n <meta charset=\"utf-8\" \/>\r\n <meta name=\"description\" content=\"Breve resumo sobre o conte\u00fado desta p\u00e1gina\" \/>\r\n <link href=\"estilo.css\" rel=\"stylesheet\" type=\"text\/css\" \/>\r\n<\/head><\/pre>\n
\nDentro da tag <body> \u00e9 que v\u00e3o entrar todos os elementos que ficar\u00e3o vis\u00edveis aos usu\u00e1rios. As tags usadas dentro do body podem ser divididas em inline e block. Tags inline s\u00e3o tags que mant\u00e9m o fluxo comum do conte\u00fado e tags block quebram o fluxo e geram o elemento abaixo do \u00faltimo block. Voc\u00ea pode usar uma tag inline dentro de uma block, mas n\u00e3o pode usar uma block dentro de uma inline por quest\u00f5es de sem\u00e2ntica.<\/p>\n<h1>Sou um t\u00edtulo relevante<\/h1><\/pre>\n
<p>Sou um elemento de par\u00e1grafo<\/p><\/pre>\n
<p>Sou um <span>pequeno par\u00e1grafo<\/span><\/p><\/pre>\n
<p>O trecho a seguir est\u00e1 em <b>negrito<\/b><\/p><\/pre>\n
<p>O trecho a seguir est\u00e1 em <strong>negrito<\/strong> utilizando strong<\/p><\/pre>\n
<p>O trecho a seguir est\u00e1 em <em>it\u00e1lico<\/em><\/p><\/pre>\n
<p>Pequeno texto com trecho <u>sublinhado<\/u><\/p><\/pre>\n
<p>Primeira linha<br \/>\r\nSegunda linha<\/p><\/pre>\n
<ul>\r\n <li>Sou um elemento de uma lista<\/li>\r\n <li>Sou outro elemento dentro da lista<\/li>\r\n<\/ul><\/pre>\n
<a href=\"clientes.html\">P\u00e1gina de clientes<\/a>\r\n<a href=\"curriculo.pdf\">Curr\u00edculo<\/a><\/pre>\n
<a href=\"http:\/\/www.siteexterno.com>Site externo sendo linkado<\/a><\/pre>\n
<img src=\"imagem.jpg\" width=\"50\" height=\"50\" alt=\"Descri\u00e7\u00e3o da imagem\" \/><\/pre>\n
<div>\r\n <h2>T\u00edtulo relevante<\/h2>\r\n <p>Texto do bloco<\/p>\r\n <img src=\"alerta.jpg\" width=\"10\" height=\"7\" alt=\"alerta\" \/>\r\n<\/div><\/pre>\n
<table>\r\n <tr>\r\n <td>Primeira coluna da primeira linha<\/td>\r\n <td>Segunda coluna da primeira linha<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Primeira coluna da segunda linha<\/td>\r\n <td>Segunda coluna da segunda linha<\/td>\r\n <\/tr>\r\n<\/table><\/pre>\n
<form action=\"envioFormulario.php\"><\/form><\/pre>\n
<input type=\"text\" value=\"Digite aqui\" \/>\r\n<!-- Campo onde o usu\u00e1rio pode digitar um texto. Caso queira deixar um valor padr\u00e3o, basta adicionar um atributo value com o valor desejado. -->\r\n<input type=\"submit\" \/>\r\n<!-- Cria um bot\u00e3o que vai submeter o formul\u00e1rio ao ser clicado. -->\r\n<input type=\"file\" \/>\r\n<!-- Cria um campo para fazer uploads de arquivos -->\r\n<input type=\"radio\" type=\"grupo\" \/>\r\n<!-- Cria um campo para sele\u00e7\u00e3o \u00fanica. As op\u00e7\u00f5es dispon\u00edveis s\u00e3o agrupadas pelo type, ou seja, se houverem 3 inputs radio com o mesmo type, o usu\u00e1rio s\u00f3 poder\u00e1 escolher um deles -->\r\n<input type=\"checkbox\" \/>\r\n<!-- Bem semelhante ao radio, por\u00e9m permite m\u00faltipla sele\u00e7\u00e3o --><\/pre>\n
<textarea><\/textarea><\/pre>\n
<label>Sou uma legenda\r\n <input type=\"text\" \/>\r\n<\/label><\/pre>\n
<label for=\"campo\">Sou uma legenda<\/label>\r\n<input type=\"text\" id=\"campo\" \/><\/pre>\n
<!--[iflt IE 9]>\r\n<script src=\"\/\/html5shiv.googlecode.com\/svn\/trunk\/html5.ks\"><\/script>\r\n<![endif]--><\/pre>\n
<div id=\"cabe\u00e7alho\"><\/div>\r\n<img src=\"perfil.jpg\" height=\"50\" width=\"20\" id=\"imagemPerfil\" \/>\r\n<span id=\"horario\">12:30<\/span><\/pre>\n
<input type=\"submit\" value=\"Enviar\" class=\"botaoForm\" \/><\/pre>\n
<code><link href=\"estilo.css\" type=\"text\/css\" media=\"screen\" rel=\"stylesheet\" \/><\/code><\/pre>\n
<script type=\"text\/javascript\" src=\"script.js\"><\/script>\r\n<script type=\"text\/javascript\">\/\/Aqui vai o seu c\u00f3digo javascript<\/script><\/pre>\n
<!DOCTYPE html>\r\n<html lang=\"en-US\">\r\n <head>\r\n <meta charset=\"UTF-8\" \/>\r\n <title>T\u00edtulo da p\u00e1gina<\/title>\r\n <meta name=\"description\" content=\"Sou o description da p\u00e1gina. Uma breve descri\u00e7\u00e3o.\" \/>\r\n <link href=\"css\/estilo.css\" type=\"text\/css\" rel=\"stylesheet\" \/>\r\n <!--[iflt IE 9]>\r\n <script src=\"\/\/html5shiv.googlecode.com\/svn\/trunk\/html5.js\"><\/script>\r\n <![endif]-->\r\n <\/head>\r\n <body>\r\n <header>\r\n <a href=\"\/\"><img src=\"logo.jpg\" alt=\"logo site\" width=\"200\" height=\"50\"><\/a>\r\n <nav>\r\n <ul>\r\n <li><a href=\"\/\">Home<\/a><\/li>\r\n <li><a href=\"clientes.html\">Clientes<\/a><\/li>\r\n <li><a href=\"empresa.html\">Empresa<\/a><\/li>\r\n <li><a href=\"contato.html\">Contato<\/a><\/li>\r\n <\/ul>\r\n <\/nav>\r\n <\/header>\r\n <section>\r\n <h1>Sou o t\u00edtulo da p\u00e1gina<\/h1>\r\n <h2>Sou um subt\u00edtulo<\/h2>\r\n <p>Sou um conte\u00fado comum.\r\n <em>Estou em it\u00e1lico<\/em>.\r\n <b>Estou em negrito<\/b>.\r\n <u>Estou sublinhado<\/u>.\r\n <\/P>\r\n <\/section>\r\n <footer>Sou o rodap\u00e9<\/footer>\r\n <script src=\"js\/javascript.js\" type=\"text\/javascript\"><\/script>\r\n <\/body>\r\n<\/html><\/pre>\n
\n\u2013 CSS (aqui ficam os arquivos CSS)
\n\u2013 JS (aqui ficam os arquivos JavaScript)
\n\u2013 Img (aqui ficam as imagens do site)
\n\u2013 Docs (aqui ficam os demais documentos, pdfs, txt, etc.)<\/p>\n