Ir para conteúdo

Aula 1: Conhecendo o HTML

Por Guilherme
em Tutoriais Websites

Featured Replies

Postado

Criação de Sites

#HTML

a u l a 1 - por Eratsu

Como vejo várias pessoas pedindo ajuda pra fazer seu próprio site, eu resolvi fazer algumas aulas sobre o mesmo.

Nessas aulas, iremos conhecer melhor a linguagem web (HTML) e alguns editores sobre ele.

Pra começar, o que é HTML?

HTML (abreviação para a expressão inglesa HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada para produzir páginas na Web. Documentos HTML podem ser interpretados por navegadores. A tecnologia é fruto do "casamento" dos padrões HyTime e SGML.

HyTime é um padrão para a representação estruturada de hipermídia e conteúdo baseado em tempo. Um documento é visto como um conjunto de eventos concorrentes dependentes de tempo (como áudio, vídeo, etc.), conectados por hiperligações. O padrão é independente de outros padrões de processamento de texto em geral.

SGML é um padrão de formatação de textos. Não foi desenvolvido para hipertexto, mas tornou-se conveniente para transformar documentos em hiper-objetos e para descrever as ligações.

fonte: wikipedia

Qual programa eu uso pra fazer meus sites?

Existem editores gráficos (wysywig) e editores de texto, onde ambos você pode fazer seu próprio site.

Não só eu mas como também, a maioria dos desenvolvedores de webpages, preferem utilizar editores de texto para gerar fazer nossa página.

Alguns editores:

Bloco de notas (notepad)

Wordpad

Notepad++

Dreamweaver

Word

Tecnicamente com qualquer editor de texto você pode fazer o html do seu site. Mas é claro que há uns programas próprio para isso, como o Dreamweaver. Ele é o maior e mais famoso editor web para profissionais e iniciantes, por ter um editor de texto com ajuda de uma enorme biblioteca de funções e um "editor gráfico" real.

O que são tags?

Tags de uma forma rápido e simples de explicar, são comandos utilizados para executar uma função.

Como por exemplo, mostrar uma imagem ou até mesmo negrita uma palavra/frase/texto...

Todas as tags precisam de um começo e fim, ou melhor dizendo, abrir e fechar.

As tags começam com um sinal de maior "<" e termina com o um sinal de menor ">", e dentro delas há uma função. Todas as tags deve-se abrir e fechar, como por exemplo utilizando uma função para negritar: <b>olá pessoal</b>. Utilizamos a tag b para negritar, pois b vem do ingles,bold, e que significa negrito e quase todas as tags vem de alguma palavra em ingles, como italic,center,left,right,table...

Estrutura básica de uma página



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

</head>


<body>

</body>

</html>


[/code]





[code]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
Essas tags são essenciais no codigo fonte de sua página, pois é com elas que o navegador poderá ver qual versão do HTML/xHTML que você está usando e poder "fazer" seu site funcionar corretamente quando utilizar algumas tags e css.


<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Titulo</title>

</head>

[/code]


[indent=1]

Tudo que está dentro do HEAD é a parte da cabeça do site onde ficará informações não "visíveis" sobre o seu site e algumas funções de javascript,inclusão de css e modificação do charset.

Vale lembrar que o nosso charset é [b]ISO-8859-1[/b], com isso você poderá utilizar os nossos caracteres normalmente sem aparecer nenhum erro de acentuação.



<title>titulo</title> é a parte do título do seu site (dãããã).[/indent]




[code]

<body>

</body>

</html>

Entre as tags body, ficará
TODO
o conteúdo do seu site.

E o </html> vem por último, ele irá fechar o nosso metatag que colocamos em cima do titulo.

Se você utilizar o Dreamweaver, você não precisará escrever isso, pois já vem nele como documento padrão de html.

Continua na próxima aula

hFswhf8.png

 

  • Citar
  • Mention
    • Respostas 7
    • Visualizações 956
    • Created
    • Última resposta

    Top Posters In This Topic

    Popular Days

    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.

    Conteúdo Similar

    Estatísticas dos Fóruns

    • Tópicos 96.9k
    • Posts 519.7k

    Informação Importante

    Confirmação de Termo

    I accept