Ir para conteúdo

Aulas de HTML

Por Froostiin
em Tutoriais Websites

Featured Replies

Postado

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 .

Att ,

Froostiin

10ndx6q.png

-

2k0b39.png

-

25501up.png

Thx , Kamikaze for set design

Friend List :

EdsonJunior

aLD~

Cool

Robson Venturin

Kamikaze

MegaNo0body

Renato Ribeiro

Matheus

Lucas S.

  • Citar
  • Mention
    • Respostas 16
    • Visualizações 1.7k
    • Created
    • Última resposta

    Top Posters In This Topic

    Popular Days

    Most Popular Posts

    • Kaiofirma
      Kaiofirma

      eita flood

    • Froostiin
      Froostiin

      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).

    • Froostiin
      Froostiin

      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&

    Postado
    • Autor

    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 por Froostiin (veja o histórico de edições)

    Att ,

    Froostiin

    10ndx6q.png

    -

    2k0b39.png

    -

    25501up.png

    Thx , Kamikaze for set design

    Friend List :

    EdsonJunior

    aLD~

    Cool

    Robson Venturin

    Kamikaze

    MegaNo0body

    Renato Ribeiro

    Matheus

    Lucas S.

  • Citar
  • Mention
    • Postado
    • Autor

    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 por Froostiin (veja o histórico de edições)

    Att ,

    Froostiin

    10ndx6q.png

    -

    2k0b39.png

    -

    25501up.png

    Thx , Kamikaze for set design

    Friend List :

    EdsonJunior

    aLD~

    Cool

    Robson Venturin

    Kamikaze

    MegaNo0body

    Renato Ribeiro

    Matheus

    Lucas S.

  • Citar
  • Mention
    • Postado
    • Autor

    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 por Froostiin (veja o histórico de edições)

    Att ,

    Froostiin

    10ndx6q.png

    -

    2k0b39.png

    -

    25501up.png

    Thx , Kamikaze for set design

    Friend List :

    EdsonJunior

    aLD~

    Cool

    Robson Venturin

    Kamikaze

    MegaNo0body

    Renato Ribeiro

    Matheus

    Lucas S.

  • Citar
  • Mention
    • Postado
    • Autor

    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:

    1. laranjas
    2. peras
    3. 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 por Froostiin (veja o histórico de edições)

    Att ,

    Froostiin

    10ndx6q.png

    -

    2k0b39.png

    -

    25501up.png

    Thx , Kamikaze for set design

    Friend List :

    EdsonJunior

    aLD~

    Cool

    Robson Venturin

    Kamikaze

    MegaNo0body

    Renato Ribeiro

    Matheus

    Lucas S.

  • Citar
  • Mention

    • Participe da conversa

    Você pode postar agora e se cadastrar mais tarde. Se você tem uma conta, faça o login para postar com sua conta.

    Visitante
    Responder
    Ir para a lista de tópicos

    Quem Está Navegando 0

    • Nenhum usuário registrado visualizando esta página.

    Estatísticas dos Fóruns

    • Tópicos 96.9k
    • Posts 519.7k

    Informação Importante

    Confirmação de Termo

    I accept