PT-DigiArt
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.



 
InícioProcurarÚltimas imagensRegistarEntrar

 

 [Tutorial] HTML - básico

Ir para baixo 
3 participantes
AutorMensagem
brunomoniz
.
.
brunomoniz


Batalhas|Vitórias : 0
Mensagens : 125
Data de inscrição : 09/04/2009
Idade : 31
Localização : Luanda

[Tutorial] HTML - básico Empty
MensagemAssunto: [Tutorial] HTML - básico   [Tutorial] HTML - básico EmptySáb maio 23, 2009 12:53 pm

Programação... O que seria a informática sem ela?

Não sou nenhum périto neste assunto, mas já tive a estudar durante algum tempo e sei o básico, obviamente acompanharei alguns outros tutorias não de minha autoria para alimentar os conhecimentos de forma a pô-los cá bem explícitios para que compreendam bem.

Postarei tópico á tópico. Separei o índice da seguinte forma:

Citação :

Índice

1. HTML
1.1.O que é ?
1.2.O que não é?

2. Preparação do ambiente

3. Como são as Marcações HTML?
1.3.Exemplos de Marcações
1.4.HTML "Mínimo"

4. Cores e o HTML

5. Propriedades da tag <BODY>

6. Acentuação no HTML

7. Documentando o código

8. Lidando com fontes
1.5.Fonte padrão
1.6.Fonte parcial

9. Estilos de Texto
1.7.Estilo Físico
1.8.Estilo Lógico
1.9.Estilos Especiais

10. Listas
1.10.Listas com Marcadores
1.11.Lista Numeradas
11. Links
1.12.Link para Outra Página
1.13.Link para Própria Página

12. Imagens

13. Tabelas
1.14.TABLE
1.15.TR
1.16.TD

14. Formulários
1.17.Elementos de Formulário

15. Frames

16. Editores de HTML

Estão livres para expor dúvidas. E no final de tudo postarei um documento Word com tudo incluido, de forma a juntar o útil ao agradável.
Ir para o topo Ir para baixo
brunomoniz
.
.
brunomoniz


Batalhas|Vitórias : 0
Mensagens : 125
Data de inscrição : 09/04/2009
Idade : 31
Localização : Luanda

[Tutorial] HTML - básico Empty
MensagemAssunto: Re: [Tutorial] HTML - básico   [Tutorial] HTML - básico EmptySáb maio 23, 2009 1:19 pm

Citação :

1. HTML

HyperText Markup Language ou Linguagem de Marcação HiperTexto, uma linguagem simples composta de marcações de formatação e diagramação de hipertexto/hipermídia (informações em texto, imagens, sons e ações ligaadas umas às outras de uma forma complexa e nao-sequencial através de chaves relacionadas).


1.1. O que é ?

É a linguagem da WWW (World Wide Web), justamente por essa capacidade de formatação e diagramação de hipertexto/hipermídia. Atualmente existem muitas outras linguagens utilizadas concorrentemente com o HTML (Java, ActiveX, etc...) mas a base da WWW ainda é , de longe, o HTML, que é interpretada por todos os navegadores (browsers) disponíveis (Netscape, Internet Explorer, Mosaic, etc...).
O documento em HTML é um arquivo texto comum (ASCII) que pode ser escrito através de qualquer editor de textos comum (Edit, E , Norton Editor, Notepad, ...) e tem a terminação .htm ou .html.
Como é uma linguagem interpretada, a partir do momento em que se salvou o arquivo HTML o mesmo já pode ser aberto por qualquer navegador, que é o único software que pode determinar se o documento foi escrito dentro dos padrões da linguagem. Atualmente estamos na versão 4.0 do HTML
Existem editores específicos para varias plataformas, dentre os quais podemos citar o Macromedia DreamWeaver, Quanta+, NVU, etc... Há diferenças entre os diversos navegadores, de forma que nem todas as marcações e seus correspondentes recursos são suportados por todos eles e, quando isso acontece, o browser
simplesmente a ignora. Portanto é muito importante testar o documento criado, pelo menos, no Microsoft Internet Explorer e no Mozilla FireFox.

Um site nada mais é que um conjunto de páginas HTML interligadas através de hyperlinks, de forma que a navegação constitui-se, basicamente, de “abrir” as páginas do site.


1.2. O que não é?

HTML não é uma linguagem de programação, consecutivamente não tem acesso a banco de dados nem a outros arquivos, salvo as opções de download.
HTML não é “case sensitive”, ou seja, não diferencia maiúsculas de minúsculas.
HTML não permite conteúdo dinâmico, ou seja, só permite a criação de páginas estáticas.
O dinamisno das páginas fica por conta de outras linguagens, essas sim, linguagens de programação, dentre as quais podemos citar: JavaScript, PHP, ASP, JAVA, etc... linguagens que são para os avançados com vontade de especializar o conhecimento.


Próximo post, tópico 2.
Ir para o topo Ir para baixo
Shadowtuga
.
.
Shadowtuga


Batalhas|Vitórias : 1
Mensagens : 201
Data de inscrição : 08/04/2009
Idade : 31
Localização : Ovar

[Tutorial] HTML - básico Empty
MensagemAssunto: Re: [Tutorial] HTML - básico   [Tutorial] HTML - básico EmptySáb maio 23, 2009 1:36 pm

Continua, estou a gostar Grin
Ir para o topo Ir para baixo
brunomoniz
.
.
brunomoniz


Batalhas|Vitórias : 0
Mensagens : 125
Data de inscrição : 09/04/2009
Idade : 31
Localização : Luanda

[Tutorial] HTML - básico Empty
MensagemAssunto: Re: [Tutorial] HTML - básico   [Tutorial] HTML - básico EmptySáb maio 23, 2009 2:19 pm

Citação :

2. Preparação do ambiente

Neste mini-curso utilizaremos, basicamente, os seguintes softwares:
- Bloco de notas e NVU: para criação e edição das páginas HTML
- Internet Explorer e/ou FireFox para visualização das páginas HTML.

Crie uma pasta, no Windows Explorer ( ou nos meus documentos ), destinada a receber os arquivos criados por você durante este treinamento.

Para visualizar uma página criada, no browser, basta selecionar arquivo/abrir (ou File/Open se o browser estiver em inglês) e apontar para a página criada.

Anexos: NVU free; Firefox 3.0 free.

Shadowtuga: Pediste, aqui tens ... green

Próximo post, tópico 3.


Última edição por brunomoniz em Sáb maio 23, 2009 2:32 pm, editado 2 vez(es) (Motivo da edição : Adição de link para download)
Ir para o topo Ir para baixo
Shadowtuga
.
.
Shadowtuga


Batalhas|Vitórias : 1
Mensagens : 201
Data de inscrição : 08/04/2009
Idade : 31
Localização : Ovar

[Tutorial] HTML - básico Empty
MensagemAssunto: Re: [Tutorial] HTML - básico   [Tutorial] HTML - básico EmptySáb maio 23, 2009 2:50 pm

Podes explicar sucintamente para que serve o NVU?

Também tens o Notepad++ para trabalhar em HTML. ;)
Ir para o topo Ir para baixo
brunomoniz
.
.
brunomoniz


Batalhas|Vitórias : 0
Mensagens : 125
Data de inscrição : 09/04/2009
Idade : 31
Localização : Luanda

[Tutorial] HTML - básico Empty
MensagemAssunto: Re: [Tutorial] HTML - básico   [Tutorial] HTML - básico EmptySáb maio 23, 2009 3:03 pm

Citação :

3. Como são as Marcações HTML?

As marcações do HTML - tags - consistem do sinal < (menor que), seguido pelo nome da marcação e fechada por > (maior que).
De um modo geral, as tags aparecem em pares, por exemplo, <H1> Cabeçalho</H1>. O símbolo que termina uma determinada marcação é igual àquele que a inicia, antecedido por uma barra (/) e precedido pelo texto referente.

No exemplo, <H1> avisa ao cliente Web para iniciar a formatação do primeiro nível deccabeçalho e </H1> avisa que o cabeçalho acabou.
Há algumas exceções como, por exemplo, a que indica um final de parágrafo: <P>. Não necessita de uma correspondente: </P>. A marcação que indica quebra de linha - <BR> - também não precisa de uma correspondente, e outras tais como <HR> e <LI>…


1.3. Exemplos de Marcações

<TITLE> ... </TITLE> especifica o título de um documento.
<H1> ... <H1> indica a aparência de um cabeçalho.
<P> é a marcação para final de parágrafo.


1.4. HTML "Mínimo"

Todo documento deve ser identificado como HTML (<HTML> </HTML>), ter uma área de cabeçalho (<HEAD></HEAD>) com o nome para o documento (<TITLE> </TITLE>), um título principal e uma área definida como corpo(<BODY></BODY>) do conteúdo do documento. Como o exemplo a seguir:
Código:
<HTML>
<HEAD>
<TITLE>Este é o título da página</TITLE>
</HEAD>
<BODY>
Este é o Corpo da página.
</BODY>
</HTML>

Abra um novo arquivo no bloco de notas e digite o trecho de código acima. A seguir salve o arquivo na sua pasta com o nome curso001.htm e abra esse arquivo no browser.

Qualquer dúvida, não hesitem em perguntar.

Shadowtuga: O NVU não é nada mais nada menos que um programa que facilita o uso de tags. Nele as ferramentes vêm já inseridas, depois é só inserires o texto que quiseres que ele facilita o trabalho. É complicado explicar, baixa-o e verá do que falo. Resumindo, só facilita o trabalho.
O Notepad++ também é útil, mas o melhor é começar pelo básico.

Próximo post, tópico 4.
Ir para o topo Ir para baixo
brunomoniz
.
.
brunomoniz


Batalhas|Vitórias : 0
Mensagens : 125
Data de inscrição : 09/04/2009
Idade : 31
Localização : Luanda

[Tutorial] HTML - básico Empty
MensagemAssunto: Re: [Tutorial] HTML - básico   [Tutorial] HTML - básico EmptySáb maio 23, 2009 6:00 pm

Citação :
4. Cores e o HTML

O browser interpreta as cores segundo o código hexadecimal do padrão RGB, ou seja, para obtenção da cor desejada devemos informar, em hexadecimal, a “quantidade” de cada uma das cores básicas, o vermelho, o verde e o azul, e isso tudo deve vir precedido por um #.
Alguns exemplos:

Vermelho: #FF0000.
Azul: #0000FF.
Verde: #00FF00.
Amarelo: #FFFF00.
Branco: #FFFFFF.
Preto: #000000.

Felizmente o HTML provê alguns “atalhos” para as cores mais usadas, permitindo a utilização de nomes ao invés dos códigos:

[Tutorial] HTML - básico Cores


Porém, qualquer outra cor ou combinação de cores, somente via código.
Os softwares especializados em edição de páginas HTML, na sua grande maioria, permitem a criação automática do código através da seleção da cor, tal como o NVU e outros.

Próximo post, tópico 5.
Ir para o topo Ir para baixo
brunomoniz
.
.
brunomoniz


Batalhas|Vitórias : 0
Mensagens : 125
Data de inscrição : 09/04/2009
Idade : 31
Localização : Luanda

[Tutorial] HTML - básico Empty
MensagemAssunto: Re: [Tutorial] HTML - básico   [Tutorial] HTML - básico EmptySeg maio 25, 2009 1:08 pm

Citação :
5. Propriedades da tag <BODY>

A maioria das tag’s apresenta propriedades que interferem diretamente no resultado alcançado no browser. A tag <BODY> é uma delas, e estas são as suas propriedades mais comuns:

alink: informa a cor dos links ativos na página.
link: informa a cor dos links disponíveis na página.
vlink: informa a cor dos links já visitados na página.
bgcolor: informa a cor da página.

Código:
<HTML>
<HEAD>
<TITLE>Este é o título da página</TITLE>
</HEAD>
<BODY bgcolor=”#FF0000” link=”green”>
<a href=”www.google.com.br”>Página de Busca</a>
</BODY>
</HTML>


Abra um novo arquivo no bloco de notas e digite o trecho de código acima. A seguir salve o arquivo na sua pasta com o nome curso002.htm e abra esse arquivo no browser. A partir de agora terão de usar a imaginação.
Ir para o topo Ir para baixo
lAlix
.
.
lAlix


Batalhas|Vitórias : 0
Mensagens : 10
Data de inscrição : 22/07/2009

[Tutorial] HTML - básico Empty
MensagemAssunto: Re: [Tutorial] HTML - básico   [Tutorial] HTML - básico EmptySex Jul 24, 2009 3:00 am

Bom trabalho!! Consegues arranjar códigos para um jgo!!
Ir para o topo Ir para baixo
Conteúdo patrocinado





[Tutorial] HTML - básico Empty
MensagemAssunto: Re: [Tutorial] HTML - básico   [Tutorial] HTML - básico Empty

Ir para o topo Ir para baixo
 
[Tutorial] HTML - básico
Ir para o topo 
Página 1 de 1

Permissões neste sub-fórumNão podes responder a tópicos
PT-DigiArt :: Desenvolvimento Web :: HTML :: Tutoriais-
Ir para: