RobertoPC Blog

[Curso HTML] Aula 03: Primeiras TAGS: HTML, HEAD, TITLE e BODY

Roberto PC — Wed, 02 Dec 2009 01:50:41 +0000

Olá, bem vindo a terceira aula do curso. Nela abordarei as primeiras TAGS a serem utilizadas na criação de um site.

A tag

Agora falaremos sobre a primeira tag do curso, a tag . A tag é a tag inicial de todo arquivo HTML. É ela que diz ao navegador que o arquivo é um arquivo HTML, devemos iniciar o documento com ela e também finaliza-lo com ela, conforme o exemplo:

Código:



Outras tags e conteúdos

Note que todas as outras tags devem estar entre a tag .

A tag

A tag é responsável pelo cabeçalho na página, conforme diz sua tradução “cabeça”. Ou seja ela é o cabeçalho do documento HTML. Basicamente possui o mesmo papel de um cabeçalho de um trabalho escolar, ela serve para definir informações sobre o documento HTML, como o título por exemplo, observe no exemplo a seguir como ela deve ser inserida:

Código:





Outras tags

Caso você não defina nenhuma tag dentro da tag , você pode omiti-la.

A tag </h2> A tag <title> é responsável pelo título da página, conforme diz sua tradução “título”. No qual vemos no topo do navegador, ou seja, ela que define o título da página HTML. Ela deve ser inserida obrigatoriamente entre a tag <head>, como no exemplo a seguir: Código: <pre class="brush: xml;"><html> <head> <title>Título da página

A tag

A tag é responsável por tudo que vai aparecer no corpo do navegador, ou seja, é o corpo da página HTML, conforme diz sua tradução “corpo”. Todo conteúdo que aparece em um site é definido dentro do corpo da página, ou seja, entre a tag . Conforme o exemplo a seguir:

Código:

Título da página Conteúdo da página: textos, imagens, links, tabelas e etc...

Primeiras TAGS

Com isso chegamos ao formato básico de um documento HTML, como apresentado no exemplo a seguir:

E assim finalizamos a terceira aula do curso. Na próxima falarei mais sobre a tag e seus atributos. Espero que tenha gostado e até o próximo post.

[Curso HTML] Aula 02: TAGS e Atributos

Roberto PC — Wed, 02 Dec 2009 00:50:19 +0000

Olá, bem vindo a segunda aula do curso. Nela falarei sobre os comandos HTML. As tags e os atributos.

O que são TAGS?

As tags são os comandos que utilizamos para criação da página HTML. Existem tags para cada função em uma página, como por exemplo: para inserir imagens, formatar texto, inserir tabelas e outros.

E o que são os atributos?

Os atributos são as instruções passadas para as tags que dizem a ela o que deve fazer. Um exemplo temos uma tag para formatar uma palavra que é a tag FONT, nós queremos deixar a palavra na cor vermelha, mas a tag FONT sozinha não é suficiente para dizer que a palavra terá a cor vermelha, ai que entra o atributo, é ele que vai dizer que a cor será vermelha. Mostrarei mais a frente como.

Formato de uma tag

As tags tem um formato básico de abertura e fechamento, exceto algumas. Vejamos no exemplo abaixo:

< tag> espaço entre a abertura e o fechamento da tag

Nesse exemplo escrevemos o procedimento de abertura e fechamento da tag. Note que as tags são envolvidas pelos sinais de “<” e “>”, entre eles colocamos o nome da tag, ficando “”, formando a abertura da tag.

Entre a abertura e o fechamento da tag, estará as instruções que serão afetadas pela função da tag. E logo em seguida o fechamento da tag, envolvida entre os sinais “”, entre ele colocamos o nome da tag ficando “”, formando o fechamento da tag.

Há também tags que não exigem o fechamento da mesma, ficando somente como abertura, conforme o exemplo abaixo:

< tag>

Exemplo definindo a cor da palavra para vermelho

Agora vamos ao exemplo citado anteriormente, segue o exemplo:

Código:

Palavra 1 Palavra2

Saída:

Palavra 1 Palavra 2

Neste exemplo podemos verificar a definição da “Palavra 1” para a cor vermelha. Isso acontece porque a palavra está entre o início e o fim da tag FONT. Note também que somente a “Palavra 1” está em vermelho, enquanto a “Palavra 2” continua em preto, isso acontece porque somente a “Palavra 1” está entre a tag FONT, sendo assim só ela será formatada com a cor vermelha, e tudo que estiver fora da tag FONT não será da cor vermelha.

Utilizando os atributos

Como falado anteriormente são os atributos que dizem a tag que função ela deve executar. Como visto no exemplo anterior o atributo da tag FONT era “color=”red” “, pois ele que dizia a tag FONT que a “Palavra 1” seria na cor vermelha(em inglês).

Formato dos atributos

Os atributos possuem o seguinte formato:

atributo=”valor”

Neste exemplo podemos verificar que, primeiro definimos qual é o atributo sucedido do sinal de “=”e “valor”. Devemos inserir os atributos antes do sinal “>” da abertura da tag, como mostrado a seguir:

atributo=”valor”> espaço entre as tags

Como visto anteriormente no exemplo da tag FONT, o atributo definido é o “color” que define a cor da fonte e o valor do mesmo é “red”(vermelho), que poderia ser “blue”,”yellow”,”green” ou outra cor qualquer escrito em inglês ou o código hexadecimal. Outro exemplo:

Código:

Palavra 1Palavra 2

Saída:

Palavra 1 Palavra 2

Aqui terminamos a segunda aula. Espero que tenham gostado e até o próximo post, onde abordarei as primeiras tags HTML.

[Curso HTML] Aula 01: Criando as páginas HTML

Roberto PC — Tue, 01 Dec 2009 23:43:15 +0000

Olá, bem vindo a primeira aula do curso. Nela abordarei os procedimentos para criação da página HTML.

Onde eu faço as páginas HTML?

Antes de iniciarmos precisamos saber onde fazer as páginas. E para isso vamos utilizar um editor de texto puro, ou seja o Notepad(Bloco de Notas) ou qualquer outro que prefira. Lembrando que tem que ser de texto ‘puro’.

Abaixo temos uma imagem exemplificando o uso do notepad. E possuindo o primeiro exemplo, a primeira página HTML, a página “Olá mundo!”:

Como salvo os arquivos HTML?

Para salvar os arquivos você deve salvar a pagino como um nome qualquer seguido da extensão “.htm” ou “.html”. Como no exemplo abaixo:

Note que eu salvei o arquivo como no nome “index” seguido da extensão “.htm”. Geralmente a primeira página de seu site deve se chamar “index”, pois ela é interpretada como inicial na maioria dos servidores. Você pode salvar a página com qualquer nome, desde que ela não seja inicial.

Como executar os arquivos HTML?

Depois de salvo, basta ir até o local que foi salvo o arquivo e dar dois cliques nele. Que automaticamente ele será aberto no browser(navegador), ou se preferir abri-lo através do browser. O exemplo abaixo mostra a página sendo executada no navegador:

E assim terminamos o segundo post do curso. No próximo iniciaremos o estudo aos comandos HTML, ou seja as TAGS e seus atributos. Espero que tenha gostado e boa aprendizagem.

[Curso HTML] Aula 00: Iniciando…

Roberto PC — Tue, 01 Dec 2009 23:33:04 +0000

Olá, bem-vindo ao meu blog. Neste momento estou iniciando o curso de HTML. Que intencionalmente é o primeiro de muitos outros que estão por vir.

O que realmente significa HTML?

Essa provavelmente é sua primeira pergunta em relação ao curso. Então vamos a primeira resposta. HTML significa (Hyper Text Markup Language), ou seja, Linguagem de Marcação de Hipertexto.

E pra que serve?

O HTML serve para a criação de sites. Através de comandos e regras definidas pela linguagem. Basicamente tudo que vimos em um site é inserido por ele, como imagens, vídeos, texto, links, tabelas entre outros.

Quando foi criado?

Antigamente existia a internet, mas as informações eram passadas através de prompt(na tela preta) sem formatação alguma. Observando isso Tim Berners-Lee(foto) em 1990 inventou o HTML. Com a intenção de que as informações passadas fossem melhor interpretadas pelo receptor, com a inserção de tabelas, cores, entre outros artifícios.

E assim terminamos nosso primeiro post do curso. No próximo estarei abordando os primeiros passos para criação de páginas HTML. Espero que tenha gostado e boa aprendizagem.

Hello World!

Roberto PC — Thu, 26 Nov 2009 22:20:43 +0000

É… E a partir de agora estou iniciando as postagens nesse blog, em 26/11/09. Pretendo postar coisas sobre programação e informática. E o que mais aparecer em minha mente, essa metamorfose ambulante.

Então: Ready? Go!