SlideShare uma empresa Scribd logo

Introdução ao HTML4 e HTML5

Aula introdutória sobre o uso de HTML nas versões 4 e 5.

1 de 38
Baixar para ler offline
S
Introdução ao HTML 4 e 5
Prof. Leonardo Soares
HTML
S Não é uma linguagem de programação
S É uma linguagem de marcação
S Na programação para web é usada para apresentar elementos
visuais
S Utiliza uma síntaxe similar ao XML
S Utiliza tags <>
S É guiado por uma específicação do W3C
Olá mundo!
<html>
<head>
<title>Meu primeiro aplicativo</title>
</head>
<body>
<h1>Olá mundo!</h1>
</body>
</html>
HTML e linguagens de
programação
S HTML não possui recursos de programacão, isto impossibilita:
S O uso de repetições
S Condicionais
S Usar variáveis de programação, etc…
S Apenas com HTML iremos produzir páginas estáticas
S Ao associar HTML com linguagens de programação
produziremos páginas dinâmicas
S É uma boa prática evitar código de programação junto ao
HTML
Tags HTML
S Tudo em HTML será representado através de tags <>
S Sua sintaxe possui duas formas:
S <tag />
S <tag></tag>
S Há também o uso de propriedades nas tags para alterar seu
comportamento
S <tag height=“20px”>
S Precisamos conhecer as tags HTML para saber o que pode ser
feito com ele…
Estrutura de uma página
HTML
S <html>
S <head>
S <body>

Mais conteúdo relacionado

Mais procurados

Introdução a programação para a Internet
Introdução a programação para a InternetIntrodução a programação para a Internet
Introdução a programação para a InternetLeonardo Soares
 
HTML - Aula 01 - Estrutura básica e tags básicas no html
HTML - Aula 01 - Estrutura básica e tags básicas no htmlHTML - Aula 01 - Estrutura básica e tags básicas no html
HTML - Aula 01 - Estrutura básica e tags básicas no htmlTiago Luiz Ribeiro da Silva
 
HTML - Listas, Estilos, Tabelas, Div, Span, Formulário
HTML -  Listas, Estilos, Tabelas, Div, Span, FormulárioHTML -  Listas, Estilos, Tabelas, Div, Span, Formulário
HTML - Listas, Estilos, Tabelas, Div, Span, FormulárioArthur Emanuel
 
Curso de css3 unidade 1 - introdução ao css
Curso de css3   unidade 1 - introdução ao cssCurso de css3   unidade 1 - introdução ao css
Curso de css3 unidade 1 - introdução ao cssLéo Dias
 
Apresentação HTML e CSS
Apresentação HTML e CSSApresentação HTML e CSS
Apresentação HTML e CSSledsifes
 
01 Introdução à programação web
01 Introdução à programação web01 Introdução à programação web
01 Introdução à programação webCentro Paula Souza
 
Curso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicosCurso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicosTiago Antônio da Silva
 
Curso HTML 5 - Aula com Formulários, Imagens, Áudio e Vídeo
Curso HTML 5 - Aula com Formulários, Imagens, Áudio e VídeoCurso HTML 5 - Aula com Formulários, Imagens, Áudio e Vídeo
Curso HTML 5 - Aula com Formulários, Imagens, Áudio e VídeoTiago Antônio da Silva
 
Aula 1 linguagem html (1)
Aula 1   linguagem html (1)Aula 1   linguagem html (1)
Aula 1 linguagem html (1)Kaoru Hatake
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Jose Augusto Cintra
 

Mais procurados (20)

Html
HtmlHtml
Html
 
Introdução a programação para a Internet
Introdução a programação para a InternetIntrodução a programação para a Internet
Introdução a programação para a Internet
 
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScriptCurso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
 
HTML - Aula 01 - Estrutura básica e tags básicas no html
HTML - Aula 01 - Estrutura básica e tags básicas no htmlHTML - Aula 01 - Estrutura básica e tags básicas no html
HTML - Aula 01 - Estrutura básica e tags básicas no html
 
HTML Principios Básicos
HTML Principios BásicosHTML Principios Básicos
HTML Principios Básicos
 
Introdução ao HTML
Introdução ao HTMLIntrodução ao HTML
Introdução ao HTML
 
HTML - Listas, Estilos, Tabelas, Div, Span, Formulário
HTML -  Listas, Estilos, Tabelas, Div, Span, FormulárioHTML -  Listas, Estilos, Tabelas, Div, Span, Formulário
HTML - Listas, Estilos, Tabelas, Div, Span, Formulário
 
Curso de css3 unidade 1 - introdução ao css
Curso de css3   unidade 1 - introdução ao cssCurso de css3   unidade 1 - introdução ao css
Curso de css3 unidade 1 - introdução ao css
 
Apresentação HTML e CSS
Apresentação HTML e CSSApresentação HTML e CSS
Apresentação HTML e CSS
 
Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
 
07 html formulários
07 html   formulários07 html   formulários
07 html formulários
 
01 Introdução à programação web
01 Introdução à programação web01 Introdução à programação web
01 Introdução à programação web
 
Curso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicosCurso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicos
 
Curso HTML 5 - Aula com Formulários, Imagens, Áudio e Vídeo
Curso HTML 5 - Aula com Formulários, Imagens, Áudio e VídeoCurso HTML 5 - Aula com Formulários, Imagens, Áudio e Vídeo
Curso HTML 5 - Aula com Formulários, Imagens, Áudio e Vídeo
 
Plano de aula sobre HTML básico
Plano de aula sobre HTML básicoPlano de aula sobre HTML básico
Plano de aula sobre HTML básico
 
Seletores css
Seletores cssSeletores css
Seletores css
 
Introdução ao CSS
Introdução ao CSSIntrodução ao CSS
Introdução ao CSS
 
Aula 1 linguagem html (1)
Aula 1   linguagem html (1)Aula 1   linguagem html (1)
Aula 1 linguagem html (1)
 
Aula 02
Aula 02Aula 02
Aula 02
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5
 

Destaque

HTML 5 A evolução do HTML 4 para o HTML 5
HTML 5 A evolução do HTML 4 para o HTML 5HTML 5 A evolução do HTML 4 para o HTML 5
HTML 5 A evolução do HTML 4 para o HTML 5ondazul
 
Desbravando o HTML5 Boilerplate
Desbravando o HTML5 BoilerplateDesbravando o HTML5 Boilerplate
Desbravando o HTML5 BoilerplateZeno Rocha
 
Snc 2º ano - 2012
Snc   2º ano - 2012Snc   2º ano - 2012
Snc 2º ano - 2012Maria Costa
 
Introdução a testes unitários com jUnit
Introdução a testes unitários com jUnitIntrodução a testes unitários com jUnit
Introdução a testes unitários com jUnitLeonardo Soares
 
Getting started with YUI3 and AlloyUI
Getting started with YUI3 and AlloyUIGetting started with YUI3 and AlloyUI
Getting started with YUI3 and AlloyUIZeno Rocha
 
A importância dos padrões web
A importância dos padrões webA importância dos padrões web
A importância dos padrões webDivulgrs
 
Construindo Projetos Robustos em HTML5
Construindo Projetos Robustos em HTML5Construindo Projetos Robustos em HTML5
Construindo Projetos Robustos em HTML5Zeno Rocha
 
Web APIs you (probably) didn't know existed
Web APIs you (probably) didn't know existedWeb APIs you (probably) didn't know existed
Web APIs you (probably) didn't know existedZeno Rocha
 
E-book sobre HTML 5 (Devmedia)
E-book sobre HTML 5 (Devmedia)E-book sobre HTML 5 (Devmedia)
E-book sobre HTML 5 (Devmedia)Devmedia
 
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEBHTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEBPeslPinguim
 
Desenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScriptDesenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScriptFábio Flatschart
 

Destaque (13)

HTML 5 A evolução do HTML 4 para o HTML 5
HTML 5 A evolução do HTML 4 para o HTML 5HTML 5 A evolução do HTML 4 para o HTML 5
HTML 5 A evolução do HTML 4 para o HTML 5
 
Desbravando o HTML5 Boilerplate
Desbravando o HTML5 BoilerplateDesbravando o HTML5 Boilerplate
Desbravando o HTML5 Boilerplate
 
Snc 2º ano - 2012
Snc   2º ano - 2012Snc   2º ano - 2012
Snc 2º ano - 2012
 
Introducao ao html
Introducao ao htmlIntroducao ao html
Introducao ao html
 
Introdução a testes unitários com jUnit
Introdução a testes unitários com jUnitIntrodução a testes unitários com jUnit
Introdução a testes unitários com jUnit
 
Getting started with YUI3 and AlloyUI
Getting started with YUI3 and AlloyUIGetting started with YUI3 and AlloyUI
Getting started with YUI3 and AlloyUI
 
A importância dos padrões web
A importância dos padrões webA importância dos padrões web
A importância dos padrões web
 
HTML 5
HTML 5HTML 5
HTML 5
 
Construindo Projetos Robustos em HTML5
Construindo Projetos Robustos em HTML5Construindo Projetos Robustos em HTML5
Construindo Projetos Robustos em HTML5
 
Web APIs you (probably) didn't know existed
Web APIs you (probably) didn't know existedWeb APIs you (probably) didn't know existed
Web APIs you (probably) didn't know existed
 
E-book sobre HTML 5 (Devmedia)
E-book sobre HTML 5 (Devmedia)E-book sobre HTML 5 (Devmedia)
E-book sobre HTML 5 (Devmedia)
 
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEBHTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
 
Desenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScriptDesenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScript
 

Semelhante a Introdução ao HTML4 e HTML5

Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e cssmario_venancio
 
Tecnologias Web com foco na criação de Landing Pages
Tecnologias Web com foco na criação de Landing PagesTecnologias Web com foco na criação de Landing Pages
Tecnologias Web com foco na criação de Landing PagesRangel Javier
 
03 como funciona html e css
03   como funciona html e css03   como funciona html e css
03 como funciona html e cssJeomanAlmeida
 
Iniciando em html5 seleção gustavo
Iniciando em html5   seleção gustavoIniciando em html5   seleção gustavo
Iniciando em html5 seleção gustavoGustavo Passos
 
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Uni Buscapé Company
 
HTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfHTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfCesar Braz
 
Internet I - Aula 04 - Coisando o HTML com o CSS
Internet I - Aula 04 - Coisando o HTML com o CSSInternet I - Aula 04 - Coisando o HTML com o CSS
Internet I - Aula 04 - Coisando o HTML com o CSSManoel Afonso
 
#DeveloperDay - Front-end API html5
#DeveloperDay - Front-end API html5#DeveloperDay - Front-end API html5
#DeveloperDay - Front-end API html5Leandro Santos
 
Apresentação - HTML5 e CSS3 Fabrica do Design
Apresentação - HTML5 e CSS3 Fabrica do DesignApresentação - HTML5 e CSS3 Fabrica do Design
Apresentação - HTML5 e CSS3 Fabrica do DesignIuri Andreazza
 

Semelhante a Introdução ao HTML4 e HTML5 (20)

Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e css
 
Apresentação para aula de HTML básico
Apresentação para aula de HTML básicoApresentação para aula de HTML básico
Apresentação para aula de HTML básico
 
Curso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JSCurso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JS
 
Tecnologias Web com foco na criação de Landing Pages
Tecnologias Web com foco na criação de Landing PagesTecnologias Web com foco na criação de Landing Pages
Tecnologias Web com foco na criação de Landing Pages
 
Minicurso HTML
Minicurso HTMLMinicurso HTML
Minicurso HTML
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
 
Css
Css   Css
Css
 
Mini curso html5 slides
Mini curso html5   slidesMini curso html5   slides
Mini curso html5 slides
 
03 como funciona html e css
03   como funciona html e css03   como funciona html e css
03 como funciona html e css
 
Iniciando em html5 seleção gustavo
Iniciando em html5   seleção gustavoIniciando em html5   seleção gustavo
Iniciando em html5 seleção gustavo
 
Apoio1020 apostila html
Apoio1020 apostila htmlApoio1020 apostila html
Apoio1020 apostila html
 
Css basico
Css basicoCss basico
Css basico
 
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
 
HTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfHTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdf
 
Html5 em 15 minutos
Html5 em 15 minutosHtml5 em 15 minutos
Html5 em 15 minutos
 
Html manual
Html manualHtml manual
Html manual
 
Internet I - Aula 04 - Coisando o HTML com o CSS
Internet I - Aula 04 - Coisando o HTML com o CSSInternet I - Aula 04 - Coisando o HTML com o CSS
Internet I - Aula 04 - Coisando o HTML com o CSS
 
#DeveloperDay - Front-end API html5
#DeveloperDay - Front-end API html5#DeveloperDay - Front-end API html5
#DeveloperDay - Front-end API html5
 
CSS Mastigado
CSS MastigadoCSS Mastigado
CSS Mastigado
 
Apresentação - HTML5 e CSS3 Fabrica do Design
Apresentação - HTML5 e CSS3 Fabrica do DesignApresentação - HTML5 e CSS3 Fabrica do Design
Apresentação - HTML5 e CSS3 Fabrica do Design
 

Mais de Leonardo Soares

Introdução a linguagem de programação Lua
Introdução a linguagem de programação LuaIntrodução a linguagem de programação Lua
Introdução a linguagem de programação LuaLeonardo Soares
 
Grupo de processos de planejamento - Parte 02
Grupo de processos de planejamento - Parte 02Grupo de processos de planejamento - Parte 02
Grupo de processos de planejamento - Parte 02Leonardo Soares
 
Introdução ao desenvolvimento de aplicativos com PhoneGap e Sencha Touch
Introdução ao desenvolvimento de aplicativos com PhoneGap e Sencha TouchIntrodução ao desenvolvimento de aplicativos com PhoneGap e Sencha Touch
Introdução ao desenvolvimento de aplicativos com PhoneGap e Sencha TouchLeonardo Soares
 
Técnicas de modelagem de testes
Técnicas de modelagem de testesTécnicas de modelagem de testes
Técnicas de modelagem de testesLeonardo Soares
 
Grupo de processos de planejamento - Parte 01
Grupo de processos de planejamento - Parte 01Grupo de processos de planejamento - Parte 01
Grupo de processos de planejamento - Parte 01Leonardo Soares
 
Introdução a testes unitários
Introdução a testes unitáriosIntrodução a testes unitários
Introdução a testes unitáriosLeonardo Soares
 
Grupos de processos de planejamento
Grupos de processos de planejamentoGrupos de processos de planejamento
Grupos de processos de planejamentoLeonardo Soares
 
Gestão de projetos com PMBoK
Gestão de projetos com PMBoKGestão de projetos com PMBoK
Gestão de projetos com PMBoKLeonardo Soares
 
Grupos de processos de iniciação - PMBoK
Grupos de processos de iniciação - PMBoKGrupos de processos de iniciação - PMBoK
Grupos de processos de iniciação - PMBoKLeonardo Soares
 
Introdução a testes de software
Introdução a testes de softwareIntrodução a testes de software
Introdução a testes de softwareLeonardo Soares
 
Introdução a gestão de projetos com PMBoK
Introdução a gestão de projetos com PMBoKIntrodução a gestão de projetos com PMBoK
Introdução a gestão de projetos com PMBoKLeonardo Soares
 
Orientação a objetos com PHP
Orientação a objetos com PHPOrientação a objetos com PHP
Orientação a objetos com PHPLeonardo Soares
 
Banco de dadados MySQL com PHP
Banco de dadados MySQL com PHPBanco de dadados MySQL com PHP
Banco de dadados MySQL com PHPLeonardo Soares
 
Tratamento de exceções com PHP
Tratamento de exceções com PHPTratamento de exceções com PHP
Tratamento de exceções com PHPLeonardo Soares
 
Criação de tabelas com HTML
Criação de tabelas com HTMLCriação de tabelas com HTML
Criação de tabelas com HTMLLeonardo Soares
 
Criação de formulários e tabelas com HTML
Criação de formulários e tabelas com HTMLCriação de formulários e tabelas com HTML
Criação de formulários e tabelas com HTMLLeonardo Soares
 
Uso de imagens e links com HTML
Uso de imagens e links com HTMLUso de imagens e links com HTML
Uso de imagens e links com HTMLLeonardo Soares
 
Manipulação de formulários com PHP. Uso de Cookies e Session com PHP.
Manipulação de formulários com PHP. Uso de Cookies e Session com PHP.Manipulação de formulários com PHP. Uso de Cookies e Session com PHP.
Manipulação de formulários com PHP. Uso de Cookies e Session com PHP.Leonardo Soares
 
Introdução ao desenvolvimento com PHP
Introdução ao desenvolvimento com PHPIntrodução ao desenvolvimento com PHP
Introdução ao desenvolvimento com PHPLeonardo Soares
 

Mais de Leonardo Soares (20)

Introdução a linguagem de programação Lua
Introdução a linguagem de programação LuaIntrodução a linguagem de programação Lua
Introdução a linguagem de programação Lua
 
Depuração de software
Depuração de softwareDepuração de software
Depuração de software
 
Grupo de processos de planejamento - Parte 02
Grupo de processos de planejamento - Parte 02Grupo de processos de planejamento - Parte 02
Grupo de processos de planejamento - Parte 02
 
Introdução ao desenvolvimento de aplicativos com PhoneGap e Sencha Touch
Introdução ao desenvolvimento de aplicativos com PhoneGap e Sencha TouchIntrodução ao desenvolvimento de aplicativos com PhoneGap e Sencha Touch
Introdução ao desenvolvimento de aplicativos com PhoneGap e Sencha Touch
 
Técnicas de modelagem de testes
Técnicas de modelagem de testesTécnicas de modelagem de testes
Técnicas de modelagem de testes
 
Grupo de processos de planejamento - Parte 01
Grupo de processos de planejamento - Parte 01Grupo de processos de planejamento - Parte 01
Grupo de processos de planejamento - Parte 01
 
Introdução a testes unitários
Introdução a testes unitáriosIntrodução a testes unitários
Introdução a testes unitários
 
Grupos de processos de planejamento
Grupos de processos de planejamentoGrupos de processos de planejamento
Grupos de processos de planejamento
 
Gestão de projetos com PMBoK
Gestão de projetos com PMBoKGestão de projetos com PMBoK
Gestão de projetos com PMBoK
 
Grupos de processos de iniciação - PMBoK
Grupos de processos de iniciação - PMBoKGrupos de processos de iniciação - PMBoK
Grupos de processos de iniciação - PMBoK
 
Introdução a testes de software
Introdução a testes de softwareIntrodução a testes de software
Introdução a testes de software
 
Introdução a gestão de projetos com PMBoK
Introdução a gestão de projetos com PMBoKIntrodução a gestão de projetos com PMBoK
Introdução a gestão de projetos com PMBoK
 
Orientação a objetos com PHP
Orientação a objetos com PHPOrientação a objetos com PHP
Orientação a objetos com PHP
 
Banco de dadados MySQL com PHP
Banco de dadados MySQL com PHPBanco de dadados MySQL com PHP
Banco de dadados MySQL com PHP
 
Tratamento de exceções com PHP
Tratamento de exceções com PHPTratamento de exceções com PHP
Tratamento de exceções com PHP
 
Criação de tabelas com HTML
Criação de tabelas com HTMLCriação de tabelas com HTML
Criação de tabelas com HTML
 
Criação de formulários e tabelas com HTML
Criação de formulários e tabelas com HTMLCriação de formulários e tabelas com HTML
Criação de formulários e tabelas com HTML
 
Uso de imagens e links com HTML
Uso de imagens e links com HTMLUso de imagens e links com HTML
Uso de imagens e links com HTML
 
Manipulação de formulários com PHP. Uso de Cookies e Session com PHP.
Manipulação de formulários com PHP. Uso de Cookies e Session com PHP.Manipulação de formulários com PHP. Uso de Cookies e Session com PHP.
Manipulação de formulários com PHP. Uso de Cookies e Session com PHP.
 
Introdução ao desenvolvimento com PHP
Introdução ao desenvolvimento com PHPIntrodução ao desenvolvimento com PHP
Introdução ao desenvolvimento com PHP
 

Último

Acróstico - Maria da Penha Lei nº 11.340, de 7 de agosto de 2006
Acróstico - Maria da Penha    Lei nº 11.340, de 7 de agosto de 2006Acróstico - Maria da Penha    Lei nº 11.340, de 7 de agosto de 2006
Acróstico - Maria da Penha Lei nº 11.340, de 7 de agosto de 2006Mary Alvarenga
 
LUSSOCARS TRABAJO PARA LA CLASE QUE TENGO
LUSSOCARS TRABAJO PARA LA CLASE QUE TENGOLUSSOCARS TRABAJO PARA LA CLASE QUE TENGO
LUSSOCARS TRABAJO PARA LA CLASE QUE TENGOxogilo3990
 
PLANO DE CURSO 2O24- ENSINO RELIGIOSO 8º ANO.pdf
PLANO DE CURSO 2O24- ENSINO RELIGIOSO 8º ANO.pdfPLANO DE CURSO 2O24- ENSINO RELIGIOSO 8º ANO.pdf
PLANO DE CURSO 2O24- ENSINO RELIGIOSO 8º ANO.pdfkeiciany
 
3° ENSINO MÉDIO PLANO ANUAL ARTES 2024.pdf
3° ENSINO MÉDIO PLANO ANUAL ARTES 2024.pdf3° ENSINO MÉDIO PLANO ANUAL ARTES 2024.pdf
3° ENSINO MÉDIO PLANO ANUAL ARTES 2024.pdfkelvindasilvadiasw
 
COSMOLOGIA DA ENERGIA ESTRELAS - VOLUME 6. EDIÇÃO 2^^.pdf
COSMOLOGIA DA ENERGIA ESTRELAS - VOLUME 6. EDIÇÃO 2^^.pdfCOSMOLOGIA DA ENERGIA ESTRELAS - VOLUME 6. EDIÇÃO 2^^.pdf
COSMOLOGIA DA ENERGIA ESTRELAS - VOLUME 6. EDIÇÃO 2^^.pdfalexandrerodriguespk
 
1. Solicitar ao entrevistado uma breve apresentação da organização, mencionan...
1. Solicitar ao entrevistado uma breve apresentação da organização, mencionan...1. Solicitar ao entrevistado uma breve apresentação da organização, mencionan...
1. Solicitar ao entrevistado uma breve apresentação da organização, mencionan...azulassessoriaacadem3
 
ATIVIDADE PROPOSTA: Considerando o "estudo de caso" apresentado na disciplina...
ATIVIDADE PROPOSTA: Considerando o "estudo de caso" apresentado na disciplina...ATIVIDADE PROPOSTA: Considerando o "estudo de caso" apresentado na disciplina...
ATIVIDADE PROPOSTA: Considerando o "estudo de caso" apresentado na disciplina...azulassessoriaacadem3
 
1. Considerando todas as informações que você obteve, descritas acima, calcul...
1. Considerando todas as informações que você obteve, descritas acima, calcul...1. Considerando todas as informações que você obteve, descritas acima, calcul...
1. Considerando todas as informações que você obteve, descritas acima, calcul...azulassessoriaacadem3
 
Emagreça em Casa, Treinos Simples e Eficazes Mesmo Não Tendo Equipamentos. Cu...
Emagreça em Casa, Treinos Simples e Eficazes Mesmo Não Tendo Equipamentos. Cu...Emagreça em Casa, Treinos Simples e Eficazes Mesmo Não Tendo Equipamentos. Cu...
Emagreça em Casa, Treinos Simples e Eficazes Mesmo Não Tendo Equipamentos. Cu...manoelaarmani
 
1. Ciente das novas dinâmicas do mundo do trabalho, você deve pesquisar e des...
1. Ciente das novas dinâmicas do mundo do trabalho, você deve pesquisar e des...1. Ciente das novas dinâmicas do mundo do trabalho, você deve pesquisar e des...
1. Ciente das novas dinâmicas do mundo do trabalho, você deve pesquisar e des...azulassessoriaacadem3
 
Desafie-se Como Estabelecer Metas de Fitness Realistas e Alcançáveis em Casa ...
Desafie-se Como Estabelecer Metas de Fitness Realistas e Alcançáveis em Casa ...Desafie-se Como Estabelecer Metas de Fitness Realistas e Alcançáveis em Casa ...
Desafie-se Como Estabelecer Metas de Fitness Realistas e Alcançáveis em Casa ...manoelaarmani
 
Domínio da Linguagem Oral Classificação Sílaba Inicial
Domínio da Linguagem  Oral Classificação Sílaba InicialDomínio da Linguagem  Oral Classificação Sílaba Inicial
Domínio da Linguagem Oral Classificação Sílaba InicialTeresaCosta92
 
MAPA - BEDU - ATIVIDADE FÍSICA E QUALIDADE DE VIDA - 51/2024
MAPA - BEDU - ATIVIDADE FÍSICA E QUALIDADE DE VIDA - 51/2024MAPA - BEDU - ATIVIDADE FÍSICA E QUALIDADE DE VIDA - 51/2024
MAPA - BEDU - ATIVIDADE FÍSICA E QUALIDADE DE VIDA - 51/2024assedlsam
 
Atividades sobre as Fontes Históricas e Patrimônio.
Atividades sobre as Fontes Históricas e Patrimônio.Atividades sobre as Fontes Históricas e Patrimônio.
Atividades sobre as Fontes Históricas e Patrimônio.Jean Carlos Nunes Paixão
 
Quando iniciamos os estudos sobre a história da Educação de Jovens e Adultos,...
Quando iniciamos os estudos sobre a história da Educação de Jovens e Adultos,...Quando iniciamos os estudos sobre a história da Educação de Jovens e Adultos,...
Quando iniciamos os estudos sobre a história da Educação de Jovens e Adultos,...AaAssessoriadll
 
Cosmologia Modelo Matemático do Universo 5.pdf
Cosmologia Modelo Matemático do Universo 5.pdfCosmologia Modelo Matemático do Universo 5.pdf
Cosmologia Modelo Matemático do Universo 5.pdfalexandrerodriguespk
 
PLANO DE CURSO 2O24- ENSINO RELIGIOSO 7º ANO.pdf
PLANO DE CURSO 2O24- ENSINO RELIGIOSO 7º ANO.pdfPLANO DE CURSO 2O24- ENSINO RELIGIOSO 7º ANO.pdf
PLANO DE CURSO 2O24- ENSINO RELIGIOSO 7º ANO.pdfkeiciany
 
4. Agora para analisar os resultados obtidos, você irá utilizar a classificaç...
4. Agora para analisar os resultados obtidos, você irá utilizar a classificaç...4. Agora para analisar os resultados obtidos, você irá utilizar a classificaç...
4. Agora para analisar os resultados obtidos, você irá utilizar a classificaç...azulassessoriaacadem3
 
ATIVIDADE PROPOSTA: Considerando o "estudo de caso" apresentado na disciplina...
ATIVIDADE PROPOSTA: Considerando o "estudo de caso" apresentado na disciplina...ATIVIDADE PROPOSTA: Considerando o "estudo de caso" apresentado na disciplina...
ATIVIDADE PROPOSTA: Considerando o "estudo de caso" apresentado na disciplina...azulassessoriaacadem3
 
2. Como o entrevistado descreve a gestão e execução dos principais processos ...
2. Como o entrevistado descreve a gestão e execução dos principais processos ...2. Como o entrevistado descreve a gestão e execução dos principais processos ...
2. Como o entrevistado descreve a gestão e execução dos principais processos ...azulassessoriaacadem3
 

Último (20)

Acróstico - Maria da Penha Lei nº 11.340, de 7 de agosto de 2006
Acróstico - Maria da Penha    Lei nº 11.340, de 7 de agosto de 2006Acróstico - Maria da Penha    Lei nº 11.340, de 7 de agosto de 2006
Acróstico - Maria da Penha Lei nº 11.340, de 7 de agosto de 2006
 
LUSSOCARS TRABAJO PARA LA CLASE QUE TENGO
LUSSOCARS TRABAJO PARA LA CLASE QUE TENGOLUSSOCARS TRABAJO PARA LA CLASE QUE TENGO
LUSSOCARS TRABAJO PARA LA CLASE QUE TENGO
 
PLANO DE CURSO 2O24- ENSINO RELIGIOSO 8º ANO.pdf
PLANO DE CURSO 2O24- ENSINO RELIGIOSO 8º ANO.pdfPLANO DE CURSO 2O24- ENSINO RELIGIOSO 8º ANO.pdf
PLANO DE CURSO 2O24- ENSINO RELIGIOSO 8º ANO.pdf
 
3° ENSINO MÉDIO PLANO ANUAL ARTES 2024.pdf
3° ENSINO MÉDIO PLANO ANUAL ARTES 2024.pdf3° ENSINO MÉDIO PLANO ANUAL ARTES 2024.pdf
3° ENSINO MÉDIO PLANO ANUAL ARTES 2024.pdf
 
COSMOLOGIA DA ENERGIA ESTRELAS - VOLUME 6. EDIÇÃO 2^^.pdf
COSMOLOGIA DA ENERGIA ESTRELAS - VOLUME 6. EDIÇÃO 2^^.pdfCOSMOLOGIA DA ENERGIA ESTRELAS - VOLUME 6. EDIÇÃO 2^^.pdf
COSMOLOGIA DA ENERGIA ESTRELAS - VOLUME 6. EDIÇÃO 2^^.pdf
 
1. Solicitar ao entrevistado uma breve apresentação da organização, mencionan...
1. Solicitar ao entrevistado uma breve apresentação da organização, mencionan...1. Solicitar ao entrevistado uma breve apresentação da organização, mencionan...
1. Solicitar ao entrevistado uma breve apresentação da organização, mencionan...
 
ATIVIDADE PROPOSTA: Considerando o "estudo de caso" apresentado na disciplina...
ATIVIDADE PROPOSTA: Considerando o "estudo de caso" apresentado na disciplina...ATIVIDADE PROPOSTA: Considerando o "estudo de caso" apresentado na disciplina...
ATIVIDADE PROPOSTA: Considerando o "estudo de caso" apresentado na disciplina...
 
1. Considerando todas as informações que você obteve, descritas acima, calcul...
1. Considerando todas as informações que você obteve, descritas acima, calcul...1. Considerando todas as informações que você obteve, descritas acima, calcul...
1. Considerando todas as informações que você obteve, descritas acima, calcul...
 
Emagreça em Casa, Treinos Simples e Eficazes Mesmo Não Tendo Equipamentos. Cu...
Emagreça em Casa, Treinos Simples e Eficazes Mesmo Não Tendo Equipamentos. Cu...Emagreça em Casa, Treinos Simples e Eficazes Mesmo Não Tendo Equipamentos. Cu...
Emagreça em Casa, Treinos Simples e Eficazes Mesmo Não Tendo Equipamentos. Cu...
 
1. Ciente das novas dinâmicas do mundo do trabalho, você deve pesquisar e des...
1. Ciente das novas dinâmicas do mundo do trabalho, você deve pesquisar e des...1. Ciente das novas dinâmicas do mundo do trabalho, você deve pesquisar e des...
1. Ciente das novas dinâmicas do mundo do trabalho, você deve pesquisar e des...
 
Desafie-se Como Estabelecer Metas de Fitness Realistas e Alcançáveis em Casa ...
Desafie-se Como Estabelecer Metas de Fitness Realistas e Alcançáveis em Casa ...Desafie-se Como Estabelecer Metas de Fitness Realistas e Alcançáveis em Casa ...
Desafie-se Como Estabelecer Metas de Fitness Realistas e Alcançáveis em Casa ...
 
Domínio da Linguagem Oral Classificação Sílaba Inicial
Domínio da Linguagem  Oral Classificação Sílaba InicialDomínio da Linguagem  Oral Classificação Sílaba Inicial
Domínio da Linguagem Oral Classificação Sílaba Inicial
 
MAPA - BEDU - ATIVIDADE FÍSICA E QUALIDADE DE VIDA - 51/2024
MAPA - BEDU - ATIVIDADE FÍSICA E QUALIDADE DE VIDA - 51/2024MAPA - BEDU - ATIVIDADE FÍSICA E QUALIDADE DE VIDA - 51/2024
MAPA - BEDU - ATIVIDADE FÍSICA E QUALIDADE DE VIDA - 51/2024
 
Atividades sobre as Fontes Históricas e Patrimônio.
Atividades sobre as Fontes Históricas e Patrimônio.Atividades sobre as Fontes Históricas e Patrimônio.
Atividades sobre as Fontes Históricas e Patrimônio.
 
Quando iniciamos os estudos sobre a história da Educação de Jovens e Adultos,...
Quando iniciamos os estudos sobre a história da Educação de Jovens e Adultos,...Quando iniciamos os estudos sobre a história da Educação de Jovens e Adultos,...
Quando iniciamos os estudos sobre a história da Educação de Jovens e Adultos,...
 
Cosmologia Modelo Matemático do Universo 5.pdf
Cosmologia Modelo Matemático do Universo 5.pdfCosmologia Modelo Matemático do Universo 5.pdf
Cosmologia Modelo Matemático do Universo 5.pdf
 
PLANO DE CURSO 2O24- ENSINO RELIGIOSO 7º ANO.pdf
PLANO DE CURSO 2O24- ENSINO RELIGIOSO 7º ANO.pdfPLANO DE CURSO 2O24- ENSINO RELIGIOSO 7º ANO.pdf
PLANO DE CURSO 2O24- ENSINO RELIGIOSO 7º ANO.pdf
 
4. Agora para analisar os resultados obtidos, você irá utilizar a classificaç...
4. Agora para analisar os resultados obtidos, você irá utilizar a classificaç...4. Agora para analisar os resultados obtidos, você irá utilizar a classificaç...
4. Agora para analisar os resultados obtidos, você irá utilizar a classificaç...
 
ATIVIDADE PROPOSTA: Considerando o "estudo de caso" apresentado na disciplina...
ATIVIDADE PROPOSTA: Considerando o "estudo de caso" apresentado na disciplina...ATIVIDADE PROPOSTA: Considerando o "estudo de caso" apresentado na disciplina...
ATIVIDADE PROPOSTA: Considerando o "estudo de caso" apresentado na disciplina...
 
2. Como o entrevistado descreve a gestão e execução dos principais processos ...
2. Como o entrevistado descreve a gestão e execução dos principais processos ...2. Como o entrevistado descreve a gestão e execução dos principais processos ...
2. Como o entrevistado descreve a gestão e execução dos principais processos ...
 

Introdução ao HTML4 e HTML5

  • 1. S Introdução ao HTML 4 e 5 Prof. Leonardo Soares
  • 2. HTML S Não é uma linguagem de programação S É uma linguagem de marcação S Na programação para web é usada para apresentar elementos visuais S Utiliza uma síntaxe similar ao XML S Utiliza tags <> S É guiado por uma específicação do W3C
  • 3. Olá mundo! <html> <head> <title>Meu primeiro aplicativo</title> </head> <body> <h1>Olá mundo!</h1> </body> </html>
  • 4. HTML e linguagens de programação S HTML não possui recursos de programacão, isto impossibilita: S O uso de repetições S Condicionais S Usar variáveis de programação, etc… S Apenas com HTML iremos produzir páginas estáticas S Ao associar HTML com linguagens de programação produziremos páginas dinâmicas S É uma boa prática evitar código de programação junto ao HTML
  • 5. Tags HTML S Tudo em HTML será representado através de tags <> S Sua sintaxe possui duas formas: S <tag /> S <tag></tag> S Há também o uso de propriedades nas tags para alterar seu comportamento S <tag height=“20px”> S Precisamos conhecer as tags HTML para saber o que pode ser feito com ele…
  • 6. Estrutura de uma página HTML S <html> S <head> S <body>
  • 7. Tag <head> • <title> - Usada para determinar o título da página e será exibido no topo da aplicação • <style> - Determina parâmetros de estilo CSS a serem aplicados na página • <script> - Scripts em javascript a serem utilizados na página • <meta> - Informações usadas para descrever a página
  • 8. Tags HTML para textos • Podemos formatar os textos que serão exibidos ao usuário • Pode-se: • Aplicar negrito • Itálico • Subescrito
  • 9. Cabeçalho S São os textos que, em geral, aparecem no início da página S Há diferentes tags para representar diferentes tamanhos: S <h1> S <h2> S … S <h5> S Exemplo S <h1>Olá mundo!</h1>
  • 10. Tags HTML para estilos em textos • <b> texto em negrito </b> • <i> texto em itálico </i> • Texto <sup> acima </sup> • Texto <sub> abaixo </sub> • Texto <small> menor </small>
  • 11. Parágrafo e quebra de linha • Utilização de parágrafo em HTML: • <p> Texto dentro do parágrafo </p> • Quebra de linha em textos: • Texto em uma linha <br /> Textro em outra linha
  • 13. links • Âncoras para acessar outras partes de um site • Tag <a> • Exemplo: <a href=“google.com”>Google</a>
  • 14. Atributos da tag a • Href • Descrição: usado para especificar a url que será carregada ao clicar no link • Target • Descrição: usado para especificar onde o link será aberto • Valores: _blank, _self, _parent, _top
  • 15. Exemplo de uso da tag a • Exemplo: <a href=„index.html‟ target=„_parent‟>Texto do link</a>
  • 16. Uso de imagens em HTML • Exibe uma imagem na página HTML • Tag <img>
  • 17. Atributos da tag img • src • Descrição: especifica o caminho (pasta ou diretório) onde encontra-se a imagem • width • Descrição: especifica a largura da imagem • height • Descrição: especifica a altura da imagem • alt • Descrição: especifica o texto que irá aparecer quando o mouse passar pela imagem
  • 18. Exemplo do uso da tag img S<img src=„audi.jpg‟ alt=„Versão…‟ Sheight=„200px‟ width=„100px‟>
  • 19. Links e imagens • É possível associar imagens a links
  • 20. Exercício 1. Incluir uma imagem em uma página HTML 2. Associar um link a esta imagem
  • 21. Lista de itens não ordenada • Este é um exemplo de lista não ordenada • Tag <ul> e vários <li>
  • 22. Lista de itens não ordenada • Exemplo: S<ul> S <li>Item 1.</li> S <li>Item 2.</li> S <li>Item 3.</li> S</ul>
  • 23. Lista de itens ordenada • Este é um exemplo de lista ordenada • Tag <ol> e vários <li>
  • 24. Lista de itens ordenada • Exemplo: S<ol> S <li>Item 1.</li> S <li>Item 2.</li> S <li>Item 3.</li> S</ol>
  • 25. Exercício • Criem lista ordenadas e não ordenadas em vários itens • Façam o uso de ambas as listas
  • 26. HTML 5 S HTML 4 não dá mais… obsoleto! S Flash também não! S Uma nova forma de pensar o desenvolvimento para a web S Não é apenas HTML, mas também uma API DOM
  • 27. Principais recursos do HTML 5 S Suporte a vídeo e audio S Gráficos 2d/3d S Armazenamento local ou com SQL S Geolocalização S Validação de formulários
  • 28. Progress S Certas operações levam algum tempo para serem realizadas S O usuário precisa ser informado sobre seu progresso S <progress></progress>
  • 29. Data S Em algumas situações desejamos armazenar informações em nossas tags S Por exemplo: S <div id=“carro” marca=“toyota”> S O problema é que isto é inválido do ponto de vista da validação HTML S Uma alternativa está no uso de atributos data- S <div id =“carro” data-marca=“toyota”>
  • 30. Media tags S Videos S <video src=“” controls /> S Audio S <audio src=“” />
  • 31. Geolocalização S Com o HTML 5 também trás a possibilidade de obter a localização do usuário S Este recurso é útil para aplicações ou sites que mudem ou se adaptem quando houver essa informação S A forma como a localização é obtida varia de dispositivo para dispositivo
  • 32. Gráficos S Um dos princípios do HTML 5 é evitar o uso de plugins externos, como o Flash S É introduzido uma forma de criar gráficos denominado canvas S É possível exibir elementos 2D, 3G, imagens em SVG S Será utilizado uma linguagem de scripting (em geral o JavaScript)
  • 33. Novos inputs S Até o HTML 4 haviam basicamente 3 formas de inserir dados em um formulário S <select> <textarea> <input> S Tinhamos de fazer várias modificações para lidar com cores, datas, e-mail, números S Agora foram adicionadas novas formas de entrada que facilitam este processo
  • 35. Validação de formulário S Validar dados é um processo necessário para garantir que informações corretas estão sendo inseridas no sistema S Normalmente fazemos de duas forma: S Validação no cliente S Validação no servidor S Observando que é um processo bastante comum o HTML 5 oferece algumas validações prontas
  • 36. Draggable S Arrastar e soltar é uma operação bastante comum S Antes utilizávamos frameworks javascript, como o jQuery S Agora temos uma forma padronizada de fazer isto
  • 38. Item editável S Partes de nosso site podem ser editáveis, e permitir isto era um problema… S Javascript S CSS S HTML S Provê uma edição WYSIWYG

Notas do Editor

  1. http://www.truquesedicas.com/tutoriais/html/00007a.htm
  2. Similarao Word
  3. Html 4 se tornou umpadrãoem 1999
  4. http://www.w3schools.com/tags/tag_progress.asp
  5. http://www.w3schools.com/tags/tag_article.asp
  6. http://www.w3schools.com/html/html5_geolocation.asp
  7. http://imasters.com.br/artigo/16455/desenvolvimento/html-5-na-pratica-canvas-parte-01/
  8. http://www.w3schools.com/html/html5_form_input_types.asp
  9. http://www.pageresource.com/html5/input-validation-tutorial/
  10. http://www.w3schools.com/html/html5_draganddrop.asp
  11. http://html5doctor.com/the-contenteditable-attribute/#live-examples