Linguagem HTML e CSS - Programador

Documento HTML Clipart 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).

Quando foi criado o HTML?

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.

Como Escrever Páginas para Web?

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.

Tags 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>

Tags Básicas

<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.

Outras Tags HTML

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:

Tags utilizadas para Formatação de Texto

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>

Tags Formatação de Texto

Links e Imagens

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.

Outros Elementos

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.

Listas

<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.

Atributos HTML

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.

Layout com CSS

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>

Exemplo Borda CSS

CSS (Cascading Style Sheet)

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.

Sintaxe Básica das CSS

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:

Sintaxe Básica CSS

Seletores Classe e ID

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;
}

Adicionando Modelo de Estilo Global

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>.

Aplicando o CSS ao Documento HTML

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.

Como Publicar Páginas Web?

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:

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.

Mais Acessados

História da Programação

monitor computador clipart

Saiba como surgiram as primeiras linguagens de programação e veja um pequeno resumo acessando a página:

História da Programação

Cursos de Programação

Silhueta Programador Computador Quer aprender a programar? Veja algumas dicas sobre cursos gratuitos online, profissionalizantes e técnicos acessando a página:

Cursos de Programação.

Programar para Android

Androids Clipart O sistema operacional Android tem sido uma das plataformas mais populares para o desenvolvimento de aplicativos para desenvolvedores e empresas. Aprenda a Programar para Android.

Programar para IOS

iPad papel de parede flores O IOS é o sistema operacional móvel da Apple e para o desenvolvimento de suas aplicações é necessário conhecer Objective-C. Veja algumas dicas para programar para iPad, iPhone e iPod.