HTML básico parte 1

HTML é a abreviação para HyperText Markup Language (Linguagem de Marcação de Hipertexto), e segundo a Wikipédia é a linguagem de marcação utilizada para desenvolver páginas Web. Em geral um documento HTML pode ser interpretado pelos navegadores, como: Mozilla Firefox, Opera, Chrome, Safari,  talvez Internet Explorer (brincadeira, o IE também) dentre muitos outros.

Os navegadores abrem os documentos HTML e interpretam o conteúdo formando a página, na verdade eles organizam os elementos da página e os formatam conforme os códigos (tags), por isso pode ser considerado uma linguagem não compilada, muitos não consideram HTML uma linguagem de programação e sim, apenas uma linguagem de marcação, apesar disso, esse conceito é muito controverso.

Tutorial de HTML

Tags HTML

Tags são são elementos que definem e criam funções dentro de um documento, cada tag tem sua finalidade e parâmetros, veja o exemplo:

To Be Geek   a tag (bold) define que o conteúdo entre elas fiquem em negrito igual abaixo

To Be Geek

Em geral as tags precisam ser abertas e fechadas ( com / ):

(abrindo tag)

(fechando a tag)

 

Parâmetros

Dentro das tags podem conter parâmetros (elementos), que por sua vez aumentam as funcionalidades e características daquela tag.

Veja abaixo:

<p align=”center“>Essa tag “p”cria um novo parágrafo e o parâmetro align=”center” diz respeito ao alinhamento, que nesse caso, sera centralizado.

 

Quando a tag é fechada, ela perde sua finalidade ou seja tudo depois de onde ela foi fechada não sofrerá seus efeitos, tanto da tag como de seus parâmetros. Veja mais um exemplo:

O nome To Be Geek ficará em negrito mas o resto da frase não.

somente o conteúdo entre <b></b> sofre seus efeitos, nada antes dela ser aberta, nada depois dela ser fechada.

Exemplo de como ficará:

O nome To Be Geek ficará em negrito mas o resto da frase não.

 

Tags HTML Essenciais em Um documento

Existem 3 tags consideradas essenciais e que devem estar presente em qualquer documento HTML, no caso são, , e

<html></html> Todo documento deve conter essa tag no começo e sendo fechada no final, pois é ela quem indica onde começa e termina um documento html.

<head></head> Tag responsável pelo cabeçalho do doc., geralmente o conteúdo entre elas não é visível aos usuários.

<body></body> Essa tag define onde começa e termina o corpo da página, todo conteúdo (visível) deve estar entre elas.

Veja o exemplo:

Estrutura básica de um documento HTML

Titulo que irá aparecer na aba do navegador. 
   
     
conteúdo da pagina, desde links, fotos, vídeos, musicas, textos, 
barra laterais, menus etc...
     

 

– HTML

Todas as demais tags e o conteúdo da página devem estar entre

 

<head></head> – Cabeçalho

A tag <head>tem a importantíssima função de criar o cabeçalho do documento, é no cabeçalho onde são colocados as principais informações sobre a página, como: título, descrição, linkagem de arquivos externos (como CSS). Geralmente as informações contidas no cabeçalho não são visíveis ao usuário final, somente para os navegadores, motores de buscas, etc…

Dentro do cabeçalho, ou seja entre<head></head> pode conter outras tags, como:

<title></title> – Título

Tudo escrito entre <title></title> ficará como título da página, aparecendo na aba do navegador.

<link /> – Link

É usado para chamar arquivos externos ao documento, geralmente utilizando algum parâmetro como complemento. essa tag pode ser fechada como no exemplo abaixo, antes do sinal de “>”

rel="stylesheet" type="text/css" href="style.css" />

Nesse caso foi usado a tag junto com o parâmetros rel=””, type=”” e href=””, cada um deles com uma função específica.

  • rel=”valor   esse parâmetro indica características da tag, que seriam atribuída pelo valores (em azul), no caso acima o valor seria stylesheet que indica que é um arquivo contendo códigos em CSS.
  • type=”text/css   indica o tipo do arquivo, nesse caso o valor esta como text/css, sendo do tipo Texto/Css
  • href=”style.css   esse parâmetro é usado para fazer referencia a um endereço de um documento, arquivo ou pagina (href significa hypertext reference, referencia de hyper texto), nesse caso, ele faz referencia a um arquivo(style.css)

 

<body></body> – Corpo

Tudo que fica depois que essa tag é aberta e antes dela ser fechada, será o conteúdo da página, a parte visível, como: textos, links, imagens, vídeos, além disso pode conter outras tags, que vão dar forma a página.

Veja o exemplo:

Tópico 1

   align="center">To be Geek um blog para Geeks
=) 
   

Dentro da tag Body pode conter também alguns parâmetros como:

  • bgcolor=”valor atribui uma cor de fundo à pagina
 bgcolor="red">conteúdo
  • background=”valor atribui uma imagem de fundo à pagina
background="imagen.jpg">conteúdo

 

Mais Tags

– Anchor

Anchor é uma ancora que pode levar a uma outra página, documento ou na navegação no próprio documento, em geral é usada junto com alguns parâmetros.

  • href=”endereço”   usada para fazer referência à um endereço, dessa forma quando usado como parâmetro, faz a ligação com o endereço que esta entre ” “. Logo abaixo o código esta fazendo da frase To Be Geek um link para http://www.2be-geek.com
 href="http://www.2be-geek.com">To Be Geek

To Be Geek

  • name=”valor esse parâmetro cria um ponto ao qual pode ser usado para navegar até la, suponhamos que o site tenha um conteudo muito extenso e que seja necessário uma navegação mais rápidas entre os tópicos, então pode-se marcar os tópicos e criar links em locais estratégicos que levem até o ponto marcado.
name="ponto1">Anchor

Depois de marcado o ponto só é preciso criar links em locais específicos como o de abaixo

href="#ponto1">Vá para o tópico 1

Vá para o tópico 1

 

<p></p> – Parágrafo

Tag usada para criar um parágrafo, pode-se acrescenter parâmetros para aumentar suas funcionalidades, como:

  • align=”valor parametro responsavel pelo alinhamento, podendo ser left (esquerda), right (direito), center (centro) e justify (justificado)
align="right">Texto alinhado a direita

texto alinhado a direita

  • style=”valor”  tag usada para acrescentar CSS em linha.
style="background-color:yellow;"> To Be Geek

To Be Geek

 

<b></b> – Bold

a tag é usada para deixar o texto em negrito.

<b>texto em negrito </b> ou <strong>texto em negrito</strong> (sendo essa ultima a mais recomendada).

 texto em negrito

 

<i></i> – Itálico

Usada para formatar o texto em itálico.

<i>texto em itálico</i>

 texto em itálico

 

<sub></sub> – Subscrito

Subscreve o texto.

Veja como fica o<sub> texto subscrito</sub>

Veja como fica o texto subscrito

 

<sup></sup> – Sobrescrito

Sobrescreve o texto.

Veja como fica o <sup> texto sobrescrito </sup>

Veja como fica o texto sobrescrito

 

<u></u> – Sublinhado

Sublinha o texto.

<u>texto sublinhado</u>

Texto sublinhado

 

<font></font> – Fonte

A tag é usada junto com alguns parâmetros para estilizar textos.

  • size=”valor  responsável pelo tamanho da fonte, variando de 1 a 7.
<font size="6">To Be Geek</font>

To Be Geek

  • face=”valor responsável por selecionar o tipo de fonte do texto.
<font face="arial">To Be Geek</font>

To Be Geek

  • color=”valor indica a cor do texto, podendo ser, em hexadecimal ou pelo nome (exemplo: red, blue, green etc..).
< font color="red" > To Be Geek </font>

To Be Geek

Como ja citado, em uma mesma tag pode-se usar vários complementos juntos, como no exemplo abaixo.

<font size="5" face="arial" color="green">To Be Geek</font>

To Be Geek

 

<big></big> – Big

Usada para aumentar o tamanho da fonte, neste caso, foi usada varias vezes para que ocorra um aumento gradativo da fonte e foi fechada nessa mesma ordem para que ocorra a volta pro estado anterior, até o tamanho normal da fonte.

<big>a<big>a<big>a<big>a</big>a</big>a</big>a</big>a

aaaaaaa

 

<small></small> – Small

Tem um funcionalidade parecida com a tag Big, só que ao contrario, ao invés de aumentar a fonte, ela diminui.

<small>b<small>b<small>b<small>b</small>b</small>b</small>b</small>

bbbbbbb

 

Continuação:

Este post foi publicado em HTML em por .

Sobre Frede Mandu

Frederson Mandu de Oliveira é Tec. em Adm, fundador e blogueiro do blog To Be Geek, é formado no curso Superior em "Tecnologia em Analise e Desenvolvimento de Sistemas", é aficionado em tudo relacionado a tecnologia, tendências, games, HQs, mangás ao qual dedica um pouco de seu tempo pra cada coisa, e muito pra nada!

Deixe uma resposta