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="http://www.ncsa.uiuc.edu/General/Internet/WWW/ 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)

Froostiin · Abril 30, 2011

A marcação <PRE> (preformatted) delimita uma área de texto em que espaços, novas linhas e tabulações são mantidas. Ou seja, o texto será apresentado exatamente da forma como foi digitado, mesmo que não hajam marcações do html. É uma forma de se preservar o formato de um texto .

Este recurso é utilizado por exemplo para listas de programas. Vejamos um exemplo:


<PRE>

#!/bin/csh

cd $SCR

cfs get myinfile:mycfsdir/myinfile

fc -02 -o mya.out mysrc.f

mya.out

rm *

</PRE>

O resultado é o seguinte :

#!/bin/cshcd $SCRcfs get mysrc.f:mycfsdir/mysrc.ffc -02 -o mya.out mysrc.fmya.outrm *

Podem ser definidos links dentro de textos pré-formatados. No entanto, deve-se evitar utilizar outros caracteres de marcações em áreas <PRE>. Isto porque caracteres como <, >, and & possuem um significado específico no HTML. O ideal é utilizar as sequências especiais, (< > e &amp respectivamente) sempre que precisar representar esses caracteres.

O HTML permite que se apliquem estilos específicos a palavras ou sentenças, que alteram a forma como a fonte básica é apresentada na tela. Vamos ver algumas opções:

<B> texto em negrito </B> resulta em texto em negrito

<I> texto em itálico </I> resulta em texto em itálico

<TT> fonte com espaçamento fixo </TT> normalmente produz texto na fonte Courier ou equivalente.

Temos também o comando <FONT> </FONT> que permite alterar o tamanho da letra e a cor do texto. Por exemplo:

<FONT color="#ff0000" SIZE=+5 > V</FONT>eja <FONT color="#00ff00" SIZE=1 > como ficou. </FONT>

veja como ficou.

O tamanho da fonte é especificado em números de 1 (menor) até 7 (maior fonte possível) ou em números relativos (por exemplo +1 -2 +5), calculados em relação à fonte padrão do browser. O resultado destes comandos não são muito previsíveis, dependem do Browser que está sendo utilizado e da fonte padrão para a qual ele está configurado.

O método de descrição de cores do HTML consiste em indicar os valores das componentes Red, Green e Blue (RGB) em hexadecimal, variando de 00 até ff (equivalente a 255 em decimal e que seria o valor máximo desta cor). Também podemos especificar a cor pelo seu nome. Algumas cores são:

#000000 Black | #0000ff Blue

#ffffff White | #ffff00 Yellow

#ff0000 Red | #c0c0c0 Grey

#00ff00 Green | #ff7f00 Orange

Em geral, os Browsers possuem um conjunto de cores padrões para exibição da tela; são elas grey (C0C0C0) para o fundo da tela, black (00000) para texto, Blue (0000FF) para os links e purple (9900CC) para links visitados. Voce pode modificar esses valores para a sua página colocando no comando <BODY>, no início da página. Por exemplo:

<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="Pink" VLINK="#70DB93"> define uma página com fundo branco, letras pretas, links em Pink e links visitados em Aquamarine).

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

Froostiin · Abril 30, 2011

Reservado

Post para edição .

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

Kaiofirma · Abril 30, 2011

eita flood

cool · Abril 30, 2011

eita flood

Não é a primeira vez que voce posta algo desnecessário em um tópico dizendo que é flood, isso cabe aos moderadores decidirem.

Se o membro acha que deve se utilizar 15 posts no mesmo tópico é critério dele, é melhor do que espamar 15 tópicos.

Erimyth · Abril 30, 2011

eita flood

Amigo, ultima vez que chamarei sua atenção, se isso ocorrer novamente irei te suspender.

Abraços!

Froostiin · Maio 5, 2011

Desculpem não ter terminado o post , é que tava sem tempo :x mais voltei a editar agora .

jmaracaipe · Maio 5, 2011

Tem gnt ae sedento por REP+

JhonatanCWest · Maio 8, 2011

Só posta o crédito, pois este conteúdo não foi feito por você.

E outra, edita com suas palavras, porque você fez a cópia fiel do conteúdo do Autor.

Não queria ser grosso, mas na moral, odeio ripping. O trabalho suado do autor sendo usado como mérito de outros.

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

Froostiin · Maio 9, 2011

Sim, eu nao estou ripando, eu vou colocar os creditos no ultimo post, e eu estou editando um pouco o conteudo...

Em momento nenhum eu falei que eu era o criador.

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

JhonatanCWest · Maio 9, 2011

Sim, eu nao estou ripando, eu vou colocar os creditos no ultimo post, e eu estou editando um pouco o conteudo...

Em momento nenhum eu falei que eu era o criador.

Pow cara, mas fazer a cópia fiel ? Leia, entenda e logo após fale com suas próprias palavras pow será que é tão difícil isso?

Se fosse assim, era só você mandar o link da página, muito mais fácil.

Foi mal, mas se quer ganhar +REP, ao menos o meu, vai ter que fazer um trabalho SEU. Porque se fosse pra copiar conteúdos, eu trazia muita coisa da OTLand, tibiaking coisas que às vezes eu não consigo entender, ou até mesmo não li. Prefiro trazer algo que eu entenda, e possa explicar às pessoas. Com minhas palavras.

Abraços, espero ver esse tópico com suas palavras.

Link da página: http://www.cdcc.usp.br/tutorial/index.htm

Froostiin · Maio 9, 2011

Eu li o tutorial, só que eu mesmo, eu sei que eu não sou bom na edição de tópicos e também não sou bom com palavras, quando eu tiver um tempo livre eu vou editar esse topico com minhas palavras okay ? Na quinta de manha, minha vida anda mto ocupada, se eu nao tiver aula amanhã eu venho e faço .

JhonatanCWest · Maio 9, 2011

Eu li o tutorial, só que eu mesmo, eu sei que eu não sou bom na edição de tópicos e também não sou bom com palavras, quando eu tiver um tempo livre eu vou editar esse topico com minhas palavras okay ? Na quinta de manha, minha vida anda mto ocupada, se eu nao tiver aula amanhã eu venho e faço .

Beleza, quinta passo aqui pra ver se ficou bom seu tutorial..

Se salvou por causa da gostosa da assinatura xD

Entrar

Aulas de HTML

Posts Recomendados

Aulas de HTML

Link para o post

Compartilhar em outros sites

Link para o post

Compartilhar em outros sites

Link para o post

Compartilhar em outros sites

Link para o post

Compartilhar em outros sites

Link para o post

Compartilhar em outros sites

Link para o post

Compartilhar em outros sites

Link para o post

Compartilhar em outros sites

Link para o post

Compartilhar em outros sites

Link para o post

Compartilhar em outros sites

Link para o post

Compartilhar em outros sites

Link para o post

Compartilhar em outros sites

Link para o post

Compartilhar em outros sites

Link para o post

Compartilhar em outros sites

Link para o post

Compartilhar em outros sites

Link para o post

Compartilhar em outros sites

Link para o post

Compartilhar em outros sites

Link para o post

Compartilhar em outros sites

Participe da conversa

Quem Está Navegando 0 membros estão online

TibiaKing

Open Tibia Server

Redes Sociais

Anuncie no TibiaKing

Informação Importante