Aulas de HTML

Froostiin · Abril 30, 2011

Galera , vou postar aqui algumas aulas de HTML , peço que por favor não postem nada aqui , vou criar um outro post para vocês postarem duvidas e criticas la .

Aulas de HTML

Irei postar as aulas em cada post , uma em cada post , ou seja a primeira aula no primeiro post ( Não no topic , no primeiro POST ) são 7 aulas .

Na primeira aula irei te "introduzir" ao HTML .
Na segunda aula você ira aprender o básico do HTML ( tags ) .
Na terceira aula que na minha opinião é onde começa a ficar legal , você ira aprender um pouco sobre interligação de textos , de imagens e etc .
Na quarta aula você ira aprender a fazer listas como esta ( com os pontos ali no começo ) ou com números .
Na quinta aula é uma parte que eu particularmente não gosto , a formatação de textos , a formatação de textos é uma parte muito importante para quem vai trabalhar com HTML puro .
Na sexta parte é uma coisa um tanto que básica , vocês já devem saber inserir imagens agora se vocês leram todas as aulas então acho ela um tanto que inutil .
Na sétima você ira aprender como criar tabelas de diferentes metodos , isso é muito usado quando você cria um site para venda ou compra , ou em muitos outros casos , acho muito importante essa aula .

Froostiin · Abril 30, 2011

Um documento HTML (HyperText Markup Language) é um conjunto de instruções em formato ASCII, usada para criar documentos hipertexto e que podem ser visualizados por um browser WWW (como o Netscape).

Para criar uma página HTML voce pode usar qualquer editor que possa salvar arquivos no formato "ASCII com quebras de linhas", como por exemplo o Notepad do Windows, ou então usar um editor HTML específico.

A linguagem HTML utiliza Tags (marcações) que informam ao browser como exibir o documento.

As marcações do HTML consistem do sinal <, (o símbolo de "menor que"), seguida 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 aquele que a inicia, antecedido por uma barra (/).

No exemplo, <H1> inicia a formatação do primeiro nível de cabeçalho e </H1> indica que o cabeçalho acabou.

Há excessões a esse funcionamento em pares das marcações. Por exemplo, a que indica um final de parágrafo: <P>, não necessita de um Tag 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>..

Importante: HTML não faz diferença entre maiúsculas e minúsculas (não é "case sensitive"). Então a notação <title> é equivalente a <TITLE> ou <TiTlE>.

Veja na próxima aula um exemplo de pagina em HTML

Editado Abril 30, 2011 por Froostiin (veja o histórico de edições)

Froostiin · Abril 30, 2011

Exemplo de pagina em HTML :

Todo documento deve conter um conjunto básico de Tags. Deve ser identificado como HTML (<HTML> </HTML>), ter uma área de cabeçalho (<HEAD> </HEAD>) onde será colocado o título do documento (<TITLE> </TITLE>), e uma área definida como corpo(<BODY> </BODY>) onde estará o conteúdo do documento. Veja um exemplo:

<HTML>

<HEAD>

<TITLE>HTML Básico</TITLE>

</HEAD>

<BODY>

<H1>Este é o primeiro nível de cabeçalho</H1>

Bem-vindo ao mundo do HTML.Este é o primeiro parágrafo.<P>E este é o segundo.<P></BODY></HTML>

Esta página vai aparecer assim:

Este é o primeiro nível de cabeçalho
Bem-vindo ao mundo do HTML. Este é o primeiro parágrafo.

E este é o segundo.

O título não aparece no corpo da página e sim no alto da tela do seu Browser, e é utilizado para identificar o documento como se fosse um nome do arquivo. É interessante que o título possa sugerir claramente o conteúdo do documento.

A marcação utilizada para títulos é <TITLE> e seu par </TITLE>. Escrito desta forma:<HTML><TITLE> Este é o título</TITLE><BODY></BODY></HTML>

Cabeçalhos normalmente são usados para títulos e sub-títulos dentro de uma página.

O HTML possui seis níveis de cabeçalhos, numerados de 1 a 6, sendo o número 1 o de maior destaque. Cabeçalhos são exibidos em letras maiores e em negrito.

ATENÇÃO: ao definir o tamanho de um cabeçalho, você não está definindo o tamanho da letra (em pontos). Você apenas define que ele aparecerá com maior tamanho e destaque que o resto do texto. O tamanho exato com que ele será visualizado é definido pelo browser de cada pessoa que acessar a informação.As notações relativas a cabeçalhos são: <Hy> Texto do cabeçalho </Hy > onde y é um número entre 1 e 6 especificando o nível do cabeçalho.

O conjunto de notações possíveis é o que segue:

<H1>Headings</H1>

<H2>Headings>/H2>

<H3>Headings</H3>

<H4>Headings</H4>

<H5>Headings</H5>

<H6>Headings</H6>

A marcação <P> é utilizada para definir o início de um novo parágrafo, deixando uma linha em branco entre cada parágrafo. HTML não reconhece o caracter de quebra de linha dos editores de texto. Mesmo que exista uma linha em branco, os clientes Web só reconhecem o início de um novo parágrafo mediante a marcação apropriada.

A marcação <BR> faz uma quebra de linha sem acrescentar espaço extra entre as linhas. Veja a diferença do uso de <P> e <BR>:

Vamos separar esta sentença com marcação de parágrafo.<p>Para verificar a diferença.

Vamos separar esta sentença com marcação de parágrafo.Para verificar a diferença

Para verificar a diferença.

Diferença quando separamos duas linhas utilizando <br>a marcação de quebra de linha <br>Deu pra notar?

Diferença quando separamos duas linhas utilizando
a marcação de quebra de linha

Deu pra notar?

Editado Abril 30, 2011 por Froostiin (veja o histórico de edições)

Froostiin · Abril 30, 2011

O principal poder do HTML vem da sua capacidade de interligar partes de um texto (e também imagens) a outros documentos. Os clientes exibem em destaque estas áreas ou pontos chaves (normalmente com cores diferentes ou sublinhado) para indicar que se trata de um link, ou interligação, no hipertexto.

A marcação <A>, que define o ponto de partida para os links, é denominada de âncora. Para incluir uma âncora em seu documento:

Inicie a âncora com <A . (Há um espaço depois de A.)
Especifique o documento a ser interligado, inserindo o parâmetro HREF="filename" seguido do sinal: > Obs.:(HREF significa Hypertext Reference)
Insira o texto que vai funcionar como link no documento corrente
Anote a marcação de final da âncora: </A>.

Um exemplo de referência a um hipertexto:
<A HREF="index.htm">Índice</A>
que resulta no LINK Índice

A palavra "Índice" é definida como o marcador do link para se chegar ao documento index.htm, que está no mesmo diretório do documento corrente. Ou seja, "Índice" aparece em destaque (normalmente em azul) e se você clicar nessa palavra será exibido o documento apontado - index.htm

É possível interligar documentos em outro diretório especificando-se o caminho relativo a partir do documento corrente, em relação ao que está sendo interligado.
Por exemplo, um link para o arquivo link1.htm localizado no subdiretório exemplos seria assim:
<A HREF="exemplos/link1.htm"> Página Teste </A> que resulta no link Pagina Teste

Estes são dos denominados links relativos. É também possível usar o caminho completo, calculado a partir do diretório raiz do servidor, do arquivo desejado. Para isso, utiliza-se a sintaxe padrão do sistema UNIX.

Algumas regras que devem ser observadas são:

Utiliza-se a barra deitada / para separar diretórios enão a barra invertida \ usada no MS_DOS.
No DOS e no Windows 3.1 a extenção do arquivo é limitada a 3 letras, e os arquivos index.htm e index.html representam o mesmo arquivo, no Windows 95 e no Unix estes dois nomes representam arquivos diferentes.
O UNIX faz distinção entre maiúsculas e minúsculas no nome do arquivo e o arquivo index.htm é diferente do arquivo INDEX.HTM que é diferente de Index.htm

Exemplos:

Se você quiser referenciar um diretório a partir do "raiz" do seu servidor www, inicie a notação com /. Isto é, se você tiver uma notação desta forma <A HREF="/imagens/incon1.gif">, significa que o arquivo incon1.gif deverá ser buscado no diretório imagens que está imediatamente acima do diretório raiz do seu servidor WWW.

O link <A HREF="../tutorial/interlig.htm"> significa que a partir do diretório atual, volte para o diretório anterior, vá para o sub-diretório tutorial deste diretório e leia o arquivo interlig.htm.

A World Wide Web utiliza-se das Uniform Resource Locators (URLs) para especificar a localização de arquivos em servidores. Uma URL inclui o tipo de recurso acessado (p.e, gopher, WAIS), o endereço do servidor, e a localização do arquivo.

Escreve-se de acordo com o esquema abaixo:

protocolo://servidor[:port]/path/filename Onde protocolo é uma das seguintes definições

file um arquivo no seu sistema local, ou servidor de ftp

http um arquivo em um servidor World Wide Web

gopher um arquivo em um servidor Gopher

WAIS um arquivo em um servidor WAIS

news um Usenet Newsgroup

telnet uma conexão Telnet

mailto envia um email para o endereço especificado

Por exemplo, para incluir um link para o HTML Beginner’s Guide, em um documento, deve ser usado:

<A HREF="

Hidden Content

Give reaction to this post to see the hidden content.

HTMLPrimer.html"> NCSA's Beginner's Guide to HTML</A>

O que torna a sentença NCSA's Beginner's Guide to HTML um link para tal documento.

O comando <A HREF="mailto:[email protected]"> Para contactar o CDCC clique aqui</A> chama o programa de email do seu browser e envia um email para o CDCC.

O HTML permite que se façam ligações entre diferentes trechos de um documento. Você pode apontar uma palavra ou trecho de um texto utilizando uma âncora de nome (named anchor). Este recurso é bastante usado na geração de índices de conteúdo de uma página que seja muito longa.

A sequência passo a passo é :

1.Defina o "ponto de partida", atribuindo a ele um nome qualquer - no exemplo Topo -, precedido do caracter #,da seguinte forma:

Para ir para o Topo da página clique <a href="#topo"> aqui</a>

.2.Defina o "ponto de chegada", atribuindo a ele uma âncora de nome, com o nome correspondente ao do ponto de partida, assim:

O principal poder do HTML vem <a name="topo">da sua capacidade </a> de interligar ...

Para fazer links com sessões de outros documentos o processo é o mesmo da sessão anterior. Faz-se uma âncora normalmente, e apenas é acrescentado, após a url do documento de destino, o sinal # e uma palavra, ou identificador. Por exemplo:

Este é um <a href="index.htm#ultimo">link</a> para o último item do índice deste tutorial. E no arquivo index.htm criaríamos um link do tipo <a name="ultimo"> ... </a>.

Editado Abril 30, 2011 por Froostiin (veja o histórico de edições)

Froostiin · Abril 30, 2011

Para criar uma lista não numerada:

1. Comece com a marcação de início de lista: <UL>.

2. Insira a marcação <LI> antes de cada item da lista item. (Não é necessário fechar a marcação com </LI> )

3. Encerre com a marcação de fim de lista: </UL>.

Abaixo o exemplo de uma lista:

<UL>

<LI> maçãs

<LI> bananas

<LI> peras

</UL>

Vai aparecer assim:

maçãs

bananas

peras

Uma lista numerada - ou ordenada - é semelhante a uma lista não numerada, exceto porque utiliza marcação <OL> ao invés de <UL>. Os itens são identificados utilizando-se a mesma notação <LI> .

Uma lista criada assim:

<OL>

<LI> laranjas

<LI> peras

<LI> uvas

</OL>

Resulta neste formato:

laranjas

peras

uvas

Uma lista de definições normalmente consiste em alternar um termo (abreviado como DT) e uma definição (abreviado como DD). O Netscape mostra a definição em nova linha com outro alinhamento.

Exemplo de uma lista de definição:

<DL>

<DT> BANANA

<DD> Banana é uma fruta de cor amarela <DT> PERA

<DD> Pera é uma fruta de cor verde

</DL>

Será vista desta forma:

BANANA

Banana é uma fruta de cor amarela

PERA

Pera é uma fruta de cor verde

As entradas <DT> e <DD> podem conter vários parágrafos (separados por <P>), listas, ou outras definições. A marcação <DD> pode também ser utilizada, fora de uma lista de definições como se fosse uma tabulação (insere um espaço no início da frase).

Editado Maio 1, 2011 por Froostiin (veja o histórico de edições)

Entrar

Aulas de HTML

Posts Recomendados

Froostiin 48

Aulas de HTML

Link para o post

Compartilhar em outros sites

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Kaiofirma

Froostiin

Froostiin

Froostiin 48

Link para o post

Compartilhar em outros sites

Froostiin 48

Link para o post

Compartilhar em outros sites

Froostiin 48

Link para o post

Compartilhar em outros sites

Froostiin 48

Link para o post

Compartilhar em outros sites

Participe da conversa

Quem Está Navegando 0 membros estão online

Estatísticas dos Fóruns

TibiaKing

Open Tibia Server

Redes Sociais

Anuncie no TibiaKing

Fóruns

Cursos TibiaKing

Informação Importante