Melancia na Cabe\u00e7a<\/a>.<\/em><\/p>\n\n\n\nSabe Matrix? Pois \u00e9… Comece a se conformar que olhar para c\u00f3digos e ver documentos \u00e9 poss\u00edvel.<\/p>\n\n\n\n
P\u00e1ginas em XHTML (o X antes \u00e9 s\u00f3 pra dizer que \u00e9 extens\u00edvel, n\u00e3o tem nada a ver com os X-men) s\u00e3o os c\u00f3digos e o que voc\u00ea v\u00ea no navegador \u00e9 o resultado (o que voc\u00ea v\u00ea no navegador na verdade \u00e9 o resultado do seu HTML somado com seu CSS, mas explico depois). O grande problema aparece quando se percebe que para o mesmo resultado existe uma infinidade de c\u00f3digos poss\u00edveis. Existem muitos motivos para se fazer HTML da melhor forma poss\u00edvel indo de profissionalismo e cuidado \u00e0 otimiza\u00e7\u00e3o para busca.<\/p>\n\n\n\n
Para a cria\u00e7\u00e3o de um bom HTML \u00e9 preciso um pouco de pr\u00e1tica e senso cr\u00edtico. Para quem nunca viu, o processo normalmente \u00e9 assim: o webdesigner cria um layout (no Photoshop, no Illustrator ou outro parecido) e voc\u00ea cria o HTML e o CSS (essa fun\u00e7\u00e3o tamb\u00e9m \u00e9 conhecida como HTMLer).<\/p>\n\n\n\n
Voc\u00ea ent\u00e3o olha pra cara do layout e analisa cada elemento buscando identificar qual \u00e9 o significado daquela parte no todo. Por exemplo o layout de uma p\u00e1gina interna de um site: Existe um topo, um menu lateral, o conte\u00fado e um rodap\u00e9.<\/p>\n\n\n\n
Se essas partes est\u00e3o claramente divididas cada uma delas provavelmente ser\u00e1 uma div (o provavelmente \u00e9 porque existem exce\u00e7\u00f5es), ou seja, uma divis\u00e3o da p\u00e1gina. Se no topo tem um t\u00edtulo provavelmente ele ser\u00e1 o <h1><\/code> da p\u00e1gina, ou seja, o primeiro t\u00edtulo, o t\u00edtulo de maior import\u00e2ncia. Se ao lado existe um slogan est\u00e1 a\u00ed um candidato a <h2><\/code>.<\/p>\n\n\n\nO menu lateral provavelmente \u00e9 uma lista de links, ent\u00e3o tasque uma <ul><\/code> e pra cada item uma <li><\/code>. Tente entender cada tag que voc\u00ea usar para facilitar a memoriza\u00e7\u00e3o – todo nome de tag tem um porqu\u00ea. A <ul><\/code> \u00e9 ul por ser uma lista desordenada – unordered list<\/em> – e a <li><\/code> por ser um item da lista – list item.<\/p>\n\n\n\nNo conte\u00fado pode ter uma penca de coisas, mas possivelmente ser\u00e1 s\u00f3 uma penca de par\u00e1grafos ent\u00e3o vamos de <p><\/code> pra eles.<\/p>\n\n\n\nNo rodap\u00e9 mora um perigo: se for uma lista de itens (tipo “Fale Conosco”, “Mapa do Site”, etc) tamb\u00e9m v\u00e1 de <ul><\/code>. Mesmo tendo seus itens um do lado do outro continua sendo uma lista.<\/p>\n\n\n\nQuando terminar abra seu HTML e veja se realmente o que est\u00e1 sendo mostrado pelo seu navegador \u00e9 o que o layout est\u00e1 transmitindo. Se estiver de acordo com o planejado chegou a hora de estilizar, se n\u00e3o volte e melhore seu c\u00f3digo.<\/p>\n\n\n\n
Um c\u00f3digo bem escrito ajuda n\u00e3o s\u00f3 a diminuir o tamanho do arquivo como tamb\u00e9m a ser entendido melhor pelos buscadores e leitores de tela pra cegos (sim, cegos usam internet).<\/p>\n\n\n\n
Para ver se seu c\u00f3digo est\u00e1 no m\u00ednimo bem formado utilize os validadores da W3C (existe extens\u00e3o do firefox pra isso), mas lembre-se: nem sempre c\u00f3digo validado pela W3C \u00e9 sem\u00e2ntico, ou seja, tem no seu conte\u00fado o significado desejado.<\/p>\n\n\n\n
Antes que surja alguma d\u00favida: lista n\u00e3o \u00e9 s\u00f3 pra links n\u00e3o t\u00e1?<\/p>\n\n\n\n
Outra coisa importante: esque\u00e7a a parte est\u00e9tica<\/strong>, isto \u00e9, n\u00e3o veja cores, posicionamentos, alinhamentos, negritos, it\u00e1licos, nada disso entra no seu HTML. Nele entra s\u00f3 o que cada coisa \u00e9. Seu HTML s\u00f3 vai parecer com o layout proposto quando come\u00e7ar a parte de CSS, mas isso fica para um pr\u00f3ximo post.<\/p>\n\n\n\nAbra\u00e7os e comentem!<\/p>\n","protected":false},"excerpt":{"rendered":"
Dicas para come\u00e7ar a pensar em HTML<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[12],"tags":[],"yoast_head":"\n
Comece a pensar em HTML | Felipe Elia<\/title>\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\t \n\t \n\t \n \n \n \n \n \n\t \n\t \n\t \n