Partindo da base do desenvolvimento web, o HTML é um conteúdo obrigatório. Saber o HTML básico vai com certeza te ajudar, independente se você usar frameworks ou não, a estrutura básica não muda. Uma vez que você aprender, você pode utilizar em todos os seus projetos web.
HTML significa Hyper Text Markup Language (Linguagem de marcação de texto Hyper)
Ele descreve a estrutura de uma página da Web que é composto por uma série de elementos. Elementos são representados por tags que dizem ao navegador como exibir o conteúdo
Tags rotulam trechos de conteúdo, tais como “heading”, “paragraph”, “table”. Os navegadores não exibem as tags HTML, mas utilizam-nas para renderizar o conteúdo da página.
Um código HTML básico:
<!DOCTYPE html>
<html>
<head>
<title>Titulo da pagina</title>
</head>
<body>
<h1>Titulo do texto</h1>
<p>Paragrafo</p>
</body>
</html>
Explicando o exemplo:
<!DOCTYPE html> define este documento como sendo HTML5<html> é o elemento raiz de uma página HTML<head> contém meta informação sobre o documento<title> especifica um título para o documento<body> contém o conteúdo visível da página<h1> define um cabeçalho grande<p> define um parágrafoAs tags HTML são nomes de elementos dentro dos símbolos < >, por exemplo:
<tagname>conteúdo aqui…</tagname>
As tags HTML normalmente vêm em pares como <p> e </p>. A primeira tag de um par é a tag de início, a segunda tag é a tag de fim. A tag final é escrita como a tag inicial, mas com uma barra inserida antes do nome da tag.
Apenas o conteúdo dentro das tags <body> é exibido no seu navegador.
Para criar uma página HTML você pode utilizar basicamente qualquer editor de texto que você goste. Para os nossos exemplos a seguir vou utilizar o VisualStudio Code (VS Code), que é o um editor de texto gratuito, com muitas funcionalidades mas ao mesmo tempo fácil de usar.
Faça o download do VS Code. Basta acessar esse link, e fazer o download para a sua versão do sistema operacional, ele está disponível para Linux Windows e Mac.
Depois é só instalar, naquele estilo, “next, next, next…”, done.
Depois de instalado, basta executar o VS Code, e você vai ver uma tela parecida com essa aqui abaixo. Agora só clicar em “new file” ou “novo arquivo” para começar.
Definir o tipo de arquivo para HTML.
Digite o código que criamos lá em cima, e salve o arquivo como index.html.
Se você abrir o seu arquivo no seu browser, você vai um resultado parecido com esse.
Vamos introduzir aqui os mais elementos HTML básicos. Com eles você já será capaz de criar uma pagina web simples, mas completamente funcional. Vamos introduzir mais tarde o CSS, para aplicar estilos a sua página.
A tag <div> define uma divisão ou uma seção em um documento HTML. ela é usada como um container para elementos HTML – que pode ser estilizado com CSS ou manipulado com JavaScript.
A tag <div> é facilmente estilizada usando o atributo class ou id e qualquer tipo de conteúdo pode ser colocado dentro da tag <div>.
<div>
<h1>Titulo do texto</h1>
<p>Paragrafo</p>
</div>
Esse elemento HTML básico, é extremamente útil para separar conteúdos relacionados em blocos
As tags <h1> a <h6> são usadas para definir os cabeçalhos HTML.
<h1> define o cabeçalho mais importante. <h6> define o cabeçalho menos importante.
<div>
<h1>Titulo do texto 1</h1>
<h2>Titulo do texto 2</h2>
<h3>Titulo do texto 3</h3>
<h4>Titulo do texto 4</h4>
<h5>Titulo do texto 5</h5>
<h6>Titulo do texto 6</h6>
</div>
As tags de cabeçalho são geralmente utilizadas para dar ênfase a algum texto da sua página, geralmente títulos. O Google usa essa tag para descobrir quais são os assuntos tratados pelo seu artigo.
Você pode reduzir o tamanho da fonte e alterar o estilo do texto sem prejudicar o rastreamento da tag.
Uma lista não ordenada começa com a tag <ul>. Cada item da lista começa com a tag <li>.
Os itens da lista serão marcados com pequenos círculos pretos por padrão:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Existe uma infinidade de possibilidades para aplicar essa estrutura. Elas ajudam ao leitor encontrar uma informação especifica dentro do seu texto mais eficientemente, por exemplo.
Uma lista ordenada começa com a tag <ol>. Cada item da lista começa com a tag <li>.
Os itens da lista serão marcados com números por padrão:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Você pode utilizar essa lista para enumerar um passo a passo para a ser seguido pelo usuário.
O HTML também suporta listas de descrição.
Uma lista de descrição é uma lista de termos, com uma descrição de cada termo.
A tag <dl> define a lista de descrição, a tag <dt> define o termo (nome), e a tag <dd> descreve cada termo:
<dl>
<dt>Html</dt>
<dd>- Hyper Text Markup Language</dd>
<dt>CSS</dt>
<dd>- Cascading Style Sheets</dd>
</dl>
Essa lista é especialmente útil quando você tem palavras ou frases que precisam de uma breve explicação.
O elemento <button> é usado para criar um botão HTML. Qualquer texto que apareça entre as tags de abertura e fechamento aparecerá como texto no botão. Nenhuma ação ocorre por padrão quando um botão é clicado. As ações devem ser adicionadas aos botões usando JavaScript ou associando o botão a um formulário.
<button type="button">Click</button>
Botões são amplamente utilizados para as mais diversas funções. Você pode submeter formulários, carregar dados do servidor, abrir um menu, esconder elementos na tela, etc.
Em HTML, as imagens são definidas com a tag <img>. Essa tag, diferentemente das outras que vimos até aqui, ela é vazia (não recebe nenhum conteúdo entre as tags), ou seja contém apenas atributos e não possui uma tag de fechamento.
O atributo src especifica a URL (endereço web) da imagem
<img src="https://picsum.photos/200/300">
O atributo alt fornece um texto alternativo para uma imagem, se o usuário por algum motivo não puder visualizá-la (por causa de conexão lenta, um erro no atributo src, ou se o usuário usar um leitor de tela).
O valor do atributo alt deve descrever a imagem:
<img src="https://picsum.photos/200/300" alt="Imagem carregda pela api">
Você pode usar os atributos width e height para especificar a largura e a altura de uma imagem.
<img src="https://picsum.photos/200/300" alt="Imagem carregda pela api" width="100px" height="100px">
Resultado:
<a>Essa tag cria um link entre a página que você está navegando e uma segunda página. Você pode navegar entre quaisquer páginas do seu projeto utilizando essa tag.
<a href="http://example.com">
Link!
</a>
Um link não precisa ser um texto. Ele pode ser uma imagem ou qualquer outro elemento HTML. Basta inserir o elemento que você quer que vire clicavél dentro da tag <a>
<a href="http://example.com">
<img src="https://picsum.photos/200/300" alt="Imagem carregda pela api" width="100px" height="100px">
</a>
Você pode criar links com basicamente qualquer elemento HTML básico. Items de uma lista, células de uma tabela, títulos do texto, ou até mesmo uma parágrafo inteiro.
<table>Uma tabela HTML é definida com um conjunto de tags.
<table> define uma tabela HTML<tr> define uma linha na tabela<th> define um cabeçalho na tabela<td> define uma célula da tabela<table>
<tr>
<th>Id</th>
<th>User</th>
</tr>
<tr>
<td>12</td>
<td>Jonh_doe</td>
</tr>
<tr>
<td>14</td>
<td>Janice_doe</td>
</tr>
</table>
Essa é uma tabela simples. Existem outras tags que você pode incluir para criar uma tabela ainda mais customizada, como <tbody>, <thead> e <tfooter>.
Um formulário HTML é usado para coletar dados do usuário. Os dados do são geralmente enviados para o servidor para serem processados. Eu fui mais a fundo nesse assunto mostrando como construir uma página de login do zero.
A tag <form> é responsável por agrupar e organizar os dados que serão coletados em um única estrutura. Mas para efetivamente, para coletar os dados, você vai precisar de outras tags como <input>, <select>, <textarea>, etc.
A tag <input>, por exemplo, trás um grande variedade de tipos (mais de 20), para trabalhar.
<form>
<label for="nome">Nome:</label><br>
<input type="text" id="nome" name="nome"><br>
<label for="senha">Senha:</label><br>
<input type="password" id="senha" name="senha">
</form>
Formulários são estruturas que vão aparecer em alguma parte do seu projeto. Se o seu usuário precisa fazer login para acessar a sua plataforma, é bem provável que uma formulário seja a primeira coisa que ele vai ver.
Essa tag define um link entre uma página e um recurso externo. Para essa tag o recurso externo são arquivos CSS. Essa também é uma tag vazia, ou seja não recebe dados entre as tags e por conta disso, também não tem tag de fechamento.
Um importante detalhe dessa tag é que ela deve ser inserida entre as tag <head></head> e não entre as tags <body></body>.
<head>
<link rel="stylesheet" href="style.css">
<title>Titulo da pagina</title>
</head>
O atributo rel é necessário pois ele especifica a relação entre o documento atual e o documento/recurso vinculado.
A tag <style> é usada para definir informações de estilo para uma página HTML.
Dentro do elemento <style> você especifica os estilos para os elementos HTML da sua página, utilizando CSS.
<head>
<title>Titulo da pagina</title>
<style>
body{
background-color: #e2e2e2;
}
</style>
</head>
Utilizar a tag style é aceitável se o seu arquivo conter poucos estilos CSS, do contrário, utilize a tag <link> para acessar um arquivo externo.
A tag <script> é usada para definir um script Javascript.
O elemento <script> contém instruções Javascript, ou aponta para um arquivo de Javascript externo através do atributo src.
A tag <script> pode ser inserida tanto entre as tags <body></body> quando entre as tags <head></head>.
<body>
<div>
<form>
<label for="fname">Nome:</label><br>
<input type="text" id="nome" name="nome"><br>
<label for="lname">Senha:</label><br>
<input type="password" id="senha" name="senha">
</form>
</div>
<script src="script.js"></script>
<script>
const alerta = () => {
alert("Script Javascript");
}
alerta();
</script>
</body>
Inserir seus scripts Javascript ao final da tag <body> é uma boa prática, porque muitas vezes o carregamento de um script pode atrasar o carregamento da página, diminuindo a experiencia do usuário.
Com essa introdução ao HTML básico, você já consegue criar paginas web simples, mas completamente funcionais.
Basta dedicar alguns horas todos os dias, praticando e testando novos layouts. O exemplos que você viu aqui você vai ver novamente, independe de qual framework front end você for utilizar, o HTML básico não muda. Para a nossa sorte.
Se você acha que alguma tag importante ficou de fora, deixe nos comentários.
Te vejo na próxima.
Deixe um comentário