anterior
Tweet about this on TwitterPin on PinterestShare on LinkedInShare on Google+Email this to someoneShare on Facebook
QR CODE

Introdução ao HTML

INTRODUÇÃO AO HTML

html

Todas as páginas da internet possuem documentos constituídos a partir do HTML. O HTML, ou HyperTextMarkupLanguage (Linguagem de Marcação de HiperTexto) é uma linguagem utilizada para a criação de documentos voltados aos navegadores de internet, ou seja, é a linguagem em que os navegadores entendem e traduzem para o usuário.

Para a marcação de texto, o HTML utiliza tags para definir propriedades de conteúdo ou objetos, como imagens e tabelas. Não é necessário nenhum programa especifico para o desenvolvimento de código HTML, porém, este arquivo deve estar no formato .htm ou .html. Apesar de não ser necessário um programa específico para a criação de um arquivo HTML, é recomendável a utilização de editores específicos, como o NotePad++, pois facilitam muito seu desenvolvimento, como o NotePad não possui suporte para o desenvolvimento HTML. Atenção: Não utilize programa como o WordPad ou Word pois estes programas inserem marcadores, referências e propriedades de textos específicos para impressão.

Além disso, outros programas ainda mais específicos do que o NotePad++, como o Dreamweaver, dispõem de ferramentas para a criação de código automaticamente, facilitando ainda mais seu desenvolvimento. Será trabalhado o conceito HTML por meio do programa NotePad++.

Em sites da web, o HTML pode trabalhar em conjunto com outras tecnologias, como Java Script (realiza processamento no computador do usuário), CSS (proporciona melhor controle sobre atributos HTML) e também programas de processamento voltados à web e funcionam no servidor, como o PHP, ASP, JSP, etc.

Para que o arquivo seja interpretado da maneira correta, ele deve estar no formato HTML, ou seja, com extensões .html, .htm, .shtm ou .xhtml. Para outros tipos de documentos na web, as extensões são: .js (Java Script), .css, .php, .asp, .jsp, etc.

Estrutura Básica do HTML

Primeiramente, um arquivo HTML necessita obrigatoriamente estar no formato correto, para isto, ao salvar o documento não se pode esquecer-se de alterar seu formato para .html ou .htm.

O HTML utiliza tags que são marcadores de textos ou objetos. Exemplo de uma página de HTML simples:

<html>

<head>

<title>

Título da página

</title>

</head>

<body>

Aqui será montada a página.

</body>

</html>

 

Significado das tags:

  • <html> e </html>: representam o início e o fim do documento principal;
  • <head> e </head>: determinam o início e o fim do cabeçalho. O cabeçalho é uma coleção não ordenada de informações sobre o documento para fins de classificação e indexação;
  • <title> e </title>: utilizado dentro da taghead (cabeçalho). Determina o título a ser exibido na barra de título da janela do navegador;
  • <body> e </body>: é o corpo do documento, ou seja, todo o conteúdo do documento, incluindo imagens, textos e links.

A página será exibida no navegador na seguinte maneira:

blog

TAGS

Além das tags básicas, existem muitas outras e cada uma possui uma função específica.

Formato geral de uma tag:

<TAG ATRIBUTO1=”VALOR_X” ATRIBUTO_N=”VALOR_Y”> Texto e/ou outras tags</TAG>

 

Todos os nomes das tags devem estar entre o sinal de maior e menor.

As tags <TAG> e </TAG> definem o começo e o fim de uma tag, sendo que a tag aplicará efeito sobre o conteúdo entre<TAG> e </TAG>.

Os atributos ATRIBUTO1 e ATRIBUTO_N definem especificações da tag, de acordo com sua função.

Os valores VALOR_X E VALOR_Y definem o valor ou tipo dos seus respectivos atributos.

Dica: Tag de comentários. É possível utilizar a tag<!—-> para a criação de comentários. A utilização de comentários é importante para que haja um entendimento melhor do código, principalmente em trechos complexos. Os comentários não serão exibidos na página. Exemplo:

<HTML><!– Inicio do código–>

     <HEAD><!– Inicio do cabeçalho–>

          <TITLE><!–Tag utilizada para criação do título da página–>Meu Título

          </TITLE>

     </HEAD><!– Fim do cabeçalho–>

     <BODY><!– Inicio do corpo da página–>

          Minha Página

     </BODY><!– Fim do corpo da página–>

</HTML><!– Fim da página–>

ATRIBUTOS E TAGS DO HEAD E BODY

A tag <head>

A tag<head> serve para definir o cabeçalho de uma página. Dentro desta tag ficam tags com parâmetros de cabeçalho, entre elas o <title> e <meta>. A tag <title> define o título da página, demonstrado na barra de títulos do navegador.

Tag <meta>

Esta tag é utilizada no cabeçalho para definir o conteúdo de uma página. Esta tag fornece informações para mecanismos de busca em sites da Web. Observação: Meta trata dele sobre ele mesmo, ou seja, no caso da tag<meta>, trata de dados sobre os dados. Ele pode ser utilizado mais de uma vez no mesmo documento para definir diferentes atributos.

Ela possui os seguintes atributos:

  • NAME: Opcional.Indica um nome para a informação;
  • HTTP-EQUIV: Opcional. Faz uma correspondência com campos de cabeçalhos do protocolo HTTP. Os valores deste campo podem ser lidos pelos navegadores e, com isso, desencadear uma ação.
  • CONTENT: Obrigatório.Especifica meta-informação para que seja associada com o primeiro nome ou cabeçalho de resposta. O valor do atributo CONTENT, depende do valor especificado no atributo HTTP-EQUIVou NAME.

Exemplos:

<META HTTP-EQUIV=”REFRESH” CONTENT=30>

A cada 30 segundos, atualiza a página automaticamente.

<META NAME=”KEYWORDS” CONTENT=”HTML,CODIGO”>

Define palavras chave a serem utilizadas por buscadores.

A tag<body> e seus atributos

A tag<body> contém todo o conteúdo de uma página, como objetos, imagens, links, etc. Dentro dela pode ser definido:

  • BGCOLOR: Define a cor de fundo da página. É definida por meio de código hexadecimal RGB ou nome da cor em inglês. Caso seja omitida será exibido cor de fundo de acordo com o padrão do navegador;
  • TEXT: Define cor do texto, em hexadecimal, nome da cor em inglês ou cor padrão do navegador;
  • LINK: Cor do link não visitado, se não indicado, usará o padrão do navegador;
  • VLINK: Cor do link visitado, se não indicado, usará o padrão do navegador;
  • ALINK: Cor de links ativos;
  • BACKGROUND: indica a cor ou endereço de imagem de plano de fundo;
  • TOPMARGIN: Define a margem do topo. O tamanho é definido em pixels;
  • LEFTMARGIN: Define a margem esquerda.

Exemplo:

<BODY BGCOLOR=”#FFFFFF” TEXT=”#000000” LINK=”#3300CC” VLINK=”#FF0000” ALINK=”#0066CC” LEFTMARGIN=”15” TOPMARGIN=”15”>

Minha página

</BODY>

FORMATO HEXADECIMAL E DE NOME PARA DETERMINAR VALORES DE CORES

Para a alteração de cores de textos, links, tabelas ou outros objetos, em HTML as cores são definidas por seu código ou nome em inglês.

Em código, utiliza o RGB (Red Green Blue) utiliza padrão em base hexadecimal, variando para as cores de 00 até FF para cada uma das três cores. Como o padrão RGB utiliza como base a luz, o código FFFFFF representa a cor branca e 000000 representa a cor preta.

Para nomes, basta utilizar o nome da cor em inglês, como por exemplo, red, darkblue, cyan, etc. É recomendada a utilização do código hexadecimal porque cada navegador pode interpretar de uma maneira diferente o nome de cor.

Exemplo de um atributo de cor:

Color=”#008000”

Ou:

Color=”Green”

CARACTERES ESPECIAIS E ACENTUAÇÃO

Ao utilizar determinados caracteres e acentuação muitas vezes é necessário indicar pelo seu código correspondente. Por exemplo, para exibir a seguinte frase no navegador:

A tag <BODY> e seus atributos servem para indicar como será o modelo geral da página.

Código-fonte:

O código é formado pelo caractere “&” e finalizado com ponto-e-vírgula “;”. Até mesmo para acentos é recomendável a utilização de seu código, evitando muitos erros que possam ocorrer em navegadores, como no exemplo o &aacute; que representa a letra “á”.

A seguir, lista de principais caracteres e códigos correspondentes:

 

CaractereCódigoCaractereCódigoCaractereCódigoCaractereCódigo
<&lt;½&frac12;£&156;&quot;
>&gt;¼&frac14;«&laquo;®&reg;
&&amp;¾&frac34;»&raquo;©&copy;
°&167;±&plusmn;&sect;(Espaço)&nbsp;
Á&Aacute;á&aacute;É&Eacute;é&eacute;
À&Agrave;à&agrave;Ê&Egrave;ê&egrave;
Â&Acirc;â&acirc;Ó&Oacute;ó&oacute;
Ã&Atilde;ã&atilde;Ô&Ograve;ô&ograve;
Ú&Uacute;ú&uacute;Õ&Otilde;õ&otilde;
Ü&Uuml;ü&uuml;Í&Iacute;í&iacute;
Ç&Ccedil;ç&ccedil;Ñ&Ntilde;ñ&ntilde;

 

Para maiores informações sobre as regras e atribuições do HTML, confira o site oficial da WWW. http://www.w3.org/

Autor do Post: Matheus Gregório T. Barros

10569051_704834476256412_2416909433237903462_n

Compartilhem! Muito obrigado e até o próximo.

 

Próximo

Postado por

Postagem Relacionada

jkit
jQuery jKit: A revolução no Front-End
jQuery jKit Hoje eu venho falar de um plug-in incrível do Jquery: o super útil JKit!!