O que é HTML?
Se você está lendo este artigo, é claro que já deve ter uma noção lógica sobre o que é o HTML, portanto, não vamos aprofundar muito nessa parte.
HTML é a abreviação de HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto. Qualquer documento, site, blog e demais aplicações do gênero utilizam-se dos poderes do HTML para serem produzidos, não importa qual linguagem de programação o desenvolvedor optou por escolher no seu desenvolvimento.
Além do HTML em si, para fazer com que páginas da Internet tenham mais brilho e dar formato aos elementos (chamados de tags em HTML) é necessário utilizar linguagem de folhas de estilos (CSS ou Cascading Style Sheets). Por este motivo, não há como aprender HTML sem aprender CSS. Você vai ver mais sobre isso no decorrer deste curso.
Antes que você continue lendo, eu recomendo que leia mais sobre HTML e CSS para saber exatamente o que significam e para qual motivo serão utilizados.
Não será necessário procurar nada, os links abaixo irão detalhar exatamente o que acabei de pedir para você ler:
Como criar um arquivo HTML?
Na verdade é bastante simples criar um arquivo HTML, você pode fazer isso até mesmo com o bloco de notas do seu computador. Mas vamos ser mais realistas aqui, iremos utilizar o editor que a maioria dos desenvolvedores que conheço utilizam, e vai por mim, ninguém utiliza o bloco de notas para fazer um site.
O editor de textos correto
O melhor editor de textos gratuito para começar e terminar a criação do seu site é o Notepad++, então baixe e instale-o agora mesmo. Não tem segredo nenhum, simplesmente execute o instalador e vá seguindo o assistente até finalizar.
Se quiser aprimorar sua adaptação com ele, simplesmente abra-o e escreva alguma coisa, mas nem precisa, ele é apenas um pouco mais avançado do que o bloco de notas normal do seu computador.
Depois de instalar o Notepad++, digite qualquer coisa nele (qualquer coisa mesmo) e pressione CTRL + S do seu teclado para salvar.
Vai aparecer uma caixa onde você deve digitar o nome do seu arquivo, é nela que você vai definir que ele é um arquivo HTML.
Existem duas maneiras para que o Notepad++ salve seu arquivo como HTML, a primeira é colocando a extensão ".html" ao final do nome do arquivo, a segunda é selecionar a opção Hyper Text Markup Language File na opção Tipo, o que também inclui a extensão .html ao final do nome do arquivo, só que de maneira automática.
Depois disso é só escolher o local que deseja salvar seu arquivo HTML e clicar em "Salvar".
Pronto, você já criou seu primeiro arquivo HTML.
Dica: Recomendo que crie uma pasta chamada "Curso" para salvar os arquivos, posteriormente vamos criar vários outros arquivos HTML separados quando avançarmos mais nesse curso.
Editando arquivos HTML com o Notepad++
Como vamos editar nossos arquivos várias vezes, vamos ver como editá-los com o Notepad++:
- Clique com o botão direito do mouse sobre seu arquivo;
- Clique na opção "Edit with Notepad++" (Editar com o Notepad++);
E estaremos prontos para a edição.
É bastante fácil visualizar tudo o que você está fazendo no seu arquivo HTML no seu navegador de Internet favorito, basta clicar com o botão direito do mouse sobre o mesmo e selecionar a opção "Abrir com…", depois escolha o navegador que deseja.
Fazendo assim você pode fazer qualquer alteração e visualizar logo em seguida como ficou no navegador.
Estrutura de um arquivo HTML
Agora que você já sabe como criar um arquivo HTML em seu computador, vamos editar o que você já fez, portanto, abra o arquivo para edição no Notepad++ (como expliquei anteriormente) e apague tudo que está nele.
Na primeira linha do arquivo, teremos que declarar o tipo de documento que vamos criar. Isso é chamado de Doctypeou "declaração de tipo de documento".
Vamos sempre utilizar a declaração do HTML5, que é a seguinte:
1 | <!DOCTYPE html> |
Na segunda linha vamos utilizar a nossa primeira tag html, que é a tag de abertura do documento HTML:
1 2 | <html> </html> |
Tudo o que vamos criar ficará dentro das tags <html> e </html>.
Observação: Todas as tags HTML devem ser abertas e fechadas. Quando digo tag aberta, utilizamos um sinal de menor que (<), mais o nome da tag, mais um sinal de maior que (>). Para fechar tal tag, basta colocar uma barra (/) antes do nome da tag, por exemplo: <nomedatag> Qualquer coisa que vier dentro dela. </nomedatag>.
Dentro das tags da estrutura HTML temos duas partes distintas, o head (cabeçalho) e o body (corpo).
No cabeçalho teremos várias coisas que o usuário não verá (vamos falar nisso posteriormente), e no corpo vem tudo que é apresentado na tela do navegador.
O cabeçalho ficará assim:
1 2 3 | <head> Tags do cabeçalho </head> |
O corpo assim:
1 2 3 | <body> Tags do corpo </body> |
A hierarquia do documento depois de tudo o que expliquei ficou assim:
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html> <head> Tags do cabeçalho </head> <body> Tags do corpo </body> </html> |
Se você reparar, existe algo chamado indentação, ou um espaço entre a margem do documento e o início da tag. Geralmente utilizamos um tab (ou quatro espaços) para indicar que uma tag está dentro da outra. No exemplo acima,<html> é a primeira tag do documento, portanto, ela não tem indentação. Já <head> e <body> estão ambas dentro de<html> e </html>, portanto, temos uma indentação (4 espaços ou um tab). Os textos "Tags do cabeçalho" e "Tags do corpo" estão respectivamente dentro de <head> e <body>, por isso eles têm duas indentações (de <html></html> e de <head></head> ou <body></body>). E assim vamos indentando enquanto estiver uma tag dentro da outra.
As duas últimas coisas que precisamos definir em um documento HTML, é o título da página (que vai aparecer na aba do navegador) e a codificação de caracteres utilizada por ele:
Ambas as tags, de título e codificação de caracteres, ficam dentro do cabeçalho. Veja um exemplo:
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Meu arquivo HTML</title> </head> <body> Tags do atenção </body> </html> |
Na linha <meta charset="UTF-8">, estamos indicando que este é um documento com codificação de caracteres UTF-8. Isso vai mudar dependendo do modo em que você cria seus documentos, pode ser que os acentos não funcionem corretamente se você utilizar a codificação incorreta.
Na linha <title>Meu arquivo HTML</title>, estamos utilizando a tag title para escrever na aba do navegador o título "Meu arquivo HTML".
"Colinha"
Como eu disse, a estrutura básica de um documento HTML é essa:
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Título</title> </head> <body> Tags do atenção </body> </html> |
Então copie e cole isso em um arquivo HTML e salve em um local seguro. Toda vez que você for criar um documento HTML, irá utilizar essa mesma estrutura.
Claro que eu não vou deixar você sair da sua primeira aula sem passar algumas tags para que você possa praticar, então aqui vão algumas tags de texto:
Headings
Para a série de cabeçalhos de textos, temos os Headings (h1, h2, h3, h4, h5 e h6). Como são cabeçalhos de textos, é claro que deve haver algum texto no meio delas. Veja um exemplo:
1 | <h1>Este é o título do meu texto</h1> |
A numeração indica um subtítulo, subtítulo do subtítulo, e assim por diante, como é feito num texto comum, por exemplo:
1 2 3 4 | <h1>Este é o título</h1> <h2>Este é um subtítulo do título anterior</h2> <h3>Este é um subtítulo do subtítulo anterior</h3> <h1>Este é um outro título</h1> |
Por padrão, elas já vem com CSS definido por qualquer navegador, portanto, você vai ver a diferença no tamanho das letras:
Os cabeçalhos de texto são visíveis na tela do navegador, então eles devem vir dentro da tag <body>.
Parágrafo
As tags de parágrafo são as mais fáceis para ser lembradas, pois, são representadas por um <p> e fechadas com </p>. Exemplo:
1 | <p>Agora tenho um parágrafo.</p> |
Dentro das tags de parágrafo podemos utilizar várias outras tags, por exemplo, negrito, itálico, sublinhado, riscado e assim por diante, veja abaixo:
- <b> ou <strong>: negrito
- <i> ou <em>: itálico
- <u>: sublinhado
- <strike> ou <s>: riscado
Veja as tags em ação dentro do <p>:
1 2 3 4 5 | <p> Agora tenho um parágrafo. Nele tenho palavras <s>riscadas</s>, em <b>negrito</b>, <i>itálico</i> e <u>sublinhadas</u>. </p> |
Isso vai gerar isso:
Agora tenho um parágrafo. Nele tenho palavras riscadas, em negrito, itálico e sublinhadas.
Como você já deve ter imaginado, as quebras de linha não aparecem na tela do navegador, ou seja, você pode pular mil linhas, o texto sempre vai aparecer sem elas. Para quebrar linhas em HTML você tem duas opções:
- Criar outro parágrafo;
- Utilizar a tag de quebra de linha <br />;
A tag de quebra de linha (br) é um pouco diferente das tags convencionais, ela não precisa de uma tag de fechamento, com isso, a fechamos dentro dela mesmo com uma barra: <br />.
1 2 3 4 5 | <p> Agora tenho um parágrafo. <br /> Nele tenho palavras <s>riscadas</s>, <br /> em <b>negrito</b>, <i>itálico</i> e <u>sublinhadas</u>. </p> |
Agora teremos isso:
Agora tenho um parágrafo.
Nele tenho palavras riscadas,
em negrito, itálico e sublinhadas.
Agora que você viu como as tags funcionam, vou passar o código completo dos exemplos que eu estava criando para que você possa analisar. Todas as tags que estão umas dentro das outras juntamente com a estrutura HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Título</title> </head> <body> <h1>Este é o título</h1> <p> Agora tenho um parágrafo. <br /> Nele tenho palavras <s>riscadas</s>, <br /> em <b>negrito</b>, <i>itálico</i> e <u>sublinhadas</u>. </p> <h2>Este é um subtítulo do título anterior</h2> <p> Agora tenho outro parágrafo. <br /> Nele tenho palavras <s>riscadas</s>, <br /> em <b>negrito</b>, <i>itálico</i> e <u>sublinhadas</u>. </p> <h3>Este é um subtítulo do subtítulo anterior</h3> <p> Agora tenho outro parágrafo. <br /> Nele tenho palavras <s>riscadas</s>, <br /> em <b>negrito</b>, <i>itálico</i> e <u>sublinhadas</u>. </p> <h1>Este é um outro título</h1> <p> Agora tenho outro parágrafo. <br /> Nele tenho palavras <s>riscadas</s>, <br /> em <b>negrito</b>, <i>itálico</i> e <u>sublinhadas</u>. </p> </body> </html> |
Se quiser copiar e colar no seu documento, altere como preferir.
O código anterior deverá gerar isso:
Concluindo
Hoje você já viu praticamente tudo o que precisa saber para criar seu primeiro arquivo HTML:
- O que é HTML
- Instruções para seguir este curso
- Como criar um arquivo HTML
- O editor de textos correto
- Editando arquivos HTML com o Notepad++
- Como visualizar seu arquivo HTML no navegador
- Estrutura de um arquivo HTML
- Colinha
- Algumas tags HTML para praticar
- Conclusão
Agora você já pode treinar e escrever seus textos em HTML.
Créditos:
0 comentários
Postar um comentário