Aprenda a marcação de texto HTML desde o incio!
Vou falar um pouco do que é HTML e tentar mostra como montar um site do zero, na verdade não é um site como este, apenas uma pequena página no em HTML na web ou no seu computador.
O que é HTML?
HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto
basicamente o HTML é uma linguagem de códigos que mostram informação no seu navegado, por exemplo,
vamos supor que eu tenha escrito um texto e nele colocado umas tags html para mostra palavras em negrito, itálico e sublinhadas, meu navegador vai olhar para aquele código e vai traduzir em forma de texto negrito, itálico e sublinhado na minha tela.
O que são tags?
Tags são etiquetas, são marcações de texto, por exemplo:
<b> isso é uma tag </b>, as partes em azul são tags que mostram o conteúdo vermelho em negrito, logo estou dizendo para meu navegado, mostre o que esta entre <> e </> em negrito.
isso acontece com a maioria das tags em html, na maioria vamos iniciar com <> e fechar com </>, assim dizemos que o conteúdo entre os símbolos deve ser representado de uma forma especial ou diferenciada.
Introdução a HTML
Vamos fazer nosso primeiro documento em HTML e vou falar sobre cada linha, poro favor, sei que no inicio é um pouco chato de gravar mas seja como for não use o ctrl v e ctrl c para estudar, copie no olho ditando linha por linha, só assim você consegue gravar a maioria dos código.
vamos lá
Passo 1 abra o bloco de notas, ele é o único programa que vamos usar para escrever nossos código, no futuro vamos falar sobre programas como dreamweaver mas por enquanto vamos usar o bloco de notas.
dentro do bloco de notas vamos escrever exatamente assim
<html>
<head>
</head>
<body>
</body>
</html>
na primeira linha onde esta escrito <html> estamos dizendo que queremos iniciar um arquivo HTML, e na ultima linha onde esta </html> estamos finalizado o arquivo HTML, então tudo que esta entre essas 2 linhas faz parte de uma extensão HTML.
Na segunda linha onde esta escrito <head> estamos iniciando o cabeçalho do html, o que isso quer dizer, nessa parte vamos dizer as configurações do site, por exemplo é aqui que vamos escrever o titulo do site no navegado, </head> significa que estou terminando o cabeçalho, ou seja, o fim das configurações do site.
Na linha <body> é o inicio do corpo do site, é entre <body> e </body> (costuma-se ler body e barra body) que vamos escrever o conteúdo do site, TUDO que você quiser mostrar no navegador fica entre <body> e </body>
explicados então essas tags vamos colocar algum conteúdo nelas, vamos colocar um titulo para o navegado e para a página.
<html>
<head>
<title> oi mundo </title>
</head>
<body>
<h1> oi mundo </h1>
</body>
</html>
Então entendendo que iniciamos uma coisa com <codigo> e fechamos com </codigo> tudo fica mais fácil, entendendo também que tudo que esta ente o código e o barra código sofrerá o efeito desse código facilita mais ainda.
temos 2 novas tags, a priemeira é bem simples, <title></title> dentro dessa tag nos vamos colocar o titulo da pagina no nosso exemplo eu usei a frase " oi mundo" isso quer dizer que meu navegado vai mostra o titulo da pagina lá no topo como "oi mundo"
A segundo tag é um pouco mais complexa, são as heading, tags de cabeçalho, são usadas para escrever títulos e subtítulos, mais no futuro vamos estuda-las em SEO.
As headings vão de 1 a 6 sendo o número mais o conteúdo menos importante, no exemplo estou usando a tag H1, isso que dizer que meu site possui um titulo com importância mexiam por isso deve ser mostrado como um titulo grande.
mas e agora como eu faço para visualizar meu site ou documento no meu navegador, faça o seguinte, vá em arquivos, salvar como digite o nome do seu arquivo com .html (PONTO HTML) eu sugiro criar uma pasta para organizar seus arquivos.
depois é só dar um clique duplo, o navegado vai abrir a pagina e mostrar o conteúdo da sua pagina HTML, para voltar ao código fonte basta clicar como o botão direito do mouse e abrir a pagina html com o bloco de notas.
guarde nos vamos utilizar esse arquivo em aulas futuras.
Nenhum comentário:
Postar um comentário