Embed Size (px)
Citation preview
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
DESENVOLVIMENTO WEB EM HTML 5 CSS JAVASCRIPT E PHP
Prof Dr Daniel Caetano
2020 - 2
INTRODUCcedilAtildeO Agrave DISCIPLINA E AO DESENVOLVIMENTO WEB
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Objetivos
bull Conhecer o professor
bull Conhecer a disciplina
bull Compreender o sistema de estudo
bull Conhecer as principais tecnologias da web
bull Discutir os elementos baacutesicos do HTML 5
bull Desenvolver paacutegina web simples
bull Desafio Aula 01
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Apresentaccedilatildeo
Quem eacute o professor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Chamada Presenccedila e Contato
Professor Informaccedilotildees de Contato
Daniel Caetano profcaetanoengbr
bull Seraacute controlada a presenccedila
ndash Chamada ocorreraacute sempre nos 15 minutos finais
bull Em tempo real na aula
ndash ldquoEstou frequentando mas a matriacuteculardquo
bull Contato
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PLANO DE ENSINO E PLANO DE AULA
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Plano de Ensino
Disponiacutevel no SIA
1 Entre na Sala Virtual
2 Clique no NOME DA DISCIPLINA
3 Clique em PLANO DE ENSINO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Plano de Aula
bull 2008 ndash 1 Apresentaccedilatildeo
bull 2708 ndash 2 Listas e Tabelas
bull 0309 ndash 3 Formulaacuterios
bull 1009 ndash 4 CSS Baacutesico
bull 1709 ndash 5 CSS Responsivo
bull 2409 ndash 6 JavaScript Baacutesico
bull 0110 ndash 7a JS Decisatildeo
bull 0810 ndash P1
bull 1510 ndash [ Dia do Professor ]
bull 2210 ndash 7b JS Repeticcedilatildeo
bull 2910 ndash 8 JS Matrizes
bull 0511 ndash 9 AJAX e JSON
bull 1211 ndash 10 PHP Baacutesico
bull 1911 ndash 11 PHP com BD
bull 2611 ndash P2
bull 0312 ndash Vista da P2
bull 1012 ndash P3
bull 1712 ndash Encerramento
Aula digital data eacute sugestatildeo pode ser realizada antes
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Como Estudar
bull Ateacute o fim do ensino meacutedio ndash Professor apresenta os conteuacutedos completos
ndash Teoria-praacutetica satildeo exercitadas todas as situaccedilotildees em sala
ndash Alunos estudam apoacutes a aula repetindo exerciacutecios
bull E na faculdade ndash O procedimento do ensino meacutedio natildeo eacute eficiente
ndash Alunos estudam antes da aula os conteuacutedos
ndash Conjunto na aula discutem o conteuacutedo diante de uma situaccedilatildeo-problema
ndash Professor organiza os conceitos principais do conteuacutedo
ndash Teoria-praacutetica exercitadas situaccedilotildees relevantes em sala
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Disciplina Presencial + Digital
bull Como funciona ndash Aluno se prepara entre as aulas conhece a teoria
bull Viacutedeos textos desafios
ndash Na aula discussatildeo e complemento do conteuacutedo
ndash Na aula teoria-praacutetica com atividades participativas
bull Como eacute a preparaccedilatildeo semanal ndash Varia muito de acordo com o conteuacutedo Mas
ndash Toda semana seratildeo passadas atividades bull Conteuacutedo para absorver e analisar
bull Complementado por um desafio sobre o conteuacutedo
ndash Algumas aulas tecircm bastante conteuacutedo digital bull Esse conteuacutedo seraacute discutido em sala e cai em prova
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TRABALHOS DATAS E CRITEacuteRIO DE APROVACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Trabalho Valor CH Data
Desafios ateacute Aula 06 20 na AV1 2h Quarta (Web)
Desafios apoacutes Aula 06 20 na AV2 2h Quarta (Web)
Avaliaccedilatildeo P1 + Projeto Parte 1 80 na AV1 2h 0810 (Aula)
Avaliaccedilatildeo P2 + Projeto Parte 2 80 na AV2 2h 2611 (Aula)
Avaliaccedilatildeo P3 + Projeto Parte 3 100 na AV3 2h 1012 (Aula)
Trabalhos Datas e Aprovaccedilatildeo
Os desafios seratildeo sempre postados aqui httpspadletcomdjcaetanodesweb
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV1
AV1 = T1 + P1 + S1
00 a 80
00 a 100
00 a 20
bull T1 nota que varia de 00 a 20
bull P1 nota obtida na Avaliaccedilatildeo 1 + Projeto 1
bull S1 nota do Simulado AV1 (de 1708 a 2808)
00 a 20
Avaliaccedilatildeo httpssimuladoestaciobralunos
Informaccedilotildees httpsportalestaciobrsimuladoAV1
Se houver
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV1
bull Fiquei com AV1 lt 40
bull Pode ser que tenha Nova Chance (Nota AVR) ndash Agendar 1410 a 2210 Executar 1510 a 2410
AV1 =( T1 + P1 + S1 + AVR)2
00 a 80
00 a 100
00 a 20 00 a 20 00 a 100
Informaccedilotildees httpsportalestaciobrnovachance
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV2
AV2 = T2 + P2
00 a 80
00 a 100
00 a 20
bull T2 nota que varia de 00 a 20
bull P2 nota obtida na Avaliaccedilatildeo 2 + Projeto 2
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV3 bull P3 eacute a nota obtida na Avaliaccedilatildeo 3 + Projeto 3
bull AVA eacute a nota do Avaliando o Aprendizado
bull Se tiver passado e quiser fazer a avaliaccedilatildeo 3 para melhorar nota solicite ateacute uma semana antes
bull Mesmo natildeo precisando AV3 eacute cobrada a presenccedila
AV3 = P3 + AVA
00 a 100
00 a 100
00 a 20
Se houver
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Avaliando o Aprendizado
bull Quatro Simulados 5 questotildees cada ndash Cada questatildeo vale 01 na AV3 (se resposta for correta)
ndash Ateacute 20 pontos na AV3
ndash Moacutedulo 1 0409~
ndash Moacutedulo 2 2409~
ndash Moacutedulo 3 0810~
ndash Moacutedulo 4 2310~
ndash Terminar ateacute 0311
Avaliaccedilatildeo httpssimuladoestaciobralunos
Informaccedilotildees httpsportalestaciobravaliandoaprendizado
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Prepara AV1 e Prepara AV2
bull Aulas complementares de apoio ndash AV1 0310 ndash Aula ONLINE com hora predefinida
ndash AV2 2111 ndash Aula ONLINE com hora predefinida
bull Podem ser uacuteteis
ndash Introduccedilatildeo agrave Programaccedilatildeo
httppreparaestaciobrpresencial
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Criteacuterio de Aprovaccedilatildeo A = Maior nota entre AV1 AV2 AV3 B = Segunda maior nota entre AV1 AV2 AV3
Criteacuterios de Aprovaccedilatildeo (TODOS precisam ser atendidos)
1) A ge 40 2) B ge 40 3) A + B ge 120 (Meacutedia 60)
4) Frequecircncia ge 75 (No maacuteximo 4 faltas)
Inclui AV3 e vistas de prova Evite faltar e saia de feacuterias mais cedo
ATENCcedilAtildeO Se vocecirc tiver mais que uma nota abaixo de 40 ainda que o SIA aponte uma meacutedia maior que 60 vocecirc estaraacute REPROVADO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
BIBLIOGRAFIA E FONTES DE INFORMACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Baacutesica bull Livros Texto
ndash HTML 5 ndash Guia Praacutetico ndash TERUEL bull Disponiacutevel no Minha Biblioteca (ISBN 9788536519296)
ndash Desenvolvimento de Software II Introduccedilatildeo ao Desenv Web com HTML CSS JavaScript e PHP ndash MILETTO bull Disponiacutevel no Minha Biblioteca (ISBN 9788582601969)
ndash Refatorando HTML - Como Melhorar o Projeto de Aplicaccedilotildees Existentes ndash HAROLD bull Disponiacutevel no Minha Biblioteca (ISBN 9788577806706)
ndash JavaScript O Guia Definitivo ndash FLANAGAN bull Disponiacutevel no Minha Biblioteca (ISBN 9788565837484)
ndash PHP 5 - Conceitos Programaccedilatildeo e Integraccedilatildeo com Banco de Dados ndash SOARES bull Disponiacutevel no Minha Biblioteca (ISBN 9788536505633)
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Complementar
bull Material do Curso ndash Tecnologias Web (1ordf Ediccedilatildeo 2015)
bull Rodrigo Plotze (Disponiacutevel no SIA)
ndash Entre na disciplina e clique em ldquoMaterial Didaacuteticordquo
bull Livros Adicional ndash Ajax Rich Internet Applicationa e Desenvolvimento para
Web para Programadores bull Deitel amp Deitel Pearson 2009
ndash Disponiacutevel na Biblioteca Virtual
ndash Haacute outros no plano de ensino
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Adicional
bull Outros Livros Interessante na Biblioteca Virtual
ndash Aprenda a Criar Paacuteginas Web com HTML e XHTML
ndash HTML 5 Embarque Imediato
ndash Canvas HTML 5 Composiccedilatildeo Graacutefica e Interat na Web
ndash Desenvolvimento de Jogos em HTMl 5
bull Haacute muita coisa na internet
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Aula
bull Apresentaccedilotildees e outros itens de estudo
httpswwwcaetanoengbr
bull Selecione o anosemestre atual
bull Clique no nome da disciplina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Estudo
bull Conteuacutedo e atividades de preparaccedilatildeo
httpspadletcomdjcaetanodesweb
ATENCcedilAtildeO As postagens mais novas estaratildeo agrave esquerda
Aula NN Aprenda Mais
Poacutes Aula NN Material
Poacutes Aula NN Desafio
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia da Aula
Material Acesso ao Material
Apresentaccedilatildeo httpswwwcaetanoengbr (Desenvolvimento Web ndash Aula 1)
Livro Texto TERUEL paacuteginas 16 a 24
Aprenda Mais bull Referecircncia Elementos do HTML 5 httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PAacuteGINAS E APLICACcedilOtildeES COM TECNOLOGIA WEB
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Qual a diferenccedila entre eles
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees httpseditormethodac
HTML+CSS+JS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees docsgooglecom
HTML+CSS+JS+Java
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees
HTML+CSS+JS - DosBox
httpscodepenionodwspenVWOLPZ
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
RAacutePIDO HISTOacuteRICO
O QUE Eacute A INTERNET
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Origens
bull Redes locais x Inter-net
bull Diferenccedila importante
ndash Organizaccedilatildeo do traacutefego de dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Internet Comunicaccedilatildeo Hieraacuterquica
MAC Origem MAC Destino
IP Origem IP Destino
Dados
MAC Origem MAC Destino
IP Origem IP Destino
Controle de Transmissatildeo Dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Protocolos Caminho dos Dados
Call of Duty
TCP
IP
Fiacutesico
IP
TCP
Call of Duty
Cliente Servidor
IP 2002011004 IP 210212478
codactivisioncom
Domain Name System
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PROTOCOLO DE COMUNICACcedilAtildeO DA WEB
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O que eacute a World Wide Web
bull Chrome Firefox Edge Safari Opera
ndash Satildeo Navegadores
bull Eles acessam conteuacutedo de um servidor
ndash Apache Nginx IIS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Web Server x Navegador
bull Comunicaccedilatildeo por meio do HTTP
bull HTTP significa HyperText Transfer Protocol
ndash Especificado por Tim Berners-Lee em 1990
ndash Transmitir documentos hipertexto
Requisiccedilatildeo
Resposta
Me daacute a paacutegina indexhtml
404 ndash A paacutegina natildeo existe
httpwwwmeuservidorcomindexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Navegaccedilatildeo Segura
bull Comunicaccedilatildeo por meio do HTTPS
bull HTTP + TLS (Transport Layer Security)
ndash Criptografa as informaccedilotildees ponto-a-ponto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TECNOLOGIAS PARA A WEB HTML CSS
JAVASCRIPT PHP
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias para a Web
bull PaacuteginaAplicaccedilatildeo Web
ndash Conteuacutedo
ndash Forma
ndash Accedilotildees (cliente)
ndash Accedilotildees (servidor)
bull Cada parte
ndash Desenvolvida com tecnologias proacuteprias
bull Navegadores
ndash Compreendem a maior parte delas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Sopa de letrinhas
ndash HTML x XHTML x HTML5
ndash CSS1 2 3
ndash JS 2x 30
ndash DOM 1 2
ndash AJAX
ndash JSONXML
ndash PHP 5 7
bull Navegadores
ndash Quaisquer Recentes
Conteuacutedo (estrutura)
Visual (cores e layout)
Estrutura Interna (memoacuteria)
Transferecircncia de Dados
Representaccedilatildeo de Dados
Processamento (accedilotildees)
Processamento no Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Estudaremos no Curso
ndash HTML5 HyperText Markup Language
bull Linguagem de Marcaccedilatildeo
ndash CSS3 Cascade Style Sheets
bull Folhas de Estilo
ndash DOM (brevemente) Document Object Model
bull Estrutura interna de um documento
ndash JS JavaScript
bull Accedilotildees do lado do cliente
ndash PHP PHP is a Hypertext Preprocessor
bull Tarefas do lado do servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Por que separar as accedilotildees
bull Cliente Navegador ldquoFront-endrdquo
ndash Processamento da interface
bull Servidor ldquoBack-endrdquo
ndash Armazena dados e estados
ndash Gerencia processos mais sensiacuteveis
bull Consequecircncia
ndash Necessidade de comunicaccedilatildeo Cliente-Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Objetivos
bull Conhecer o professor
bull Conhecer a disciplina
bull Compreender o sistema de estudo
bull Conhecer as principais tecnologias da web
bull Discutir os elementos baacutesicos do HTML 5
bull Desenvolver paacutegina web simples
bull Desafio Aula 01
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Apresentaccedilatildeo
Quem eacute o professor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Chamada Presenccedila e Contato
Professor Informaccedilotildees de Contato
Daniel Caetano profcaetanoengbr
bull Seraacute controlada a presenccedila
ndash Chamada ocorreraacute sempre nos 15 minutos finais
bull Em tempo real na aula
ndash ldquoEstou frequentando mas a matriacuteculardquo
bull Contato
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PLANO DE ENSINO E PLANO DE AULA
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Plano de Ensino
Disponiacutevel no SIA
1 Entre na Sala Virtual
2 Clique no NOME DA DISCIPLINA
3 Clique em PLANO DE ENSINO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Plano de Aula
bull 2008 ndash 1 Apresentaccedilatildeo
bull 2708 ndash 2 Listas e Tabelas
bull 0309 ndash 3 Formulaacuterios
bull 1009 ndash 4 CSS Baacutesico
bull 1709 ndash 5 CSS Responsivo
bull 2409 ndash 6 JavaScript Baacutesico
bull 0110 ndash 7a JS Decisatildeo
bull 0810 ndash P1
bull 1510 ndash [ Dia do Professor ]
bull 2210 ndash 7b JS Repeticcedilatildeo
bull 2910 ndash 8 JS Matrizes
bull 0511 ndash 9 AJAX e JSON
bull 1211 ndash 10 PHP Baacutesico
bull 1911 ndash 11 PHP com BD
bull 2611 ndash P2
bull 0312 ndash Vista da P2
bull 1012 ndash P3
bull 1712 ndash Encerramento
Aula digital data eacute sugestatildeo pode ser realizada antes
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Como Estudar
bull Ateacute o fim do ensino meacutedio ndash Professor apresenta os conteuacutedos completos
ndash Teoria-praacutetica satildeo exercitadas todas as situaccedilotildees em sala
ndash Alunos estudam apoacutes a aula repetindo exerciacutecios
bull E na faculdade ndash O procedimento do ensino meacutedio natildeo eacute eficiente
ndash Alunos estudam antes da aula os conteuacutedos
ndash Conjunto na aula discutem o conteuacutedo diante de uma situaccedilatildeo-problema
ndash Professor organiza os conceitos principais do conteuacutedo
ndash Teoria-praacutetica exercitadas situaccedilotildees relevantes em sala
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Disciplina Presencial + Digital
bull Como funciona ndash Aluno se prepara entre as aulas conhece a teoria
bull Viacutedeos textos desafios
ndash Na aula discussatildeo e complemento do conteuacutedo
ndash Na aula teoria-praacutetica com atividades participativas
bull Como eacute a preparaccedilatildeo semanal ndash Varia muito de acordo com o conteuacutedo Mas
ndash Toda semana seratildeo passadas atividades bull Conteuacutedo para absorver e analisar
bull Complementado por um desafio sobre o conteuacutedo
ndash Algumas aulas tecircm bastante conteuacutedo digital bull Esse conteuacutedo seraacute discutido em sala e cai em prova
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TRABALHOS DATAS E CRITEacuteRIO DE APROVACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Trabalho Valor CH Data
Desafios ateacute Aula 06 20 na AV1 2h Quarta (Web)
Desafios apoacutes Aula 06 20 na AV2 2h Quarta (Web)
Avaliaccedilatildeo P1 + Projeto Parte 1 80 na AV1 2h 0810 (Aula)
Avaliaccedilatildeo P2 + Projeto Parte 2 80 na AV2 2h 2611 (Aula)
Avaliaccedilatildeo P3 + Projeto Parte 3 100 na AV3 2h 1012 (Aula)
Trabalhos Datas e Aprovaccedilatildeo
Os desafios seratildeo sempre postados aqui httpspadletcomdjcaetanodesweb
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV1
AV1 = T1 + P1 + S1
00 a 80
00 a 100
00 a 20
bull T1 nota que varia de 00 a 20
bull P1 nota obtida na Avaliaccedilatildeo 1 + Projeto 1
bull S1 nota do Simulado AV1 (de 1708 a 2808)
00 a 20
Avaliaccedilatildeo httpssimuladoestaciobralunos
Informaccedilotildees httpsportalestaciobrsimuladoAV1
Se houver
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV1
bull Fiquei com AV1 lt 40
bull Pode ser que tenha Nova Chance (Nota AVR) ndash Agendar 1410 a 2210 Executar 1510 a 2410
AV1 =( T1 + P1 + S1 + AVR)2
00 a 80
00 a 100
00 a 20 00 a 20 00 a 100
Informaccedilotildees httpsportalestaciobrnovachance
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV2
AV2 = T2 + P2
00 a 80
00 a 100
00 a 20
bull T2 nota que varia de 00 a 20
bull P2 nota obtida na Avaliaccedilatildeo 2 + Projeto 2
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV3 bull P3 eacute a nota obtida na Avaliaccedilatildeo 3 + Projeto 3
bull AVA eacute a nota do Avaliando o Aprendizado
bull Se tiver passado e quiser fazer a avaliaccedilatildeo 3 para melhorar nota solicite ateacute uma semana antes
bull Mesmo natildeo precisando AV3 eacute cobrada a presenccedila
AV3 = P3 + AVA
00 a 100
00 a 100
00 a 20
Se houver
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Avaliando o Aprendizado
bull Quatro Simulados 5 questotildees cada ndash Cada questatildeo vale 01 na AV3 (se resposta for correta)
ndash Ateacute 20 pontos na AV3
ndash Moacutedulo 1 0409~
ndash Moacutedulo 2 2409~
ndash Moacutedulo 3 0810~
ndash Moacutedulo 4 2310~
ndash Terminar ateacute 0311
Avaliaccedilatildeo httpssimuladoestaciobralunos
Informaccedilotildees httpsportalestaciobravaliandoaprendizado
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Prepara AV1 e Prepara AV2
bull Aulas complementares de apoio ndash AV1 0310 ndash Aula ONLINE com hora predefinida
ndash AV2 2111 ndash Aula ONLINE com hora predefinida
bull Podem ser uacuteteis
ndash Introduccedilatildeo agrave Programaccedilatildeo
httppreparaestaciobrpresencial
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Criteacuterio de Aprovaccedilatildeo A = Maior nota entre AV1 AV2 AV3 B = Segunda maior nota entre AV1 AV2 AV3
Criteacuterios de Aprovaccedilatildeo (TODOS precisam ser atendidos)
1) A ge 40 2) B ge 40 3) A + B ge 120 (Meacutedia 60)
4) Frequecircncia ge 75 (No maacuteximo 4 faltas)
Inclui AV3 e vistas de prova Evite faltar e saia de feacuterias mais cedo
ATENCcedilAtildeO Se vocecirc tiver mais que uma nota abaixo de 40 ainda que o SIA aponte uma meacutedia maior que 60 vocecirc estaraacute REPROVADO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
BIBLIOGRAFIA E FONTES DE INFORMACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Baacutesica bull Livros Texto
ndash HTML 5 ndash Guia Praacutetico ndash TERUEL bull Disponiacutevel no Minha Biblioteca (ISBN 9788536519296)
ndash Desenvolvimento de Software II Introduccedilatildeo ao Desenv Web com HTML CSS JavaScript e PHP ndash MILETTO bull Disponiacutevel no Minha Biblioteca (ISBN 9788582601969)
ndash Refatorando HTML - Como Melhorar o Projeto de Aplicaccedilotildees Existentes ndash HAROLD bull Disponiacutevel no Minha Biblioteca (ISBN 9788577806706)
ndash JavaScript O Guia Definitivo ndash FLANAGAN bull Disponiacutevel no Minha Biblioteca (ISBN 9788565837484)
ndash PHP 5 - Conceitos Programaccedilatildeo e Integraccedilatildeo com Banco de Dados ndash SOARES bull Disponiacutevel no Minha Biblioteca (ISBN 9788536505633)
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Complementar
bull Material do Curso ndash Tecnologias Web (1ordf Ediccedilatildeo 2015)
bull Rodrigo Plotze (Disponiacutevel no SIA)
ndash Entre na disciplina e clique em ldquoMaterial Didaacuteticordquo
bull Livros Adicional ndash Ajax Rich Internet Applicationa e Desenvolvimento para
Web para Programadores bull Deitel amp Deitel Pearson 2009
ndash Disponiacutevel na Biblioteca Virtual
ndash Haacute outros no plano de ensino
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Adicional
bull Outros Livros Interessante na Biblioteca Virtual
ndash Aprenda a Criar Paacuteginas Web com HTML e XHTML
ndash HTML 5 Embarque Imediato
ndash Canvas HTML 5 Composiccedilatildeo Graacutefica e Interat na Web
ndash Desenvolvimento de Jogos em HTMl 5
bull Haacute muita coisa na internet
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Aula
bull Apresentaccedilotildees e outros itens de estudo
httpswwwcaetanoengbr
bull Selecione o anosemestre atual
bull Clique no nome da disciplina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Estudo
bull Conteuacutedo e atividades de preparaccedilatildeo
httpspadletcomdjcaetanodesweb
ATENCcedilAtildeO As postagens mais novas estaratildeo agrave esquerda
Aula NN Aprenda Mais
Poacutes Aula NN Material
Poacutes Aula NN Desafio
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia da Aula
Material Acesso ao Material
Apresentaccedilatildeo httpswwwcaetanoengbr (Desenvolvimento Web ndash Aula 1)
Livro Texto TERUEL paacuteginas 16 a 24
Aprenda Mais bull Referecircncia Elementos do HTML 5 httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PAacuteGINAS E APLICACcedilOtildeES COM TECNOLOGIA WEB
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Qual a diferenccedila entre eles
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees httpseditormethodac
HTML+CSS+JS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees docsgooglecom
HTML+CSS+JS+Java
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees
HTML+CSS+JS - DosBox
httpscodepenionodwspenVWOLPZ
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
RAacutePIDO HISTOacuteRICO
O QUE Eacute A INTERNET
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Origens
bull Redes locais x Inter-net
bull Diferenccedila importante
ndash Organizaccedilatildeo do traacutefego de dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Internet Comunicaccedilatildeo Hieraacuterquica
MAC Origem MAC Destino
IP Origem IP Destino
Dados
MAC Origem MAC Destino
IP Origem IP Destino
Controle de Transmissatildeo Dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Protocolos Caminho dos Dados
Call of Duty
TCP
IP
Fiacutesico
IP
TCP
Call of Duty
Cliente Servidor
IP 2002011004 IP 210212478
codactivisioncom
Domain Name System
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PROTOCOLO DE COMUNICACcedilAtildeO DA WEB
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O que eacute a World Wide Web
bull Chrome Firefox Edge Safari Opera
ndash Satildeo Navegadores
bull Eles acessam conteuacutedo de um servidor
ndash Apache Nginx IIS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Web Server x Navegador
bull Comunicaccedilatildeo por meio do HTTP
bull HTTP significa HyperText Transfer Protocol
ndash Especificado por Tim Berners-Lee em 1990
ndash Transmitir documentos hipertexto
Requisiccedilatildeo
Resposta
Me daacute a paacutegina indexhtml
404 ndash A paacutegina natildeo existe
httpwwwmeuservidorcomindexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Navegaccedilatildeo Segura
bull Comunicaccedilatildeo por meio do HTTPS
bull HTTP + TLS (Transport Layer Security)
ndash Criptografa as informaccedilotildees ponto-a-ponto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TECNOLOGIAS PARA A WEB HTML CSS
JAVASCRIPT PHP
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias para a Web
bull PaacuteginaAplicaccedilatildeo Web
ndash Conteuacutedo
ndash Forma
ndash Accedilotildees (cliente)
ndash Accedilotildees (servidor)
bull Cada parte
ndash Desenvolvida com tecnologias proacuteprias
bull Navegadores
ndash Compreendem a maior parte delas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Sopa de letrinhas
ndash HTML x XHTML x HTML5
ndash CSS1 2 3
ndash JS 2x 30
ndash DOM 1 2
ndash AJAX
ndash JSONXML
ndash PHP 5 7
bull Navegadores
ndash Quaisquer Recentes
Conteuacutedo (estrutura)
Visual (cores e layout)
Estrutura Interna (memoacuteria)
Transferecircncia de Dados
Representaccedilatildeo de Dados
Processamento (accedilotildees)
Processamento no Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Estudaremos no Curso
ndash HTML5 HyperText Markup Language
bull Linguagem de Marcaccedilatildeo
ndash CSS3 Cascade Style Sheets
bull Folhas de Estilo
ndash DOM (brevemente) Document Object Model
bull Estrutura interna de um documento
ndash JS JavaScript
bull Accedilotildees do lado do cliente
ndash PHP PHP is a Hypertext Preprocessor
bull Tarefas do lado do servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Por que separar as accedilotildees
bull Cliente Navegador ldquoFront-endrdquo
ndash Processamento da interface
bull Servidor ldquoBack-endrdquo
ndash Armazena dados e estados
ndash Gerencia processos mais sensiacuteveis
bull Consequecircncia
ndash Necessidade de comunicaccedilatildeo Cliente-Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Apresentaccedilatildeo
Quem eacute o professor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Chamada Presenccedila e Contato
Professor Informaccedilotildees de Contato
Daniel Caetano profcaetanoengbr
bull Seraacute controlada a presenccedila
ndash Chamada ocorreraacute sempre nos 15 minutos finais
bull Em tempo real na aula
ndash ldquoEstou frequentando mas a matriacuteculardquo
bull Contato
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PLANO DE ENSINO E PLANO DE AULA
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Plano de Ensino
Disponiacutevel no SIA
1 Entre na Sala Virtual
2 Clique no NOME DA DISCIPLINA
3 Clique em PLANO DE ENSINO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Plano de Aula
bull 2008 ndash 1 Apresentaccedilatildeo
bull 2708 ndash 2 Listas e Tabelas
bull 0309 ndash 3 Formulaacuterios
bull 1009 ndash 4 CSS Baacutesico
bull 1709 ndash 5 CSS Responsivo
bull 2409 ndash 6 JavaScript Baacutesico
bull 0110 ndash 7a JS Decisatildeo
bull 0810 ndash P1
bull 1510 ndash [ Dia do Professor ]
bull 2210 ndash 7b JS Repeticcedilatildeo
bull 2910 ndash 8 JS Matrizes
bull 0511 ndash 9 AJAX e JSON
bull 1211 ndash 10 PHP Baacutesico
bull 1911 ndash 11 PHP com BD
bull 2611 ndash P2
bull 0312 ndash Vista da P2
bull 1012 ndash P3
bull 1712 ndash Encerramento
Aula digital data eacute sugestatildeo pode ser realizada antes
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Como Estudar
bull Ateacute o fim do ensino meacutedio ndash Professor apresenta os conteuacutedos completos
ndash Teoria-praacutetica satildeo exercitadas todas as situaccedilotildees em sala
ndash Alunos estudam apoacutes a aula repetindo exerciacutecios
bull E na faculdade ndash O procedimento do ensino meacutedio natildeo eacute eficiente
ndash Alunos estudam antes da aula os conteuacutedos
ndash Conjunto na aula discutem o conteuacutedo diante de uma situaccedilatildeo-problema
ndash Professor organiza os conceitos principais do conteuacutedo
ndash Teoria-praacutetica exercitadas situaccedilotildees relevantes em sala
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Disciplina Presencial + Digital
bull Como funciona ndash Aluno se prepara entre as aulas conhece a teoria
bull Viacutedeos textos desafios
ndash Na aula discussatildeo e complemento do conteuacutedo
ndash Na aula teoria-praacutetica com atividades participativas
bull Como eacute a preparaccedilatildeo semanal ndash Varia muito de acordo com o conteuacutedo Mas
ndash Toda semana seratildeo passadas atividades bull Conteuacutedo para absorver e analisar
bull Complementado por um desafio sobre o conteuacutedo
ndash Algumas aulas tecircm bastante conteuacutedo digital bull Esse conteuacutedo seraacute discutido em sala e cai em prova
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TRABALHOS DATAS E CRITEacuteRIO DE APROVACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Trabalho Valor CH Data
Desafios ateacute Aula 06 20 na AV1 2h Quarta (Web)
Desafios apoacutes Aula 06 20 na AV2 2h Quarta (Web)
Avaliaccedilatildeo P1 + Projeto Parte 1 80 na AV1 2h 0810 (Aula)
Avaliaccedilatildeo P2 + Projeto Parte 2 80 na AV2 2h 2611 (Aula)
Avaliaccedilatildeo P3 + Projeto Parte 3 100 na AV3 2h 1012 (Aula)
Trabalhos Datas e Aprovaccedilatildeo
Os desafios seratildeo sempre postados aqui httpspadletcomdjcaetanodesweb
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV1
AV1 = T1 + P1 + S1
00 a 80
00 a 100
00 a 20
bull T1 nota que varia de 00 a 20
bull P1 nota obtida na Avaliaccedilatildeo 1 + Projeto 1
bull S1 nota do Simulado AV1 (de 1708 a 2808)
00 a 20
Avaliaccedilatildeo httpssimuladoestaciobralunos
Informaccedilotildees httpsportalestaciobrsimuladoAV1
Se houver
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV1
bull Fiquei com AV1 lt 40
bull Pode ser que tenha Nova Chance (Nota AVR) ndash Agendar 1410 a 2210 Executar 1510 a 2410
AV1 =( T1 + P1 + S1 + AVR)2
00 a 80
00 a 100
00 a 20 00 a 20 00 a 100
Informaccedilotildees httpsportalestaciobrnovachance
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV2
AV2 = T2 + P2
00 a 80
00 a 100
00 a 20
bull T2 nota que varia de 00 a 20
bull P2 nota obtida na Avaliaccedilatildeo 2 + Projeto 2
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV3 bull P3 eacute a nota obtida na Avaliaccedilatildeo 3 + Projeto 3
bull AVA eacute a nota do Avaliando o Aprendizado
bull Se tiver passado e quiser fazer a avaliaccedilatildeo 3 para melhorar nota solicite ateacute uma semana antes
bull Mesmo natildeo precisando AV3 eacute cobrada a presenccedila
AV3 = P3 + AVA
00 a 100
00 a 100
00 a 20
Se houver
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Avaliando o Aprendizado
bull Quatro Simulados 5 questotildees cada ndash Cada questatildeo vale 01 na AV3 (se resposta for correta)
ndash Ateacute 20 pontos na AV3
ndash Moacutedulo 1 0409~
ndash Moacutedulo 2 2409~
ndash Moacutedulo 3 0810~
ndash Moacutedulo 4 2310~
ndash Terminar ateacute 0311
Avaliaccedilatildeo httpssimuladoestaciobralunos
Informaccedilotildees httpsportalestaciobravaliandoaprendizado
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Prepara AV1 e Prepara AV2
bull Aulas complementares de apoio ndash AV1 0310 ndash Aula ONLINE com hora predefinida
ndash AV2 2111 ndash Aula ONLINE com hora predefinida
bull Podem ser uacuteteis
ndash Introduccedilatildeo agrave Programaccedilatildeo
httppreparaestaciobrpresencial
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Criteacuterio de Aprovaccedilatildeo A = Maior nota entre AV1 AV2 AV3 B = Segunda maior nota entre AV1 AV2 AV3
Criteacuterios de Aprovaccedilatildeo (TODOS precisam ser atendidos)
1) A ge 40 2) B ge 40 3) A + B ge 120 (Meacutedia 60)
4) Frequecircncia ge 75 (No maacuteximo 4 faltas)
Inclui AV3 e vistas de prova Evite faltar e saia de feacuterias mais cedo
ATENCcedilAtildeO Se vocecirc tiver mais que uma nota abaixo de 40 ainda que o SIA aponte uma meacutedia maior que 60 vocecirc estaraacute REPROVADO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
BIBLIOGRAFIA E FONTES DE INFORMACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Baacutesica bull Livros Texto
ndash HTML 5 ndash Guia Praacutetico ndash TERUEL bull Disponiacutevel no Minha Biblioteca (ISBN 9788536519296)
ndash Desenvolvimento de Software II Introduccedilatildeo ao Desenv Web com HTML CSS JavaScript e PHP ndash MILETTO bull Disponiacutevel no Minha Biblioteca (ISBN 9788582601969)
ndash Refatorando HTML - Como Melhorar o Projeto de Aplicaccedilotildees Existentes ndash HAROLD bull Disponiacutevel no Minha Biblioteca (ISBN 9788577806706)
ndash JavaScript O Guia Definitivo ndash FLANAGAN bull Disponiacutevel no Minha Biblioteca (ISBN 9788565837484)
ndash PHP 5 - Conceitos Programaccedilatildeo e Integraccedilatildeo com Banco de Dados ndash SOARES bull Disponiacutevel no Minha Biblioteca (ISBN 9788536505633)
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Complementar
bull Material do Curso ndash Tecnologias Web (1ordf Ediccedilatildeo 2015)
bull Rodrigo Plotze (Disponiacutevel no SIA)
ndash Entre na disciplina e clique em ldquoMaterial Didaacuteticordquo
bull Livros Adicional ndash Ajax Rich Internet Applicationa e Desenvolvimento para
Web para Programadores bull Deitel amp Deitel Pearson 2009
ndash Disponiacutevel na Biblioteca Virtual
ndash Haacute outros no plano de ensino
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Adicional
bull Outros Livros Interessante na Biblioteca Virtual
ndash Aprenda a Criar Paacuteginas Web com HTML e XHTML
ndash HTML 5 Embarque Imediato
ndash Canvas HTML 5 Composiccedilatildeo Graacutefica e Interat na Web
ndash Desenvolvimento de Jogos em HTMl 5
bull Haacute muita coisa na internet
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Aula
bull Apresentaccedilotildees e outros itens de estudo
httpswwwcaetanoengbr
bull Selecione o anosemestre atual
bull Clique no nome da disciplina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Estudo
bull Conteuacutedo e atividades de preparaccedilatildeo
httpspadletcomdjcaetanodesweb
ATENCcedilAtildeO As postagens mais novas estaratildeo agrave esquerda
Aula NN Aprenda Mais
Poacutes Aula NN Material
Poacutes Aula NN Desafio
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia da Aula
Material Acesso ao Material
Apresentaccedilatildeo httpswwwcaetanoengbr (Desenvolvimento Web ndash Aula 1)
Livro Texto TERUEL paacuteginas 16 a 24
Aprenda Mais bull Referecircncia Elementos do HTML 5 httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PAacuteGINAS E APLICACcedilOtildeES COM TECNOLOGIA WEB
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Qual a diferenccedila entre eles
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees httpseditormethodac
HTML+CSS+JS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees docsgooglecom
HTML+CSS+JS+Java
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees
HTML+CSS+JS - DosBox
httpscodepenionodwspenVWOLPZ
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
RAacutePIDO HISTOacuteRICO
O QUE Eacute A INTERNET
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Origens
bull Redes locais x Inter-net
bull Diferenccedila importante
ndash Organizaccedilatildeo do traacutefego de dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Internet Comunicaccedilatildeo Hieraacuterquica
MAC Origem MAC Destino
IP Origem IP Destino
Dados
MAC Origem MAC Destino
IP Origem IP Destino
Controle de Transmissatildeo Dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Protocolos Caminho dos Dados
Call of Duty
TCP
IP
Fiacutesico
IP
TCP
Call of Duty
Cliente Servidor
IP 2002011004 IP 210212478
codactivisioncom
Domain Name System
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PROTOCOLO DE COMUNICACcedilAtildeO DA WEB
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O que eacute a World Wide Web
bull Chrome Firefox Edge Safari Opera
ndash Satildeo Navegadores
bull Eles acessam conteuacutedo de um servidor
ndash Apache Nginx IIS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Web Server x Navegador
bull Comunicaccedilatildeo por meio do HTTP
bull HTTP significa HyperText Transfer Protocol
ndash Especificado por Tim Berners-Lee em 1990
ndash Transmitir documentos hipertexto
Requisiccedilatildeo
Resposta
Me daacute a paacutegina indexhtml
404 ndash A paacutegina natildeo existe
httpwwwmeuservidorcomindexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Navegaccedilatildeo Segura
bull Comunicaccedilatildeo por meio do HTTPS
bull HTTP + TLS (Transport Layer Security)
ndash Criptografa as informaccedilotildees ponto-a-ponto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TECNOLOGIAS PARA A WEB HTML CSS
JAVASCRIPT PHP
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias para a Web
bull PaacuteginaAplicaccedilatildeo Web
ndash Conteuacutedo
ndash Forma
ndash Accedilotildees (cliente)
ndash Accedilotildees (servidor)
bull Cada parte
ndash Desenvolvida com tecnologias proacuteprias
bull Navegadores
ndash Compreendem a maior parte delas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Sopa de letrinhas
ndash HTML x XHTML x HTML5
ndash CSS1 2 3
ndash JS 2x 30
ndash DOM 1 2
ndash AJAX
ndash JSONXML
ndash PHP 5 7
bull Navegadores
ndash Quaisquer Recentes
Conteuacutedo (estrutura)
Visual (cores e layout)
Estrutura Interna (memoacuteria)
Transferecircncia de Dados
Representaccedilatildeo de Dados
Processamento (accedilotildees)
Processamento no Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Estudaremos no Curso
ndash HTML5 HyperText Markup Language
bull Linguagem de Marcaccedilatildeo
ndash CSS3 Cascade Style Sheets
bull Folhas de Estilo
ndash DOM (brevemente) Document Object Model
bull Estrutura interna de um documento
ndash JS JavaScript
bull Accedilotildees do lado do cliente
ndash PHP PHP is a Hypertext Preprocessor
bull Tarefas do lado do servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Por que separar as accedilotildees
bull Cliente Navegador ldquoFront-endrdquo
ndash Processamento da interface
bull Servidor ldquoBack-endrdquo
ndash Armazena dados e estados
ndash Gerencia processos mais sensiacuteveis
bull Consequecircncia
ndash Necessidade de comunicaccedilatildeo Cliente-Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Chamada Presenccedila e Contato
Professor Informaccedilotildees de Contato
Daniel Caetano profcaetanoengbr
bull Seraacute controlada a presenccedila
ndash Chamada ocorreraacute sempre nos 15 minutos finais
bull Em tempo real na aula
ndash ldquoEstou frequentando mas a matriacuteculardquo
bull Contato
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PLANO DE ENSINO E PLANO DE AULA
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Plano de Ensino
Disponiacutevel no SIA
1 Entre na Sala Virtual
2 Clique no NOME DA DISCIPLINA
3 Clique em PLANO DE ENSINO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Plano de Aula
bull 2008 ndash 1 Apresentaccedilatildeo
bull 2708 ndash 2 Listas e Tabelas
bull 0309 ndash 3 Formulaacuterios
bull 1009 ndash 4 CSS Baacutesico
bull 1709 ndash 5 CSS Responsivo
bull 2409 ndash 6 JavaScript Baacutesico
bull 0110 ndash 7a JS Decisatildeo
bull 0810 ndash P1
bull 1510 ndash [ Dia do Professor ]
bull 2210 ndash 7b JS Repeticcedilatildeo
bull 2910 ndash 8 JS Matrizes
bull 0511 ndash 9 AJAX e JSON
bull 1211 ndash 10 PHP Baacutesico
bull 1911 ndash 11 PHP com BD
bull 2611 ndash P2
bull 0312 ndash Vista da P2
bull 1012 ndash P3
bull 1712 ndash Encerramento
Aula digital data eacute sugestatildeo pode ser realizada antes
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Como Estudar
bull Ateacute o fim do ensino meacutedio ndash Professor apresenta os conteuacutedos completos
ndash Teoria-praacutetica satildeo exercitadas todas as situaccedilotildees em sala
ndash Alunos estudam apoacutes a aula repetindo exerciacutecios
bull E na faculdade ndash O procedimento do ensino meacutedio natildeo eacute eficiente
ndash Alunos estudam antes da aula os conteuacutedos
ndash Conjunto na aula discutem o conteuacutedo diante de uma situaccedilatildeo-problema
ndash Professor organiza os conceitos principais do conteuacutedo
ndash Teoria-praacutetica exercitadas situaccedilotildees relevantes em sala
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Disciplina Presencial + Digital
bull Como funciona ndash Aluno se prepara entre as aulas conhece a teoria
bull Viacutedeos textos desafios
ndash Na aula discussatildeo e complemento do conteuacutedo
ndash Na aula teoria-praacutetica com atividades participativas
bull Como eacute a preparaccedilatildeo semanal ndash Varia muito de acordo com o conteuacutedo Mas
ndash Toda semana seratildeo passadas atividades bull Conteuacutedo para absorver e analisar
bull Complementado por um desafio sobre o conteuacutedo
ndash Algumas aulas tecircm bastante conteuacutedo digital bull Esse conteuacutedo seraacute discutido em sala e cai em prova
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TRABALHOS DATAS E CRITEacuteRIO DE APROVACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Trabalho Valor CH Data
Desafios ateacute Aula 06 20 na AV1 2h Quarta (Web)
Desafios apoacutes Aula 06 20 na AV2 2h Quarta (Web)
Avaliaccedilatildeo P1 + Projeto Parte 1 80 na AV1 2h 0810 (Aula)
Avaliaccedilatildeo P2 + Projeto Parte 2 80 na AV2 2h 2611 (Aula)
Avaliaccedilatildeo P3 + Projeto Parte 3 100 na AV3 2h 1012 (Aula)
Trabalhos Datas e Aprovaccedilatildeo
Os desafios seratildeo sempre postados aqui httpspadletcomdjcaetanodesweb
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV1
AV1 = T1 + P1 + S1
00 a 80
00 a 100
00 a 20
bull T1 nota que varia de 00 a 20
bull P1 nota obtida na Avaliaccedilatildeo 1 + Projeto 1
bull S1 nota do Simulado AV1 (de 1708 a 2808)
00 a 20
Avaliaccedilatildeo httpssimuladoestaciobralunos
Informaccedilotildees httpsportalestaciobrsimuladoAV1
Se houver
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV1
bull Fiquei com AV1 lt 40
bull Pode ser que tenha Nova Chance (Nota AVR) ndash Agendar 1410 a 2210 Executar 1510 a 2410
AV1 =( T1 + P1 + S1 + AVR)2
00 a 80
00 a 100
00 a 20 00 a 20 00 a 100
Informaccedilotildees httpsportalestaciobrnovachance
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV2
AV2 = T2 + P2
00 a 80
00 a 100
00 a 20
bull T2 nota que varia de 00 a 20
bull P2 nota obtida na Avaliaccedilatildeo 2 + Projeto 2
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV3 bull P3 eacute a nota obtida na Avaliaccedilatildeo 3 + Projeto 3
bull AVA eacute a nota do Avaliando o Aprendizado
bull Se tiver passado e quiser fazer a avaliaccedilatildeo 3 para melhorar nota solicite ateacute uma semana antes
bull Mesmo natildeo precisando AV3 eacute cobrada a presenccedila
AV3 = P3 + AVA
00 a 100
00 a 100
00 a 20
Se houver
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Avaliando o Aprendizado
bull Quatro Simulados 5 questotildees cada ndash Cada questatildeo vale 01 na AV3 (se resposta for correta)
ndash Ateacute 20 pontos na AV3
ndash Moacutedulo 1 0409~
ndash Moacutedulo 2 2409~
ndash Moacutedulo 3 0810~
ndash Moacutedulo 4 2310~
ndash Terminar ateacute 0311
Avaliaccedilatildeo httpssimuladoestaciobralunos
Informaccedilotildees httpsportalestaciobravaliandoaprendizado
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Prepara AV1 e Prepara AV2
bull Aulas complementares de apoio ndash AV1 0310 ndash Aula ONLINE com hora predefinida
ndash AV2 2111 ndash Aula ONLINE com hora predefinida
bull Podem ser uacuteteis
ndash Introduccedilatildeo agrave Programaccedilatildeo
httppreparaestaciobrpresencial
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Criteacuterio de Aprovaccedilatildeo A = Maior nota entre AV1 AV2 AV3 B = Segunda maior nota entre AV1 AV2 AV3
Criteacuterios de Aprovaccedilatildeo (TODOS precisam ser atendidos)
1) A ge 40 2) B ge 40 3) A + B ge 120 (Meacutedia 60)
4) Frequecircncia ge 75 (No maacuteximo 4 faltas)
Inclui AV3 e vistas de prova Evite faltar e saia de feacuterias mais cedo
ATENCcedilAtildeO Se vocecirc tiver mais que uma nota abaixo de 40 ainda que o SIA aponte uma meacutedia maior que 60 vocecirc estaraacute REPROVADO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
BIBLIOGRAFIA E FONTES DE INFORMACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Baacutesica bull Livros Texto
ndash HTML 5 ndash Guia Praacutetico ndash TERUEL bull Disponiacutevel no Minha Biblioteca (ISBN 9788536519296)
ndash Desenvolvimento de Software II Introduccedilatildeo ao Desenv Web com HTML CSS JavaScript e PHP ndash MILETTO bull Disponiacutevel no Minha Biblioteca (ISBN 9788582601969)
ndash Refatorando HTML - Como Melhorar o Projeto de Aplicaccedilotildees Existentes ndash HAROLD bull Disponiacutevel no Minha Biblioteca (ISBN 9788577806706)
ndash JavaScript O Guia Definitivo ndash FLANAGAN bull Disponiacutevel no Minha Biblioteca (ISBN 9788565837484)
ndash PHP 5 - Conceitos Programaccedilatildeo e Integraccedilatildeo com Banco de Dados ndash SOARES bull Disponiacutevel no Minha Biblioteca (ISBN 9788536505633)
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Complementar
bull Material do Curso ndash Tecnologias Web (1ordf Ediccedilatildeo 2015)
bull Rodrigo Plotze (Disponiacutevel no SIA)
ndash Entre na disciplina e clique em ldquoMaterial Didaacuteticordquo
bull Livros Adicional ndash Ajax Rich Internet Applicationa e Desenvolvimento para
Web para Programadores bull Deitel amp Deitel Pearson 2009
ndash Disponiacutevel na Biblioteca Virtual
ndash Haacute outros no plano de ensino
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Adicional
bull Outros Livros Interessante na Biblioteca Virtual
ndash Aprenda a Criar Paacuteginas Web com HTML e XHTML
ndash HTML 5 Embarque Imediato
ndash Canvas HTML 5 Composiccedilatildeo Graacutefica e Interat na Web
ndash Desenvolvimento de Jogos em HTMl 5
bull Haacute muita coisa na internet
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Aula
bull Apresentaccedilotildees e outros itens de estudo
httpswwwcaetanoengbr
bull Selecione o anosemestre atual
bull Clique no nome da disciplina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Estudo
bull Conteuacutedo e atividades de preparaccedilatildeo
httpspadletcomdjcaetanodesweb
ATENCcedilAtildeO As postagens mais novas estaratildeo agrave esquerda
Aula NN Aprenda Mais
Poacutes Aula NN Material
Poacutes Aula NN Desafio
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia da Aula
Material Acesso ao Material
Apresentaccedilatildeo httpswwwcaetanoengbr (Desenvolvimento Web ndash Aula 1)
Livro Texto TERUEL paacuteginas 16 a 24
Aprenda Mais bull Referecircncia Elementos do HTML 5 httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PAacuteGINAS E APLICACcedilOtildeES COM TECNOLOGIA WEB
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Qual a diferenccedila entre eles
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees httpseditormethodac
HTML+CSS+JS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees docsgooglecom
HTML+CSS+JS+Java
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees
HTML+CSS+JS - DosBox
httpscodepenionodwspenVWOLPZ
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
RAacutePIDO HISTOacuteRICO
O QUE Eacute A INTERNET
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Origens
bull Redes locais x Inter-net
bull Diferenccedila importante
ndash Organizaccedilatildeo do traacutefego de dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Internet Comunicaccedilatildeo Hieraacuterquica
MAC Origem MAC Destino
IP Origem IP Destino
Dados
MAC Origem MAC Destino
IP Origem IP Destino
Controle de Transmissatildeo Dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Protocolos Caminho dos Dados
Call of Duty
TCP
IP
Fiacutesico
IP
TCP
Call of Duty
Cliente Servidor
IP 2002011004 IP 210212478
codactivisioncom
Domain Name System
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PROTOCOLO DE COMUNICACcedilAtildeO DA WEB
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O que eacute a World Wide Web
bull Chrome Firefox Edge Safari Opera
ndash Satildeo Navegadores
bull Eles acessam conteuacutedo de um servidor
ndash Apache Nginx IIS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Web Server x Navegador
bull Comunicaccedilatildeo por meio do HTTP
bull HTTP significa HyperText Transfer Protocol
ndash Especificado por Tim Berners-Lee em 1990
ndash Transmitir documentos hipertexto
Requisiccedilatildeo
Resposta
Me daacute a paacutegina indexhtml
404 ndash A paacutegina natildeo existe
httpwwwmeuservidorcomindexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Navegaccedilatildeo Segura
bull Comunicaccedilatildeo por meio do HTTPS
bull HTTP + TLS (Transport Layer Security)
ndash Criptografa as informaccedilotildees ponto-a-ponto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TECNOLOGIAS PARA A WEB HTML CSS
JAVASCRIPT PHP
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias para a Web
bull PaacuteginaAplicaccedilatildeo Web
ndash Conteuacutedo
ndash Forma
ndash Accedilotildees (cliente)
ndash Accedilotildees (servidor)
bull Cada parte
ndash Desenvolvida com tecnologias proacuteprias
bull Navegadores
ndash Compreendem a maior parte delas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Sopa de letrinhas
ndash HTML x XHTML x HTML5
ndash CSS1 2 3
ndash JS 2x 30
ndash DOM 1 2
ndash AJAX
ndash JSONXML
ndash PHP 5 7
bull Navegadores
ndash Quaisquer Recentes
Conteuacutedo (estrutura)
Visual (cores e layout)
Estrutura Interna (memoacuteria)
Transferecircncia de Dados
Representaccedilatildeo de Dados
Processamento (accedilotildees)
Processamento no Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Estudaremos no Curso
ndash HTML5 HyperText Markup Language
bull Linguagem de Marcaccedilatildeo
ndash CSS3 Cascade Style Sheets
bull Folhas de Estilo
ndash DOM (brevemente) Document Object Model
bull Estrutura interna de um documento
ndash JS JavaScript
bull Accedilotildees do lado do cliente
ndash PHP PHP is a Hypertext Preprocessor
bull Tarefas do lado do servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Por que separar as accedilotildees
bull Cliente Navegador ldquoFront-endrdquo
ndash Processamento da interface
bull Servidor ldquoBack-endrdquo
ndash Armazena dados e estados
ndash Gerencia processos mais sensiacuteveis
bull Consequecircncia
ndash Necessidade de comunicaccedilatildeo Cliente-Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PLANO DE ENSINO E PLANO DE AULA
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Plano de Ensino
Disponiacutevel no SIA
1 Entre na Sala Virtual
2 Clique no NOME DA DISCIPLINA
3 Clique em PLANO DE ENSINO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Plano de Aula
bull 2008 ndash 1 Apresentaccedilatildeo
bull 2708 ndash 2 Listas e Tabelas
bull 0309 ndash 3 Formulaacuterios
bull 1009 ndash 4 CSS Baacutesico
bull 1709 ndash 5 CSS Responsivo
bull 2409 ndash 6 JavaScript Baacutesico
bull 0110 ndash 7a JS Decisatildeo
bull 0810 ndash P1
bull 1510 ndash [ Dia do Professor ]
bull 2210 ndash 7b JS Repeticcedilatildeo
bull 2910 ndash 8 JS Matrizes
bull 0511 ndash 9 AJAX e JSON
bull 1211 ndash 10 PHP Baacutesico
bull 1911 ndash 11 PHP com BD
bull 2611 ndash P2
bull 0312 ndash Vista da P2
bull 1012 ndash P3
bull 1712 ndash Encerramento
Aula digital data eacute sugestatildeo pode ser realizada antes
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Como Estudar
bull Ateacute o fim do ensino meacutedio ndash Professor apresenta os conteuacutedos completos
ndash Teoria-praacutetica satildeo exercitadas todas as situaccedilotildees em sala
ndash Alunos estudam apoacutes a aula repetindo exerciacutecios
bull E na faculdade ndash O procedimento do ensino meacutedio natildeo eacute eficiente
ndash Alunos estudam antes da aula os conteuacutedos
ndash Conjunto na aula discutem o conteuacutedo diante de uma situaccedilatildeo-problema
ndash Professor organiza os conceitos principais do conteuacutedo
ndash Teoria-praacutetica exercitadas situaccedilotildees relevantes em sala
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Disciplina Presencial + Digital
bull Como funciona ndash Aluno se prepara entre as aulas conhece a teoria
bull Viacutedeos textos desafios
ndash Na aula discussatildeo e complemento do conteuacutedo
ndash Na aula teoria-praacutetica com atividades participativas
bull Como eacute a preparaccedilatildeo semanal ndash Varia muito de acordo com o conteuacutedo Mas
ndash Toda semana seratildeo passadas atividades bull Conteuacutedo para absorver e analisar
bull Complementado por um desafio sobre o conteuacutedo
ndash Algumas aulas tecircm bastante conteuacutedo digital bull Esse conteuacutedo seraacute discutido em sala e cai em prova
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TRABALHOS DATAS E CRITEacuteRIO DE APROVACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Trabalho Valor CH Data
Desafios ateacute Aula 06 20 na AV1 2h Quarta (Web)
Desafios apoacutes Aula 06 20 na AV2 2h Quarta (Web)
Avaliaccedilatildeo P1 + Projeto Parte 1 80 na AV1 2h 0810 (Aula)
Avaliaccedilatildeo P2 + Projeto Parte 2 80 na AV2 2h 2611 (Aula)
Avaliaccedilatildeo P3 + Projeto Parte 3 100 na AV3 2h 1012 (Aula)
Trabalhos Datas e Aprovaccedilatildeo
Os desafios seratildeo sempre postados aqui httpspadletcomdjcaetanodesweb
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV1
AV1 = T1 + P1 + S1
00 a 80
00 a 100
00 a 20
bull T1 nota que varia de 00 a 20
bull P1 nota obtida na Avaliaccedilatildeo 1 + Projeto 1
bull S1 nota do Simulado AV1 (de 1708 a 2808)
00 a 20
Avaliaccedilatildeo httpssimuladoestaciobralunos
Informaccedilotildees httpsportalestaciobrsimuladoAV1
Se houver
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV1
bull Fiquei com AV1 lt 40
bull Pode ser que tenha Nova Chance (Nota AVR) ndash Agendar 1410 a 2210 Executar 1510 a 2410
AV1 =( T1 + P1 + S1 + AVR)2
00 a 80
00 a 100
00 a 20 00 a 20 00 a 100
Informaccedilotildees httpsportalestaciobrnovachance
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV2
AV2 = T2 + P2
00 a 80
00 a 100
00 a 20
bull T2 nota que varia de 00 a 20
bull P2 nota obtida na Avaliaccedilatildeo 2 + Projeto 2
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV3 bull P3 eacute a nota obtida na Avaliaccedilatildeo 3 + Projeto 3
bull AVA eacute a nota do Avaliando o Aprendizado
bull Se tiver passado e quiser fazer a avaliaccedilatildeo 3 para melhorar nota solicite ateacute uma semana antes
bull Mesmo natildeo precisando AV3 eacute cobrada a presenccedila
AV3 = P3 + AVA
00 a 100
00 a 100
00 a 20
Se houver
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Avaliando o Aprendizado
bull Quatro Simulados 5 questotildees cada ndash Cada questatildeo vale 01 na AV3 (se resposta for correta)
ndash Ateacute 20 pontos na AV3
ndash Moacutedulo 1 0409~
ndash Moacutedulo 2 2409~
ndash Moacutedulo 3 0810~
ndash Moacutedulo 4 2310~
ndash Terminar ateacute 0311
Avaliaccedilatildeo httpssimuladoestaciobralunos
Informaccedilotildees httpsportalestaciobravaliandoaprendizado
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Prepara AV1 e Prepara AV2
bull Aulas complementares de apoio ndash AV1 0310 ndash Aula ONLINE com hora predefinida
ndash AV2 2111 ndash Aula ONLINE com hora predefinida
bull Podem ser uacuteteis
ndash Introduccedilatildeo agrave Programaccedilatildeo
httppreparaestaciobrpresencial
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Criteacuterio de Aprovaccedilatildeo A = Maior nota entre AV1 AV2 AV3 B = Segunda maior nota entre AV1 AV2 AV3
Criteacuterios de Aprovaccedilatildeo (TODOS precisam ser atendidos)
1) A ge 40 2) B ge 40 3) A + B ge 120 (Meacutedia 60)
4) Frequecircncia ge 75 (No maacuteximo 4 faltas)
Inclui AV3 e vistas de prova Evite faltar e saia de feacuterias mais cedo
ATENCcedilAtildeO Se vocecirc tiver mais que uma nota abaixo de 40 ainda que o SIA aponte uma meacutedia maior que 60 vocecirc estaraacute REPROVADO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
BIBLIOGRAFIA E FONTES DE INFORMACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Baacutesica bull Livros Texto
ndash HTML 5 ndash Guia Praacutetico ndash TERUEL bull Disponiacutevel no Minha Biblioteca (ISBN 9788536519296)
ndash Desenvolvimento de Software II Introduccedilatildeo ao Desenv Web com HTML CSS JavaScript e PHP ndash MILETTO bull Disponiacutevel no Minha Biblioteca (ISBN 9788582601969)
ndash Refatorando HTML - Como Melhorar o Projeto de Aplicaccedilotildees Existentes ndash HAROLD bull Disponiacutevel no Minha Biblioteca (ISBN 9788577806706)
ndash JavaScript O Guia Definitivo ndash FLANAGAN bull Disponiacutevel no Minha Biblioteca (ISBN 9788565837484)
ndash PHP 5 - Conceitos Programaccedilatildeo e Integraccedilatildeo com Banco de Dados ndash SOARES bull Disponiacutevel no Minha Biblioteca (ISBN 9788536505633)
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Complementar
bull Material do Curso ndash Tecnologias Web (1ordf Ediccedilatildeo 2015)
bull Rodrigo Plotze (Disponiacutevel no SIA)
ndash Entre na disciplina e clique em ldquoMaterial Didaacuteticordquo
bull Livros Adicional ndash Ajax Rich Internet Applicationa e Desenvolvimento para
Web para Programadores bull Deitel amp Deitel Pearson 2009
ndash Disponiacutevel na Biblioteca Virtual
ndash Haacute outros no plano de ensino
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Adicional
bull Outros Livros Interessante na Biblioteca Virtual
ndash Aprenda a Criar Paacuteginas Web com HTML e XHTML
ndash HTML 5 Embarque Imediato
ndash Canvas HTML 5 Composiccedilatildeo Graacutefica e Interat na Web
ndash Desenvolvimento de Jogos em HTMl 5
bull Haacute muita coisa na internet
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Aula
bull Apresentaccedilotildees e outros itens de estudo
httpswwwcaetanoengbr
bull Selecione o anosemestre atual
bull Clique no nome da disciplina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Estudo
bull Conteuacutedo e atividades de preparaccedilatildeo
httpspadletcomdjcaetanodesweb
ATENCcedilAtildeO As postagens mais novas estaratildeo agrave esquerda
Aula NN Aprenda Mais
Poacutes Aula NN Material
Poacutes Aula NN Desafio
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia da Aula
Material Acesso ao Material
Apresentaccedilatildeo httpswwwcaetanoengbr (Desenvolvimento Web ndash Aula 1)
Livro Texto TERUEL paacuteginas 16 a 24
Aprenda Mais bull Referecircncia Elementos do HTML 5 httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PAacuteGINAS E APLICACcedilOtildeES COM TECNOLOGIA WEB
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Qual a diferenccedila entre eles
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees httpseditormethodac
HTML+CSS+JS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees docsgooglecom
HTML+CSS+JS+Java
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees
HTML+CSS+JS - DosBox
httpscodepenionodwspenVWOLPZ
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
RAacutePIDO HISTOacuteRICO
O QUE Eacute A INTERNET
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Origens
bull Redes locais x Inter-net
bull Diferenccedila importante
ndash Organizaccedilatildeo do traacutefego de dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Internet Comunicaccedilatildeo Hieraacuterquica
MAC Origem MAC Destino
IP Origem IP Destino
Dados
MAC Origem MAC Destino
IP Origem IP Destino
Controle de Transmissatildeo Dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Protocolos Caminho dos Dados
Call of Duty
TCP
IP
Fiacutesico
IP
TCP
Call of Duty
Cliente Servidor
IP 2002011004 IP 210212478
codactivisioncom
Domain Name System
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PROTOCOLO DE COMUNICACcedilAtildeO DA WEB
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O que eacute a World Wide Web
bull Chrome Firefox Edge Safari Opera
ndash Satildeo Navegadores
bull Eles acessam conteuacutedo de um servidor
ndash Apache Nginx IIS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Web Server x Navegador
bull Comunicaccedilatildeo por meio do HTTP
bull HTTP significa HyperText Transfer Protocol
ndash Especificado por Tim Berners-Lee em 1990
ndash Transmitir documentos hipertexto
Requisiccedilatildeo
Resposta
Me daacute a paacutegina indexhtml
404 ndash A paacutegina natildeo existe
httpwwwmeuservidorcomindexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Navegaccedilatildeo Segura
bull Comunicaccedilatildeo por meio do HTTPS
bull HTTP + TLS (Transport Layer Security)
ndash Criptografa as informaccedilotildees ponto-a-ponto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TECNOLOGIAS PARA A WEB HTML CSS
JAVASCRIPT PHP
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias para a Web
bull PaacuteginaAplicaccedilatildeo Web
ndash Conteuacutedo
ndash Forma
ndash Accedilotildees (cliente)
ndash Accedilotildees (servidor)
bull Cada parte
ndash Desenvolvida com tecnologias proacuteprias
bull Navegadores
ndash Compreendem a maior parte delas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Sopa de letrinhas
ndash HTML x XHTML x HTML5
ndash CSS1 2 3
ndash JS 2x 30
ndash DOM 1 2
ndash AJAX
ndash JSONXML
ndash PHP 5 7
bull Navegadores
ndash Quaisquer Recentes
Conteuacutedo (estrutura)
Visual (cores e layout)
Estrutura Interna (memoacuteria)
Transferecircncia de Dados
Representaccedilatildeo de Dados
Processamento (accedilotildees)
Processamento no Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Estudaremos no Curso
ndash HTML5 HyperText Markup Language
bull Linguagem de Marcaccedilatildeo
ndash CSS3 Cascade Style Sheets
bull Folhas de Estilo
ndash DOM (brevemente) Document Object Model
bull Estrutura interna de um documento
ndash JS JavaScript
bull Accedilotildees do lado do cliente
ndash PHP PHP is a Hypertext Preprocessor
bull Tarefas do lado do servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Por que separar as accedilotildees
bull Cliente Navegador ldquoFront-endrdquo
ndash Processamento da interface
bull Servidor ldquoBack-endrdquo
ndash Armazena dados e estados
ndash Gerencia processos mais sensiacuteveis
bull Consequecircncia
ndash Necessidade de comunicaccedilatildeo Cliente-Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Plano de Ensino
Disponiacutevel no SIA
1 Entre na Sala Virtual
2 Clique no NOME DA DISCIPLINA
3 Clique em PLANO DE ENSINO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Plano de Aula
bull 2008 ndash 1 Apresentaccedilatildeo
bull 2708 ndash 2 Listas e Tabelas
bull 0309 ndash 3 Formulaacuterios
bull 1009 ndash 4 CSS Baacutesico
bull 1709 ndash 5 CSS Responsivo
bull 2409 ndash 6 JavaScript Baacutesico
bull 0110 ndash 7a JS Decisatildeo
bull 0810 ndash P1
bull 1510 ndash [ Dia do Professor ]
bull 2210 ndash 7b JS Repeticcedilatildeo
bull 2910 ndash 8 JS Matrizes
bull 0511 ndash 9 AJAX e JSON
bull 1211 ndash 10 PHP Baacutesico
bull 1911 ndash 11 PHP com BD
bull 2611 ndash P2
bull 0312 ndash Vista da P2
bull 1012 ndash P3
bull 1712 ndash Encerramento
Aula digital data eacute sugestatildeo pode ser realizada antes
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Como Estudar
bull Ateacute o fim do ensino meacutedio ndash Professor apresenta os conteuacutedos completos
ndash Teoria-praacutetica satildeo exercitadas todas as situaccedilotildees em sala
ndash Alunos estudam apoacutes a aula repetindo exerciacutecios
bull E na faculdade ndash O procedimento do ensino meacutedio natildeo eacute eficiente
ndash Alunos estudam antes da aula os conteuacutedos
ndash Conjunto na aula discutem o conteuacutedo diante de uma situaccedilatildeo-problema
ndash Professor organiza os conceitos principais do conteuacutedo
ndash Teoria-praacutetica exercitadas situaccedilotildees relevantes em sala
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Disciplina Presencial + Digital
bull Como funciona ndash Aluno se prepara entre as aulas conhece a teoria
bull Viacutedeos textos desafios
ndash Na aula discussatildeo e complemento do conteuacutedo
ndash Na aula teoria-praacutetica com atividades participativas
bull Como eacute a preparaccedilatildeo semanal ndash Varia muito de acordo com o conteuacutedo Mas
ndash Toda semana seratildeo passadas atividades bull Conteuacutedo para absorver e analisar
bull Complementado por um desafio sobre o conteuacutedo
ndash Algumas aulas tecircm bastante conteuacutedo digital bull Esse conteuacutedo seraacute discutido em sala e cai em prova
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TRABALHOS DATAS E CRITEacuteRIO DE APROVACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Trabalho Valor CH Data
Desafios ateacute Aula 06 20 na AV1 2h Quarta (Web)
Desafios apoacutes Aula 06 20 na AV2 2h Quarta (Web)
Avaliaccedilatildeo P1 + Projeto Parte 1 80 na AV1 2h 0810 (Aula)
Avaliaccedilatildeo P2 + Projeto Parte 2 80 na AV2 2h 2611 (Aula)
Avaliaccedilatildeo P3 + Projeto Parte 3 100 na AV3 2h 1012 (Aula)
Trabalhos Datas e Aprovaccedilatildeo
Os desafios seratildeo sempre postados aqui httpspadletcomdjcaetanodesweb
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV1
AV1 = T1 + P1 + S1
00 a 80
00 a 100
00 a 20
bull T1 nota que varia de 00 a 20
bull P1 nota obtida na Avaliaccedilatildeo 1 + Projeto 1
bull S1 nota do Simulado AV1 (de 1708 a 2808)
00 a 20
Avaliaccedilatildeo httpssimuladoestaciobralunos
Informaccedilotildees httpsportalestaciobrsimuladoAV1
Se houver
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV1
bull Fiquei com AV1 lt 40
bull Pode ser que tenha Nova Chance (Nota AVR) ndash Agendar 1410 a 2210 Executar 1510 a 2410
AV1 =( T1 + P1 + S1 + AVR)2
00 a 80
00 a 100
00 a 20 00 a 20 00 a 100
Informaccedilotildees httpsportalestaciobrnovachance
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV2
AV2 = T2 + P2
00 a 80
00 a 100
00 a 20
bull T2 nota que varia de 00 a 20
bull P2 nota obtida na Avaliaccedilatildeo 2 + Projeto 2
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV3 bull P3 eacute a nota obtida na Avaliaccedilatildeo 3 + Projeto 3
bull AVA eacute a nota do Avaliando o Aprendizado
bull Se tiver passado e quiser fazer a avaliaccedilatildeo 3 para melhorar nota solicite ateacute uma semana antes
bull Mesmo natildeo precisando AV3 eacute cobrada a presenccedila
AV3 = P3 + AVA
00 a 100
00 a 100
00 a 20
Se houver
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Avaliando o Aprendizado
bull Quatro Simulados 5 questotildees cada ndash Cada questatildeo vale 01 na AV3 (se resposta for correta)
ndash Ateacute 20 pontos na AV3
ndash Moacutedulo 1 0409~
ndash Moacutedulo 2 2409~
ndash Moacutedulo 3 0810~
ndash Moacutedulo 4 2310~
ndash Terminar ateacute 0311
Avaliaccedilatildeo httpssimuladoestaciobralunos
Informaccedilotildees httpsportalestaciobravaliandoaprendizado
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Prepara AV1 e Prepara AV2
bull Aulas complementares de apoio ndash AV1 0310 ndash Aula ONLINE com hora predefinida
ndash AV2 2111 ndash Aula ONLINE com hora predefinida
bull Podem ser uacuteteis
ndash Introduccedilatildeo agrave Programaccedilatildeo
httppreparaestaciobrpresencial
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Criteacuterio de Aprovaccedilatildeo A = Maior nota entre AV1 AV2 AV3 B = Segunda maior nota entre AV1 AV2 AV3
Criteacuterios de Aprovaccedilatildeo (TODOS precisam ser atendidos)
1) A ge 40 2) B ge 40 3) A + B ge 120 (Meacutedia 60)
4) Frequecircncia ge 75 (No maacuteximo 4 faltas)
Inclui AV3 e vistas de prova Evite faltar e saia de feacuterias mais cedo
ATENCcedilAtildeO Se vocecirc tiver mais que uma nota abaixo de 40 ainda que o SIA aponte uma meacutedia maior que 60 vocecirc estaraacute REPROVADO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
BIBLIOGRAFIA E FONTES DE INFORMACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Baacutesica bull Livros Texto
ndash HTML 5 ndash Guia Praacutetico ndash TERUEL bull Disponiacutevel no Minha Biblioteca (ISBN 9788536519296)
ndash Desenvolvimento de Software II Introduccedilatildeo ao Desenv Web com HTML CSS JavaScript e PHP ndash MILETTO bull Disponiacutevel no Minha Biblioteca (ISBN 9788582601969)
ndash Refatorando HTML - Como Melhorar o Projeto de Aplicaccedilotildees Existentes ndash HAROLD bull Disponiacutevel no Minha Biblioteca (ISBN 9788577806706)
ndash JavaScript O Guia Definitivo ndash FLANAGAN bull Disponiacutevel no Minha Biblioteca (ISBN 9788565837484)
ndash PHP 5 - Conceitos Programaccedilatildeo e Integraccedilatildeo com Banco de Dados ndash SOARES bull Disponiacutevel no Minha Biblioteca (ISBN 9788536505633)
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Complementar
bull Material do Curso ndash Tecnologias Web (1ordf Ediccedilatildeo 2015)
bull Rodrigo Plotze (Disponiacutevel no SIA)
ndash Entre na disciplina e clique em ldquoMaterial Didaacuteticordquo
bull Livros Adicional ndash Ajax Rich Internet Applicationa e Desenvolvimento para
Web para Programadores bull Deitel amp Deitel Pearson 2009
ndash Disponiacutevel na Biblioteca Virtual
ndash Haacute outros no plano de ensino
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Adicional
bull Outros Livros Interessante na Biblioteca Virtual
ndash Aprenda a Criar Paacuteginas Web com HTML e XHTML
ndash HTML 5 Embarque Imediato
ndash Canvas HTML 5 Composiccedilatildeo Graacutefica e Interat na Web
ndash Desenvolvimento de Jogos em HTMl 5
bull Haacute muita coisa na internet
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Aula
bull Apresentaccedilotildees e outros itens de estudo
httpswwwcaetanoengbr
bull Selecione o anosemestre atual
bull Clique no nome da disciplina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Estudo
bull Conteuacutedo e atividades de preparaccedilatildeo
httpspadletcomdjcaetanodesweb
ATENCcedilAtildeO As postagens mais novas estaratildeo agrave esquerda
Aula NN Aprenda Mais
Poacutes Aula NN Material
Poacutes Aula NN Desafio
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia da Aula
Material Acesso ao Material
Apresentaccedilatildeo httpswwwcaetanoengbr (Desenvolvimento Web ndash Aula 1)
Livro Texto TERUEL paacuteginas 16 a 24
Aprenda Mais bull Referecircncia Elementos do HTML 5 httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PAacuteGINAS E APLICACcedilOtildeES COM TECNOLOGIA WEB
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Qual a diferenccedila entre eles
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees httpseditormethodac
HTML+CSS+JS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees docsgooglecom
HTML+CSS+JS+Java
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees
HTML+CSS+JS - DosBox
httpscodepenionodwspenVWOLPZ
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
RAacutePIDO HISTOacuteRICO
O QUE Eacute A INTERNET
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Origens
bull Redes locais x Inter-net
bull Diferenccedila importante
ndash Organizaccedilatildeo do traacutefego de dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Internet Comunicaccedilatildeo Hieraacuterquica
MAC Origem MAC Destino
IP Origem IP Destino
Dados
MAC Origem MAC Destino
IP Origem IP Destino
Controle de Transmissatildeo Dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Protocolos Caminho dos Dados
Call of Duty
TCP
IP
Fiacutesico
IP
TCP
Call of Duty
Cliente Servidor
IP 2002011004 IP 210212478
codactivisioncom
Domain Name System
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PROTOCOLO DE COMUNICACcedilAtildeO DA WEB
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O que eacute a World Wide Web
bull Chrome Firefox Edge Safari Opera
ndash Satildeo Navegadores
bull Eles acessam conteuacutedo de um servidor
ndash Apache Nginx IIS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Web Server x Navegador
bull Comunicaccedilatildeo por meio do HTTP
bull HTTP significa HyperText Transfer Protocol
ndash Especificado por Tim Berners-Lee em 1990
ndash Transmitir documentos hipertexto
Requisiccedilatildeo
Resposta
Me daacute a paacutegina indexhtml
404 ndash A paacutegina natildeo existe
httpwwwmeuservidorcomindexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Navegaccedilatildeo Segura
bull Comunicaccedilatildeo por meio do HTTPS
bull HTTP + TLS (Transport Layer Security)
ndash Criptografa as informaccedilotildees ponto-a-ponto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TECNOLOGIAS PARA A WEB HTML CSS
JAVASCRIPT PHP
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias para a Web
bull PaacuteginaAplicaccedilatildeo Web
ndash Conteuacutedo
ndash Forma
ndash Accedilotildees (cliente)
ndash Accedilotildees (servidor)
bull Cada parte
ndash Desenvolvida com tecnologias proacuteprias
bull Navegadores
ndash Compreendem a maior parte delas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Sopa de letrinhas
ndash HTML x XHTML x HTML5
ndash CSS1 2 3
ndash JS 2x 30
ndash DOM 1 2
ndash AJAX
ndash JSONXML
ndash PHP 5 7
bull Navegadores
ndash Quaisquer Recentes
Conteuacutedo (estrutura)
Visual (cores e layout)
Estrutura Interna (memoacuteria)
Transferecircncia de Dados
Representaccedilatildeo de Dados
Processamento (accedilotildees)
Processamento no Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Estudaremos no Curso
ndash HTML5 HyperText Markup Language
bull Linguagem de Marcaccedilatildeo
ndash CSS3 Cascade Style Sheets
bull Folhas de Estilo
ndash DOM (brevemente) Document Object Model
bull Estrutura interna de um documento
ndash JS JavaScript
bull Accedilotildees do lado do cliente
ndash PHP PHP is a Hypertext Preprocessor
bull Tarefas do lado do servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Por que separar as accedilotildees
bull Cliente Navegador ldquoFront-endrdquo
ndash Processamento da interface
bull Servidor ldquoBack-endrdquo
ndash Armazena dados e estados
ndash Gerencia processos mais sensiacuteveis
bull Consequecircncia
ndash Necessidade de comunicaccedilatildeo Cliente-Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Plano de Aula
bull 2008 ndash 1 Apresentaccedilatildeo
bull 2708 ndash 2 Listas e Tabelas
bull 0309 ndash 3 Formulaacuterios
bull 1009 ndash 4 CSS Baacutesico
bull 1709 ndash 5 CSS Responsivo
bull 2409 ndash 6 JavaScript Baacutesico
bull 0110 ndash 7a JS Decisatildeo
bull 0810 ndash P1
bull 1510 ndash [ Dia do Professor ]
bull 2210 ndash 7b JS Repeticcedilatildeo
bull 2910 ndash 8 JS Matrizes
bull 0511 ndash 9 AJAX e JSON
bull 1211 ndash 10 PHP Baacutesico
bull 1911 ndash 11 PHP com BD
bull 2611 ndash P2
bull 0312 ndash Vista da P2
bull 1012 ndash P3
bull 1712 ndash Encerramento
Aula digital data eacute sugestatildeo pode ser realizada antes
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Como Estudar
bull Ateacute o fim do ensino meacutedio ndash Professor apresenta os conteuacutedos completos
ndash Teoria-praacutetica satildeo exercitadas todas as situaccedilotildees em sala
ndash Alunos estudam apoacutes a aula repetindo exerciacutecios
bull E na faculdade ndash O procedimento do ensino meacutedio natildeo eacute eficiente
ndash Alunos estudam antes da aula os conteuacutedos
ndash Conjunto na aula discutem o conteuacutedo diante de uma situaccedilatildeo-problema
ndash Professor organiza os conceitos principais do conteuacutedo
ndash Teoria-praacutetica exercitadas situaccedilotildees relevantes em sala
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Disciplina Presencial + Digital
bull Como funciona ndash Aluno se prepara entre as aulas conhece a teoria
bull Viacutedeos textos desafios
ndash Na aula discussatildeo e complemento do conteuacutedo
ndash Na aula teoria-praacutetica com atividades participativas
bull Como eacute a preparaccedilatildeo semanal ndash Varia muito de acordo com o conteuacutedo Mas
ndash Toda semana seratildeo passadas atividades bull Conteuacutedo para absorver e analisar
bull Complementado por um desafio sobre o conteuacutedo
ndash Algumas aulas tecircm bastante conteuacutedo digital bull Esse conteuacutedo seraacute discutido em sala e cai em prova
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TRABALHOS DATAS E CRITEacuteRIO DE APROVACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Trabalho Valor CH Data
Desafios ateacute Aula 06 20 na AV1 2h Quarta (Web)
Desafios apoacutes Aula 06 20 na AV2 2h Quarta (Web)
Avaliaccedilatildeo P1 + Projeto Parte 1 80 na AV1 2h 0810 (Aula)
Avaliaccedilatildeo P2 + Projeto Parte 2 80 na AV2 2h 2611 (Aula)
Avaliaccedilatildeo P3 + Projeto Parte 3 100 na AV3 2h 1012 (Aula)
Trabalhos Datas e Aprovaccedilatildeo
Os desafios seratildeo sempre postados aqui httpspadletcomdjcaetanodesweb
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV1
AV1 = T1 + P1 + S1
00 a 80
00 a 100
00 a 20
bull T1 nota que varia de 00 a 20
bull P1 nota obtida na Avaliaccedilatildeo 1 + Projeto 1
bull S1 nota do Simulado AV1 (de 1708 a 2808)
00 a 20
Avaliaccedilatildeo httpssimuladoestaciobralunos
Informaccedilotildees httpsportalestaciobrsimuladoAV1
Se houver
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV1
bull Fiquei com AV1 lt 40
bull Pode ser que tenha Nova Chance (Nota AVR) ndash Agendar 1410 a 2210 Executar 1510 a 2410
AV1 =( T1 + P1 + S1 + AVR)2
00 a 80
00 a 100
00 a 20 00 a 20 00 a 100
Informaccedilotildees httpsportalestaciobrnovachance
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV2
AV2 = T2 + P2
00 a 80
00 a 100
00 a 20
bull T2 nota que varia de 00 a 20
bull P2 nota obtida na Avaliaccedilatildeo 2 + Projeto 2
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV3 bull P3 eacute a nota obtida na Avaliaccedilatildeo 3 + Projeto 3
bull AVA eacute a nota do Avaliando o Aprendizado
bull Se tiver passado e quiser fazer a avaliaccedilatildeo 3 para melhorar nota solicite ateacute uma semana antes
bull Mesmo natildeo precisando AV3 eacute cobrada a presenccedila
AV3 = P3 + AVA
00 a 100
00 a 100
00 a 20
Se houver
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Avaliando o Aprendizado
bull Quatro Simulados 5 questotildees cada ndash Cada questatildeo vale 01 na AV3 (se resposta for correta)
ndash Ateacute 20 pontos na AV3
ndash Moacutedulo 1 0409~
ndash Moacutedulo 2 2409~
ndash Moacutedulo 3 0810~
ndash Moacutedulo 4 2310~
ndash Terminar ateacute 0311
Avaliaccedilatildeo httpssimuladoestaciobralunos
Informaccedilotildees httpsportalestaciobravaliandoaprendizado
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Prepara AV1 e Prepara AV2
bull Aulas complementares de apoio ndash AV1 0310 ndash Aula ONLINE com hora predefinida
ndash AV2 2111 ndash Aula ONLINE com hora predefinida
bull Podem ser uacuteteis
ndash Introduccedilatildeo agrave Programaccedilatildeo
httppreparaestaciobrpresencial
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Criteacuterio de Aprovaccedilatildeo A = Maior nota entre AV1 AV2 AV3 B = Segunda maior nota entre AV1 AV2 AV3
Criteacuterios de Aprovaccedilatildeo (TODOS precisam ser atendidos)
1) A ge 40 2) B ge 40 3) A + B ge 120 (Meacutedia 60)
4) Frequecircncia ge 75 (No maacuteximo 4 faltas)
Inclui AV3 e vistas de prova Evite faltar e saia de feacuterias mais cedo
ATENCcedilAtildeO Se vocecirc tiver mais que uma nota abaixo de 40 ainda que o SIA aponte uma meacutedia maior que 60 vocecirc estaraacute REPROVADO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
BIBLIOGRAFIA E FONTES DE INFORMACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Baacutesica bull Livros Texto
ndash HTML 5 ndash Guia Praacutetico ndash TERUEL bull Disponiacutevel no Minha Biblioteca (ISBN 9788536519296)
ndash Desenvolvimento de Software II Introduccedilatildeo ao Desenv Web com HTML CSS JavaScript e PHP ndash MILETTO bull Disponiacutevel no Minha Biblioteca (ISBN 9788582601969)
ndash Refatorando HTML - Como Melhorar o Projeto de Aplicaccedilotildees Existentes ndash HAROLD bull Disponiacutevel no Minha Biblioteca (ISBN 9788577806706)
ndash JavaScript O Guia Definitivo ndash FLANAGAN bull Disponiacutevel no Minha Biblioteca (ISBN 9788565837484)
ndash PHP 5 - Conceitos Programaccedilatildeo e Integraccedilatildeo com Banco de Dados ndash SOARES bull Disponiacutevel no Minha Biblioteca (ISBN 9788536505633)
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Complementar
bull Material do Curso ndash Tecnologias Web (1ordf Ediccedilatildeo 2015)
bull Rodrigo Plotze (Disponiacutevel no SIA)
ndash Entre na disciplina e clique em ldquoMaterial Didaacuteticordquo
bull Livros Adicional ndash Ajax Rich Internet Applicationa e Desenvolvimento para
Web para Programadores bull Deitel amp Deitel Pearson 2009
ndash Disponiacutevel na Biblioteca Virtual
ndash Haacute outros no plano de ensino
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Adicional
bull Outros Livros Interessante na Biblioteca Virtual
ndash Aprenda a Criar Paacuteginas Web com HTML e XHTML
ndash HTML 5 Embarque Imediato
ndash Canvas HTML 5 Composiccedilatildeo Graacutefica e Interat na Web
ndash Desenvolvimento de Jogos em HTMl 5
bull Haacute muita coisa na internet
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Aula
bull Apresentaccedilotildees e outros itens de estudo
httpswwwcaetanoengbr
bull Selecione o anosemestre atual
bull Clique no nome da disciplina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Estudo
bull Conteuacutedo e atividades de preparaccedilatildeo
httpspadletcomdjcaetanodesweb
ATENCcedilAtildeO As postagens mais novas estaratildeo agrave esquerda
Aula NN Aprenda Mais
Poacutes Aula NN Material
Poacutes Aula NN Desafio
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia da Aula
Material Acesso ao Material
Apresentaccedilatildeo httpswwwcaetanoengbr (Desenvolvimento Web ndash Aula 1)
Livro Texto TERUEL paacuteginas 16 a 24
Aprenda Mais bull Referecircncia Elementos do HTML 5 httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PAacuteGINAS E APLICACcedilOtildeES COM TECNOLOGIA WEB
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Qual a diferenccedila entre eles
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees httpseditormethodac
HTML+CSS+JS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees docsgooglecom
HTML+CSS+JS+Java
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees
HTML+CSS+JS - DosBox
httpscodepenionodwspenVWOLPZ
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
RAacutePIDO HISTOacuteRICO
O QUE Eacute A INTERNET
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Origens
bull Redes locais x Inter-net
bull Diferenccedila importante
ndash Organizaccedilatildeo do traacutefego de dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Internet Comunicaccedilatildeo Hieraacuterquica
MAC Origem MAC Destino
IP Origem IP Destino
Dados
MAC Origem MAC Destino
IP Origem IP Destino
Controle de Transmissatildeo Dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Protocolos Caminho dos Dados
Call of Duty
TCP
IP
Fiacutesico
IP
TCP
Call of Duty
Cliente Servidor
IP 2002011004 IP 210212478
codactivisioncom
Domain Name System
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PROTOCOLO DE COMUNICACcedilAtildeO DA WEB
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O que eacute a World Wide Web
bull Chrome Firefox Edge Safari Opera
ndash Satildeo Navegadores
bull Eles acessam conteuacutedo de um servidor
ndash Apache Nginx IIS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Web Server x Navegador
bull Comunicaccedilatildeo por meio do HTTP
bull HTTP significa HyperText Transfer Protocol
ndash Especificado por Tim Berners-Lee em 1990
ndash Transmitir documentos hipertexto
Requisiccedilatildeo
Resposta
Me daacute a paacutegina indexhtml
404 ndash A paacutegina natildeo existe
httpwwwmeuservidorcomindexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Navegaccedilatildeo Segura
bull Comunicaccedilatildeo por meio do HTTPS
bull HTTP + TLS (Transport Layer Security)
ndash Criptografa as informaccedilotildees ponto-a-ponto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TECNOLOGIAS PARA A WEB HTML CSS
JAVASCRIPT PHP
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias para a Web
bull PaacuteginaAplicaccedilatildeo Web
ndash Conteuacutedo
ndash Forma
ndash Accedilotildees (cliente)
ndash Accedilotildees (servidor)
bull Cada parte
ndash Desenvolvida com tecnologias proacuteprias
bull Navegadores
ndash Compreendem a maior parte delas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Sopa de letrinhas
ndash HTML x XHTML x HTML5
ndash CSS1 2 3
ndash JS 2x 30
ndash DOM 1 2
ndash AJAX
ndash JSONXML
ndash PHP 5 7
bull Navegadores
ndash Quaisquer Recentes
Conteuacutedo (estrutura)
Visual (cores e layout)
Estrutura Interna (memoacuteria)
Transferecircncia de Dados
Representaccedilatildeo de Dados
Processamento (accedilotildees)
Processamento no Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Estudaremos no Curso
ndash HTML5 HyperText Markup Language
bull Linguagem de Marcaccedilatildeo
ndash CSS3 Cascade Style Sheets
bull Folhas de Estilo
ndash DOM (brevemente) Document Object Model
bull Estrutura interna de um documento
ndash JS JavaScript
bull Accedilotildees do lado do cliente
ndash PHP PHP is a Hypertext Preprocessor
bull Tarefas do lado do servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Por que separar as accedilotildees
bull Cliente Navegador ldquoFront-endrdquo
ndash Processamento da interface
bull Servidor ldquoBack-endrdquo
ndash Armazena dados e estados
ndash Gerencia processos mais sensiacuteveis
bull Consequecircncia
ndash Necessidade de comunicaccedilatildeo Cliente-Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Como Estudar
bull Ateacute o fim do ensino meacutedio ndash Professor apresenta os conteuacutedos completos
ndash Teoria-praacutetica satildeo exercitadas todas as situaccedilotildees em sala
ndash Alunos estudam apoacutes a aula repetindo exerciacutecios
bull E na faculdade ndash O procedimento do ensino meacutedio natildeo eacute eficiente
ndash Alunos estudam antes da aula os conteuacutedos
ndash Conjunto na aula discutem o conteuacutedo diante de uma situaccedilatildeo-problema
ndash Professor organiza os conceitos principais do conteuacutedo
ndash Teoria-praacutetica exercitadas situaccedilotildees relevantes em sala
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Disciplina Presencial + Digital
bull Como funciona ndash Aluno se prepara entre as aulas conhece a teoria
bull Viacutedeos textos desafios
ndash Na aula discussatildeo e complemento do conteuacutedo
ndash Na aula teoria-praacutetica com atividades participativas
bull Como eacute a preparaccedilatildeo semanal ndash Varia muito de acordo com o conteuacutedo Mas
ndash Toda semana seratildeo passadas atividades bull Conteuacutedo para absorver e analisar
bull Complementado por um desafio sobre o conteuacutedo
ndash Algumas aulas tecircm bastante conteuacutedo digital bull Esse conteuacutedo seraacute discutido em sala e cai em prova
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TRABALHOS DATAS E CRITEacuteRIO DE APROVACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Trabalho Valor CH Data
Desafios ateacute Aula 06 20 na AV1 2h Quarta (Web)
Desafios apoacutes Aula 06 20 na AV2 2h Quarta (Web)
Avaliaccedilatildeo P1 + Projeto Parte 1 80 na AV1 2h 0810 (Aula)
Avaliaccedilatildeo P2 + Projeto Parte 2 80 na AV2 2h 2611 (Aula)
Avaliaccedilatildeo P3 + Projeto Parte 3 100 na AV3 2h 1012 (Aula)
Trabalhos Datas e Aprovaccedilatildeo
Os desafios seratildeo sempre postados aqui httpspadletcomdjcaetanodesweb
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV1
AV1 = T1 + P1 + S1
00 a 80
00 a 100
00 a 20
bull T1 nota que varia de 00 a 20
bull P1 nota obtida na Avaliaccedilatildeo 1 + Projeto 1
bull S1 nota do Simulado AV1 (de 1708 a 2808)
00 a 20
Avaliaccedilatildeo httpssimuladoestaciobralunos
Informaccedilotildees httpsportalestaciobrsimuladoAV1
Se houver
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV1
bull Fiquei com AV1 lt 40
bull Pode ser que tenha Nova Chance (Nota AVR) ndash Agendar 1410 a 2210 Executar 1510 a 2410
AV1 =( T1 + P1 + S1 + AVR)2
00 a 80
00 a 100
00 a 20 00 a 20 00 a 100
Informaccedilotildees httpsportalestaciobrnovachance
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV2
AV2 = T2 + P2
00 a 80
00 a 100
00 a 20
bull T2 nota que varia de 00 a 20
bull P2 nota obtida na Avaliaccedilatildeo 2 + Projeto 2
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV3 bull P3 eacute a nota obtida na Avaliaccedilatildeo 3 + Projeto 3
bull AVA eacute a nota do Avaliando o Aprendizado
bull Se tiver passado e quiser fazer a avaliaccedilatildeo 3 para melhorar nota solicite ateacute uma semana antes
bull Mesmo natildeo precisando AV3 eacute cobrada a presenccedila
AV3 = P3 + AVA
00 a 100
00 a 100
00 a 20
Se houver
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Avaliando o Aprendizado
bull Quatro Simulados 5 questotildees cada ndash Cada questatildeo vale 01 na AV3 (se resposta for correta)
ndash Ateacute 20 pontos na AV3
ndash Moacutedulo 1 0409~
ndash Moacutedulo 2 2409~
ndash Moacutedulo 3 0810~
ndash Moacutedulo 4 2310~
ndash Terminar ateacute 0311
Avaliaccedilatildeo httpssimuladoestaciobralunos
Informaccedilotildees httpsportalestaciobravaliandoaprendizado
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Prepara AV1 e Prepara AV2
bull Aulas complementares de apoio ndash AV1 0310 ndash Aula ONLINE com hora predefinida
ndash AV2 2111 ndash Aula ONLINE com hora predefinida
bull Podem ser uacuteteis
ndash Introduccedilatildeo agrave Programaccedilatildeo
httppreparaestaciobrpresencial
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Criteacuterio de Aprovaccedilatildeo A = Maior nota entre AV1 AV2 AV3 B = Segunda maior nota entre AV1 AV2 AV3
Criteacuterios de Aprovaccedilatildeo (TODOS precisam ser atendidos)
1) A ge 40 2) B ge 40 3) A + B ge 120 (Meacutedia 60)
4) Frequecircncia ge 75 (No maacuteximo 4 faltas)
Inclui AV3 e vistas de prova Evite faltar e saia de feacuterias mais cedo
ATENCcedilAtildeO Se vocecirc tiver mais que uma nota abaixo de 40 ainda que o SIA aponte uma meacutedia maior que 60 vocecirc estaraacute REPROVADO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
BIBLIOGRAFIA E FONTES DE INFORMACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Baacutesica bull Livros Texto
ndash HTML 5 ndash Guia Praacutetico ndash TERUEL bull Disponiacutevel no Minha Biblioteca (ISBN 9788536519296)
ndash Desenvolvimento de Software II Introduccedilatildeo ao Desenv Web com HTML CSS JavaScript e PHP ndash MILETTO bull Disponiacutevel no Minha Biblioteca (ISBN 9788582601969)
ndash Refatorando HTML - Como Melhorar o Projeto de Aplicaccedilotildees Existentes ndash HAROLD bull Disponiacutevel no Minha Biblioteca (ISBN 9788577806706)
ndash JavaScript O Guia Definitivo ndash FLANAGAN bull Disponiacutevel no Minha Biblioteca (ISBN 9788565837484)
ndash PHP 5 - Conceitos Programaccedilatildeo e Integraccedilatildeo com Banco de Dados ndash SOARES bull Disponiacutevel no Minha Biblioteca (ISBN 9788536505633)
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Complementar
bull Material do Curso ndash Tecnologias Web (1ordf Ediccedilatildeo 2015)
bull Rodrigo Plotze (Disponiacutevel no SIA)
ndash Entre na disciplina e clique em ldquoMaterial Didaacuteticordquo
bull Livros Adicional ndash Ajax Rich Internet Applicationa e Desenvolvimento para
Web para Programadores bull Deitel amp Deitel Pearson 2009
ndash Disponiacutevel na Biblioteca Virtual
ndash Haacute outros no plano de ensino
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Adicional
bull Outros Livros Interessante na Biblioteca Virtual
ndash Aprenda a Criar Paacuteginas Web com HTML e XHTML
ndash HTML 5 Embarque Imediato
ndash Canvas HTML 5 Composiccedilatildeo Graacutefica e Interat na Web
ndash Desenvolvimento de Jogos em HTMl 5
bull Haacute muita coisa na internet
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Aula
bull Apresentaccedilotildees e outros itens de estudo
httpswwwcaetanoengbr
bull Selecione o anosemestre atual
bull Clique no nome da disciplina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Estudo
bull Conteuacutedo e atividades de preparaccedilatildeo
httpspadletcomdjcaetanodesweb
ATENCcedilAtildeO As postagens mais novas estaratildeo agrave esquerda
Aula NN Aprenda Mais
Poacutes Aula NN Material
Poacutes Aula NN Desafio
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia da Aula
Material Acesso ao Material
Apresentaccedilatildeo httpswwwcaetanoengbr (Desenvolvimento Web ndash Aula 1)
Livro Texto TERUEL paacuteginas 16 a 24
Aprenda Mais bull Referecircncia Elementos do HTML 5 httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PAacuteGINAS E APLICACcedilOtildeES COM TECNOLOGIA WEB
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Qual a diferenccedila entre eles
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees httpseditormethodac
HTML+CSS+JS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees docsgooglecom
HTML+CSS+JS+Java
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees
HTML+CSS+JS - DosBox
httpscodepenionodwspenVWOLPZ
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
RAacutePIDO HISTOacuteRICO
O QUE Eacute A INTERNET
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Origens
bull Redes locais x Inter-net
bull Diferenccedila importante
ndash Organizaccedilatildeo do traacutefego de dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Internet Comunicaccedilatildeo Hieraacuterquica
MAC Origem MAC Destino
IP Origem IP Destino
Dados
MAC Origem MAC Destino
IP Origem IP Destino
Controle de Transmissatildeo Dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Protocolos Caminho dos Dados
Call of Duty
TCP
IP
Fiacutesico
IP
TCP
Call of Duty
Cliente Servidor
IP 2002011004 IP 210212478
codactivisioncom
Domain Name System
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PROTOCOLO DE COMUNICACcedilAtildeO DA WEB
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O que eacute a World Wide Web
bull Chrome Firefox Edge Safari Opera
ndash Satildeo Navegadores
bull Eles acessam conteuacutedo de um servidor
ndash Apache Nginx IIS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Web Server x Navegador
bull Comunicaccedilatildeo por meio do HTTP
bull HTTP significa HyperText Transfer Protocol
ndash Especificado por Tim Berners-Lee em 1990
ndash Transmitir documentos hipertexto
Requisiccedilatildeo
Resposta
Me daacute a paacutegina indexhtml
404 ndash A paacutegina natildeo existe
httpwwwmeuservidorcomindexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Navegaccedilatildeo Segura
bull Comunicaccedilatildeo por meio do HTTPS
bull HTTP + TLS (Transport Layer Security)
ndash Criptografa as informaccedilotildees ponto-a-ponto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TECNOLOGIAS PARA A WEB HTML CSS
JAVASCRIPT PHP
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias para a Web
bull PaacuteginaAplicaccedilatildeo Web
ndash Conteuacutedo
ndash Forma
ndash Accedilotildees (cliente)
ndash Accedilotildees (servidor)
bull Cada parte
ndash Desenvolvida com tecnologias proacuteprias
bull Navegadores
ndash Compreendem a maior parte delas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Sopa de letrinhas
ndash HTML x XHTML x HTML5
ndash CSS1 2 3
ndash JS 2x 30
ndash DOM 1 2
ndash AJAX
ndash JSONXML
ndash PHP 5 7
bull Navegadores
ndash Quaisquer Recentes
Conteuacutedo (estrutura)
Visual (cores e layout)
Estrutura Interna (memoacuteria)
Transferecircncia de Dados
Representaccedilatildeo de Dados
Processamento (accedilotildees)
Processamento no Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Estudaremos no Curso
ndash HTML5 HyperText Markup Language
bull Linguagem de Marcaccedilatildeo
ndash CSS3 Cascade Style Sheets
bull Folhas de Estilo
ndash DOM (brevemente) Document Object Model
bull Estrutura interna de um documento
ndash JS JavaScript
bull Accedilotildees do lado do cliente
ndash PHP PHP is a Hypertext Preprocessor
bull Tarefas do lado do servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Por que separar as accedilotildees
bull Cliente Navegador ldquoFront-endrdquo
ndash Processamento da interface
bull Servidor ldquoBack-endrdquo
ndash Armazena dados e estados
ndash Gerencia processos mais sensiacuteveis
bull Consequecircncia
ndash Necessidade de comunicaccedilatildeo Cliente-Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Disciplina Presencial + Digital
bull Como funciona ndash Aluno se prepara entre as aulas conhece a teoria
bull Viacutedeos textos desafios
ndash Na aula discussatildeo e complemento do conteuacutedo
ndash Na aula teoria-praacutetica com atividades participativas
bull Como eacute a preparaccedilatildeo semanal ndash Varia muito de acordo com o conteuacutedo Mas
ndash Toda semana seratildeo passadas atividades bull Conteuacutedo para absorver e analisar
bull Complementado por um desafio sobre o conteuacutedo
ndash Algumas aulas tecircm bastante conteuacutedo digital bull Esse conteuacutedo seraacute discutido em sala e cai em prova
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TRABALHOS DATAS E CRITEacuteRIO DE APROVACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Trabalho Valor CH Data
Desafios ateacute Aula 06 20 na AV1 2h Quarta (Web)
Desafios apoacutes Aula 06 20 na AV2 2h Quarta (Web)
Avaliaccedilatildeo P1 + Projeto Parte 1 80 na AV1 2h 0810 (Aula)
Avaliaccedilatildeo P2 + Projeto Parte 2 80 na AV2 2h 2611 (Aula)
Avaliaccedilatildeo P3 + Projeto Parte 3 100 na AV3 2h 1012 (Aula)
Trabalhos Datas e Aprovaccedilatildeo
Os desafios seratildeo sempre postados aqui httpspadletcomdjcaetanodesweb
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV1
AV1 = T1 + P1 + S1
00 a 80
00 a 100
00 a 20
bull T1 nota que varia de 00 a 20
bull P1 nota obtida na Avaliaccedilatildeo 1 + Projeto 1
bull S1 nota do Simulado AV1 (de 1708 a 2808)
00 a 20
Avaliaccedilatildeo httpssimuladoestaciobralunos
Informaccedilotildees httpsportalestaciobrsimuladoAV1
Se houver
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV1
bull Fiquei com AV1 lt 40
bull Pode ser que tenha Nova Chance (Nota AVR) ndash Agendar 1410 a 2210 Executar 1510 a 2410
AV1 =( T1 + P1 + S1 + AVR)2
00 a 80
00 a 100
00 a 20 00 a 20 00 a 100
Informaccedilotildees httpsportalestaciobrnovachance
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV2
AV2 = T2 + P2
00 a 80
00 a 100
00 a 20
bull T2 nota que varia de 00 a 20
bull P2 nota obtida na Avaliaccedilatildeo 2 + Projeto 2
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV3 bull P3 eacute a nota obtida na Avaliaccedilatildeo 3 + Projeto 3
bull AVA eacute a nota do Avaliando o Aprendizado
bull Se tiver passado e quiser fazer a avaliaccedilatildeo 3 para melhorar nota solicite ateacute uma semana antes
bull Mesmo natildeo precisando AV3 eacute cobrada a presenccedila
AV3 = P3 + AVA
00 a 100
00 a 100
00 a 20
Se houver
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Avaliando o Aprendizado
bull Quatro Simulados 5 questotildees cada ndash Cada questatildeo vale 01 na AV3 (se resposta for correta)
ndash Ateacute 20 pontos na AV3
ndash Moacutedulo 1 0409~
ndash Moacutedulo 2 2409~
ndash Moacutedulo 3 0810~
ndash Moacutedulo 4 2310~
ndash Terminar ateacute 0311
Avaliaccedilatildeo httpssimuladoestaciobralunos
Informaccedilotildees httpsportalestaciobravaliandoaprendizado
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Prepara AV1 e Prepara AV2
bull Aulas complementares de apoio ndash AV1 0310 ndash Aula ONLINE com hora predefinida
ndash AV2 2111 ndash Aula ONLINE com hora predefinida
bull Podem ser uacuteteis
ndash Introduccedilatildeo agrave Programaccedilatildeo
httppreparaestaciobrpresencial
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Criteacuterio de Aprovaccedilatildeo A = Maior nota entre AV1 AV2 AV3 B = Segunda maior nota entre AV1 AV2 AV3
Criteacuterios de Aprovaccedilatildeo (TODOS precisam ser atendidos)
1) A ge 40 2) B ge 40 3) A + B ge 120 (Meacutedia 60)
4) Frequecircncia ge 75 (No maacuteximo 4 faltas)
Inclui AV3 e vistas de prova Evite faltar e saia de feacuterias mais cedo
ATENCcedilAtildeO Se vocecirc tiver mais que uma nota abaixo de 40 ainda que o SIA aponte uma meacutedia maior que 60 vocecirc estaraacute REPROVADO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
BIBLIOGRAFIA E FONTES DE INFORMACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Baacutesica bull Livros Texto
ndash HTML 5 ndash Guia Praacutetico ndash TERUEL bull Disponiacutevel no Minha Biblioteca (ISBN 9788536519296)
ndash Desenvolvimento de Software II Introduccedilatildeo ao Desenv Web com HTML CSS JavaScript e PHP ndash MILETTO bull Disponiacutevel no Minha Biblioteca (ISBN 9788582601969)
ndash Refatorando HTML - Como Melhorar o Projeto de Aplicaccedilotildees Existentes ndash HAROLD bull Disponiacutevel no Minha Biblioteca (ISBN 9788577806706)
ndash JavaScript O Guia Definitivo ndash FLANAGAN bull Disponiacutevel no Minha Biblioteca (ISBN 9788565837484)
ndash PHP 5 - Conceitos Programaccedilatildeo e Integraccedilatildeo com Banco de Dados ndash SOARES bull Disponiacutevel no Minha Biblioteca (ISBN 9788536505633)
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Complementar
bull Material do Curso ndash Tecnologias Web (1ordf Ediccedilatildeo 2015)
bull Rodrigo Plotze (Disponiacutevel no SIA)
ndash Entre na disciplina e clique em ldquoMaterial Didaacuteticordquo
bull Livros Adicional ndash Ajax Rich Internet Applicationa e Desenvolvimento para
Web para Programadores bull Deitel amp Deitel Pearson 2009
ndash Disponiacutevel na Biblioteca Virtual
ndash Haacute outros no plano de ensino
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Adicional
bull Outros Livros Interessante na Biblioteca Virtual
ndash Aprenda a Criar Paacuteginas Web com HTML e XHTML
ndash HTML 5 Embarque Imediato
ndash Canvas HTML 5 Composiccedilatildeo Graacutefica e Interat na Web
ndash Desenvolvimento de Jogos em HTMl 5
bull Haacute muita coisa na internet
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Aula
bull Apresentaccedilotildees e outros itens de estudo
httpswwwcaetanoengbr
bull Selecione o anosemestre atual
bull Clique no nome da disciplina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Estudo
bull Conteuacutedo e atividades de preparaccedilatildeo
httpspadletcomdjcaetanodesweb
ATENCcedilAtildeO As postagens mais novas estaratildeo agrave esquerda
Aula NN Aprenda Mais
Poacutes Aula NN Material
Poacutes Aula NN Desafio
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia da Aula
Material Acesso ao Material
Apresentaccedilatildeo httpswwwcaetanoengbr (Desenvolvimento Web ndash Aula 1)
Livro Texto TERUEL paacuteginas 16 a 24
Aprenda Mais bull Referecircncia Elementos do HTML 5 httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PAacuteGINAS E APLICACcedilOtildeES COM TECNOLOGIA WEB
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Qual a diferenccedila entre eles
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees httpseditormethodac
HTML+CSS+JS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees docsgooglecom
HTML+CSS+JS+Java
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees
HTML+CSS+JS - DosBox
httpscodepenionodwspenVWOLPZ
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
RAacutePIDO HISTOacuteRICO
O QUE Eacute A INTERNET
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Origens
bull Redes locais x Inter-net
bull Diferenccedila importante
ndash Organizaccedilatildeo do traacutefego de dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Internet Comunicaccedilatildeo Hieraacuterquica
MAC Origem MAC Destino
IP Origem IP Destino
Dados
MAC Origem MAC Destino
IP Origem IP Destino
Controle de Transmissatildeo Dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Protocolos Caminho dos Dados
Call of Duty
TCP
IP
Fiacutesico
IP
TCP
Call of Duty
Cliente Servidor
IP 2002011004 IP 210212478
codactivisioncom
Domain Name System
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PROTOCOLO DE COMUNICACcedilAtildeO DA WEB
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O que eacute a World Wide Web
bull Chrome Firefox Edge Safari Opera
ndash Satildeo Navegadores
bull Eles acessam conteuacutedo de um servidor
ndash Apache Nginx IIS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Web Server x Navegador
bull Comunicaccedilatildeo por meio do HTTP
bull HTTP significa HyperText Transfer Protocol
ndash Especificado por Tim Berners-Lee em 1990
ndash Transmitir documentos hipertexto
Requisiccedilatildeo
Resposta
Me daacute a paacutegina indexhtml
404 ndash A paacutegina natildeo existe
httpwwwmeuservidorcomindexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Navegaccedilatildeo Segura
bull Comunicaccedilatildeo por meio do HTTPS
bull HTTP + TLS (Transport Layer Security)
ndash Criptografa as informaccedilotildees ponto-a-ponto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TECNOLOGIAS PARA A WEB HTML CSS
JAVASCRIPT PHP
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias para a Web
bull PaacuteginaAplicaccedilatildeo Web
ndash Conteuacutedo
ndash Forma
ndash Accedilotildees (cliente)
ndash Accedilotildees (servidor)
bull Cada parte
ndash Desenvolvida com tecnologias proacuteprias
bull Navegadores
ndash Compreendem a maior parte delas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Sopa de letrinhas
ndash HTML x XHTML x HTML5
ndash CSS1 2 3
ndash JS 2x 30
ndash DOM 1 2
ndash AJAX
ndash JSONXML
ndash PHP 5 7
bull Navegadores
ndash Quaisquer Recentes
Conteuacutedo (estrutura)
Visual (cores e layout)
Estrutura Interna (memoacuteria)
Transferecircncia de Dados
Representaccedilatildeo de Dados
Processamento (accedilotildees)
Processamento no Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Estudaremos no Curso
ndash HTML5 HyperText Markup Language
bull Linguagem de Marcaccedilatildeo
ndash CSS3 Cascade Style Sheets
bull Folhas de Estilo
ndash DOM (brevemente) Document Object Model
bull Estrutura interna de um documento
ndash JS JavaScript
bull Accedilotildees do lado do cliente
ndash PHP PHP is a Hypertext Preprocessor
bull Tarefas do lado do servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Por que separar as accedilotildees
bull Cliente Navegador ldquoFront-endrdquo
ndash Processamento da interface
bull Servidor ldquoBack-endrdquo
ndash Armazena dados e estados
ndash Gerencia processos mais sensiacuteveis
bull Consequecircncia
ndash Necessidade de comunicaccedilatildeo Cliente-Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TRABALHOS DATAS E CRITEacuteRIO DE APROVACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Trabalho Valor CH Data
Desafios ateacute Aula 06 20 na AV1 2h Quarta (Web)
Desafios apoacutes Aula 06 20 na AV2 2h Quarta (Web)
Avaliaccedilatildeo P1 + Projeto Parte 1 80 na AV1 2h 0810 (Aula)
Avaliaccedilatildeo P2 + Projeto Parte 2 80 na AV2 2h 2611 (Aula)
Avaliaccedilatildeo P3 + Projeto Parte 3 100 na AV3 2h 1012 (Aula)
Trabalhos Datas e Aprovaccedilatildeo
Os desafios seratildeo sempre postados aqui httpspadletcomdjcaetanodesweb
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV1
AV1 = T1 + P1 + S1
00 a 80
00 a 100
00 a 20
bull T1 nota que varia de 00 a 20
bull P1 nota obtida na Avaliaccedilatildeo 1 + Projeto 1
bull S1 nota do Simulado AV1 (de 1708 a 2808)
00 a 20
Avaliaccedilatildeo httpssimuladoestaciobralunos
Informaccedilotildees httpsportalestaciobrsimuladoAV1
Se houver
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV1
bull Fiquei com AV1 lt 40
bull Pode ser que tenha Nova Chance (Nota AVR) ndash Agendar 1410 a 2210 Executar 1510 a 2410
AV1 =( T1 + P1 + S1 + AVR)2
00 a 80
00 a 100
00 a 20 00 a 20 00 a 100
Informaccedilotildees httpsportalestaciobrnovachance
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV2
AV2 = T2 + P2
00 a 80
00 a 100
00 a 20
bull T2 nota que varia de 00 a 20
bull P2 nota obtida na Avaliaccedilatildeo 2 + Projeto 2
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV3 bull P3 eacute a nota obtida na Avaliaccedilatildeo 3 + Projeto 3
bull AVA eacute a nota do Avaliando o Aprendizado
bull Se tiver passado e quiser fazer a avaliaccedilatildeo 3 para melhorar nota solicite ateacute uma semana antes
bull Mesmo natildeo precisando AV3 eacute cobrada a presenccedila
AV3 = P3 + AVA
00 a 100
00 a 100
00 a 20
Se houver
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Avaliando o Aprendizado
bull Quatro Simulados 5 questotildees cada ndash Cada questatildeo vale 01 na AV3 (se resposta for correta)
ndash Ateacute 20 pontos na AV3
ndash Moacutedulo 1 0409~
ndash Moacutedulo 2 2409~
ndash Moacutedulo 3 0810~
ndash Moacutedulo 4 2310~
ndash Terminar ateacute 0311
Avaliaccedilatildeo httpssimuladoestaciobralunos
Informaccedilotildees httpsportalestaciobravaliandoaprendizado
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Prepara AV1 e Prepara AV2
bull Aulas complementares de apoio ndash AV1 0310 ndash Aula ONLINE com hora predefinida
ndash AV2 2111 ndash Aula ONLINE com hora predefinida
bull Podem ser uacuteteis
ndash Introduccedilatildeo agrave Programaccedilatildeo
httppreparaestaciobrpresencial
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Criteacuterio de Aprovaccedilatildeo A = Maior nota entre AV1 AV2 AV3 B = Segunda maior nota entre AV1 AV2 AV3
Criteacuterios de Aprovaccedilatildeo (TODOS precisam ser atendidos)
1) A ge 40 2) B ge 40 3) A + B ge 120 (Meacutedia 60)
4) Frequecircncia ge 75 (No maacuteximo 4 faltas)
Inclui AV3 e vistas de prova Evite faltar e saia de feacuterias mais cedo
ATENCcedilAtildeO Se vocecirc tiver mais que uma nota abaixo de 40 ainda que o SIA aponte uma meacutedia maior que 60 vocecirc estaraacute REPROVADO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
BIBLIOGRAFIA E FONTES DE INFORMACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Baacutesica bull Livros Texto
ndash HTML 5 ndash Guia Praacutetico ndash TERUEL bull Disponiacutevel no Minha Biblioteca (ISBN 9788536519296)
ndash Desenvolvimento de Software II Introduccedilatildeo ao Desenv Web com HTML CSS JavaScript e PHP ndash MILETTO bull Disponiacutevel no Minha Biblioteca (ISBN 9788582601969)
ndash Refatorando HTML - Como Melhorar o Projeto de Aplicaccedilotildees Existentes ndash HAROLD bull Disponiacutevel no Minha Biblioteca (ISBN 9788577806706)
ndash JavaScript O Guia Definitivo ndash FLANAGAN bull Disponiacutevel no Minha Biblioteca (ISBN 9788565837484)
ndash PHP 5 - Conceitos Programaccedilatildeo e Integraccedilatildeo com Banco de Dados ndash SOARES bull Disponiacutevel no Minha Biblioteca (ISBN 9788536505633)
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Complementar
bull Material do Curso ndash Tecnologias Web (1ordf Ediccedilatildeo 2015)
bull Rodrigo Plotze (Disponiacutevel no SIA)
ndash Entre na disciplina e clique em ldquoMaterial Didaacuteticordquo
bull Livros Adicional ndash Ajax Rich Internet Applicationa e Desenvolvimento para
Web para Programadores bull Deitel amp Deitel Pearson 2009
ndash Disponiacutevel na Biblioteca Virtual
ndash Haacute outros no plano de ensino
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Adicional
bull Outros Livros Interessante na Biblioteca Virtual
ndash Aprenda a Criar Paacuteginas Web com HTML e XHTML
ndash HTML 5 Embarque Imediato
ndash Canvas HTML 5 Composiccedilatildeo Graacutefica e Interat na Web
ndash Desenvolvimento de Jogos em HTMl 5
bull Haacute muita coisa na internet
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Aula
bull Apresentaccedilotildees e outros itens de estudo
httpswwwcaetanoengbr
bull Selecione o anosemestre atual
bull Clique no nome da disciplina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Estudo
bull Conteuacutedo e atividades de preparaccedilatildeo
httpspadletcomdjcaetanodesweb
ATENCcedilAtildeO As postagens mais novas estaratildeo agrave esquerda
Aula NN Aprenda Mais
Poacutes Aula NN Material
Poacutes Aula NN Desafio
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia da Aula
Material Acesso ao Material
Apresentaccedilatildeo httpswwwcaetanoengbr (Desenvolvimento Web ndash Aula 1)
Livro Texto TERUEL paacuteginas 16 a 24
Aprenda Mais bull Referecircncia Elementos do HTML 5 httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PAacuteGINAS E APLICACcedilOtildeES COM TECNOLOGIA WEB
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Qual a diferenccedila entre eles
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees httpseditormethodac
HTML+CSS+JS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees docsgooglecom
HTML+CSS+JS+Java
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees
HTML+CSS+JS - DosBox
httpscodepenionodwspenVWOLPZ
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
RAacutePIDO HISTOacuteRICO
O QUE Eacute A INTERNET
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Origens
bull Redes locais x Inter-net
bull Diferenccedila importante
ndash Organizaccedilatildeo do traacutefego de dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Internet Comunicaccedilatildeo Hieraacuterquica
MAC Origem MAC Destino
IP Origem IP Destino
Dados
MAC Origem MAC Destino
IP Origem IP Destino
Controle de Transmissatildeo Dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Protocolos Caminho dos Dados
Call of Duty
TCP
IP
Fiacutesico
IP
TCP
Call of Duty
Cliente Servidor
IP 2002011004 IP 210212478
codactivisioncom
Domain Name System
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PROTOCOLO DE COMUNICACcedilAtildeO DA WEB
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O que eacute a World Wide Web
bull Chrome Firefox Edge Safari Opera
ndash Satildeo Navegadores
bull Eles acessam conteuacutedo de um servidor
ndash Apache Nginx IIS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Web Server x Navegador
bull Comunicaccedilatildeo por meio do HTTP
bull HTTP significa HyperText Transfer Protocol
ndash Especificado por Tim Berners-Lee em 1990
ndash Transmitir documentos hipertexto
Requisiccedilatildeo
Resposta
Me daacute a paacutegina indexhtml
404 ndash A paacutegina natildeo existe
httpwwwmeuservidorcomindexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Navegaccedilatildeo Segura
bull Comunicaccedilatildeo por meio do HTTPS
bull HTTP + TLS (Transport Layer Security)
ndash Criptografa as informaccedilotildees ponto-a-ponto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TECNOLOGIAS PARA A WEB HTML CSS
JAVASCRIPT PHP
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias para a Web
bull PaacuteginaAplicaccedilatildeo Web
ndash Conteuacutedo
ndash Forma
ndash Accedilotildees (cliente)
ndash Accedilotildees (servidor)
bull Cada parte
ndash Desenvolvida com tecnologias proacuteprias
bull Navegadores
ndash Compreendem a maior parte delas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Sopa de letrinhas
ndash HTML x XHTML x HTML5
ndash CSS1 2 3
ndash JS 2x 30
ndash DOM 1 2
ndash AJAX
ndash JSONXML
ndash PHP 5 7
bull Navegadores
ndash Quaisquer Recentes
Conteuacutedo (estrutura)
Visual (cores e layout)
Estrutura Interna (memoacuteria)
Transferecircncia de Dados
Representaccedilatildeo de Dados
Processamento (accedilotildees)
Processamento no Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Estudaremos no Curso
ndash HTML5 HyperText Markup Language
bull Linguagem de Marcaccedilatildeo
ndash CSS3 Cascade Style Sheets
bull Folhas de Estilo
ndash DOM (brevemente) Document Object Model
bull Estrutura interna de um documento
ndash JS JavaScript
bull Accedilotildees do lado do cliente
ndash PHP PHP is a Hypertext Preprocessor
bull Tarefas do lado do servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Por que separar as accedilotildees
bull Cliente Navegador ldquoFront-endrdquo
ndash Processamento da interface
bull Servidor ldquoBack-endrdquo
ndash Armazena dados e estados
ndash Gerencia processos mais sensiacuteveis
bull Consequecircncia
ndash Necessidade de comunicaccedilatildeo Cliente-Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Trabalho Valor CH Data
Desafios ateacute Aula 06 20 na AV1 2h Quarta (Web)
Desafios apoacutes Aula 06 20 na AV2 2h Quarta (Web)
Avaliaccedilatildeo P1 + Projeto Parte 1 80 na AV1 2h 0810 (Aula)
Avaliaccedilatildeo P2 + Projeto Parte 2 80 na AV2 2h 2611 (Aula)
Avaliaccedilatildeo P3 + Projeto Parte 3 100 na AV3 2h 1012 (Aula)
Trabalhos Datas e Aprovaccedilatildeo
Os desafios seratildeo sempre postados aqui httpspadletcomdjcaetanodesweb
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV1
AV1 = T1 + P1 + S1
00 a 80
00 a 100
00 a 20
bull T1 nota que varia de 00 a 20
bull P1 nota obtida na Avaliaccedilatildeo 1 + Projeto 1
bull S1 nota do Simulado AV1 (de 1708 a 2808)
00 a 20
Avaliaccedilatildeo httpssimuladoestaciobralunos
Informaccedilotildees httpsportalestaciobrsimuladoAV1
Se houver
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV1
bull Fiquei com AV1 lt 40
bull Pode ser que tenha Nova Chance (Nota AVR) ndash Agendar 1410 a 2210 Executar 1510 a 2410
AV1 =( T1 + P1 + S1 + AVR)2
00 a 80
00 a 100
00 a 20 00 a 20 00 a 100
Informaccedilotildees httpsportalestaciobrnovachance
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV2
AV2 = T2 + P2
00 a 80
00 a 100
00 a 20
bull T2 nota que varia de 00 a 20
bull P2 nota obtida na Avaliaccedilatildeo 2 + Projeto 2
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV3 bull P3 eacute a nota obtida na Avaliaccedilatildeo 3 + Projeto 3
bull AVA eacute a nota do Avaliando o Aprendizado
bull Se tiver passado e quiser fazer a avaliaccedilatildeo 3 para melhorar nota solicite ateacute uma semana antes
bull Mesmo natildeo precisando AV3 eacute cobrada a presenccedila
AV3 = P3 + AVA
00 a 100
00 a 100
00 a 20
Se houver
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Avaliando o Aprendizado
bull Quatro Simulados 5 questotildees cada ndash Cada questatildeo vale 01 na AV3 (se resposta for correta)
ndash Ateacute 20 pontos na AV3
ndash Moacutedulo 1 0409~
ndash Moacutedulo 2 2409~
ndash Moacutedulo 3 0810~
ndash Moacutedulo 4 2310~
ndash Terminar ateacute 0311
Avaliaccedilatildeo httpssimuladoestaciobralunos
Informaccedilotildees httpsportalestaciobravaliandoaprendizado
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Prepara AV1 e Prepara AV2
bull Aulas complementares de apoio ndash AV1 0310 ndash Aula ONLINE com hora predefinida
ndash AV2 2111 ndash Aula ONLINE com hora predefinida
bull Podem ser uacuteteis
ndash Introduccedilatildeo agrave Programaccedilatildeo
httppreparaestaciobrpresencial
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Criteacuterio de Aprovaccedilatildeo A = Maior nota entre AV1 AV2 AV3 B = Segunda maior nota entre AV1 AV2 AV3
Criteacuterios de Aprovaccedilatildeo (TODOS precisam ser atendidos)
1) A ge 40 2) B ge 40 3) A + B ge 120 (Meacutedia 60)
4) Frequecircncia ge 75 (No maacuteximo 4 faltas)
Inclui AV3 e vistas de prova Evite faltar e saia de feacuterias mais cedo
ATENCcedilAtildeO Se vocecirc tiver mais que uma nota abaixo de 40 ainda que o SIA aponte uma meacutedia maior que 60 vocecirc estaraacute REPROVADO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
BIBLIOGRAFIA E FONTES DE INFORMACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Baacutesica bull Livros Texto
ndash HTML 5 ndash Guia Praacutetico ndash TERUEL bull Disponiacutevel no Minha Biblioteca (ISBN 9788536519296)
ndash Desenvolvimento de Software II Introduccedilatildeo ao Desenv Web com HTML CSS JavaScript e PHP ndash MILETTO bull Disponiacutevel no Minha Biblioteca (ISBN 9788582601969)
ndash Refatorando HTML - Como Melhorar o Projeto de Aplicaccedilotildees Existentes ndash HAROLD bull Disponiacutevel no Minha Biblioteca (ISBN 9788577806706)
ndash JavaScript O Guia Definitivo ndash FLANAGAN bull Disponiacutevel no Minha Biblioteca (ISBN 9788565837484)
ndash PHP 5 - Conceitos Programaccedilatildeo e Integraccedilatildeo com Banco de Dados ndash SOARES bull Disponiacutevel no Minha Biblioteca (ISBN 9788536505633)
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Complementar
bull Material do Curso ndash Tecnologias Web (1ordf Ediccedilatildeo 2015)
bull Rodrigo Plotze (Disponiacutevel no SIA)
ndash Entre na disciplina e clique em ldquoMaterial Didaacuteticordquo
bull Livros Adicional ndash Ajax Rich Internet Applicationa e Desenvolvimento para
Web para Programadores bull Deitel amp Deitel Pearson 2009
ndash Disponiacutevel na Biblioteca Virtual
ndash Haacute outros no plano de ensino
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Adicional
bull Outros Livros Interessante na Biblioteca Virtual
ndash Aprenda a Criar Paacuteginas Web com HTML e XHTML
ndash HTML 5 Embarque Imediato
ndash Canvas HTML 5 Composiccedilatildeo Graacutefica e Interat na Web
ndash Desenvolvimento de Jogos em HTMl 5
bull Haacute muita coisa na internet
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Aula
bull Apresentaccedilotildees e outros itens de estudo
httpswwwcaetanoengbr
bull Selecione o anosemestre atual
bull Clique no nome da disciplina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Estudo
bull Conteuacutedo e atividades de preparaccedilatildeo
httpspadletcomdjcaetanodesweb
ATENCcedilAtildeO As postagens mais novas estaratildeo agrave esquerda
Aula NN Aprenda Mais
Poacutes Aula NN Material
Poacutes Aula NN Desafio
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia da Aula
Material Acesso ao Material
Apresentaccedilatildeo httpswwwcaetanoengbr (Desenvolvimento Web ndash Aula 1)
Livro Texto TERUEL paacuteginas 16 a 24
Aprenda Mais bull Referecircncia Elementos do HTML 5 httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PAacuteGINAS E APLICACcedilOtildeES COM TECNOLOGIA WEB
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Qual a diferenccedila entre eles
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees httpseditormethodac
HTML+CSS+JS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees docsgooglecom
HTML+CSS+JS+Java
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees
HTML+CSS+JS - DosBox
httpscodepenionodwspenVWOLPZ
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
RAacutePIDO HISTOacuteRICO
O QUE Eacute A INTERNET
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Origens
bull Redes locais x Inter-net
bull Diferenccedila importante
ndash Organizaccedilatildeo do traacutefego de dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Internet Comunicaccedilatildeo Hieraacuterquica
MAC Origem MAC Destino
IP Origem IP Destino
Dados
MAC Origem MAC Destino
IP Origem IP Destino
Controle de Transmissatildeo Dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Protocolos Caminho dos Dados
Call of Duty
TCP
IP
Fiacutesico
IP
TCP
Call of Duty
Cliente Servidor
IP 2002011004 IP 210212478
codactivisioncom
Domain Name System
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PROTOCOLO DE COMUNICACcedilAtildeO DA WEB
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O que eacute a World Wide Web
bull Chrome Firefox Edge Safari Opera
ndash Satildeo Navegadores
bull Eles acessam conteuacutedo de um servidor
ndash Apache Nginx IIS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Web Server x Navegador
bull Comunicaccedilatildeo por meio do HTTP
bull HTTP significa HyperText Transfer Protocol
ndash Especificado por Tim Berners-Lee em 1990
ndash Transmitir documentos hipertexto
Requisiccedilatildeo
Resposta
Me daacute a paacutegina indexhtml
404 ndash A paacutegina natildeo existe
httpwwwmeuservidorcomindexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Navegaccedilatildeo Segura
bull Comunicaccedilatildeo por meio do HTTPS
bull HTTP + TLS (Transport Layer Security)
ndash Criptografa as informaccedilotildees ponto-a-ponto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TECNOLOGIAS PARA A WEB HTML CSS
JAVASCRIPT PHP
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias para a Web
bull PaacuteginaAplicaccedilatildeo Web
ndash Conteuacutedo
ndash Forma
ndash Accedilotildees (cliente)
ndash Accedilotildees (servidor)
bull Cada parte
ndash Desenvolvida com tecnologias proacuteprias
bull Navegadores
ndash Compreendem a maior parte delas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Sopa de letrinhas
ndash HTML x XHTML x HTML5
ndash CSS1 2 3
ndash JS 2x 30
ndash DOM 1 2
ndash AJAX
ndash JSONXML
ndash PHP 5 7
bull Navegadores
ndash Quaisquer Recentes
Conteuacutedo (estrutura)
Visual (cores e layout)
Estrutura Interna (memoacuteria)
Transferecircncia de Dados
Representaccedilatildeo de Dados
Processamento (accedilotildees)
Processamento no Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Estudaremos no Curso
ndash HTML5 HyperText Markup Language
bull Linguagem de Marcaccedilatildeo
ndash CSS3 Cascade Style Sheets
bull Folhas de Estilo
ndash DOM (brevemente) Document Object Model
bull Estrutura interna de um documento
ndash JS JavaScript
bull Accedilotildees do lado do cliente
ndash PHP PHP is a Hypertext Preprocessor
bull Tarefas do lado do servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Por que separar as accedilotildees
bull Cliente Navegador ldquoFront-endrdquo
ndash Processamento da interface
bull Servidor ldquoBack-endrdquo
ndash Armazena dados e estados
ndash Gerencia processos mais sensiacuteveis
bull Consequecircncia
ndash Necessidade de comunicaccedilatildeo Cliente-Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV1
AV1 = T1 + P1 + S1
00 a 80
00 a 100
00 a 20
bull T1 nota que varia de 00 a 20
bull P1 nota obtida na Avaliaccedilatildeo 1 + Projeto 1
bull S1 nota do Simulado AV1 (de 1708 a 2808)
00 a 20
Avaliaccedilatildeo httpssimuladoestaciobralunos
Informaccedilotildees httpsportalestaciobrsimuladoAV1
Se houver
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV1
bull Fiquei com AV1 lt 40
bull Pode ser que tenha Nova Chance (Nota AVR) ndash Agendar 1410 a 2210 Executar 1510 a 2410
AV1 =( T1 + P1 + S1 + AVR)2
00 a 80
00 a 100
00 a 20 00 a 20 00 a 100
Informaccedilotildees httpsportalestaciobrnovachance
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV2
AV2 = T2 + P2
00 a 80
00 a 100
00 a 20
bull T2 nota que varia de 00 a 20
bull P2 nota obtida na Avaliaccedilatildeo 2 + Projeto 2
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV3 bull P3 eacute a nota obtida na Avaliaccedilatildeo 3 + Projeto 3
bull AVA eacute a nota do Avaliando o Aprendizado
bull Se tiver passado e quiser fazer a avaliaccedilatildeo 3 para melhorar nota solicite ateacute uma semana antes
bull Mesmo natildeo precisando AV3 eacute cobrada a presenccedila
AV3 = P3 + AVA
00 a 100
00 a 100
00 a 20
Se houver
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Avaliando o Aprendizado
bull Quatro Simulados 5 questotildees cada ndash Cada questatildeo vale 01 na AV3 (se resposta for correta)
ndash Ateacute 20 pontos na AV3
ndash Moacutedulo 1 0409~
ndash Moacutedulo 2 2409~
ndash Moacutedulo 3 0810~
ndash Moacutedulo 4 2310~
ndash Terminar ateacute 0311
Avaliaccedilatildeo httpssimuladoestaciobralunos
Informaccedilotildees httpsportalestaciobravaliandoaprendizado
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Prepara AV1 e Prepara AV2
bull Aulas complementares de apoio ndash AV1 0310 ndash Aula ONLINE com hora predefinida
ndash AV2 2111 ndash Aula ONLINE com hora predefinida
bull Podem ser uacuteteis
ndash Introduccedilatildeo agrave Programaccedilatildeo
httppreparaestaciobrpresencial
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Criteacuterio de Aprovaccedilatildeo A = Maior nota entre AV1 AV2 AV3 B = Segunda maior nota entre AV1 AV2 AV3
Criteacuterios de Aprovaccedilatildeo (TODOS precisam ser atendidos)
1) A ge 40 2) B ge 40 3) A + B ge 120 (Meacutedia 60)
4) Frequecircncia ge 75 (No maacuteximo 4 faltas)
Inclui AV3 e vistas de prova Evite faltar e saia de feacuterias mais cedo
ATENCcedilAtildeO Se vocecirc tiver mais que uma nota abaixo de 40 ainda que o SIA aponte uma meacutedia maior que 60 vocecirc estaraacute REPROVADO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
BIBLIOGRAFIA E FONTES DE INFORMACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Baacutesica bull Livros Texto
ndash HTML 5 ndash Guia Praacutetico ndash TERUEL bull Disponiacutevel no Minha Biblioteca (ISBN 9788536519296)
ndash Desenvolvimento de Software II Introduccedilatildeo ao Desenv Web com HTML CSS JavaScript e PHP ndash MILETTO bull Disponiacutevel no Minha Biblioteca (ISBN 9788582601969)
ndash Refatorando HTML - Como Melhorar o Projeto de Aplicaccedilotildees Existentes ndash HAROLD bull Disponiacutevel no Minha Biblioteca (ISBN 9788577806706)
ndash JavaScript O Guia Definitivo ndash FLANAGAN bull Disponiacutevel no Minha Biblioteca (ISBN 9788565837484)
ndash PHP 5 - Conceitos Programaccedilatildeo e Integraccedilatildeo com Banco de Dados ndash SOARES bull Disponiacutevel no Minha Biblioteca (ISBN 9788536505633)
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Complementar
bull Material do Curso ndash Tecnologias Web (1ordf Ediccedilatildeo 2015)
bull Rodrigo Plotze (Disponiacutevel no SIA)
ndash Entre na disciplina e clique em ldquoMaterial Didaacuteticordquo
bull Livros Adicional ndash Ajax Rich Internet Applicationa e Desenvolvimento para
Web para Programadores bull Deitel amp Deitel Pearson 2009
ndash Disponiacutevel na Biblioteca Virtual
ndash Haacute outros no plano de ensino
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Adicional
bull Outros Livros Interessante na Biblioteca Virtual
ndash Aprenda a Criar Paacuteginas Web com HTML e XHTML
ndash HTML 5 Embarque Imediato
ndash Canvas HTML 5 Composiccedilatildeo Graacutefica e Interat na Web
ndash Desenvolvimento de Jogos em HTMl 5
bull Haacute muita coisa na internet
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Aula
bull Apresentaccedilotildees e outros itens de estudo
httpswwwcaetanoengbr
bull Selecione o anosemestre atual
bull Clique no nome da disciplina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Estudo
bull Conteuacutedo e atividades de preparaccedilatildeo
httpspadletcomdjcaetanodesweb
ATENCcedilAtildeO As postagens mais novas estaratildeo agrave esquerda
Aula NN Aprenda Mais
Poacutes Aula NN Material
Poacutes Aula NN Desafio
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia da Aula
Material Acesso ao Material
Apresentaccedilatildeo httpswwwcaetanoengbr (Desenvolvimento Web ndash Aula 1)
Livro Texto TERUEL paacuteginas 16 a 24
Aprenda Mais bull Referecircncia Elementos do HTML 5 httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PAacuteGINAS E APLICACcedilOtildeES COM TECNOLOGIA WEB
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Qual a diferenccedila entre eles
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees httpseditormethodac
HTML+CSS+JS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees docsgooglecom
HTML+CSS+JS+Java
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees
HTML+CSS+JS - DosBox
httpscodepenionodwspenVWOLPZ
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
RAacutePIDO HISTOacuteRICO
O QUE Eacute A INTERNET
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Origens
bull Redes locais x Inter-net
bull Diferenccedila importante
ndash Organizaccedilatildeo do traacutefego de dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Internet Comunicaccedilatildeo Hieraacuterquica
MAC Origem MAC Destino
IP Origem IP Destino
Dados
MAC Origem MAC Destino
IP Origem IP Destino
Controle de Transmissatildeo Dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Protocolos Caminho dos Dados
Call of Duty
TCP
IP
Fiacutesico
IP
TCP
Call of Duty
Cliente Servidor
IP 2002011004 IP 210212478
codactivisioncom
Domain Name System
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PROTOCOLO DE COMUNICACcedilAtildeO DA WEB
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O que eacute a World Wide Web
bull Chrome Firefox Edge Safari Opera
ndash Satildeo Navegadores
bull Eles acessam conteuacutedo de um servidor
ndash Apache Nginx IIS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Web Server x Navegador
bull Comunicaccedilatildeo por meio do HTTP
bull HTTP significa HyperText Transfer Protocol
ndash Especificado por Tim Berners-Lee em 1990
ndash Transmitir documentos hipertexto
Requisiccedilatildeo
Resposta
Me daacute a paacutegina indexhtml
404 ndash A paacutegina natildeo existe
httpwwwmeuservidorcomindexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Navegaccedilatildeo Segura
bull Comunicaccedilatildeo por meio do HTTPS
bull HTTP + TLS (Transport Layer Security)
ndash Criptografa as informaccedilotildees ponto-a-ponto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TECNOLOGIAS PARA A WEB HTML CSS
JAVASCRIPT PHP
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias para a Web
bull PaacuteginaAplicaccedilatildeo Web
ndash Conteuacutedo
ndash Forma
ndash Accedilotildees (cliente)
ndash Accedilotildees (servidor)
bull Cada parte
ndash Desenvolvida com tecnologias proacuteprias
bull Navegadores
ndash Compreendem a maior parte delas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Sopa de letrinhas
ndash HTML x XHTML x HTML5
ndash CSS1 2 3
ndash JS 2x 30
ndash DOM 1 2
ndash AJAX
ndash JSONXML
ndash PHP 5 7
bull Navegadores
ndash Quaisquer Recentes
Conteuacutedo (estrutura)
Visual (cores e layout)
Estrutura Interna (memoacuteria)
Transferecircncia de Dados
Representaccedilatildeo de Dados
Processamento (accedilotildees)
Processamento no Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Estudaremos no Curso
ndash HTML5 HyperText Markup Language
bull Linguagem de Marcaccedilatildeo
ndash CSS3 Cascade Style Sheets
bull Folhas de Estilo
ndash DOM (brevemente) Document Object Model
bull Estrutura interna de um documento
ndash JS JavaScript
bull Accedilotildees do lado do cliente
ndash PHP PHP is a Hypertext Preprocessor
bull Tarefas do lado do servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Por que separar as accedilotildees
bull Cliente Navegador ldquoFront-endrdquo
ndash Processamento da interface
bull Servidor ldquoBack-endrdquo
ndash Armazena dados e estados
ndash Gerencia processos mais sensiacuteveis
bull Consequecircncia
ndash Necessidade de comunicaccedilatildeo Cliente-Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV1
bull Fiquei com AV1 lt 40
bull Pode ser que tenha Nova Chance (Nota AVR) ndash Agendar 1410 a 2210 Executar 1510 a 2410
AV1 =( T1 + P1 + S1 + AVR)2
00 a 80
00 a 100
00 a 20 00 a 20 00 a 100
Informaccedilotildees httpsportalestaciobrnovachance
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV2
AV2 = T2 + P2
00 a 80
00 a 100
00 a 20
bull T2 nota que varia de 00 a 20
bull P2 nota obtida na Avaliaccedilatildeo 2 + Projeto 2
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV3 bull P3 eacute a nota obtida na Avaliaccedilatildeo 3 + Projeto 3
bull AVA eacute a nota do Avaliando o Aprendizado
bull Se tiver passado e quiser fazer a avaliaccedilatildeo 3 para melhorar nota solicite ateacute uma semana antes
bull Mesmo natildeo precisando AV3 eacute cobrada a presenccedila
AV3 = P3 + AVA
00 a 100
00 a 100
00 a 20
Se houver
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Avaliando o Aprendizado
bull Quatro Simulados 5 questotildees cada ndash Cada questatildeo vale 01 na AV3 (se resposta for correta)
ndash Ateacute 20 pontos na AV3
ndash Moacutedulo 1 0409~
ndash Moacutedulo 2 2409~
ndash Moacutedulo 3 0810~
ndash Moacutedulo 4 2310~
ndash Terminar ateacute 0311
Avaliaccedilatildeo httpssimuladoestaciobralunos
Informaccedilotildees httpsportalestaciobravaliandoaprendizado
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Prepara AV1 e Prepara AV2
bull Aulas complementares de apoio ndash AV1 0310 ndash Aula ONLINE com hora predefinida
ndash AV2 2111 ndash Aula ONLINE com hora predefinida
bull Podem ser uacuteteis
ndash Introduccedilatildeo agrave Programaccedilatildeo
httppreparaestaciobrpresencial
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Criteacuterio de Aprovaccedilatildeo A = Maior nota entre AV1 AV2 AV3 B = Segunda maior nota entre AV1 AV2 AV3
Criteacuterios de Aprovaccedilatildeo (TODOS precisam ser atendidos)
1) A ge 40 2) B ge 40 3) A + B ge 120 (Meacutedia 60)
4) Frequecircncia ge 75 (No maacuteximo 4 faltas)
Inclui AV3 e vistas de prova Evite faltar e saia de feacuterias mais cedo
ATENCcedilAtildeO Se vocecirc tiver mais que uma nota abaixo de 40 ainda que o SIA aponte uma meacutedia maior que 60 vocecirc estaraacute REPROVADO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
BIBLIOGRAFIA E FONTES DE INFORMACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Baacutesica bull Livros Texto
ndash HTML 5 ndash Guia Praacutetico ndash TERUEL bull Disponiacutevel no Minha Biblioteca (ISBN 9788536519296)
ndash Desenvolvimento de Software II Introduccedilatildeo ao Desenv Web com HTML CSS JavaScript e PHP ndash MILETTO bull Disponiacutevel no Minha Biblioteca (ISBN 9788582601969)
ndash Refatorando HTML - Como Melhorar o Projeto de Aplicaccedilotildees Existentes ndash HAROLD bull Disponiacutevel no Minha Biblioteca (ISBN 9788577806706)
ndash JavaScript O Guia Definitivo ndash FLANAGAN bull Disponiacutevel no Minha Biblioteca (ISBN 9788565837484)
ndash PHP 5 - Conceitos Programaccedilatildeo e Integraccedilatildeo com Banco de Dados ndash SOARES bull Disponiacutevel no Minha Biblioteca (ISBN 9788536505633)
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Complementar
bull Material do Curso ndash Tecnologias Web (1ordf Ediccedilatildeo 2015)
bull Rodrigo Plotze (Disponiacutevel no SIA)
ndash Entre na disciplina e clique em ldquoMaterial Didaacuteticordquo
bull Livros Adicional ndash Ajax Rich Internet Applicationa e Desenvolvimento para
Web para Programadores bull Deitel amp Deitel Pearson 2009
ndash Disponiacutevel na Biblioteca Virtual
ndash Haacute outros no plano de ensino
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Adicional
bull Outros Livros Interessante na Biblioteca Virtual
ndash Aprenda a Criar Paacuteginas Web com HTML e XHTML
ndash HTML 5 Embarque Imediato
ndash Canvas HTML 5 Composiccedilatildeo Graacutefica e Interat na Web
ndash Desenvolvimento de Jogos em HTMl 5
bull Haacute muita coisa na internet
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Aula
bull Apresentaccedilotildees e outros itens de estudo
httpswwwcaetanoengbr
bull Selecione o anosemestre atual
bull Clique no nome da disciplina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Estudo
bull Conteuacutedo e atividades de preparaccedilatildeo
httpspadletcomdjcaetanodesweb
ATENCcedilAtildeO As postagens mais novas estaratildeo agrave esquerda
Aula NN Aprenda Mais
Poacutes Aula NN Material
Poacutes Aula NN Desafio
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia da Aula
Material Acesso ao Material
Apresentaccedilatildeo httpswwwcaetanoengbr (Desenvolvimento Web ndash Aula 1)
Livro Texto TERUEL paacuteginas 16 a 24
Aprenda Mais bull Referecircncia Elementos do HTML 5 httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PAacuteGINAS E APLICACcedilOtildeES COM TECNOLOGIA WEB
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Qual a diferenccedila entre eles
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees httpseditormethodac
HTML+CSS+JS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees docsgooglecom
HTML+CSS+JS+Java
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees
HTML+CSS+JS - DosBox
httpscodepenionodwspenVWOLPZ
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
RAacutePIDO HISTOacuteRICO
O QUE Eacute A INTERNET
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Origens
bull Redes locais x Inter-net
bull Diferenccedila importante
ndash Organizaccedilatildeo do traacutefego de dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Internet Comunicaccedilatildeo Hieraacuterquica
MAC Origem MAC Destino
IP Origem IP Destino
Dados
MAC Origem MAC Destino
IP Origem IP Destino
Controle de Transmissatildeo Dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Protocolos Caminho dos Dados
Call of Duty
TCP
IP
Fiacutesico
IP
TCP
Call of Duty
Cliente Servidor
IP 2002011004 IP 210212478
codactivisioncom
Domain Name System
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PROTOCOLO DE COMUNICACcedilAtildeO DA WEB
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O que eacute a World Wide Web
bull Chrome Firefox Edge Safari Opera
ndash Satildeo Navegadores
bull Eles acessam conteuacutedo de um servidor
ndash Apache Nginx IIS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Web Server x Navegador
bull Comunicaccedilatildeo por meio do HTTP
bull HTTP significa HyperText Transfer Protocol
ndash Especificado por Tim Berners-Lee em 1990
ndash Transmitir documentos hipertexto
Requisiccedilatildeo
Resposta
Me daacute a paacutegina indexhtml
404 ndash A paacutegina natildeo existe
httpwwwmeuservidorcomindexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Navegaccedilatildeo Segura
bull Comunicaccedilatildeo por meio do HTTPS
bull HTTP + TLS (Transport Layer Security)
ndash Criptografa as informaccedilotildees ponto-a-ponto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TECNOLOGIAS PARA A WEB HTML CSS
JAVASCRIPT PHP
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias para a Web
bull PaacuteginaAplicaccedilatildeo Web
ndash Conteuacutedo
ndash Forma
ndash Accedilotildees (cliente)
ndash Accedilotildees (servidor)
bull Cada parte
ndash Desenvolvida com tecnologias proacuteprias
bull Navegadores
ndash Compreendem a maior parte delas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Sopa de letrinhas
ndash HTML x XHTML x HTML5
ndash CSS1 2 3
ndash JS 2x 30
ndash DOM 1 2
ndash AJAX
ndash JSONXML
ndash PHP 5 7
bull Navegadores
ndash Quaisquer Recentes
Conteuacutedo (estrutura)
Visual (cores e layout)
Estrutura Interna (memoacuteria)
Transferecircncia de Dados
Representaccedilatildeo de Dados
Processamento (accedilotildees)
Processamento no Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Estudaremos no Curso
ndash HTML5 HyperText Markup Language
bull Linguagem de Marcaccedilatildeo
ndash CSS3 Cascade Style Sheets
bull Folhas de Estilo
ndash DOM (brevemente) Document Object Model
bull Estrutura interna de um documento
ndash JS JavaScript
bull Accedilotildees do lado do cliente
ndash PHP PHP is a Hypertext Preprocessor
bull Tarefas do lado do servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Por que separar as accedilotildees
bull Cliente Navegador ldquoFront-endrdquo
ndash Processamento da interface
bull Servidor ldquoBack-endrdquo
ndash Armazena dados e estados
ndash Gerencia processos mais sensiacuteveis
bull Consequecircncia
ndash Necessidade de comunicaccedilatildeo Cliente-Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV2
AV2 = T2 + P2
00 a 80
00 a 100
00 a 20
bull T2 nota que varia de 00 a 20
bull P2 nota obtida na Avaliaccedilatildeo 2 + Projeto 2
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV3 bull P3 eacute a nota obtida na Avaliaccedilatildeo 3 + Projeto 3
bull AVA eacute a nota do Avaliando o Aprendizado
bull Se tiver passado e quiser fazer a avaliaccedilatildeo 3 para melhorar nota solicite ateacute uma semana antes
bull Mesmo natildeo precisando AV3 eacute cobrada a presenccedila
AV3 = P3 + AVA
00 a 100
00 a 100
00 a 20
Se houver
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Avaliando o Aprendizado
bull Quatro Simulados 5 questotildees cada ndash Cada questatildeo vale 01 na AV3 (se resposta for correta)
ndash Ateacute 20 pontos na AV3
ndash Moacutedulo 1 0409~
ndash Moacutedulo 2 2409~
ndash Moacutedulo 3 0810~
ndash Moacutedulo 4 2310~
ndash Terminar ateacute 0311
Avaliaccedilatildeo httpssimuladoestaciobralunos
Informaccedilotildees httpsportalestaciobravaliandoaprendizado
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Prepara AV1 e Prepara AV2
bull Aulas complementares de apoio ndash AV1 0310 ndash Aula ONLINE com hora predefinida
ndash AV2 2111 ndash Aula ONLINE com hora predefinida
bull Podem ser uacuteteis
ndash Introduccedilatildeo agrave Programaccedilatildeo
httppreparaestaciobrpresencial
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Criteacuterio de Aprovaccedilatildeo A = Maior nota entre AV1 AV2 AV3 B = Segunda maior nota entre AV1 AV2 AV3
Criteacuterios de Aprovaccedilatildeo (TODOS precisam ser atendidos)
1) A ge 40 2) B ge 40 3) A + B ge 120 (Meacutedia 60)
4) Frequecircncia ge 75 (No maacuteximo 4 faltas)
Inclui AV3 e vistas de prova Evite faltar e saia de feacuterias mais cedo
ATENCcedilAtildeO Se vocecirc tiver mais que uma nota abaixo de 40 ainda que o SIA aponte uma meacutedia maior que 60 vocecirc estaraacute REPROVADO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
BIBLIOGRAFIA E FONTES DE INFORMACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Baacutesica bull Livros Texto
ndash HTML 5 ndash Guia Praacutetico ndash TERUEL bull Disponiacutevel no Minha Biblioteca (ISBN 9788536519296)
ndash Desenvolvimento de Software II Introduccedilatildeo ao Desenv Web com HTML CSS JavaScript e PHP ndash MILETTO bull Disponiacutevel no Minha Biblioteca (ISBN 9788582601969)
ndash Refatorando HTML - Como Melhorar o Projeto de Aplicaccedilotildees Existentes ndash HAROLD bull Disponiacutevel no Minha Biblioteca (ISBN 9788577806706)
ndash JavaScript O Guia Definitivo ndash FLANAGAN bull Disponiacutevel no Minha Biblioteca (ISBN 9788565837484)
ndash PHP 5 - Conceitos Programaccedilatildeo e Integraccedilatildeo com Banco de Dados ndash SOARES bull Disponiacutevel no Minha Biblioteca (ISBN 9788536505633)
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Complementar
bull Material do Curso ndash Tecnologias Web (1ordf Ediccedilatildeo 2015)
bull Rodrigo Plotze (Disponiacutevel no SIA)
ndash Entre na disciplina e clique em ldquoMaterial Didaacuteticordquo
bull Livros Adicional ndash Ajax Rich Internet Applicationa e Desenvolvimento para
Web para Programadores bull Deitel amp Deitel Pearson 2009
ndash Disponiacutevel na Biblioteca Virtual
ndash Haacute outros no plano de ensino
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Adicional
bull Outros Livros Interessante na Biblioteca Virtual
ndash Aprenda a Criar Paacuteginas Web com HTML e XHTML
ndash HTML 5 Embarque Imediato
ndash Canvas HTML 5 Composiccedilatildeo Graacutefica e Interat na Web
ndash Desenvolvimento de Jogos em HTMl 5
bull Haacute muita coisa na internet
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Aula
bull Apresentaccedilotildees e outros itens de estudo
httpswwwcaetanoengbr
bull Selecione o anosemestre atual
bull Clique no nome da disciplina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Estudo
bull Conteuacutedo e atividades de preparaccedilatildeo
httpspadletcomdjcaetanodesweb
ATENCcedilAtildeO As postagens mais novas estaratildeo agrave esquerda
Aula NN Aprenda Mais
Poacutes Aula NN Material
Poacutes Aula NN Desafio
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia da Aula
Material Acesso ao Material
Apresentaccedilatildeo httpswwwcaetanoengbr (Desenvolvimento Web ndash Aula 1)
Livro Texto TERUEL paacuteginas 16 a 24
Aprenda Mais bull Referecircncia Elementos do HTML 5 httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PAacuteGINAS E APLICACcedilOtildeES COM TECNOLOGIA WEB
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Qual a diferenccedila entre eles
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees httpseditormethodac
HTML+CSS+JS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees docsgooglecom
HTML+CSS+JS+Java
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees
HTML+CSS+JS - DosBox
httpscodepenionodwspenVWOLPZ
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
RAacutePIDO HISTOacuteRICO
O QUE Eacute A INTERNET
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Origens
bull Redes locais x Inter-net
bull Diferenccedila importante
ndash Organizaccedilatildeo do traacutefego de dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Internet Comunicaccedilatildeo Hieraacuterquica
MAC Origem MAC Destino
IP Origem IP Destino
Dados
MAC Origem MAC Destino
IP Origem IP Destino
Controle de Transmissatildeo Dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Protocolos Caminho dos Dados
Call of Duty
TCP
IP
Fiacutesico
IP
TCP
Call of Duty
Cliente Servidor
IP 2002011004 IP 210212478
codactivisioncom
Domain Name System
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PROTOCOLO DE COMUNICACcedilAtildeO DA WEB
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O que eacute a World Wide Web
bull Chrome Firefox Edge Safari Opera
ndash Satildeo Navegadores
bull Eles acessam conteuacutedo de um servidor
ndash Apache Nginx IIS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Web Server x Navegador
bull Comunicaccedilatildeo por meio do HTTP
bull HTTP significa HyperText Transfer Protocol
ndash Especificado por Tim Berners-Lee em 1990
ndash Transmitir documentos hipertexto
Requisiccedilatildeo
Resposta
Me daacute a paacutegina indexhtml
404 ndash A paacutegina natildeo existe
httpwwwmeuservidorcomindexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Navegaccedilatildeo Segura
bull Comunicaccedilatildeo por meio do HTTPS
bull HTTP + TLS (Transport Layer Security)
ndash Criptografa as informaccedilotildees ponto-a-ponto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TECNOLOGIAS PARA A WEB HTML CSS
JAVASCRIPT PHP
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias para a Web
bull PaacuteginaAplicaccedilatildeo Web
ndash Conteuacutedo
ndash Forma
ndash Accedilotildees (cliente)
ndash Accedilotildees (servidor)
bull Cada parte
ndash Desenvolvida com tecnologias proacuteprias
bull Navegadores
ndash Compreendem a maior parte delas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Sopa de letrinhas
ndash HTML x XHTML x HTML5
ndash CSS1 2 3
ndash JS 2x 30
ndash DOM 1 2
ndash AJAX
ndash JSONXML
ndash PHP 5 7
bull Navegadores
ndash Quaisquer Recentes
Conteuacutedo (estrutura)
Visual (cores e layout)
Estrutura Interna (memoacuteria)
Transferecircncia de Dados
Representaccedilatildeo de Dados
Processamento (accedilotildees)
Processamento no Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Estudaremos no Curso
ndash HTML5 HyperText Markup Language
bull Linguagem de Marcaccedilatildeo
ndash CSS3 Cascade Style Sheets
bull Folhas de Estilo
ndash DOM (brevemente) Document Object Model
bull Estrutura interna de um documento
ndash JS JavaScript
bull Accedilotildees do lado do cliente
ndash PHP PHP is a Hypertext Preprocessor
bull Tarefas do lado do servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Por que separar as accedilotildees
bull Cliente Navegador ldquoFront-endrdquo
ndash Processamento da interface
bull Servidor ldquoBack-endrdquo
ndash Armazena dados e estados
ndash Gerencia processos mais sensiacuteveis
bull Consequecircncia
ndash Necessidade de comunicaccedilatildeo Cliente-Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Composiccedilatildeo da Nota AV3 bull P3 eacute a nota obtida na Avaliaccedilatildeo 3 + Projeto 3
bull AVA eacute a nota do Avaliando o Aprendizado
bull Se tiver passado e quiser fazer a avaliaccedilatildeo 3 para melhorar nota solicite ateacute uma semana antes
bull Mesmo natildeo precisando AV3 eacute cobrada a presenccedila
AV3 = P3 + AVA
00 a 100
00 a 100
00 a 20
Se houver
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Avaliando o Aprendizado
bull Quatro Simulados 5 questotildees cada ndash Cada questatildeo vale 01 na AV3 (se resposta for correta)
ndash Ateacute 20 pontos na AV3
ndash Moacutedulo 1 0409~
ndash Moacutedulo 2 2409~
ndash Moacutedulo 3 0810~
ndash Moacutedulo 4 2310~
ndash Terminar ateacute 0311
Avaliaccedilatildeo httpssimuladoestaciobralunos
Informaccedilotildees httpsportalestaciobravaliandoaprendizado
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Prepara AV1 e Prepara AV2
bull Aulas complementares de apoio ndash AV1 0310 ndash Aula ONLINE com hora predefinida
ndash AV2 2111 ndash Aula ONLINE com hora predefinida
bull Podem ser uacuteteis
ndash Introduccedilatildeo agrave Programaccedilatildeo
httppreparaestaciobrpresencial
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Criteacuterio de Aprovaccedilatildeo A = Maior nota entre AV1 AV2 AV3 B = Segunda maior nota entre AV1 AV2 AV3
Criteacuterios de Aprovaccedilatildeo (TODOS precisam ser atendidos)
1) A ge 40 2) B ge 40 3) A + B ge 120 (Meacutedia 60)
4) Frequecircncia ge 75 (No maacuteximo 4 faltas)
Inclui AV3 e vistas de prova Evite faltar e saia de feacuterias mais cedo
ATENCcedilAtildeO Se vocecirc tiver mais que uma nota abaixo de 40 ainda que o SIA aponte uma meacutedia maior que 60 vocecirc estaraacute REPROVADO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
BIBLIOGRAFIA E FONTES DE INFORMACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Baacutesica bull Livros Texto
ndash HTML 5 ndash Guia Praacutetico ndash TERUEL bull Disponiacutevel no Minha Biblioteca (ISBN 9788536519296)
ndash Desenvolvimento de Software II Introduccedilatildeo ao Desenv Web com HTML CSS JavaScript e PHP ndash MILETTO bull Disponiacutevel no Minha Biblioteca (ISBN 9788582601969)
ndash Refatorando HTML - Como Melhorar o Projeto de Aplicaccedilotildees Existentes ndash HAROLD bull Disponiacutevel no Minha Biblioteca (ISBN 9788577806706)
ndash JavaScript O Guia Definitivo ndash FLANAGAN bull Disponiacutevel no Minha Biblioteca (ISBN 9788565837484)
ndash PHP 5 - Conceitos Programaccedilatildeo e Integraccedilatildeo com Banco de Dados ndash SOARES bull Disponiacutevel no Minha Biblioteca (ISBN 9788536505633)
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Complementar
bull Material do Curso ndash Tecnologias Web (1ordf Ediccedilatildeo 2015)
bull Rodrigo Plotze (Disponiacutevel no SIA)
ndash Entre na disciplina e clique em ldquoMaterial Didaacuteticordquo
bull Livros Adicional ndash Ajax Rich Internet Applicationa e Desenvolvimento para
Web para Programadores bull Deitel amp Deitel Pearson 2009
ndash Disponiacutevel na Biblioteca Virtual
ndash Haacute outros no plano de ensino
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Adicional
bull Outros Livros Interessante na Biblioteca Virtual
ndash Aprenda a Criar Paacuteginas Web com HTML e XHTML
ndash HTML 5 Embarque Imediato
ndash Canvas HTML 5 Composiccedilatildeo Graacutefica e Interat na Web
ndash Desenvolvimento de Jogos em HTMl 5
bull Haacute muita coisa na internet
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Aula
bull Apresentaccedilotildees e outros itens de estudo
httpswwwcaetanoengbr
bull Selecione o anosemestre atual
bull Clique no nome da disciplina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Estudo
bull Conteuacutedo e atividades de preparaccedilatildeo
httpspadletcomdjcaetanodesweb
ATENCcedilAtildeO As postagens mais novas estaratildeo agrave esquerda
Aula NN Aprenda Mais
Poacutes Aula NN Material
Poacutes Aula NN Desafio
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia da Aula
Material Acesso ao Material
Apresentaccedilatildeo httpswwwcaetanoengbr (Desenvolvimento Web ndash Aula 1)
Livro Texto TERUEL paacuteginas 16 a 24
Aprenda Mais bull Referecircncia Elementos do HTML 5 httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PAacuteGINAS E APLICACcedilOtildeES COM TECNOLOGIA WEB
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Qual a diferenccedila entre eles
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees httpseditormethodac
HTML+CSS+JS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees docsgooglecom
HTML+CSS+JS+Java
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees
HTML+CSS+JS - DosBox
httpscodepenionodwspenVWOLPZ
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
RAacutePIDO HISTOacuteRICO
O QUE Eacute A INTERNET
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Origens
bull Redes locais x Inter-net
bull Diferenccedila importante
ndash Organizaccedilatildeo do traacutefego de dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Internet Comunicaccedilatildeo Hieraacuterquica
MAC Origem MAC Destino
IP Origem IP Destino
Dados
MAC Origem MAC Destino
IP Origem IP Destino
Controle de Transmissatildeo Dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Protocolos Caminho dos Dados
Call of Duty
TCP
IP
Fiacutesico
IP
TCP
Call of Duty
Cliente Servidor
IP 2002011004 IP 210212478
codactivisioncom
Domain Name System
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PROTOCOLO DE COMUNICACcedilAtildeO DA WEB
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O que eacute a World Wide Web
bull Chrome Firefox Edge Safari Opera
ndash Satildeo Navegadores
bull Eles acessam conteuacutedo de um servidor
ndash Apache Nginx IIS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Web Server x Navegador
bull Comunicaccedilatildeo por meio do HTTP
bull HTTP significa HyperText Transfer Protocol
ndash Especificado por Tim Berners-Lee em 1990
ndash Transmitir documentos hipertexto
Requisiccedilatildeo
Resposta
Me daacute a paacutegina indexhtml
404 ndash A paacutegina natildeo existe
httpwwwmeuservidorcomindexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Navegaccedilatildeo Segura
bull Comunicaccedilatildeo por meio do HTTPS
bull HTTP + TLS (Transport Layer Security)
ndash Criptografa as informaccedilotildees ponto-a-ponto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TECNOLOGIAS PARA A WEB HTML CSS
JAVASCRIPT PHP
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias para a Web
bull PaacuteginaAplicaccedilatildeo Web
ndash Conteuacutedo
ndash Forma
ndash Accedilotildees (cliente)
ndash Accedilotildees (servidor)
bull Cada parte
ndash Desenvolvida com tecnologias proacuteprias
bull Navegadores
ndash Compreendem a maior parte delas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Sopa de letrinhas
ndash HTML x XHTML x HTML5
ndash CSS1 2 3
ndash JS 2x 30
ndash DOM 1 2
ndash AJAX
ndash JSONXML
ndash PHP 5 7
bull Navegadores
ndash Quaisquer Recentes
Conteuacutedo (estrutura)
Visual (cores e layout)
Estrutura Interna (memoacuteria)
Transferecircncia de Dados
Representaccedilatildeo de Dados
Processamento (accedilotildees)
Processamento no Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Estudaremos no Curso
ndash HTML5 HyperText Markup Language
bull Linguagem de Marcaccedilatildeo
ndash CSS3 Cascade Style Sheets
bull Folhas de Estilo
ndash DOM (brevemente) Document Object Model
bull Estrutura interna de um documento
ndash JS JavaScript
bull Accedilotildees do lado do cliente
ndash PHP PHP is a Hypertext Preprocessor
bull Tarefas do lado do servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Por que separar as accedilotildees
bull Cliente Navegador ldquoFront-endrdquo
ndash Processamento da interface
bull Servidor ldquoBack-endrdquo
ndash Armazena dados e estados
ndash Gerencia processos mais sensiacuteveis
bull Consequecircncia
ndash Necessidade de comunicaccedilatildeo Cliente-Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Avaliando o Aprendizado
bull Quatro Simulados 5 questotildees cada ndash Cada questatildeo vale 01 na AV3 (se resposta for correta)
ndash Ateacute 20 pontos na AV3
ndash Moacutedulo 1 0409~
ndash Moacutedulo 2 2409~
ndash Moacutedulo 3 0810~
ndash Moacutedulo 4 2310~
ndash Terminar ateacute 0311
Avaliaccedilatildeo httpssimuladoestaciobralunos
Informaccedilotildees httpsportalestaciobravaliandoaprendizado
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Prepara AV1 e Prepara AV2
bull Aulas complementares de apoio ndash AV1 0310 ndash Aula ONLINE com hora predefinida
ndash AV2 2111 ndash Aula ONLINE com hora predefinida
bull Podem ser uacuteteis
ndash Introduccedilatildeo agrave Programaccedilatildeo
httppreparaestaciobrpresencial
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Criteacuterio de Aprovaccedilatildeo A = Maior nota entre AV1 AV2 AV3 B = Segunda maior nota entre AV1 AV2 AV3
Criteacuterios de Aprovaccedilatildeo (TODOS precisam ser atendidos)
1) A ge 40 2) B ge 40 3) A + B ge 120 (Meacutedia 60)
4) Frequecircncia ge 75 (No maacuteximo 4 faltas)
Inclui AV3 e vistas de prova Evite faltar e saia de feacuterias mais cedo
ATENCcedilAtildeO Se vocecirc tiver mais que uma nota abaixo de 40 ainda que o SIA aponte uma meacutedia maior que 60 vocecirc estaraacute REPROVADO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
BIBLIOGRAFIA E FONTES DE INFORMACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Baacutesica bull Livros Texto
ndash HTML 5 ndash Guia Praacutetico ndash TERUEL bull Disponiacutevel no Minha Biblioteca (ISBN 9788536519296)
ndash Desenvolvimento de Software II Introduccedilatildeo ao Desenv Web com HTML CSS JavaScript e PHP ndash MILETTO bull Disponiacutevel no Minha Biblioteca (ISBN 9788582601969)
ndash Refatorando HTML - Como Melhorar o Projeto de Aplicaccedilotildees Existentes ndash HAROLD bull Disponiacutevel no Minha Biblioteca (ISBN 9788577806706)
ndash JavaScript O Guia Definitivo ndash FLANAGAN bull Disponiacutevel no Minha Biblioteca (ISBN 9788565837484)
ndash PHP 5 - Conceitos Programaccedilatildeo e Integraccedilatildeo com Banco de Dados ndash SOARES bull Disponiacutevel no Minha Biblioteca (ISBN 9788536505633)
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Complementar
bull Material do Curso ndash Tecnologias Web (1ordf Ediccedilatildeo 2015)
bull Rodrigo Plotze (Disponiacutevel no SIA)
ndash Entre na disciplina e clique em ldquoMaterial Didaacuteticordquo
bull Livros Adicional ndash Ajax Rich Internet Applicationa e Desenvolvimento para
Web para Programadores bull Deitel amp Deitel Pearson 2009
ndash Disponiacutevel na Biblioteca Virtual
ndash Haacute outros no plano de ensino
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Adicional
bull Outros Livros Interessante na Biblioteca Virtual
ndash Aprenda a Criar Paacuteginas Web com HTML e XHTML
ndash HTML 5 Embarque Imediato
ndash Canvas HTML 5 Composiccedilatildeo Graacutefica e Interat na Web
ndash Desenvolvimento de Jogos em HTMl 5
bull Haacute muita coisa na internet
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Aula
bull Apresentaccedilotildees e outros itens de estudo
httpswwwcaetanoengbr
bull Selecione o anosemestre atual
bull Clique no nome da disciplina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Estudo
bull Conteuacutedo e atividades de preparaccedilatildeo
httpspadletcomdjcaetanodesweb
ATENCcedilAtildeO As postagens mais novas estaratildeo agrave esquerda
Aula NN Aprenda Mais
Poacutes Aula NN Material
Poacutes Aula NN Desafio
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia da Aula
Material Acesso ao Material
Apresentaccedilatildeo httpswwwcaetanoengbr (Desenvolvimento Web ndash Aula 1)
Livro Texto TERUEL paacuteginas 16 a 24
Aprenda Mais bull Referecircncia Elementos do HTML 5 httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PAacuteGINAS E APLICACcedilOtildeES COM TECNOLOGIA WEB
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Qual a diferenccedila entre eles
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees httpseditormethodac
HTML+CSS+JS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees docsgooglecom
HTML+CSS+JS+Java
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees
HTML+CSS+JS - DosBox
httpscodepenionodwspenVWOLPZ
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
RAacutePIDO HISTOacuteRICO
O QUE Eacute A INTERNET
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Origens
bull Redes locais x Inter-net
bull Diferenccedila importante
ndash Organizaccedilatildeo do traacutefego de dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Internet Comunicaccedilatildeo Hieraacuterquica
MAC Origem MAC Destino
IP Origem IP Destino
Dados
MAC Origem MAC Destino
IP Origem IP Destino
Controle de Transmissatildeo Dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Protocolos Caminho dos Dados
Call of Duty
TCP
IP
Fiacutesico
IP
TCP
Call of Duty
Cliente Servidor
IP 2002011004 IP 210212478
codactivisioncom
Domain Name System
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PROTOCOLO DE COMUNICACcedilAtildeO DA WEB
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O que eacute a World Wide Web
bull Chrome Firefox Edge Safari Opera
ndash Satildeo Navegadores
bull Eles acessam conteuacutedo de um servidor
ndash Apache Nginx IIS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Web Server x Navegador
bull Comunicaccedilatildeo por meio do HTTP
bull HTTP significa HyperText Transfer Protocol
ndash Especificado por Tim Berners-Lee em 1990
ndash Transmitir documentos hipertexto
Requisiccedilatildeo
Resposta
Me daacute a paacutegina indexhtml
404 ndash A paacutegina natildeo existe
httpwwwmeuservidorcomindexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Navegaccedilatildeo Segura
bull Comunicaccedilatildeo por meio do HTTPS
bull HTTP + TLS (Transport Layer Security)
ndash Criptografa as informaccedilotildees ponto-a-ponto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TECNOLOGIAS PARA A WEB HTML CSS
JAVASCRIPT PHP
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias para a Web
bull PaacuteginaAplicaccedilatildeo Web
ndash Conteuacutedo
ndash Forma
ndash Accedilotildees (cliente)
ndash Accedilotildees (servidor)
bull Cada parte
ndash Desenvolvida com tecnologias proacuteprias
bull Navegadores
ndash Compreendem a maior parte delas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Sopa de letrinhas
ndash HTML x XHTML x HTML5
ndash CSS1 2 3
ndash JS 2x 30
ndash DOM 1 2
ndash AJAX
ndash JSONXML
ndash PHP 5 7
bull Navegadores
ndash Quaisquer Recentes
Conteuacutedo (estrutura)
Visual (cores e layout)
Estrutura Interna (memoacuteria)
Transferecircncia de Dados
Representaccedilatildeo de Dados
Processamento (accedilotildees)
Processamento no Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Estudaremos no Curso
ndash HTML5 HyperText Markup Language
bull Linguagem de Marcaccedilatildeo
ndash CSS3 Cascade Style Sheets
bull Folhas de Estilo
ndash DOM (brevemente) Document Object Model
bull Estrutura interna de um documento
ndash JS JavaScript
bull Accedilotildees do lado do cliente
ndash PHP PHP is a Hypertext Preprocessor
bull Tarefas do lado do servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Por que separar as accedilotildees
bull Cliente Navegador ldquoFront-endrdquo
ndash Processamento da interface
bull Servidor ldquoBack-endrdquo
ndash Armazena dados e estados
ndash Gerencia processos mais sensiacuteveis
bull Consequecircncia
ndash Necessidade de comunicaccedilatildeo Cliente-Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Prepara AV1 e Prepara AV2
bull Aulas complementares de apoio ndash AV1 0310 ndash Aula ONLINE com hora predefinida
ndash AV2 2111 ndash Aula ONLINE com hora predefinida
bull Podem ser uacuteteis
ndash Introduccedilatildeo agrave Programaccedilatildeo
httppreparaestaciobrpresencial
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Criteacuterio de Aprovaccedilatildeo A = Maior nota entre AV1 AV2 AV3 B = Segunda maior nota entre AV1 AV2 AV3
Criteacuterios de Aprovaccedilatildeo (TODOS precisam ser atendidos)
1) A ge 40 2) B ge 40 3) A + B ge 120 (Meacutedia 60)
4) Frequecircncia ge 75 (No maacuteximo 4 faltas)
Inclui AV3 e vistas de prova Evite faltar e saia de feacuterias mais cedo
ATENCcedilAtildeO Se vocecirc tiver mais que uma nota abaixo de 40 ainda que o SIA aponte uma meacutedia maior que 60 vocecirc estaraacute REPROVADO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
BIBLIOGRAFIA E FONTES DE INFORMACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Baacutesica bull Livros Texto
ndash HTML 5 ndash Guia Praacutetico ndash TERUEL bull Disponiacutevel no Minha Biblioteca (ISBN 9788536519296)
ndash Desenvolvimento de Software II Introduccedilatildeo ao Desenv Web com HTML CSS JavaScript e PHP ndash MILETTO bull Disponiacutevel no Minha Biblioteca (ISBN 9788582601969)
ndash Refatorando HTML - Como Melhorar o Projeto de Aplicaccedilotildees Existentes ndash HAROLD bull Disponiacutevel no Minha Biblioteca (ISBN 9788577806706)
ndash JavaScript O Guia Definitivo ndash FLANAGAN bull Disponiacutevel no Minha Biblioteca (ISBN 9788565837484)
ndash PHP 5 - Conceitos Programaccedilatildeo e Integraccedilatildeo com Banco de Dados ndash SOARES bull Disponiacutevel no Minha Biblioteca (ISBN 9788536505633)
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Complementar
bull Material do Curso ndash Tecnologias Web (1ordf Ediccedilatildeo 2015)
bull Rodrigo Plotze (Disponiacutevel no SIA)
ndash Entre na disciplina e clique em ldquoMaterial Didaacuteticordquo
bull Livros Adicional ndash Ajax Rich Internet Applicationa e Desenvolvimento para
Web para Programadores bull Deitel amp Deitel Pearson 2009
ndash Disponiacutevel na Biblioteca Virtual
ndash Haacute outros no plano de ensino
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Adicional
bull Outros Livros Interessante na Biblioteca Virtual
ndash Aprenda a Criar Paacuteginas Web com HTML e XHTML
ndash HTML 5 Embarque Imediato
ndash Canvas HTML 5 Composiccedilatildeo Graacutefica e Interat na Web
ndash Desenvolvimento de Jogos em HTMl 5
bull Haacute muita coisa na internet
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Aula
bull Apresentaccedilotildees e outros itens de estudo
httpswwwcaetanoengbr
bull Selecione o anosemestre atual
bull Clique no nome da disciplina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Estudo
bull Conteuacutedo e atividades de preparaccedilatildeo
httpspadletcomdjcaetanodesweb
ATENCcedilAtildeO As postagens mais novas estaratildeo agrave esquerda
Aula NN Aprenda Mais
Poacutes Aula NN Material
Poacutes Aula NN Desafio
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia da Aula
Material Acesso ao Material
Apresentaccedilatildeo httpswwwcaetanoengbr (Desenvolvimento Web ndash Aula 1)
Livro Texto TERUEL paacuteginas 16 a 24
Aprenda Mais bull Referecircncia Elementos do HTML 5 httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PAacuteGINAS E APLICACcedilOtildeES COM TECNOLOGIA WEB
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Qual a diferenccedila entre eles
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees httpseditormethodac
HTML+CSS+JS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees docsgooglecom
HTML+CSS+JS+Java
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees
HTML+CSS+JS - DosBox
httpscodepenionodwspenVWOLPZ
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
RAacutePIDO HISTOacuteRICO
O QUE Eacute A INTERNET
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Origens
bull Redes locais x Inter-net
bull Diferenccedila importante
ndash Organizaccedilatildeo do traacutefego de dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Internet Comunicaccedilatildeo Hieraacuterquica
MAC Origem MAC Destino
IP Origem IP Destino
Dados
MAC Origem MAC Destino
IP Origem IP Destino
Controle de Transmissatildeo Dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Protocolos Caminho dos Dados
Call of Duty
TCP
IP
Fiacutesico
IP
TCP
Call of Duty
Cliente Servidor
IP 2002011004 IP 210212478
codactivisioncom
Domain Name System
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PROTOCOLO DE COMUNICACcedilAtildeO DA WEB
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O que eacute a World Wide Web
bull Chrome Firefox Edge Safari Opera
ndash Satildeo Navegadores
bull Eles acessam conteuacutedo de um servidor
ndash Apache Nginx IIS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Web Server x Navegador
bull Comunicaccedilatildeo por meio do HTTP
bull HTTP significa HyperText Transfer Protocol
ndash Especificado por Tim Berners-Lee em 1990
ndash Transmitir documentos hipertexto
Requisiccedilatildeo
Resposta
Me daacute a paacutegina indexhtml
404 ndash A paacutegina natildeo existe
httpwwwmeuservidorcomindexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Navegaccedilatildeo Segura
bull Comunicaccedilatildeo por meio do HTTPS
bull HTTP + TLS (Transport Layer Security)
ndash Criptografa as informaccedilotildees ponto-a-ponto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TECNOLOGIAS PARA A WEB HTML CSS
JAVASCRIPT PHP
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias para a Web
bull PaacuteginaAplicaccedilatildeo Web
ndash Conteuacutedo
ndash Forma
ndash Accedilotildees (cliente)
ndash Accedilotildees (servidor)
bull Cada parte
ndash Desenvolvida com tecnologias proacuteprias
bull Navegadores
ndash Compreendem a maior parte delas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Sopa de letrinhas
ndash HTML x XHTML x HTML5
ndash CSS1 2 3
ndash JS 2x 30
ndash DOM 1 2
ndash AJAX
ndash JSONXML
ndash PHP 5 7
bull Navegadores
ndash Quaisquer Recentes
Conteuacutedo (estrutura)
Visual (cores e layout)
Estrutura Interna (memoacuteria)
Transferecircncia de Dados
Representaccedilatildeo de Dados
Processamento (accedilotildees)
Processamento no Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Estudaremos no Curso
ndash HTML5 HyperText Markup Language
bull Linguagem de Marcaccedilatildeo
ndash CSS3 Cascade Style Sheets
bull Folhas de Estilo
ndash DOM (brevemente) Document Object Model
bull Estrutura interna de um documento
ndash JS JavaScript
bull Accedilotildees do lado do cliente
ndash PHP PHP is a Hypertext Preprocessor
bull Tarefas do lado do servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Por que separar as accedilotildees
bull Cliente Navegador ldquoFront-endrdquo
ndash Processamento da interface
bull Servidor ldquoBack-endrdquo
ndash Armazena dados e estados
ndash Gerencia processos mais sensiacuteveis
bull Consequecircncia
ndash Necessidade de comunicaccedilatildeo Cliente-Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Criteacuterio de Aprovaccedilatildeo A = Maior nota entre AV1 AV2 AV3 B = Segunda maior nota entre AV1 AV2 AV3
Criteacuterios de Aprovaccedilatildeo (TODOS precisam ser atendidos)
1) A ge 40 2) B ge 40 3) A + B ge 120 (Meacutedia 60)
4) Frequecircncia ge 75 (No maacuteximo 4 faltas)
Inclui AV3 e vistas de prova Evite faltar e saia de feacuterias mais cedo
ATENCcedilAtildeO Se vocecirc tiver mais que uma nota abaixo de 40 ainda que o SIA aponte uma meacutedia maior que 60 vocecirc estaraacute REPROVADO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
BIBLIOGRAFIA E FONTES DE INFORMACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Baacutesica bull Livros Texto
ndash HTML 5 ndash Guia Praacutetico ndash TERUEL bull Disponiacutevel no Minha Biblioteca (ISBN 9788536519296)
ndash Desenvolvimento de Software II Introduccedilatildeo ao Desenv Web com HTML CSS JavaScript e PHP ndash MILETTO bull Disponiacutevel no Minha Biblioteca (ISBN 9788582601969)
ndash Refatorando HTML - Como Melhorar o Projeto de Aplicaccedilotildees Existentes ndash HAROLD bull Disponiacutevel no Minha Biblioteca (ISBN 9788577806706)
ndash JavaScript O Guia Definitivo ndash FLANAGAN bull Disponiacutevel no Minha Biblioteca (ISBN 9788565837484)
ndash PHP 5 - Conceitos Programaccedilatildeo e Integraccedilatildeo com Banco de Dados ndash SOARES bull Disponiacutevel no Minha Biblioteca (ISBN 9788536505633)
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Complementar
bull Material do Curso ndash Tecnologias Web (1ordf Ediccedilatildeo 2015)
bull Rodrigo Plotze (Disponiacutevel no SIA)
ndash Entre na disciplina e clique em ldquoMaterial Didaacuteticordquo
bull Livros Adicional ndash Ajax Rich Internet Applicationa e Desenvolvimento para
Web para Programadores bull Deitel amp Deitel Pearson 2009
ndash Disponiacutevel na Biblioteca Virtual
ndash Haacute outros no plano de ensino
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Adicional
bull Outros Livros Interessante na Biblioteca Virtual
ndash Aprenda a Criar Paacuteginas Web com HTML e XHTML
ndash HTML 5 Embarque Imediato
ndash Canvas HTML 5 Composiccedilatildeo Graacutefica e Interat na Web
ndash Desenvolvimento de Jogos em HTMl 5
bull Haacute muita coisa na internet
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Aula
bull Apresentaccedilotildees e outros itens de estudo
httpswwwcaetanoengbr
bull Selecione o anosemestre atual
bull Clique no nome da disciplina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Estudo
bull Conteuacutedo e atividades de preparaccedilatildeo
httpspadletcomdjcaetanodesweb
ATENCcedilAtildeO As postagens mais novas estaratildeo agrave esquerda
Aula NN Aprenda Mais
Poacutes Aula NN Material
Poacutes Aula NN Desafio
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia da Aula
Material Acesso ao Material
Apresentaccedilatildeo httpswwwcaetanoengbr (Desenvolvimento Web ndash Aula 1)
Livro Texto TERUEL paacuteginas 16 a 24
Aprenda Mais bull Referecircncia Elementos do HTML 5 httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PAacuteGINAS E APLICACcedilOtildeES COM TECNOLOGIA WEB
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Qual a diferenccedila entre eles
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees httpseditormethodac
HTML+CSS+JS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees docsgooglecom
HTML+CSS+JS+Java
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees
HTML+CSS+JS - DosBox
httpscodepenionodwspenVWOLPZ
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
RAacutePIDO HISTOacuteRICO
O QUE Eacute A INTERNET
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Origens
bull Redes locais x Inter-net
bull Diferenccedila importante
ndash Organizaccedilatildeo do traacutefego de dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Internet Comunicaccedilatildeo Hieraacuterquica
MAC Origem MAC Destino
IP Origem IP Destino
Dados
MAC Origem MAC Destino
IP Origem IP Destino
Controle de Transmissatildeo Dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Protocolos Caminho dos Dados
Call of Duty
TCP
IP
Fiacutesico
IP
TCP
Call of Duty
Cliente Servidor
IP 2002011004 IP 210212478
codactivisioncom
Domain Name System
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PROTOCOLO DE COMUNICACcedilAtildeO DA WEB
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O que eacute a World Wide Web
bull Chrome Firefox Edge Safari Opera
ndash Satildeo Navegadores
bull Eles acessam conteuacutedo de um servidor
ndash Apache Nginx IIS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Web Server x Navegador
bull Comunicaccedilatildeo por meio do HTTP
bull HTTP significa HyperText Transfer Protocol
ndash Especificado por Tim Berners-Lee em 1990
ndash Transmitir documentos hipertexto
Requisiccedilatildeo
Resposta
Me daacute a paacutegina indexhtml
404 ndash A paacutegina natildeo existe
httpwwwmeuservidorcomindexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Navegaccedilatildeo Segura
bull Comunicaccedilatildeo por meio do HTTPS
bull HTTP + TLS (Transport Layer Security)
ndash Criptografa as informaccedilotildees ponto-a-ponto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TECNOLOGIAS PARA A WEB HTML CSS
JAVASCRIPT PHP
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias para a Web
bull PaacuteginaAplicaccedilatildeo Web
ndash Conteuacutedo
ndash Forma
ndash Accedilotildees (cliente)
ndash Accedilotildees (servidor)
bull Cada parte
ndash Desenvolvida com tecnologias proacuteprias
bull Navegadores
ndash Compreendem a maior parte delas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Sopa de letrinhas
ndash HTML x XHTML x HTML5
ndash CSS1 2 3
ndash JS 2x 30
ndash DOM 1 2
ndash AJAX
ndash JSONXML
ndash PHP 5 7
bull Navegadores
ndash Quaisquer Recentes
Conteuacutedo (estrutura)
Visual (cores e layout)
Estrutura Interna (memoacuteria)
Transferecircncia de Dados
Representaccedilatildeo de Dados
Processamento (accedilotildees)
Processamento no Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Estudaremos no Curso
ndash HTML5 HyperText Markup Language
bull Linguagem de Marcaccedilatildeo
ndash CSS3 Cascade Style Sheets
bull Folhas de Estilo
ndash DOM (brevemente) Document Object Model
bull Estrutura interna de um documento
ndash JS JavaScript
bull Accedilotildees do lado do cliente
ndash PHP PHP is a Hypertext Preprocessor
bull Tarefas do lado do servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Por que separar as accedilotildees
bull Cliente Navegador ldquoFront-endrdquo
ndash Processamento da interface
bull Servidor ldquoBack-endrdquo
ndash Armazena dados e estados
ndash Gerencia processos mais sensiacuteveis
bull Consequecircncia
ndash Necessidade de comunicaccedilatildeo Cliente-Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
BIBLIOGRAFIA E FONTES DE INFORMACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Baacutesica bull Livros Texto
ndash HTML 5 ndash Guia Praacutetico ndash TERUEL bull Disponiacutevel no Minha Biblioteca (ISBN 9788536519296)
ndash Desenvolvimento de Software II Introduccedilatildeo ao Desenv Web com HTML CSS JavaScript e PHP ndash MILETTO bull Disponiacutevel no Minha Biblioteca (ISBN 9788582601969)
ndash Refatorando HTML - Como Melhorar o Projeto de Aplicaccedilotildees Existentes ndash HAROLD bull Disponiacutevel no Minha Biblioteca (ISBN 9788577806706)
ndash JavaScript O Guia Definitivo ndash FLANAGAN bull Disponiacutevel no Minha Biblioteca (ISBN 9788565837484)
ndash PHP 5 - Conceitos Programaccedilatildeo e Integraccedilatildeo com Banco de Dados ndash SOARES bull Disponiacutevel no Minha Biblioteca (ISBN 9788536505633)
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Complementar
bull Material do Curso ndash Tecnologias Web (1ordf Ediccedilatildeo 2015)
bull Rodrigo Plotze (Disponiacutevel no SIA)
ndash Entre na disciplina e clique em ldquoMaterial Didaacuteticordquo
bull Livros Adicional ndash Ajax Rich Internet Applicationa e Desenvolvimento para
Web para Programadores bull Deitel amp Deitel Pearson 2009
ndash Disponiacutevel na Biblioteca Virtual
ndash Haacute outros no plano de ensino
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Adicional
bull Outros Livros Interessante na Biblioteca Virtual
ndash Aprenda a Criar Paacuteginas Web com HTML e XHTML
ndash HTML 5 Embarque Imediato
ndash Canvas HTML 5 Composiccedilatildeo Graacutefica e Interat na Web
ndash Desenvolvimento de Jogos em HTMl 5
bull Haacute muita coisa na internet
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Aula
bull Apresentaccedilotildees e outros itens de estudo
httpswwwcaetanoengbr
bull Selecione o anosemestre atual
bull Clique no nome da disciplina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Estudo
bull Conteuacutedo e atividades de preparaccedilatildeo
httpspadletcomdjcaetanodesweb
ATENCcedilAtildeO As postagens mais novas estaratildeo agrave esquerda
Aula NN Aprenda Mais
Poacutes Aula NN Material
Poacutes Aula NN Desafio
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia da Aula
Material Acesso ao Material
Apresentaccedilatildeo httpswwwcaetanoengbr (Desenvolvimento Web ndash Aula 1)
Livro Texto TERUEL paacuteginas 16 a 24
Aprenda Mais bull Referecircncia Elementos do HTML 5 httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PAacuteGINAS E APLICACcedilOtildeES COM TECNOLOGIA WEB
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Qual a diferenccedila entre eles
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees httpseditormethodac
HTML+CSS+JS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees docsgooglecom
HTML+CSS+JS+Java
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees
HTML+CSS+JS - DosBox
httpscodepenionodwspenVWOLPZ
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
RAacutePIDO HISTOacuteRICO
O QUE Eacute A INTERNET
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Origens
bull Redes locais x Inter-net
bull Diferenccedila importante
ndash Organizaccedilatildeo do traacutefego de dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Internet Comunicaccedilatildeo Hieraacuterquica
MAC Origem MAC Destino
IP Origem IP Destino
Dados
MAC Origem MAC Destino
IP Origem IP Destino
Controle de Transmissatildeo Dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Protocolos Caminho dos Dados
Call of Duty
TCP
IP
Fiacutesico
IP
TCP
Call of Duty
Cliente Servidor
IP 2002011004 IP 210212478
codactivisioncom
Domain Name System
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PROTOCOLO DE COMUNICACcedilAtildeO DA WEB
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O que eacute a World Wide Web
bull Chrome Firefox Edge Safari Opera
ndash Satildeo Navegadores
bull Eles acessam conteuacutedo de um servidor
ndash Apache Nginx IIS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Web Server x Navegador
bull Comunicaccedilatildeo por meio do HTTP
bull HTTP significa HyperText Transfer Protocol
ndash Especificado por Tim Berners-Lee em 1990
ndash Transmitir documentos hipertexto
Requisiccedilatildeo
Resposta
Me daacute a paacutegina indexhtml
404 ndash A paacutegina natildeo existe
httpwwwmeuservidorcomindexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Navegaccedilatildeo Segura
bull Comunicaccedilatildeo por meio do HTTPS
bull HTTP + TLS (Transport Layer Security)
ndash Criptografa as informaccedilotildees ponto-a-ponto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TECNOLOGIAS PARA A WEB HTML CSS
JAVASCRIPT PHP
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias para a Web
bull PaacuteginaAplicaccedilatildeo Web
ndash Conteuacutedo
ndash Forma
ndash Accedilotildees (cliente)
ndash Accedilotildees (servidor)
bull Cada parte
ndash Desenvolvida com tecnologias proacuteprias
bull Navegadores
ndash Compreendem a maior parte delas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Sopa de letrinhas
ndash HTML x XHTML x HTML5
ndash CSS1 2 3
ndash JS 2x 30
ndash DOM 1 2
ndash AJAX
ndash JSONXML
ndash PHP 5 7
bull Navegadores
ndash Quaisquer Recentes
Conteuacutedo (estrutura)
Visual (cores e layout)
Estrutura Interna (memoacuteria)
Transferecircncia de Dados
Representaccedilatildeo de Dados
Processamento (accedilotildees)
Processamento no Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Estudaremos no Curso
ndash HTML5 HyperText Markup Language
bull Linguagem de Marcaccedilatildeo
ndash CSS3 Cascade Style Sheets
bull Folhas de Estilo
ndash DOM (brevemente) Document Object Model
bull Estrutura interna de um documento
ndash JS JavaScript
bull Accedilotildees do lado do cliente
ndash PHP PHP is a Hypertext Preprocessor
bull Tarefas do lado do servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Por que separar as accedilotildees
bull Cliente Navegador ldquoFront-endrdquo
ndash Processamento da interface
bull Servidor ldquoBack-endrdquo
ndash Armazena dados e estados
ndash Gerencia processos mais sensiacuteveis
bull Consequecircncia
ndash Necessidade de comunicaccedilatildeo Cliente-Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Baacutesica bull Livros Texto
ndash HTML 5 ndash Guia Praacutetico ndash TERUEL bull Disponiacutevel no Minha Biblioteca (ISBN 9788536519296)
ndash Desenvolvimento de Software II Introduccedilatildeo ao Desenv Web com HTML CSS JavaScript e PHP ndash MILETTO bull Disponiacutevel no Minha Biblioteca (ISBN 9788582601969)
ndash Refatorando HTML - Como Melhorar o Projeto de Aplicaccedilotildees Existentes ndash HAROLD bull Disponiacutevel no Minha Biblioteca (ISBN 9788577806706)
ndash JavaScript O Guia Definitivo ndash FLANAGAN bull Disponiacutevel no Minha Biblioteca (ISBN 9788565837484)
ndash PHP 5 - Conceitos Programaccedilatildeo e Integraccedilatildeo com Banco de Dados ndash SOARES bull Disponiacutevel no Minha Biblioteca (ISBN 9788536505633)
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Complementar
bull Material do Curso ndash Tecnologias Web (1ordf Ediccedilatildeo 2015)
bull Rodrigo Plotze (Disponiacutevel no SIA)
ndash Entre na disciplina e clique em ldquoMaterial Didaacuteticordquo
bull Livros Adicional ndash Ajax Rich Internet Applicationa e Desenvolvimento para
Web para Programadores bull Deitel amp Deitel Pearson 2009
ndash Disponiacutevel na Biblioteca Virtual
ndash Haacute outros no plano de ensino
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Adicional
bull Outros Livros Interessante na Biblioteca Virtual
ndash Aprenda a Criar Paacuteginas Web com HTML e XHTML
ndash HTML 5 Embarque Imediato
ndash Canvas HTML 5 Composiccedilatildeo Graacutefica e Interat na Web
ndash Desenvolvimento de Jogos em HTMl 5
bull Haacute muita coisa na internet
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Aula
bull Apresentaccedilotildees e outros itens de estudo
httpswwwcaetanoengbr
bull Selecione o anosemestre atual
bull Clique no nome da disciplina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Estudo
bull Conteuacutedo e atividades de preparaccedilatildeo
httpspadletcomdjcaetanodesweb
ATENCcedilAtildeO As postagens mais novas estaratildeo agrave esquerda
Aula NN Aprenda Mais
Poacutes Aula NN Material
Poacutes Aula NN Desafio
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia da Aula
Material Acesso ao Material
Apresentaccedilatildeo httpswwwcaetanoengbr (Desenvolvimento Web ndash Aula 1)
Livro Texto TERUEL paacuteginas 16 a 24
Aprenda Mais bull Referecircncia Elementos do HTML 5 httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PAacuteGINAS E APLICACcedilOtildeES COM TECNOLOGIA WEB
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Qual a diferenccedila entre eles
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees httpseditormethodac
HTML+CSS+JS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees docsgooglecom
HTML+CSS+JS+Java
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees
HTML+CSS+JS - DosBox
httpscodepenionodwspenVWOLPZ
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
RAacutePIDO HISTOacuteRICO
O QUE Eacute A INTERNET
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Origens
bull Redes locais x Inter-net
bull Diferenccedila importante
ndash Organizaccedilatildeo do traacutefego de dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Internet Comunicaccedilatildeo Hieraacuterquica
MAC Origem MAC Destino
IP Origem IP Destino
Dados
MAC Origem MAC Destino
IP Origem IP Destino
Controle de Transmissatildeo Dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Protocolos Caminho dos Dados
Call of Duty
TCP
IP
Fiacutesico
IP
TCP
Call of Duty
Cliente Servidor
IP 2002011004 IP 210212478
codactivisioncom
Domain Name System
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PROTOCOLO DE COMUNICACcedilAtildeO DA WEB
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O que eacute a World Wide Web
bull Chrome Firefox Edge Safari Opera
ndash Satildeo Navegadores
bull Eles acessam conteuacutedo de um servidor
ndash Apache Nginx IIS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Web Server x Navegador
bull Comunicaccedilatildeo por meio do HTTP
bull HTTP significa HyperText Transfer Protocol
ndash Especificado por Tim Berners-Lee em 1990
ndash Transmitir documentos hipertexto
Requisiccedilatildeo
Resposta
Me daacute a paacutegina indexhtml
404 ndash A paacutegina natildeo existe
httpwwwmeuservidorcomindexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Navegaccedilatildeo Segura
bull Comunicaccedilatildeo por meio do HTTPS
bull HTTP + TLS (Transport Layer Security)
ndash Criptografa as informaccedilotildees ponto-a-ponto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TECNOLOGIAS PARA A WEB HTML CSS
JAVASCRIPT PHP
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias para a Web
bull PaacuteginaAplicaccedilatildeo Web
ndash Conteuacutedo
ndash Forma
ndash Accedilotildees (cliente)
ndash Accedilotildees (servidor)
bull Cada parte
ndash Desenvolvida com tecnologias proacuteprias
bull Navegadores
ndash Compreendem a maior parte delas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Sopa de letrinhas
ndash HTML x XHTML x HTML5
ndash CSS1 2 3
ndash JS 2x 30
ndash DOM 1 2
ndash AJAX
ndash JSONXML
ndash PHP 5 7
bull Navegadores
ndash Quaisquer Recentes
Conteuacutedo (estrutura)
Visual (cores e layout)
Estrutura Interna (memoacuteria)
Transferecircncia de Dados
Representaccedilatildeo de Dados
Processamento (accedilotildees)
Processamento no Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Estudaremos no Curso
ndash HTML5 HyperText Markup Language
bull Linguagem de Marcaccedilatildeo
ndash CSS3 Cascade Style Sheets
bull Folhas de Estilo
ndash DOM (brevemente) Document Object Model
bull Estrutura interna de um documento
ndash JS JavaScript
bull Accedilotildees do lado do cliente
ndash PHP PHP is a Hypertext Preprocessor
bull Tarefas do lado do servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Por que separar as accedilotildees
bull Cliente Navegador ldquoFront-endrdquo
ndash Processamento da interface
bull Servidor ldquoBack-endrdquo
ndash Armazena dados e estados
ndash Gerencia processos mais sensiacuteveis
bull Consequecircncia
ndash Necessidade de comunicaccedilatildeo Cliente-Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Complementar
bull Material do Curso ndash Tecnologias Web (1ordf Ediccedilatildeo 2015)
bull Rodrigo Plotze (Disponiacutevel no SIA)
ndash Entre na disciplina e clique em ldquoMaterial Didaacuteticordquo
bull Livros Adicional ndash Ajax Rich Internet Applicationa e Desenvolvimento para
Web para Programadores bull Deitel amp Deitel Pearson 2009
ndash Disponiacutevel na Biblioteca Virtual
ndash Haacute outros no plano de ensino
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Adicional
bull Outros Livros Interessante na Biblioteca Virtual
ndash Aprenda a Criar Paacuteginas Web com HTML e XHTML
ndash HTML 5 Embarque Imediato
ndash Canvas HTML 5 Composiccedilatildeo Graacutefica e Interat na Web
ndash Desenvolvimento de Jogos em HTMl 5
bull Haacute muita coisa na internet
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Aula
bull Apresentaccedilotildees e outros itens de estudo
httpswwwcaetanoengbr
bull Selecione o anosemestre atual
bull Clique no nome da disciplina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Estudo
bull Conteuacutedo e atividades de preparaccedilatildeo
httpspadletcomdjcaetanodesweb
ATENCcedilAtildeO As postagens mais novas estaratildeo agrave esquerda
Aula NN Aprenda Mais
Poacutes Aula NN Material
Poacutes Aula NN Desafio
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia da Aula
Material Acesso ao Material
Apresentaccedilatildeo httpswwwcaetanoengbr (Desenvolvimento Web ndash Aula 1)
Livro Texto TERUEL paacuteginas 16 a 24
Aprenda Mais bull Referecircncia Elementos do HTML 5 httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PAacuteGINAS E APLICACcedilOtildeES COM TECNOLOGIA WEB
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Qual a diferenccedila entre eles
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees httpseditormethodac
HTML+CSS+JS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees docsgooglecom
HTML+CSS+JS+Java
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees
HTML+CSS+JS - DosBox
httpscodepenionodwspenVWOLPZ
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
RAacutePIDO HISTOacuteRICO
O QUE Eacute A INTERNET
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Origens
bull Redes locais x Inter-net
bull Diferenccedila importante
ndash Organizaccedilatildeo do traacutefego de dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Internet Comunicaccedilatildeo Hieraacuterquica
MAC Origem MAC Destino
IP Origem IP Destino
Dados
MAC Origem MAC Destino
IP Origem IP Destino
Controle de Transmissatildeo Dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Protocolos Caminho dos Dados
Call of Duty
TCP
IP
Fiacutesico
IP
TCP
Call of Duty
Cliente Servidor
IP 2002011004 IP 210212478
codactivisioncom
Domain Name System
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PROTOCOLO DE COMUNICACcedilAtildeO DA WEB
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O que eacute a World Wide Web
bull Chrome Firefox Edge Safari Opera
ndash Satildeo Navegadores
bull Eles acessam conteuacutedo de um servidor
ndash Apache Nginx IIS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Web Server x Navegador
bull Comunicaccedilatildeo por meio do HTTP
bull HTTP significa HyperText Transfer Protocol
ndash Especificado por Tim Berners-Lee em 1990
ndash Transmitir documentos hipertexto
Requisiccedilatildeo
Resposta
Me daacute a paacutegina indexhtml
404 ndash A paacutegina natildeo existe
httpwwwmeuservidorcomindexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Navegaccedilatildeo Segura
bull Comunicaccedilatildeo por meio do HTTPS
bull HTTP + TLS (Transport Layer Security)
ndash Criptografa as informaccedilotildees ponto-a-ponto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TECNOLOGIAS PARA A WEB HTML CSS
JAVASCRIPT PHP
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias para a Web
bull PaacuteginaAplicaccedilatildeo Web
ndash Conteuacutedo
ndash Forma
ndash Accedilotildees (cliente)
ndash Accedilotildees (servidor)
bull Cada parte
ndash Desenvolvida com tecnologias proacuteprias
bull Navegadores
ndash Compreendem a maior parte delas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Sopa de letrinhas
ndash HTML x XHTML x HTML5
ndash CSS1 2 3
ndash JS 2x 30
ndash DOM 1 2
ndash AJAX
ndash JSONXML
ndash PHP 5 7
bull Navegadores
ndash Quaisquer Recentes
Conteuacutedo (estrutura)
Visual (cores e layout)
Estrutura Interna (memoacuteria)
Transferecircncia de Dados
Representaccedilatildeo de Dados
Processamento (accedilotildees)
Processamento no Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Estudaremos no Curso
ndash HTML5 HyperText Markup Language
bull Linguagem de Marcaccedilatildeo
ndash CSS3 Cascade Style Sheets
bull Folhas de Estilo
ndash DOM (brevemente) Document Object Model
bull Estrutura interna de um documento
ndash JS JavaScript
bull Accedilotildees do lado do cliente
ndash PHP PHP is a Hypertext Preprocessor
bull Tarefas do lado do servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Por que separar as accedilotildees
bull Cliente Navegador ldquoFront-endrdquo
ndash Processamento da interface
bull Servidor ldquoBack-endrdquo
ndash Armazena dados e estados
ndash Gerencia processos mais sensiacuteveis
bull Consequecircncia
ndash Necessidade de comunicaccedilatildeo Cliente-Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia Adicional
bull Outros Livros Interessante na Biblioteca Virtual
ndash Aprenda a Criar Paacuteginas Web com HTML e XHTML
ndash HTML 5 Embarque Imediato
ndash Canvas HTML 5 Composiccedilatildeo Graacutefica e Interat na Web
ndash Desenvolvimento de Jogos em HTMl 5
bull Haacute muita coisa na internet
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Aula
bull Apresentaccedilotildees e outros itens de estudo
httpswwwcaetanoengbr
bull Selecione o anosemestre atual
bull Clique no nome da disciplina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Estudo
bull Conteuacutedo e atividades de preparaccedilatildeo
httpspadletcomdjcaetanodesweb
ATENCcedilAtildeO As postagens mais novas estaratildeo agrave esquerda
Aula NN Aprenda Mais
Poacutes Aula NN Material
Poacutes Aula NN Desafio
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia da Aula
Material Acesso ao Material
Apresentaccedilatildeo httpswwwcaetanoengbr (Desenvolvimento Web ndash Aula 1)
Livro Texto TERUEL paacuteginas 16 a 24
Aprenda Mais bull Referecircncia Elementos do HTML 5 httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PAacuteGINAS E APLICACcedilOtildeES COM TECNOLOGIA WEB
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Qual a diferenccedila entre eles
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees httpseditormethodac
HTML+CSS+JS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees docsgooglecom
HTML+CSS+JS+Java
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees
HTML+CSS+JS - DosBox
httpscodepenionodwspenVWOLPZ
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
RAacutePIDO HISTOacuteRICO
O QUE Eacute A INTERNET
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Origens
bull Redes locais x Inter-net
bull Diferenccedila importante
ndash Organizaccedilatildeo do traacutefego de dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Internet Comunicaccedilatildeo Hieraacuterquica
MAC Origem MAC Destino
IP Origem IP Destino
Dados
MAC Origem MAC Destino
IP Origem IP Destino
Controle de Transmissatildeo Dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Protocolos Caminho dos Dados
Call of Duty
TCP
IP
Fiacutesico
IP
TCP
Call of Duty
Cliente Servidor
IP 2002011004 IP 210212478
codactivisioncom
Domain Name System
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PROTOCOLO DE COMUNICACcedilAtildeO DA WEB
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O que eacute a World Wide Web
bull Chrome Firefox Edge Safari Opera
ndash Satildeo Navegadores
bull Eles acessam conteuacutedo de um servidor
ndash Apache Nginx IIS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Web Server x Navegador
bull Comunicaccedilatildeo por meio do HTTP
bull HTTP significa HyperText Transfer Protocol
ndash Especificado por Tim Berners-Lee em 1990
ndash Transmitir documentos hipertexto
Requisiccedilatildeo
Resposta
Me daacute a paacutegina indexhtml
404 ndash A paacutegina natildeo existe
httpwwwmeuservidorcomindexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Navegaccedilatildeo Segura
bull Comunicaccedilatildeo por meio do HTTPS
bull HTTP + TLS (Transport Layer Security)
ndash Criptografa as informaccedilotildees ponto-a-ponto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TECNOLOGIAS PARA A WEB HTML CSS
JAVASCRIPT PHP
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias para a Web
bull PaacuteginaAplicaccedilatildeo Web
ndash Conteuacutedo
ndash Forma
ndash Accedilotildees (cliente)
ndash Accedilotildees (servidor)
bull Cada parte
ndash Desenvolvida com tecnologias proacuteprias
bull Navegadores
ndash Compreendem a maior parte delas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Sopa de letrinhas
ndash HTML x XHTML x HTML5
ndash CSS1 2 3
ndash JS 2x 30
ndash DOM 1 2
ndash AJAX
ndash JSONXML
ndash PHP 5 7
bull Navegadores
ndash Quaisquer Recentes
Conteuacutedo (estrutura)
Visual (cores e layout)
Estrutura Interna (memoacuteria)
Transferecircncia de Dados
Representaccedilatildeo de Dados
Processamento (accedilotildees)
Processamento no Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Estudaremos no Curso
ndash HTML5 HyperText Markup Language
bull Linguagem de Marcaccedilatildeo
ndash CSS3 Cascade Style Sheets
bull Folhas de Estilo
ndash DOM (brevemente) Document Object Model
bull Estrutura interna de um documento
ndash JS JavaScript
bull Accedilotildees do lado do cliente
ndash PHP PHP is a Hypertext Preprocessor
bull Tarefas do lado do servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Por que separar as accedilotildees
bull Cliente Navegador ldquoFront-endrdquo
ndash Processamento da interface
bull Servidor ldquoBack-endrdquo
ndash Armazena dados e estados
ndash Gerencia processos mais sensiacuteveis
bull Consequecircncia
ndash Necessidade de comunicaccedilatildeo Cliente-Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Aula
bull Apresentaccedilotildees e outros itens de estudo
httpswwwcaetanoengbr
bull Selecione o anosemestre atual
bull Clique no nome da disciplina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Estudo
bull Conteuacutedo e atividades de preparaccedilatildeo
httpspadletcomdjcaetanodesweb
ATENCcedilAtildeO As postagens mais novas estaratildeo agrave esquerda
Aula NN Aprenda Mais
Poacutes Aula NN Material
Poacutes Aula NN Desafio
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia da Aula
Material Acesso ao Material
Apresentaccedilatildeo httpswwwcaetanoengbr (Desenvolvimento Web ndash Aula 1)
Livro Texto TERUEL paacuteginas 16 a 24
Aprenda Mais bull Referecircncia Elementos do HTML 5 httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PAacuteGINAS E APLICACcedilOtildeES COM TECNOLOGIA WEB
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Qual a diferenccedila entre eles
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees httpseditormethodac
HTML+CSS+JS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees docsgooglecom
HTML+CSS+JS+Java
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees
HTML+CSS+JS - DosBox
httpscodepenionodwspenVWOLPZ
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
RAacutePIDO HISTOacuteRICO
O QUE Eacute A INTERNET
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Origens
bull Redes locais x Inter-net
bull Diferenccedila importante
ndash Organizaccedilatildeo do traacutefego de dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Internet Comunicaccedilatildeo Hieraacuterquica
MAC Origem MAC Destino
IP Origem IP Destino
Dados
MAC Origem MAC Destino
IP Origem IP Destino
Controle de Transmissatildeo Dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Protocolos Caminho dos Dados
Call of Duty
TCP
IP
Fiacutesico
IP
TCP
Call of Duty
Cliente Servidor
IP 2002011004 IP 210212478
codactivisioncom
Domain Name System
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PROTOCOLO DE COMUNICACcedilAtildeO DA WEB
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O que eacute a World Wide Web
bull Chrome Firefox Edge Safari Opera
ndash Satildeo Navegadores
bull Eles acessam conteuacutedo de um servidor
ndash Apache Nginx IIS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Web Server x Navegador
bull Comunicaccedilatildeo por meio do HTTP
bull HTTP significa HyperText Transfer Protocol
ndash Especificado por Tim Berners-Lee em 1990
ndash Transmitir documentos hipertexto
Requisiccedilatildeo
Resposta
Me daacute a paacutegina indexhtml
404 ndash A paacutegina natildeo existe
httpwwwmeuservidorcomindexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Navegaccedilatildeo Segura
bull Comunicaccedilatildeo por meio do HTTPS
bull HTTP + TLS (Transport Layer Security)
ndash Criptografa as informaccedilotildees ponto-a-ponto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TECNOLOGIAS PARA A WEB HTML CSS
JAVASCRIPT PHP
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias para a Web
bull PaacuteginaAplicaccedilatildeo Web
ndash Conteuacutedo
ndash Forma
ndash Accedilotildees (cliente)
ndash Accedilotildees (servidor)
bull Cada parte
ndash Desenvolvida com tecnologias proacuteprias
bull Navegadores
ndash Compreendem a maior parte delas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Sopa de letrinhas
ndash HTML x XHTML x HTML5
ndash CSS1 2 3
ndash JS 2x 30
ndash DOM 1 2
ndash AJAX
ndash JSONXML
ndash PHP 5 7
bull Navegadores
ndash Quaisquer Recentes
Conteuacutedo (estrutura)
Visual (cores e layout)
Estrutura Interna (memoacuteria)
Transferecircncia de Dados
Representaccedilatildeo de Dados
Processamento (accedilotildees)
Processamento no Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Estudaremos no Curso
ndash HTML5 HyperText Markup Language
bull Linguagem de Marcaccedilatildeo
ndash CSS3 Cascade Style Sheets
bull Folhas de Estilo
ndash DOM (brevemente) Document Object Model
bull Estrutura interna de um documento
ndash JS JavaScript
bull Accedilotildees do lado do cliente
ndash PHP PHP is a Hypertext Preprocessor
bull Tarefas do lado do servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Por que separar as accedilotildees
bull Cliente Navegador ldquoFront-endrdquo
ndash Processamento da interface
bull Servidor ldquoBack-endrdquo
ndash Armazena dados e estados
ndash Gerencia processos mais sensiacuteveis
bull Consequecircncia
ndash Necessidade de comunicaccedilatildeo Cliente-Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Material de Estudo
bull Conteuacutedo e atividades de preparaccedilatildeo
httpspadletcomdjcaetanodesweb
ATENCcedilAtildeO As postagens mais novas estaratildeo agrave esquerda
Aula NN Aprenda Mais
Poacutes Aula NN Material
Poacutes Aula NN Desafio
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia da Aula
Material Acesso ao Material
Apresentaccedilatildeo httpswwwcaetanoengbr (Desenvolvimento Web ndash Aula 1)
Livro Texto TERUEL paacuteginas 16 a 24
Aprenda Mais bull Referecircncia Elementos do HTML 5 httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PAacuteGINAS E APLICACcedilOtildeES COM TECNOLOGIA WEB
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Qual a diferenccedila entre eles
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees httpseditormethodac
HTML+CSS+JS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees docsgooglecom
HTML+CSS+JS+Java
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees
HTML+CSS+JS - DosBox
httpscodepenionodwspenVWOLPZ
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
RAacutePIDO HISTOacuteRICO
O QUE Eacute A INTERNET
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Origens
bull Redes locais x Inter-net
bull Diferenccedila importante
ndash Organizaccedilatildeo do traacutefego de dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Internet Comunicaccedilatildeo Hieraacuterquica
MAC Origem MAC Destino
IP Origem IP Destino
Dados
MAC Origem MAC Destino
IP Origem IP Destino
Controle de Transmissatildeo Dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Protocolos Caminho dos Dados
Call of Duty
TCP
IP
Fiacutesico
IP
TCP
Call of Duty
Cliente Servidor
IP 2002011004 IP 210212478
codactivisioncom
Domain Name System
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PROTOCOLO DE COMUNICACcedilAtildeO DA WEB
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O que eacute a World Wide Web
bull Chrome Firefox Edge Safari Opera
ndash Satildeo Navegadores
bull Eles acessam conteuacutedo de um servidor
ndash Apache Nginx IIS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Web Server x Navegador
bull Comunicaccedilatildeo por meio do HTTP
bull HTTP significa HyperText Transfer Protocol
ndash Especificado por Tim Berners-Lee em 1990
ndash Transmitir documentos hipertexto
Requisiccedilatildeo
Resposta
Me daacute a paacutegina indexhtml
404 ndash A paacutegina natildeo existe
httpwwwmeuservidorcomindexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Navegaccedilatildeo Segura
bull Comunicaccedilatildeo por meio do HTTPS
bull HTTP + TLS (Transport Layer Security)
ndash Criptografa as informaccedilotildees ponto-a-ponto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TECNOLOGIAS PARA A WEB HTML CSS
JAVASCRIPT PHP
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias para a Web
bull PaacuteginaAplicaccedilatildeo Web
ndash Conteuacutedo
ndash Forma
ndash Accedilotildees (cliente)
ndash Accedilotildees (servidor)
bull Cada parte
ndash Desenvolvida com tecnologias proacuteprias
bull Navegadores
ndash Compreendem a maior parte delas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Sopa de letrinhas
ndash HTML x XHTML x HTML5
ndash CSS1 2 3
ndash JS 2x 30
ndash DOM 1 2
ndash AJAX
ndash JSONXML
ndash PHP 5 7
bull Navegadores
ndash Quaisquer Recentes
Conteuacutedo (estrutura)
Visual (cores e layout)
Estrutura Interna (memoacuteria)
Transferecircncia de Dados
Representaccedilatildeo de Dados
Processamento (accedilotildees)
Processamento no Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Estudaremos no Curso
ndash HTML5 HyperText Markup Language
bull Linguagem de Marcaccedilatildeo
ndash CSS3 Cascade Style Sheets
bull Folhas de Estilo
ndash DOM (brevemente) Document Object Model
bull Estrutura interna de um documento
ndash JS JavaScript
bull Accedilotildees do lado do cliente
ndash PHP PHP is a Hypertext Preprocessor
bull Tarefas do lado do servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Por que separar as accedilotildees
bull Cliente Navegador ldquoFront-endrdquo
ndash Processamento da interface
bull Servidor ldquoBack-endrdquo
ndash Armazena dados e estados
ndash Gerencia processos mais sensiacuteveis
bull Consequecircncia
ndash Necessidade de comunicaccedilatildeo Cliente-Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bibliografia da Aula
Material Acesso ao Material
Apresentaccedilatildeo httpswwwcaetanoengbr (Desenvolvimento Web ndash Aula 1)
Livro Texto TERUEL paacuteginas 16 a 24
Aprenda Mais bull Referecircncia Elementos do HTML 5 httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PAacuteGINAS E APLICACcedilOtildeES COM TECNOLOGIA WEB
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Qual a diferenccedila entre eles
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees httpseditormethodac
HTML+CSS+JS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees docsgooglecom
HTML+CSS+JS+Java
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees
HTML+CSS+JS - DosBox
httpscodepenionodwspenVWOLPZ
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
RAacutePIDO HISTOacuteRICO
O QUE Eacute A INTERNET
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Origens
bull Redes locais x Inter-net
bull Diferenccedila importante
ndash Organizaccedilatildeo do traacutefego de dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Internet Comunicaccedilatildeo Hieraacuterquica
MAC Origem MAC Destino
IP Origem IP Destino
Dados
MAC Origem MAC Destino
IP Origem IP Destino
Controle de Transmissatildeo Dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Protocolos Caminho dos Dados
Call of Duty
TCP
IP
Fiacutesico
IP
TCP
Call of Duty
Cliente Servidor
IP 2002011004 IP 210212478
codactivisioncom
Domain Name System
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PROTOCOLO DE COMUNICACcedilAtildeO DA WEB
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O que eacute a World Wide Web
bull Chrome Firefox Edge Safari Opera
ndash Satildeo Navegadores
bull Eles acessam conteuacutedo de um servidor
ndash Apache Nginx IIS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Web Server x Navegador
bull Comunicaccedilatildeo por meio do HTTP
bull HTTP significa HyperText Transfer Protocol
ndash Especificado por Tim Berners-Lee em 1990
ndash Transmitir documentos hipertexto
Requisiccedilatildeo
Resposta
Me daacute a paacutegina indexhtml
404 ndash A paacutegina natildeo existe
httpwwwmeuservidorcomindexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Navegaccedilatildeo Segura
bull Comunicaccedilatildeo por meio do HTTPS
bull HTTP + TLS (Transport Layer Security)
ndash Criptografa as informaccedilotildees ponto-a-ponto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TECNOLOGIAS PARA A WEB HTML CSS
JAVASCRIPT PHP
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias para a Web
bull PaacuteginaAplicaccedilatildeo Web
ndash Conteuacutedo
ndash Forma
ndash Accedilotildees (cliente)
ndash Accedilotildees (servidor)
bull Cada parte
ndash Desenvolvida com tecnologias proacuteprias
bull Navegadores
ndash Compreendem a maior parte delas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Sopa de letrinhas
ndash HTML x XHTML x HTML5
ndash CSS1 2 3
ndash JS 2x 30
ndash DOM 1 2
ndash AJAX
ndash JSONXML
ndash PHP 5 7
bull Navegadores
ndash Quaisquer Recentes
Conteuacutedo (estrutura)
Visual (cores e layout)
Estrutura Interna (memoacuteria)
Transferecircncia de Dados
Representaccedilatildeo de Dados
Processamento (accedilotildees)
Processamento no Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Estudaremos no Curso
ndash HTML5 HyperText Markup Language
bull Linguagem de Marcaccedilatildeo
ndash CSS3 Cascade Style Sheets
bull Folhas de Estilo
ndash DOM (brevemente) Document Object Model
bull Estrutura interna de um documento
ndash JS JavaScript
bull Accedilotildees do lado do cliente
ndash PHP PHP is a Hypertext Preprocessor
bull Tarefas do lado do servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Por que separar as accedilotildees
bull Cliente Navegador ldquoFront-endrdquo
ndash Processamento da interface
bull Servidor ldquoBack-endrdquo
ndash Armazena dados e estados
ndash Gerencia processos mais sensiacuteveis
bull Consequecircncia
ndash Necessidade de comunicaccedilatildeo Cliente-Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PAacuteGINAS E APLICACcedilOtildeES COM TECNOLOGIA WEB
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Qual a diferenccedila entre eles
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees httpseditormethodac
HTML+CSS+JS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees docsgooglecom
HTML+CSS+JS+Java
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees
HTML+CSS+JS - DosBox
httpscodepenionodwspenVWOLPZ
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
RAacutePIDO HISTOacuteRICO
O QUE Eacute A INTERNET
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Origens
bull Redes locais x Inter-net
bull Diferenccedila importante
ndash Organizaccedilatildeo do traacutefego de dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Internet Comunicaccedilatildeo Hieraacuterquica
MAC Origem MAC Destino
IP Origem IP Destino
Dados
MAC Origem MAC Destino
IP Origem IP Destino
Controle de Transmissatildeo Dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Protocolos Caminho dos Dados
Call of Duty
TCP
IP
Fiacutesico
IP
TCP
Call of Duty
Cliente Servidor
IP 2002011004 IP 210212478
codactivisioncom
Domain Name System
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PROTOCOLO DE COMUNICACcedilAtildeO DA WEB
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O que eacute a World Wide Web
bull Chrome Firefox Edge Safari Opera
ndash Satildeo Navegadores
bull Eles acessam conteuacutedo de um servidor
ndash Apache Nginx IIS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Web Server x Navegador
bull Comunicaccedilatildeo por meio do HTTP
bull HTTP significa HyperText Transfer Protocol
ndash Especificado por Tim Berners-Lee em 1990
ndash Transmitir documentos hipertexto
Requisiccedilatildeo
Resposta
Me daacute a paacutegina indexhtml
404 ndash A paacutegina natildeo existe
httpwwwmeuservidorcomindexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Navegaccedilatildeo Segura
bull Comunicaccedilatildeo por meio do HTTPS
bull HTTP + TLS (Transport Layer Security)
ndash Criptografa as informaccedilotildees ponto-a-ponto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TECNOLOGIAS PARA A WEB HTML CSS
JAVASCRIPT PHP
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias para a Web
bull PaacuteginaAplicaccedilatildeo Web
ndash Conteuacutedo
ndash Forma
ndash Accedilotildees (cliente)
ndash Accedilotildees (servidor)
bull Cada parte
ndash Desenvolvida com tecnologias proacuteprias
bull Navegadores
ndash Compreendem a maior parte delas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Sopa de letrinhas
ndash HTML x XHTML x HTML5
ndash CSS1 2 3
ndash JS 2x 30
ndash DOM 1 2
ndash AJAX
ndash JSONXML
ndash PHP 5 7
bull Navegadores
ndash Quaisquer Recentes
Conteuacutedo (estrutura)
Visual (cores e layout)
Estrutura Interna (memoacuteria)
Transferecircncia de Dados
Representaccedilatildeo de Dados
Processamento (accedilotildees)
Processamento no Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Estudaremos no Curso
ndash HTML5 HyperText Markup Language
bull Linguagem de Marcaccedilatildeo
ndash CSS3 Cascade Style Sheets
bull Folhas de Estilo
ndash DOM (brevemente) Document Object Model
bull Estrutura interna de um documento
ndash JS JavaScript
bull Accedilotildees do lado do cliente
ndash PHP PHP is a Hypertext Preprocessor
bull Tarefas do lado do servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Por que separar as accedilotildees
bull Cliente Navegador ldquoFront-endrdquo
ndash Processamento da interface
bull Servidor ldquoBack-endrdquo
ndash Armazena dados e estados
ndash Gerencia processos mais sensiacuteveis
bull Consequecircncia
ndash Necessidade de comunicaccedilatildeo Cliente-Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Qual a diferenccedila entre eles
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees httpseditormethodac
HTML+CSS+JS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees docsgooglecom
HTML+CSS+JS+Java
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees
HTML+CSS+JS - DosBox
httpscodepenionodwspenVWOLPZ
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
RAacutePIDO HISTOacuteRICO
O QUE Eacute A INTERNET
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Origens
bull Redes locais x Inter-net
bull Diferenccedila importante
ndash Organizaccedilatildeo do traacutefego de dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Internet Comunicaccedilatildeo Hieraacuterquica
MAC Origem MAC Destino
IP Origem IP Destino
Dados
MAC Origem MAC Destino
IP Origem IP Destino
Controle de Transmissatildeo Dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Protocolos Caminho dos Dados
Call of Duty
TCP
IP
Fiacutesico
IP
TCP
Call of Duty
Cliente Servidor
IP 2002011004 IP 210212478
codactivisioncom
Domain Name System
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PROTOCOLO DE COMUNICACcedilAtildeO DA WEB
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O que eacute a World Wide Web
bull Chrome Firefox Edge Safari Opera
ndash Satildeo Navegadores
bull Eles acessam conteuacutedo de um servidor
ndash Apache Nginx IIS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Web Server x Navegador
bull Comunicaccedilatildeo por meio do HTTP
bull HTTP significa HyperText Transfer Protocol
ndash Especificado por Tim Berners-Lee em 1990
ndash Transmitir documentos hipertexto
Requisiccedilatildeo
Resposta
Me daacute a paacutegina indexhtml
404 ndash A paacutegina natildeo existe
httpwwwmeuservidorcomindexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Navegaccedilatildeo Segura
bull Comunicaccedilatildeo por meio do HTTPS
bull HTTP + TLS (Transport Layer Security)
ndash Criptografa as informaccedilotildees ponto-a-ponto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TECNOLOGIAS PARA A WEB HTML CSS
JAVASCRIPT PHP
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias para a Web
bull PaacuteginaAplicaccedilatildeo Web
ndash Conteuacutedo
ndash Forma
ndash Accedilotildees (cliente)
ndash Accedilotildees (servidor)
bull Cada parte
ndash Desenvolvida com tecnologias proacuteprias
bull Navegadores
ndash Compreendem a maior parte delas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Sopa de letrinhas
ndash HTML x XHTML x HTML5
ndash CSS1 2 3
ndash JS 2x 30
ndash DOM 1 2
ndash AJAX
ndash JSONXML
ndash PHP 5 7
bull Navegadores
ndash Quaisquer Recentes
Conteuacutedo (estrutura)
Visual (cores e layout)
Estrutura Interna (memoacuteria)
Transferecircncia de Dados
Representaccedilatildeo de Dados
Processamento (accedilotildees)
Processamento no Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Estudaremos no Curso
ndash HTML5 HyperText Markup Language
bull Linguagem de Marcaccedilatildeo
ndash CSS3 Cascade Style Sheets
bull Folhas de Estilo
ndash DOM (brevemente) Document Object Model
bull Estrutura interna de um documento
ndash JS JavaScript
bull Accedilotildees do lado do cliente
ndash PHP PHP is a Hypertext Preprocessor
bull Tarefas do lado do servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Por que separar as accedilotildees
bull Cliente Navegador ldquoFront-endrdquo
ndash Processamento da interface
bull Servidor ldquoBack-endrdquo
ndash Armazena dados e estados
ndash Gerencia processos mais sensiacuteveis
bull Consequecircncia
ndash Necessidade de comunicaccedilatildeo Cliente-Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Qual a diferenccedila entre eles
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees httpseditormethodac
HTML+CSS+JS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees docsgooglecom
HTML+CSS+JS+Java
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees
HTML+CSS+JS - DosBox
httpscodepenionodwspenVWOLPZ
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
RAacutePIDO HISTOacuteRICO
O QUE Eacute A INTERNET
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Origens
bull Redes locais x Inter-net
bull Diferenccedila importante
ndash Organizaccedilatildeo do traacutefego de dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Internet Comunicaccedilatildeo Hieraacuterquica
MAC Origem MAC Destino
IP Origem IP Destino
Dados
MAC Origem MAC Destino
IP Origem IP Destino
Controle de Transmissatildeo Dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Protocolos Caminho dos Dados
Call of Duty
TCP
IP
Fiacutesico
IP
TCP
Call of Duty
Cliente Servidor
IP 2002011004 IP 210212478
codactivisioncom
Domain Name System
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PROTOCOLO DE COMUNICACcedilAtildeO DA WEB
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O que eacute a World Wide Web
bull Chrome Firefox Edge Safari Opera
ndash Satildeo Navegadores
bull Eles acessam conteuacutedo de um servidor
ndash Apache Nginx IIS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Web Server x Navegador
bull Comunicaccedilatildeo por meio do HTTP
bull HTTP significa HyperText Transfer Protocol
ndash Especificado por Tim Berners-Lee em 1990
ndash Transmitir documentos hipertexto
Requisiccedilatildeo
Resposta
Me daacute a paacutegina indexhtml
404 ndash A paacutegina natildeo existe
httpwwwmeuservidorcomindexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Navegaccedilatildeo Segura
bull Comunicaccedilatildeo por meio do HTTPS
bull HTTP + TLS (Transport Layer Security)
ndash Criptografa as informaccedilotildees ponto-a-ponto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TECNOLOGIAS PARA A WEB HTML CSS
JAVASCRIPT PHP
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias para a Web
bull PaacuteginaAplicaccedilatildeo Web
ndash Conteuacutedo
ndash Forma
ndash Accedilotildees (cliente)
ndash Accedilotildees (servidor)
bull Cada parte
ndash Desenvolvida com tecnologias proacuteprias
bull Navegadores
ndash Compreendem a maior parte delas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Sopa de letrinhas
ndash HTML x XHTML x HTML5
ndash CSS1 2 3
ndash JS 2x 30
ndash DOM 1 2
ndash AJAX
ndash JSONXML
ndash PHP 5 7
bull Navegadores
ndash Quaisquer Recentes
Conteuacutedo (estrutura)
Visual (cores e layout)
Estrutura Interna (memoacuteria)
Transferecircncia de Dados
Representaccedilatildeo de Dados
Processamento (accedilotildees)
Processamento no Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Estudaremos no Curso
ndash HTML5 HyperText Markup Language
bull Linguagem de Marcaccedilatildeo
ndash CSS3 Cascade Style Sheets
bull Folhas de Estilo
ndash DOM (brevemente) Document Object Model
bull Estrutura interna de um documento
ndash JS JavaScript
bull Accedilotildees do lado do cliente
ndash PHP PHP is a Hypertext Preprocessor
bull Tarefas do lado do servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Por que separar as accedilotildees
bull Cliente Navegador ldquoFront-endrdquo
ndash Processamento da interface
bull Servidor ldquoBack-endrdquo
ndash Armazena dados e estados
ndash Gerencia processos mais sensiacuteveis
bull Consequecircncia
ndash Necessidade de comunicaccedilatildeo Cliente-Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Qual a diferenccedila entre eles
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees httpseditormethodac
HTML+CSS+JS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees docsgooglecom
HTML+CSS+JS+Java
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees
HTML+CSS+JS - DosBox
httpscodepenionodwspenVWOLPZ
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
RAacutePIDO HISTOacuteRICO
O QUE Eacute A INTERNET
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Origens
bull Redes locais x Inter-net
bull Diferenccedila importante
ndash Organizaccedilatildeo do traacutefego de dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Internet Comunicaccedilatildeo Hieraacuterquica
MAC Origem MAC Destino
IP Origem IP Destino
Dados
MAC Origem MAC Destino
IP Origem IP Destino
Controle de Transmissatildeo Dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Protocolos Caminho dos Dados
Call of Duty
TCP
IP
Fiacutesico
IP
TCP
Call of Duty
Cliente Servidor
IP 2002011004 IP 210212478
codactivisioncom
Domain Name System
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PROTOCOLO DE COMUNICACcedilAtildeO DA WEB
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O que eacute a World Wide Web
bull Chrome Firefox Edge Safari Opera
ndash Satildeo Navegadores
bull Eles acessam conteuacutedo de um servidor
ndash Apache Nginx IIS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Web Server x Navegador
bull Comunicaccedilatildeo por meio do HTTP
bull HTTP significa HyperText Transfer Protocol
ndash Especificado por Tim Berners-Lee em 1990
ndash Transmitir documentos hipertexto
Requisiccedilatildeo
Resposta
Me daacute a paacutegina indexhtml
404 ndash A paacutegina natildeo existe
httpwwwmeuservidorcomindexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Navegaccedilatildeo Segura
bull Comunicaccedilatildeo por meio do HTTPS
bull HTTP + TLS (Transport Layer Security)
ndash Criptografa as informaccedilotildees ponto-a-ponto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TECNOLOGIAS PARA A WEB HTML CSS
JAVASCRIPT PHP
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias para a Web
bull PaacuteginaAplicaccedilatildeo Web
ndash Conteuacutedo
ndash Forma
ndash Accedilotildees (cliente)
ndash Accedilotildees (servidor)
bull Cada parte
ndash Desenvolvida com tecnologias proacuteprias
bull Navegadores
ndash Compreendem a maior parte delas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Sopa de letrinhas
ndash HTML x XHTML x HTML5
ndash CSS1 2 3
ndash JS 2x 30
ndash DOM 1 2
ndash AJAX
ndash JSONXML
ndash PHP 5 7
bull Navegadores
ndash Quaisquer Recentes
Conteuacutedo (estrutura)
Visual (cores e layout)
Estrutura Interna (memoacuteria)
Transferecircncia de Dados
Representaccedilatildeo de Dados
Processamento (accedilotildees)
Processamento no Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Estudaremos no Curso
ndash HTML5 HyperText Markup Language
bull Linguagem de Marcaccedilatildeo
ndash CSS3 Cascade Style Sheets
bull Folhas de Estilo
ndash DOM (brevemente) Document Object Model
bull Estrutura interna de um documento
ndash JS JavaScript
bull Accedilotildees do lado do cliente
ndash PHP PHP is a Hypertext Preprocessor
bull Tarefas do lado do servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Por que separar as accedilotildees
bull Cliente Navegador ldquoFront-endrdquo
ndash Processamento da interface
bull Servidor ldquoBack-endrdquo
ndash Armazena dados e estados
ndash Gerencia processos mais sensiacuteveis
bull Consequecircncia
ndash Necessidade de comunicaccedilatildeo Cliente-Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Qual a diferenccedila entre eles
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees httpseditormethodac
HTML+CSS+JS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees docsgooglecom
HTML+CSS+JS+Java
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees
HTML+CSS+JS - DosBox
httpscodepenionodwspenVWOLPZ
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
RAacutePIDO HISTOacuteRICO
O QUE Eacute A INTERNET
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Origens
bull Redes locais x Inter-net
bull Diferenccedila importante
ndash Organizaccedilatildeo do traacutefego de dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Internet Comunicaccedilatildeo Hieraacuterquica
MAC Origem MAC Destino
IP Origem IP Destino
Dados
MAC Origem MAC Destino
IP Origem IP Destino
Controle de Transmissatildeo Dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Protocolos Caminho dos Dados
Call of Duty
TCP
IP
Fiacutesico
IP
TCP
Call of Duty
Cliente Servidor
IP 2002011004 IP 210212478
codactivisioncom
Domain Name System
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PROTOCOLO DE COMUNICACcedilAtildeO DA WEB
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O que eacute a World Wide Web
bull Chrome Firefox Edge Safari Opera
ndash Satildeo Navegadores
bull Eles acessam conteuacutedo de um servidor
ndash Apache Nginx IIS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Web Server x Navegador
bull Comunicaccedilatildeo por meio do HTTP
bull HTTP significa HyperText Transfer Protocol
ndash Especificado por Tim Berners-Lee em 1990
ndash Transmitir documentos hipertexto
Requisiccedilatildeo
Resposta
Me daacute a paacutegina indexhtml
404 ndash A paacutegina natildeo existe
httpwwwmeuservidorcomindexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Navegaccedilatildeo Segura
bull Comunicaccedilatildeo por meio do HTTPS
bull HTTP + TLS (Transport Layer Security)
ndash Criptografa as informaccedilotildees ponto-a-ponto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TECNOLOGIAS PARA A WEB HTML CSS
JAVASCRIPT PHP
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias para a Web
bull PaacuteginaAplicaccedilatildeo Web
ndash Conteuacutedo
ndash Forma
ndash Accedilotildees (cliente)
ndash Accedilotildees (servidor)
bull Cada parte
ndash Desenvolvida com tecnologias proacuteprias
bull Navegadores
ndash Compreendem a maior parte delas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Sopa de letrinhas
ndash HTML x XHTML x HTML5
ndash CSS1 2 3
ndash JS 2x 30
ndash DOM 1 2
ndash AJAX
ndash JSONXML
ndash PHP 5 7
bull Navegadores
ndash Quaisquer Recentes
Conteuacutedo (estrutura)
Visual (cores e layout)
Estrutura Interna (memoacuteria)
Transferecircncia de Dados
Representaccedilatildeo de Dados
Processamento (accedilotildees)
Processamento no Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Estudaremos no Curso
ndash HTML5 HyperText Markup Language
bull Linguagem de Marcaccedilatildeo
ndash CSS3 Cascade Style Sheets
bull Folhas de Estilo
ndash DOM (brevemente) Document Object Model
bull Estrutura interna de um documento
ndash JS JavaScript
bull Accedilotildees do lado do cliente
ndash PHP PHP is a Hypertext Preprocessor
bull Tarefas do lado do servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Por que separar as accedilotildees
bull Cliente Navegador ldquoFront-endrdquo
ndash Processamento da interface
bull Servidor ldquoBack-endrdquo
ndash Armazena dados e estados
ndash Gerencia processos mais sensiacuteveis
bull Consequecircncia
ndash Necessidade de comunicaccedilatildeo Cliente-Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees httpseditormethodac
HTML+CSS+JS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees docsgooglecom
HTML+CSS+JS+Java
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees
HTML+CSS+JS - DosBox
httpscodepenionodwspenVWOLPZ
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
RAacutePIDO HISTOacuteRICO
O QUE Eacute A INTERNET
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Origens
bull Redes locais x Inter-net
bull Diferenccedila importante
ndash Organizaccedilatildeo do traacutefego de dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Internet Comunicaccedilatildeo Hieraacuterquica
MAC Origem MAC Destino
IP Origem IP Destino
Dados
MAC Origem MAC Destino
IP Origem IP Destino
Controle de Transmissatildeo Dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Protocolos Caminho dos Dados
Call of Duty
TCP
IP
Fiacutesico
IP
TCP
Call of Duty
Cliente Servidor
IP 2002011004 IP 210212478
codactivisioncom
Domain Name System
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PROTOCOLO DE COMUNICACcedilAtildeO DA WEB
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O que eacute a World Wide Web
bull Chrome Firefox Edge Safari Opera
ndash Satildeo Navegadores
bull Eles acessam conteuacutedo de um servidor
ndash Apache Nginx IIS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Web Server x Navegador
bull Comunicaccedilatildeo por meio do HTTP
bull HTTP significa HyperText Transfer Protocol
ndash Especificado por Tim Berners-Lee em 1990
ndash Transmitir documentos hipertexto
Requisiccedilatildeo
Resposta
Me daacute a paacutegina indexhtml
404 ndash A paacutegina natildeo existe
httpwwwmeuservidorcomindexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Navegaccedilatildeo Segura
bull Comunicaccedilatildeo por meio do HTTPS
bull HTTP + TLS (Transport Layer Security)
ndash Criptografa as informaccedilotildees ponto-a-ponto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TECNOLOGIAS PARA A WEB HTML CSS
JAVASCRIPT PHP
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias para a Web
bull PaacuteginaAplicaccedilatildeo Web
ndash Conteuacutedo
ndash Forma
ndash Accedilotildees (cliente)
ndash Accedilotildees (servidor)
bull Cada parte
ndash Desenvolvida com tecnologias proacuteprias
bull Navegadores
ndash Compreendem a maior parte delas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Sopa de letrinhas
ndash HTML x XHTML x HTML5
ndash CSS1 2 3
ndash JS 2x 30
ndash DOM 1 2
ndash AJAX
ndash JSONXML
ndash PHP 5 7
bull Navegadores
ndash Quaisquer Recentes
Conteuacutedo (estrutura)
Visual (cores e layout)
Estrutura Interna (memoacuteria)
Transferecircncia de Dados
Representaccedilatildeo de Dados
Processamento (accedilotildees)
Processamento no Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Estudaremos no Curso
ndash HTML5 HyperText Markup Language
bull Linguagem de Marcaccedilatildeo
ndash CSS3 Cascade Style Sheets
bull Folhas de Estilo
ndash DOM (brevemente) Document Object Model
bull Estrutura interna de um documento
ndash JS JavaScript
bull Accedilotildees do lado do cliente
ndash PHP PHP is a Hypertext Preprocessor
bull Tarefas do lado do servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Por que separar as accedilotildees
bull Cliente Navegador ldquoFront-endrdquo
ndash Processamento da interface
bull Servidor ldquoBack-endrdquo
ndash Armazena dados e estados
ndash Gerencia processos mais sensiacuteveis
bull Consequecircncia
ndash Necessidade de comunicaccedilatildeo Cliente-Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees docsgooglecom
HTML+CSS+JS+Java
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees
HTML+CSS+JS - DosBox
httpscodepenionodwspenVWOLPZ
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
RAacutePIDO HISTOacuteRICO
O QUE Eacute A INTERNET
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Origens
bull Redes locais x Inter-net
bull Diferenccedila importante
ndash Organizaccedilatildeo do traacutefego de dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Internet Comunicaccedilatildeo Hieraacuterquica
MAC Origem MAC Destino
IP Origem IP Destino
Dados
MAC Origem MAC Destino
IP Origem IP Destino
Controle de Transmissatildeo Dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Protocolos Caminho dos Dados
Call of Duty
TCP
IP
Fiacutesico
IP
TCP
Call of Duty
Cliente Servidor
IP 2002011004 IP 210212478
codactivisioncom
Domain Name System
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PROTOCOLO DE COMUNICACcedilAtildeO DA WEB
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O que eacute a World Wide Web
bull Chrome Firefox Edge Safari Opera
ndash Satildeo Navegadores
bull Eles acessam conteuacutedo de um servidor
ndash Apache Nginx IIS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Web Server x Navegador
bull Comunicaccedilatildeo por meio do HTTP
bull HTTP significa HyperText Transfer Protocol
ndash Especificado por Tim Berners-Lee em 1990
ndash Transmitir documentos hipertexto
Requisiccedilatildeo
Resposta
Me daacute a paacutegina indexhtml
404 ndash A paacutegina natildeo existe
httpwwwmeuservidorcomindexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Navegaccedilatildeo Segura
bull Comunicaccedilatildeo por meio do HTTPS
bull HTTP + TLS (Transport Layer Security)
ndash Criptografa as informaccedilotildees ponto-a-ponto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TECNOLOGIAS PARA A WEB HTML CSS
JAVASCRIPT PHP
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias para a Web
bull PaacuteginaAplicaccedilatildeo Web
ndash Conteuacutedo
ndash Forma
ndash Accedilotildees (cliente)
ndash Accedilotildees (servidor)
bull Cada parte
ndash Desenvolvida com tecnologias proacuteprias
bull Navegadores
ndash Compreendem a maior parte delas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Sopa de letrinhas
ndash HTML x XHTML x HTML5
ndash CSS1 2 3
ndash JS 2x 30
ndash DOM 1 2
ndash AJAX
ndash JSONXML
ndash PHP 5 7
bull Navegadores
ndash Quaisquer Recentes
Conteuacutedo (estrutura)
Visual (cores e layout)
Estrutura Interna (memoacuteria)
Transferecircncia de Dados
Representaccedilatildeo de Dados
Processamento (accedilotildees)
Processamento no Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Estudaremos no Curso
ndash HTML5 HyperText Markup Language
bull Linguagem de Marcaccedilatildeo
ndash CSS3 Cascade Style Sheets
bull Folhas de Estilo
ndash DOM (brevemente) Document Object Model
bull Estrutura interna de um documento
ndash JS JavaScript
bull Accedilotildees do lado do cliente
ndash PHP PHP is a Hypertext Preprocessor
bull Tarefas do lado do servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Por que separar as accedilotildees
bull Cliente Navegador ldquoFront-endrdquo
ndash Processamento da interface
bull Servidor ldquoBack-endrdquo
ndash Armazena dados e estados
ndash Gerencia processos mais sensiacuteveis
bull Consequecircncia
ndash Necessidade de comunicaccedilatildeo Cliente-Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Aplicaccedilotildees
HTML+CSS+JS - DosBox
httpscodepenionodwspenVWOLPZ
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
RAacutePIDO HISTOacuteRICO
O QUE Eacute A INTERNET
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Origens
bull Redes locais x Inter-net
bull Diferenccedila importante
ndash Organizaccedilatildeo do traacutefego de dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Internet Comunicaccedilatildeo Hieraacuterquica
MAC Origem MAC Destino
IP Origem IP Destino
Dados
MAC Origem MAC Destino
IP Origem IP Destino
Controle de Transmissatildeo Dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Protocolos Caminho dos Dados
Call of Duty
TCP
IP
Fiacutesico
IP
TCP
Call of Duty
Cliente Servidor
IP 2002011004 IP 210212478
codactivisioncom
Domain Name System
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PROTOCOLO DE COMUNICACcedilAtildeO DA WEB
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O que eacute a World Wide Web
bull Chrome Firefox Edge Safari Opera
ndash Satildeo Navegadores
bull Eles acessam conteuacutedo de um servidor
ndash Apache Nginx IIS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Web Server x Navegador
bull Comunicaccedilatildeo por meio do HTTP
bull HTTP significa HyperText Transfer Protocol
ndash Especificado por Tim Berners-Lee em 1990
ndash Transmitir documentos hipertexto
Requisiccedilatildeo
Resposta
Me daacute a paacutegina indexhtml
404 ndash A paacutegina natildeo existe
httpwwwmeuservidorcomindexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Navegaccedilatildeo Segura
bull Comunicaccedilatildeo por meio do HTTPS
bull HTTP + TLS (Transport Layer Security)
ndash Criptografa as informaccedilotildees ponto-a-ponto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TECNOLOGIAS PARA A WEB HTML CSS
JAVASCRIPT PHP
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias para a Web
bull PaacuteginaAplicaccedilatildeo Web
ndash Conteuacutedo
ndash Forma
ndash Accedilotildees (cliente)
ndash Accedilotildees (servidor)
bull Cada parte
ndash Desenvolvida com tecnologias proacuteprias
bull Navegadores
ndash Compreendem a maior parte delas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Sopa de letrinhas
ndash HTML x XHTML x HTML5
ndash CSS1 2 3
ndash JS 2x 30
ndash DOM 1 2
ndash AJAX
ndash JSONXML
ndash PHP 5 7
bull Navegadores
ndash Quaisquer Recentes
Conteuacutedo (estrutura)
Visual (cores e layout)
Estrutura Interna (memoacuteria)
Transferecircncia de Dados
Representaccedilatildeo de Dados
Processamento (accedilotildees)
Processamento no Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Estudaremos no Curso
ndash HTML5 HyperText Markup Language
bull Linguagem de Marcaccedilatildeo
ndash CSS3 Cascade Style Sheets
bull Folhas de Estilo
ndash DOM (brevemente) Document Object Model
bull Estrutura interna de um documento
ndash JS JavaScript
bull Accedilotildees do lado do cliente
ndash PHP PHP is a Hypertext Preprocessor
bull Tarefas do lado do servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Por que separar as accedilotildees
bull Cliente Navegador ldquoFront-endrdquo
ndash Processamento da interface
bull Servidor ldquoBack-endrdquo
ndash Armazena dados e estados
ndash Gerencia processos mais sensiacuteveis
bull Consequecircncia
ndash Necessidade de comunicaccedilatildeo Cliente-Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
RAacutePIDO HISTOacuteRICO
O QUE Eacute A INTERNET
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Origens
bull Redes locais x Inter-net
bull Diferenccedila importante
ndash Organizaccedilatildeo do traacutefego de dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Internet Comunicaccedilatildeo Hieraacuterquica
MAC Origem MAC Destino
IP Origem IP Destino
Dados
MAC Origem MAC Destino
IP Origem IP Destino
Controle de Transmissatildeo Dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Protocolos Caminho dos Dados
Call of Duty
TCP
IP
Fiacutesico
IP
TCP
Call of Duty
Cliente Servidor
IP 2002011004 IP 210212478
codactivisioncom
Domain Name System
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PROTOCOLO DE COMUNICACcedilAtildeO DA WEB
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O que eacute a World Wide Web
bull Chrome Firefox Edge Safari Opera
ndash Satildeo Navegadores
bull Eles acessam conteuacutedo de um servidor
ndash Apache Nginx IIS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Web Server x Navegador
bull Comunicaccedilatildeo por meio do HTTP
bull HTTP significa HyperText Transfer Protocol
ndash Especificado por Tim Berners-Lee em 1990
ndash Transmitir documentos hipertexto
Requisiccedilatildeo
Resposta
Me daacute a paacutegina indexhtml
404 ndash A paacutegina natildeo existe
httpwwwmeuservidorcomindexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Navegaccedilatildeo Segura
bull Comunicaccedilatildeo por meio do HTTPS
bull HTTP + TLS (Transport Layer Security)
ndash Criptografa as informaccedilotildees ponto-a-ponto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TECNOLOGIAS PARA A WEB HTML CSS
JAVASCRIPT PHP
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias para a Web
bull PaacuteginaAplicaccedilatildeo Web
ndash Conteuacutedo
ndash Forma
ndash Accedilotildees (cliente)
ndash Accedilotildees (servidor)
bull Cada parte
ndash Desenvolvida com tecnologias proacuteprias
bull Navegadores
ndash Compreendem a maior parte delas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Sopa de letrinhas
ndash HTML x XHTML x HTML5
ndash CSS1 2 3
ndash JS 2x 30
ndash DOM 1 2
ndash AJAX
ndash JSONXML
ndash PHP 5 7
bull Navegadores
ndash Quaisquer Recentes
Conteuacutedo (estrutura)
Visual (cores e layout)
Estrutura Interna (memoacuteria)
Transferecircncia de Dados
Representaccedilatildeo de Dados
Processamento (accedilotildees)
Processamento no Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Estudaremos no Curso
ndash HTML5 HyperText Markup Language
bull Linguagem de Marcaccedilatildeo
ndash CSS3 Cascade Style Sheets
bull Folhas de Estilo
ndash DOM (brevemente) Document Object Model
bull Estrutura interna de um documento
ndash JS JavaScript
bull Accedilotildees do lado do cliente
ndash PHP PHP is a Hypertext Preprocessor
bull Tarefas do lado do servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Por que separar as accedilotildees
bull Cliente Navegador ldquoFront-endrdquo
ndash Processamento da interface
bull Servidor ldquoBack-endrdquo
ndash Armazena dados e estados
ndash Gerencia processos mais sensiacuteveis
bull Consequecircncia
ndash Necessidade de comunicaccedilatildeo Cliente-Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Origens
bull Redes locais x Inter-net
bull Diferenccedila importante
ndash Organizaccedilatildeo do traacutefego de dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Internet Comunicaccedilatildeo Hieraacuterquica
MAC Origem MAC Destino
IP Origem IP Destino
Dados
MAC Origem MAC Destino
IP Origem IP Destino
Controle de Transmissatildeo Dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Protocolos Caminho dos Dados
Call of Duty
TCP
IP
Fiacutesico
IP
TCP
Call of Duty
Cliente Servidor
IP 2002011004 IP 210212478
codactivisioncom
Domain Name System
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PROTOCOLO DE COMUNICACcedilAtildeO DA WEB
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O que eacute a World Wide Web
bull Chrome Firefox Edge Safari Opera
ndash Satildeo Navegadores
bull Eles acessam conteuacutedo de um servidor
ndash Apache Nginx IIS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Web Server x Navegador
bull Comunicaccedilatildeo por meio do HTTP
bull HTTP significa HyperText Transfer Protocol
ndash Especificado por Tim Berners-Lee em 1990
ndash Transmitir documentos hipertexto
Requisiccedilatildeo
Resposta
Me daacute a paacutegina indexhtml
404 ndash A paacutegina natildeo existe
httpwwwmeuservidorcomindexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Navegaccedilatildeo Segura
bull Comunicaccedilatildeo por meio do HTTPS
bull HTTP + TLS (Transport Layer Security)
ndash Criptografa as informaccedilotildees ponto-a-ponto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TECNOLOGIAS PARA A WEB HTML CSS
JAVASCRIPT PHP
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias para a Web
bull PaacuteginaAplicaccedilatildeo Web
ndash Conteuacutedo
ndash Forma
ndash Accedilotildees (cliente)
ndash Accedilotildees (servidor)
bull Cada parte
ndash Desenvolvida com tecnologias proacuteprias
bull Navegadores
ndash Compreendem a maior parte delas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Sopa de letrinhas
ndash HTML x XHTML x HTML5
ndash CSS1 2 3
ndash JS 2x 30
ndash DOM 1 2
ndash AJAX
ndash JSONXML
ndash PHP 5 7
bull Navegadores
ndash Quaisquer Recentes
Conteuacutedo (estrutura)
Visual (cores e layout)
Estrutura Interna (memoacuteria)
Transferecircncia de Dados
Representaccedilatildeo de Dados
Processamento (accedilotildees)
Processamento no Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Estudaremos no Curso
ndash HTML5 HyperText Markup Language
bull Linguagem de Marcaccedilatildeo
ndash CSS3 Cascade Style Sheets
bull Folhas de Estilo
ndash DOM (brevemente) Document Object Model
bull Estrutura interna de um documento
ndash JS JavaScript
bull Accedilotildees do lado do cliente
ndash PHP PHP is a Hypertext Preprocessor
bull Tarefas do lado do servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Por que separar as accedilotildees
bull Cliente Navegador ldquoFront-endrdquo
ndash Processamento da interface
bull Servidor ldquoBack-endrdquo
ndash Armazena dados e estados
ndash Gerencia processos mais sensiacuteveis
bull Consequecircncia
ndash Necessidade de comunicaccedilatildeo Cliente-Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Internet Comunicaccedilatildeo Hieraacuterquica
MAC Origem MAC Destino
IP Origem IP Destino
Dados
MAC Origem MAC Destino
IP Origem IP Destino
Controle de Transmissatildeo Dados
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Protocolos Caminho dos Dados
Call of Duty
TCP
IP
Fiacutesico
IP
TCP
Call of Duty
Cliente Servidor
IP 2002011004 IP 210212478
codactivisioncom
Domain Name System
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PROTOCOLO DE COMUNICACcedilAtildeO DA WEB
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O que eacute a World Wide Web
bull Chrome Firefox Edge Safari Opera
ndash Satildeo Navegadores
bull Eles acessam conteuacutedo de um servidor
ndash Apache Nginx IIS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Web Server x Navegador
bull Comunicaccedilatildeo por meio do HTTP
bull HTTP significa HyperText Transfer Protocol
ndash Especificado por Tim Berners-Lee em 1990
ndash Transmitir documentos hipertexto
Requisiccedilatildeo
Resposta
Me daacute a paacutegina indexhtml
404 ndash A paacutegina natildeo existe
httpwwwmeuservidorcomindexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Navegaccedilatildeo Segura
bull Comunicaccedilatildeo por meio do HTTPS
bull HTTP + TLS (Transport Layer Security)
ndash Criptografa as informaccedilotildees ponto-a-ponto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TECNOLOGIAS PARA A WEB HTML CSS
JAVASCRIPT PHP
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias para a Web
bull PaacuteginaAplicaccedilatildeo Web
ndash Conteuacutedo
ndash Forma
ndash Accedilotildees (cliente)
ndash Accedilotildees (servidor)
bull Cada parte
ndash Desenvolvida com tecnologias proacuteprias
bull Navegadores
ndash Compreendem a maior parte delas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Sopa de letrinhas
ndash HTML x XHTML x HTML5
ndash CSS1 2 3
ndash JS 2x 30
ndash DOM 1 2
ndash AJAX
ndash JSONXML
ndash PHP 5 7
bull Navegadores
ndash Quaisquer Recentes
Conteuacutedo (estrutura)
Visual (cores e layout)
Estrutura Interna (memoacuteria)
Transferecircncia de Dados
Representaccedilatildeo de Dados
Processamento (accedilotildees)
Processamento no Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Estudaremos no Curso
ndash HTML5 HyperText Markup Language
bull Linguagem de Marcaccedilatildeo
ndash CSS3 Cascade Style Sheets
bull Folhas de Estilo
ndash DOM (brevemente) Document Object Model
bull Estrutura interna de um documento
ndash JS JavaScript
bull Accedilotildees do lado do cliente
ndash PHP PHP is a Hypertext Preprocessor
bull Tarefas do lado do servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Por que separar as accedilotildees
bull Cliente Navegador ldquoFront-endrdquo
ndash Processamento da interface
bull Servidor ldquoBack-endrdquo
ndash Armazena dados e estados
ndash Gerencia processos mais sensiacuteveis
bull Consequecircncia
ndash Necessidade de comunicaccedilatildeo Cliente-Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Protocolos Caminho dos Dados
Call of Duty
TCP
IP
Fiacutesico
IP
TCP
Call of Duty
Cliente Servidor
IP 2002011004 IP 210212478
codactivisioncom
Domain Name System
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PROTOCOLO DE COMUNICACcedilAtildeO DA WEB
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O que eacute a World Wide Web
bull Chrome Firefox Edge Safari Opera
ndash Satildeo Navegadores
bull Eles acessam conteuacutedo de um servidor
ndash Apache Nginx IIS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Web Server x Navegador
bull Comunicaccedilatildeo por meio do HTTP
bull HTTP significa HyperText Transfer Protocol
ndash Especificado por Tim Berners-Lee em 1990
ndash Transmitir documentos hipertexto
Requisiccedilatildeo
Resposta
Me daacute a paacutegina indexhtml
404 ndash A paacutegina natildeo existe
httpwwwmeuservidorcomindexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Navegaccedilatildeo Segura
bull Comunicaccedilatildeo por meio do HTTPS
bull HTTP + TLS (Transport Layer Security)
ndash Criptografa as informaccedilotildees ponto-a-ponto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TECNOLOGIAS PARA A WEB HTML CSS
JAVASCRIPT PHP
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias para a Web
bull PaacuteginaAplicaccedilatildeo Web
ndash Conteuacutedo
ndash Forma
ndash Accedilotildees (cliente)
ndash Accedilotildees (servidor)
bull Cada parte
ndash Desenvolvida com tecnologias proacuteprias
bull Navegadores
ndash Compreendem a maior parte delas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Sopa de letrinhas
ndash HTML x XHTML x HTML5
ndash CSS1 2 3
ndash JS 2x 30
ndash DOM 1 2
ndash AJAX
ndash JSONXML
ndash PHP 5 7
bull Navegadores
ndash Quaisquer Recentes
Conteuacutedo (estrutura)
Visual (cores e layout)
Estrutura Interna (memoacuteria)
Transferecircncia de Dados
Representaccedilatildeo de Dados
Processamento (accedilotildees)
Processamento no Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Estudaremos no Curso
ndash HTML5 HyperText Markup Language
bull Linguagem de Marcaccedilatildeo
ndash CSS3 Cascade Style Sheets
bull Folhas de Estilo
ndash DOM (brevemente) Document Object Model
bull Estrutura interna de um documento
ndash JS JavaScript
bull Accedilotildees do lado do cliente
ndash PHP PHP is a Hypertext Preprocessor
bull Tarefas do lado do servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Por que separar as accedilotildees
bull Cliente Navegador ldquoFront-endrdquo
ndash Processamento da interface
bull Servidor ldquoBack-endrdquo
ndash Armazena dados e estados
ndash Gerencia processos mais sensiacuteveis
bull Consequecircncia
ndash Necessidade de comunicaccedilatildeo Cliente-Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PROTOCOLO DE COMUNICACcedilAtildeO DA WEB
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O que eacute a World Wide Web
bull Chrome Firefox Edge Safari Opera
ndash Satildeo Navegadores
bull Eles acessam conteuacutedo de um servidor
ndash Apache Nginx IIS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Web Server x Navegador
bull Comunicaccedilatildeo por meio do HTTP
bull HTTP significa HyperText Transfer Protocol
ndash Especificado por Tim Berners-Lee em 1990
ndash Transmitir documentos hipertexto
Requisiccedilatildeo
Resposta
Me daacute a paacutegina indexhtml
404 ndash A paacutegina natildeo existe
httpwwwmeuservidorcomindexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Navegaccedilatildeo Segura
bull Comunicaccedilatildeo por meio do HTTPS
bull HTTP + TLS (Transport Layer Security)
ndash Criptografa as informaccedilotildees ponto-a-ponto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TECNOLOGIAS PARA A WEB HTML CSS
JAVASCRIPT PHP
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias para a Web
bull PaacuteginaAplicaccedilatildeo Web
ndash Conteuacutedo
ndash Forma
ndash Accedilotildees (cliente)
ndash Accedilotildees (servidor)
bull Cada parte
ndash Desenvolvida com tecnologias proacuteprias
bull Navegadores
ndash Compreendem a maior parte delas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Sopa de letrinhas
ndash HTML x XHTML x HTML5
ndash CSS1 2 3
ndash JS 2x 30
ndash DOM 1 2
ndash AJAX
ndash JSONXML
ndash PHP 5 7
bull Navegadores
ndash Quaisquer Recentes
Conteuacutedo (estrutura)
Visual (cores e layout)
Estrutura Interna (memoacuteria)
Transferecircncia de Dados
Representaccedilatildeo de Dados
Processamento (accedilotildees)
Processamento no Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Estudaremos no Curso
ndash HTML5 HyperText Markup Language
bull Linguagem de Marcaccedilatildeo
ndash CSS3 Cascade Style Sheets
bull Folhas de Estilo
ndash DOM (brevemente) Document Object Model
bull Estrutura interna de um documento
ndash JS JavaScript
bull Accedilotildees do lado do cliente
ndash PHP PHP is a Hypertext Preprocessor
bull Tarefas do lado do servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Por que separar as accedilotildees
bull Cliente Navegador ldquoFront-endrdquo
ndash Processamento da interface
bull Servidor ldquoBack-endrdquo
ndash Armazena dados e estados
ndash Gerencia processos mais sensiacuteveis
bull Consequecircncia
ndash Necessidade de comunicaccedilatildeo Cliente-Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O que eacute a World Wide Web
bull Chrome Firefox Edge Safari Opera
ndash Satildeo Navegadores
bull Eles acessam conteuacutedo de um servidor
ndash Apache Nginx IIS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Web Server x Navegador
bull Comunicaccedilatildeo por meio do HTTP
bull HTTP significa HyperText Transfer Protocol
ndash Especificado por Tim Berners-Lee em 1990
ndash Transmitir documentos hipertexto
Requisiccedilatildeo
Resposta
Me daacute a paacutegina indexhtml
404 ndash A paacutegina natildeo existe
httpwwwmeuservidorcomindexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Navegaccedilatildeo Segura
bull Comunicaccedilatildeo por meio do HTTPS
bull HTTP + TLS (Transport Layer Security)
ndash Criptografa as informaccedilotildees ponto-a-ponto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TECNOLOGIAS PARA A WEB HTML CSS
JAVASCRIPT PHP
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias para a Web
bull PaacuteginaAplicaccedilatildeo Web
ndash Conteuacutedo
ndash Forma
ndash Accedilotildees (cliente)
ndash Accedilotildees (servidor)
bull Cada parte
ndash Desenvolvida com tecnologias proacuteprias
bull Navegadores
ndash Compreendem a maior parte delas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Sopa de letrinhas
ndash HTML x XHTML x HTML5
ndash CSS1 2 3
ndash JS 2x 30
ndash DOM 1 2
ndash AJAX
ndash JSONXML
ndash PHP 5 7
bull Navegadores
ndash Quaisquer Recentes
Conteuacutedo (estrutura)
Visual (cores e layout)
Estrutura Interna (memoacuteria)
Transferecircncia de Dados
Representaccedilatildeo de Dados
Processamento (accedilotildees)
Processamento no Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Estudaremos no Curso
ndash HTML5 HyperText Markup Language
bull Linguagem de Marcaccedilatildeo
ndash CSS3 Cascade Style Sheets
bull Folhas de Estilo
ndash DOM (brevemente) Document Object Model
bull Estrutura interna de um documento
ndash JS JavaScript
bull Accedilotildees do lado do cliente
ndash PHP PHP is a Hypertext Preprocessor
bull Tarefas do lado do servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Por que separar as accedilotildees
bull Cliente Navegador ldquoFront-endrdquo
ndash Processamento da interface
bull Servidor ldquoBack-endrdquo
ndash Armazena dados e estados
ndash Gerencia processos mais sensiacuteveis
bull Consequecircncia
ndash Necessidade de comunicaccedilatildeo Cliente-Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Web Server x Navegador
bull Comunicaccedilatildeo por meio do HTTP
bull HTTP significa HyperText Transfer Protocol
ndash Especificado por Tim Berners-Lee em 1990
ndash Transmitir documentos hipertexto
Requisiccedilatildeo
Resposta
Me daacute a paacutegina indexhtml
404 ndash A paacutegina natildeo existe
httpwwwmeuservidorcomindexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Navegaccedilatildeo Segura
bull Comunicaccedilatildeo por meio do HTTPS
bull HTTP + TLS (Transport Layer Security)
ndash Criptografa as informaccedilotildees ponto-a-ponto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TECNOLOGIAS PARA A WEB HTML CSS
JAVASCRIPT PHP
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias para a Web
bull PaacuteginaAplicaccedilatildeo Web
ndash Conteuacutedo
ndash Forma
ndash Accedilotildees (cliente)
ndash Accedilotildees (servidor)
bull Cada parte
ndash Desenvolvida com tecnologias proacuteprias
bull Navegadores
ndash Compreendem a maior parte delas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Sopa de letrinhas
ndash HTML x XHTML x HTML5
ndash CSS1 2 3
ndash JS 2x 30
ndash DOM 1 2
ndash AJAX
ndash JSONXML
ndash PHP 5 7
bull Navegadores
ndash Quaisquer Recentes
Conteuacutedo (estrutura)
Visual (cores e layout)
Estrutura Interna (memoacuteria)
Transferecircncia de Dados
Representaccedilatildeo de Dados
Processamento (accedilotildees)
Processamento no Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Estudaremos no Curso
ndash HTML5 HyperText Markup Language
bull Linguagem de Marcaccedilatildeo
ndash CSS3 Cascade Style Sheets
bull Folhas de Estilo
ndash DOM (brevemente) Document Object Model
bull Estrutura interna de um documento
ndash JS JavaScript
bull Accedilotildees do lado do cliente
ndash PHP PHP is a Hypertext Preprocessor
bull Tarefas do lado do servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Por que separar as accedilotildees
bull Cliente Navegador ldquoFront-endrdquo
ndash Processamento da interface
bull Servidor ldquoBack-endrdquo
ndash Armazena dados e estados
ndash Gerencia processos mais sensiacuteveis
bull Consequecircncia
ndash Necessidade de comunicaccedilatildeo Cliente-Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Navegaccedilatildeo Segura
bull Comunicaccedilatildeo por meio do HTTPS
bull HTTP + TLS (Transport Layer Security)
ndash Criptografa as informaccedilotildees ponto-a-ponto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TECNOLOGIAS PARA A WEB HTML CSS
JAVASCRIPT PHP
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias para a Web
bull PaacuteginaAplicaccedilatildeo Web
ndash Conteuacutedo
ndash Forma
ndash Accedilotildees (cliente)
ndash Accedilotildees (servidor)
bull Cada parte
ndash Desenvolvida com tecnologias proacuteprias
bull Navegadores
ndash Compreendem a maior parte delas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Sopa de letrinhas
ndash HTML x XHTML x HTML5
ndash CSS1 2 3
ndash JS 2x 30
ndash DOM 1 2
ndash AJAX
ndash JSONXML
ndash PHP 5 7
bull Navegadores
ndash Quaisquer Recentes
Conteuacutedo (estrutura)
Visual (cores e layout)
Estrutura Interna (memoacuteria)
Transferecircncia de Dados
Representaccedilatildeo de Dados
Processamento (accedilotildees)
Processamento no Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Estudaremos no Curso
ndash HTML5 HyperText Markup Language
bull Linguagem de Marcaccedilatildeo
ndash CSS3 Cascade Style Sheets
bull Folhas de Estilo
ndash DOM (brevemente) Document Object Model
bull Estrutura interna de um documento
ndash JS JavaScript
bull Accedilotildees do lado do cliente
ndash PHP PHP is a Hypertext Preprocessor
bull Tarefas do lado do servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Por que separar as accedilotildees
bull Cliente Navegador ldquoFront-endrdquo
ndash Processamento da interface
bull Servidor ldquoBack-endrdquo
ndash Armazena dados e estados
ndash Gerencia processos mais sensiacuteveis
bull Consequecircncia
ndash Necessidade de comunicaccedilatildeo Cliente-Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
TECNOLOGIAS PARA A WEB HTML CSS
JAVASCRIPT PHP
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias para a Web
bull PaacuteginaAplicaccedilatildeo Web
ndash Conteuacutedo
ndash Forma
ndash Accedilotildees (cliente)
ndash Accedilotildees (servidor)
bull Cada parte
ndash Desenvolvida com tecnologias proacuteprias
bull Navegadores
ndash Compreendem a maior parte delas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Sopa de letrinhas
ndash HTML x XHTML x HTML5
ndash CSS1 2 3
ndash JS 2x 30
ndash DOM 1 2
ndash AJAX
ndash JSONXML
ndash PHP 5 7
bull Navegadores
ndash Quaisquer Recentes
Conteuacutedo (estrutura)
Visual (cores e layout)
Estrutura Interna (memoacuteria)
Transferecircncia de Dados
Representaccedilatildeo de Dados
Processamento (accedilotildees)
Processamento no Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Estudaremos no Curso
ndash HTML5 HyperText Markup Language
bull Linguagem de Marcaccedilatildeo
ndash CSS3 Cascade Style Sheets
bull Folhas de Estilo
ndash DOM (brevemente) Document Object Model
bull Estrutura interna de um documento
ndash JS JavaScript
bull Accedilotildees do lado do cliente
ndash PHP PHP is a Hypertext Preprocessor
bull Tarefas do lado do servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Por que separar as accedilotildees
bull Cliente Navegador ldquoFront-endrdquo
ndash Processamento da interface
bull Servidor ldquoBack-endrdquo
ndash Armazena dados e estados
ndash Gerencia processos mais sensiacuteveis
bull Consequecircncia
ndash Necessidade de comunicaccedilatildeo Cliente-Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias para a Web
bull PaacuteginaAplicaccedilatildeo Web
ndash Conteuacutedo
ndash Forma
ndash Accedilotildees (cliente)
ndash Accedilotildees (servidor)
bull Cada parte
ndash Desenvolvida com tecnologias proacuteprias
bull Navegadores
ndash Compreendem a maior parte delas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Sopa de letrinhas
ndash HTML x XHTML x HTML5
ndash CSS1 2 3
ndash JS 2x 30
ndash DOM 1 2
ndash AJAX
ndash JSONXML
ndash PHP 5 7
bull Navegadores
ndash Quaisquer Recentes
Conteuacutedo (estrutura)
Visual (cores e layout)
Estrutura Interna (memoacuteria)
Transferecircncia de Dados
Representaccedilatildeo de Dados
Processamento (accedilotildees)
Processamento no Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Estudaremos no Curso
ndash HTML5 HyperText Markup Language
bull Linguagem de Marcaccedilatildeo
ndash CSS3 Cascade Style Sheets
bull Folhas de Estilo
ndash DOM (brevemente) Document Object Model
bull Estrutura interna de um documento
ndash JS JavaScript
bull Accedilotildees do lado do cliente
ndash PHP PHP is a Hypertext Preprocessor
bull Tarefas do lado do servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Por que separar as accedilotildees
bull Cliente Navegador ldquoFront-endrdquo
ndash Processamento da interface
bull Servidor ldquoBack-endrdquo
ndash Armazena dados e estados
ndash Gerencia processos mais sensiacuteveis
bull Consequecircncia
ndash Necessidade de comunicaccedilatildeo Cliente-Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Sopa de letrinhas
ndash HTML x XHTML x HTML5
ndash CSS1 2 3
ndash JS 2x 30
ndash DOM 1 2
ndash AJAX
ndash JSONXML
ndash PHP 5 7
bull Navegadores
ndash Quaisquer Recentes
Conteuacutedo (estrutura)
Visual (cores e layout)
Estrutura Interna (memoacuteria)
Transferecircncia de Dados
Representaccedilatildeo de Dados
Processamento (accedilotildees)
Processamento no Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Estudaremos no Curso
ndash HTML5 HyperText Markup Language
bull Linguagem de Marcaccedilatildeo
ndash CSS3 Cascade Style Sheets
bull Folhas de Estilo
ndash DOM (brevemente) Document Object Model
bull Estrutura interna de um documento
ndash JS JavaScript
bull Accedilotildees do lado do cliente
ndash PHP PHP is a Hypertext Preprocessor
bull Tarefas do lado do servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Por que separar as accedilotildees
bull Cliente Navegador ldquoFront-endrdquo
ndash Processamento da interface
bull Servidor ldquoBack-endrdquo
ndash Armazena dados e estados
ndash Gerencia processos mais sensiacuteveis
bull Consequecircncia
ndash Necessidade de comunicaccedilatildeo Cliente-Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Tecnologias Usuais
bull Estudaremos no Curso
ndash HTML5 HyperText Markup Language
bull Linguagem de Marcaccedilatildeo
ndash CSS3 Cascade Style Sheets
bull Folhas de Estilo
ndash DOM (brevemente) Document Object Model
bull Estrutura interna de um documento
ndash JS JavaScript
bull Accedilotildees do lado do cliente
ndash PHP PHP is a Hypertext Preprocessor
bull Tarefas do lado do servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Por que separar as accedilotildees
bull Cliente Navegador ldquoFront-endrdquo
ndash Processamento da interface
bull Servidor ldquoBack-endrdquo
ndash Armazena dados e estados
ndash Gerencia processos mais sensiacuteveis
bull Consequecircncia
ndash Necessidade de comunicaccedilatildeo Cliente-Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Por que separar as accedilotildees
bull Cliente Navegador ldquoFront-endrdquo
ndash Processamento da interface
bull Servidor ldquoBack-endrdquo
ndash Armazena dados e estados
ndash Gerencia processos mais sensiacuteveis
bull Consequecircncia
ndash Necessidade de comunicaccedilatildeo Cliente-Servidor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O INIacuteCIO
O QUE Eacute LINGUAGEM DE MARCACcedilAtildeO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Tags identificam os elementos quanto
ndash Estrutura
bull Tiacutetulo
bull Paraacutegrafo
bull Link
ndash Significado
(Semacircntica)
bull Menu
bull Artigo
cabeccedilalho
menu
artigo
rodapeacute
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Linguagens de Marcaccedilatildeo
bull Nesse curso usaremos o HTML versatildeo 5
bull HTML natildeo eacute linguagem de programaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
COMO Eacute HTML 5
httpswwwmenticom
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
Esse eacute um paraacutegrafo de meu texto
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Texto
bull Como um elemento eacute marcado
bull Digamos que eu queria indicar que o texto abaixo eacute um paraacutegrafo de meu documento
ltpgtEsse eacute um paraacutegrafo de meu textoltpgt
ndash p vem de ldquoParaacutegrafordquo (Paragraph em inglecircs)
ldquotagrdquo de abertura ldquotagrdquo de fechamento Conteuacutedo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atributo de uma Tag
bull Uma tag pode incluir atributos
ndash Modificadores da tag
lthtml lang=ldquopt-BRrdquo gtlthtmlgt
ndash lang vem de ldquoLiacutenguardquo (language em inglecircs)
atributo valor
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilotildees Estruturais Baacutesicas
ltDOCTYPE htmlgt
lthtml lang=ldquopt-BRrdquogt
ltheadgt
lttitlegtTiacutetulo da Paacuteginalttitlegt
ltheadgt
ltbodygt
ltpgtUm conteuacutedo qualquerltpgt
ltbodygt
lthtmlgt
Vamos construir uma paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Head x Body
bull Head meta-informaccedilotildees
ndash Tiacutetulo
lttitlegtUm tiacutetulo de Paacuteginalttitlegt
ndash Codificaccedilatildeo dos caracteres (ISO UTF-8 UTF-16)
ltmeta charset=ldquoUTF-8rdquo gt
ndash Folhas de Estilo CSSs usados pela paacutegina
ltlink href=ldquoestiloscss rel=stylesheetldquo gt
ndash Scripts JavaScripts usados pela paacutegina
ltscript src=jsscriptsjsgtltscriptgt
bull Body o conteuacutedo da paacutegina
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Documento HTML 5 Miacutenimo
ltDOCTYPE htmlgt
lthtml lang=pt-BRgt
ltheadgt
ltmeta charset=UTF-8 gt
lttitlegtUm tiacutetulolttitlegt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
DOCTYPE
lthtmlgt
ltheadgt
ltbodygt
ltmetagt
lttitlegt
httpsvalidatorw3org
indexhtml
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Aninhamentos devem estar corretos
ltemgtltstronggt
ecircnfase
ltemgtltstronggt
ltemgtltstronggt
ecircnfase
ltstronggtltemgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags
ltpgtParaacutegrafo 1
ltpgtParaacutegrafo 2
ltpgtParaacutegrafo 3
ltpgtParaacutegrafo 1ltpgt
ltpgtParaacutegrafo 2 ltpgt
ltpgtParaacutegrafo 3 ltpgt
Isso estaacute ERRADO
Isso estaacute CORRETO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Fechar as tags idealmente em minuacutesculas
QuebraltBRgt
Reacutegualthrgt
ltimg src=ldquoimggifrdquogt
Quebraltbr gt
Reacutegualthr gt
ltimg src=ldquoimggifrdquo gt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Regras e Boas Praacuteticas em HTML 5
bull Atributos em minuacutesculas e valor entre aspas
ltnav ID=Testegt
Um menu
ltnavgt
ltnav id=ldquoTesterdquogt
Um menu
ltnavgt
Natildeo eacute amigaacutevel
Eacute amigaacutevel
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Vantagens de Seguir as Regras
bull Compatibilidade paacuteginas mais compatiacuteveis com navegadores e aplicaccedilotildees
ndash Mesmo antigas em (X)HTML
bull Velocidade renderizaccedilatildeo mais raacutepida
ndash Fechamentos e aninhamentos ajudam o trabalho do navegador
bull Padronizaccedilatildeo HTML 5 eacute padratildeo
ndash Coacutedigos similares muita documentaccedilatildeo
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Quais Tags Podem Ser Usadas
bull Existem vaacuterias
httpsdevelopermozillaorgpt-BRdocsWebHTMLElement
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
O CORPO DO DOCUMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
bull Barra de Navegaccedilatildeo
bull Conteuacutedo
bull Rodapeacute
ltheadergt
ltnavgt
ltsectiongt ltarticlegt
ltasidegt
ltfootergt ap01ex1html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente
bull Cabeccedilalho
ndash Agrupa itens de tiacutetulo
bull Barra de Navegaccedilatildeo
ndash Menus com opccedilotildees de 1ordm e 2ordm niacutevel
bull Conteuacutedo
ndash Blocos de texto (mais sobre cada um adiante)
ndash Eacute comum conterem ltheadergt dentro
bull Rodapeacute
ndash Agrupa itens de rodapeacute
ndash Eacute comum incluir ltnavgt dentro
ltheadergt
ltnavgt
ltsectiongt ltarticlegt ltasidegt
ltfootergt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Estruturando Semanticamente bull Artigo
ndash Bloco de texto que faz sentido isoladamente
ndash Exemplo entrada de jornalblog
bull Seccedilatildeo ndash Pode ser parte de um artigo
bull Ex um artigo longo com vaacuterios capiacutetulos
ndash Pode ser um conjunto de artigos bull Em um blog com vaacuterios temas uma seccedilatildeo para cada tema
ndash Vaacuterios artigos dentro da seccedilatildeo
bull Aparte ndash Texto paralelo relacionado ao principal
bull Ex Um ldquoboxrdquo dando detalhes sobre algum aspecto
ltsectiongt
ltarticlegt
ltasidegt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Tiacutetulos bull Manchetes ldquoHeadlinerdquo
ndash Seis niacuteveis
lth1gt
lth2gt
lth3gt
lth4gt
lth5gt
lth6gt
lth1gtUm H1lth1gt
lth2gtUm H2lth2gt
lth3gtUm H3lth3gt
lth4gtUm H4lth4gt
lth5gtUm H5lth5gt
lth6gtUm H6lth6gt
ap01ex2html
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
bull Separador
bull Texto Preacute-Formatado
bull Link (Acircncora)
ltpgt
lthr gt
ltpregt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Paraacutegrafo
ltpgtIsto eacute um paraacutegrafo simplesltpgt
ltpgt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Separador
lthr gt
lthr gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Texto Preacute-Formatado ltpregt Este eacute um texto
Preacute-formatado
Em vaacuterias linhas
Com o formato respeitado
ltpregt
ltpregt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcando Textos
bull Link
ndash Normalmente vem dentro de bloco ou paraacutegrafo
ndash Atributo baacutesico bull href endereccedilo destino
lta href=httpwwwamusementfactorycombrgt
Site do Grupo do Professor
ltagt
ltagt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Inserindo imagens
bull Imagem
ndash Vem dentro de um bloco ou paraacutegrafo
bull Tem os seguintes atributos baacutesicos ndash src indica a origem da imagem
ndash alt indica um texto alternativo
ndash title texto descritivo da imagem
ndash width largura da imagem
ndash height altura da imagem
ltimg gt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif width=330 height=80 title=Grupo do professor alt=Amusement Factory Logo gt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Marcaccedilatildeo Semacircntica da Imagem
bull Figura Legenda da Figura
ndash Agrupa elementos da figura (graacutefico viacutedeo etc)
ltfiguregt
ltfigcaptiongtLogotipoltfigcaptiongt
ltimg src=httpwwwcaetanoengbrmainimagesaflogo_horizgif gt
ltfiguregt
ltfiguregt ltfigcaptiongt
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Bloco de Estruturaccedilatildeo Geneacuterico
bull Divisatildeo (Bloco)
ndash Bloco geneacuterico usualmente para formataccedilatildeo visual ltdivgt
ltpgtUm texto na divltpgt
ltdivgt
ltdivgt
Veremos mais sobre isso na aula de CSS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ATIVIDADE
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade
bull Individual
ndash Cada aluno deve elaborar uma paacutegina em HTML
ndash Deve conter tiacutetulo pelo menos uma seccedilatildeo e deve incluir uma imagem
ndash A paacutegina deve passar na verificaccedilatildeo do W3C
ndash Escolha o tema que vocecirc preferir
ndash Use como base os documentos fornecidos
bull Tempo 15 minutos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Atividade - Discussatildeo
bull Seratildeo apresentadas 5 das paacuteginas
ndash Aluno deveraacute mostrar paacutegina e explicar o HTML
bull Formaccedilatildeo dos Grupos
ndash Preencha o Google Forms indicando os alunos do grupo que desenvolveratildeo o projeto
ndash httpsdocsgooglecomformsde1FAIpQLSdJsv2rHIU1Tsh8lYzyoP-E3CgPZnMdjRnVmL05iN7yj2PRxgviewform
ndash De 4 a 8 alunos
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
ENCERRAMENTO
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
Resumo e Proacuteximos Passos
bull Planos de Ensino e Aula datas e criteacuterios
bull Fontes de informaccedilatildeo
bull As vaacuterias tecnologias usadas na Web
bull Fundamentos do HTML 5
bull Poacutes Aula Aprenda Mais Poacutes Aula e Desafio
ndash No padlet httpspadletcomdjcaetanodesweb
bull Listas
bull Tabelas
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
Desenvolvimento Web em HTML 5 CSS JavaScript e PHP Prof Dr Daniel Caetano
PERGUNTAS
![52464384 Informatica Programacao Web HTML Css Php[1]](https://img.document.onl/doc/110x75/55cf98af550346d033991258/52464384-informatica-programacao-web-html-css-php1.jpg)
