01/12/2009

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

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

<post>

A tag <HTML>

Agora falaremos sobre a primeira tag do curso, a tag <html>. A tag <html> é 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:

<html>

Outras tags e conteúdos

</html>

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

A tag <HEAD>

A tag <head> é 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:

<html>

<head>

Outras tags

</head>

</html>

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

A tag <TITLE>

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:

<html>

<head>

<title>Título da página</title>

</head>

</html>

A tag <BODY>

A tag <body> é 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 <body>. Conforme o exemplo a seguir:

Código:

<html>

<head>

<title>Título da página</title>

</head>

<body>

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

</body>

</html>

Primeiras TAGS

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

Print Hello World!

</post>

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

;)

Deixe um comentário

Arquivado em curso HTML, HTML

Marcado como , , , , ,

01/12/2009

[Curso HTML] Aula 02: TAGS e Atributos

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

<post>

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</ 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 “<tag>”, 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 “</” e “>”, entre ele colocamos o nome da tag ficando “</tag>”, 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:

<font color=”red”> Palavra 1 </font> 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:

<tag atributo=”valor”> espaço entre as tags</tag>

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:

<font color=”green”><b>Palavra 1</b></font><u>Palavra 2</u>

Saída:

Palavra 1 Palavra 2

</post>

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

;)

Deixe um comentário

Arquivado em curso HTML, HTML

Marcado como ,

01/12/2009

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

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

<post>

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!”:

Print Hello Word!

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:

Print Save Index.htm

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:


</post>

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.

;)

Deixe um comentário

Arquivado em curso HTML, HTML

Marcado como , , ,

01/12/2009

[Curso HTML] Aula 00: Iniciando…

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.

<post>

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?

Tim Berners-Lee

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.

</post>

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.

;)

Deixe um comentário

Arquivado em curso HTML, HTML

Marcado como , ,

26/11/2009

Hello World!

É… 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!

Deixe um comentário

Arquivado em Uncategorized