Interação Humano

Computador

Assunto: Criando Interfaces Web com

HTML

Prof. D.Sc Namedin Pereira Teles Júnior

 O que é o HTML
• HTML (HyperText Markup Language) É uma linguagem de
marcação utilizada na construção de páginas na Web;
• HTML não é uma linguagem de programação;
• Linguagens de programação foram projetadas para criar
algoritmos, manipular variáveis, estruturas de dados, entre outras
coisas, enquanto o HTML é utilizado para estruturar e formatar o
conteúdo de páginas web.
 Linguagem de Marcação
• Uma linguagem de marcação é um • Exemplo:
conjunto de sinais aplicados nos Olá, meu nome é <nome> Luiz
textos ou em dados para definir </nome>, sou filho de <nome> Ana
sua configuração e aparência em </nome> e moro em <cidade> São
uma página web. Paulo </cidade>
• Facilitar a leitura do texto tanto • Resultado
para humanos quanto para
Olá, meu nome é Luiz, sou filho de
máquinas.
Ana e moro em São Paulo.
Web Semântica

•São informações dispostas de tal forma que

é totalmente legível tanto para humanos
quanto para principalmente, maquinas.
•Maquinas nos ajudam em atividades que
hoje fazemos manualmente. (automação)
Hipertext
• É a apresentação das informações organizadas de tal maneira
que o leitor tem liberdade de escolher vários caminhos.
• É a forma de apresentação de informações em um monitor de
vídeo, na qual algum elemento (palavra, expressão ou imagem)
é destacado e, quando acionado (geralmente mediante um
clique de mouse ), provoca a exibição de um novas informações
relativas ao referido elemento.
HiperMídia
• A hipermídia é a multimídia navegável, ou o hipertexto
ao qual foram adicionados imagem e som.
• Ambos os termos “hipertexto” e “hipermídia” foram
cunhados pelo pesquisador norte-americano Ted Nelson
no início da década de 1960 e por ele publicados em
1965.
O que são Tags
• As Tags são formadas por uma estrutura própria, iniciam
com o sinal “menor que”, em seguida vem o nome daquele
elemento e por fim, o sinal “maior que”.
<nome>
• Podem ser dispostas em tags que precisam de fechamento
e tags que fecham sozinhas (self-closing).
• O fechamento de uma tag será definido com uma barra (/),
sendo que no caso das tags de autofechamento, não há
necessidade da presença desse caractere.
<nome> Conteúdo </nome>
O que são Tags
<!-- Exemplo de elemento que necessita de fechamento-->
<p> A tag do elemento parágrafo necessita de fechamento </p>

• Os elementos que não necessitam de fechamento, também são

conhecidos como vazios, somente utilizam o sinal de menos (<) seguido
do nome do elemento e o sinal de maior (>).

<!-- Exemplo de elemento vazio -->

Texto utilizando <br> quebra de linha
O que são elementos
• Elementos são tags pré-definidas e com comportamentos
específicos dentro do HTML.
• Um elemento é composto por uma tag contendo o nome do
elemento e entre as tags do elemento encontra-se o conteúdo
desse elemento.
• Alguns Exemplos.
<label> Informe o seu nome </label>
<address>
Aprenda a usar todo poder do HTML
<a href=“mailto:[email protected]”> Contato </a>
</address>
 O que são elementos
Qual a diferença de Tag para
Elemento?
• Tag é o limitador do corpo de um elemento.
• Elemento é um objeto pré-definido da HTML que
utilizam as Tags para limitar seu escopo.
O que são atributos
• Atributos são características de um elemento, que passamos
dentro da Tag, para que o elemento se comporte de maneira
esperada.
• Existem atributos globais (que funcionam em todas as Tags) e
específicos (que são especificações para cada elemento).
• Os atributos possuem um nome e um valor. Existem atributos que
você vai usar praticamente sempre e existem outros que serão
mais raros.
O que são atributos
• Atributos Globais:
Atributo Descrição
accesskey Especifica uma tecla de atalho para ativar/focar um elemento

class Especifica um ou mais nomes de classe para um elemento (refere-se a uma classe em uma folha de estilos)

contenteditable Especifica se o conteúdo de um elemento é editável ou não

data-* Usado para armazenar dados personalizados privados da página ou aplicativo

dir Especifica a direção do texto para o conteúdo de um elemento

draggable Especifica se um elemento pode ser arrastado ou não

enterkeyhint Especifica o texto da tecla Enter em um teclado virtual

hidden Especifica que um elemento ainda não é ou não é mais relevante

id Especifica um ID exclusivo para um elemento

inert Especifica que o navegador deve ignorar esta seção

inputmode Especifica o modo de um teclado virtual

 O que são atributos
• Atributos Globais: (continuação)
Atributo Descrição
lang Especifica o idioma do conteúdo do elemento

popover Especifica um elemento popover

spellcheck Especifica se o elemento deve ter sua ortografia e gramática verificadas ou não

style Especifica um estilo CSS embutido para um elemento

tabindex Especifica a ordem de tabulação de um elemento

title Especifica informações extras sobre um elemento

translate Especifica se o conteúdo de um elemento deve ser traduzido ou não

 Estrutura Básica do HTML
<!doctype html>
<!doctype html>
<html>
<head>
<html> <meta charset=“utf-8”>
<title> Titulo da Página </title>
<head> <body> <script src="vendor/pace/pace.min.js"></script>
<link rel="stylesheet" href="bootstrap.css">
<title> <style></style>
<elementos de objetos> </head>
<meta> <body>
<elementos de texto>
<link> <!-- conteúdo da página HTML -->

<style> </body>
</html>
<script>
 <!DOCTYPE HTML>

Informa ao navegador que esse

documento é do tipo HTML e
indica sua versão. Quando está
escrito apenas html, indica que é a
mais recente.
 O Elemento <HTML>

Representa a raiz do documento,

serve com um container que
engloba todos os outros
elementos HTML.
O Elemento <head>
• O elemento <head> é um contêiner para metadados
(dados sobre dados) e é colocado entre a tag <html> e a
tag <body>.
• Metadados são dados sobre o documento HTML. Os
metadados não são exibidos.
• Os metadados normalmente definem o título do
documento, conjunto de caracteres, estilos, scripts e
outras metainformações.
 O Elemento <meta>
Define metadados, ou seja, informações sobre dados de
um documento HTML. As tags vão dentro do elemento e
são usadas para especificar o conjunto de caracteres, o
autor ou autora do documento, as configurações da
janela de visualização, etc.

<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
O Elemento <BODY>

É onde fica todo o conteúdo de texto,

imagem e vídeos, em que o usuário ou
usuária vê e interage, nele os conteúdos
são estruturados pelas demais tags do
HTML.
Estrutura Básica do HTML
HTML: Elementos
para formatação
de texto
O Elemento <H1>...<h6>

• Referente aos títulos, temos os cabeçalhos, que

são usados para estruturar o conteúdo da página
e fornecer uma hierarquia visualmente clara.
• O cabeçalho mais importante é o <h1>, que
geralmente é usado para o título principal da
página. O <h2> é usado para subtítulos de seções
importantes, o <h3> para subseções e assim por
diante até o <h6>
Exemplo de Uso do Elemento <h…>
 O Elemento <P>

• O elemento HTML <p>

representa um parágrafo.
Em HTML parágrafos são
usados para agrupar
conteúdos relacionados
de qualquer tipo, como
imagens e campos de um
formulário.
 O Elemento <b>
Elemento utilizado para
tonar um texto ou
parte de um texto em
negrito.
<i>

• representa uma parte do texto que é destacada

do restante por algum motivo, por exemplo,
termos técnicos, expressões de outros idiomas ou
pensamentos de personagens fictícios.
Normalmente, é apresentado com o uso do tipo
"itálico".
<i> - Exemplo
Marcando o Texto
 Imagens no HTML
• É possível inserir imagens em uma página através do elemento <img>, que por se
tratar de um elemento vazio não precisa de uma tag de fechamento. Um exemplo
de uso é:
<img src="https://staticcse.canva.com/blob/1173240/screen3.d1037ac5.avif">
• Os atributos básicos:
• src: para referenciar o caminho ou URL da imagem. Você pode utilizar tanto uma imagem do seu
computador quanto uma imagem encontrada na web, através da sua URL;
• alt: para inserir um texto alternativo, que é exibido caso a imagem não carregue e também para fins de
acessibilidade, isto é, caso o usuário esteja usando um leitor de tela, o texto alternativo será lido para ele;
• width: define a largura da imagem, modo de usar, width=“300”;
• height: define a altura da imagem, modo de usar, height=“300”.
• Também temos como trabalhar com imagens responsivas através das tags
<picture>, <source> e o atributo srcset.
Imagem no HTML
O Elemento <audio>
• Utilizada para inserir áudios no site, tendo como principais atributos:
• src, recebendo como valor o link ou diretório do audio,
• controls caso queira que seja possível controlar o áudio,
• autoplay para definir que o áudio de tocar automaticamente quando
entrar no site e
• type recebendo como valor o tipo do áudio.
• Exemplo:
<audio src=“” controls></áudio>
O Elemento <video>
Utilizado para inserir vídeos no site, o elemento possui atributos:
• width recebendo como valor a largura do vídeo em pixels;
• height recebendo como valor a altura do video em píxeis, caso não for
informada esses atributos, será utilizado a largura e altura padrão do vídeo;
• controls (quando presente nos permite controlar o video) e
• src recebendo como valor o link ou diretório do arquivo de vídeo.

Exemplo:
<video src="" controls></video>