HTML

2021
Prof. Me. Sergio Luis Barbieri
Aula 01 – Arquitetura de sistemas
• Stand-alone
• Client/server
• Front-end
• Back-end
• 3-Tier (3 camadas)
• Apresentação
• Logica (regras)
• Dados (armazenamento)
 Aula 01 - Arquitetura

https://www.researchgate.net/figure/A-Typical-3-Tier-Server-Architecture-Tier-1-Web-Server-Tier-2-Application-Server-Tier_fig1_221147997
 Aula 01 - Arquitetura

https://www.researchgate.net/figure/The-3-tier-architecture_fig22_260389483
Aula 01 – Introdução e Ambiente
• Breve histórico da Internet
Projeto ARPANET – comunicação governo, universidades e empresas (1970)
Serviços e-mail, FTP, Newsletter (boletins), etc.
Tim Berners-Lee – serviço WWW - World Wide Web (década 90)
 Protocolo HTTP (”HyperText Transfer Protocol”) e linguagem HTML (”HyperText Markup
Language”)
 1995 JavaScript
 1996 CSS (Cascading Style Sheets)
2020-2
 HTML5
 CSS 3 (Selectors Level 3)
 JavaScript https://www.w3schools.com/js/js_versions.asp
Aula 01 - Ferramentas
• Visual Studio Code
• IDE - do inglês Integrated Development Environment ou Ambiente de
Desenvolvimento Integrado
 Auxiliar a codificação e teste (debug) de programa
 Integra ferramentas para controle de versão (exemplo: GIT) e trabalho em equipe
• https://code.visualstudio.com/download
 Outras opções> notepad++, eclipse (https://www.eclipse.org/downloads/packages/),
etc.
 Aula 02 – Tag HTML
• Tag HTML = Elemento HTML
• Formato padrão

<nome_tag atributo_1=“valor” atributo_n=“valor” >conteúdo</nome_tag>

Exemplos:
<p>Este texto é um exemplo de TAG para iniciar um novo paragrafo</p>
<p class=“destaque”>Este texto é um exemplo de TAG para iniciar um novo paragrafo</p>
<p class=“destaque” onclick=“hide();”>Este texto é um exemplo de TAG para iniciar um novo paragrafo</p>

Nome da Tag: minúscula, maiúscula ou qualquer combinação (usual minúscula)

 Aula 02 – Tag HTML
• Tag HTML = Elemento HTML
• Formato Abreviado e elementos vazios

<nome_tag atributo_1=“valor” atributo_n=“valor” >

Exemplos:
<br />
<img src=“images/foto.png” alt=“Avatar Mario Soares” />

• HTML5 vs XHTML
https://www.w3docs.com/learn-html/xhtml-extensible-hypertext-markup-
language.html
 Aula 02 – Organização do projeto
• Todo projeto é organizado em pastas (folders)
• Os nomes de pastas seguem um padrão de melhores praticas (opcional)
• Algumas empresas criam padrões próprios / específicos
• Melhor um padrão “ruim” do que sem padrão
Aula 02 – Organização do projeto
• Pastas principal (ProjetosHTML)
• Cada projeto ou “exercício” em uma pasta especifica
• A pasta do projeto contém subpastas separadas por tipo de artefato
Aula 02 – Organização do projeto - IDE
• Visual Studio Code
• Opção para abrir “Folder”
Aula 02 – Estrutura básica documento html

• DOCTYPE (não é tag – indica o tipo de renderização)

• Seção head e body
• Tag meta padrão: conjunto de caracteres e apresentação em desktop
e mobile
Aula 02 – Tags
TAG DESCRIÇÃO

<h1> a <h6> Títulos

<p> Novo paragrafo

<br> Quebra de linha

<b> Texto em negrito

<i> Texto em itálico

<u> Texto sublinhado

<hr> Linha horizontal

<ul> Lista não ordenada

<ol> Lista ordenada

<li> Item de uma lista

<a> Hiperlink href http

<a> Hiperlink href mailto

Aula 02 – Caracteres reservados
• Devem ser substituídos por um HTML ENTITY
Texto que inicia com & e termina com ;
Podem ser utilizados para caractere que não estão no teclado (&copy;)
Uso de espaço (&nbsp;)

https://developer.mozilla.org/en-US/docs/Glossary/Entity

https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references