Html Basico
Dissertações: Html Basico. Pesquise 860.000+ trabalhos acadêmicosPor: Jaidesonking • 21/3/2014 • 2.793 Palavras (12 Páginas) • 604 Visualizações
Este artigo trata de uma introdução ao HTML. O HTML é uma abreviação de HyperText Markup Language ou seja que em português significa, Linguagem de marcação de Hipertexto. Os arquivos HTML são interpretados pelos navegadores (browsers), portanto, caso você tenha algum arquivo HTML no computador, basta pedir que o seu navegador abra ele.
O HTML trabalha com o sistema de tags (etiquetas). Esse sistema funciona da seguinte maneira.
Ex:
1
<tag>Conteúdo da tag</tag>
Toda tag aberta, deve ser fechada, salvo raras exceções, nesses casos ela pode ser fechada da seguinte maneira:
1
</tag>
Uma tag HTML pode conter outra tag dentro dela, e quantas forem necessárias.
1
2
3
<tag>
<outraTag>texto</outraTag>
</tag>
Algumas tag's possuem propriedades que podem possuir valores. Um exemplo claro é a tag de imagem que possui o caminho da imagem.
1
<img src="caminhoImg.jpg" />
É importante seguir alguns padrões ao criar seu arquivo HTML.
- Primeiramente tente sempre que possível usar as letras em caixa baixa, ou seja, todas em minúsculo.
- Nesse artigo irei abordar somente o HTML. Antigamente os desenvolvedores personalizavam a aparência da página no próprio HTML, porém atualmente estamos fazendo isso pelo arquivo CSS. Portanto, caso gostem desse artigo, posso escrever um sobre CSS básico para personalizar uma página HTML
- O comentário em HTML é feito da seguinte maneira <!–Comentário a seguir –>
- Tente manter seu documento indentado para facilitar a manutenção. Uma tabulação com 2-4 espaços é o suficiente para ajudar na endentação do documento.
Ex:
1
2
3
<tag>
<outraTag />
</tag>
- Evitem de colocar elementos redundantes no código. Um uso comum é o de <br /> para pular linhas e definir uma altura para um elemento, enquanto o correto seria definir a altura através do Css.
- Uma página HTML tem a extensão .html, porém elas podem ser geradas dinamicamente com alguma linguagem com o PHP, ASP, PYTHON… Então em alguns casos essa extensão é alterada para a extensão da linguagem utilizada para gerar a página HTML.
Quais editores HTML usar.
Para escrever código HTML basta um simples editor de texto como o bloco de notas (notepad). Porém eu recomendo editores mais robustos para facilitar um pouco sua vida. Os principais são es seguintes:
- Sublime Text 2: Considero o melhor editor atualmente. Experimente usar a extensão Zen Coding em conjunto com ele e experimente o máximo da performance ao criar seus arquivos HTML.
- Notepad ++: Outro excelente editor. Possui uma interface simples mas é bem poderoso também.
- Dreamweaver: Um excelente editor para iniciantes. Cuidado com o modo Design. Evite de editar seu HTML por ele pois ele não gera um código muito semântico.
Vou abordar agora as principais tags HTML e explicar um pouco de seu funcionamento.
HTML – <html> </html>
Essa tag é responsável por definir o início de um documento HTML e seu fim. Logo deve ser aberta no início do documento e fechado no seu final.
HEAD – <head></head>
Tag que define o início e o fim do cabeçalho do documento. Abordaremos mais abaixo o que deve ser inserido no cabeçalho.
BODY – <body></body>
Tag onde devem ser inseridos os conteúdos do site que deverão ficar visíveis ao usuários quando a página for renderizada no navegador.
Somente com essas três tags já podemos ter uma estrutura HTML básica. Segue um exemplo.
1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
<!--conteudo do head-->
</head>
<body>
<!--conteudo do body-->
</body>
</html>
O <!DOCTYPE html> inserido antes da tag <html> no exemplo anterior é para especificar para o navegador o tipo de página HTML que ele vai renderizar. Existem diferentes tipos de HTML usados atualmente porém os mais usados são o HTML 5, cujo doctype especificado é o que eu utilizei no exemplo, o HTML 4.1 e o XHTML. Nos últimos dois exemplos o doctype é um pouco mais complexo, trazendo informações sobre o tipo de documento (Strict, transitional e frameset). Porém recomendo que sempre utilizem o doctype do HTML 5, pois ele é mais enxuto e mesmo que não utilize HTML 5 em sua página não vai prejudicar em nada a renderização da página pelo browser.
Cabeçalho <head>
No cabeçalho trazemos informações que serão usadas pelo navegador como:
TITLE – <title>Sou o título da página</title>
Título da página a ser exibido (texto que fica na aba de seu navegador quando uma página esta aberta)
LINK – <link
...