Início
Postado Sex 13 Fev 2015 - 20:49
Olá,
Trago para vocês este tutorial, é simples, mas é de boa ajuda para quem quer começar a estudar e se tornar um Web Designer.
Primeiro de tudo, o que é HTML ?
Bom, HTML é uma das linguagens que usamos para desenvolver websites, ela é a linguagem base da internet.
A estrutura do html é esta:
Para criar estruturas, utilizamos as tags. O navegador apenas a utiliza para interpretar o conteúdo, logo, não são exibidas na página.
Quase sempre as tags trabalham em dupla, uma abre e a outra fecha.
Vale lembrar, que no HTML5, o fechamento dos elementos vazios são opcionais.
O DOCTYPE define a forma que o navegador vai se comportar ao ler seu código. Essa declaração deve aparecer sempre no início de cada documento que você criar, antes até da tag html.
Existem três tipos para indicar como o documento será estruturado, o Strict, o Transitional e o Frameset.
O Strict faz com que o código siga rigorosamente, sem misturar formatação com marcação.
Já na forma Transitional o código segue na maioria das vezes o padrão, mas podem haver deslizes.
No frameset, a página é estruturada com frames.
Sem uma declaração, o layout pode ficar desconfigurado. Chamamos isso de quirks mode, que é quando o navegador interpreta ao seu modo.
É aconselhável usar o modo Strict.
No HTML 5 essa definição foi reduzida, veja abaixo:
A tag head guarda as informações gerais do site, como título e as metas.
A meta-informações é utilizadas pelos mecanismos de busca. Nele você pode incluir uma descrição, atualizar a página automaticamente (refresh), informar quem fez a página, etc.
As duas primeiras linhas tem como objetivo os buscadores. A última linha, tem como objetivo definir o tipo de conteúdo da página, que é HMTL e a codificação dos caracteres. Muitos bugs de acentuação acontecem por erro na configuração dessa linha.
Na tag body podemos definir alguns atributos, como cor do plano de fundo, cor do texto, etc. Os atributos dessa tag são:
- bgcolor: cor do plano de fundo. Deve ser usado o código hexadecimal ou o nome da cor, assim como em todos os atributos de cores.
- background: URL de uma imagem para ser usada como plano de fundo.
- link: cor natural dos links, ou seja, enquanto eles ainda não foram clicados.
- alink: cor dos links quando são clicados.
- vlink: cor dos links após serem visitados.
- text: cor do texto da página.
Uma página HTML permite que adicionemos Títulos (ou cabeçalhos) no corpo da página. Os tamanhos vão de 1 a 6.
Exemplo:
<h1> Titulo </h1>
<h2> Titulo </h2>
É possível determinar o alinhamento dele, se ele vai ficar na esquerda, no centro ou na direita.
Exemplo:
<h1 align="center"> Titulo </h1>
Quando escrevemos textos grandes, temos que dividi-lo de forma que fique organizado as informações. Para isso, podemos usar duas tags, a <p> e a <br />.
A tag <br /> quebra a linha, fazendo com que vá para a linha de baixo.
A tag <p> define um paragrafo.
Por uma questão de organização do código, deve-se usar a tag <p> no lugar das quebras de linha.
Inserir imagens em uma página é uma necessidade comum, e também é consideravelmente simples de se fazer.
Alguns tributos básicos são:
- src: Aqui você indicará o caminho completo do arquivo, incluindo a sua extensão;
- alt: é um texto alternativo, geralmente uma descrição;
- width: é a largura da imagem em pixels;
- height: é a altura da imagem em pixels.
Obs: os atributos src e alt são obrigatórios para a tag <img>, além disso, ela deve ser fechada nela mesma.
Exemplo: <img src="exemplo.gif" alt="Peixe boi" width="400" height="200" />
Nas páginas web, podemos precisar inserir links para outras páginas, como por exemplo, para uma página de contato. O HTML possui uma tag chamada de âncora que é representada por <a> que nos permite criar links adicionando o atributo href="".
Exemplo: <a href="contato.html"> Contato </a>
Em vez de escrever o nome da página, podemos inserir outras coisas, como imagens, basta você manter a ordem correta de abertura e fechamento das tag.
No atributo href="" podemos criar links para download de arquivos ou para enviar emails.
Espero que este tutorial lhe ajude a entender como o HTML funciona
Trago para vocês este tutorial, é simples, mas é de boa ajuda para quem quer começar a estudar e se tornar um Web Designer.
Primeiro de tudo, o que é HTML ?
Bom, HTML é uma das linguagens que usamos para desenvolver websites, ela é a linguagem base da internet.
A estrutura do html é esta:
- Visualizar:
<html>
<head>
</head>
<body>
</body>
</html>
Tags
Para criar estruturas, utilizamos as tags. O navegador apenas a utiliza para interpretar o conteúdo, logo, não são exibidas na página.
Quase sempre as tags trabalham em dupla, uma abre e a outra fecha.
- Exemplo:
<p>Tags</p>
- Exemplo:
<img src="exemplo.png" /> ou <br />
Vale lembrar, que no HTML5, o fechamento dos elementos vazios são opcionais.
DOCTYPE
O DOCTYPE define a forma que o navegador vai se comportar ao ler seu código. Essa declaração deve aparecer sempre no início de cada documento que você criar, antes até da tag html.
Existem três tipos para indicar como o documento será estruturado, o Strict, o Transitional e o Frameset.
O Strict faz com que o código siga rigorosamente, sem misturar formatação com marcação.
Já na forma Transitional o código segue na maioria das vezes o padrão, mas podem haver deslizes.
No frameset, a página é estruturada com frames.
Sem uma declaração, o layout pode ficar desconfigurado. Chamamos isso de quirks mode, que é quando o navegador interpreta ao seu modo.
É aconselhável usar o modo Strict.
- Exermplo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>
</body>
</html>
No HTML 5 essa definição foi reduzida, veja abaixo:
- Visualizar:
<!DOCTYPE html>
<html>
(...)
</html>
Elemento Meta do HTML
A tag head guarda as informações gerais do site, como título e as metas.
A meta-informações é utilizadas pelos mecanismos de busca. Nele você pode incluir uma descrição, atualizar a página automaticamente (refresh), informar quem fez a página, etc.
- Exemplo:
<meta name="description" content="Escreva a descrição" />
<meta name="keywords" content="palavras, chave" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /
As duas primeiras linhas tem como objetivo os buscadores. A última linha, tem como objetivo definir o tipo de conteúdo da página, que é HMTL e a codificação dos caracteres. Muitos bugs de acentuação acontecem por erro na configuração dessa linha.
Atributos da tag Body
Na tag body podemos definir alguns atributos, como cor do plano de fundo, cor do texto, etc. Os atributos dessa tag são:
- bgcolor: cor do plano de fundo. Deve ser usado o código hexadecimal ou o nome da cor, assim como em todos os atributos de cores.
- background: URL de uma imagem para ser usada como plano de fundo.
- link: cor natural dos links, ou seja, enquanto eles ainda não foram clicados.
- alink: cor dos links quando são clicados.
- vlink: cor dos links após serem visitados.
- text: cor do texto da página.
- Exemplo:
<body text=”white” bgcolor=”red” link=”blue”></body>
Cabeçalhos
Uma página HTML permite que adicionemos Títulos (ou cabeçalhos) no corpo da página. Os tamanhos vão de 1 a 6.
Exemplo:
<h1> Titulo </h1>
<h2> Titulo </h2>
É possível determinar o alinhamento dele, se ele vai ficar na esquerda, no centro ou na direita.
Exemplo:
<h1 align="center"> Titulo </h1>
Parágrafos e quebras de linha
Quando escrevemos textos grandes, temos que dividi-lo de forma que fique organizado as informações. Para isso, podemos usar duas tags, a <p> e a <br />.
A tag <br /> quebra a linha, fazendo com que vá para a linha de baixo.
A tag <p> define um paragrafo.
Por uma questão de organização do código, deve-se usar a tag <p> no lugar das quebras de linha.
Imagens
Inserir imagens em uma página é uma necessidade comum, e também é consideravelmente simples de se fazer.
Alguns tributos básicos são:
- src: Aqui você indicará o caminho completo do arquivo, incluindo a sua extensão;
- alt: é um texto alternativo, geralmente uma descrição;
- width: é a largura da imagem em pixels;
- height: é a altura da imagem em pixels.
Obs: os atributos src e alt são obrigatórios para a tag <img>, além disso, ela deve ser fechada nela mesma.
Exemplo: <img src="exemplo.gif" alt="Peixe boi" width="400" height="200" />
Links
Nas páginas web, podemos precisar inserir links para outras páginas, como por exemplo, para uma página de contato. O HTML possui uma tag chamada de âncora que é representada por <a> que nos permite criar links adicionando o atributo href="".
Exemplo: <a href="contato.html"> Contato </a>
Em vez de escrever o nome da página, podemos inserir outras coisas, como imagens, basta você manter a ordem correta de abertura e fechamento das tag.
No atributo href="" podemos criar links para download de arquivos ou para enviar emails.
Espero que este tutorial lhe ajude a entender como o HTML funciona
