Hello world: Começando do começo
#html
Por Rafael Estevam
Criado em 12/04/2024
Como já explicado em um post anterior, o front-end possui um conjunto de conhecimentos mandatórios que são usado em todos os projetos existentes. Esses pilares são fundamentais para se contruir interfaces de aplicações web/sites/e-coomerces. Não existe substituto de tecnologia para esses três pilares (até onde eu saiba), no máximo, o que existe é um conjunto de ferramentas que, no fim das contas, resultará numa estrutura com HTML, CSS e Javascript.
Com isso em mente, vamos construir uma página para iniciarmos uma introdução a esses 3 pilares do front-end. O objetivo final é desenvolver uma landing page usando HTML, CSS e Javascript, passando por alguns pontos do desenvolvimento e dando um primeiro passo rumo a especialização em Front-end.
Começando pelo HTML
O HTML (Linguagem de marcação de hipertexto) possui um conjunto de tags que servem para "dizer" aos navegadores como o conteúdo deve ser exibido em sua interface.
Existem inúmeras tags HTML, cada um com um propósito específico e, as vezes, elas podem causar bastante confusão nisso. Mas não se preocupe, no começo o mais importante é entender a estrutura do HTML e não sua semântica, ou a forma mais correta de se fazer um HTML.
Abaixo há um pequeno exemplo da estrutura mais básica de uma página em HTML.
<html>
<head>
<title>Meu primeiro HTML</title>
</head>
<body>
<h1>Olá mundo</h1>
<p>Meu primeiro site com HTML</p>
</body>
</html>Cada tag possui sua tag de abertura e fechamento, dessa forma dizemos ao navegador como um conteúdo deverá começar a ser exibido de um jeito, e quando ele deve terminar.
Note que o título "Olá mundo" está encapsulado por uma tag <h1> e seu fechamento </h1>. Isso diz ao navegador que somente o trecho "Olá mundo" deve ser exibido como um título. A mesma coisa vale para a frase "Meu primeiro site com HTML". Somente essa sentença será exibida como um parágrafo (<p>) na página. Partindo desse princípio, todas as tags HTML (bom, pelo menos 95% delas) vão possuir sua tag de abertura e sua respectiva tag de fechamento.
Para ver o resultado do código acima, basta copiar o código e salvar no bloco de notas como um arquivo .html.
O resultado deve ser este (ou algo muito parecido):
Para testar, basta abrir o arquivo .html em seu navegador.
HTML, a estrutura da sua casa na internet
O HTML é a estrutura da sua casa na internet e, a princípio, ele vai construir uma tela bastante rudimentar, sem personalidade e sem qualquer atrativo para segurar um usuário na sua página na internet. Além disso, somente com as tags que usei acima não são o suficiente para construir um site na internet. É necessário saber uma infinidade de tags para se fazer isso.
Sendo assim, existe uma forma de se entender as tags HTML, cujo o propósito varia de tag para tag. Podemos entender as tags HTML da seguinte forma:
- Tags de Estruturação: Estas são as tags básicas usadas para estruturar o conteúdo de uma página HTML.
- Exemplos:
<html></html>,<head></head>,<title></title>,<body></body>,<header></header>,<footer></footer>,<nav></nav>,<section></section>,<article></article>,<main></main>,<div></div>, etc.
- Tags de Texto: São usadas para exibir texto na página.
- Exemplos:
<p></p>,<h1></h1>,<h2></h2>,<h3></h3>,<h4></h4>, etc.
- Tags de Lista: Usadas para criar listas ordenadas ou não ordenadas.
- Exemplos:
<ul></ul>,<ol></ol>,<li></li>, etc.
- Tags de Link e Mídia: Utilizadas para incluir conteúdo externo ou linkar para outras páginas.
- Exemplos:
<a></a>,<img />,<video></video>,<audio></audio>,<iframe/>, etc.
- Tags de Formulário: São usadas para criar formulários interativos.
- Exemplos:
<form></form>,<input/>,<textarea></textarea>,<select></select>,<button></button>, etc.
- Tags Semânticas: Introduzidas em HTML5 para fornecer significado semântico ao conteúdo da página.
- Exemplos:
<header></header>,<footer></footer>,<nav></nav>,<article></article>,<section></section>, etc.
- Tags de Tabela: Utilizadas para criar tabelas de dados.
- Exemplos:
<table></table>,<tr></tr>,<td></td>,<th><th>,<thead></thead>, etc.
- Tags de Meta Informação: São usadas para fornecer informações adicionais sobre a página.
- Exemplos:
<meta/>,<link/>, etc.
Esses são só alguns exemplos de tags HTML existentes. Como o objetivo dessa série de artigos é entregar um primeiro site desenvolvido, irei focar somente nas tags que usarei ao longo desse projeto.
Evoluindo com a obra da nossa casa
Entendido o conceito sobre a estrutura do HTML e seus diferentes tipos de tags, vamos adicionar mais coisa a nossa página.
Aqui a página irá receber uma série de conteúdos para simular uma página em HTML. A página irá apresentar mais complexidade e vai parecer mais com um conjunto de textos aleatórios.
<html>
<head>
<title>Meu primeiro HTML</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Página Inicial</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h1>Meu Site</h1>
<div>
<img src="https://media.graphassets.com/J4Y6jMSRQYWLRY6zOSnr" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nibh turpis, malesuada volutpat magna ut, luctus tempus erat. Quisque ac nisl efficitur, sagittis ipsum sit amet, posuere ipsum. Nullam eu maximus ante, a feugiat ligula. Nullam sed viverra quam. Ut fringilla id ipsum nec accumsan. Integer et scelerisque libero. Aliquam elit tortor, accumsan non dapibus sit amet, ornare quis tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nam consectetur tellus sed fringilla tristique. Aliquam congue felis a risus fermentum finibus. Quisque quis enim arcu. Nullam risus diam, imperdiet non eros eget, mollis feugiat leo.</p>
</div>
</section>
<section id="sobre">
<h2>Seção 3</h2>
<div>
<img src="https://media.graphassets.com/J4Y6jMSRQYWLRY6zOSnr" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nibh turpis, malesuada volutpat magna ut, luctus tempus erat. Quisque ac nisl efficitur, sagittis ipsum sit amet, posuere ipsum. Nullam eu maximus ante, a feugiat ligula. Nullam sed viverra quam. Ut fringilla id ipsum nec accumsan. Integer et scelerisque libero. Aliquam elit tortor, accumsan non dapibus sit amet, ornare quis tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nam consectetur tellus sed fringilla tristique. Aliquam congue felis a risus fermentum finibus. Quisque quis enim arcu. Nullam risus diam, imperdiet non eros eget, mollis feugiat leo.</p>
</div>
</section>
<section id="contato">
<h2>Seção 3</h2>
<div>
<img src="https://media.graphassets.com/J4Y6jMSRQYWLRY6zOSnr" />
<form>
<input placeholder="nome" />
<input placeholder="email" type="email" />
<button type="submit">Enviar</button>
</form>
</div>
</section>
</main>
<footer>
<p>© 2024 Meu Site</p>
</footer>
</body>
</html>Para testar o código, basta sobreescrever o código anterior, salvar, e abrir o arquivo .html no seu navegador. O Resultado deve ser parecido com este abaixo:
Neste ponto, já temos uma página mais interessante, com um conteúdo mais completo e significativo.
Nessa nova versão, é possível notar que algumas tags possuem algumas "configurações". Essas configurações são chamadas de ATRIBUTOS e podem servir para determinar comportamentos, visual, informações adicionais a respeito de uma tag e servem para dizer ao navegador como uma determinada tag pode se comportar.
Por exemplo... A tag <a> serve para criar links para páginas internas/externas e também para ancorar algum conteúdo específico da página. Ela possui um atributo chamado "href", que está recebendo o valor de #. Esse atributo serve para determinar qual o enderço na internet que o usuário irá acessar quando ele clicar no link.
Portanto, existem muitas maneiras pelas quais os atributos podem ser usados em tags HTML para controlar e modificar o comportamento e a aparência do conteúdo da página da web e cada tag HTML tem seu próprio conjunto de atributos.
Os atributos das tags HTML são extremamente importantes no desenvolvimento do HTML. Sem o uso delas, as tags não irão funcionar da forma esperada, já que o navegador não saberá qual pode ser o comportamento de uma determinada tag.
Concluida a obra da nossa casa, e agora?
Aqui, concluimos a primeira parte desse mini-projeto.
Esse é um primeiro exemplo de página web, porêm ainda falta deixar ela mais atraente e programar as funcionalidades dela.
O HTML, por si só, não é capaz de exibir um conteúdo de forma atraente e nem de agregar funcionalidades a página. Aqui, nossa página não passa de uma simples página de texto, entretanto, sabendo que essa é só a base da landing page, podemos partir para os próximos passos, que são a adição do CSS (acabamentos) e Javascript (Luz, água, etc...)
Só por curiosidade...
Este é o primeiro site da internet, perceba como ele está muito parecido com o exemplo desenvolvido nesse artigo.
