Na internet todos podem transmitir e receber informações e isso é realizado por meio de páginas da Web formadas por textos, sons, imagens e vídeos. Páginas que são visualizadas por um navegador como por exemplo o Firefox.
Mas, antes de entender como funciona essa linguagem para web, primeiramente é preciso compreender como funciona a internet. A internet é a rede mundial de computadores. É através dela que conseguimos nos conectar com outras pessoas, de vários lugares do mundo.
Outro conceito importante é Web. Muitas pessoas acham que internet e web são a mesma coisa, mas não são. Web ou World Wide Web (WWW) é um dos meios para trocar informações pela internet, através de HTTP (HyperText Transfer Protocol). A web tem a capacidade de conectar um documento ao outro através de links, o que forma o grande hipertexto no qual se tornou. Um site é um conjunto de páginas Web, isto é, de hipertextos acessíveis através de HTTP. Além da web, existem outros meios de trocar informações através da internet como e-mail, MSN, transferência de arquivo de FTP.
Na web os documentos são organizados através de comandos que são interpretados pelos navegadores, como Internet Explorer e Mozilla Firefox. Esses comandos compõem a linguagem HTML (HyperText Markup Language).
Essa linguagem foi criada em 1991, juntamente com o protocolo HTTP. Ela foi desenvolvida por Tim Berners-Lee, no Centro Europeu de Física de Partículas, na Suíça. Tinha o propósito inicial de compartilhar documentos facilmente entre instituições de pesquisas próximas.
A linguagem HTML não é uma linguagem de programação, mas uma linguagem de marcação para hipertextos. É composta por tags (marcações) que informam ao browser como exibir o documento. Essa linguagem é utilizada para a produção de sites.
Desde o início da internet, tentativas foram realizadas para implementação de normas da linguagem HTML, sendo isso feito pela World Wide Web Consortium (W3C). Com o passar dos anos, várias versões do HTML foram lançadas para se adaptar as normas como HTML 5 e XHTML. Cada versão tem suas variações e contribuem para o futuro da internet no mundo.
Para criar uma página em HTML é necessário ter um editor de texto (ex: bloco de notas ou notepad) ou um editor HTML (ex: Dreamweaver). Nesse documento, deverão ser escritas as tags básicas da linguagem HTML.
A linguagem HTML é formada por tags. As tags são formados por comandos, escritos entre os sinais "<" (menor que) e ">" (maior que), e devem ser escritas com letra minúscula. Podem ser:
Tags Abertas (simples): <comando/>
Tags Fechadas:<comando>...</comando>
Tags Compostas:
<comando>
<elemento1>...</elemento1>
<elemento2>...</elemento2>
</comando>
<html></html>
Conceito: Inicia e termina um documento em HTML.
<head></head>
Conceito: Define a área de cabeçalho. Os elementos não são visualizados na página.
<title></title>
Conceito: Refere-se ao título da página. Coloca o nome da página na barra de título da janela. Essa tag é utilizada entre a tag “head”.
<body></body>
Conceito: Define a área visível do documento.
Exemplo de documento básico de HTML:
<html>
<head>
<title>Título da Página</title>
<head>
<body>
<p>Corpo da Página</p>
</body>
</html>
O documento em HTML deve ser salvo com a extensão .html ou .htm para que possa ser visualizado pelo navegador. Com relação a essas extensões pode-se usar qualquer uma delas, mas não possuem diferença na hora do salvamento.
Pode-se utilizar a quantidade de tags que for necessário, pois a linguagem permite isso. Outros tipos de tags que podem ser usadas no documento são:
São responsáveis por dar estilo ao seu texto dentro do documento:
<b></b> ou <strong></strong>
Conceito:Texto em negrito.
<i></i> ou <em></em>
Conceito:Texto em itálico.
<small></small>
Conceito:Texto pequeno.
<big></big>
Conceito:Texto grande.
<p></p>
Conceito:Define a área de um parágrafo.
<br />
Conceito:Insere uma quebra de linha.
<h1></h1>,<h2></h2>,<h3></h3>,<h4></h4>,<h5></h5> e <h6></h6>
Conceito:Cada tag heading tem um tamanho e é utilizada para títulos e subtítulos de uma página html.
<html>
<head>
<title>Minha Página HTML</title>
<meta charset="UTF-8"/>
</head>
<body>
<b>Meu texto em negrito 1</b> ou <strong>Texto em negrito 2</strong>
<i>Texto em itálico1</i> ou <em>Texto em itálico2</em>
<small>Texto pequeno</small>
<big>Texto grande</big>
<p>Área de um parágrafo.<br />Insere uma quebra de linha.</p>
<h1>Este é H1</h1>
<h2>Este é H2</h2>
<h3>Este é H3</h3>
<h4>Este é H4</h4>
<h5>Este é H5</h5>
<h6>Este é H6</h6>
</body>
</html>
A tag de link é representada pelo elemento <a></a> e mostra na tela um hiperlink para ligar outra página. Um dos atributos essenciais para o funcionamento dessa tag é o href em que é inserido o destino do link. Existem outros atributos para a tag como rel, media, name, etc. Geralmente, os links aparecem nos navegadores sublinhados e na cor azul.
Já a tag utilizada para imagens é a <img /> e possui como atributos principais src e alt.
<a href="/url"></a>
Conceito:Cria um link.
<a href="mailto:email"></a>
Conceito:Cria um link para envio de e-mail.
<img src="/link do arquivo"/>
Conceito:Insere uma imagem.
<img src="/link do arquivo" align="?"/>
Conceito:Alinha uma imagem em relação ao resto do texto. No lugar da interrogação pode-se utilizar center, left ou right.
<img src="/link do arquivo" border="?">
Conceito:Define a borda da imagem.
<img src="/link do arquivo" alt="foto do site"/>
Conceito:Insere uma descrição na imagem.
<!--...-->
Conceito:utilizada na realização de comentários para explicação do código. Isso poderá ajudar o criador da página a fazer edições posteriores ou lembrar de algo importante.
<hr>
Conceito:Insere uma linha horizontal. É utilizado geralmente para separar o conteúdo de outros elementos.
<ul></ul>
Conceito:mostra uma lista não-ordenada.
<ol></ol>
Conceito:mostra uma lista ordenada.
<div></div>
Conceito:mostra uma seção ou divisão dentro do documento. São representadas por blocos que podem ser organizados dentro do CSS.
Tabelas
<table></table>
Conceito:é utilizada para a construção de tabelas, juntamente com ela os elementos <tr>, <th> e <td> a compõem. Além disso, existem outros elementos mais complexos como <thead>, <tfoot>, etc.
Os atributos são informações adicionais que podem ser acrescentadas dentro da tag html. Eles devem ser escritos com um sinal de igual e aspas para que funcionem dentro do documento. Podem ser declarados mais de um atributo dentro de uma tag. Ex.:
<p align="?"></p>
Conceito:atributo utilizado para alinhamento de um parágrafo. Pode-se usar os valores left, right, center ou justify.
Obs.: Existem alguns atributos e elementos que entraram em desuso dentro do HTML pois se tornaram defasados para as futuras versões, de acordo com o W3C. Portanto, é necessário que o Programador Web se atualize com as normas.
Para os programadores que já conhecem o CSS, poderão construir Folhas de Estilo em Cascata ou mesmo inserir estilos dentro das tags html utilizando o atributo <p style="";"">. Mas, é recomendável utilizar uma folha de estilo externa para definir todas formatações da página. Veja um exemplo de estilo utilizado dentro da tag de parágrafo:
<p style="border:5px solid green;">Deixa o texto com borda verde e com tamanho de 5 pixels</p>
CSS (Cascading Style Sheet) em português significa Folhas de Estilos em Cascata. Foi criada por Hakon Lie e Bert Bos em 1995. Esse tipo de linguagem define o layout de documentos HTML, tudo que diz respeito a apresentação da página. As CSS separam a marcação HTML da apresentação do site.
Através das CSS pode-se controlar fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos, entre outros, e o HTML marca e estrutura dos textos, cabeçalhos, parágrafos, links, botões, formulários, imagens e demais elementos da página.
Para produzir páginas com CSS é necessário ter um conhecimento básico de HTML e da mesma forma que foi utilizado para criar um documento em HTML, o bloco de notas (ou outro editor de texto simples) será utilizado para criar um documento em CSS. Além de ser mais rápido e eficaz o CSS é suportado por quase todos os navegadores atuais.
Para criar um modelo padrão de CSS que será aplicado em todas as páginas, introduzimos o comando <style> no cabeçalho do documento, entre a tag <html> e a tag <body>. Dessa forma, tudo o que vier no conteúdo da página obedecerá aos comandos CSS estipulados uma única vez. A sintaxe básica do CSS é a seguinte:
Outros seletores que podem ser utilizados dentro da sintaxe CSS é a classe. Ou seja pode-se inventar um nome de uma classe e adicionar um ponto no inicio ao escrever dentro do documento CSS. Essas classes podem ser adicionadas a qualquer elemento do html.
É possível aplicar classes nas especificações gerais de CSS para definir diferentes atributos para uma mesma tag.
Já o ID, é um tipo de seletor que pode ser utilizado apenas uma vez e atribuído apenas a um elemento HTML. O nome também poderá ser criado e precedido de #. Veja:
.menu {
background-color:#444444;
width: 500px;
height: 50px;
}
p.formato {
color: #222222;
font-size: 12px;
}
#conteudo {
color: #000000;
font-family: Arial;
}
Podemos criar um único modelo de Style Sheets para ser aplicado a múltiplas páginas. Para tanto, devemos construir um modelo separado de Style Sheets e salvá-lo em um arquivo de terminação .css. Esse modelo pode ser aplicado a qualquer página, apenas referindo-se ao arquivo .css no seu cabeçalho. Veja a seguir onde é inserido o código CSS dentro do HTML:
<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
body{
background-color:#d0e4fe;
width: 200px;
}
h1{
color:orange;
text-align:center;
}
p{
font-family:"Times New Roman";
font-size:20px;
}
</style>
</head>
<body>
<h1>Exemplo de HTML com CSS!</h1>
<p>Este é um párágrafo.</p>
</body>
</html>
Essa é uma folha de estilo incorporada ao HTML. Note que dentro da tag <style> existem os comandos CSS. Outra forma de construir o CSS é criá-lo em um documento separado e inserir o código <link rel=”stylesheet” href="/exemplo.css" type="text/css" /> no cabeçalho do HTML dentro do <head>.
Para aplicar o modelo a uma página html específica, basta chamar o arquivo .css no seu cabeçalho inserindo o seguinte código dentro da tag head <link rel="stylesheet" href="/exemplo.css" type="text/css"/>
Outra maneira de aplicar o modelo CSS é importá-lo. A diferença entre lincá-lo à página como no exemplo acima e importá-lo é que a segunda maneira permite acrescentar estilos na própria página que está editando, sem precisar alterar o modelo global (o arquivo .css). Veja o exemplo a seguir:
<html>
<head>
<style type="text/css">
@import url(exemplo.css);
b { color:red; font-size:16pt; }
h1 { font-family: Arial, Helvetica; }
</style>
<title>Exemplo de Style Sheets</title>
</head>
<body>
<h1>Títulos em Arial</h1>
<p>
O texto segue o modelo exemplo.css, mas os <b>negritos serão alterados</b>.
</p>
</body>
</html>
IMPORTANTE: No caso de uma mesma página ter mais de um estilo aplicado, para saber qual predominará deve-se pensar da seguinte forma: o estilo mais específico prevalece. No caso, se uma página contém uma especificação de estilo geral ou global, você pode acrescentar novos atributos em locais diferentes.
Após escrever o código HTML e CSS num bloco de notas, por exemplo, é preciso lembrar de salvar cada arquivo de acordo com o formato. O primeiro com arquivo.html e o segundo com arquivo.css. Ambos devem estar dentro do mesmo diretório para que funcionem. Se as folhas de estilo forem importadas é necessário inserir na tag head o seguinte código:
<link rel="stylesheet" type="text/css" href="/estilo.css" />
estilo.css: endereço do documento escrito em css.
Depois de fazer isso, escolha um nome para sua página e realize o registro no site Registro.br. Além do nome, é preciso ter um servidor, um programa FTP, como por exemplo FileZilla e um site de hospedagem como Locaweb ou Kinghost para publicar a sua página na internet.
Como o html pode ser escrito de várias maneiras é importante que se observe as recomendações do W3C. Muitos navegadores já aderiram ao uso dessas normas e portanto para que o site seja visualizado com eficiência será preciso seguir o padrão. Para mostrar ao navegador qual o tipo de html você está usando será preciso usar a seguinte definição no início do documento html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
Isso mostra que está codificando em XHTML. Além disso, com o DTD, pode-se verificar e validar se existem erros no documento através do site do W3C. Nas versões atualizadas do HTML, utiliza-se apenas <!DOCTYPE html>.
Dica: Procure construir documentos organizados, isso facilitará a leitura e manutenção posteriormente do código.