HTML Básico

Ola Pessoal, estou criando meu primeiro blog. Basicamente ele vai acompanhar meus estudos sobre linguagens diversas. Vou começar com HTML pra quebrar o gelo em seguida estarei mandando posts de Java.

HTML significa HyperText Markup Language – linguagem de marcação hyper texto, hypertexto é um texto não linear, organizado em rede, ligado por “elos” atraves das ligações (links) os usuários selecionam o conteúdo acessado. Nesta linguagem que são escritas as paginas da web e interpretadas pelo navegador.

Para desenvolver uma pagina em html são necessários poucos recursos, a linguagem sempre é interpretada apartir de um codigo ASCII, um simples editor de texto pode gerar o código fonte, porem aconselho estudar outas ferramentas para criação de páginas onde se obtem maiores recursos, por exemplo o editplus e posteriormente dreamwaver. Além de um editor necessita de um navegador de internet para visualizar as paginas (por exemplo Internet Explorer, Mozila Firefox, Opera, Chome, etc.).

Os navegadores interpretam o código html atraves de “tags” que representam os comandos, são escritos entre os simbolos menor que (<) e maior que (>) sendo que de modo geral as tags são fechadas leva os simbolos menor que barra(</)  e maior que (>) assim o comando atua entre a tag aberta e a tag fechada.

O básico que deve conter uma página em html são as tags apresentadas asseguir em ordem que devem estar:

<HTML>

<HEAD>

<TITLE></TITLE>

</HEAD>

<BODY></BODY>

</HTML>

apartir disso escrevemos as paginas web, vou explicar um pouco as tags apresentadas:

<html></html>  São usadas para delimitar os comandos html, o browser sabe que o conteudo desta tag será interpretadas os comandos.

<head></head> Cabeçalho identifica informações do documento como por exemplo autor, lingua, ambiente,  descreve os elementos de estilos <style>, define ligações com outros documentos <link>, contém os scripts também.

<title></title> Titulo do documento é a maneira que o browser mostra para o usuario o documento, aparece o conteudo na barra superior do navegador, nos bookmarks, nos menus avanças e voltar, etc.

<body></body> Contém os elementos que estruturam o documento, como proprio nome ja diz é o corpo do documento, contem os principais elementos que ira aparecer na página.

Temos que nos livrar da maldição, hehe … existe uma maldição que relata se você for aprender uma linguagem deve sempre começar escrevendo um programa Olá Mundo, ou não conseguirá aprender a linguagem, se é verdade ou não desconheço mas apenas por precaução estarei escrevendo a primeira página. Fica assim:

<html>

<head>

<title>Primeira Página</title>

</head>

<body>Olá Mundo!</body>

</html>

escreva este codigo no bloco de notas, vai em salvar como… salva como pg1.html não se esqueça da extensão html pois este que identifica documento como pagina web

o resultado é parecido com este:

resultado Olá Mundo!

resultado Olá Mundo!

Agora vamos estudar outras tags…

<Hn> n vai de 6 até 1, Header esta tag de cabeçalhos tem por padrão 6 tamanhos de cabeçalhos

tente escrever uma pagina assim:

<html>
<head><title>Cabeçalhos</title></head>
<body>
<h1>texto no formato h1</h1>
<h2>texto no formato h2</h2>
<h3>texto no formato h3</h3>
<h4>texto no formato h4</h4>
<h5>texto no formato h5</h5>
<h6>texto no formato h6</h6>
</body>
</html>

Assim percebemos as diferenças de cabeçalhos.

<p> Paragraph esta tag de paragrafo pode  ou não ser fechada (</p>), sendo usada também com paramêtros por exemplo de alinhamento (align=”center”) assim o paragrafo tem comportamento diferente conforme os atributos.

tente escrever uma página assim:

<html>
<head><title>Alinhamento de Paragrafos</title></head>
<body>
<p>paragrafo com alinhamento default (esquerdo)
<p align=”center”>paragrafo com alinhamento centralizado</p>
<p align=”right”>paragrafo com alinhamento a direita</p>
</body>
</html>

<br> quebra de linha, não é fechada como outras tag (!</br>), quando o navegador lê este comando pula para a proxima linha o texto que vier a seguir, sem pular linhas extras.

temos outras tags teste elas em suas páginas:

tabela de tags

tabela de tags

Bem vou ficando por aqui, caso se interesse pesquise sebre isto é muito importante saber bem html e depois mergulhar em php, asp quem tem mais dinamismo nas páginas.

Espero ter ajudado dispertando boas atitudes. Bons estudos até mais.

  1. #1 por Tadeu em 21/02/2011 - 10:47

    Muito bom o material disponível aqui, só tive dificuldades para configurar alguns componentes de tela, mas no geral está muito bom.

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: