Em primeiro lugar é preciso dizer que
as páginas web são aquelas acessadas por meio de um programa que interpreta as
linguagens HTML, PHP, Javascript e similares.
Portanto é necessário aprender essas
linguagens, mas não adianta aprender todas as linguagens que estão livremente
disponíveis na Internet se você não aprender a resolver problemas reais por
meio do uso destas linguagens.
A forma de ensino que eu proponho
é a do problema-solução.
Vou apresentar um problema imaginário e
elaborar a solução, iniciando de problemas simples e avançando a cada
postagem.
Não se preocupe com a linguagem, pois
não importa a linguagem, a proposta lógica será sempre a de chegar em soluções
simples para o usuário e bem arquitetadas para nós, os desenvolvedores.
Problema:
Apresentar em uma tela o nome
e logomarca de uma empresa.
Solução:
Para criar a primeira página e
visualizar no seu navegador, baixe e instale o programa XAMPP.
Após tudo instalado, vá na pasta
htdocs, apague todo o conteúdo e crie um arquivo.
Clique exibir, no windows explorer, e
marque a caixinha itens ocultos. O nome do arquivo deve ser index.php. Salve
uma imagem no formato png que vai servir de logotipo para a nossa proposta, com
o nome logo.png. Abra o nosso index.php e digite: <img
src="logo.png">
Pode abrir o navegador e digitar localhost no
endereço da web.
Muito bem, agora, abaixo da tag img que
você criou digite <h1>Nome da Empresa</h1>.
Salve, atualize no browser (F5).
Muito bem, problema resolvido.
Agora vamos arrumar um pouco esse
visual com CSS.
Digite logo abaixo.
<style>
img {
margin-left: 10%;
width: 80%;
border: solid 1px #fff;
border-radius: 5px;
max-height: 150px;
}
h1 {
color: #fff
}
body {
background: gray
}
</style>
Execute no browser e visualize os
resultados.
Seu código deve ficar assim.
<img src="logo.png">
<h1>Nome da Empresa</h1>
<style>
img {
margin-left: 10%;
width: 80%;
border: solid 1px #fff;
border-radius: 5px;
}
h1 {
color: #fff
}
body {
background: gray;
}
</style>