Curso de desenvolvimento web - HTML parte 1

Saudações

Bem vindos ao meu curso de desenvolvimento web. Aqui vamos abordar desde os principios basicos de HTML até Lógica de Programação, animações em Flash, SEO, entre outros assuntos.

Comecemos então do principio de tudo... HTML.

HTML significa Hyper Text Markup Language, em português Linguagem de Marcação de Hypertexto. Simplificando, é uma linguagem para publicação de conteúdo (texto, imagem, vídeo, áudio e etc) na Web.

Segundo a W3C - Escritório do Brasil:

"O HTML é baseado no conceito de Hipertexto. Hipertexto são conjuntos de elementos – ou nós – ligados por conexões. Estes elementos podem ser palavras, imagens, vídeos, áudio, documentos etc. Estes elementos conectados formam uma grande rede de informação. Eles não estão conectados linearmente como se fossem textos de um livro, onde um assunto é ligado ao outro seguidamente. A conexão feita em um hipertexto é algo imprevisto que permite a comunicação de dados, organizando conhecimentos e guardando informações relacionadas.
Para distribuir informação de uma maneira global, é necessário haver uma linguagem que seja entendida universalmente por diversos meios de acesso. O HTML se propõe a ser esta linguagem."

Um pouco da história do HTML

Tim Berners-Lee criou o HTML original (e outros protocolos associados como o HTTP) em uma estação NeXTcube usando o ambiente de desenvolvimento NeXTSTEP. Na época a linguagem não era uma especificação, mas uma coleção de ferramentas para resolver um problema de Tim: a comunicação e disseminação das pesquisas entre ele e seu grupo de colegas. Sua solução, combinada com a então emergente internet pública (que tornaria-se a Internet) ganhou atenção mundial.

As primeiras versões do HTML foram definidas com regras sintáticas flexíveis, o que ajudou aqueles sem familiaridade com a publicação na Web. Atualmente a sintaxe do HTML é muito mais rígida, permitindo um código mais preciso. Através do tempo, a utilização de ferramentas para autoria de HTML aumentou, assim como a tendência em tornar a sintaxe cada vez mais rígida. Apesar disso, por questões históricas (retrocompatibilidade), os navegadores ainda hoje conseguem interpretar páginas web que estão longe de ser um código HTML válido.

A linguagem foi definida em especificações formais na década de 1990, inspiradas nas propostas originais de Tim Berners-Lee em criar uma linguagem baseada em SGML para a Internet. A primeira publicação foi esboçada por Berners-Lee e Dan Connolly, e publicada em 1993 na IETF como uma aplicação formal para o SGML (com uma DTD em SGML definindo a gramática). A IETF criou um grupo de trabalho para o HTML no ano seguinte, e publicou o HTML 2.0 em 1995. Desde 1996, as especificações HTML vêm sendo mantidas, com o auxílio de fabricantes de software, pela World Wide Web Consortium (W3C). Apesar disso, em 2000 a linguagem tornou-se também uma norma internacional (ISO/IEC 15445:2000). A última especificação HTML lançada pela W3C foi a recomendação HTML 4.01, publicada no final de 1999. Uma errata ainda foi lançada em 2001.

Desde a publicação do HTML 3.5 no final de 1997, o grupo de trabalho da W3C tem cada vez mais — e de 2002 a 2006, de forma exclusiva — focado no desenvolvimento do XHTML, uma especificação HTML baseada em XML que é considerada pela W3C como um sucessor do HTML.^[2][3][4] O XHTML faz uso de uma sintaxe mais rigorosa e menos ambígua para tornar o HTML mais simples de ser processado e estendido.

Desde o começo o HTML foi criado para ser uma linguagem independente de plataformas, browsers e outros meios de acesso. Interoperabilidade significa menos custo. Você cria apenas um código HTML e este código pode ser lido por diversos meios, ao invés de versões diferentes para diversos dispositivos. Dessa forma, evitou-se que a Web fosse desenvolvida em uma base proprietária, com formatos incompatíveis e limitada.

Por isso o HTML foi desenvolvido para que essa barreira fosse ultrapassada, fazendo com que a informação publicada por meio deste código fosse acessível por dispositivos e outros meios com características diferentes, não importando o tamanho da tela, resolução, variação de cor. Dispositivos próprios para deficientes visuais e auditivos ou dispositivos móveis e portáteis. O HTML deve ser entendido universalmente, dando a possibilidade para a reutilização dessa informação de acordo com as limitações de cada meio de acesso.

Chega de bla bla bla...

Bom, vamos ao que interessa, que é conhecer como funciona o HTML, e como iremos usa-lo para criar paginas para a internet.

Todo documento HTML apresenta etiquetas ou TAGS, elementos entre parênteses angulares '< ' e '>'; esses elementos são os comandos de formatação da linguagem. A maioria das TAGS tem sua correspondente de fechamento:

<HTML>...</HTML>

Isso é necessário porque as TAGS servem para definir a formatação de uma porção do documento, e assim marcamos onde começa e termina o texto com a formatação especificada por ela. Alguns elementos são chamados “vazios”, pois não marcam uma região de texto, apenas inserem algum elemento no documento:

<HR>

HR = comando que desenha uma barra horizontal

Uma TAG é formada por comandos, atributos e valores. Os atributos modificam os resultados padrões dos comandos e os valores caracterizam essa mudança. Exemplo:

<HR color="red">

No qual:

• HR = comando que desenha uma barra horizontal
• color = atributo que especifica a cor da barra
• red = valor do atributo color, que é a cor da barra que será desenhada - vermelho

Cada comando tem seus atributos possíveis e seus valores. Um exemplo, é o atributo size que pode ser usado com o comando FONT, com o HR mas que não pode ser usado com o comando BODY. Isso quer dizer que devemos saber exatamente quais os atributos e valores possíveis para cada comando.

De uma maneira geral o HTML é um poderoso recurso, sendo uma linguagem de marcação muito simples e acessível voltada para a produção e compartilhamento de documentos e imagens.

Criando um documento HTML

Vamos então criar nosso primeiro documento HTML.

Os documentos em HTML são arquivos de texto simples que podem ser criados e editados em qualquer editor de textos comum, como o Bloco de Notas do Windows, ou o TextEdit, do Macintosh. Para facilitar a produção de documentos, no mercado existem editores HTML específicos, com recursos sofisticados, que facilitam a realização de tarefas repetitivas, inserção de objetos, elaboração de tabelas e outros recursos . Basicamente dividem-se em dois tipos:

• Editores de texto fonte: inserem automaticamente as etiquetas, orientando a inserção de atributos e marcações
• Editores WYSIWYG: oferecem ambiente de edição com um "esboço" resultado final das marcações

Estrutura de um documento de HTML

Para interpretar corretamente o conteúdo do documento HTML, os browsers esperam
informações em acordo com as especificações HTML.

Crie uma pasta onde salvaremos nossas paginas HTML. Va em menu iniciar, documentos. Ali, clique com o botão direito do mouse e va em criar nova pasta. Nomei a pasta como projetos_html. 

Abra o bloco de notas, e digite o código abaixo e salve-o como minha_primeira_pagina.html, na pagina projetos_html. Em seguida, abra arquivo primeiro.html no navegador (Eu uso Mozilla Firefox, mas você pode usar o seu navegador padrão. Se quiser usar o mozila, que é bem superior ao Internet Explorer para desenvolvimento web, clique aqui).

<HTML>
<HEAD>
<TITLE>Rodrigo Zandonadi Web Design</TITLE>
</HEAD>
<BODY>
<H1>Este é o primeiro nível de cabeçalho.</H1><p>
Bem-vindo ao mundo do HTML. Este é o primeiro parágrafo.<p>
Este é o segundo paragráfo
</BODY>
</HTML>

Conteudo das TAGS <HEAD></HEAD>

Entre as TAGS <HEAD></HEAD>, ficam  informações  que não são visualizadas pelo usuario, apenas interpretadas pelo navegador. Podemos encontrar os seguintes comandos:

• <title>: define o título da página, que é exibido na barra de título dos navegadores
• <style>: define formatação em CSS
• <script>: define programação de certas funções em página com scripts, podendo adicionar funções de JavaScript
• <link>: define ligações da página com outros arquivos como feeds, CSS, scripts, etc
• <meta>: define propriedades da página, como codificação de caracteres, descrição da página, autor, etc. São meta informações sobre documento. Tais campos são muitos usados por mecanismos de busca(como o Google) para obterem mais informações sobre o documento, a fim de classificá-lo melhor. Por exemplo, pode-se adicionar o código <meta name="description" content="descrição da sua página" /> no documento HTML para indicar ao motor de busca que texto de descrição apresentar junto com a ligação para o documento. Para o sistema Google, comandos meta como keywords por exemplo não são utilizadas para indexar páginas. Apenas <title> e a meta <description> são usadas para descrever a página indexada

Obs: as etiquetas <style> e <script> servem tanto para delimitar o espaço usados pelos códigos na página quanto para invocar códigos existentes em outros arquivos externos.

Conteudo das TAGS <BODY></BODY>

A tag <BODY> armazena todo o conteúdo do documento, normalmente composto de parágrafos, listas, tabelas, imagens, textos e animações, entre outras coisas.

Explicação do código:

A primeira TAG que encontramos no documento é <HTML>. Ela é o elemento raiz de um
documento HTML, pois dentro dela está todo o conteúdo da página. Esta tag diz ao navegador para iniciar um novo documento HTML, onde o conteúdo que deverá ser exibido esta entre as tags <HTML> e <\HTML>.

O texto contido ente as TAG <HEAD> e <\HEAD> define o cabeçalho do documento. Estas
informações são importantes pois indicam ao navegador a forma que a página deve ser apresentada graficamente.

A tag <TITLE> define o título da página. Observe a figura 1.1 o topo do navegador, está
informado Rodrigo Zandonadi Web Design.

A tag <BODY> informa ao navegador o que deverá ser exibido graficamente. O corpo da
página “BODY” é constituido pelo conteúdo que está entre as tags <BODY> e </BODY>. 

Cabeçalhos

 

Os cabeçalhos normalmente são usados para títulos e sub-títulos de uma texto da página. A
linguagem HTML possui seis níveis de cabeçalhos, numerados de 1 a 6; quanto menor o nível, maior será o destaque, maior será a letra.

Em geral, os cabeçalhos são exibidos em letras maiores e em negrito, e o HTML adiciona uma
linha em branca antes e depois do cabeçalhos. O primeiro cabeçalho de uma página deve ser marcada como <H1>.

COMANDO:

<Hy> Texto do Cabeçalho </Hy>

Onde o y é um número que poderá ser especificado entre 1 a 6, definindo o nível do
cabeçalho.

COMANDOS:

<H1> Cabeçalho nível 1 </H1>
<H2> Cabeçalho nível 2 </H2>
<H3> Cabeçalho nível 3 </H3>
<H4> Cabeçalho nível 4 </H4>
<H5> Cabeçalho nível 5 </H5>
<H6> Cabeçalho nível 5 </H6>

Podemos ver como se apresentam alguns cabeçalhos a seguir:

<h1>Cabeçalho de nível 1</h1>

Será visto dessa maneira na página:

Cabeçalho de nível 1

Os cabeçalhos, como outras etiquetas de html, suportam o atributo align. Vejamos um exemplo de cabeçalho de nível 2 alinhado ao centro:

<h2 align="center">Cabeçalho de nível 2</h2>

Será visto dessa maneira na página:

Cabeçalho de nível 2

Digite o código abaixo no seu editor HTML e salve  como cabeçalhos.html, na pasta projetos_html. Abra no seu navegador e veja como ficou.

<HTML>
<HEAD>
<TITLE>Rodrigo Zandonadi Web Design</TITLE>
</HEAD>
<BODY>

<H1> Cabeçalho nível 1 - Rodrigo Zandonadi Web Design </H1>
<H2> Cabeçalho nível 2 - Rodrigo Zandonadi Web Design </H2>
<H3> Cabeçalho nível 3 - Rodrigo Zandonadi Web Design </H3>
<H4> Cabeçalho nível 4 - Rodrigo Zandonadi Web Design </H4>
<H5> Cabeçalho nível 5 - Rodrigo Zandonadi Web Design </H5>
<H6> Cabeçalho nível 6 - Rodrigo Zandonadi Web Design </H6>
</BODY>
</HTML>

PARÁGRAFO

A TAG <p> é utilizada para definir o ínicio de um parágrafo, criando uma linha em branco entre cada parágrafo. A TAG <p> também é responsável pelo alinhamento dos parágrafos.

Os parágrafos delimitados por etiquetas <p> podem ser facilmente justificados à esquerda, ao centro ou à direita, especificando tal justificação no interior da etiqueta por meio de um atributo align.

Um atributo não é mais do que um parâmetro incluído no interior da etiqueta que ajuda a definir o funcionamento da etiqueta de uma forma mais pessoal. 

O alinhamento pode ser:

LEFT : Parágrafo alinhado a esquerda.
CENTER: Parágrafo alinhado ao centro.
RIGHT: Parágrado alinhado a direita.
JUSTIFY : Parágrafo justificado.

Então, se desejássemos introduzir um texto alinhado à esquerda escreveríamos:

<p align="left">Texto alinhado à esquerda</p>

 

Para alinhar ao centro:

<p align="center">Texto alinhado ao centro</p>

 

Para alinhar à direita:

<p align="right">Texto alinhado à direita</p>

Para texto justificado:

<p align="justify">Texto justificado</p> 

Digite o código acima no seu editor HTML e salve como 

Como se vê, em cada caso o atributo align toma determinados valores que são escritos entre aspas. Em algumas ocasiões necessitamos especificar alguns atributos para o funcionamento correto da etiqueta. Em outros casos, o próprio navegador toma um valor definido por padrão. Para o caso de align, o valor padrão é left.

Nota: Os atributos têm seus valores indicados entre aspas ("), mas se não os indicamos entre aspas, também funcionará na maioria dos casos. Entretanto, é aconselhável que ponhamos sempre as aspas para acostumarmos a utilizá-las, por dar homogeneidade aos nossos códigos e para evitar erros futuros em sistemas mais meticulosos. 

Digite o código abaixo em seu editor HTML e salve como alinhamento.html, na pasta projetos_html.

<html>
<head>
<title>Rodrigo Zandonadi Web Design</title>
</head>
<body>

<p><H1>Alinhamento de parágrafos</H1></p>
<p>Este parágrafo utiliza o alinhamento padrão dos navegadores de Internet
(esquerdo).
<p align="center">Este parágrafo utiliza o alinhamento centralizado
<p align="right">Este parágrado utiliza o alinhamento à direita.
</body>
</html>

QUEBRA DE LINHA

 
A tag <br> é usada para terminar uma linha sem iniciar um novo parágrafo. Esta tag <br>, ou
“line break”, provoca uma mudança de linha sem acrescentar espaço extra entre as linhas.
Veja a diferença entre o uso da tag <p> e da tag <br>:

MODELO I

<html>

<title>Rodrigo Zandonadi Web Design</title>
<body>
<h1>Utilizando a tag p </h1>
Vamos separar esta linha com a marcação de paragráfo.<p>
Para verificar a diferença.
</body>
</html>

MODELO II

<html>

<title>Rodrigo Zandonadi Web Design</title>
<body>
<h1>Utilizando a tag br</h1>
Diferença quando separamos duas linhas utilizando<br>
a marcação de quebra de linha<br>
Diferença quando separamos duas linhas utilizando<br>
a marcação de quebra de linha <br>
Verificou a diferença?
</body>
</html>

Div align

Imaginemos um texto relativamente longo onde todos os parágrafos estão alinhados à esquerda (por exemplo). Uma forma de simplificar nosso código e de evitar introduzir continuamente o atributo align sobre cada uma de nossas etiquetas é utilizando a TAG <div>.

Esta TAG por si só não serve para nada. Tem que estar acompanhada do atributo align e o que nos permite é alinhar qualquer elemento (parágrafo ou imagem) da maneira que nós desejarmos.

Assim, o código: <p align="left">paragrafo1</p>
<p align="left">parágrafo2</p>
<p align="left">paragrafo3</p>

É equivalente a:

<div align="left">
<p>paragrafo1</p>
<p>paragrafo2</p>
<p>paragrafo3</p>
</div>

Como vimos, a TAG <div> marca divisões nas quais definimos um mesmo tipo de alinhado.

Digite o código abaixo em seu editor HTML e salve como usando_a_div_align.html, na pasta projetos_html.

<html>

<title>Rodrigo Zandonadi Web Design</title>
<body>
<p>Aqui, estamos usando o alinhamento na TAG "<p>"

<p align="left">paragrafo1 - Rodrigo Zandonadi Web Design</p>
<p align="left">parágrafo2 - Rodrigo Zandonadi Web Design</p>
<p align="left">paragrafo3 - Rodrigo Zandonadi Web Design</p> 

<p> Aqui, estamos usando a div align</p>

<div align="left">
<p>paragrafo1</p>
<p>paragrafo2</p>
<p>paragrafo3</p>
</div>  

</body>
</html>

Exemplo prático:

Para praticar um pouco o que acabamos de ver, vamos propor um exercício que se pode resolver no seu computador. Simplesmente queremos construir uma página que tenha, por esta ordem:
 

2 parágrafos centralizados
3 parágrafos à direita
Um salto triplo de linha
1 parágrafo alinhado à esquerda 


COMENTÁRIOS

Os comentários servem para dizer ao navegador que o conteúdo é apenas anotações e que
não devem ser apresentados graficamente na página.

Os comentários são utilizados para explicar o código fonte para que mais tarde seja possível
compreender o que foi feito.

COMANDO:

<!-- Comentário da página -->

Bom pessoal, por hoje é isso. Até a próxima aula!