0% acharam este documento útil (0 voto)

9 visualizações

Python Tema4 Parte3 BR v1

Python parte 3

Enviado por

biblioteamo

Direitos autorais

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

9 visualizações

Python Tema4 Parte3 BR v1

Python parte 3

Enviado por

biblioteamo

Direitos autorais

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 43

IBM SkillsBuild | Introducción a Python

Desenvolvimento Web
Estrutura básica em HTML

1
IBM SkillsBuild | Introducción a Python

Índice
Introdução 4
Comentário 6
Estrutura de uma página web 6
Organização del head 6
Organização del body 8
Formatos de texto em HTML 9
Cabeçalho 10
Parágrafos 11
A etiqueta <pre> 13
Hyperlinks 13
Hiperlinks ou links internos. Etiqueta <a> 13
Hiperlinks externos. Atribuição href. 14
Imagens como links 16
Listas 16
Listas não-ordenadas 16
Listas ordenadas 17
Listas de definições ou descrições 17
Tabelas 19
Unificação de células 20
Células de cabeçalho 20
O atributo scope 22
Imagens 23
Vídeos 26
Áudio 27
Formulários 27
Formas de envio de dados a partir de um formulario
html. Métodos get e post 28
Entrada de dados em formulários 29
Text 29
Label 32
Select 33
Textarea 34
Checkbox 35
Radiobutton 36
Botão submit 37
Botão de reset 37
Botão de imagem 37
<fieldset> e <legend> 37
Arquivos anexos 38
Campos ocultos 38
2
IBM SkillsBuild | Introducción a Python

Iframes 39
Vias em HTML 39
Vias de arquivo absolutas 39
Vias de arquivo relativas 40
Apêndice Etiquetas HTML 41

3
IBM SkillsBuild | Introducción a Python

Introdução
Poderíamos dizer que o HTML é usado para criar
páginas web, dar-lhes estrutura e conteúdo.

O padrão atual do HMTL5 consiste em três "idiomas"

HTML (Linguagem de Marcação de Hipertexto, em um, HTML, CSS e Javascript:
HyperText Markup Language em inglês) é uma
"linguagem" composta de etiquetas com as quais - Com HTML, fazemos o "esqueleto" de nossa
dizemos ao programa para nos mostrar textos, página web. A disposição inicial dos títulos,
imagens, vídeos, etc. parágrafos, imagens... etc.
- Com o CSS3, damos a aparência à nossa
A origem do HTML data de 1980, quando o físico Tim página.
Berners-Lee, um trabalhador do CERN (Organização - Com Javascript, fornecemos interatividade e
Européia de Pesquisa Nuclear), propôs um novo animação.
sistema de "hipertexto" para compartilhar
documentos. Um exemplo simples de código HTML poderia ser:

O HTML não é uma linguagem de programação em si,

embora às vezes seja referido coloquialmente como <html>
uma linguagem de programação, é simplesmente <body>
uma série de tags que o navegador interpretará de <p>Esto es un párrafo. Bienvenidos a
uma forma ou de outra para exibir conteúdos
esta página web.</p>
</body>
diferentes na tela.
</html>
HTML é a linguagem utilizada para o
desenvolvimento de páginas na Internet. É composto Este exemplo consiste em 3 tags HTML. Como
por uma série de tags que o navegador interpreta e podemos ver, cada uma das etiquetas deve terminar
molda na tela. O HTML tem tags para imagens, com uma etiqueta de fechamento. Neste caso, o
hiperlinks que nos permitem ir a outras páginas, <html> deve ser fechado com </html>, la etiqueta
quebras de linha, listas, tabelas, etc. <body> com </body> e la etiqueta <p> com </p>.

Classicamente, diz-se que as linguagens de Há muito mais tags que veremos mais tarde, mas
programação incluem três capacidades básicas para devemos ter claro que, em geral, para cada tag que
gerar fluxos de processo: seqüencial (seqüências de abrimos, devemos incluir a tag de fechamento
instruções), condicional (a capacidade de tomar correspondente (há exceções, as veremos mais
decisões ou executar um ou outro processo tarde). Desta forma, obteremos um código HTML
dependendo do valor de um ou mais parâmetros) e bem formado que os navegadores podem interpretar
repetição (a capacidade de repetir um processo um sem ambigüidade.
certo número de vezes). Linguagens clássicas como
C, C++, Java, C#, Visual Basic, Fortran, etc. têm estas Este simples exemplo mostraria o seguinte na tela.
capacidades. O HTML não os tem, não porque é
melhor ou pior, mas porque é algo mais.

Em resumo, poderíamos dizer que o HTML não é uma

linguagem de programação, é uma linguagem de
layout web ou linguagem de tags destinada a criar
estruturas de documentos HTML.

4
IBM SkillsBuild | Introducción a Python

O que aconteceria se uma etiqueta que abrimos não

tivesse uma etiqueta de fechamento
correspondente? Digamos que seria um código HTML
mal construído, e os navegadores podem interpretar
isto de diferentes maneiras. Talvez eles nos mostrem
a página como esperávamos, sem nenhum erro
aparente. Talvez eles nos mostrem uma página de
erro ou o navegador fique em branco. Nosso objetivo
deve ser sempre construir páginas HTML bem
estruturadas e sem ambigüidades, ou seja, usar a
linguagem corretamente para que os navegadores
possam saber exatamente o que pretendemos exibir.

As etiquetas que não têm um par de fechamento são

fechadas com uma sintaxe semelhante a esta:

<meta/>

O HTML está atualmente na versão 5. Estaremos

programando nesta versão porque, em princípio,
todos os navegadores estão otimizados para esta
versão.

Que navegador devemos usar para testar nossas

páginas web?...muito simples, todas elas. Devemos
nos certificar de que nosso website possa ser
visualizado corretamente em qualquer dispositivo.
Um web programador deve testar suas páginas em
todos os dispositivos e navegadores possíveis, pois
pode acontecer que os navegadores interpretem a
página de diferentes maneiras e, em um navegador,
nossa página parece perfeita e, em outro, ela parece
fora de ordem. Se utilizarmos corretamente as regras
HTML, esta situação não deverá ocorrer.

5
IBM SkillsBuild | Introducción a Python

Comentário
<!DOCTYPE html>
A sintaxe para o uso de comentários em HTML5 é: <html>
<head>
<title>Título de la página
 web</title>
...
</head>
Os comentários HTML são visíveis para qualquer
<body>
pessoa que visualize o código fonte da página, mas
Cuerpo de la página web
não são renderizados quando o navegador processa o
</body>
documento HTML. </html>

É uma boa prática comentar o máximo possível do

seu código. Será mais fácil para outro programador
ou mesmo para nós mesmos se voltarmos ao código Por convenção, a página central de qualquer projeto
depois de algum tempo. WEB é normalmente chamada index.html, mas não é
obrigatória.

Estrutura de uma página

Organização del head
web
O head (ou cabeçalho da página) contém os
Uma página web HTML consiste em princípio de duas metadados (dados que o usuário não vê, mas que o
partes distintas, a head e o body, nas quais as tags navegador considera úteis), o title da página e
HTML são distribuídas.: possíveis links para páginas CSS ou Javascript:

A tabela a seguir mostra um resumo dos elementos

que podem ir dentro da etiqueta da head.

Etiqueta Função Obrigatório?

Dá um título ao
<title> Sí
documento HTML
<base> Define via de acesso Não
Define arquivos
<link> Não
vinculados
Define metadados
<meta> tais como descrição Não
e palavras-chave
Delimita scripts
<script> Não
incluídos
Delimita definição de
<style> Não
estilos

6
IBM SkillsBuild | Introducción a Python

Não é necessário que nosso head contenha todas Etiquetas <link>. Eles são usados para indicar que o
essas etiquetas. A única etiqueta obrigatória é title. documento html está relacionado a outro arquivo ou
recurso externo. Ele liga nossa página web com
As meta tags não possuem um par de fechamento.
outras páginas externas, tais como CSS, Javascript,

A etiqueta Description é essencial para os motores etc. Não tem uma etiqueta de fechamento.

de busca, dá uma pista sobre o assunto da página e

Por exemplo:
os ajuda a categorizá-la.

A etiqueta Keywords não é mais tão importante para

também muito importante para os mecanismos de que permitem adicionar cores, bordas, imagens de
busca. Ela só pode conter texto e qualquer outra fundo, etc. aos elementos da página web..
etiqueta não será interpretada. O <title> tag é
Etiquetas <meta>. Elas servem para incluir
obrigatório.
informações que não são exibidas como parte da
<title>Primera página</title> página da web, mas servem para informar aos
navegadores sobre características da página da web,
A ordem das etiquetas é indiferente, exceto pela tais como sua breve descrição e palavras-chave.
etiqueta de link, que, se existir, deve ser colocada
idealmente logo após a etiqueta de title. Exemplo:

Etiqueta <base>. Usado para indicar a URL base se

as URLs relativas forem especificadas dentro da <meta name="description"
content="Programación HTML, CSS y
página web. Por exemplo:
Javascript">
<meta name="keywords" content="curso,
<base web, programación, aprender">
href="http://www.páginaprincipal.com/imag
es/" target="_blank">
Neste caso, as etiquetas dizem aos mecanismos de
busca o conteúdo de nossas páginas (description) e
Isso faria com que, se escrevêssemos "logo.png" algumas palavras-chave (keywords) para sua
como o caminho para uma imagem, esse caminho localização. Isto é muito útil para que nossa página
seria na verdade: apareça nos motores de busca (google, bing, yahoo,
etc.).
http://www.páginaprincipal.com/images/logo.png
Etiquetas <script>. Eles são usados para incluir
código em linguagens de script, tais como javascript.
Veremos isso também mais adiante.

7
IBM SkillsBuild | Introducción a Python

Em muitas páginas, o código JavaScript está incluído

no cabeçalho, que é uma linguagem de programação
Organização del body
que os navegadores são capazes de reconhecer e
interpretar. O código JavaScript pode ser
A etiqueta de fechamento da head é seguida pela
reconhecido porque está incluído entre as tags
etiqueta de abertura do body.
<script></script>:
No body (ou corpo da página) introduzimos a parte
visível da página.
<script>
Aquí iría el código No passado, a página era dividida em células com a
</script> etiqueta <table></table>, mais tarde foi utilizada a
etiqueta <div></div>, que era chamada de modelo
box-container, hoje em dia é utilizado o seguinte
O exemplo a seguir seria uma implementação esquema:
perfeita da head para uma página com conteúdo
HTML e CSS:

Cabeçalho
<head>
<meta charset="utf-8"> Barra de navegação
<meta name="Description"
content="Página de prueba"/>
<meta name="Keywords" content=" HTML,
CSS, Javascript"/> Sidebar Conteúdo principal
<title> Curso de HTML, CSS,
Javascript </title>
<link rel="stylesheet"
href="Hojadeestilos.css"/> Informações legais
</head>

Esta distribuição é indicativa, qualquer elemento

pode ser omitido ou movido de acordo com nosso
projeto. Somente a HEAD e o BODY são obrigatórios,
mas a inclusão de todos estes elementos melhora o
posicionamento SEO.

header e footer podem ser aplicados não apenas ao

documento, mas também a qualquer parte dele, ou
seja, podemos colocar, por exemplo, um header e um
footer dentro de etiquetas section.

8
IBM SkillsBuild | Introducción a Python

Formatos de texto em
HTML

Quando trabalhamos com texto em HTML, temos

uma série de tags que escrevemos em torno da
palavra ou texto e que transformam o texto no
formato que queremos dar a ele. Algumas dessas
etiquetas são depreciadas e não devem ser usadas.
Devido ao seu amplo uso no passado, é útil saber
quais eram os usos tradicionais dessas etiquetas,
mas hoje em dia elas foram substituídas pelos estilos
CSS. No entanto, eles ainda estão disponíveis.

Etiqueta Uso Observaciones

<b>…</b> Texto em negrito Puede ser sustituido por CSS.

<strong>…</strong> Texto em negrito Puede ser sustituido por CSS.

<i>…</i> Italicise text Puede ser sustituido por CSS.

<em>…</em> Italicise text Puede ser sustituido por CSS.

<u>…</u> Texto sublinhado Deprecated. Sustituir por CSS.

<small>…</small> Faça o texto menor Puede ser sustituido por CSS.

<big>…</big> Aumentar o texto Puede ser sustituido por CSS.

<sub>…</sub> Definir texto subscrito Puede ser sustituido por CSS.

<sup>…</sup> Definir texto superescrito Puede ser sustituido por CSS.

<strike>…</strike> Definir o texto como Deprecated. Sustituir por CSS.

riscado
<s>…</s> Definir o texto como Deprecated. Sustituir por CSS.
riscado
<del>…</del> Definir o texto como Puede ser sustituido por CSS.
riscado
Tags e seu uso para adaptar a formatação na programação
HTML

9
IBM SkillsBuild | Introducción a Python

Nosso idioma ficaria assim: Considerando que a saída no navegador ficaria assim:

<!DOCTYPE html>
<html lang="es">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-
scale=1.0">
<title>Document</title>
</head>

<body>
<b>Poner texto en negrita</b><br>
<strong>Poner texto en
negrita</strong><br>
<i>Poner texto en cursiva</i><br>
<em>Poner texto en cursiva</em><br> Cabeçalho
<u>Poner texto subrayado</u><br>
<small>Poner texto más
pequeño</small><br> Os títulos são o que entendemos em qualquer
<big>Poner texto más grande</big><br> comunicado à imprensa como títulos e legendas.
<sub>Poner texto subíndice</sub><br>
<sup>Poner texto As etiquetas <h><</h> são usadas para títulos,
superíndice</sup><br> variando de <h1></h1> a <h6><h/6>, sendo
<strike>Poner texto como <h1></h1> as mais relevantes e <h6><h/6> as
tachado</strike><br> menos importantes. Não apenas mudam o tamanho
<s>Poner texto como tachado</s><br> do texto, os motores de busca também dão
<del>Poner texto como importância a essas etiquetas.
tachado</del><br>
</body> Os próprios cabeçalhos geram uma quebra de linha.

</html> Recomenda-se que haja apenas uma <h1></h1> tag

em cada página da web, pois para fins de SEO o
mecanismo de busca sempre procurará o título da
WEB.

Quando temos vários títulos H, os agrupamos junto

com a etiqueta <hgroup><hgroup/>

10
IBM SkillsBuild | Introducción a Python

Por exemplo, esta seria uma lista de todas as Quando temos vários parágrafos que estão
possíveis etiquetas H disponíveis para nós: relacionados, eles são geralmente agrupados em
uma única etiqueta. <article></article>.

<body> Um atributo amplamente utilizado no passado (agora

<hgroup> depreciado e substituído pelo text-align do CSS) foi o
<h1>Esto es un H1</h1> align, que foi utilizado para definir o alinhamento do
<h2>Esto es un H2</h2> texto dentro do parágrafo.
<h3>Esto es un H3</h3>
<h4>Esto es un H4</h4>
<h5>Esto es un H5</h5>
<h6>Esto es un H6</h6>
</hgroup>
</body>

O resultado em nosso navegador seria:

Para separar um texto de outro ou um parágrafo de

outro, podemos usar uma linha horizontal de um
tamanho ou espessura determinados por nós.
Escrevemos este separador com a etiqueta <hr> e
sua espessura, cor...etc. veremos como mudá-lo
mais tarde usando o CSS:

<p>Esto es un párrafo</p>
<hr>
<p>Esto es otro párrafo bajo una
línea de separación hecha con HR</p>
Parágrafos
Resultado no navegador:
Para dizer ao navegador que queremos colocar o
texto em um parágrafo, devemos escrevê-lo entre as
etiquetas <p> e seu fechamento </p>, com o texto
separado por uma margem em branco acima e
abaixo.

11
IBM SkillsBuild | Introducción a Python

<!doctype html>

<html lang="ES-es">

<head>

<meta name="Description" content="Descripcion de la pagina"/>

<meta name="Keywords" content="Palabras clave, separadas por comas" />

<title>Titulo de mi pagina</title>

</head>

<body>

<p>Esto es un párrafo de texto. Para crear automáticamente un texto de prueba,
escribimos LoremXX, donde XX será el número de palabras que queremos crear. Y a
continuación le damos a la tecla TAB.
</p>

<br>

<pre>
Etiqueta de texto preformateado. El navegador interpreta el texto escrito tal y como
está, respetando los saltos de línea, espacios, etc. indicados.
Por ejemplo, ahora vamos a poner dos saltos de línea

...y luego seguiremos escribiendo.</pre>

</body>

</html> 
Exemplo de trabalho com parágrafos.

12
IBM SkillsBuild | Introducción a Python

A etiqueta <pre> Hiperlinks ou links internos. Etiqueta

<a>
A <pre> tag é chamada de "texto pré-formatado" e Links internos ou bookmarks são links dentro da
permite que o navegador interprete o texto escrito mesma página. Ou seja, clicar em um deles nos
como ele é, respeitando as quebras de linha, levará a uma posição diferente dentro da mesma
espaços, etc. indicados. página que estamos vendo.

Na ausência da tag <pre>, o navegador não leva em Para criar este tipo de ligação, duas operações
conta que o código fonte contém quebras de linha, devem ser realizadas:
espaços, etc. no texto. Por outro lado, usando a
- Estabelecer marcadores (âncoras) ao longo
<pre> tag e fechando-a com sua correspondente tag,
da página (estes são os lugares para os quais
o navegador respeitará as quebras de linha, espaços,
queremos saltar com os links).
tabuladores, etc., indicados no código fonte…
- Coloque links que saltem para os
marcadores.
<body>
O código dos marcadores é criado com o atributos
<p>Esto es un párrafo hecho
name (não recomendado) ou id (recomendado):
sin usar texto preformateado.
A pesar de estar escrito en
diferentes líneas
<a name="nombre_del_marcador">Texto
el navegador lo mostrará todo
asociado al marcador</a> (No recomendado:
seguido
no es aceptado por las nuevas versiones
</p>
de HTML, aunque se usó bastante en el
<br>
pasado).
<pre>Esto es un párrafo hecho
usando texto preformateado.
<a id="nombre_del_marcador">Texto
El navegador lo mostrará
asociado al marcador</a>
tal y como está escrito
en diferentes líneas
</pre> O name ou id de uma tag deve ser único, ou seja, não
</body> pode haver duas tags com o mesmo name ou id
dentro de um documento HTML.

Por exemplo, imaginemos que no início do código de

Hyperlinks nossa página web temos a seguinte linha:

Links ou hiperlinks, também chamados de hipertexto,

<a id="marcadorDeportes">Resumen
são textos ou objetos sobre os quais podemos clicar
sección deportes</a>
para nos levar para outra parte do documento, para
outra página da web no mesmo site ou para outra
página na Internet, entre outras funções.

13
IBM SkillsBuild | Introducción a Python

Podemos colocar um link interno na parte inferior da Isto é útil, por exemplo, se quisermos abrir uma
página para que o usuário possa clicar nele e o página externa ao nosso site, mas sem que o
navegador irá levá-los de volta para o topo da página. visitante perca a nossa. Para isso, usamos o atributo
Ou seja, um link para saltar para um marcador de target com uma das seguintes opções.
página:
Valores de target mais comuns:

_blank: Abre o documento vinculado em uma nova

Pulsa para volver al <a janela do navegador.
href="#marcadorDeportes">Inicio</a>
_self: Esta é a opção padrão. Abre o documento
vinculado no mesmo quadro ou janela em que o link
foi clicado.

Hiperlinks externos. Atribuição href. Exemplo:

Um hyperlink externo é um link para outro site na
Internet (site externo). É um link para qualquer outro
<a href="http://www.miPágina.es"
lugar fora do site atual. Quando colocamos um link title="Titulo del enlace"
externo, digitamos o endereço completo da página, target="_blank">Ir a miPágina.es</a>
incluindo http://www.... Estas rotas incluem http://...
las denominamos rutas absolutas.
Como último ponto, devemos levar em conta que é
No hiperlink, distinguimos as seguintes partes: muito aconselhável colocar um atributo extra toda
vez que colocamos um hyperlink em nossas páginas.
• Abertura e fechamento de hyperlink tags <a> e </a>
Este atributo é 'title' e com ele daremos um título ao
• O atributo href, com um valor indicado pelo sinal de nosso hiperlink.
igual e a URL para a qual o hyperlink é direcionado
Desta forma, obteremos na maioria dos navegadores
dentro das aspas invertidas.
um efeito 'tooltip' que consiste em que quando
• Um texto que é visto pelo usuário como um link. colocamos o cursor sobre o hiperlink aparece uma
informação adicional, que é a que colocamos no
Por exemplo: atributo 'title'.

<a href="http://www.miPágina.es"
title="Titulo del enlace"
target="_blank">Ir a miPágina.es</a>

Alvo Hyperlink. Atributo target

Quando criamos um link, por padrão o navegador

abrirá a página de destino na mesma janela, mas
podemos pedir ao navegador que a abra "à parte", ou
seja, em outra janela.

14
IBM SkillsBuild | Introducción a Python

Exemplo de um website com links internos e consequuntur nobis eveniet ad

externos: laborum aspernatur, quam similique libero
accusamus tempore distinctio deleniti
<!DOCTYPE html> dicta vero? Ab possimus ipsam sit
<html lang="es"> neque aspernatur, rem sed dolores
blanditiis ullam aperiam nemo odio
<head> praesentium ex, maiores
<meta charset="UTF-8"> consequatur expedita? Cum enim unde
<meta http-equiv="X-UA-Compatible" quaerat ex hic voluptatibus aliquam
content="IE=edge"> eaque! Ut odio,
<meta name="viewport" animi ad soluta libero dolorum
content="width=device-width, initial- recusandae! Eos nesciunt rem itaque
scale=1.0"> consectetur. Esse dolores explicabo enim
<title>Document</title> quo
</head> voluptates at numquam excepturi,
quia fugiat. Eligendi dolorem
<body> necessitatibus illum explicabo veniam
<h1 id="titulo">Título de mi perferendis
página</h1> eius officia tempora doloribus!
Excepturi minima dolore deserunt possimus
<p id="parrafo1">Lorem ipsum dolor error dolores! Fugiat, porro eum
sit amet consectetur adipisicing elit. minima ratione numquam tenetur
Eveniet eos aliquid fugiat maiores iure minus, voluptatem quidem molestiae ipsa
voluptate? Iusto hic placeat iste eveniet nobis asperiores alias ipsam
beatae libero consequuntur, sapiente in iure id quibusdam quaerat? Error
quae, velit fuga facere iure consequatur tempora officiis quisquam animi tenetur
quas, suscipit repellendus magni libero dolor aut. Esse maxime
assumenda vero. Architecto repellendus odio dolores quas expedita
delectus itaque neque? Consequatur eos incidunt id consequatur! Deserunt
ea, consequuntur, molestiae officiis
cumque, cupiditate soluta distinctio tempore
doloremque eveniet veritatis et sed libero dignissimos qui vitae odit
inventore fugit architecto tempore nihil? quisquam dolore odio delectus! Vero,
Porro omnis debitis saepe atque cumque
excepturi fuga expedita consequuntur quidem nisi,
consequatur, rerum adipisci quisquam maxime obcaecati, numquam iusto
necessitatibus facilis animi tenetur necessitatibus nobis magnam dicta?
corporis! Sed, rem vero Maxime architecto quibusdam, modi
cum obcaecati recusandae amet accusamus alias amet reprehenderit
deleniti cupiditate assumenda error adipisci enim.
consectetur modi ex dolore explicabo </p>
temporibus suscipit animi <a id="enlace"
laudantium at nobis fugit ipsa aspernatur href="http://www.santillana.es"
ab nam! Provident recusandae ipsam maxime title="www.santillana.es"
rem ducimus.</p> target="_blank">Ir a santillana.es</a>
<p id="parrafo2">Lorem ipsum, dolor <br>
sit amet consectetur adipisicing elit. <a href="#titulo">Inicio</a>
Illo ab expedita facere natus corporis <br>
<br>
15
IBM SkillsBuild | Introducción a Python

<a href="#parrafo3">tercer Listas não-ordenadas

parrafo</a>
Listas sem ordem são aquelas encontradas entre as
</body> etiquetas <ul></ul> (ul indica lista sem ordem), as
etiquetas de abertura e fechamento
</html> respectivamente. Se quisermos acrescentar um novo
ponto, teremos que fazê-lo dentro das tags <li></li>.

Se não indicarmos nada na etiqueta <li>, a bala ou

Imagens como links marca indicando que é um item da lista será gerada
automaticamente. Por padrão, as listas não
ordenadas são compostas de pontos. Mas se
Para colocar uma imagem como um link, basta criar quisermos definir o símbolo da bala ou marca a ser
um link e adicionar uma imagem dentro dele, em vez usada por nós mesmos, devemos indicá-lo
de texto. Vamos ver um exemplo: especificamente. No passado, o atributo "type" era
usado, mas hoje não é recomendado (depreciado).
Com este atributo, a lista poderia ser definida por
pontos negros (li type="disc"), pontilhado com fundo
<a href="http://www.miPágina.es">
branco (li type="circle") ou por quadrados (li
<img
src="http://www.miPágina.es/miImagen.png" type="square").
alt="No se encuentra la imagen">
A sintaxe recomendada para indicar a aparência é
</a>
baseada no uso do CSS, como mostrado abaixo.
Analisaremos mais de perto como isso deve ser feito
corretamente ao visualizar os estilos de CSS para
A sintaxe para a colocação de uma imagem será listas:
discutida posteriormente. No momento, o aprendiz
só precisa entender que as imagens também podem
funcionar como links. <ul style="list-style-type:disc">
<ul style="list-style-type:circle">

Listas
<ul style="list-style-type:square">

Exemplo de uma lista não ordenada:

Listas em HTML nos permitem criar conjuntos de
elementos na forma de uma lista dentro de uma
página, todos geralmente precedidos por um hífen ou <ul>
<li>Primer elemento de la lista
número.
sin ordenar</li>
Os tipos de listas HTML são os seguintes: <li>Segundo elemento de la lista
sin ordenar</li>
- Listas desordenadas <li>Tercer elemento de la lista
- Listas ordenadas sin ordenar</li>
- Listas de definição </ul>

16
IBM SkillsBuild | Introducción a Python

Listas ordenadas Por exemplo, estes seriam vários termos e suas

definições:
Se quisermos definir uma lista ordenada, teremos
que fazê-lo entre as etiquetas <ol> </ol> (ol indica
Termo Definição ou descrição
lista ordenada). Além disso, cada elemento da lista
será escrito com a mesma etiqueta que para listas FTP Protocolo para transmissão de
não ordenadas: <li>. Mas como são listas ordenadas, arquivos entre computadores
os símbolos padrão serão números e estes serão HTML Linguagem de tag utilizada para
gerados automaticamente em ordem, à medida que gerar páginas web
escrevemos novos itens da lista. PHP Linguagem interpretada por
servidor para gerar páginas web
dinâmicas.
<ol>
<li>Primer elemento de la lista
Estes termos e suas definições ou descrições podem
ordenada</li>
ser colocados de várias maneiras dentro de uma
<li>Segundo elemento de la lista
ordenada</li> página da web (como texto simples, como uma lista
<li>Tercer elemento de la lista ordenada, lista não ordenada...) e uma dessas
ordenada</li> maneiras é colocá-la como uma lista de definições.
</ol>
Para criar uma lista de definições, devemos usar as
tags <dl>, <dt> e <dd>. Vamos explicá-las em partes:

Por meio do CSS podemos mudar os tipos de La etiqueta <dl> indica que uma lista de definições
números que nossa lista de pedidos nos mostrará. ou uma lista de descrições estará contida dentro
Veremos que por meio do CSS podemos colocar dela.
números romanos...
La etiqueta <dt> indica que contém um termo que
iremos definir da seguinte forma.
Listas de definições ou descrições
La etiqueta <dd> nos diz que dentro dela está uma
Este tipo de listas não é usado com freqüência, por definição ou descrição associada a um termo. Um
isso vamos citá-las caso encontremos este tipo de termo poderia ter várias descrições. Por exemplo, o
código em uma página da web, para poder termo Autor poderia ter como descrições: Mateo
interpretar seu significado. Listas de definição são Renzi, Olivo Pascua, Jorge Guillén.
usadas quando queremos fazer uma enumeração do
tipo "dicionário", onde temos vários termos e sua As listas de definição serão automaticamente
definição ou descrição. separadas se digitarmos várias delas.

17
IBM SkillsBuild | Introducción a Python

Se desejarmos, podemos combinar alguns tipos de

listas com outros. Por exemplo, ordenaram listas 
<link rel="stylesheet"
href="MiHojaDeEstilos.css"/>
<dl>
<dt>Café</dt> </head>

Todas as listas que temos visto podem ser <ol>
misturadas de acordo com nossas necessidades. Ou <li>Primer elemento de la
seja, podemos colocar listas dentro de outras listas, lista ordenada</li>
criar listas ordenadas dentro de listas não <li>Segundo elemento de la
ordenadas... etc. Qualquer combinação que lista ordenada</li>
possamos pensar é possível. <li>Tercer elemento de la
lista ordenada</li>
Por exemplo: </ol>

<html lang="ES-es"> <!--Inicio de la <!--Lista no

página--> ordenada-->
<ul>
<head>  lista no ordenada</li>
<meta charset="utf-8"/> <li>Segundo elemento de la
lista no ordenada</li>
 lista no ordenada</li>
<meta </ul>
name="Description" content="Descripcion
de la pagina"/> <br>
<br>
 
content="Palabras clave, separadas por <ol>
comas" /> <li>Primer elemento de la
lista ordenada</li>
 <ul>
<title>Titulo de mi
pagina</title>
18
IBM SkillsBuild | Introducción a Python

<li>Segundo de la alguns navegadores têm problemas para renderizar

ordenada y primero de la lista no células vazias. Exemplo: <td> </td>
ordenada</li>
<li>Segundo de la Exemplo de uma tabela simple:
ordenada y segundo de la lista no
ordenada</li>
<li>Segundo de la <table border="1px" >
ordenada y tercero de la lista no <caption>Tabla simple de
ordenada</li> 3x3</caption>
</ul> <tr>
</li> <td>Celda A</td>
<li>Tercer elemento de la <td>Celda B</td>
lista ordenada</li> <td>Celda B</td>
</ol> </tr>
<tr>
<br /> <td>Celda C</td>
<br /> <td>Celda D</td>
<p>Lista por definición</p> <td>Celda E</td>
<br /> </tr>
<dl> <tr>
<dt>Coffee</dt> <td>Celda F</td>
<dd>Black hot drink</dd> <td>Celda G</td>
<dt>Milk</dt> <td>Celda H</td>
<dd>White cold drink</dd> </tr>
</dl> </table>

</body> <!--Fin del BODY-

->
Por padrão, as tabelas HTML não têm bordas. Se
</html> 
devemos especificá-la na declaração da tabela com o
atributo de border seguido da espessura da borda.
Em nosso exemplo, criamos uma borda para nossa

Tabelas página com uma espessura de 1 pixel:

<table border="1px" >

As tabelas podem ser consideradas como um grupo
de linhas onde cada linha contém um grupo de
células (colunas). Uma tabela pode ser inserida em
um documento HTML usando três elementos
básicos: o elemento TABLE (principal contendo a
estrutura), o elemento TR (recipiente de linha) e o
elemento TD (célula).

Quando o conteúdo de uma célula deve estar vazio,

você deve usar um espaço em branco (que em HTML
é escrito como  ) como seu conteúdo. Isto fará
com que sua página seja exibida corretamente, pois
19
IBM SkillsBuild | Introducción a Python

Unificação de células O exemplo a seguir ilustra a fusão vertical de células

em uma tabela:
Em algumas ocasiões, pode ser necessário fundir
duas ou mais células em uma única célula que 
tomará o lugar das células afetadas.
<table border="1">
Estas unificações podem ser realizadas com os <caption>Tabla con celdas unidas
atributos "rowspan" (para unificação vertical) e mediante rowspan</caption>
<tr>
"colspan" (para unificação horizontal).
<th> </th> <!--Celda vacía--
>
<table border="1"> <th>Básico</th>
<caption>Tabla con celdas unidas <th>Completo</th>
mediante coolspan</caption> </tr>
<tr> <tr>
<th>NOMBRE</th> <th>Instalación</th>
<th>Día 1</th> <td rowspan="2">Gratis!</td>
<th>Día 2</th> <td>$49.99</td>
<th>Día 3</th> </tr>
<th>Día 4</th> <tr>
</tr> <th>Primer año</th>
<tr> <td>$19.99</td>
<th>Mike (lastimado)</th> </tr>
<td colspan="3">0 km</td> <tr>
<td>4 km</td> <th>Segundo año</th>
</tr> <td>$9.99</td>
<tr> <td>$29.99</td>
<th>Susan</th> </tr>
<td>23 km</td> </table>
<td>18 km</td>
<td>19 km</td>
<td>15 km</td>
Quando usados juntos na mesma tabela, os atributos
</tr>
de colspan e rowspan devem ser cuidadosamente
</table>
declarados para não produzir células sobrepostas.

Células de cabeçalho
Há dois tipos de células que podem ser definidas em
uma tabela HTML. Uma é a célula simples (elemento
TD), já definida acima, e a outra é um tipo especial de
célula (TH ou elemento de cabeçalho de tabela) que
contém informações de cabeçalho para um conjunto
específico de células.

Os navegadores normalmente representam o

conteúdo de células especiais como texto
centralizado e negrito, atributos que também podem

20
IBM SkillsBuild | Introducción a Python

ser visualmente alcançados usando células normais </tr>

(elemento TD). Então, para que servem estes títulos? <tr>
Quando usamos th a célula é definida como um <td>Reproductor de radio</td>
cabeçalho, ela não se parece apenas com um <td>12.99</td>
cabeçalho. Para usar uma símile, não é a mesma <td>1</td>
<td>12.99</td>
coisa vestir-se como um policial sem ser um, como é
</tr>
ser um policial. Uma célula que se parece com um
<tr>
cabeçalho sem ser definida como tal não é o mesmo
<th scope="row">TOTAL</th>
que uma célula que é realmente definida como um <td>-</td>
cabeçalho. Os navegadores para cegos identificam <td>7</td>
este tipo de títulos e lhes dão um tratamento <td><strong>207.51</strong></
especial. Além disso, alguns mecanismos de busca td>
(bing, google, yahoo) dão um tratamento diferente a </tr>
este tipo de células, e alguns navegadores criam </table>
efeitos especiais para este tipo de células.

Usando o elemento caption, podemos definir o título

No exemplo a seguir, construiremos uma tabela para
de uma tabela. Este título deve descrever de forma
exibir informações sobre o tempo nos próximos dias.
breve e precisa o conteúdo e a natureza da tabela e é
Aqui, as células de cabeçalho, representadas pelo
geralmente representado em algum lugar próximo à
elemento th, são colocadas na primeira linha da
tabela (sua posição pode ser definida usando CSS). O
tabela, acima das células comuns.
elemento caption só é permitido se ele for logo após
a abertura da tabela.
<table border="1px">

<h1>Su pedido</h1> <tr>

<table border="1px"> <th>Hoy</th>
<tr> <th>Mañana</th>
<th scope="col">Nombre <th>Jueves</th>
producto</th> </tr>
<th scope="col">Precio <tr>
unitario</th> <td>Soleado</td>
<th scope="col">Unidades</th> <td>Mayormente soleado</td>
<th scope="col">Subtotal</th> <td>Parcialmente nublado</td>
</tr> </tr>
<tr>
<td>Reproductor MP3 (80
GB)</td> É fácil ver aqui como cada célula do cabeçalho da
<td>192.02</td> tabela fornece informações para o restante das
<td>1</td> células da coluna a que pertence.
<td>192.02</td>
</tr> Alguns agentes, tais como navegadores de voz,
<tr> fazem a mesma análise quando devem informar ao
<td>Fundas de colores</td> usuário qual célula de cabeçalho está associada a
<td>2.50</td> uma determinada célula. Mas em alguns casos, é
<td>5</td> preciso evitar ambigüidades e é por esta razão que o
<td>12.50 </td> HTML fornece alguns atributos como scope.
21
IBM SkillsBuild | Introducción a Python

O atributo scope
<table border="1px">
O atributo scope fornece um mecanismo para indicar <tr>
explicitamente quais células uma célula de <th scope="row">Día</th>
cabeçalho afeta. Este atributo só pode ser declarado <th>Hoy</th>
em uma célula de cabeçalho e pode tomar os valores <th>Mañana</th>
"col", "row", "colgroup" e "rowgroup". Os valores <th>Jueves</th>
"col" e "row" indicam que a célula de cabeçalho </tr>
<tr>
fornece informações para as demais células da
<th>Condición</th>
coluna ou linha (respectivamente) em que ela está
<td>Soleado</td>
presente. Os outros dois valores farão sentido mais
<td>Mayormente soleado</td>
tarde, neste tutorial. <td>Parcialmente nublado</td>
</tr>
No exemplo a seguir, a tabela apresentada acima foi
<tr>
melhorada com mais células de cabeçalho, a fim de
<th>Temperatura</th>
aumentar a legibilidade. Aqui, a célula no canto <td>19°C</td>
superior esquerdo da tabela forneceria informações <td>17°C</td>
ambíguas se o atributo scope não estivesse presente. <td>12°C</td>
Em outras palavras, isso afetaria as células de sua </tr>
coluna, bem como as células de sua fila. <tr>
<th>Vientos</th>
A presença do atributo scope deixou claro que as <td>E 13 km/h</td>
células afetadas por este cabeçalho são aquelas na <td>E 11 km/h</td>
mesma linha. <td>S 16 km/h</td>
</tr>
</table>

22
IBM SkillsBuild | Introducción a Python

Imagens

As imagens dentro de uma página web são incluídas

usando a tag <img>, que não tem uma etiqueta de
fechamento correspondente.

Ao utilizar la etiqueta <img>, dentro da imagem você

tem que especificar o caminho onde a imagem está
localizada, seja um caminho para um diretório em
seu disco rígido ou para um endereço de internet.
Isto é feito com o src.

Outro atributo, que não é obrigatório, mas altamente

recomendado, é o atributo alt, o que nos permite
exibir uma mensagem caso a imagem não possa ser
encontrada.

O atributo tittle nos permite dar um título à nossa

imagem, altamente recomendado para o
posicionamento SEO.

Neste exemplo, exibimos uma imagem em nosso site

especificando seu endereço na Internet com o
atributo src, demos-lhe um texto alternativo com o
atributo alt, que será exibido no caso da imagem não
ser encontrada, e demos-lhe o título "título da foto".

Os formatos de imagem mais utilizados são JPG, GIF

e PNG. O ideal é usar o formato .jpg sempre que
possível, pois ele proporciona uma qualidade de
imagem muito boa sem ser muito pesado.

A tabela a seguir resume os atributos que podem ser

encontrados quando se trabalha com imagens:

23
IBM SkillsBuild | Introducción a Python

Atributo Observações Uso

Este atributo é obrigatório e indica o nome do

Obrigatório. Se não for incluída,
src arquivo de imagem (entre aspas) ou a URL da
nenhuma imagem será exibida.
qual a imagem deve ser recuperada.

Permite controlar o alinhamento de uma imagem

em relação a uma linha de texto adjacente ou a
align Atributo depreciado. Substituir por CSS.
outras imagens nessa linha. Os valores possíveis
são os familiares left, right, middle, top, bottom.

Entre aspas podemos escrever um texto que será

Atributo obrigatório, recomenda-se
exibido se a imagem não carregar, enquanto está
alt incluí-lo, mas se não, a imagem será
carregando ou, quando a imagem já estiver
exibida.
exibida, passamos o mouse sobre ela.

Este atributo é opcional, mas podemos

configurá-lo para especificar o navegador para
exibir a imagem em um tamanho específico. Opcional. Indicar o valor em pixels.
width
Significa "largura da imagem" que vamos Também pode ser indicado com CSS.
renderizar. Se não for digitada, a imagem é
carregada com o tamanho original.

Assim como o atributo width, é opcional. Este Opcional. Indicar o valor em pixels.
height
atributo indica a altura da imagem. Também pode ser indicado com CSS.

Com borda, especificamos a largura da borda ao

border redor da imagem. Se for especificado 0, isto é Atributo depreciado. Substituir por CSS.
equivalente a "nenhuma fronteira”.

Tabela resumida dos atributos que podem ser

encontrados quando se trabalha com imagens.

NOTA: Quando usamos tanto width e height, nossa

imagem pode ser deformada. Para evitar isso,
usaremos apenas um dos dois. Desta forma, as
proporções de nossa imagem permanecerão as
mesmas.

24
IBM SkillsBuild | Introducción a Python

Note que ao especificar o endereço da imagem, se Para melhorar o posicionamento SEO, é aconselhável
esta imagem estiver em nosso próprio servidor usar a etiqueta <img> dentro de um
podemos usar um endereço relativo, ou seja, estas <figure></figure>. Esta etiqueta não é usada apenas
duas expressões seriam igualmente válidas: para inserir imagens, mas também qualquer
elemento multimídia, vídeos, sons, animações,
flash…
<img
src="http://www.mipaginaweb.com/logo.png"
alt="No se encuentra la imagen">
<figure>
<img src=" logo.png" alt=" No se <img src="images/miImagen.jpg"
encuentra la imagen "> width="400" height="297"
alt="No se encuentra la imagen"/>
<figcaption>Descripción de la
imagen</figcaption>
Também podemos usar outro servidor como fonte da

imagem, o que significa que o navegador irá procurar
</figure>
a imagem no caminho que indicamos. Mas, neste
caso, devemos especificar o caminho completo, um
caminho relativo não será válido. Exemplo: Nota: Você tem que ter muito cuidado com a
questão dos direitos autorais sobre as imagens.
O Google tem uma opção de busca de imagens
<img livres de royalties:
src="http://images4.hiboox.com/images/471
1/ee5a70e6198e.jpg"
alt=" No se encuentra la imagen ">

O HTML também nos dá a opção de colocar uma

legenda de imagem para descrever o conteúdo de
nossas imagens.

Para colocar uma legenda de imagem, usaremos a O atributo title responsável por fornecer um
etiqueta: <figcaption></figcaption> elemento de texto na forma de uma descrição pop-
up (tooltip) quando o ponteiro do mouse é
posicionado sobre a imagem.

25
IBM SkillsBuild | Introducción a Python

Sua missão é fornecer informações adicionais ao Ela tem os seguintes atributos:

usuário sobre esse elemento.
• Src: Permite especificar onde o vídeo está
localizado.
<img src="images/luna.jpg" • Controls: Adicionar controles visuais em vídeo.
title="luna naranja y un árbol" /> • Autoplay: O vídeo é executado automaticamente
quando a página é carregada.
• Loop. O vídeo joga em loop.
• Poster: Permite definir uma imagem .jpg que
aparecerá antes que o vídeo seja reproduzido.
• Preload: Permite que você especifique algumas
características do vídeo antes de ser carregado.
Por exemplo, quantos quadros o vídeo tem, sua
duração …

<video id="video" width="720px"

controls loop autoplay>
<source
src="file://C:/Users/video.mp4">
<source
src="file://C:/Users/video.ogg">
</video>

Vídeos
Para melhorar os aspectos de acessibilidade, é
permitido acrescentar legendas em formato vtt. Isto
Trabalhar com vídeos é muito semelhante a trabalhar é feito usando a etiqueta track, o que permitirá uma
com imagens. nova opção nas opções do jogador.

Que formatos os navegadores suportam atualmente?

<track label="Español" kind="subtitle
Navegador MP4 WebM Ogg s" srclang="es" src="subtituloses.vtt"
default>
Internet Explorer SÍ NÃO NÃO
Chrome SÍ SÍ SÍ
Firefox SÍ SÍ SÍ
Safari SÍ NÃO NÃO Se quisermos embutir em nossa página HTML do
Opera SÍ (a SÍ SÍ YouTube, devemos fazer isso com a tag <iframe>.
partir de
Opera
25)
Para fazer isto, na página de vídeo do youtube, clique
com o botão direito em um menu pop-up e clique na

A etiqueta que nos permite utilizar vídeos é a tag opção para copiar o "código embutido”:

<video></video>.

26
IBM SkillsBuild | Introducción a Python

Os formatos suportados por HTML são .mp3 e .ogg.

A etiqueta que nos permite utilizar o áudio é

Ela tem os seguintes atributos:

• Src: Necessário para especificar o caminho do

arquivo de áudio.
• Controls. Exibe o painel de controle de áudio,
Agora copiamos para nossa prancheta o código com botões como play, stop, volume+, volume-…
necessário para incorporar o vídeo em uma página • Autoplay: Especifica que o áudio toca
HTML. Nós o incluímos em nossa página web e é isso: automaticamente quando a página é carregada.
• Loop: Especifica que o áudio é reproduzido em
loop.
<iframe width="640" height="360"

Formulários
src="https://www.youtube.com/embe
d/fOW8Y09GVek"
title="Paisajes Hermosos del
Mundo 4K"
frameborder="0" Os formulários HTML têm o propósito de coletar
allow="accelerometer; autoplay; informações fornecidas pelos visitantes do site, que
clipboard-write; encrypted-media; são então enviadas de volta ao servidor para serem
gyroscope; processadas.
picture-in-picture"
allowfullscreen> Para seu correto funcionamento, é importante que o
</iframe> formulário fornecido em HTML seja acompanhado
por um código do lado do servidor, que chamaremos
de "agente de processamento", que se encarregará
de receber e processar as informações como o autor
Às vezes podemos descobrir que o vídeo do youtube
julgar conveniente. Este processamento pode
parece preto. Isto porque o vídeo é protegido por
consistir, por exemplo, em armazenar as informações
direitos autorais e não é permitido ser usado em
ou enviá-las por e-mail.
outros sites.

Um formulário, identificado em HTML pelas tags

Áudio <form></form>, é basicamente um recipiente para
controles. Cada controle, em um formulário, tem o
objetivo de coletar informações inseridas pelos
O uso de áudio em páginas web não é recomendado usuários, em formulários que podem variar de linhas
atualmente. É um pouco desconfortável para o de texto, a upload de arquivos, a opções, datas,
usuário, especialmente quando você abre várias senhas e muito mais. Uma vez que os usuários
páginas e cada uma toca uma canção, tudo ao tenham preenchido o formulário com dados, eles
mesmo tempo. Entretanto, é interessante saber podem enviá-lo de volta ao servidor para que o
como utilizar esta ferramenta. agente de processamento gerencie as informações
coletadas.
27
IBM SkillsBuild | Introducción a Python

Os usuários interagem com os formulários através método ideal é o método post, onde os dados
dos chamados controles. Um controle é definido, de inseridos não são visíveis na URL.
forma simplificada, como um objeto que aparece na
Enctype, permite que você carregue arquivos para o
tela e que pode ser modificado pelo usuário. Por
servidor. Pode ser:
exemplo, um botão, uma caixa de texto, um menu
suspenso... etc.

<form enctype="application/x-www-form-
Os formulários geralmente têm uma etiqueta action
urlencoded"></form>
que se refere à página para a qual as informações no
formulário irão:

Ou también:
<form action ="pagina.php"></form>

<form enctype="multipart/form-
Se não vai ser enviado para nenhuma outra página, é data"></form>
deixado vazio para enviar as informações para a
mesma página em que estamos.
Este último significa que você pode enviar arquivos
do formulário para o servidor, carregar arquivos... etc.

<form action =""></form> Com accept, indicamos que tipo de arquivos nos
permite fazer upload:

Isto geralmente é seguido pelo atributo method, que

pode ser post ou get. <form enctype="multipart/form-data"
accept-charset="UTF-8"></form>
A diferença entre os métodos get e post reside na
forma como os dados são enviados para a página
quando o botão "Enviar" é pressionado. Enquanto o
método get envia os dados usando o URL, o método
post envia-os de uma forma que não podemos vê-los
Formas de envio de dados a partir de
(no fundo ou "escondidos" do usuário). um formulario html. Métodos get e
post

No exemplo a seguir, podemos ver o resultado de um Quando um usuário preenche um formulário em uma
página web, os dados têm que ser enviados de
formulário feito com o método get:
alguma forma. Vamos considerar as duas maneiras
possíveis de enviar dados: usando o método POST ou
usando o método GET.

Por exemplo:
Você pode ver como os dados inseridos no formulário
aparecem na URL da página quando ela é enviada ao
servidor. Este método é muito pouco confiável, pois é <form action="http://www.curso de
fácil de interceptar os dados se você souber como. HTML.com/prog/newuser" method="get">
Portanto, sempre que formulários são enviados, o

28
IBM SkillsBuild | Introducción a Python

No exemplo acima, a ação que será executada Entrada de dados em formulários

quando o usuário clicar no botão "Enviar" (submit)
será enviar os dados para a url especificada usando o Os controles de entrada de dados em formulários são
método get. geralmente controles visuais e permitem que o
usuário insira dados ou selecione opções. Seu uso
Como já mencionamos, a diferença entre os métodos depende do tipo de controle e também do tipo de
get e post reside na forma como os dados são informação que eles podem recuperar.
enviados para a página quando o botão "Submit" é
clicado. Enquanto o método get envia os dados Os elementos de entrada de um formulário podem
usando o URL, o método post envia-os de uma forma ser definidos através do uso desses elementos:
que não podemos vê-los (no fundo ou "escondidos"
do usuário). HTML input, HTML textarea, HTML select e outros
elementos HTML.
Um resultado usando o método get, como exemplo,
poderia ser assim: O resto das etiquetas já vão dentro da forma, entre
outras, temos:
http://www.CursodeHTML.com/newuser.php?nombr
e=Pepe&apellido=Flores&email=h52turam%40uco.e
s&sexo=Mujer Text
<input type="text" name ="miFormulario"
Neste URL podemos distinguir várias partes: id="etiquetaText" value="Angel" >

http://www.CursodeHTML.com/newuser.php
Cria uma caixa para que o usuário insira os dados e
os envie. Com textarea, fazemos o mesmo, mas
é o próprio website.
criamos uma janela maior. Para enviar os dados:
O símbolo ? indica onde começam os parâmetros que
são recebidos do formulário que enviou os dados <input type="submit"> // Com isto crio o botão de
para a página. envio.

O símbolo ? é seguido por pares de dados com seu

nome e valor separados pelo símbolo &. O name é o nome ao qual nos referiremos ao enviá-lo
ao servidor, ou seja, se o nomearmos myForm, o
Os pares data1=valor1, data2=valor2,
recuperaremos com $_post(“miFormulario”) ou
data3=valor3... refletem o nome e o valor dos
com $_get(“miFormulario”)
campos enviados pelo formulário.

Por exemplo: name=Pepe, sobrenome=Flores, etc. Com value mudamos o texto que aparece no botão.
nos diz que o campo do formulário nomeado nome
chega com o valor "Pepe" enquanto o campo do <input type="submit" value="Aceptar">

formulário nomeado sobrenome chega com o valor

"Flores". Estes valores são recebidos na página web
de destino do formulário.

Note que para separar o primeiro par do próprio

endereço web usamos o símbolo '?' e para separar os
pares restantes um do outro usamos o símbolo ‘&’.
29
IBM SkillsBuild | Introducción a Python

Por exemplo: Desta forma, não armazenará mais as entradas

anteriores na memória.

<form> A etiqueta type em HTML5 já está preparada para

<input type="text" name tomar e validar os seguintes valores:
="miFormulario" id="etiquetaText"
value="Angel"> • Text: Etiqueta e tipo de texto genérico.
<input type="submit" value="Aceptar"> • Email: Etiqueta de tipo de endereço de e-mail.
</form> • Search: Etiqueta do tipo de busca.
• URL: Etiqueta do tipo de endereço da página
WEB.

Ele criaria um pequeno formulário com uma etiqueta • Tel: Etiqueta de tipo de número telefônico.

de texto (cujo valor padrão é "Angel") e um botão de • Number: Etiqueta de tipo de número genérico.
Juntamente com MIN, MAX e STEP.
submissão (submit) ao qual definimos o valor padrão
para "Accept" (Aceitar) • Range: Etiqueta do tipo faixa de valores.
Juntamente com MIN, MAX e STEP.
• Date: Tipo de data.
o Week.
o Month.
o Time.
Os elementos de tipo text geralmente têm um
o Datetime.
comportamento auto-completo por padrão, ou seja,
eles geralmente mantêm as entradas anteriores na
memória, por exemplo, neste caso, já preenchemos o
formulário duas vezes antes com os valores "Manolo" No exemplo a seguir, implementamos um formulário
e "Manuel". de amostra que inclui as etiquetas acima
mencionadas:
Quando começamos a preencher o formulário pela
terceira vez, o HTML sugere as entradas anteriores:
<form name="formulario" id="formulario"
method="get" autocomplete="off">
Email: <input type="email"
name="mail" id="mail">
<input type="submit"
value="Aceptar"><br><br>
Edad;
<input type="number" name="edad"
id="edad" min="18" max="100">
<input type="submit"
value="Aceptar">br><br>
Para mudar isso, temos duas etiquetas disponíveis:
Buscar:
• Autocomplete(on/off). <input type="search" name="buscar"
• Novalidate(boolean). Se o definirmos, dizemos a id="buscar"><br><br>
URL:
ele para não avaliar o formulário.
<input type="url" name="URL"
<form name="formulario" id="formulario" id="URL"><br><br>
method="get" autocomplete="off"> Edad:

30
IBM SkillsBuild | Introducción a Python

<input type="number" name="edad" Com o atributo multiple, podemos enviar mais de um

id="edad" min="0" max="100" step="5" dado dentro de um campo. Os dados são separados
placeholder="Introduce edad"><br><br> por vírgulas.
Rango: <input type="range" min="0"
max="100" step="5"><br><br> Autofocus traz o "foco" para o elemento de sua
Fecha: <input type="date" escolha.
name="fecha" id="fecha"><br><br>
Hora: <input type="time" name="hora" Pattern personaliza o campo, definindo faixas
id="hora" required><br><br> personalizadas. Ou seja, permite-nos incluir
Código postal: <input pattern="(0- expresiones regulares dentro do input.
9){5}" placeholder="5 dígitos" br><br>
<input type="submit" Form constrói um elemento da forma fora da própria
value="Enviar"><br><br> forma. Preciso acrescentar o nome do meu
</form> formulário:

Email2: <input type="email2" name="mail2"

id="mail2" form="formulario">

Datalist: Cria uma lista de itens a partir da qual o

usuário terá que escolher um.

<form name="formulario" method="get">

<datalist id="informacion">
<option value="952773366"
label=" Telefono 1"></option>
<option value="952734366"
label=" Telefono 2"></option>
<option value="952773236"
label=" Telefono 3"></option>
</datalist>
Telefono:
<input type="tel" name="telefono"
id="telefono" list="informacion">
</form>

Outras etiquetas:

Com placeholder adiciono um texto que dá ao

usuário uma dica de como preencher um campo. Ela
desaparecerá quando o usuário começar a digitar.

Com o atributo required, definimos um campo como

obrigatório.

31
IBM SkillsBuild | Introducción a Python

Vamos ver o que adicionamos:

Definimos um id para a marca input. Ou seja, nós lhe

demos um "pseudônimo" com o qual podemos nos
referir a ele.

O elemento label tem sua etiqueta de abertura e

fechamento, no meio está o texto a ser exibido.

Para vincular esta label com o elemento input,

devemos rubricar o propiedade for com o nome
atribuído à propriedade id do elemento input.

Vamos montar um exemplo completo:

<form action="registrardatos.php"
method="post">
Label <fieldset>
<legend>Formulario de
Até agora, sempre que queríamos colocar uma comentarios.</legend>
mensagem antes ou depois de um controle de <label for="nombre">Ingrese su
formulário, nós apenas a escrevíamos. nombre:</label>
<input type="text" name="nombre"
Há um elemento em HTML que permite associar um size="30" id="nombre"><br>
texto a um controle de formulário. Isto será muito útil <label for="mail">Ingrese su
se você estiver acessando de um navegador não mail:</label>
gráfico ou uma pessoa cega usando um programa <input type="text" name="mail"
que lê em voz alta o conteúdo da página. size="50" id="mail"><br>
<label
Vamos ver como o fizemos até agora: for="comentarios">Comentarios:</label><br
>
Digite seu nome: <textarea name="comentarios"
rows="5" cols="60" id="comentarios">
</textarea>
<input type="text" name="nombre"
<br>
size="20">
<input type="submit"
value="Enviar">
</fieldset>
Usando o elemento label, podemos fazer uma </form>
referência entre o texto e o controle de entrada:

O resultado no navegador é:
<label for="nombre">Ingrese su
nombre:</label>
<input type="text" name="nombre"
size="20" id="nombre">

32
IBM SkillsBuild | Introducción a Python

Como podemos ver, associamos cada etiqueta com o Select

controle de entrada correspondente:
O elemento <select> define uma lista suspensa a
partir da qual o usuário escolherá uma das opções
<label for="nombre">Ingrese su que lhe oferecemos:
nombre:</label>
<input type="text" name="nombre"
size="30" id="nombre"><br> <form action="/action_page.php"
method="get" enctype="multipart/form-
data" accept-charset="UTF-8">
<select name="peliculas">
<option
<label for="mail">Ingrese su value="Superman">Superman</option>
mail:</label> <option
<input type="text" name="mail" value="Spiderman">Spiderman</option>
size="50" id="mail"><br> <option
value="Batman">Batman</option>
</select>
</form>

<label
for="comentarios">Comentarios:</label><br
> Daria como saída:
<textarea name="comentarios" rows="5"
cols="60" id="comentarios">
</textarea>

Normalmente, as propriedades id e name dos

controles de entrada (input, textarea...) recebem o
mesmo nome, embora não seja obrigatório. A etiqueta value é para que o backend receba o valor
e normalmente é definida para o mesmo valor que no
A propriedade for da etiqueta label se refere à id do <option>
controle e não ao name, isto é importante se
rubricarmos a id e name dos controles com valores Os elementos <option> define uma opção que pode
diferentes. ser selecionada.

Por padrão, o primeiro item da lista suspensa é

selecionado.

33
IBM SkillsBuild | Introducción a Python

Para definir uma opção pré-selecionada, adicione o

atributo selected à opção:

<form action="/action_page.php"
method="get" enctype="multipart/form-
data" accept-charset="UTF-8">
<select name="peliculas"> Use o atributo multiple para permitir que o usuário
<option selecione mais de um valor:
value="Superman">Superman</option>
<option value=" Spiderman "
selected> Spiderman</option> <form action="/action_page.php"
<option method="get" enctype="multipart/form-
value="Batman">Batman</option> data" accept-charset="UTF-8">
</select> <label for="cars">Choose a
</form> car:</label>
<select id="cars" name="cars"
size="4" multiple>
<option
value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

Usaremos o atributo size para especificar o número

de valores visíveis: Textarea
Com o elemento text definimos uma área de entrada
<form action="/action_page.php" de texto de uma linha.
method="get" enctype="multipart/form-
O elemento <textarea> define um campo de entrada
data" accept-charset="UTF-8">
<label for="cars">Elija un modelo de com várias linhas (uma área de texto):
coche:</label><br>
<select id="cars" name="cars"
<form action="" method="get">
size="3">
<textarea name="message" rows="10"
<option
cols="30">
value="volvo">Volvo</option>
Aquí el usuario puede escribir un
<option value="saab">Saab</option>
texto más extenso que si usáramos el
<option value="fiat">Fiat</option>
atributo text.
<option value="audi">Audi</option>
</textarea>
</select>
</form>
</form>

34
IBM SkillsBuild | Introducción a Python

O atributo rows especifica o número visível de linhas

em uma área de texto.

O atributo cols especifica a largura visível de uma

área de texto.
Checkbox
É assim que o código HTML acima será exibido em
um navegador: As checkbox são controles de formulário que
permitem que o usuário selecione e desmarque as
opções individualmente. Embora várias checkbox
sejam às vezes exibidas juntas, cada uma é
completamente independente das outras. Por este
motivo, eles são usados quando o usuário pode ativar
e desativar várias opções relacionadas, mas não
mutuamente exclusivas.

Você também pode definir o tamanho da área de

texto usando o CSS:

<form action="" method="get">

<textarea name="message"
<form action="" method="get">
style="width:200px; height:600px;">
Puestos de trabajo buscados <br/>
Aquí el usuario puede escribir un
<input name="puesto_directivo"
texto más extenso que si usáramos el
type="checkbox" value="direccion"/>
atributo text.
Dirección<br>
</textarea>
<input name="puesto_tecnico"
</form>
type="checkbox" value="tecnico"/>
Técnico<br>
<input name="puesto_empleado"
type="checkbox" value="empleado"/>
Empleado<br>
</form>

35
IBM SkillsBuild | Introducción a Python

Exemplo:

Selecciona tus intereses:<br/>

<input name="Peliculas" type="checkbox"
/>Películas<br/>
El valor del atributo type para estos controles de <input name="Libros" type="checkbox"
formulario es checkbox. Como mostrado no exemplo checked="checked"/>Libros<br/>
acima, o texto ao lado de cada checkbox não pode <input name="Deportes" type="checkbox"
ser definido por nenhum atributo, portanto, ele />Internet<br/>
precisa ser adicionado manualmente fora do controle
do formulário. Se nenhum texto for adicionado ao
lado do <input /> de checkbox, o usuário vê apenas
um pequeno quadrado sem qualquer informação a
respeito da finalidade da checkbox.

O valor do atributo value, junto com o valor do

atributo name, é a informação que chega ao servidor
quando o usuário submete o formulário.
Radiobutton
Os controles radiobutton são similares aos controles
Se você deseja exibir uma checkbox selecionada por por checkbox, mas têm uma diferença muito
padrão, o atributo checked é utilizado. Se o valor do importante: eles são mutuamente exclusivos. Os
atributo for checked, a checkbox é mostrada radiobutton são usados quando o usuário só pode
selecionada. Caso contrário, a checkbox permanece escolher uma opção entre várias opções relacionadas
desmarcada. Embora seja redundante que o nome do apresentadas a ele. Cada vez que uma opção é
atributo e o valor sejam idênticos, é obrigatório selecionada, a outra opção que foi selecionada é
indicá-lo desta forma porque os atributos em XHTML automaticamente desmarcada.
não podem ter valores vazios:

Sexo: <br/>
<input type="checkbox" <input type="radio" name="sexo"
checked="checked" ... /> Checkbox value="hombre"/>Hombre<br>
seleccionado por defecto <input type="radio" name="sexo"
value="mujer" />Mujer

36
IBM SkillsBuild | Introducción a Python

O valor do atributo type para estes controles de O valor do atributo type para este controle de
formulário é o radio. O atributo do name é usado para formulário é reset. Quando o usuário clica neste
indicar quais radiobutton estão relacionados. botão, o navegador limpa todas as informações
Portanto, quando vários radiobutton têm o mesmo inseridas e exibe o formulário em seu estado original.
valor no atributo de seu name, o navegador sabe que Se o formulário originalmente não continha nenhum
eles estão relacionados e pode desmarcar uma valor, o botão reset retorna o formulário a um estado
opção no grupo de radiobutton quando outra opção é vazio. Se o formulário continha informações, o botão
selecionada. de reset exibe novamente as informações originais.

Como de costume para os botões de formulário, o

Botão submit atributo value permite definir o texto que o botão
exibe. Se este atributo não for utilizado, o navegador
A maioria dos formulários tem um botão para enviar
exibe o texto predefinido do botão, que neste caso é
os dados inseridos pelo usuário para o servidor:
Reset.

<input type="submit" name="buscar"

value="Buscar" />
Botão de imagem
A aparência dos botões do formulário pode ser
completamente personalizada, pois é até possível
usar uma imagem como um botão:

O valor do atributo type para este controle do <input type="image" name="enviar"

formulário é submit. O navegador envia src="accept.png"/>
automaticamente os dados quando o usuário clica
neste tipo de botão. O valor do atributo value é o
texto exibido pelo botão. Se o atributo value não
estiver definido, o navegador exibe o texto pré-
definido Enviar.
O valor do atributo type para este controle de
formulário é image. O atributo src indica a URL da
Botão de reset imagem a ser exibida pelo navegador ao invés do
Embora seu uso fosse muito popular há alguns anos, botão normal.
a maioria das formas modernas não usa mais este
Sua principal vantagem é que permite personalizar
tipo de botão. É um botão especial que apaga todos
completamente a estética dos botões e exibi-los com
os dados inseridos pelo usuário e retorna o
uma aparência homogênea em todos os
formulário ao seu estado original:
navegadores. A principal desvantagem é que ele
retarda o carregamento do formulário e que, se você
<input type="reset" name="limpiar" quiser mudar sua aparência, é necessário criar uma
value="Borrar datos" /> nova imagem.

<fieldset> e <legend>
O elemento <fieldset> é usado para agrupar dados
relacionados em um formulário.
37
IBM SkillsBuild | Introducción a Python

O elemento <legend> define um título para o

elemento <fieldset>. Fichero adjunto
<input type="file" name="adjunto" />
Exemplo:

<form action="/action_page.php">
<fieldset>
<legend>Datos de contacto:</legend>
<label
for="name">Nombre:</label><br> O valor do atributo type para este controle de
<input type="text" id="name" formulário é file. O navegador é responsável por
name="name" value="Andrés"><br> exibir uma caixa de texto com o nome do arquivo
<label
selecionado e um botão para navegar pelos diretórios
for="apellido">Apellido:</label><br>
e arquivos no computador do usuário.
<input type="text" id="apellido"
name="apellido" value="García"> Se você incluir um controle de arquivo anexo, é
<br><br> obrigatório adicionar o atributo enctype no <form> do
<input type="submit"
formulário. O valor do atributo enctype deve ser
value="Submit">
multipart/form-data, então la etiqueta <form> dos
</fieldset>
formulários que permitem anexos de arquivos é
</form>
sempre:

É assim que o código HTML acima será

Arquivos anexos
Os formulários também permitem anexar arquivos Campos ocultos
para upload para o servidor. Embora do ponto de Os campos ocultos são usados para adicionar
vista do HTML e do navegador não haja limitação
informações ocultas ao formulário:
quanto ao número, tipo ou tamanho total dos
arquivos que podem ser anexados, todos os
servidores acrescentam restrições por razões de <input type="hidden" name="url_previa"
segurança. value="/articulo/primero.html"/>

38
IBM SkillsBuild | Introducción a Python

O valor do atributo type para este controle de A maioria dos vídeos que importamos do youtube
formulário é hidden. Os campos ocultos não são estará neste formato Iframe.
exibidos na tela, portanto o usuário não sabe que o
formulário os inclui. Normalmente são usados Vias em HTML
campos ocultos para incluir informações que são
necessárias ao servidor, mas que não são
necessárias ou possíveis de serem definidas pelo Um caminho de arquivo descreve a localização de um
usuário. arquivo na estrutura de pastas de um website.

• <img src="imagen.jpg">: O arquivo "imagen.jpg"

Iframes está localizado na mesma pasta que a página
atual.
• <img src="imágenes/imagen.jpg">: O arquivo
Um iframe ou frame flutuante HTML é usado para
"imagen.jpg" está localizado na pasta de imagens
exibir uma página da web dentro de uma página da
da pasta atual.
web. Por exemplo, para mostrar um vídeo do youtube
• <img src="/imágenes/imagen.jpg">: O arquivo
dentro de nossa página web, como vimos na seção de
"imagen.jpg" está localizado na pasta de imagens
vídeos.
na raiz do site atual.
Sintaxe: • <img src="../imagen.jpg">: O arquivo
"image.jpg" está localizado na pasta um nível
acima da pasta atual.
<iframe src="url"
title="description"></iframe> Os caminhos de arquivos são usados quando se
ligam a arquivos externos, tais como:

• páginas web
Sugestão: é uma boa prática incluir sempre um
• Imagens, vídeos ou áudio.
atributo de title para o arquivo <iframe>. Os leitores
• folhas de estilo
de tela utilizam-no para ler o conteúdo do iframe.
• JavaScripts

Usaremos os atributos height e width para

especificar a largura e a altura do iframe ou, se não Vias de arquivo absolutas
for o caso, o faremos com CSS.
Um caminho de arquivo absoluto é a URL completa
de um arquivo:

A altura e a largura são especificadas em pixels por

padrão: <img
src="https://cdn.pixabay.com/photo/2015/0
Exemplo: 4/23/22/00/tree-736885_1280.jpg" alt="No
se ha encontrado la imagen.">

39
IBM SkillsBuild | Introducción a Python

Vias de arquivo relativas

Um caminho de arquivo relativo aponta para um
arquivo relativo à página atual.

No exemplo a seguir, o caminho do arquivo aponta

para um arquivo na pasta de imagens localizada na
raiz da página web atual:

Desta vez, devemos ter a imagem chamada

picture.jpg no diretório que especificamos "imagens"
em nosso disco rígido ou servidor.

No exemplo a seguir, o caminho do arquivo aponta

para um arquivo na pasta de imagens localizada na
pasta um nível acima da pasta atual:

Recomenda-se o uso de caminhos de arquivos

relativos (se possível).

Ao utilizar caminhos de arquivos relativos, suas

páginas web não serão vinculadas à sua URL base
atual. Todos os links funcionarão em seu próprio
computador (localhost), assim como em seu domínio
público atual e em seus domínios públicos futuros.

40
IBM SkillsBuild | Introducción a Python

Apêndice Etiquetas HTML <canvas> Usado para desenhar gráficos na

tela
<caption> Define o título de uma tabela
<cite> Define o título de uma obra. Livros,
Etiqueta Função
filmes...
<dl> Define uma lista de definição
 Define um comentário
<dt> Define um termo (um item) em uma
lista de definição
<!DOCTYPE> Define o tipo de documento
<em> Define ênfase em um texto e o
itálico. Substitui o antigo <i></i>
<a> Define um hyperlink
<embed> Define o recipiente de uma
aplicação externa (não html)
<abbr> Define uma abreviação
<fieldset> Grupo de elementos relacionados
<address> Define as informações de contato de uma forma
do autor/proprietário do <figcaption> Define o título de uma figura
documento. Deve ir para dentro do <figure>
footer. Importante para SEO.

<area> Define uma área dentro de um <figure> Especifica o auto-conteúdo

mapa de imagem Importante para SEO.
<footer> Define o rodapé de um documento
Importante para SEO.
<article> Define um artigo.
Importante para SEO. <form> Define un formulário html
<aside> Define o conteúdo lateral do <h1> a <h6> Define cabeçalhos ou títulos
recipiente de uma página. Importante para SEO.
Importante para SEO.
<head> Define informações sobre o
<audio> Define conteúdo de som documento
<header> Define a seção do cabeçalho do
<b> Define texto em negrito documento
Importante para SEO.
<base> Especifica a base onde todas as
<hgroup> Grupo de cabeçalho (<h1> a
URLs do documento serão abertas
<6>)
Importante para SEO.
<hr> Define uma mudança de tema a
<bdi> Isola uma parte do texto que pode partir de uma linha traçada
ser formatada de forma diferente
<html> Define a raiz do documento
do texto externo
<i> Define uma parte do texto em
<bdo> Sobregravar o endereço do texto alternativa
<iframe> Define um frame online

<blockquote> Define uma seção que tem outra <img> Define uma imagem
fonte.
<input> Define um controle de entrada de
Muitas vezes utilizado para
texto
cotações longas.
<ins> Define texto que foi inserido em um
<body> Define o corpo do documento
documento
<br> Define uma quebra de linha
<kbd> Define entrada de teclado
<button> Define um botão clicável

41
IBM SkillsBuild | Introducción a Python

<keygen> Define um campo gerador chave <rt> Define uma pronúncia de

para formulários caracteres
<label> Define o rótulo de um elemento <ruby> Define uma notação de ruby
<input>
<legend> Define um título para os elementos <s> Define texto que não está correto
<fieldset>, <figure>,
<samp> Define um exemplo de resultados
<details>
do programa
<li> Define um item de uma lista
<script> Define um script do lado do cliente
<link> Define a relação entre um
<section> Define uma seção de um
documento e um recurso externo
documento
(geralmente com folhas de estilo)
Importante para SEO.
<map> Define m mapa de imagem do
<select> Define um drop-down list
cliente
<mark> Define texto destacado ou <small> Define textos legais.
marcado. Efeito "marcador
fluorescente". <source> Define recursos para elementos
<menu> Define a lista de um menu multimídia
<span> Define uma pequena seção de um
<meta> Define um metadado de um documento
documento <strong> Define um texto em negrito e o
<meter> Define uma medida escalar em uma trata como importante. Importante
faixa conhecida para SEO
<nav> Define um link de navegação <style> Define um estilo para as
Importante para SEO. informações de um documento
<noscript> Define conteúdo alternativo para <sub> Define um texto que é subscrito
usuários que não suportam scripts
de clientes. <summary> Define um cabeçalho visível para o
<objet> Define um objeto incorporado elemento <details>
<sup> Define um texto que é superescrito
<ol> Define uma lista ordenada
<table> Define uma tabela
<optgroup> Define um grupo de opções
relacionadas em uma lista <tbody> Define o corpo de uma tabela
suspensa
<td> Define uma célula em uma tabela
<option> Define uma opção em uma lista
suspensa
<textarea> Define um controle de entrada de
<output> Define o resultado de um cálculo múltiplas linhas
<tfoot> Conteúdo do rodapé do grupo em
<p> Define um parágrafo
uma tabela
<param> Define um parâmetro para um <th> Define uma célula de cabeçalho em
objeto uma tabela
<pre> Define texto pré-formatado <thead> Agrupar os títulos de uma tabela

<progress> Representa o progresso de uma <time> Define data / hora. Ex:

tarefa em uma barra <time datetime=”2018/01/31”
<q> Define uma breve citação pubdate>
Noticia publicada el día…</time>
<rp> Define para exibir em navegadores <title> Define um título para o documento.
que não suportam scripts de ruby Importante para SEO.