Programação HTML5

Front End

•

ESTÁCIO

0

Greg Ferraz

15/04/2024

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Front End

734 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

1 /
Tecnólogo em Análise e Desenvolvimento de Sistemas:
Programação Orientada a Objetos
Prof.: Adalberto de O Pereira
PROGRAMAÇÃO VISUAL (FRONT END)
2 /
Tópicos
Criação de Layout HTML / HTML5
2.1 Introdução ao HTML
2.2 Sintaxe HTML
2.3 Editores HTML
2.4 Estrutura do documento HTML simples
2.5 Tags, atributos e comentário HTML
2.6 HTML Layout Blocos, tabelas, iframe e lista de dados
Introdução ao HTML
HTML (HyperText Markup Language) não é uma linguagem 
de programação, é uma linguagem de marcação utilizada 
para dizer ao seu navegador como estruturar a página web 
que você visita. 
A página pode ser tanto complicada como simples quanto o 
desenvolvedor web desejar que seja. HTML consiste em 
uma série de elementos que você usa para anexar, envolver 
ou marcar diferentes partes do conteúdo para que apareça 
ou aja de uma certa maneira.
O fechamento das tags pode transformar uma parte 
do conteúdo dentro do elemento em um link para direcionar 
à uma outra página web, colocar as palavras em itálico, e 
assim por diante. Por exemplo, observe o conteúdo a seguir:
https://developer.mozilla.org/pt-BR/docs/Glossario/HTML
https://developer.mozilla.org/pt-BR/docs/Glossario/Elemento
https://developer.mozilla.org/pt-BR/docs/Glossario/Tag
Histórico
HTML SGML (Standard Generalized Markup Language)
XML SGML
Origem: CERN
• Popularização: navegador Mosaic (1993)
• Primeira Grande Guerra: IE x Netscape (Versões próprias do HTML);
• Padronização: W3C (http://www.w3c.org/ e www.w3schools.com/)
• HTML 2.0 1995
• HTML 3.2 1997 <- fim da guerra
• HTML 4.01 1999
• XHTML 1.0 2000 <- HTML 4.01 em XML
• XHTML 1.1 2001
• HTML 5.0 2011 padrão atual
http://www.w3c.org/
As partes principais do elemento são:
1.Tag de abertura: Consiste no nome do elemento ( neste caso: p ), envolvido 
entre parênteses angulares de abertura e fechamento. Isso indica onde o elemento 
começa, ou inicia a produzir efeito — neste caso, onde o parágrafo se inicia.
2. Tag de fechamento: É o mesmo que a tag de abertura, exceto que este inclui uma 
barra diagonal antes do nome do elemento. Indica onde o elemento termina — neste 
caso, onde fica o fim do parágrafo. Falhar em incluir o fechamento de uma tag é um erro 
comum para iniciantes e pode levar a resultados estranhos.
3.O conteúdo: Este é o conteúdo do elemento, que neste caso é somente texto.
1.O elemento: A tag de abertura, mais a tag de fechamento, mais o conteúdo, é igual ao 
elemento.
Sintaxe HTML
A linguagem HTML não faz diferença entre letras maiúsculas e minúsculas. Então, <body> é
equivalente a <BODY> ou <Body>. Porém, o padrão definido pela W3C é sempre usar o 
nome das TAGs com todas as letras minúsculas.
Sintaxe HTML
Os caracteres dentro da TAG (marca) são, geralmente, uma abreviação de uma instrução 
de formação ou um elemento a ser adicionado à página.
Editores HTML
O Visual Studio Code ou VSCode, como é 
conhecido pelos mais íntimos, é um editor de 
código-fonte criado pela Microsoft e baseado 
no Electron, uma framework JavaScript.
Ele inclui suporte para depuração, controle Git 
incorporado, realce de sintaxe, 
complementação inteligente de 
código, snippets e refatoração de código.
O Sublime Text é diferenciado por sua 
simplicidade e leveza. A sua utilização é 
facilitada por sua interface agradável e intuitiva. 
Ele aceita diversas linguagens de programação 
e é personalizável.
Para desenvolver páginas com HTML basicamente precisamos de um editor de texto, como 
o Bloco de Notas do Windows, Nano e Emacs no Linux, entre vários outros. Há, ainda, 
editores com opções avançadas, como recursos de syntax hilghligt e autocomplete, como 
Sublime Text, Atom, Brackets e Visual Studio Code, que podem ser usados para editar 
documentos HTML.
Estrutura básica de 
uma página HTML
A estrutura básica de uma página HTML pode ser vista na Listagem 
1, na qual podemos ver as principais tags que são necessárias para 
que o documento seja corretamente interpretado pelos browsers.
Linha 01 : <!DOCTYPE html>
Linha 02: <html>
Linha 03: <head>
Linha 04:<meta charset="UTF-8"/>
Linha 05:<title>Document</title>
Linha 06: </head>
Linha 07 :<body>
Linha 08:<!-- Conteúdo -->
Linha 09:</body>
Linha 10:</html>
A W3C mantém um site que valida páginas em
http://validator.w3.org/
http://validator.w3.org/
Estrutura de um arquivo html
Linha 1: a instrução DOCTYPE deve ser sempre a primeira a aparecer em uma 
página HTML para indicar ao browser qual versão da linguagem usada. Nesse 
caso, estamos trabalhando com a HTML5, versão na qual a declaração do 
DOCTYPE é bastante simples, como podemos ver na listagem;
Linhas 2 e 10: abertura e fechamento da tag html, que delimita o documento. 
Sendo assim, todas as demais tags da página devem estar nesse espaço;
Linhas 3 e 6: abertura e fechamento da tag head, que define o cabeçalho do 
documento. O conteúdo nesse espaço não é visível no browser, mas contém 
instruções sobre seu conteúdo e comportamento. Dentro dessa tag, por 
exemplo, podem ser inseridas folhas de estilo e scripts;
Estrutura básica de 
uma página HTML
Linha 4: a tag meta, nesse caso, especifica qual conjunto de 
caracteres (character set ou charset) será usado para renderizar o 
texto da página. O UTF-8 contém todos os caracteres dos padrões 
Unicode e ASCII, sendo, portanto, o mais utilizado em páginas web. 
A mesma tag meta, porém com outros atributos, pode ser utilizada 
para outros fins, como na SEO (Search Engine Optimization);
Linha 5: a tag title define o título da página, aquele que aparece na 
janela/aba do navegador;
Linhas 7 e 9: abertura e fechamento da tag body, marcando o 
espaço no qual deve estar contido o conteúdo visual da página. As 
demais tags que representam texto, botões etc. devem ser 
adicionadas nesse intervalo;
Linha 8: nessa linha podemos observar a sintaxe para adição de 
comentários em HTML. Esse trecho não é renderizado pelo browser.
Estrutura básica de 
uma página HTML
Funcionamento
O ponto central do uso de HTML é o uso de TAGS. Exemplo 
de TAG:
• <TAG [atributos]> conteúdo </TAG>
Ao receber um documento HTML, um navegador analisa os 
tags contidos no documento.
Se reconhecer o tag, renderiza a tag, se não reconhecer, 
ignora.
Exemplo: Parágrafo
• sintaxe básica: <p> ... </p>
Atributos
Todos os elementos do HTML podem ter atributos.
Os atributos provem informação adicional para um elemento.
Os atributos são sempre especificados em um tag de começo.
Os atributos estão sempre em pares nome/valor como
• <p id=paragrafo1> conteúdo </p>
Atributos Globais: Valem para quase todos os tags;
Atributos locais: valem somente para uma tag especíca.
html
Estrutura básica de um arquivo html5
Tags básicas:
• Seleção de metadados (<meta>)
• Markup básico: <p>, <h1>, <h2> ...
• Imagens: <img ... >
• Links: <a href ... >
• Tabelas: <table>
• Entrada de dados: <form>
Tags básicas
O conjunto de tags é muito grande, e inviável de ser 
apresentado.
Sendo assim, o conjunto foi dividido em grupos, sendo que 
somente alguns de cada grupo serão apresentados.
• Seleção de metadados: <meta>
• Markup básico: <p> ... </p> e <h1> ... </h1>
• Imagens: <img ... >
• Links: <a href ... >
• Tabelas: <table>
• Entrada de dados: <form>
Seleção de metadados: <metA>
O tag <meta> fornece informações sobre o documento que não 
são mostrados, mas que podem ser utilizados em buscadores;
Exemplo:
<head>
<meta name="aula" content="Programação Web">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content=”Luiz Hoffmann">
<meta charset="UTF-8">
</head>
Markup básico: 
<p>...</p> e <h1>...</h1>
Exemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Exemplo de uso dos tags <p> e <h1> </title>
</head>
<!-- Este é um comentário de várias linhas -->
<body>
<h1> Este é um cabeçalho de nível 1 </h1>
<h2> Este é um cabeçalho de nível 2 </h2>
<p style="color:green">Este é um parágrafo em cor verde.</p> 
<p style="color:blue">Esteé um parágrafo em cor azul.</p>
</body>
</html>
Principais Tags (Texto)
Tag Descrição
<b> Define texto em negrito
<big> Define texto grande
<em> Define texto enfatizado;
<i> Define texto em itálico
<small> Define texto pequeno
<strong> Define texto forte
<sub> Define texto subescrito
<sup> Define texto superescrito
<ins> Define texto inserido
<del> Define texto cancelado
Entidades de Caractere Mais Comuns:
Resultado Descrição Nome da Entidade
espaço não separável &nbsp;
< menor do que &lt;
> maior do que &gt;
& e comercial &amp;
" aspas &quot;
' apóstrofe
Algumas Outras Entidades de Caractere Comumente Usadas:
Resultado Descrição Nome da Entidade
¢ cent &cent;
£ libra &pound;
¥ yen &yen;
§ parágrafo (em inglês section) &sect;
© copyright &copy;
® marca registrada &reg;
× multiplicação &times;
÷ divisão &division;
Principais Tags (Texto)
Imagens: <img ...>
Principais tipos de Imagens usados:
• GIF Cores de 8 bits (256 cores), qualidade baixa.
• Permite transperência;
• JPG/JPEG Cores de 24 bits (16 milhões de cores), qualidade alta. 
Normalmente gera arquivos menores que o GIF.
• PNG versão livre do GIF, que permite transparência e o mesmo 
número de cores do JPG. Porém, os arquivos são um pouco 
maiores do que JPEG.
Uso: <img src=...., alt=... />
http://www.w3schools.com/tags/tag_img.asp
Links: <a href ...>
O tag <a> (anchor ) é usado para acessar outra página(link), 
ou outra parte da mesma página.
O atributo mais comum é o href:
• Para referenciar uma página externa: <a 
href="http://www.w3schools.comVisitW3Schools.com!</a>
• Para referenciar uma parte da própria página:
Criar um ponto de destino: <h2 id="destino Destino"</h2>
Referência: <a href="http://www.google.com" 
target="_blank"</a>
Tabelas: <table>
cabeçalhos: <th> .. <th>
linha: <tr> ... <tr>
elemento: <td> ... <td>
Atributos:
• rowspan, colspan (agregar 
linhas ou colunas)
<table border="1"> 
<tr> 
<th>Cabeçalho</th> <th>Outro 
cabeçalho</th> </tr> 
<tr> 
<td>linha 1, célula 1</td> 
<td>linha 1, célula 2</td> 
</tr> 
<tr> <td>linha 2, célula 1</td> 
<td>linha 2, célula 2</td> </tr> 
</table>
Tag Descrição
<table> Define uma tabela
<th> Define um cabeçalho de tabela
<tr> Define uma linha de tabela
<td> Define uma célula de tabela
<caption> Define um título de tabela
<colgroup> Define um grupo de colunas de tabela
<col>
Define os valores de atributo para uma ou mais 
colunas em uma tabela
<thead> Define um cabeçalho de tabela
<tbody> Define o corpo de uma tabela
<tfoot> Defines o rodapé (footer) de uma tabela
Tabelas: <table>
Exercícios - 1
Preparar uma página que inclua os seguintes elementos:
• título com o nome do aluno;
• texto com uma pequena saudação;
• todos os tags recomendados.
Incluir na página anterior as seguintes informações:
• autor;
• palavras-chave.
Fazer com que a página tenha três parágrafos:
• a saudação já existente;
• uma descrição da sala de aula;
• uma descrição da roupa de um colega ao lado.
Incluir headers (<H1>) para cada um dos parágrafos.
Formatar o nome do colega (que aparece no parágrafo da roupa) de forma a 
aparecer: todo o nome em ênfase, com o sobrenome adicionalmente forte 
(strong).
Inserir em sua página a poesia "Batatinha quando nasce...", em destaque 
(<BLOCKQUOTE>), e se lembrando de mudar de linha onde requerido.
Exercícios - 2
Introduza comentários em todos os pedaços de seu HTML para 
indicar a que exercício eles se referem.
Introduza no final da página seu endereço.
Faça uma página com links para cada uma dessas novas páginas. 
Os links têm que estar adequadamente inseridos em um texto.
Retorne à página original, com todas as seções, e inclua uma 
nova seção, em seu início, que tenha links relativos para trechos 
dessa mesma página, um link para cada seção. Para isso, você 
precisará definir âncoras em cada seção.
Exercício - 3
Inclua a tabela a seguir em sua página:
Exercícios - 4
Obs:
Menu – Links
Relatório no formulário
Bibliografia
MILETTO, Evandro Manara ; BERTAGNOLLI, Sílvia de Castro (org). 
Desenvolvimento de software II: introdução ao desenvolvimento web com HTML, 
CSS, Javascript e PHP. Porto Alegre: Bookman, 2014.
Site : https://www.nuvemshop.com.br/blog/o-que-e-ecommerce/
Por Luane Silves – Acessado em 18/04/2020 
KALBACH, James. Design de navegação web: otimizando a experiência do
usuário. Porto Alegre: Bookman, 2009.
https://www.nuvemshop.com.br/blog/o-que-e-ecommerce/