Aula Sobre HTML

INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA
CURSO SUPERIOR DE TECNOLOGIA EM ANÁLISE E DESENVOLVIMENTO DE SISTEMAS

CAMPUS CAJAZEIRAS
LINGUAGENS DE MARCAÇÃO
HTML
PROF. DIOGO D. MOREIRA - diogo.moreira@ifpb.edu.br

HTML
● HTML significa em inglês: HyperText Markup Language. Em
português: Linguagem de Marcação de Hipertexto.
○ Tem como objetivo descrever a estrutura de uma página web por meio
de uma linguagem de marcação
● Linguagem base da internet. Foi criada para ser de fácil

entendimento por seres humanos e também por máquinas,
como por exemplo o Google ou outros sistemas que
percorrem a internet capturando informação.
2
HTML
● Todos os documentos HTML são documentos de texto
simples, geralmente com a extensão .html.
● Podem ser criados e editados a partir de qualquer editor de

texto.
● É interpretado por browsers, sejam eles em um computador,

smartphone, TV, videogames, etc.
3
HTML
● O documento HTML sempre inicia com o que chamamos de
estrutura básica. Esta estrutura é quase que imutável.
Sempre será dessa forma e você sempre começará seu HTML
começando por esse código.
4
HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8" />
<title>Linguagens de Marcação</title>
</head>
<body>
</body>
</html>
5
HTML
● É possível compreender o documento em HTML de uma
maneira muito simples, através de uma divisão de blocos das
tags essenciais, conforme a a seguinte estrutura:
○ Definição do documento (doctype)
○ Cabeça (head)
○ Corpo (body)
6
HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
</head>
<body>
</body>
</html>
7
Definição de documento
● Importante: SEMPRE deve existir o doctype, que é este
código <!DOCTYPE html>.
● O doctype não é uma tag HTML, mas uma instrução para o
navegador e outros programas que podem ler seu site, que o
código encontrado ali é um código HTML. Assim eles
sabem o que fazer para mostrar seu site da melhor forma
possível.
● Deve ser sempre a PRIMEIRA LINHA do seu documento.
8
HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
</head>
<body>
</body>
</html>
9
HEAD
● O HEAD contém informações que não são transpostas
visivelmente para o usuário/leitor do documento. São
dados implícitos, de uso e controle do documento: vinculação
com outros arquivos, aplicação de lógica de programação de
scripts e metadados. Na prática, todo o conteúdo do
cabeçalho fica delimitado entre a abertura e fechamento
tag head.
10
HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
</head>
<body>
</body>
</html>
11
BODY
● Trata-se do documento em si, ou seja, a informação legível
para o usuário/leitor do documento. É todo e qualquer texto
que se deseja apresentar, assim como toda e qualquer forma
de mídia de saída (imagens, sons, miniaplicativos
embutidos, conteúdo multimídia, etc).
● Além disso, toda a apresentação de entrada de dados
(formulários) também se aplica neste seção do documento. Na
prática, o corpo do documento é delimitado pelo par de
tags <body> e </body>.
12
HTML
● Este é o preceito básico que deve estar muito bem claro para
você: onde as marcações se aplicam, e quais são os
resultados deste modelo.
13
HTML
● Por exemplo: se vocês deseja informar conteúdo textual para
saída legível ao usuário do seu sistema web, esta marcação
deverá obrigatoriamente estar no bloco do corpo da página
(body).
● Ainda: para definir qual o tipo de codificação da página (uma
meta informação do documento), esta deve obrigatoriamente
estar marcada no cabeçalho do mesmo documento.
14
HTML
● Geralmente os editores como o Sublime Text ou Visual
Studio Code já tem atalhos para iniciar os documentos
HTMLs com essa estrutura, logo, você não precisa se
preocupar em decorá-la, mas é bom que faça.
15
Prática 01
Criando um documento HTML com estrutura básica
● Crie um novo documento no editor de texto que você escolheu

com o nome aula-html-1.html
● Defina a estrutura básica demonstrada anteriormente
16
Sintaxe e semântica
● Quando falamos em semântica no HTML queremos dizer que
o código HTML está de acordo com o conteúdo que está
sendo tratado. Por exemplo, se estamos escrevendo um
parágrafo, devemos indicar isso no HTML, assim como um
título deve ser inserido com o código específico para títulos.
● Podemos entender o HTML em 3 conceitos fundamentais: os
elementos, as tags e os atributos.
17
Tags
● Tags são o conjunto de caracteres que formam um elemento,
ou seja, quando nos referenciamos à tag "p" estamos falando
disso: <p>
● Existem dois tipos de Tags: As que necessitam de
fechamento e as que não necessitam de fechamento.
○ Para as que necessitam de fechamento, utilizamos o sinal de menor ( < ), seguido do nome do
elemento e o sinal de maior ( > ) para abertura. Para fechamento, utilizamos o sinal de menor ( < ),
seguido de barra ( / ), nome do elemento e o sinal de maior ( > ).
○ Os elementos que não necessitam de fechamento, também conhecidos como elementos vazios,
somente utilizamos o sinal de menor ( < ), seguido do nome do elemento e o sinal de maior ( > ).
18
Atributos
● Atributos são informações que passamos na Tag para que
ela se comporte da maneira esperada. Existem atributos
globais (que funcionam em todas as Tags) e específicos (que
são direcionados para cada Tag, através de especificação).
● Os Atributos possuem nome e um valor, existem Atributos
que você vai usar praticamente sempre e existem outros que
serão mais raros.
○ Exemplo:
○ <tag atributo="valor"></tag> 19
Elementos
● Elementos são formados a partir de Tags e entre as Tags é
que está o conteúdo do Elemento.
● Se quisermos exibir um parágrafo em um site utilizamos a Tag
<p> que semanticamente quer dizer que o conteúdo que se
espera nesse Elemento é um parágrafo.
20
Elementos
● Em resumo, elementos são a junção das tags + conteúdo
● Para melhor compreensão:
○ <p> é uma tag
○ <p>Parágrafo</p> é um elemento p
21
Títulos e parágrafos
● Vamos começar a construir o corpo do nosso documento a
partir de dois tipos de elementos básicos
○ Títulos
○ Parágrafos
22
Títulos
● Em HTML o título é exatamente o que parece: um título real
ou subtítulo, quando você coloca no texto a tag <h1> , o
texto crescerá e a dimensão das letras será de acordo com o
número de cabeçalhos.
● Os títulos podem ter dimensões de 1 a 6, ond 1 é a maior
dimensão e 6 a menor.
○ <h1>
○ <h2>
○ <h3>
○ e assim até <h6> 23
Parágrafos
● A tag <p> representa um parágrafo do texto. Parágrafos são,
geralmente representados, em mídia visual, como bloco de
texto que são separados dos blocos adjacente por
espaços brancos verticais e/ou recuo de primeira-linha.
○ <p>Conteúdo do parágrafo</p>
24
Prática 02
Adicionando títulos e parágrafos
● A partir de uma estrutura básica, crie um documento com o nome

aula-html-2.html com a seguinte estrutura no corpo do documento:
○ Título de nivel 1 com o nome de um filme de sua preferência
○ Um parágrafo com a sinopse do filme
○ Título de nível 2 com o nome "Comentários"
○ Um parágrafo com algum comentário seu sobre o filme
25
Prática 03
Adicionando títulos e parágrafos
● Utilizando o conceito de atributos, adicione um atributo chamado id em cada um

dos elementos do documento da prática anterior.
● Os valores devem fazer sentido quanto ao conteúdo de cada elemento.
26
Hyperlinks
● Hyperlinks nos permitem vincular nossos documentos a
qualquer outro documento (ou outro recurso) que queremos,
também podemos vincular para partes específicas de
documentos e podemos disponibilizar aplicativos em um
endereço web simples
27
Hyperlinks
● Um hyperlink básico é criado envolvendo o texto (ou outro
conteúdo) que você quer transformar em um link dentro de um
elemento <a> , e dando-lhe um atributo "href" que conterá a
URL para o qual você deseja que o link aponte.
<p>Estou criando um link para

<a href="https://www.ifpb.edu.br">a página
do IFPB</a>.</p>
28
Hyperlinks
● Um URL ou Uniform Resource Locator é simplesmente um
texto que define onde algo está localizado na Web. Por
exemplo, a página do IFPB está localizada em
https://www.ifpb.edu.br.
● Os URLs usam caminhos para encontrar arquivos. Os
caminhos especificam onde, no sistema de arquivos, o arquivo
que você está interessado está localizado.
29
Hyperlinks
● URLs absolutos
○ Aponta para um local definido por sua localização absoluta na web, a
partir do nome do domínio.
○ Exemplo: http://www.ifpb.edu.br
● URLs relativos
○ Aponta para um local relativo ao arquivo do qual você está vinculando
○ Exemplo: contato.html
○ Nesse exemplo, o navegador busca uma página contato.html que
esteja no mesmo diretório da página que está sendo exibida.
30
Hyperlinks
● A URL, que é valor de href pode apontar para arquivos
HTML, arquivos de texto, imagens, documentos de texto,
arquivos de vídeo e áudio e qualquer outra coisa que possa
estar na web. Se o navegador da Web não sabe como exibir
ou manipular o arquivo, ele irá perguntar se você quer abrir o
arquivo ou baixar o arquivo.
31
Hyperlinks
● Quando você está criando um hyperlink para um recurso
que deve ser baixado em vez de aberto no navegador, você
pode usar o atributo de download para fornecer um nome de
arquivo padrão.
<a href="https://download.mozilla.org/etc"
download="firefox-39-installer.exe">
Faça o download do Firefox 39 para Windows
</a> 32
Prática 04
Criando um hyperlink
● Crie um hyperlink dentro de um parágrafo, apontando para um site de sua

preferência. O texto do hyperlink deve ser "Clique aqui".
33
Listas
● Em HTML, temos três maneiras de fazer listas:
○ Listas não-ordenadas
○ Listas ordenadas
○ Listas de definição
34
Listas
● O elemento HTML <ol> representa uma lista de itens
ordenados, que são mostrados com uma contagem que os
precede, que pode ser de qualquer tipo, como numerais,
letras, algarismos romanos, ou simples símbolos.
● O elemento HTML <ul> representa uma lista não-ordenada,

isto é, suas posições, nessa lista, são irrelevantes. São
exibidos com um marcador que pode ter várias formas, como
um ponto, um círculo, ou um quadrado.
35
Listas
● O elemento HTML <li> é usado para representar um item que
faz parte de uma lista. Este item deve estar contido em um
elemento pai: uma lista ordenada (<ol>), uma lista
desordenada (<ul>)
36
Listas
● Exemplo de lista não-ordenada
Disciplinas do primeiro período de ADS
<ul>
<li>Algoritmos e Lógica de Programação</li>
<li>Linguagens de Marcação</li>
</ul>
37
Listas
● Exemplo de lista ordenada
Conteúdos de Linguagens de Marcação por ordem
apresentada
<ol>
<li>HTML</li>
<li>CSS</li>
<li>XML</li>
</ol>
38
Listas aninhadas
● É possível aninhar listas dos mais variados tipos. Nesse
exemplo, temos uma lista ordenada dentro de uma lista
não-ordenada.
<ul>
<li>HTML
<ol>
<li>Tag</li>
<li>Atributo</li>
</ol>
</li>
<li>CSS</li>
39
Listas
● As listas de definição servem para criar listas com termos e
suas definições.
● A tag <dl> define uma lista de descrição e é utilizada em
conjunto com a tag <dt> (para definir termos) e <dd> (para
descrever cada termo).
40
Listas
● Exemplo de lista de definição
<dl>
<dt>Café</dt>
<dd>Bebida produzida a partir dos grãos
torrados do fruto do cafeeiro</dd>
<dt>Chá</dt>
<dd>Bebida preparada através da infusão de
folhas, flores, raízes de planta do chá</dd>
</dl>
41
Prática 05
Trabalhando com listas
● Crie um novo documento HTML com os seguintes elementos

no corpo
○ Um titulo (h1) com o nome de um jogo ou série que você goste
○ Crie uma lista ordenada com os seus 3 personagens favoritos.
○ Na sequência, uma lista não-ordenada com outros 3
personagens
42
Imagens
● O elemento HTML <img> (or HTML Image Element)
representa a inserção de imagem no documento
○ Estamos fazendo uma referência para uma imagem que deve existir
independentemente do documento HTML
● Para uma melhor experiência, também utilizamos juntamente

com os elementos <figure> e <figcaption>.
43
Imagens
● Exemplo de inserção de imagens utilizando <img>, que é um
elemento que não necessita de fechamento
● Este elemento irá exibir a imagem no arquivo "gato.jpg" desde
que esse arquivo exista no mesmo diretório
<img src="gato.jpg" />
44
Imagens
● Exemplo de inserção de imagens utilizando <img>, que é um
elemento que não necessita de fechamento
● Este elemento irá exibir a imagem que está definida no atributo
src desde que esse arquivo exista no mesmo diretório
● O atributo alt mostra um texto alternativo caso não seja
possível exibir a imagem
<img src="gato.jpg" alt="Um gato" />
45
Imagens
● O tamanho da imagem pode ser definido com os atributos
width (largura) e height (altura). Definindo apenas um, a
imagem é redimensionada proporcionalmente
●
<img src="gato.jpg" alt="Um gato"

width="300" />
46
Imagens + hyperlinks
● O elemento <img> também pode ser usado com hyperlinks.
Basta que esteja envolvido em um elemento <a>
<a
href="https://youtube.com/watch?v=ILQTZCb7-Uw">
</a>
47
Imagens
● O elemento <figure> serve para marcar uma unidade de
conteúdo e opcionalmente uma legenda para o conteúdo.
Deve ser utilizado junto com o elemento <figcaption>
<figure>
<figcaption>Um gato incrível</figcaption>
</figure>
48
Prática 06
Inserindo imagens
● Crie um novo documento html, contendo no corpo os

seguintes elementos:
○ Um título h1 com o nome do seu personagem de jogo/série/filme
favorito.
○ Uma imagem do mesmo com legenda. Busque essa imagem no
Google, por exemplo
49
Prática 07
Múltiplas imagens
● Crie um novo documento html, contendo no corpo os seguintes

elementos:
○ Um título h1 com o nome do sua série ou novela favorita.
○ Busque imagens de ao menos 3 personagens e adicione os
elementos img para estas imagens no mesmo elemento figure.
Em seguida, coloque uma legenda com o nome dos
personagens
○ Crie uma lista de definição para descrever os personagens,
inserindo um pouco de sua história
50
Tabelas
● Quando se tem um conjunto de dados e precisa-se
apresentá-los ordenadamente, uma boa maneira de fazê-lo é
usando tabelas.
● Usamos o elemento <table>
○ Elas são basicamente compostas de linhas (elemento tr) e
células (elemento td) cruzadas entre si
51
Tabelas
● Um exemplo de tabela:
<table>
<tr>
<td>Nome</td>
<td>Idade</td>
</tr>
<tr>
<td>Diogo Moreira</td>
<td>29 anos com cara de 20</td>
</tr>
</table> 52
Tabelas
● Outros elementos podem também ser usados para dar mais
significado para nossa tabela
● O elemento th (table header, ou cabeçalho da tabela) ao
invés do td na primeira linha, informaria ao browser que ali
está a linha que dá a definição dos elementos daquela coluna
53
Tabelas
● Um exemplo de tabela com th:
<table>
<tr>
<th>Nome</th>
<th>Idade</th>
</tr>
<tr>
<td>Diogo Moreira</td>
<td>29 anos com cara de 20</td>
</tr>
</table> 54
Tabelas
● Outros elementos
○ <thead> para envolver os elementos que formam o
cabeçalho da tabela, incluindo os elementos th
○ <tbody> para envolver os elementos que compõe o corpo
da tabela
○ <tfoot> para envolver os elementos que estarão no rodapé
da tabela
55
Tabelas
● Outros elementos
○ <caption> para definir uma legenda para a tabela, muito
comum em documentos de cunho acadêmico.
56
Prática 08
Tabelas
● Crie um novo documento html, contendo no corpo uma tabela com

○ 3 colunas
■ Nome
■ Hobby
■ Data de aniversário
○ Preencha uma linha respondendo com seu nome, seu hobby e a

data de seu aniversário
○ Use os elementos thead, tbody e caption
57
Tabelas
● Celulas estendidas
○ As vezes necessitamos de que uma célula se estenda por
várias linhas ou várias colunas
○ Para isso, usamos o atributo colspan (para colunas) e
rowspan para linhas
58
Tabelas
○ As vezes necessitamos de que uma célula se estenda por
várias linhas ou várias colunas
○ Para isso, usamos o atributo colspan (para colunas) e
rowspan para linhas
59
Tabelas
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
60
Tabelas
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
61
Prática 09
Tabelas
Crie um novo documento html,

Tabela 1 - Professores e salários
contendo no corpo uma tabela
semelhante a demonstrada ao Nome Cargo Salário Sexo
lado, incluindo a legenda
João Professor R$ 2000,00 Masculino
Desconsidere a apresentação.
Victor Professor R$ 2000,00
Camila Professor R$ 2000,00 Feminino
62
Áudio e Vídeo
● HTML dá suporte a mídia embutida por meio dos elementos
<audio> e <video>, oferecendo a possibilidade de incorporar
facilmente mídia em documentos HTML.
63
Áudio e Vídeo
● HTML dá suporte a mídia embutida por meio dos elementos
<audio> e <video>, oferecendo a possibilidade de incorporar
facilmente mídia em documentos HTML.
● Cada elemento destes, tem dentro dele um elemento
<source>, para indicar qual arquivo de vídeo ou aúdio deve
ser reproduzido.
64
Vídeo
● Atributos disponíveis para o elemento <video>:
○ controls - Exibe os controles do vídeo, tais como play, pause, volume e
exibição em tela cheia
○ autoplay - Começa a reproduzir o vídeo assim que a página é
carregada. Atualmente só funciona em conjunto com muted
○ muted - Inibe o som do vídeo
○ poster - Define uma imagem fixa para ser exibida enquanto o vídeo não
começa
○ loop - Coloca a reprodução em repetição
○ width - Largura
○ height - Altura
65
Vídeo
● <video>
● Ao usar apenas controls, o
vídeo aparece em pausa e com
os controles disponíveis para o
usuário. A cena mostrada é o início do vídeo
<video controls>
<source src="bigbuckbunny.mp4">
</video>
66
Vídeo
● <video>
● Ao usar poster, a cena

mostrada enquanto o vídeo
não é reproduzido é a imagem indicada
<video controls poster="final_fantasy_poster.jpg">

<source src="final_fantasy.mp4">
</video>
67
Prática 10
Vídeos com HTML
● Procure um vídeo de sua preferência no Youtube e faça o

download no formato MP4 usando o site https://y2mate.com/
● Crie um novo documento HTML, contendo um título para seu
vídeo no corpo
● Em seguida, insira o vídeo selecionado num documento
HTML, seguido de um parágrafo descrevendo o mesmo
68
Prática 11
Vídeos com HTML
● Procure um trailer de um filme de sua preferência no Youtube

e faça o download no formato MP4 usando o site
https://y2mate.com/
● Crie um novo documento HTML, contendo o título do filme no
corpo
● Em seguida, insira o vídeo selecionado num documento
HTML, seguido de uma tabela com os principais atores e seus
papéis
69
Aúdio
● Atributos disponíveis para o elemento <audio>:
○ controls - Exibe os controles do aúdio, tais como play, pause, volume
○ autoplay - Começa a reproduzir o aúdio assim que a página é
carregada. Existe uma série de restrições quanto a esse uso
○ muted - Inibe o som
70
Aúdio
● <audio>
● Ao usar controls, o tocador

de música é exibido
<audio>
<source src="dttm.mp3">
</audio>
71
Prática 12
Aúdio com HTML
● Procure uma música de sua preferência no Youtube e faça o

download no formato MP3 usando o site https://y2mate.com/
● Crie um novo documento HTML, contendo o título da música
no corpo
● Em seguida, insira a música selecionada num documento
HTML, seguido de vários parágrafos com a letra dela
72
HEAD
● Como vimos anteriormente, a tag HEAD contém
informações que não são transpostas visivelmente para o
usuário/leitor do documento
● Ao contrário do conteúdo do elemento <body> (que são
exibidos na página quando carregados no navegador)
73
HEAD
● O trabalho do HEAD é conter metadados sobre o
documento
● Nós já vimos o elemento <title> em ação — ele pode
ser usado para adicionar um título ao documento,
mas pode ser confundido com o elemento <h1>, mas
são coisas diferentes!
74
HEAD
● H1 vs TITLE
○ O elemento <h1> aparece na página quando é
carregado no navegador — geralmente é usado uma vez
por página, para marcar o título do conteúdo da sua
página (o título da história, ou da notícia, por exempo).
75
HEAD
● H1 vs TITLE
○ O elemento <title> é um metadado que representa o
título de todo o documento HTML (não o conteúdo do
documento).
76
HEAD
● H1 vs TITLE
○ Dependendo de
onde está sendo
visualizado, o
elemento title é
dispensado, pois
não faz parte do
corpo do texto. Visualização no Chrome Desktop (MacOS)
77
HEAD
● H1 vs TITLE
○ Dependendo de
onde está sendo
visualizado, o
elemento title é
dispensado, pois
não faz parte do
corpo do texto. Visualização no Safari (iOS)
78
HEAD
● Metadados
○ Metadados descrevem dados em HTML, que
possui uma maneira "oficial" de adicionar
metadados a um documento - o elemento <meta>.
○ Outras tags também podem ser pensadas como
metadados
79
HEAD
● Metadados
○ <meta charset="utf-8">
○ Especifica a codificação de caracteres do documento, ou
seja, o conjunto de caracteres que o documento está
autorizado a usar.
○ utf-8 é um conjunto de caracteres universal que inclui
praticamente qualquer caractere de qualquer linguagem
humana.
80
HEAD
● Metadados
○ Muitos elementos <meta> incluem atributos de name e
content:
■ O name especifica o tipo de elemento meta que é; que
tipo de informação contém.
■ O content especifica o conteúdo real do meta.
Dois desses meta-elementos que são úteis para incluir na
sua página definem o autor da página e fornecem uma
descrição concisa da página.
81
HEAD
● Metadados
○ Dois desses meta-elementos que são úteis para incluir na
sua página definem o autor da página e fornecem uma
descrição concisa da página.
82
HEAD
● Metadados
○ <meta name="author" content="Diogo">

<meta name="description"
content="Site da disciplina
Linguagens de Marcação">
83
HEAD
● Metadados
○ Especificar um autor é útil de algumas maneiras:
alguns sistemas de gerenciamento de conteúdo
possuem instalações para extrair automaticamente as
informações do autor da página e disponibilizá-las para
tais fins.
84
HEAD
● Metadados
○ Metadados são úteis
para que outros sites
possam ler
informações e realizar
atividades integradas
85
HEAD
● Metadados
○ Outras metatags importantes
○ Keywords
<meta name="keywords" content="html, linguagens de
marcação">
○ Nesta metatag você colocará as palavras chaves
relativas ao assunto do site.
86
HEAD
● Metadados
○ Favicon
87
HEAD
● Metadados
○ Favicon
<link rel="icon" href="icone.png">
○ Um favicon é um pequeno ícone em forma quadrada de
apenas 16 pixels de altura e 16 pixels de largura
88
Prática 13
Metadados
● Crie um nova página HTML sobre algum conteúdo de sua

preferência (séries, filmes, jogos, animes…)
● Adicione as metatags
○ charset
○ author, description
○ keywords
○ title
● Além disso, adicione uma imagem de sua preferência como
ícone
89

Aula Sobre HTML

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Aula Sobre HTML

Enviado por

Direitos autorais:

Formatos disponíveis

INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA

CURSO SUPERIOR DE TECNOLOGIA EM ANÁLISE E DESENVOLVIMENTO DE SISTEMAS

PROF. DIOGO D. MOREIRA - diogo.moreira@ifpb.edu.br

● Linguagem base da internet. Foi criada para ser de fácil

● Podem ser criados e editados a partir de qualquer editor de

● É interpretado por browsers, sejam eles em um computador,

● Crie um novo documento no editor de texto que você escolheu

● A partir de uma estrutura básica, crie um documento com o nome

● Utilizando o conceito de atributos, adicione um atributo chamado id em cada um

<p>Estou criando um link para

● Crie um hyperlink dentro de um parágrafo, apontando para um site de sua

● O elemento HTML <ul> representa uma lista não-ordenada,

● Crie um novo documento HTML com os seguintes elementos

● Para uma melhor experiência, também utilizamos juntamente

<img src="gato.jpg" />

<img src="gato.jpg" alt="Um gato" />

<img src="gato.jpg" alt="Um gato"

● Crie um novo documento html, contendo no corpo os

● Crie um novo documento html, contendo no corpo os seguintes

● Crie um novo documento html, contendo no corpo uma tabela com

○ Preencha uma linha respondendo com seu nome, seu hobby e a

Crie um novo documento html,

Camila Professor R$ 2000,00 Feminino

● Ao usar poster, a cena

<video controls poster="final_fantasy_poster.jpg">

● Procure um vídeo de sua preferência no Youtube e faça o

● Procure um trailer de um ﬁlme de sua preferência no Youtube

● Ao usar controls, o tocador

● Procure uma música de sua preferência no Youtube e faça o

○ <meta name="author" content="Diogo">

● Crie um nova página HTML sobre algum conteúdo de sua

Você também pode gostar