Este é um tutorial de HTML criado pelo desenvolvedor Bruno Back
#tutorial #html #webdesigner #frontend
Neste tutorial iremos aprender a linguagem de marcação HTML (HyperText Markup Language) utilizando a metodologia do site W3Schools como referências e nos auxiliando no desenvolvimento de uma página HTML, iremos ver de uma maneira breve o esqueleto básico para cirar uma página simples.
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 na construção de páginas na Web. Documentos HTML podem ser interpretados por navegadores. A tecnologia é fruto da junção entre os 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 hiper ligações (em inglês: hyperlink e link). 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.
A estrutura básica de um documento HTML (Hyper Text Markup Language - Linguagem de Marcação de Hypertexto), apresenta as seguintes marcações:
<!DOCTYPE html>
<html>
<head>
<title>Título da página</title>
</head>
<body>
<h1>Meu primeiro título</h1>
<p>Meu primeiro parágrafo.</p>
</body>
</html>
Você pode copiar este código HTML e colar em um bloco de notas, salvar com o nome "index.html" em uma pasta. Depois de salvar este arquivo na pasta que você criou, ao acessar esta pasta você vai notar que foi criado um arquivo index com o símbolo do seu browser (Navegador da internet) que você usa para acessar a internet. Quando você der 2 clique no index.html você vai ver a sua primeira página da internet, porém não vai estar no ar e sim vai rodar somente no seu navegador.
Para colocar no ar este arquivo você precisa hospedar ele em um servidor web. Existem várias maneiras para você publicar, você pode publicar aqui mesmo no GitHub com uma hospedagem grátis no GitHub Pages, pode se hospedar também em servidores que oferecem domínios gratuitos como WordPress.com, wix, google sites, entre outros. Mas a forma mais utilizada para hospedar um projeto de um site para fins comerciais, você precisa primeiro escolher um domínio na internet. O Domínio nada mais é que o nome do seu site.
Por exemplo:
www.meusite.com.br
Você pode comprar seu dóminio no site do registro.br
registro.br
Ao adquirir o seu domínio ".com" ou ".com.br" você precisa escolher alguma empresa de hospedagem e contratar um plano de hospedagem. Por exemplo a Hostinger, nela você pode encontrar os planos para hospedar o seu site. Ver mais sobre os planos no link abaixo:
https://hostinger.com.br?REFERRALCODE=YWY84CK17MX5
Mas isso é assunto para um outro tutorial, neste estamos falando sobre o HTML e como ele funciona.
HTML descreve a estrutura de uma página da Web que consiste em uma série de elementos, os elementos HTML informam ao navegador como exibir o conteúdo.
Um elemento HTML é definido por uma tag inicial, algum conteúdo e uma tag final:
< tagname > O conteúdo vai aqui... < /tagname >
O elemento HTML é tudo, desde a tag inicial até a tag final:
< h1 > Meu primeiro cabeçalho < /h1 >
< p > Meu primeiro parágrafo. < /p >
A <!DOCTYPE html> declaração define que este documento é um documento HTML5
O <html> elemento é o elemento raiz de uma página HTML
O <head> elemento contém meta informações sobre a página HTML
O <title> elemento especifica um título para a página HTML (que é mostrado na barra de título do navegador ou na guia da página)
O <body> elemento define o corpo do documento e é um recipiente para todos os conteúdos visíveis, como cabeçalhos, parágrafos, imagens, hiperlinks, tabelas, listas, etc.
O <h1> elemento define um título grande
O <p> elemento define um parágrafo
📚 Para que este tutorial não fique muito longo e cansativo iremos terminar por aqui, com estas informações você vai conseguir criar sua primeira página e pode treinar esta estrutura básica. No próximo tutorial falaremos de mais Tags HTML e sobre o CSS que é um mecanismo para adicionar estilos a uma página web.
Procure estudar e saber mais sobre HTML, por outras fontes para ampliar e melhorar seu conhecimento desta linguagem de marcação padrão para páginas da Web.
💬 🌟 Se você gostou deste conteúdo siga-me nas redes sociais e deixe um comentário neste tutorial, não esqueça também de marcar com uma estrelinha para me ajudar na criação de mais conteúdo como este!
