Fatec Pmi Aula 2 HTML

PROGRAMAÇÃO EM MICROINFORMÁTICA
Prof. Dr. Aparecido Jorge Jubran

Fatec- Carapicuíba
Prof. Dr. Aparecido Jorge Jubran
AULA – T HTML 1
HTML - Visão geral

HTML significa Hyper Text Markup Language, que é a linguagem mais
usada na Web para desenvolver páginas da web.
HTML foi criada por Berners-Lee no final de 1991, mas "HTML 2.0" foi a
primeira especificação HTML padrão publicada em 1995.
HTML 4.01 - versão principal do HTML e foi publicada no final de 1999.
Atualmente temos a versão HTML-5 que é uma extensão do HTML 4.01.
HTML-5 foi publicada em 2012.
Originalmente, o HTML foi desenvolvido com o intuito de definir a

estrutura de documentos como títulos, parágrafos, listas e assim por
diante para facilitar o compartilhamento de informações científicas entre
pesquisadores.
Agora, o HTML está sendo amplamente utilizado para formatar páginas

da web com a ajuda de diversas tags disponíveis na linguagem HTML
HTML é OBRIGATÓRIO para estudantes e profissionais ativos se tornarem

grandes Engenheiros de Software, especialmente quando estão
trabalhando no Domínio de Desenvolvimento Web.
Principais vantagens de aprender HTML:

•Criar site -
Você pode criar um site ou personalizar um modelo da web existente se
conhecer bem HTML.
•Torne-se um web designer -

Se você deseja iniciar uma carreira como web designer profissional, o
design de HTML e CSS é uma habilidade obrigatória.
Principais vantagens de aprender HTML:

•Entender web -
Se você deseja otimizar seu site, aumentar sua velocidade e
desempenho, é bom conhecer HTML para obter melhores resultados.
•Aprender outras linguagens -

Depois que você entender o básico do HTML, outras tecnologias
relacionadas, como javascript ou php, ficarão mais fáceis de entender
Um pequeno programa HTML convencional Hello World .
Aplicações de HTML
Desenvolvimento de páginas da Web -
HTML é usado para criar páginas que são renderizadas na web.
Quase todas as páginas da web possuem tags html para renderizar seus
detalhes no navegador.
•UI responsiva -
As páginas HTML hoje em dia funcionam bem em todas as plataformas,

dispositivos móveis, guias, desktops ou laptops devido à estratégia de
design responsivo.
•As páginas HTML com suporte offline , uma vez carregadas, podem ser
disponibilizadas offline na máquina, sem qualquer necessidade de
internet.
•Desenvolvimento de jogos -
HTML5 tem suporte nativo para uma experiência rica e agora também é
útil na área de desenvolvimento de jogos.
Quais ferramentas são necessárias?
1) Navegadores: Google Chrome, Microsoft Edge, Opera, Safari, etc.

Neles testaremos nosso trabalho.
Google Internet
Chrome Safari Opera Firefox
Explorer

2) Um editor de texto.
Uma opção gratuita para o Windows é o Notepad++.
Porém…
Você sabe se o processador do teu computador é 32 ou 64 bits?
Obs.: Uma alternativa do Notepad++ para o Linux é o Notepadqq.
Observação: o meu micro é 32 ou 64 bits?
Para saber a configuração do teu

Windows, clique com o botão direito
do mouse sobre o botão Iniciar do
Windows.
Escolha Configurações.
➔ Na janela Configurações,
clique em Sistema.
Vai abrir a tela de Configurações:
➔ Use a barra de rolagem para chegar a

última opção (Sobre)
➔ Clique em Sobre.
➔ Veja as configurações do computador

e do Windows.

Uma opção gratuita é o
Notepad++. Para instalá-lo,
abra uma janela do
navegador e acesse:
https://notepad-plus-
plus.org/downloads/
Você pode escolher a

última versão disponível.
Faça o download para instalar o aplicativo.

➔ 32-bit ou 64-bit
Escolha a linguagem
Português Brasileiro.
Notepad++
Para abrir o Notepad++, você

pode digitar o nome do
aplicativo (Notepad++) na área
de pesquisa do Windows.
➔ Ao aparecer o ícone, clique

em Abrir.
Notepad++
➔ No Notepad++, abra um
documento em branco.
Notepad++
O Notepad++ suporta a edição de diversas linguagens de programação.
➔ Vamos selecionar a linguagem que usaremos: clique na guia Linguagem,
selecione a letra H ➔ HTML.
Notepad++
O Notepad++ suporta a edição de diversas linguagens de programação.
➔ Vamos selecionar a linguagem que usaremos: clique na guia Linguagem,

selecione a letra H ➔ HTML.
➔ Digite o código a seguir.
Informa ao navegador
Notepad++ que o código é um
documento HTML 5.
Marca ou Tag HTML de

abertura de um
documento escrito em
Português-Brasil
Marca ou Tag HTML de

fechamento
O que estiver entre as marcações (tags) <html> e </html> será considerado
um documento HTML.
Notepad++
Temos também as partes head e body.
Head: configurações do site.
Body: contém os elementos que serão

visualizados pelo usuário do site.
Dentro de body, digite:

Olá, Mundo!
Notepad++
Crie em teu computador

um diretório chamado
HTML.
Notepad++
Crie em teu computador um diretório chamado HTML.
Notepad++
No Notepad++
➔ Clique em Arquivo ➔ Salvar como…
Notepad++
➔ Escolha o diretório HTML;

➔ Salve o arquivo como
Ola_Mundo.html.
É recomendado que o nome

do arquivo não contenha
acentuação nem espaço em
branco.
Notepad++
➔ Para executar o arquivo, basta clicar 2 vezes sobre o arquivo que você
criou, que este será executado no teu browser padrão.
Notepad++
Abra o arquivo salvo e se a acentuação não aparecer corretamente, digite a
tag <meta charset=“UTF-8”/> em head.
charset: conjunto de
caracteres.
UTF-8: caracteres latinos.
Note que o título da página exibida é o nome do arquivo.
Podemos mudá-lo com a

tag <title>Olá,
Mundo!</title> em
head.
Salve o arquivo e
atualize o navegador.
Hipertexto refere-se à forma como as páginas da Web (documentos

HTML) são vinculadas entre si.
Assim, o link disponível em uma página web é denominado Hipertexto.
Como o próprio nome sugere, HTML é uma linguagem de marcação , o

que significa que você usa HTML para simplesmente “marcar” um
documento de texto com tags que informam ao navegador da Web como
estruturá-lo para exibição.
Um exemplo de documento HTML -
TAGS HTML
HTML é uma linguagem de marcação e utiliza diversas tags para formatar

o conteúdo.
Essas tags são colocadas entre chaves angulares <Tag Name>.
A maioria das tags tem suas tags de fechamento correspondentes.
Por exemplo, <html> tem sua tag de fechamento </html> e a

tag <body> tem sua tag de fechamento </body> etc.
TAGS HTML
<!DOCTYPE...>
Esta tag define o tipo de documento e a versão HTML
TAGS HTML
<html>
Esta tag envolve o documento HTML completo e compreende
principalmente o cabeçalho do documento, representado por
<head>...</head>, e o corpo do documento, representado pelas tags
<body>...</body>
TAGS HTML
<head>
Esta tag representa o cabeçalho do documento que pode conter outras

tags HTML como <title>, <link> etc.
TAGS HTML
<title>
A tag <title> é usada dentro da tag <head> para mencionar o título do

documento.
TAGS HTML
<body>
Esta tag representa o corpo do documento que contém outras tags HTML
como <h1>, <div>, <p> etc.
TAGS HTML
<h1>
Esta tag representa o título.
TAGS HTML
<p>
Esta tag representa um parágrafo.
TAGS HTML
Para aprender HTML, você precisará estudar diversas tags e entender

como elas se comportam durante a formatação de um documento
textual.
O World Wide Web Consortium (W3C) recomenda o uso de tags

minúsculas a partir do HTML 4.
Estrutura do documento HTML
Um documento HTML típico terá a seguinte estrutura –
Tag de declaração de documento.
A declaração <!DOCTYPE>
A tag de declaração <!DOCTYPE> é usada pelo navegador da web para

entender a versão do HTML usada no documento.
A versão atual do HTML é 5 e utiliza a seguinte declaração -
HTML - Tags básicas
Tags de título
Qualquer documento começa com um título.
Você pode usar tamanhos diferentes para seus títulos.
O HTML também possui seis níveis de títulos, que usam os

elementos <h1>, <h2>, <h3>, <h4>, <h5> e <h6>.
Ao exibir qualquer título, o navegador adiciona uma linha antes e uma

linha depois desse título.
Digite no Notepad++.
Salve como: exemplo 1.html
Execute-o no seu navegador
TAG de parágrafo
A tag <p> oferece uma maneira de estruturar seu texto em parágrafos

diferentes.
Cada parágrafo de texto deve ficar entre uma tag de abertura <p> e uma
tag de fechamento </p>, conforme mostrado no exemplo:
TAG de quebra de linha

Sempre que você usa o elemento <br />, qualquer coisa que o siga
começa na próxima linha.
Esta tag é um exemplo de elemento vazio, onde não é necessário abrir e
fechar tags, pois não há nada entre elas.
A tag <br /> possui um espaço entre os caracteres br e a barra.
Se você omitir este espaço, navegadores mais antigos terão problemas
para renderizar a quebra de linha, enquanto se você perder o caractere
de barra e apenas usar <br> ele não será válido em XHTML.
Centralizando conteúdo
Você pode usar a tag <center> para colocar qualquer conteúdo no centro
da página ou em qualquer célula da tabela.
Linhas horizontais
As linhas horizontais são usadas para dividir visualmente as seções de

um documento.
A tag <hr> cria uma linha da posição atual no documento até a margem
direita e quebra a linha de acordo.
Por exemplo, você pode querer fornecer uma linha entre dois parágrafos.
Novamente a tag <hr /> é um exemplo de elemento vazio , onde você

não precisa abrir e fechar tags, pois não há nada entre elas.
O elemento <hr /> possui um espaço entre os caracteres hr e a barra.
Se você omitir este espaço, navegadores mais antigos terão problemas

para renderizar a linha horizontal, enquanto se você perder o caractere
de barra e apenas usar <hr> ele não será válido em XHTML
Preservar formatação
Às vezes, você deseja que seu texto siga o formato exato de como está
escrito no documento HTML.
Nestes casos, você pode usar a tag pré-formatada <pre>.
Qualquer texto entre a tag de abertura <pre> e a tag de

fechamento </pre> preservará a formatação do documento de origem.
Espaços ininterruptos
Suponha que você queira usar a frase “12 Homens irritados”.
Aqui, você não gostaria que um navegador dividisse "12, " e “Homens"
em duas linhas.
Espaços ininterruptos
Nos casos em que você não deseja que o navegador do cliente quebre o
texto, você deve usar uma entidade de espaço inseparável em vez de um
espaço normal.
Por exemplo, ao codificar "12 Homens irritados" em um parágrafo, você

deve usar algo semelhante ao código a seguir:
HTML - Elementos
Um elemento HTML é definido por uma tag inicial.
Se o elemento contiver outro conteúdo, ele termina com uma tag de

fechamento, onde o nome do elemento é precedido por uma barra
conforme mostrado a seguir com poucas tags.
TAG inicial Conteúdo TAG final
<p> Este é o conteúdo do parágrafo. </p>

<h1> Este é o conteúdo do título. </h1>
<div> Este é o conteúdo da divisão. </div>
<br />
Então aqui <p>....</p> é um elemento HTML, <h1>...</h1> é outro

elemento HTML.
Existem alguns elementos HTML que não precisam ser fechados, como
os elementos <img.../> , <hr /> e <br />.
Eles são conhecidos como elementos vazios.
Os documentos HTML consistem em uma árvore desses elementos e

especificam como os documentos HTML devem ser construídos e que
tipo de conteúdo deve ser colocado em que parte de um documento
HTML.
Tag HTML vs. Elemento

Um elemento HTML é definido por uma tag inicial.
Se o elemento contiver outro conteúdo, ele termina com uma tag de
fechamento.
Por exemplo, <p> é a tag inicial de um parágrafo e </p> é a tag de
fechamento do mesmo parágrafo, mas
<p>Este é um parágrafo</p>
é um elemento de parágrafo.
Elementos HTML aninhados
É permitido manter um elemento HTML dentro de outro elemento

HTML.
HTML - Atributos
Vimos poucas tags HTML e seus usos, como tags de título <h1>, <h2>, tag
de parágrafo <p> e outras tags.
Nós os usamos até agora em sua forma mais simples, mas a maioria das
tags HTML também pode ter atributos, que são informações extras.
Um atributo é usado para definir as características de um elemento

HTML e é colocado dentro da tag de abertura do elemento.
Todos os atributos são compostos de duas partes - um nome e um valor.
O nome é a propriedade que você deseja definir.
Por exemplo, o elemento parágrafo <p> no exemplo carrega um atributo

cujo nome é align, que você pode usar para indicar o alinhamento do
parágrafo na página.
O valor é o que você deseja que seja definido e sempre colocado entre
aspas.
O exemplo a seguir mostra três valores possíveis do atributo align:
left, center e right
Nota:
Nomes de atributos e valores de atributos não diferenciam maiúsculas

de minúsculas.
No entanto, o World Wide Web Consortium (W3C) recomenda

atributos/valores de atributos em letras minúsculas em sua
recomendação HTML 4.
Atributos principais
Os quatro atributos principais que podem ser usados na maioria dos
elementos HTML (embora não em todos) são:
O atributo de identificação
O atributo id de uma tag HTML pode ser usado para identificar

exclusivamente qualquer elemento dentro de uma página HTML.
Existem dois motivos principais pelos quais você pode querer usar um
atributo id em um elemento:
O atributo de identificação
• Se um elemento carrega um atributo id como identificador único, é

possível identificar apenas esse elemento e seu conteúdo.
• Se você tiver dois elementos com o mesmo nome em uma página da

Web (ou folha de estilo), poderá usar o atributo id para distinguir entre
elementos que possuem o mesmo nome.
Discutiremos a folha de estilo em uma aula separada.
Por enquanto, vamos usar o atributo id para distinguir entre dois

elementos de parágrafo, conforme mostrado a seguir:
Referências
[1] Central da Pesquisa Google. SEO avançada. Tags especiais que o

Google processa. Disponível em:
<https://developers.google.com/search/docs/advanced/crawling/special
-tags?hl=pt-BR&visit_id=637574677265461610-276384739&rd=1>.
[2] Rbtech. HTML e CSS para iniciantes. Vídeo-aulas. Disponível em: <
https://www.youtube.com/watch?v=iZ1ucWosOww&list=PLInBAd9OZC
zydDFvm06EgbPXYylGVcyIL>. Acesso em 24 maio 2021.

Fatec Pmi Aula 2 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

Fatec Pmi Aula 2 HTML

Enviado por

Direitos autorais:

Formatos disponíveis

PROGRAMAÇÃO EM MICROINFORMÁTICA

Prof. Dr. Aparecido Jorge Jubran

Prof. Dr. Aparecido Jorge Jubran

HTML - Visão geral

Originalmente, o HTML foi desenvolvido com o intuito de definir a

Agora, o HTML está sendo amplamente utilizado para formatar páginas

HTML é OBRIGATÓRIO para estudantes e profissionais ativos se tornarem

Principais vantagens de aprender HTML:

•Torne-se um web designer -

Principais vantagens de aprender HTML:

•Aprender outras linguagens -

Um pequeno programa HTML convencional Hello World .

Desenvolvimento de páginas da Web -

HTML é usado para criar páginas que são renderizadas na web.

As páginas HTML hoje em dia funcionam bem em todas as plataformas,

Quais ferramentas são necessárias?

1) Navegadores: Google Chrome, Microsoft Edge, Opera, Safari, etc.

Quais ferramentas são necessárias?

Uma opção gratuita para o Windows é o Notepad++.

Você sabe se o processador do teu computador é 32 ou 64 bits?

Obs.: Uma alternativa do Notepad++ para o Linux é o Notepadqq.

Observação: o meu micro é 32 ou 64 bits?

Para saber a configuração do teu

Observação: o meu micro é 32 ou 64 bits?

Observação: o meu micro é 32 ou 64 bits?

Vai abrir a tela de Configurações:

➔ Use a barra de rolagem para chegar a

Observação: o meu micro é 32 ou 64 bits?

➔ Veja as configurações do computador

Quais ferramentas são necessárias?

Você pode escolher a

Quais ferramentas são necessárias?

Faça o download para instalar o aplicativo.

Quais ferramentas são necessárias?

Para abrir o Notepad++, você

➔ Ao aparecer o ícone, clique

➔ Vamos selecionar a linguagem que usaremos: clique na guia Linguagem,

➔ Digite o código a seguir.

Marca ou Tag HTML de

Marca ou Tag HTML de

Head: configurações do site.

Body: contém os elementos que serão

Dentro de body, digite:

Crie em teu computador

Crie em teu computador um diretório chamado HTML.

➔ Escolha o diretório HTML;

É recomendado que o nome

Note que o título da página exibida é o nome do arquivo.

Podemos mudá-lo com a

Hipertexto refere-se à forma como as páginas da Web (documentos

Assim, o link disponível em uma página web é denominado Hipertexto.

Como o próprio nome sugere, HTML é uma linguagem de marcação , o

Um exemplo de documento HTML -

HTML é uma linguagem de marcação e utiliza diversas tags para formatar

Essas tags são colocadas entre chaves angulares <Tag Name>.

A maioria das tags tem suas tags de fechamento correspondentes.

Por exemplo, <html> tem sua tag de fechamento </html> e a

Esta tag define o tipo de documento e a versão HTML

Esta tag representa o cabeçalho do documento que pode conter outras

A tag <title> é usada dentro da tag <head> para mencionar o título do

Esta tag representa o título.

Esta tag representa um parágrafo.

Para aprender HTML, você precisará estudar diversas tags e entender