001 - Introdução HTML

•

PUC-MINAS

Tiago Sena

07/12/2021

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Você viu 3, do total de 60 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Você viu 6, do total de 60 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Você viu 9, do total de 60 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Html

759 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

CURSO DE HTML + CSS + JS
MÓDULO: HTML
professor: TIAGO SENA
1
HTML
HTML é a linguagem de marcação padrão para páginas da web.
Com HTML, você pode criar seu próprio site.
HTML é fácil de aprender - você vai se divertir!
2
INTRODUÇÃO
HTML é a linguagem de marcação padrão para a criação de páginas da web.
HTML significa Hyper Text Markup Language
HTML é a linguagem de marcação padrão para a criação de páginas da web
HTML descreve a estrutura de uma página da web
HTML consiste em uma série de elementos
Os elementos HTML informam ao navegador como exibir o conteúdo
Os elementos HTML identificam partes de conteúdo como "isto é um título", "isto é um parágrafo", "isto é um link", etc.
3
EXEMPLO 001 - CÓDIGO HTML
4
EXEMPLOS DE TAGS HTML
A <!DOCTYPE html> declaração define que este documento é um documento HTML5
O <html> elemento é o elemento raiz de uma página HTML
O <head> elemento contém metainformações sobre a página HTML
O <title> elemento especifica um título para a página HTML (que é mostrado na barra de título do navegador ou na guia da página)
O <body> elemento define o corpo do documento e é um contêiner para todo o conteúdo visível, como títulos, parágrafos, imagens, hiperlinks, tabelas, listas, etc.
O <h1> elemento define um grande título
O <p> elemento define um parágrafo
5
ELEMENTOS HTML
O que é um elemento HTML?
Um elemento HTML é definido por uma tag inicial, algum conteúdo e uma tag final:
< tagname > O conteúdo vai aqui ... < / tagname >
O elemento HTML é tudo, desde a tag inicial até a tag final:
< h1 > Meu primeiro título < / h1 >
< p > Meu primeiro parágrafo. < / p >
6
ELEMENTOS HTML NO EXEMPLO 001
7
ELEMENTOS HTML VAZIOS
Nota: alguns elementos HTML não têm conteúdo (como o elemento <br>). Esses elementos são chamados de elementos vazios. Os elementos vazios não possuem uma tag de finalização!
<br>
<br>
<br>
<br>
8
NAVEGADORES WEB E HTML
O objetivo de um navegador da web (Chrome, Edge, Firefox, Safari) é ler documentos HTML e exibi-los corretamente.
Um navegador não exibe as tags HTML, mas as usa para determinar como exibir o documento:
9
ESTRUTURA DA PÁGINA HTML
Abaixo está uma visualização da estrutura de uma página HTML:
10
ESTRUTURA DA PÁGINA HTML
Nota: O conteúdo dentro da seção <body> (a área branca acima) será exibido em um navegador. O conteúdo dentro do elemento <title> será mostrado na barra de título do navegador ou na guia da página.
11
HISTÓRIA DO HTML
Desde os primeiros dias da World Wide Web, houve muitas versões de HTML:
1989 - Tim Berners-Lee inventou a www
1991 - Tim Berners-Lee inventou a HTML
1993 - Dave Raggett elaborou a HTML+
1995 - HTML Working Group definiu a HTML 2.0
1997 - W3C Criou a Recomendação HTML 3.2
1999 W3C Criou a Recomendação HTML 4.01
12
HISTÓRIA DO HTML
2000 W3C Criou a Recomendação XHTML 1.0
2008 Primeiro protótipo público do HTML5
2012 - HTML5 Se tornou o padrão HTML mais avançado
2014 W3C Criou a Recomendação HTML5
2016 W3C Criou a Candidatura de Recomendação HTML 5.1
2017 W3C Criou a Recomendação HTML5.1 2ª Edição
2017 W3C Criou a Recomendação HTML5.2
13
EDITOR DE CÓDIGO HTML
Para efetuar as criações e alterações de código fonte em HTML utilizaremos o editor de código fonte chamado Notepad++
Na pasta Ferramentas colocamos algumas versões do Notepad++
Ele também pode ser encontrado e baixado no site:
https://notepad-plus-plus.org/downloads
14
NOTEPAD++
Na página de download você pode baixar a versão de 32 bits ou 64 bits.
Você também pode escolher entre o instalador ou o portátil.
15
NOTEPAD++ CONFIGURAÇÃO DE IDIOMA PORTUGUÊS
Abra o Notepad++
Clique no menu Settings
Clique na Opção Preferences...
16
NOTEPAD++ CONFIGURAÇÃO DE IDIOMA PORTUGUÊS
Na janela Preferences, selecione a guia General na parte esquerda e selecione o Idioma Português brasileiro na parte Localization e clique em Close/Fechar.
17
NOTEPAD++ CONFIGURAÇÃO DE LINGUAGEM HTML
Para programar em HTML precisamos informar ao Notepad++ que vamos programar nesta linguagem.
Para isso, clique em Linguagem, depois clique em H e depois clique em HTML
18
INICIANDO A PROGRAMAÇÃO HTML
Agora vamos iniciar a programação HTML com nossos primeiros exemplos.
Não se preocupe se usarmos algumas TAGS que você ainda não conhece.
No Notepad++ em uma aba em branco digite o código fonte abaixo:
19
EXEMPLO 002 - CÓDIGO HTML
Este exemplo está no arquivo 002.html que está dentro da pasta 1-HTML e esta pasta está dentro da pasta 2-Exemplos Código Fonte
20
EXEMPLO 002 - CÓDIGO HTML
Todos os documentos HTML deve começar com uma declaração do tipo de documento: <!DOCTYPE html>
O próprio documento HTML começa <html> e termina com </html>
A parte visível do documento HTML está entre <body> e </body>
21
EXEMPLO 002 - CÓDIGO HTML
Agora vamos salvar este código fonte para executarmos o nosso arquivo.
Clique no menu Arquivo e escolha Salvar ou Salvar como...
Você também pode usar as teclas de atalho:
Ctrl + S (para salvar) ou CTrl + Alt + S (para salvar como)
22
EXEMPLO 002 - CÓDIGO HTML
Selecione uma pasta que deseja salvar os seus códigos fontes.
Recomendamos uma pasta na Área de Trabalho ou uma Pasta em uma Unidade de Backup.
Coloque o nome do arquivo como 002.html
23
EXEMPLO 002 - CÓDIGO HTML
Para abrir o arquivo no navegador de Internet podemos fazer uma das formas abaixo:
1- Clique duas vezes sobre o arquivo
ou
2- Selecione o arquivo e pressione Enter no teclado
ou
3- Selecione o arquivo, clique com o botão direito do mouse e escolha Abrir.
ou
3- Selecione o arquivo, clique com o botão direito do mouse, escolha Abrir com e escolha algum Navegador/Browser de Internet.
24
EXEMPLO 002 - CÓDIGO HTML
Ilustração sobre como abrir o arquivo no navegador
25
EXEMPLO 002 - CÓDIGO HTML
Página do arquivo 002.html aberta no navegador de Internet
26
A DECLARAÇÃO <! DOCTYPE>
A declaração <!DOCTYPE> representa o tipo de documento e ajuda os navegadores a exibir as páginas da web corretamente.
Deve aparecer apenas uma vez, no topo da página (antes de quaisquer TAGS HTML).
A <!DOCTYPE> declaração não diferencia maiúsculas de minúsculas.
A <!DOCTYPE> declaração para HTML5 é:
27
ELEMENTOS HTML
Um elemento HTML é definido por:
uma TAG inicial
Algum conteúdo
E uma TAG final
O elemento HTML é tudo, desde a TAG inicial até a TAG final
<tagname> O conteúdo vai aqui ... </tagname>
28
ELEMENTOS HTML VAZIOS
Nota: alguns elementos HTML não têm conteúdo (como o elemento <br>).
Esses elementos são chamados de elementos vazios.
Os elementos vazios não possuem uma TAG de finalização!
Os elementos HTML sem conteúdo são chamados de elementos vazios.
A tag <br> define uma quebra de linha e é um elemento vazio sem uma tag de fechamento
29
ELEMENTOS HTML ANINHADOS
Os elementos HTML podem ser aninhados (isso significa que os elementos podem conter outros elementos).
Todos os documentos HTML consistem em elementos HTML aninhados.
O exemplo que se segue contém quatro elementos HTML
( <html>, <body>, <h1> e <p>):
30
ELEMENTOS HTML ANINHADOS
O elemento <html> é o elemento raiz e define todo o documento HTML.
Ele possui uma TAG inicial <html> e uma TAG final </html>.
Então, dentro do elemento <html>, há um elemento <body> :
31
ELEMENTOS HTML ANINHADOS
O elemento <body> define o corpo do documento.
Ele possui uma tag inicial <body>e uma tag final </body>.
Então, dentro do elemento <body>, existem dois outros elementos: <h1>e <p>:
32
ELEMENTOS HTML ANINHADOS
O <h1>elemento define um título.
Ele tem uma tag de início <h1>e uma tag de fim </h1>:
O <p>elemento define um parágrafo.
Ele tem uma tag de início <p>e uma tag de fim </p>:
33
NUNCA IGNORE A TAG FINAL
Alguns elementos HTML serão exibidos corretamente, mesmo se você esquecer a tag final:
No entanto, nunca confie nisso! Resultados inesperados e erros podem ocorrer se você esquecer a tag final!
34
HTML NÃO DIFERENCIA MAIÚSCULAS DE MINÚSCULAS
As tags HTML não diferenciam maiúsculasde minúsculas:
<P>significa o mesmo que <p>.
O padrão HTML não requer tags em minúsculas, mas o W3C recomenda minúsculas em HTML e exige minúsculas para tipos de documentos mais restritos como XHTML.
Na W3Schools, sempre usamos nomes de tags em minúsculas.
35
ATRIBUTOS HTML
Todos os elementos HTML podem ter atributos
Os atributos fornecem informações adicionais sobre os elementos
Os atributos são sempre especificados na tag inicial
Os atributos geralmente vêm em pares nome / valor como: nome = "valor“
36
ATRIBUTOS HTML
Exemplo com tag <a>
A tag <a> define um hiperlink.
O atributo href especifica o URL da página para a qual o link vai:
37
SEMPRE USE ATRIBUTOS EM MINÚSCULAS
O padrão HTML não requer nomes de atributos em letras minúsculas.
O atributo de título (e todos os outros atributos) pode ser escrito em maiúsculas ou minúsculas, como título ou TÍTULO .
No entanto, o W3C recomenda atributos em minúsculas em HTML e exige atributos em minúsculas para tipos de documentos mais restritos, como XHTML.
38
SEMPRE CITE VALORES DE ATRIBUTOS
O padrão HTML não requer aspas em torno dos valores dos atributos.
No entanto, o recomendamos citações em HTML.
39
CITAÇÕES SIMPLES OU DUPLAS?
Aspas duplas em torno dos valores de atributos são as mais comuns em HTML, mas também podem ser usadas aspas simples.
Em algumas situações, quando o próprio valor do atributo contém aspas duplas, é necessário usar aspas simples:
40
ESTILOS HTML
O atributo style HTML é usado para adicionar estilos a um elemento, como cor, fonte, tamanho e muito mais.
41
ESTILOS HTML – RESULTADO DO ESTILO
42
ESTILOS HTML – RESULTADO DO ESTILO
Estilos são configurações efetuadas por regras da linguagem css e ajudam na formatação de todo o site.
Iremos aprofundar os conhecimentos de estilos no módulo de css.
43
COMENTÁRIOS HTML
Os comentários HTML não são exibidos no navegador, mas podem ajudar a documentar seu código-fonte HTML.
Você pode adicionar comentários ao código-fonte HTML usando a seguinte sintaxe:

Observe que há um ponto de exclamação (!) na tag inicial, mas não na tag final.
44
COMENTÁRIOS HTML
Com comentários, você pode colocar notificações e lembretes em seu código HTML:
45
COMENTÁRIOS HTML
Os comentários podem ser usados para ocultar o conteúdo.
O que pode ser útil se você ocultar o conteúdo temporariamente:
46
COMENTÁRIOS HTML
Você também pode ocultar mais de uma linha, tudo entre o  será ocultado da tela.
47
COMENTÁRIOS HTML
Os comentários também são ótimos para depurar HTML, porque você pode comentar as linhas de código HTML, uma de cada vez, para procurar erros.
Os comentários podem ser usados para ocultar partes no meio do código HTML.
48
ELEMENTOS DE BLOCO E ELEMENTOS EMBUTIDOS
Cada elemento HTML tem um valor de exibição padrão, dependendo de que tipo de elemento ele é.
Existem dois valores de exibição: bloco e embutido.
49
ELEMENTOS DE BLOCO
Elementos de nível de bloco
Um elemento de nível de bloco sempre começa em uma nova linha.
Um elemento de nível de bloco sempre ocupa toda a largura disponível (se estende para a esquerda e para a direita, tanto quanto pode).
Um elemento de nível de bloco tem uma margem superior e uma inferior, enquanto um elemento embutido não.
O elemento <div> é um elemento de nível de bloco.
50
ELEMENTOS DE BLOCO
Aqui estão os elementos de nível de bloco em HTML:
51
ELEMENTOS EMBUTIDOS
Um elemento embutido não começa em uma nova linha.
Um elemento embutido ocupa apenas a largura necessária.
Este é um elemento <span> dentro de um parágrafo.
52
ELEMENTOS EMBUTIDOS
Aqui estão os elementos embutidos em HTML:
53
ELEMENTOS DE BLOCO E ELEMENTOS EMBUTIDOS
Os comentários também são ótimos para depurar HTML, porque você pode comentar as linhas de código HTML, uma de cada vez, para procurar erros.
Os comentários podem ser usados para ocultar partes no meio do código HTML.
54
HTML - O ELEMENTO HEAD
A HTML <head>elemento é um recipiente para os seguintes elementos: <title>, <style>, <meta>, <link>, <script>, e <base>.
O elemento <head> é um contêiner para metadados (dados sobre dados)
O elemento <head> é colocado entre a <html>tag e a <body>tag
O elemento <title> é obrigatório e define o título do documento
O elemento <style> é usado para definir informações de estilo para um único documento
A elemento <link> tag é mais frequentemente usada para vincular a folhas de estilo externas
O elemento <meta> é normalmente usado para especificar o conjunto de caracteres, descrição da página, palavras-chave, autor do documento e configurações da janela de visualização
O elemento <script> é usado para definir JavaScripts do lado do cliente
O elemento <base> especifica o URL base e / ou destino para todos os URLs relativos em uma página
55
ELEMENTOS SEMÂNTICOS E NÃO SEMÂNTICOS HTML
Elementos semânticos = elementos com significado.
Um elemento semântico descreve claramente seu significado para o navegador e o desenvolvedor.
Exemplos de elementos não semânticos :
<div>e <span>- Não diz nada sobre seu conteúdo.
Exemplos de semânticas elementos:
<form>, <table>e <article>- Claramente define seu conteúdo.
56
CODIFICAÇÃO HTML (CONJUNTOS DE CARACTERES)
Para exibir uma página HTML corretamente, um navegador da web deve conhecer o conjunto de caracteres usado na página.
Isso é especificado na <meta>tag:
57
HTML – CONTEÚDOS
Agora já conhecemos as principais partes dos conteúdos HTML.
Nos próximos vídeos iremos ver os seguintes conteúdos:
TAGS HTML
ATRIBUTOS HTML
REFERÊNCIAS DE CONTEÚDO HTML
EXEMPLOS HTML
EXERCÍCIOS HTML
58
HTML – CONTEÚDOS
Nossas aulas de conteúdos serão 100% práticas.
Mostraremos nos vídeos os conteúdos que precisam ser aprendidos.
Criamos exemplos para facilitar a didática.
Criamos exercícios para ajudar no entendimento e prática do que será ensinado.
Lembre-se que o segredo é entender e saber como utilizar a linguagem.
Não é necessário decorar os códigos fontes, tenha foco em saber o que é e para que serve.
59
HTML – DÚVIDAS E PERGUNTAS
Para esclarecer as dúvidas e responder as perguntas, contamos com grupos no whatsapp para cada turma do nosso curso.
Sempre que precisar, informe sua dúvida ou pergunta no grupo da sua turma, pois desta forma elas poderão ajudar a esclarecer ou responder dúvidas e perguntas semelhantes dos demais alunos.
Um grande abraço e vamos para as partes práticas.
60