A maior rede de estudos do Brasil

Grátis
38 pág.
Aula_01_ _LINGUAGEM_DE_MARCACAO_DE_HYPERTEXTO_-_HTML

Pré-visualização | Página 1 de 3

ARA0062 - DESV. WEB HTML5, CSS, JS E – 1001/3001
Aula 01 . LINGUAGEM DE MARCAÇÃO DE HYPERTEXTO - HTML
Introdução à Programação
AULA 01: Introdução à Lógica de ProgramaçãoDESV. WEB HTML5, CSS, JS E
LINGUAGEM DE MARCAÇÃO DE HYPERTEXTO - HTML
DESV. WEB HTML5, 
CSS, JS E
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Objetivo
- Estruturar páginas web, utilizando a linguagem DE MARCAÇÃO DE
HYPERTEXTO (HTML 5), para a formação de um arcabouço sobre o qual serão
construídas funcionalidades dinâmicas;
DESV. WEB HTML5, CSS, JS E
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
TÓPICOS
1 .1 FILOSOFIA POR TRÁS DO HTML5 (O HTML 5; O CSS; O JAVASCRIPT)
1 .2 O QUE É E QUAIS SÃO OS ATRIBUTOS DE UMA TAG
DESV. WEB HTML5, CSS, JS E
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Situação-problema 
O mundo hoje não consegue ser pensado sem internet, que hoje é a
ferramenta mais popular do mundo, pessoas de todas as idades e classes
se comunicam e interagem por ela, uma página na web hoje é uma das
ferramentas, isso se não for há ferramenta, mais importante e mais valiosa
que existe, mas como criamos uma página? Como podemos nos tornar
parte desse universo de valor inestimável?
DESV. WEB HTML5, CSS, JS E
Introdução à Programação
AULA 01: Introdução à Lógica de ProgramaçãoDESV. WEB HTML5, CSS, JS E
CONCEITOS E DEFINIÇÕES
DESV. WEB HTML5, CSS, JS E
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
O que é HTML?
DESV. WEB HTML5, CSS, JS E
O HTML é um acrônimo que é definido como uma Linguagem de Marcação de 
Texto (Hyper-Text Markup Language)
É possível que a maioria das páginas da web hospedadas na internet são
escritas em alguma variação de HTML.
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Quem é o idealizador do HTML?
DESV. WEB HTML5, CSS, JS E
No dia 12 de março de 1989, a World Wide Web (WWW ou Rede mundial de
computadores) era criada pelo britânico Tim Berners-Lee. Considerado o pai
da internet, ele conseguiu estabelecer a primeira comunicação entre cliente e
servidor HTTP para compartilhar informações entre os computadores do
CERN (sigla em francês para Organização Europeia para a Pesquisa
Nuclear).(Novais, 2019)
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Qual a diferença entre WEB e INTERNET?
DESV. WEB HTML5, CSS, JS E
Apesar dos termos web e internet hoje serem sinônimos para a maioria das
pessoas, eles não são a mesma coisa.
Internet diz respeito a todo pacote de dados transferidos entre computadores
ao redor do mundo. Enquanto que o termo web se refere ao conjunto de
recursos utilizados para acessar a rede, usando protocolo HTTP (URL) para
transferir os dados e apresentar aos usuários.(Novais, 2019)
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Para que serve o HTML?
DESV. WEB HTML5, CSS, JS E
Ele serve para que seu navegador o interprete e mostre o conteúdo quando
você abre uma página na internet.
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Qual ferramenta eu preciso?
DESV. WEB HTML5, CSS, JS E
Para implementar uma pagina WEB você só precisará de um bloco de nota. É isso
mesmo, um bloco de nota.
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Cronologia das versões do HTML
DESV. WEB HTML5, CSS, JS E
Versões:
1992: HTML 1.0
1993: Algumas definições da aparência, tabelas, formulários.
1994: HTML 2.0: padronizações para as características principais.
HTML 3.0: uma extensão do HTML+ entendido como um rascunho de padrão.
1995: HTML 3.2: Netscape e Internet Explorer definem seus próprios padrões baseados 
nas implementações correntes.
1997: HTML 4.0: São lançados os browsers Netscape v4.0 (agosto) e Internet Explorer v4.0 
(outubro) que apresentaram um conjunto de tecnologias (CSS, JavaScript/VBScript e DOM) 
que juntas disponibilizaram diversos recursos tornando o HTML dinâmico.
1999: HTML 4.01: Algumas modificações da versão anterior.
2000: XHTML 1.0 - Versão XML do HTML 4.01: É criado e consiste de uma versão XML do 
HTML v4.01.
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
LINHA DO TEMPO 
HTML 2.0: padronizações para as características principais
HTML 3.2: Netscape e Internet Explorer definem seus próprios padrões baseados nas 
implementações correntes.
Algumas definições da aparência, tabelas, formulários
Versões mais importantes do HTML (TimeLine)
DESV. WEB HTML5, CSS, JS E
1992 1993 1994 1995 1997 1999 2000 2014
Inicio de tudo Html 1.0
HTML 4.0: São lançados os browsers Netscape v4.0 e Internet Explorer v4.0 com suporte a 
HTML.
HTML 4.01: Algumas modificações da versão anterior.
XHTML 1.0 - Versão XML do HTML 4.01: É criado e consiste de uma versão 
XML do HTML v4.01.
HTML5 surge com uma versão com suporte de alto nível (Vídeo e áudio)
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Quais são as principais diferenças entre HTML e HTML5?
DESV. WEB HTML5, CSS, JS E
A grande diferença que o HTML5 tem sobre suas versões anteriores é o
suporte a áudio e vídeo de alto nível, esses recursos não faziam parte nas
versões anteriores do HTMLs.
Introdução à Programação
AULA 01: Introdução à Lógica de ProgramaçãoDESV. WEB HTML5, CSS, JS E
• SVG, canvas e outros gráficos vetoriais virtuais são suportados em
HTML5, enquanto que em HTML, usando gráficos vetoriais só era
possível usando-se em conjunto com diferentes tecnologias como Flash.
• O HTML5 usa bancos de dados SQL da Web, cache de aplicativos para
armazenamento temporário de dados, enquanto isso, em HTML, apenas
o cache do navegador pode ser utilizado para esse fim. (Rafael H, 2018)
A Filosofia por trás do HTML5
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
A Filosofia por trás do HTML5
DESV. WEB HTML5, CSS, JS E
• O HTML5 suporta novos tipos de controles de formulário, por exemplo:
datas e horas, e-mail, número, intervalo, tel, url, pesquisa etc.
• O HTML5 não é baseado no SGML, e isso permite que ele tenha regras de
análise aprimoradas que proporcionam compatibilidade aprimorada com
outras linguagens. (Rafael H, 2018)
Introdução à Programação
AULA 01: Introdução à Lógica de ProgramaçãoDESV. WEB HTML5, CSS, JS E
O que podemos entender sobre elemento HTML?
“Elementos são entidades que especificam como documentos HTML devem 
ser construídos e que tipo de conteúdo deve ser colocado em determinada 
parte de um documento HTML”.
Introdução à Programação
AULA 01: Introdução à Lógica de ProgramaçãoDESV. WEB HTML5, CSS, JS E
O que podemos entender sobre elemento HTML?
Exemplos de Elementos de composição da página
Introdução à Programação
AULA 01: Introdução à Lógica de ProgramaçãoDESV. WEB HTML5, CSS, JS E
Principais Elementos TAG’s
Para que o navegador possa reconhecer um arquivo com formato HTML, é 
necessário algumas tags que são consideradas estruturas principais para 
esse reconhecimento.
1. Definição da estrutura como html
2. Abertura do bloco principal
3. Abertura do cabeçalho
4. Definição do titulo da página
5. Fechamento do cabeçalho
6. Inicio do conteúdo
7. ..
8. Fim do conteúdo
9. Fechamento do bloco principal
Introdução à Programação
AULA 01: Introdução à Lógica de ProgramaçãoDESV. WEB HTML5, CSS, JS E
Principais Elementos TAG’s
1. Definição da estrutura como html
2. Abertura do bloco principal
3. Abertura do cabeçalho
4. Definição do titulo da página
5. Fechamento do cabeçalho
6. Inicio do conteúdo
7. ..
8. Fim do conteúdo
9. Fechamento do bloco principal
A tag <!DOCTYPE html> Define o tipo de
documento; (No HTML 4 existiam três (3)
diferentes tipos de doctype, mas no HTML 5
temos apenas um (1) tipo <!DOCTYPE HTML>. É
aqui que o navegador entende o tipo de
documento e como ele deve interpretar as tags
nele contidas.)
Introdução à Programação
AULA 01: Introdução à Lógica de ProgramaçãoDESV.