Fundamentos do HTML

Este conteúdo faz parte do livro “Introdução à programação Web para a Bioinformática: HTML, CSS, PHP & JavaScript“. Você pode adquirir a versão impressa desse livro aqui ou a versão para Kindle aqui. Para nos citar, consulte este link.

Elementos de uma página HTML

Uma página HTML é composta por alguns elementos básicos. São eles: (i) a declaração do tipo do documento; (ii) a tag HTML, que armazenará todo conteúdo da página; (iii) o cabeçalho, que armazena informações estruturais da página; e (iv) o corpo, que armazenará os conteúdos e formatações da página.

Vídeo-aula 5. Fundamentos do HTML

Abaixo vemos um exemplo de uma página salva no formato HTML. Abra seu editor de textos e digite o conteúdo abaixo.

<!DOCTYPE html>
<html>
<head>
    <title>Hello</title>
</head>
<body>
    <p>Olá, mundo!</p>
</body>
</html>

c2_s1.html | goo.gl/785N8D

Salve o arquivo com o título “s2_c1.html”. Página HTML possuem a extensão “.html”. Agora abra o arquivo. O navegador irá exibir a seguinte página:

Visualização de uma página HTML em um navegador.

Nesse exemplo estamos utilizando o navegador Google Chrome. Seu navegador nativo pode ser outro, mas a página exibida deve ser a mesma. Uma das vantagens do desenvolvimento de páginas para internet é a interoperabilidade, ou seja, um mesmo código pode ser exibido por diferentes programas da mesma maneira.

Agora vamos entender o código apresentado:

Na primeira linha do script é feita a declaração do doctype (document type ou tipo do documento). A declaração do doctype especifica para o navegador qual tipo de documento está sendo lido. Essa informação é fundamental para que os navegadores processem a página corretamente. Para HTML5 é necessário apenas declarar que o tipo de documento é HTML, ou seja, apenas repita essa linha em todos os documentos que forem escritos com HTML5: “<!doctype html>”.

A seguir é declarada a tag <html>. A tag <html> especifica o inicio da página escrita na linguagem HTML. Ela deve ser fechada no fim do código. Todo o conteúdo entre a declaração de abertura e fechamento pertence a tag. A declaração de tags funciona de maneira hierárquica em HTML. Para fechar uma tag deve-se utilizar a seguinte sintaxe: </nome_da_tag>.

O conteúdo de <html> é dividido por duas outras tags: <head> e <body>. Em <head> todas as declarações de informações necessárias para a página são realizadas. Por exemplo, dentro de <head> é feita a declaração da tag <title>, que informa que o título da página será “Hello”. Dentro da tag <body> é inserido o conteúdo que gostaríamos de exibir. Observe que a frase é flanqueada pela tag <p>, que indica que o conteúdo se trata de um parágrafo. Observe também como as tags são fechadas. A tag <p> é filha da tag <body>, pois <p> é declarada entre a abertura da tag <body> e o fechamento </body>.

Cabeçalho `<head>`

A tag <head> armazena as informações descritivas de um site. As informações armazenadas no cabeçalho não são exibidas pelos navegadores. Além da tag de título <title>, o cabeçalho aceita outros tipos de tags, como por exemplo:

<style>: marcações de estilo;
<link>: permite a inserção de links externos. Usado por exemplo para adição de folhas de estilo CSS;
<script>: permite a inserção de scripts na página;
<meta>: permite a inserção de metadados nos documentos, como por exemplo, conjunto de caracteres utilizado (charset), nome do autor (author), palavras-chave (keywords), descrição (description) e o tipo de janela para exibição (viewport).

No exemplo abaixo demonstraremos como declarar metadados no cabeçalho de uma página HTML.

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Meu site">
  <meta name="keywords" content="HTML,TAGS">
  <meta name="author" content="Diego Mariano">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

c2_s2.html | goo.gl/HB5zmf

O conjunto de caracteres (charset) define o formato de codificação usado no documento. O conjunto UTF-8 contém caracteres necessários para nosso idioma, como por exemplo os acentos e cedilha. O valor viewport indica ao navegador qual será a largura da página carregada pelo navegador dependendo do dispositivo usado para acesso. O trecho initial-scale=1.0 indica o nível de zoom que a página será carregada.

Até a versão 4 do HTML, a tag <head> era obrigatória. A partir do HTML5 ela passou a ser opcional.

Corpo `<body>`

No corpo da página são inseridas todas as informações que serão exibidas pelo navegador. Algumas tags não são exibidas como por exemplo scripts e comentários.

Comentários em HTML

Comentários são estruturas do código que serão ignorados pelos navegadores na hora do processamento da página. Comentários são importantes para organização e documentação do código, ou seja, servem para explicar a função de um determinado trecho do programa. Bons programadores sempre comentam seus códigos.

Em HTML, comentários são inseridos entre o conjunto de caracteres . Comentários podem ter uma ou múltiplas linhas.

<!-- Minha primeira página -->
<!DOCTYPE html>
<html>
<head>
    <title>Hello</title>
</head>

<body>  
    <!-- 
        Todo conteúdo presente nos comentários 
        será ignorado pelo navegador.
    -->
    <p>Olá, mundo!</p>
</body>
</html>

c2_s3.html | goo.gl/Oezasv

Vídeo-aula 6. TAGS.

Formatação de textos

A seguir, aprenderemos a alterar o tamanho dos textos, fontes e cores. Aprenderemos também a forçar quebras de linhas, inserir linhas delimitadoras e listas.

Há diversas formas de inserir formatações em textos, dentre elas pode-se:

criar um arquivo de folha de estilo CSS (nos próximos capítulos nos aprofundaremos nas folhas de estilo);
utilizar a tag <style>;
inserir a formatação diretamente no elemento: atributo style.

Para inserir a formatação diretamente no elemento podemos utilizar um atributo nativo da tag ou mesmo utilizar o atributo style. Por exemplo, vamos alterar o tamanho de um texto.

<!-- Tamanho normal -->
<p>Olá, mundo!</p>

<!-- Tamanho maior -->
<p style="font-size:50px">Olá, mundo novamente!</p>

c2_s4.html | goo.gl/lHFx5J

Observe que a tag <p> recebe o atributo style. O atributo por sua vez recebe os valores “font-size: 50px”, que define que o tamanho do texto deve ser de 50 pixels. Existem diversas unidades de medida para definição de tamanhos de fontes. Algumas são amplamente conhecidas como centímetros (cm) ou polegadas (in). Algumas delas originam-se da história da tipografia, como o ponto (pt) e paica (pc). Entretanto, a unidade que se padronizou para definição de tamanhos é o pixel (px).

Poderíamos ainda usar a tag style para aplicar formatações a todo o texto. Observe:

<style>
    p{ font-size:50px; }
</style>
<!-- Tamanho normal -->
<p>Olá, mundo!</p>
<!-- Tamanho maior -->
<p>Olá, mundo novamente!</p>

c2_s5.html | goo.gl/UFxgJU

Nesse exemplo, aplicamos a todos os elementos presentes na tag <p> o tamanho de fonte de 50px.

Fontes

Para selecionar qual fonte será utilizada, utilizamos a propriedade do atributo style “font-family”.

<!-- Declarando uma única fonte -->
<p style="font-family: 'Times New Roman'">Olá, mundo!</p>

<!-- Declarando duas possíveis fontes -->
<p style="font-family: 'Helvetica, Arial'">Olá, mundo novamente!</p>

c2_s6.html | goo.gl/kU0Gbm

Diferenças entre fontes. Fonte *Times New Roman* acima e *Helvetica* ou *Arial* abaixo.

Observe que no primeiro parágrafo utilizou-se a fonte “Times New Roman”. No segundo parágrafo utilizou-se duas fontes: “Helvetica” e “Arial”. Nesse caso, o navegador analisaria se o usuário possui a fonte Helvetica instalada no computador, caso não a encontre, ele carregaria a fonte Arial. Se as duas fontes declaradas não forem encontradas no computador, o navegador aplica a fonte padrão do parágrafo.

É importante destacar que utilizamos a tag style para aplicar a formatação, mas recomendamos fortemente não aplicá-la a uma única tag de parágrafo. Aplique fontes diretamente ao corpo (body) da página utilizando a tag <style>.

<style>
  body{ font-family: Arial; }
</style>

c2_s7.html | goo.gl/aaZEP3

Nos próximos capítulos aprenderemos a criar arquivos de estilo separados do código HTML.

Um pouco mais sobre fontes

Fontes tipográficas definem o “desenho” dos caracteres de seu texto. Fontes em geral são classificadas em serifadas e não serifadas. Serifas são pequenos traços que alongam uma fonte. Diz-se que o uso de serifas facilita a leitura de blocos de textos. Jornais impressos tendem a usar fontes serifadas. Entretanto, para construção de websites, tende-se a optar por fontes não serifadas. Uma das fontes serifadas mais utilizadas é “Times New Roman”. Dentre as não serifadas destacam-se “Arial” e “Helvetica”. Helvetica é considerada uma das fontes favoritas por muitos designers.

Aplicando cores

Color é a propriedade do atributo style usada na aplicação de cores em textos. Podemos utilizar nomes de cores em inglês para defini-las ou usar seu código hexadecimal.

<!-- Cor cinza -->
<p style="color: grey">Olá, mundo!</p>

<!-- Cor cinza claro -->
<p style="color: #CCCCCC">Olá, mundo novamente!</p>

c2_s8.html | https://goo.gl/hlMunX

Podemos ainda alterar a cor do fundo, aplicando ao corpo da página a propriedade “background-color”. No exemplo a seguir, vamos inserir a cor preto como pano de fundo.

<style>
	body{ background-color: black; }
</style>
<!-- Cor cinza -->
<p style="color: grey">Olá, mundo!</p>
<!-- Cor cinza claro -->
<p style="color: #CCCCCC">Olá, mundo novamente!</p>

c2_s9.html | https://goo.gl/35HCpR

Use as cores com sabedoria. Combinar cores de maneira errada pode resultar em páginas difíceis de serem visualizadas. Priorize fundos de cor clara e use fontes em tons mais escuros. Evite cores quentes e frias em tons saturados.

Um pouco da teoria das cores

Uma das primeiras coisas que estudamos no jardim de infância é a misturas cores. Por exemplo, basta lembrarmos que misturando azul com amarelo tem-se verde. Entretanto esse padrão de cores só é válido para as tintas. Em combinações de cores de luzes obtêm-se cores diferentes. Há dois sistemas de cores: RGB e CMYK. O RGB é aditivo: na mistura de todas as cores obtém-se branco. O CMYK é subtrativo: na mistura das cores se obtém preto. O sistema de cores aditivas (RGB) é representado pelas cores primárias vermelho (R; red), verde (G; green) e azul (B; blue). O sistema RGB representa luzes, e é usado em equipamentos eletrônicos. Em contrapartida, o sistema de cores subtrativa (CMYK) é representado pelas cores primárias ciano (C; cyan), magenta (M; magenta), amarelo (Y; yellow) e preto (K; derivado da palavra key, por ser considerado a cor chave). O sistema CMYK é usado em impressões. As cores são complementares, ou seja, é possível compreender quais cores se obtém-se a partir da comparação entre os dois sistemas. CMYK funciona pela absorção de luz, uma vez que as cores refletidas são aquelas que não são absorvidas.

RGB	CMYK	Tinta	Luz
R	C	R = M + Y	C = G + B
G	M	G = C + Y	M = R + B
B	Y	B = C + M	Y = R + G

Por exemplo, a cor azul ciano para luzes pode ser obtida misturando verde com azul (C = G + B). Outro exemplo é a cor de tinta verde pode ser obtida misturando azul ciano com amarelo (G = C + Y).

O padrão RGB vai de 0 a 255, sendo zero a ausência de cor e 255 a tonalidade máxima. Entretanto a escala utilizada é hexadecimal que inclui 6 outras letras além dos numerais (A-F). Por exemplo, o valor decimal 100 é representado pelo numeral hexadecimal A0, sendo o algarismo A equivalente a 10. O maior valor possível é FF, que equivale a 255.

Red	Green	Blue
00	00	00
Vermelho (R)	Verde (G)	Azul (B)

Montando cores com RGB: #FF0000 é vermelho, #00FF00 é verde e #0000FF é azul. Desse modo podemos ainda montar outras cores. Se amarelo é vermelho mais verde, então seu código é #FFFF00. Achou isso um pouco complicado? Não se preocupe! Existem sites que permitem a escolha de palheta de cores. Por exemplo, o Adobe Color: https://color.adobe.com.

Quebras de linha `<br>`

Aprendemos no capítulo anterior que parágrafos são declarados dentro da tag <p>. Entretanto, se escrevermos um texto grande, a organização da página será dada pela resolução, ou seja, o tamanho da janela. Podemos forçar uma quebra de linha usando a tag <br>.

<p>Olá mundo, <br> novamente!<p>

Ao abrir a página pode-se perceber que no ponto em que se inseriu a tag <br> é exibida uma quebra de linha.

Marcações de ênfase

Aprendemos no capítulo anterior que elementos textuais podem ser declarados por meio da tag de parágrafos <p>. Entretanto existem tags que permitem inserir ênfase no texto. São elas:

<b> Texto em negrito
<i> Texto em itálico
<u> Texto sublinhado
<sub> Texto subscrito
<sup> Texto sobrescrito
<big> Texto com fonte maior do que o padrão
<small> Texto com fonte menor do que o padrão
<em> Texto em itálico
<strong> Texto em negrito

No exemplo a seguir, veremos o impacto das marcações de ênfase na estrutura de um texto.

<p>
    <b>Texto em negrito</b><br>
    <i>Texto em itálico</i><br>
    <u>Texto sublinhado</u><br>
    <sub>Texto subscrito</sub><br>
    <sup>Texto sobrescrito</sup><br>
    <big>Texto com fonte maior do que o padrão</big><br>
    <small>Texto com fonte menor do que o padrão</small><br>
    <em>Texto em itálico</em><br>
    <strong>Texto em negrito</strong>
</p>

c2_s10.html | https://goo.gl/tYcYFs

Observe o resultado:

Há duas formas de se aplicar negrito e itálico. Na exibição nativa, essas tags talvez não apresentem qualquer diferença, entretanto tais tags são lidas de maneira diferente por buscadores automáticos de conteúdo. Além disso, é possível aplicar diferentes formatações a essas tags. Aprenderemos isso nos próximos capítulos.

Alinhando texto

A propriedade responsável por alinhar texto é a “text-align”. Há quatro possíveis alinhamentos: à esquerda (left), à direita (right), centralizado (center) e justificado (justify).

<p style="text-align:left">Texto alinhado à esquerda</p>
<p style="text-align:right">Texto alinhado à direita</p>
<p style="text-align:center">Texto centralizado</p>
<p style="text-align:justify">
    Este é um exemplo de texto justificado. 
    Observe como os textos se alinham ao final das margens das linhas.
</p>

c2_s11.html | https://goo.gl/1g0MDB

Por padrão, os textos são alinhados à esquerda. A tag <center> também permite a centralização, entretanto ela foi abolida do HTML5.

Títulos

HTML apresenta tags especialmente desenvolvidas para declaração de títulos. As tags de títulos permitem a alteração do tamanho do texto em cinco níveis: <h1>, <h2>, <h3>, <h4>, <h5> e <h6>. Sendo que quanto menor o nível, maior a fonte, ou seja, textos dentro da tag <h1> terão um tamanho maior que <h6>.

<h1>Título h1</h1>
<h2>Título h2</h2>
<h3>Título h3</h3>
<h4>Título h4</h4>
<h5>Título h5</h5>
<p>Texto em parágrafo comum</p>

c2_s12.html | https://goo.gl/FcoeRx

Régua horizontal e listas

Régua horizontal `<hr>`

A régua horizontal <hr> permite a inserção de uma linha que dividirá a página. Observe o exemplo a seguir:

<h1>Régua horizontal</h1>
<p>
    Parte superior 
    <hr> 
    Parte inferior 
</p>

c2_s13.html | https://goo.gl/GEpdCP

Atributos usados na construção de réguas horizontais:

size: define a espessura da linha em pixels;
width: define a largura da linha em pixels (pode-se utilizar um valor em porcentagem);
align: define o alinhamento da linha no centro (center), esquerda (left) ou direita (right);
color: define a cor da linha.

<h1>Régua horizontal</h1>

<p>Régua com 10px de espessura, 50% de largura, alinhamento central e cor cinza</p>

<hr size="10px" width="50%" align="center" color="grey">

c2_s14.html | https://goo.gl/N0ffj7

Alterando o estilo de uma régua horizontal.

Listas

Listas permitem a exibição de elementos em sequência. Existem dois tipos de listas: ordenadas <ol> e não ordenadas <ul>.

Lista ordenada	Lista não ordenada
1. Primeiro item 2. Segundo item 3. Terceiro item	º Primeiro item º Segundo item º Terceiro item

Listas ordenadas podem ser criadas usando a tag <ol>. Essa tag recebe os atributos start (que recebe um valor numérico a qual a lista deve começar) e type (que recebe o tipo de caracteres que serão usados na ordenação: A, a, I, i, 1).

Listas não ordenadas podem ser declaradas usando a tag <ul>. Essa tag pode receber o atributo type, que indicará o tipo do caractere usado na marcação dos itens da lista. O type pode ser disco (disk), quadrado (square), círculo (circle) ou nenhum (none).

Cada item da lista deve ser declarado usando a tag <li>. Essa tag também pode receber os mesmos atributos aplicados nas tags <ol> e <ul>.

Observe o exemplo abaixo:

<!-- Lista ordenada -->
<ol>
    <li>Primeiro elemento</li>
    <li>Segundo elemento</li>
    <li>Terceiro elemento</li>
</ol>
<!-- Lista não ordenada -->
<ul>
    <li>Primeiro elemento</li>
    <li>Segundo elemento</li>
    <li>Terceiro elemento</li>
</ul>

c2_s15.html | https://goo.gl/AG0lrP

Por padrão a lista ordenada utiliza números, começando do número um. Poderíamos alterar o valor inicial para que a lista comece do décimo numeral declarando <ol start="10">. Podemos ainda alterar a lista para usar letras ao invés de números usando <ol type="A">.

Quanto a lista não ordenada, ela usa o valor disk como padrão para o atributo type. Podemos alterar o marcador para quadrado declarando <ul type="square">. Podemos ainda retirar o marcador usando o valor none.

Imagens

HTML permite a inserção de imagens em páginas através da tag <img>. A partir do HTML as tags <figure> e <figcaption> foram inseridas, permitindo assim a inserção de legendas para as imagens.

A tag <img> requer obrigatoriamente o atributo src (deriva de source ou fonte), que armazena o endereço e nome da imagem a ser inserida.

Vídeo-aula 7. Imagens.

Inserindo imagens

Para o exemplo a seguir, precisaremos de uma imagem denominada “1bga.jpg” salva no mesmo diretório em que a página HTML se encontra. Você pode consegui-la no material suplementar.

<figure>
    <img src="1bga.jpg">
    <figcaption>Proteína beta-glicosidase</figcaption>
</figure>

c2_s16.html | https://goo.gl/wuDTfK

Exemplo de uma figura: estrutura de uma proteína. Figura gerada usando PyMOL.

A imagem é carregada no tamanho original e alinhada à esquerda. O texto na tag <figcaption> é carregado abaixo da imagem.

Atributos da tag `<img>`

Podemos ainda aplicar alguns atributos a imagens, como por exemplo:

alt: texto exibido por navegadores quando a imagem não puder ser carregada. Essa tag é também lida por programas de acessibilidade;
align: define o alinhamento da imagem. Pode ser: alinhada ao topo (top), no meio (middle), abaixo (bottom), esquerda (left) ou direita (right);
height: define a altura da imagem (valor em pixels, porcentagem, etc.);
width: define a largura da imagem (valor em pixels, porcentagem, etc.);
vspace: margem entre a imagem e textos; superior e inferior;
hspace: margem entre a imagem e os textos; lados esquerdo e direito;
border: insere uma borda na imagem.

Podemos ainda utilizar ainda o atributo style e suas propriedades para inserir modificações em imagens. Muitas propriedades de estilo têm função similar aos atributos. Por exemplo, é possível alterar a altura de uma imagem usando a propriedade height do atributo style: <img style=“height:200px” src=”1bga.jpg”>. Esse comando, que altera o tamanho da imagem para 200px, seria equivalente a: <img height=”200px” src=”1bga.jpg”>.

Links

Links permitem ligações entre páginas diferentes. No HTML são determinados pela tag <a>. Essa tag requer o atributo href que indicará o endereço a qual o link deverá abrir.

<a href="#">Link</a>

c2_s17.html | https://goo.gl/3HHpVm

Utilizamos o valor “#” para o atributo href quando queremos que o link não carregue nenhuma página. Declarar uma tag <a> com o atributo href sem nenhum valor atribuído indica que a página deverá ser recarregada ao clicar no link.

No exemplo a seguir utilizaremos um link para abrir uma página externa da internet.

<a href="http://www.google.com.br">Abrir Google</a>

c2_s18.html | https://goo.gl/qUS8Ut

É possível acessar páginas externas indicando o endereço da página e o protocolo “http:”. Para links de endereços de e-mail utilize “mailto:”. Para arquivos locais, indique apenas o nome do arquivo, caso esteja no mesmo diretório, ou o endereço local, levando em consideração o diretório atual.

Vídeo-aula 8. Links.

Ligando páginas

No exemplo a seguir, criaremos dois arquivos chamados: “um.html” e “dois.html”. No arquivo “um.html” adicione o seguinte conteúdo:

<h1>Arquivo um.html</h1> 
<a href="dois.html">Link para arquivo 2</a>

c2_s19.html | https://goo.gl/4b1B91

Agora crie o arquivo “dois.html”. Salve os dois arquivos no mesmo diretório.

<h1>Arquivo dois.html</h1> 
<a href="um.html">Link para arquivo 1</a>

c2_s20.html | https://goo.gl/RXTh6u

Agora abra o arquivo “um.html”.

Clique no link para o arquivo “dois.html”. Observe que é possível navegar de um arquivo a outro infinitamente.

Agora crie duas pastas chamadas: “pares” e “impares”. Envie o arquivo “um.html” para o diretório “impares” e o arquivo “dois.html” para o diretório “pares”. Agora abra novamente o arquivo “um.html” e clique no link para o arquivo 2. Observe que o navegador responderá com uma mensagem informando que o arquivo não pode se encontrado.

Podemos corrigir esse problema alterando o endereço que indica a posição dos links. Vá até o arquivo “um.html” e indique que o arquivo “dois.html” agora se encontra no diretório “pares”.

<h1>Arquivo um.html</h1> 

<a href="../pares/dois.html">
    Link para arquivo 2
</a>

c2_s21.html | https://goo.gl/F6PiqI

Observe que diretório e arquivo são separados por uma barra. Antes de informar o diretório, inserimos dois símbolos de pontos (..) seguidos. Isso indica que para acessar o novo diretório do arquivo “dois.html” devemos retornar para a pasta anterior. Lembre-se de que além de inserir o arquivo “dois.html” no diretório “pares”, também inserimos o arquivo “um.html” no diretório “impares”. Assim, para acessar o diretório “pares” é necessário primeiro retornar ao diretório inicial.

Quando um link não está apontando para o lugar em que deveria estar, ou a página não está acessível, dizemos que o link está quebrado. Por isso não se esqueça de corrigir o link no arquivo “dois.html”.

Atributos da tag `<a>`

Além do atributo href, a tag <a> ainda recebe outros atributos, como por exemplo:

name: indica o nome da âncora;
target: indica o tipo de janela a qual o link será aberto. Pode ser: nova janela (_blank), no mesmo frame (_self), na mesma janela (_top) ou no frameset principal (_parent);
rel: define o tipo do link;
acesskey: permite a configuração de uma tecla de atalho ao link;
onclick: permite eventos JavaScript. Atribui uma ação quando o link for clicado;
onmouseover: permite eventos JavaScript. Atribui uma ação quando o cursor sobrepor o link;
onmouseout: permite eventos JavaScript. Atribui uma ação quando o cursor sair do link.

Tabelas

Tabelas podem ser criadas a partir da tag <table>. Uma tabela deve ter linhas, declaradas pela tag <tr>, e células, declaradas pela tag <td> dentro de cada linha. Ainda é possível indicar se uma linha pertence ao cabeçalho da tabela substituindo a tag <td> pela tag <th>. Observe a representação a seguir:

À primeira linha aplicou-se a tag <th>, indicando que as células nessa linha representam o título das colunas da tabela. Nas outras linhas utilizou-se a tag <td>, indicando que representam células comuns.

Mesclando colunas

Observe que o número de colunas declaradas deve ser o mesmo em todas as linhas. Entretanto, podemos ainda mesclar colunas usando o atributo “colspan”. Observe a representação:

Mesclando linhas

Podemos ainda mesclar linhas usando o atributo “rowspan”. Observe a representação:

Atributos para construção de tabelas

A tag <table> pode receber os seguintes atributos:

bgcolor: cor de pano de fundo;
background: imagem de fundo;
border: largura da borda;
bordercolor: cor da borda;
cols: número total de colunas;
cellpadding: espaçamento entre a borda da célula e o conteúdo;
cellspacing: espaço entre células;
width: largura;
align: alinhamento da tabela, que pode ser esquerda (left), centro (center) ou direita (right);

A tag <tr> pode receber os argumentos:

align: alinhamento de conteúdo na linha, que pode ser esquerda (left), centro (center) ou direita (right);
bgcolor: cor de pano de fundo da linha;
valign: o alinhamento vertical do conteúdo das células. Pode ser topo (top), meio (middle), inferior (bottom) e linha de base (baseline).

As tags <td> e <th> podem receber os argumentos:

align: alinhamento horizontal da célula;
valign: alinhamento vertical da célula;
bgcolor: cor do pano de fundo da célula;
rowspan: número de linhas mescladas;
colspan: número de colunas mescladas;
width: largura;
height: altura.

Outras tags usadas na construção de tabelas

HTML5 ainda permite a separação de cabeçalhos <thead>, corpo <tbody> e rodapé <tfoot> de uma tabela. Ainda é possível criar grupos de colunas com as tags <col> e <colgroup>. Além de legendas com a tag <caption>.

Construindo uma tabela completa com HTML5

No exemplo a seguir demonstraremos na prática as tags aprendidas para criação de uma tabela.

<table border="10px" bordercolor="gray" cellpadding="5px">
    <thead>
        <tr><th colspan="4">Nucleotídeos</th></tr>
    </thead>
    <tfoot>
       <td colspan="4" align="right" bgcolor="#cccccc">
         Bases / DNA
      </td>
    </tfoot>
    <tbody>
        <tr>
            <th colspan="2">Purinas</th>
            <th colspan="2">Pirimidinas</th>
        </tr>
        <tr>
            <td>Adenina</td>
            <td>Guanina</td>
            <td>Citosina</td>
            <td>Timina</td>
        </tr>
    </tbody>
</table>

c2_s25.html | https://goo.gl/R0jShn

No exemplo anterior criamos uma tabela com uma margem de 10px na cor cinza. Cada célula possui uma margem interna de 5px. Um cabeçalho principal foi criado. Criamos um campo destinado ao cabeçalho <thead> e um rodapé <tfoot>. Observe que o rodapé é declarado antes do corpo <tbody>, mas na construção da tabela ele é exibido na última linha. Observe que a tag <th> deixa em negrito o texto da célula. O atributo colspan é usado em diversos pontos para mesclar células de colunas diferentes. Usamos ainda o atributo align para alinhar o texto do rodapé a direita e colorimos o fundo com a cor cinza claro (código hexadecimal #CCCCCC).

Formulários

Formulários permitem a interação entre usuários e sistemas Web. Eles são essenciais para sistemas de cadastro em páginas da internet. A seguir vemos um exemplo de formulário HTML. Há um campo para recebimento do nome do usuário, e-mail e uma mensagem. Por fim, um botão que ao ser clicado envia a mensagem ao servidor.

Vídeo-aula 9. Formulários.

Em HTML, formulários são declarados com a tag <form>. Um formulário pode receber três principais atributos:

action: recebe o nome e endereço do arquivo que realizará o processamento das informações enviadas;
method: recebe o método de envio: POST ou GET;
name: nome do formulário.

Diferença entre os métodos POST e GET

No método GET, as informações do formulário são transmitidas diretamente pela URL. Em geral, o método GET permite envio de strings até 255 caracteres. O método POST encapsula as informações e as envia junto ao corpo da requisição HTTP.

Observe como um formulário é declarado:

<form action="recebe.php" method="post" name="form">
    [...]
</form>

c2_s26.html | https://goo.gl/ochQ5Z

O formulário acima, denominado “form”, enviará os dados usando o método post para a página “recebe.php”. Aprenderemos nos próximos capítulos como receber as informações e processá-las corretamente usando a linguagem PHP.

Dentro do formulário, diversas tags podem ser utilizadas para envio dos dados. A escolha das tags depende das necessidades do desenvolvedor. Agora vamos conhecer tags usadas em formulários.

Rótulos `<label>`

Rótulos são importantes para identificar os campos. Em HTML, rótulos são declarados pela tag <label>.

<label>Identificador do rótulo</label>

c2_s27.html | https://goo.gl/LGTtYx

Tag `<input>`

Formulários permitem a adição de diferentes campos por meio da tag <input>. Essa tag recebe os seguintes atributos:

Name: identificador do campo;
Size: largura do campo;
Maxlenght: número máximo de caracteres;
Value: valor padrão para o campo;
Placeholder: texto padrão para caixas de texto (desaparece quando clicado);
Checked: valor assumido quando campo for selecionado;
Type: tipo de dado que o campo recebe. Pode ser: text, password, radio, checkbox, hidden, file, button ou submit.

Caixa de texto

Caixas de texto permitem a inserção de texto em formulários. No exemplo a seguir criaremos uma caixa de texto.

<label>Caixa de texto: </label>

<input type="text" name="minha_primeira_caixa_de_texto" placeholder="Digite o texto aqui">

c2_s28.html | https://goo.gl/aoSjcv

Observe que a tag <input> recebe o tipo “text”. Dois outros atributos são inseridos: name e placeholder. O atributo name será importante para o recebimento da variável na página PHP. Ao clicar na caixa e digitar, imediatamente o texto em placeholder é substituído pelo texto digitado.

Campo *input* do tipo *text* preenchido.

Caixas de texto para senhas

Caixas de texto podem ainda receber senhas e ocultar os caracteres digitados. Para isso deve-se utilizar o valor “password” no atributo type.

<label>Digite sua senha: </label> 

<input type="password" name="senha" placeholder="Digite sua senha">

c2_s29.html | https://goo.gl/WK0Oaw

Botões radiais

Botões radiais são indicados quando é necessário limitar a quantidade de escolhas para um determinado campo. Observe:

<h2>Você gosta de HTML? </h2>

<input type="radio" name="resposta" value="sim">
<label>Sim</label>

<br>

<input type="radio" name="resposta" value="nao">
<label>Não</label>

c2_s30.html | https://goo.gl/G4eU5s

Campo *input* do tipo *radial*. Permite selecionar uma única opção.

Nos botões do tipo radial apenas uma opção pode ser selecionada. Perceba que os valores do campo name devem ser o mesmo.

Caixa de seleção

Diferente dos botões radiais, os botões de caixa de seleção (checkbox) permitem que múltiplas opções sejam selecionadas. Observe:

<h2>Múltiplas opções</h2>

<input type="checkbox" name="resposta" value="a">
<label>A</label>

<br>

<input type="checkbox" name="resposta" value="b" checked>
<label>B</label>

<br>

<input type="checkbox" name="resposta" value="c">
<label>C</label>

<br>

<input type="checkbox" name="resposta" value="d" checked>
<label>D</label><br>

c2_s31.html | https://goo.gl/UH1ARb

Caixas de seleção permitem selecionar múltiplas opções.

O atributo checked força o campo a iniciar selecionado.

Campos ocultos

Campos ocultos permitem a transmissão de informações sem que o usuário saiba. Podem ser úteis, por exemplo, para scripts. Para declará-lo utilize o valor “hidden” no atributo type. Observe:

<input name="informacao_oculta" type="hidden" value="Informação secreta">

c2_s32.html | https://goo.gl/KJ8JYF

Arquivos

Formulários também permitem a submissão de arquivos através do type “file”. Observe:

<input type="file" name="meu_arquivo">

c2_s33.html | https://goo.gl/EHy1ET

Ao declarar um campo de input do tipo file, o campo exibido ao usuário é criado pelo navegador.

Botões comuns

Botões permitem que o usuário execute ações.

<input type="button" name="botao1" value="Botão">

c2_s34.html | https://goo.gl/95sfNf

Ainda é possível criar botões usando a tag <button>:

<button name="botao2">Botão</button>

c2_s35.html | https://goo.gl/hp1nP1

Exemplo de botão.

Botão de submissão

O botão de submissão é um tipo especial de botão. Ele permite que o formulário seja enviado à página indicada no atributo action da tag <form>.

<input type="submit" name="submit" value="Enviar">

c2_s36.html | https://goo.gl/K6ud44

Assim como botões comuns é possível criar botões de submissão usando a tag <button>:

<button type="submit" name="submit">Enviar</button>

c2_s37.html | https://goo.gl/5oNHBZ

Botões de submissão só funcionam se estiverem dentro da tag <form>.

Textarea

A tag <textarea> define uma área para digitação de texto. A diferença entre essa tag e a tag <input> do tipo text é que <textarea> permite caixas de texto de tamanhos variados. A tag <textarea> recebe os atributos rows e cols, que definem a quantidade de linhas e colunas usadas na área de texto. Observe:

<textarea name="meu_texto" rows="5" cols= "100" placeholder="Digite o texto aqui"></textarea>

c2_s38.html | https://goo.gl/advoyL

Caixas de seleção

Caixas de seleção permitem que o usuário selecione valores com base em uma lista pré-definida. Em HTML, caixas de seleção são declarados com a tag <select>. Cada elemento da caixa de seleção deve ser declarado com a tag <option>. Observe:

<p><strong>Exemplo de caixa de seleção</strong></p>
<select name="caixa_de_selecao">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
</select>

c2_s39.html | https://goo.gl/KuwrUj

Caixa de seleção antes de depois do clique:

Antes de clicar

Depois de clicar

Quer aprender mais? Conheça nossos cursos profissionalizantes à partir de R$19,99:

Web Design: Construa Sites com PHP, HTML, CSS e JavaScriptCurso completo para aprender a construir sites usando as linguagens web mais conceituadas do mercado

Web Design com Adobe XD, Bootstrap, GIMP, HTML e PhotoshopCrie sites com design elegante em poucas linhas de código usando Adobe XD, Bootstrap 4, FontAwesome e DataTables

Introdução à linguagem JavaScriptCurso para aprender programação front-end usando a linguagem JavaScript

Livro Introdução à Programação para Web para Bioinformática: HTML, CSS, PHP & JavaScript

_{Capítulo 1}
Introdução ao HTML

_{Capítulo 2}
Fundamentos do HTML

_{Capítulo 3}
Estrutura de páginas

_{Capítulo 4}
Folhas de Estilo em Cascata (CSS)

_{Capítulo 5}
Bootstrap

_{Capítulo 6}
Iniciando a construção de um Website

_{Capítulo 7}
Introdução ao PHP

_{Capítulo 8}
Fundamentos do PHP

_{Capítulo 9}
Transformando um Website em dinâmico

_{Capítulo 10}
Introdução ao JavaScript

_{Capítulo 11}
Fundamentos do JavaScript

_{Capítulo 12}
jQuery

_{Capítulo 13}
Bootstrap JavaScript

_{Capítulo 14}
D3.js

_{Capítulo 15}
3Dmol

_{Capítulo 16}
Projeto Final

Epílogo
Referências Bibliográficas

Cite:
MARIANO, DIEGO; de MELO-MINARDI, R. C. . Introdução à Programação Web para Bioinformática: HTML, CSS, PHP & JavaScript. 1. ed. North Charleston, SC (EUA): CreateSpace Independent Publishing Platform, 2017. v. 3. ISBN: 978-1520895154; 403p .