Buscar

Aula_01_ _LINGUAGEM_DE_MARCACAO_DE_HYPERTEXTO_-_HTML

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

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

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ê viu 3, do total de 38 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

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

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ê viu 6, do total de 38 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

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

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ê viu 9, do total de 38 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

Prévia do material em texto

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.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 <html> é uma maneira de
informar para o navegador que
linguagem ele deve interpretar o
cídigo.
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 <head> fornece informações
básicas para a estrutura da página,
principalmente, no cabeçalho dela.
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 <title> </title> permite a inclusão do
titulo na barra superior do navegador.
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 </head> expressão utilizada
para fechar o bloco de instrução.
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 <body> é nesta tag que
podemos organizar todo o conteúdo
que a página pode conter.
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 </body> finalizando o bloco de
conteúdo 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
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 </html> finalização da estrutura
geral da página. Toda página deve
iniciar com a tag html e finalizar.
Introdução à Programação
AULA 01: Introdução à Lógica de ProgramaçãoDESV. WEB HTML5, CSS, JS E
Outros elementos TAG’s
Fonte : DevMidia
• <a> Define um hyperlink;
• <abbr> Define uma abreviação
• <address> Define um endereço. (Passa a ser tratado como uma seção);
• <area> Define uma área dentro de um mapa de imagem;
• <b> Define um texto em negrito;
• <base> Define uma base URL para todos os links da página;
• <bdo> Define a direção do texto apresentado;
• <blockquote> Define uma citação longa
Introdução à Programação
AULA 01: Introdução à Lógica de ProgramaçãoDESV. WEB HTML5, CSS, JS E
Outros elementos TAG’s
Fonte : DevMidia
• <body> Define o corpo da página;
• <br> Insere uma quebra de linha simples;
• <button> Define um botão de comando;
• <caption> Define o "caption" de uma tabela;
• <cite> Define uma citação;
• <code> Define o código texto do computador;
• <col> Define os atributos da coluna da tabela;
• <i> Define um texto em itálico;
Introdução à Programação
AULA 01: Introdução à Lógica de ProgramaçãoDESV. WEB HTML5, CSS, JS E
Outros elementos TAG’s
Fonte : DevMidia
• <colgroup> Define um grupo de colunas da tabela;
• <dd> Define uma descrição de definição;
• <del> Define um texto deletado;
• <div> Define uma seção no documento;
• <dl> Define uma lista de definição;
• <em> Define um texto em ênfase;
• <fieldset> Define um conjunto de campos (fieldset);
• <form> Define um formulário;
• <h1> até >h6> Define do cabeçalho 1 até o cabeçalho 6;
Introdução à Programação
AULA 01: Introdução à Lógica de ProgramaçãoDESV. WEB HTML5, CSS, JS E
Outros elementos TAG’s
Fonte : DevMidia
• <iframe> Define uma linhas sobre a janela (frame);
• <img> Define uma imagem;
• <input> Define um campo de inserção;
• <ins> Define um texto inserido;
• <kbd> Define um texto do teclado;
• <label> Define uma "label" para o formulário;
• <legend> Define um título para os campos (fields);
• <map> Define uma imagem de mapa;
• <menu> Define uma lista de "menus";
Introdução à Programação
AULA 01: Introdução à Lógica de ProgramaçãoDESV. WEB HTML5, CSS, JS E
HTML5 - Novas Tags
Fonte : DevMidia
• <article>: Define um artigo;
• <aside>: Define o conteúdo além do conteúdo da página;
• <embed>: Define o conteúdo interativo ou plugin externo;
• <figcaption>: Define o caption de uma imagem;
• <figure>: Define um grupo de média e seus captions;
• <footer>: Define o rodapé de uma página;
• <header>: Define o cabeçalho de uma página;
• <nav>: Define os links de navegação;
• <section>: Define uma área ou seção;
• <wbr>: Define uma possível quebra de linha;
Introdução à Programação
AULA 01: Introdução à Lógica de ProgramaçãoDESV. WEB HTML5, CSS, JS E
HTML5 - Novas Tags-Mídias
• <audio>: Define o conteúdo de som;
• <source>: Define recursos de mídia;
• <video>: Define um vídeo;
Introdução à Programação
AULA 01: Introdução à Lógica de ProgramaçãoDESV. WEB HTML5, CSS, JS E
Atividade prática na próxima aula...
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Bibliografia Básica
DESV. WEB HTML5, CSS, JS E
DEITEL, Paul J.; DEITEL, Harvey M. Ajax, Rich Internet Applications e
desenvolvimento Web para programadores. São Paulo: Pearson, 2008.
Disponível em: https://plataforma.bvirtual.com.br/Leitor/Publicacao/426/pdf
PLOTZE, Rodrigo. Tecnologias WEB. Rio de Janeiro: SESES, 2015.
Disponível em:
http://repositorio.novatech.net.br/site/index.html#/objeto/detalhes/BF917AFA-
2335-
4BB8-A269-85491F228012
TERUEL, Evandro C. HTML 5 Guia Prático. 2ª Ed. São Paulo: Érica, 2014.
Disponível em:
https://integrada.minhabiblioteca.com.br/#/books/9788536519296/
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Bibliografia Complementar
DESV. WEB HTML5, CSS, JS E
FLANAGAN, David. JavaScript: O Guia Definitivo. 6ª Ed. Porto Alegre: Bookman,
2014.
Disponível em: https://integrada.minhabiblioteca.com.br/#/books/9788565837484/
FONSECA, Cleber C. Programação para Internet Rica. Rio de Janeiro: SESES, 2016.
Disponível em:
http://repositorio.novatech.net.br/site/index.html#/objeto/detalhes/846BB14A-57D1- 236-
B334-17A19E0A77D6
HAROLD, Elliotte R. Refatorando HTML - Como Melhorar o Projeto de Aplicações
Web Existentes. Porto Alegre: Bookman, 2010.
Disponível em: https://integrada.minhabiblioteca.com.br/#/books/9788577806706/
MILETTO, Evandro M.; BERTAGNOLLI, Silvia C. Desenvolvimento de Software II:
Introdução ao Desenvolvimento Web com HTML, CSS, JavaScript e PHP. Porto
Alegre: Bookman, 2014.
Disponível em: https://integrada.minhabiblioteca.com.br/#/books/9788582601969/
SOARES, Walace. PHP 5 - Conceitos, Programação e Integração com Banco de
Dados. 7ª Ed. São Paulo: Érica, 2013.
Disponível em: https://integrada.minhabiblioteca.com.br/#/books/9788536505633
http://repositorio.novatech.net.br/site/index.html#/objeto/detalhes/846BB14A-57D1-
Introdução à Programação
AULA 01: Introdução à Lógica de ProgramaçãoSugestões de Livros
DESV. WEB HTML5, CSS, JS E

Outros materiais

Materiais relacionados

Perguntas relacionadas

Materiais recentes

Perguntas Recentes