Estruturação Web

Aprenda a montar a base das páginas com HTML

O que é HTML?

HTML (HyperText Markup Language) é uma linguagem de marcação usada para apresentar informação na Web usando o protocolo HTTP

Estrutura de uma página Web

<html>

<head>

<title> page title </title>

<body>

<h1>this is heading</h1>

<p>this is paragraph</p>

<p>this is another paragraph</p>

O que é uma linguagem de marcação?

Uma linguagem de marcação é um conjunto de códigos aplicados a um texto ou a dados, a fim de adicionar informações particulares sobre esse texto ou dado, ou sobre trechos específicos

Tags

  • O HTML utiliza etiquetas, marcações que são conhecidas como Tags, que consistem em breves instruções tendo uma marca de início e outra de fim
  • Estas tags determinam a formatação do texto, imagens e demais elementos que compõem uma página HTML.
  • Em HTML as tags iniciam com símbolo < e terminam com o símbolo />

Estrutura de um elemento HTML

<element name (start tag)>
Content of Element
</element name (closing tag)>

<element name attribute name = "value" (attribute)>
Content of Element
</element name>

Tags Básicas

  • <html>: Define o início de um documento HTML e indica ao navegador que todo conteúdo posterior deve ser tratado como uma série de códigos HTML
  • <head>: Define o cabeçalho de um documento HTML. Este cabeçalho traz informações sobre o documento que está sendo aberto. Local em que são listados metadados (dados que povêem infos s/ outros dados). Informação oculta para a tela do usuário, mas reconhecida pelo navegador
  • <body>: Define o conteúdo principal, o corpo do documento. Esta é a parte do documento HTML que é exibida no navegador. No corpo podem-se definir propriedades comuns a toda a página, como cor de fundo, margens, entre outras formatações

Cabeçalho

Dentro do cabeçalho (tag "<head>") podemos encontrar:

  • <title>: Define o título da página, que é exibido na barra de título dos browsers
  • <style>: Define formatação em CSS
  • <script>: Define programação de certas funções em página com scripts, e pode colocar funções de JavaScript
  • <link>:Define ligações da página com outros arquivos como feeds, CSS, scripts etc
  • <meta>: Define propriedades da página, como codificação de caracteres, descrição da página, autor etc
  • <base>: Define endereço de referência (base) para a utilização de caminhos com endereçamento relativo no documento html

Exemplos

<head>
<link rel="stylesheet" href="./style.css">
</head>

<head>
<base href="./assets/" target="_blank">
</head>
<body>
<img src="random.png">
</body>

Novas Tags de Seções

<body>

<header>

<nav>

<aside>

<main>

<section>

<article>

<article>

<aside>

<footer>

Detalhamento das Tags de Seção

  • <header>: Representa o cabeçalho de uma página ou de uma seção e normalmente contém um conjunto de elementos introdutórios ou de navegação, como títulos, logos e menus.
  • <footer>: Serve para o rodapé de uma página ou seção e frequentemente contém informações de autoria, links relacionados, informações de contato e direitos autorais.
  • <nav>: Destina-se à navegação principal e é usada para agrupar os principais links de navegação. Embora uma página possa conter múltiplos elementos, normalmente um é destinado à navegação principal.
  • <main>: Especifica o conteúdo principal de uma página e deve conter o conteúdo único que não se repete em outras páginas do site. Esse elemento ajuda os leitores de tela e os mecanismos de busca a entender rapidamente qual é o conteúdo principal de uma página.
  • <section>: Define uma seção dentro de um documento e é usada para agrupar conteúdos temáticos que, geralmente, têm um título associado. Serve para organizar o conteúdo em partes lógicas e pode ser utilizada para segmentar grandes artigos, capítulos, etc.
  • <article>: Especifica um conteúdo autônomo, que poderia ser distribuído independentemente do resto do site. Exemplos incluem um post de blog, um comentário de usuário ou qualquer outro item que se destine a ser sindicado
  • <aside>: Indica que o conteúdo é tangencialmente relacionado ao conteúdo ao redor dele, que pode ser considerado separado do conteúdo principal. É frequentemente usado para barras laterais, chamadas à ação, ou para inserir conteúdo relacionado.

Corpo

Dentro do corpo (tag "<body>") podemos encontrar diversas outras tags, como por exemplo:

  • <h1>,<h3>,... <h6>: Cabeçalhos e títulos no documento em diversos tamanhos
  • <p>: Novo parágrafo
  • <br/>: Quebra de linha
  • <table>: Cria uma tabela (linhas são criadas com <tr> e novas células com <tr>)
  • <div>: Determina uma divisão na página
  • <img>: Imagem
  • <a>: Hiperlink para uma página, ou para um endereço de e-mail
  • <button>: Cria um botão

Formatação de Texto

  • <b>...</b>: Aplica o estilo negrito
  • <i>...</i>: Aplica o estilo itálico
  • <u>...</u>: Aplica o estilo sublinhado
  • <sup>...</sup>: Faz com que o texto fique sobrescrito
  • <sub>...</sub>: Faz com que o texto fique subscrito
  • <pre>...</pre>: Utiliza a pré-formatação, ou seja, deixa o texto da maneira em que foi digitado

Exemplos

<b><i><u>Negrito Itálico Sublin.</b></i></u>

Negrito Itálico Sublin.

<p>Quebra de Linha <br/> Outra Linha</p>

Quebra de Linha
Outra Linha

<p>Linha Horizontal</p> <hr>

Linha Horizontal

<p>The 21<sup>st</sup> century is from 2001 to 2010.</p>

The 21st century is from 2001 to 2010.

Citação

O elemento HTML <blockquote> indica que texto incluído é uma longa citação. Normalmente, este é processado visualmente pelo recuo. A URL para a fonte da citação pode ser dada usando o atributo "cite" (é oculto para o leitor), enquanto uma representação de texto da fonte pode ser dada usando o <cite> elemento. Enquanto que para citações curtas, use o elemento <q>.

<blockquote cite= "https://www.unknown.com">
<p>Uma citação bem extensa.</p>
</blockquote>

<p>Como dizia <cite>alguém sábio</cite>, <q>uma citação curta</q>.</p>

Como dizia alguém sábio, uma citação curta.

Provendo Informações Ocultas/Adicionais

O elemento HTML <details> é usado como uma ferramenta de onde o usuário irá obter informações adicionais, seguido pelo elemento <summary>, o qual é utilizado como um sumário ou legenda para o conteúdo do primeiro elemento.

<details>
<summary>Aqui tem mais infos</summary>
<p>mais infos</p>
</details>

Aqui tem mais infos

mais infos

Tags Semânticas de Formatação

  • <mark>: Aplica um highlight no texto
  • <em>: Formata um texto com ênfase
  • <small>: Formata um texto com fonte pequena
  • <strong>: Formata um texto com destaque
  • <del>: Formata um texto anulado

Imagens

  • Os formatos mais usados são o PNG e o JPG, ambos com compactação de pixels.
  • Para referências locais, os arquivos com as imagens deverão estar armazenados no seu Provedor de Acesso, juntamente com o documento HTML.
  • Para inserir uma imagem, uso o tag: <img>, que é único, não exigindo um tag finalizado.

<img src="imagem.png"/>

  • O elemento <figure> HTML representa conteúdo autocontido, potencialmente com uma legenda opcional, que é especificada usando o <figcaption> lemento. A figura, sua legenda e seu conteúdo são referenciados como uma única unidade (exibir imagens de qualquer tipo de forma semântica).

<figue>
<img src="flower.png" alt="buquê de flores genéricas em preto e branco"/>
<figcaption>um buquê de flores bem triste</figcaption>
</figure>

buquê de flores genéricas em preto e branco
Um buquê de flores bem triste
  • O atributo alt descreve a imagem, seja para um leitor de telas (acessibilidade), seja para o navegador exibir a descrição da imagem quando ela não for corretamente carregada.
  • Quando o alt estiver vazio, um leitor de tela narrará o nome do arquivo da imagem, o que pode não ser algo muito intuitivo.

Listas Ordenadas

  • Listas ordenadas são também denominadas listas numeradas, pois, quando um navegador encontra uma tag iniciando uma lista ordenada, ele passa a mostrar cada item utilizando números, como 1, 2, 3, e assim sucessivamente.

<ol>
<li>primeiro item</li>
<li>segundo item</li>
<li>terceiro item</li>
</ol>

  • Listas ordenadas podem receber atributos, como start e type.

<ol start="4">
<li>quarto item</li>
<li>quinto item</li>
</ol>

  1. quarto item
  2. quinto item

Valores para o atributo type:

  • 1: Utiliza números arábicos para a listagem (padrão). Exemplo: 1, 2, 3.
  • A: Utiliza letras maiúsculas para a listagem. Exemplo: A, B, C.
  • a: Utiliza letras minúsculas para a listagem. Exemplo: a, b, c.
  • I: Utiliza números romanos em maiúsculas para a listagem. Exemplo: I, II, III.
  • i: Utiliza números romanos em minúsculas para a listagem. Exemplo: i, ii, iii.

<ol type="a">
<li>item a</li>
<li>item b</li>
<li>item c</li>
</ol>

Lista Não Ordenadas

  • Listas não ordenadas são muito parecidas com as ordenadas. A única diferença é o fato de elas não definirem explicitamente uma ordem, como é no caso as numeradas.
  • Eles são formados por símbolos, que podem ser bola, quadrado, e uma bola vazia. Essa personalização é possível com o uso da propriedade "list-style-type" no CSS.

<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>

Lista de Definição

  • Composta por termos e suas respectivas definições

<dl>
<dt>the first item</dt>
<dd>first term definition</dd>
</dl>

Links

Os links servem para criar termos que permitem a interligação entre documentos HTML locais, externos, a outros arquivos, e-mails e partes diferentes de documentos HTML.

  • Links Internos: Direcionam o usuário para outra página ou recurso dentro do mesmo site. São fundamentais para a navegação interna e a estrutura SEO de um site.
  • Links Externos: : Levam o usuário para um site ou recurso fora do domínio atual. São úteis para fornecer referências ou direcionar usuários para recursos adicionais.
  • Links de Âncora: Permitem a navegação para uma seção específica dentro de uma página, usando o atributo href com um identificador de elemento (id), precedido por #.
  • Links de Email (mailto:): Quando clicados, tentam abrir o cliente de email padrão do usuário com um endereço de email especificado como destinatário.
  • Links de Telefone (tel:): Permitem discar um número de telefone em dispositivos com capacidade de fazer chamadas.
  • Links para Download: Direcionam o navegador para baixar um recurso específico, ao invés de exibi-lo no navegador. Isso pode ser especificado com o atributo download em links apontando para arquivos.
  • Links de Aplicativos: Usados para abrir um aplicativo específico ou página dentro de um aplicativo, frequentemente utilizados em plataformas móveis.
  • Links Dinâmicos: Gerados dinamicamente com JavaScript para realizar uma ação ou mudar o conteúdo da página sem carregar uma nova página.
  • Links Sociais: Direcionam para perfis ou páginas em plataformas de mídia social. São essenciais para promover a presença online em redes sociais.

<a href= "https://www.link.com">
<img src="imagem.png"/>
</a>

<a href= "mailto: someone@gmail.com">
Send email
</a>

<h3>Endereçamento Absoluto</h3>

<p><a href= "https://www.google.com/">
Google
</a></p>

<h3>Endereçamento Relativo</h3>

<p><a href= "./random.docs">
Docs
</a></p>

O parâmetro NAME serve para marcar um ponto para possíveis desvios. Quando desviamos para um determinado ponto dentro de um documento, indicamos este nome com um "#".

Tabelas

  • Comumente utilizadas para organizar dados em uma página
  • Tag <table>...</table>: criação de uma tabela
  • A tag <tr> indica uma linha na tabela
  • Cada linha da tabela pode conter várias células, e portanto, é necessário que se faça uso de uma marcação que indique exatamente o ponto de quebra de uma linha e início de outra
  • A tag <td> especifica a células de dados de uma tabela
  • Por se tratar de dados comuns (e não cabeçalhos), essas células possuem seu conteúdo escrito em fonte normal, sem nenhum destaque e alinhamento à esquerda
  • Um atributo opcional para ser usado com table é o atributo border. Se ele estiver presente, a tabela será formatada com linhas de borda, podendo receber um valor que vai estabelecer qual a espessura da linha d aborda da tabela

<table>
<tr>
<td></td>
<th>Mateus</th>
<th>Amanda</th>
</tr>
<tr>
<th>Notas</th>
<td>9.8</td>
<td>9.9</td>
</tr>
<tr>
<th>N. de Matrícula</th>
<td>445347</td>
<td>887656</td>
</tr>
</table>

Mateus Amanda
Notas 9.8 9.9
N. de Matrícula 445347 887656

Atributos Colspan e Rowspan

  • Colspan é a abreviação para "column span"
  • Colspan é usada na tag <td> para indicar quantas colunas estarão contidas em uma célula em uma ação de merge

<table>
<tr>
<td colspan="3">Célula 1</td>
</tr>
<tr>
<td>Célula 2</td>
<td>Célula 3</td>
<td>Célula 4</td>
</table>

Célula 1
Célula 2 Célula 3 Célula 4
  • Rowspan é a abreviação para “rows span"
  • Rowspan é usada na tag <td> para indicar quantas linhas estarão contidas em uma célula em uma ação de merge

<table>
<tr>
<td rowspan="3">Célula 1</td>
<td>Célula 2</td>
</tr>
<tr> <td>Célula 3</td> </tr>
<tr> <td>Célula 4</td> </tr>
</table>

Célula 1 Célula 2
Célula 3
Célula 4

O que é Formulário?

  • Principal ponto de interação entre usuário e website
  • Utilizados para enviar dados a servidor remoto ou para trabalhar a interação com o usuário
  • Formado por um ou mais widgets (campo de texto, caixas de seleção, botões, checkboxes ou radio buttons)

Questões a se considerar (by Adam Silver)

  • Seja conciso: não use mais palavras que o necessário. No entanto, seja econômico sem comprometer a clareza da informação.
  • Seja consistente: adote o mesmo tom e padrão de palavras, formalismos e pontuação.
  • Seja específico quanto a feedbacks: utilize uma linguagem clara para indicar o que há de errado no preenchimento de dados de um formulário.
  • Não utilizem jargões nem tecnicismos: seja o mais humano possível.
  • Tenha um plano de linguagem criterioso: caso tenha uma linguagem despojada, um retorno de mensagem de erro mal realizado, pode ser visto como sarcasmo.
  • Use um tom ativo: por exemplo, use "Entre com seu nome" e não "Primeiro nome deve ser entrado".
  • Não envergonhe o usuário: deixe o usuário saber qual o erro e como consertá-lo, sem julgamentos.

Elemento <form>

Todo formulário inicia com o elemento <form>. Consiste em um container específico para conter um formulário. Possui também atributos opcionais para configurar o comportamento do formulário.

<form action="/my-handling-form-page" method="post"></form>

  • Atributo action: define a localização de destino para os dados coletados
  • Atributo method: define qual o método de envio de dados http (usualmente get ou post)