Estamos de volta, para mais uma aventura de como fazer um site e fazer parte dessa grande WEB. Hoje será abordados algumas ferramentas necessárias para o desenvolvimento do mesmo.

No post passado, falamos sobre o que é a WEB e como ela foi composta e o que é necessário para o funcionamento da mesma, sabe-se agora que a WEB possui um conjunto de protocolos (padrões) e funciona através de troca de mensagens, e que possuí uma linguagem de marcação o HTML, o qual conseguimos estruturar textos e fazer interligações entre eles.

Também sabe-se que não é necessário entender logo de princípio como as coisas funcionam no protocolo HTTP, pois o browser sabe como se comportar assim como os servidores web. Então vamos por a mão na massa, vamos começar a entender como fazemos para estruturar um texto em HTML.

Ferramentas a serem usadas:

Você prefere comida de microondas ou de fogão? Pois é apesar de o microondas ser muito prático, muito rápido de fazer a comida nem sempre ela fica do gosto esperado.

Apesar de esse ser um exemplo um pouco frustrado, é exatamente assim que se da o desenvolvimento WEB, você pode aprender a usar FrontPage, Dreamwaver, etc… Porém pode ter certeza que não vai ser a mesma coisa que desenvolver na mão, logo sujiro primeiro começar a tentar desenvolver escrevendo e entendendo como funciona para logo após caso decidir utilizar ou não um editor visual.

Então as ferramentas de desenvolvimento:

  • Editor de Texto (PSPad, EditPlus, gEdit)
  • Browser
  • Boa Vontade
  • Paixão

Por que, boa vontade e paixão?

Porque para qualquer coisa a ser feita boa vontade e paixão por aquilo que está fazer traz um resultado melhor. Bom por hora você percebe que para aprender HTML não é necessário muitas coisas, um editor de texto para escrevermos o texto estruturado e um browser para renderizar essa página.

Começando com o HTML:

Resumindo o HTML é uma linguagem de marcação para hypertextos, que é utilizada para produzir páginas para internet os documentos HTML são interpretados pelo browser e apresentados na tela.

A linguagem HTML trabalha com tag’s ou etiquetas:

<elemento> </elemento> //Elemento com tag de abertura e fechamento
<elemento /> //Elemento unico de abertura e fechamento

Ou seja basicamente o HTML é um conjunto de tag’s, sendo que cada tag possuí um valor semântico ou seja, cada tag se refere a algum elemento produzido no texto. Vamos a um exemplo básico da estrutura de uma página HTML:

?View Code PHP
1
2
3
4
5
6
7
8
9
10
11
12

<html>
<head>
<title>Título da página</title>
</head>
<body>
<h1>Título 1</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque adipiscing mi ut nunc. Vivamus eros. Curabitur arcu. Nullam convallis laoreet velit. Duis sit amet diam non diam ornare fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce molestie. Praesent arcu. Fusce a metus vitae purus rhoncus cursus. Vestibulum est nibh, malesuada ac, auctor eget, pretium congue, odio. Mauris libero orci, elementum et, blandit nec, vulputate non, orci. Morbi ut lectus et eros imperdiet blandit.</p>
<p>Sed ultricies quam. Maecenas eu mi vel elit accumsan bibendum. Suspendisse sit amet arcu id leo interdum tempor. Donec lobortis libero ut mauris. Nam arcu sapien, interdum ac, luctus vel, ultricies vitae, lectus. Maecenas sollicitudin sapien eu velit. Nam in ligula in risus egestas laoreet. Praesent quam. Curabitur mattis, quam non scelerisque egestas, elit felis rutrum libero, ut iaculis mi nisi vitae nulla. Aenean at est. In et risus vel orci posuere vulputate. Nulla consequat, orci sit amet sagittis dapibus, augue nisi consequat tellus, vitae ultrices neque arcu nec neque.</p>
<h2>Título 2</h2>
<p>Phasellus mauris nisl, scelerisque vel, consequat sit amet, volutpat sed, sem. Curabitur varius, quam et rutrum bibendum, justo eros venenatis eros, viverra dapibus purus nunc eget magna. Integer ac orci a eros fermentum mattis. Phasellus eu felis. In at metus. Quisque et lorem. Fusce vulputate accumsan mi. Ut non enim eu magna mollis auctor. Morbi aliquet tortor quis mauris. Praesent quis ligula. Duis sit amet odio.</p>
</body>
</html>

Copie esse código e cole no seu editor de texto e salve como exemplo1.html e mande abrir com seu navegador (Firefox, Internet Explorer). Você pode ver aqui também.

Como podemos ver é um documento simples que foi gerado com apenas algumas marcações:

  • <html></html> (Determinar o início e fim do documento HTML)
  • <head></head> (Determina o cabeçalho do arquivo)
  • <title></title> (Determina o título da página)
  • <body></body> (Determina o corpo da página)
  • <h1></h1> (Determina o título principal no texto)
  • <p></p> (Determina um parágrafo de texto)

Então em uma regra geral, sempre teremos que usar algumas tag’s:

  • <html></html>
  • <head></head>
  • <title></title>
  • <body></body>

Essas tag’s são de grande importância, elas que definem a estrutura básica do documento HTML.

Pô legal em agora já sei fazer uma página com texto, bem bacana… Mas creio que esta faltando coisas ainda, porquê nos sites que entro é tudo bonito, e quando digito Ctrl + U no meu Firefox aparece um monte de código que você nem se quer citou aqui.

É verdade recém estamos engatinhando na estruturação de documentos com HTML, existem muitas tag’s a serem descobertas, assim como algumas outras linguagens. Por hora continue aprendendo sobre HTML e suas tag’s e os valores que elas tem.