Desenvolvimento WEB | Wemerson Januario
por Danilo Terra · Published 8 de junho de 2015 · Updated 9 de junho de 2015
Decorrido o tempo necessário para que nossa linda estrela Sol 'queime' alguns bilhões de toneladas de hidrogênio, estou aqui novamente. Dessa vez vou falar brevemente, e de forma simplificada, sobre Desenvolvimento WEB.
Danilo você é louco? Não iria falar sobre Ext JS?
Sim, meus queridos, mas vamos por partes. Toda aplicação Ext JS é feita de HTML + CSS + JavaScript. Sendo assim, precisamos entender o que é, e como funciona, cada uma dessas siglas.
Hoje vou falar sobre HTML e CSS, e na próxima semana irei falar sobre JavaScript.
Beleza, o que é HTML? E esse tal de CSS?
O HTML (ou seria 'A HTML'?) tem uma história chata e entediante, a qual não escreverei para vocês pela mesma razão pela qual eu não li a história completa. O que precisamos saber, é que o HTML é o alicerce de toda Aplicação Web. Ele é responsável por definir o que será renderizado (apresentado, desenhado, 'mostrado') na 'tela'.
O CSS (ou seria 'A CSS'? Sei lá! Pouco importa o genêro dessas coisas nesse momento. Se é que irá importar algum dia) tem uma história mais interessante, a qual não contarei para vocês pela mesma razão pela qual você abriu o link anterior (se é que abriu) e não leu tudo. Ele, ou ela, é responsável por 'estilizar' o conteúdo HTML, ou seja, transformar visualmente (deixar 'bonitinho' ou 'feinho', em alguns casos) o que está renderizado.
Danilo já estou com sono!
Calma! A hora da ação já está chegando?
Antes de escrevermos nosso primeiro conteúdo web, precisaremos de alguns recursos:
XAMPP e Notepad++
1 – Baixe esses softwares e os instale.
2 – Abra o diretório onde o XAMPP foi instalado (no meu computador ficou na pasta C:\xampp).
3 – Abra o diretório htdocs (C:\xampp\htdocs).
4 – Crie uma pasta chamada DesenvolvimentoWeb.
5 – Dentro dessa pasta crie dois arquivos: index.html e estilo.css.
Agora, usando o Notepad++, inclua o seguinte conteúdo no index.html
<!DOCTYPE html> <html lang='pt-BR'> <head> <meta charset='UTF-8'> <title>Desenvolvimento WEB</title> <link rel='stylesheet' type='text/css' href='estilo.css'> </head> <body> <header>	<h1>Título do tipo H1<h1> </header> <content> <p>Parágrafo com conteúdo</p> </content> <footer> <span> Escrito por Danilo Terra </span> </footer> </body> </html>
<title>Desenvolvimento WEB</title>
<link rel='stylesheet' type='text/css' href='estilo.css'>
<h1>Título do tipo H1<h1>
<p>Parágrafo com conteúdo</p>
Escrito por Danilo Terra
e o seguinte conteúdo no estilo.css
body { background-color: #9F9F9F; } header { background-color: #FFFFFF; } content > p { background-color: #929292; } footer { background-color: red; }
content > p {
Inicie o Apache pelo painel de controle do Xampp.
Agora abra seu navegador (Google Chrome, Mozilla Firefox, Internet Explorer, etc) e vá ao endereço localhost/DesenvolvimentoWeb.
Vimos nesse post que a segunda afirmação sobre CSS é realmente verdadeira, ou seja, em alguns casos ele poderá deixar nossa página bem 'feinha'. Para ver como a página ficaria sem o conteúdo CSS, retire a linha onde está a tag <link> do arquivo index.html, ou então, exclua todo o conteúdo do arquivo estilo.css.