SlideShare une entreprise Scribd logo
1  sur  20
Télécharger pour lire hors ligne
Curso de HTML5
                               Visão Geral sobre o HTML




sábado, 21 de janeiro de 12
Conteúdo da Aula de
                                     Hoje
                              O que é Web!?

                              Como funciona a Web!?

                              Quem é W3C e o que são padrões web!?

                              (X)HTML

                              CSS



sábado, 21 de janeiro de 12
De onde vem a Web!?

                              Criada por Tim Berners-Lee em 1989.
                              Baseado no projeto ENQUIRE (1980), enquanto ele trabalhava na
                              CERN.
                              Seu intento original do sistema foi tornar mais fácil o
                              compartilhamento de documentos de pesquisas entre os colegas.

                              Também conhecida como World-Wide Web (WWW) é a parte
                              multimídia da Internet, portanto possibilita a exibição de páginas de
                              hipertexto, ou seja, texto em formato digital, documentos que podem
                              conter todo o tipo de informação: textos, fotos, animações, trechos
                              de vídeo e sons e programas e que permite conexões entre
                              documentos (os links).




sábado, 21 de janeiro de 12
Como funciona a Web!?
                              A web consiste em um sistema cliente-servidor.

                              ! A comunicação entre os clientes e servidores se dá através do
                              protocolo HTTP:

                              ! 1. Usuário digita uma URL navegador (browser) ou clica em um
                              link;

                              !   2. Navegador envia a requisição até o servidor de web;

                              ! 3. Servidor de web envia o conteúdo requisitado para o
                              navegador;

                              !   4. O Navegador apresenta a informação para o usuário.



sábado, 21 de janeiro de 12
Como funciona a Web!?




sábado, 21 de janeiro de 12
W3C e os Padrões Web
                              W3C (World Wide Web Consortium) é um consórcio
                              de empresas de tecnologia. Fundado por Tim
                              Berners-Lee em 1994 para levar a Web ao seu
                              potencial máximo.

                              Padrões Web ou Web Standards é um conjunto de
                              recomendações, produzidos pelo W3C e destinados a
                              orientar fabricantes, desenvolvedores e projetistas
                              para o uso de práticas que possibilitem a criação de
                              uma Web acessível a todos, independentemente dos
                              dispositivos usados ou de suas necessidades


sábado, 21 de janeiro de 12
O que é o HTML


                              HTML é a abreviação para HyperText Markup
                              Language, que pode ser traduzido como
                              Linguagem de Marcação para Hipertexto.

                              Compõe a estrutura de uma página Web
                              através de etiquetas (tags) e atributos.




sábado, 21 de janeiro de 12
O que é o HTML


                              TAGs ou Marcadores




                              Atributo das TAGs




sábado, 21 de janeiro de 12
Tags básicas

                              <html></html> - Define o começo e final de um documento HTML.
                              <head></head> - Cabeçalho. Contém informação descritiva, como o título.
                              <meta /> - Meta-Informação
                              <title></title> - Título do documento.
                              <body></body> - Corpo. Conteúdo da página.
                              <div></div> - Divide página em seções lógicas.
                              <ul></ul> - Inicia/termina Lista não ordenada;
                              <li></li> - Item de lista padrão;
                              <a href="X">Y<a> - Cria um hyperlink com o conteúdo; X é o endereço e Y o nome do endereço.
                              img src="X" /> - Insere uma imagem, X é o nome ou diretório da imagem.
                              <hX></hX> - Inicia um cabeçalho (Títulos), onde X varia de 1 até 6. Em escala descrescente.
                              <p></p> - Inicia e finaliza um parágrafo.




sábado, 21 de janeiro de 12
E esse (X)HTML


                              O “X” aí empregado quer dizer que
                              utilizaremos um HTML Extendido, ou seja um
                              HTML como algo a mais, que nesse caso é o
                              CSS.




sábado, 21 de janeiro de 12
Mas o que é o CSS!?

                              Cascading Style Sheets, em português Folhas
                              de Estilo em Cascata, são documentos que
                              descrevem de que forma o HTML deve ser
                              apresentado.

                              Contêm um conjunto de regras que
                              descrevem o aspecto visual dos elementos (as
                              tags) HTML.



sábado, 21 de janeiro de 12
Css... mais detalhes...
                              Sintaxe




sábado, 21 de janeiro de 12
Css... mais detalhes...


                              Uma classe define a variação de um estilo, o
                              qual é referenciado através de uma
                              ocorrência específica de um elemento
                              utilizando o atributo class.

                              No código de css é utilizado o símbolo “.”




sábado, 21 de janeiro de 12
Css... mais detalhes...


                              Pode-se atribuir um ID aos elementos e
                              então associar estilos à este ID.

                              Para declarar o estilo para um ID é usado o
                              símbolo "#".




sábado, 21 de janeiro de 12
Css... mais detalhes...


                              Assim como em qualquer linguagem de
                              programação, em CSS é possível adicionar
                              comentários para melhor documentar o
                              código.




sábado, 21 de janeiro de 12
Não confundam!!!


                              ! “(X)HTML para estruturar!

                              ! e

                              ! CSS para apresentar (formatação).”




sábado, 21 de janeiro de 12
E como juntar o CSS
                                 com o HTML!?
                              Primeira forma




sábado, 21 de janeiro de 12
E como juntar o CSS
                                 com o HTML!?
                              Segunda forma (+ utilizada)




sábado, 21 de janeiro de 12
Referências dessa aula!


                              @igorpimentel

                              Site do W3C - você encontra toda a
                              documentação online sobre html e css

                              Wikipédia




sábado, 21 de janeiro de 12
Mais sobre mim...


                              Follow me os bons...

                                @zarathon

                                Facebook.com.br/zarathon

                                www.zarathon.com.br (em breve online)




sábado, 21 de janeiro de 12

Contenu connexe

Tendances

HTML 5 A evolução do HTML 4 para o HTML 5
HTML 5 A evolução do HTML 4 para o HTML 5HTML 5 A evolução do HTML 4 para o HTML 5
HTML 5 A evolução do HTML 4 para o HTML 5ondazul
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Jose Augusto Cintra
 
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEBHTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEBPeslPinguim
 
E-book sobre HTML 5 (Devmedia)
E-book sobre HTML 5 (Devmedia)E-book sobre HTML 5 (Devmedia)
E-book sobre HTML 5 (Devmedia)Devmedia
 
Html+para+iniciantes
Html+para+iniciantesHtml+para+iniciantes
Html+para+iniciantesbradock1964
 
Minicurso CSS: Definição e aplicação
Minicurso CSS: Definição e aplicaçãoMinicurso CSS: Definição e aplicação
Minicurso CSS: Definição e aplicaçãoVanessa Me Tonini
 

Tendances (17)

Html5 Aula 4
Html5 Aula 4Html5 Aula 4
Html5 Aula 4
 
Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
 
Html5 & CSS3
Html5 & CSS3Html5 & CSS3
Html5 & CSS3
 
HTML 5 A evolução do HTML 4 para o HTML 5
HTML 5 A evolução do HTML 4 para o HTML 5HTML 5 A evolução do HTML 4 para o HTML 5
HTML 5 A evolução do HTML 4 para o HTML 5
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5
 
Html5 Aula 5
Html5 Aula 5Html5 Aula 5
Html5 Aula 5
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
 
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEBHTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
 
Css e iFrames
Css e iFramesCss e iFrames
Css e iFrames
 
E-book sobre HTML 5 (Devmedia)
E-book sobre HTML 5 (Devmedia)E-book sobre HTML 5 (Devmedia)
E-book sobre HTML 5 (Devmedia)
 
HTML5 CSS3
HTML5 CSS3HTML5 CSS3
HTML5 CSS3
 
Introdução ao HTML e CSS
Introdução ao HTML e CSSIntrodução ao HTML e CSS
Introdução ao HTML e CSS
 
Html 5 e Css3
Html 5 e Css3Html 5 e Css3
Html 5 e Css3
 
Html5 em 15 minutos
Html5 em 15 minutosHtml5 em 15 minutos
Html5 em 15 minutos
 
Html
HtmlHtml
Html
 
Html+para+iniciantes
Html+para+iniciantesHtml+para+iniciantes
Html+para+iniciantes
 
Minicurso CSS: Definição e aplicação
Minicurso CSS: Definição e aplicaçãoMinicurso CSS: Definição e aplicação
Minicurso CSS: Definição e aplicação
 

Similaire à Curso de HTML5 - Aula01

Desenvolvimento de sites com xhtml e css nos
Desenvolvimento de sites com xhtml e css nosDesenvolvimento de sites com xhtml e css nos
Desenvolvimento de sites com xhtml e css nosVinicius Rocha Olivieri
 
Desenvolvimento Web Parte II
Desenvolvimento Web Parte IIDesenvolvimento Web Parte II
Desenvolvimento Web Parte IIigorpimentel
 
A Semântica do HTML5: a web 3.0
A Semântica do HTML5: a web 3.0A Semântica do HTML5: a web 3.0
A Semântica do HTML5: a web 3.0Campus Party Brasil
 
AULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptxAULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptxJEANCLEVERSONPRATAS
 
Webpages
WebpagesWebpages
WebpagesEMSNEWS
 
Benef&iacute;cios dos WebStandards
Benef&iacute;cios dos WebStandardsBenef&iacute;cios dos WebStandards
Benef&iacute;cios dos WebStandardsNáiron Jcg
 
Introdução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento webIntrodução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento webCarlos Eduardo Kadu
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento webRodrigo Rodrigues
 
Desvendando padrões para desenvolvimento web, base para o sucesso
Desvendando padrões para desenvolvimento web, base para o sucessoDesvendando padrões para desenvolvimento web, base para o sucesso
Desvendando padrões para desenvolvimento web, base para o sucessoUbiratan Z. do Nascimento
 
Introdução a Wordpress - David Arty - SENAC
Introdução a Wordpress - David Arty - SENACIntrodução a Wordpress - David Arty - SENAC
Introdução a Wordpress - David Arty - SENACDavid Arty
 
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões webMontando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões webigorpimentel
 
Criando e Usando Helpers
Criando e Usando HelpersCriando e Usando Helpers
Criando e Usando HelpersJoaoVagner
 
Introdução de web
Introdução de webIntrodução de web
Introdução de webSedu
 
A importância dos padrões web
A importância dos padrões webA importância dos padrões web
A importância dos padrões webDivulgrs
 
Facilitando sua vida com SASS
Facilitando sua vida com SASSFacilitando sua vida com SASS
Facilitando sua vida com SASSLarissa Carvalho
 

Similaire à Curso de HTML5 - Aula01 (20)

Desenvolvimento de sites com xhtml e css nos
Desenvolvimento de sites com xhtml e css nosDesenvolvimento de sites com xhtml e css nos
Desenvolvimento de sites com xhtml e css nos
 
Desenvolvimento Web Parte II
Desenvolvimento Web Parte IIDesenvolvimento Web Parte II
Desenvolvimento Web Parte II
 
A Semântica do HTML5: a web 3.0
A Semântica do HTML5: a web 3.0A Semântica do HTML5: a web 3.0
A Semântica do HTML5: a web 3.0
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
 
AULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptxAULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptx
 
Sobre o HTML
Sobre o HTMLSobre o HTML
Sobre o HTML
 
Webpages
WebpagesWebpages
Webpages
 
Webpages
WebpagesWebpages
Webpages
 
Html
HtmlHtml
Html
 
Benef&iacute;cios dos WebStandards
Benef&iacute;cios dos WebStandardsBenef&iacute;cios dos WebStandards
Benef&iacute;cios dos WebStandards
 
Introdução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento webIntrodução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento web
 
O que é Web 2.0
O que é Web 2.0O que é Web 2.0
O que é Web 2.0
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
 
Desvendando padrões para desenvolvimento web, base para o sucesso
Desvendando padrões para desenvolvimento web, base para o sucessoDesvendando padrões para desenvolvimento web, base para o sucesso
Desvendando padrões para desenvolvimento web, base para o sucesso
 
Introdução a Wordpress - David Arty - SENAC
Introdução a Wordpress - David Arty - SENACIntrodução a Wordpress - David Arty - SENAC
Introdução a Wordpress - David Arty - SENAC
 
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões webMontando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
 
Criando e Usando Helpers
Criando e Usando HelpersCriando e Usando Helpers
Criando e Usando Helpers
 
Introdução de web
Introdução de webIntrodução de web
Introdução de web
 
A importância dos padrões web
A importância dos padrões webA importância dos padrões web
A importância dos padrões web
 
Facilitando sua vida com SASS
Facilitando sua vida com SASSFacilitando sua vida com SASS
Facilitando sua vida com SASS
 

Plus de Zarathon Maia

Como ser um dev de vergonha!
Como ser um dev de vergonha!Como ser um dev de vergonha!
Como ser um dev de vergonha!Zarathon Maia
 
Minicurso de Rails - WTISC 2014
Minicurso de Rails - WTISC 2014Minicurso de Rails - WTISC 2014
Minicurso de Rails - WTISC 2014Zarathon Maia
 
Startup De estudantes à milionários
Startup  De estudantes à milionáriosStartup  De estudantes à milionários
Startup De estudantes à milionáriosZarathon Maia
 
Apresentação Wordpress FLISOL 2010
Apresentação Wordpress FLISOL 2010Apresentação Wordpress FLISOL 2010
Apresentação Wordpress FLISOL 2010Zarathon Maia
 
Apresentação Java Web - Jsf+Hibernate
Apresentação Java Web - Jsf+HibernateApresentação Java Web - Jsf+Hibernate
Apresentação Java Web - Jsf+HibernateZarathon Maia
 
Apresentação Java Web Si Ufc Quixadá - MVC
Apresentação Java Web Si Ufc Quixadá - MVCApresentação Java Web Si Ufc Quixadá - MVC
Apresentação Java Web Si Ufc Quixadá - MVCZarathon Maia
 
Apresentação Java Web Si Ufc Quixadá
Apresentação Java Web Si Ufc QuixadáApresentação Java Web Si Ufc Quixadá
Apresentação Java Web Si Ufc QuixadáZarathon Maia
 

Plus de Zarathon Maia (8)

Como ser um dev de vergonha!
Como ser um dev de vergonha!Como ser um dev de vergonha!
Como ser um dev de vergonha!
 
Minicurso de Rails - WTISC 2014
Minicurso de Rails - WTISC 2014Minicurso de Rails - WTISC 2014
Minicurso de Rails - WTISC 2014
 
Startup De estudantes à milionários
Startup  De estudantes à milionáriosStartup  De estudantes à milionários
Startup De estudantes à milionários
 
Apresentação Wordpress FLISOL 2010
Apresentação Wordpress FLISOL 2010Apresentação Wordpress FLISOL 2010
Apresentação Wordpress FLISOL 2010
 
Camisas Turma Ufc
Camisas Turma UfcCamisas Turma Ufc
Camisas Turma Ufc
 
Apresentação Java Web - Jsf+Hibernate
Apresentação Java Web - Jsf+HibernateApresentação Java Web - Jsf+Hibernate
Apresentação Java Web - Jsf+Hibernate
 
Apresentação Java Web Si Ufc Quixadá - MVC
Apresentação Java Web Si Ufc Quixadá - MVCApresentação Java Web Si Ufc Quixadá - MVC
Apresentação Java Web Si Ufc Quixadá - MVC
 
Apresentação Java Web Si Ufc Quixadá
Apresentação Java Web Si Ufc QuixadáApresentação Java Web Si Ufc Quixadá
Apresentação Java Web Si Ufc Quixadá
 

Dernier

Polígonos, Diagonais de um Polígono, SOMA DOS ANGULOS INTERNOS DE UM POLÍGON...
Polígonos, Diagonais de um Polígono, SOMA DOS ANGULOS INTERNOS DE UM  POLÍGON...Polígonos, Diagonais de um Polígono, SOMA DOS ANGULOS INTERNOS DE UM  POLÍGON...
Polígonos, Diagonais de um Polígono, SOMA DOS ANGULOS INTERNOS DE UM POLÍGON...marcelafinkler
 
Responde ou passa na HISTÓRIA - REVOLUÇÃO INDUSTRIAL - 8º ANO.pptx
Responde ou passa na HISTÓRIA - REVOLUÇÃO INDUSTRIAL - 8º ANO.pptxResponde ou passa na HISTÓRIA - REVOLUÇÃO INDUSTRIAL - 8º ANO.pptx
Responde ou passa na HISTÓRIA - REVOLUÇÃO INDUSTRIAL - 8º ANO.pptxAntonioVieira539017
 
TCC_MusicaComoLinguagemNaAlfabetização-ARAUJOfranklin-UFBA.pdf
TCC_MusicaComoLinguagemNaAlfabetização-ARAUJOfranklin-UFBA.pdfTCC_MusicaComoLinguagemNaAlfabetização-ARAUJOfranklin-UFBA.pdf
TCC_MusicaComoLinguagemNaAlfabetização-ARAUJOfranklin-UFBA.pdfamarianegodoi
 
3 2 - termos-integrantes-da-oracao-.pptx
3 2 - termos-integrantes-da-oracao-.pptx3 2 - termos-integrantes-da-oracao-.pptx
3 2 - termos-integrantes-da-oracao-.pptxMarlene Cunhada
 
Educação Financeira - Cartão de crédito665933.pptx
Educação Financeira - Cartão de crédito665933.pptxEducação Financeira - Cartão de crédito665933.pptx
Educação Financeira - Cartão de crédito665933.pptxMarcosLemes28
 
Aula 25 - A america espanhola - colonização, exploraçãp e trabalho (mita e en...
Aula 25 - A america espanhola - colonização, exploraçãp e trabalho (mita e en...Aula 25 - A america espanhola - colonização, exploraçãp e trabalho (mita e en...
Aula 25 - A america espanhola - colonização, exploraçãp e trabalho (mita e en...MariaCristinaSouzaLe1
 
O que é arte. Definição de arte. História da arte.
O que é arte. Definição de arte. História da arte.O que é arte. Definição de arte. História da arte.
O que é arte. Definição de arte. História da arte.denisecompasso2
 
Sistema de Bibliotecas UCS - Cantos do fim do século
Sistema de Bibliotecas UCS  - Cantos do fim do séculoSistema de Bibliotecas UCS  - Cantos do fim do século
Sistema de Bibliotecas UCS - Cantos do fim do séculoBiblioteca UCS
 
Cópia de AULA 2- ENSINO FUNDAMENTAL ANOS INICIAIS - LÍNGUA PORTUGUESA.pptx
Cópia de AULA 2- ENSINO FUNDAMENTAL ANOS INICIAIS - LÍNGUA PORTUGUESA.pptxCópia de AULA 2- ENSINO FUNDAMENTAL ANOS INICIAIS - LÍNGUA PORTUGUESA.pptx
Cópia de AULA 2- ENSINO FUNDAMENTAL ANOS INICIAIS - LÍNGUA PORTUGUESA.pptxSilvana Silva
 
Renascimento Cultural na Idade Moderna PDF
Renascimento Cultural na Idade Moderna PDFRenascimento Cultural na Idade Moderna PDF
Renascimento Cultural na Idade Moderna PDFRafaelaMartins72608
 
Aula prática JOGO-Regencia-Verbal-e-Nominal.pdf
Aula prática JOGO-Regencia-Verbal-e-Nominal.pdfAula prática JOGO-Regencia-Verbal-e-Nominal.pdf
Aula prática JOGO-Regencia-Verbal-e-Nominal.pdfKarinaSouzaCorreiaAl
 
Historia de Portugal - Quarto Ano - 2024
Historia de Portugal - Quarto Ano - 2024Historia de Portugal - Quarto Ano - 2024
Historia de Portugal - Quarto Ano - 2024Cabiamar
 
classe gramatical Substantivo apresentação..pptx
classe gramatical Substantivo apresentação..pptxclasse gramatical Substantivo apresentação..pptx
classe gramatical Substantivo apresentação..pptxLuciana Luciana
 
LENDA DA MANDIOCA - leitura e interpretação
LENDA DA MANDIOCA - leitura e interpretaçãoLENDA DA MANDIOCA - leitura e interpretação
LENDA DA MANDIOCA - leitura e interpretaçãoLidianePaulaValezi
 
Expansão Marítima- Descobrimentos Portugueses século XV
Expansão Marítima- Descobrimentos Portugueses século XVExpansão Marítima- Descobrimentos Portugueses século XV
Expansão Marítima- Descobrimentos Portugueses século XVlenapinto
 
Os editoriais, reportagens e entrevistas.pptx
Os editoriais, reportagens e entrevistas.pptxOs editoriais, reportagens e entrevistas.pptx
Os editoriais, reportagens e entrevistas.pptxTailsonSantos1
 
Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...
Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...
Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...azulassessoria9
 
QUIZ ensino fundamental 8º ano revisão geral
QUIZ ensino fundamental 8º ano revisão geralQUIZ ensino fundamental 8º ano revisão geral
QUIZ ensino fundamental 8º ano revisão geralAntonioVieira539017
 
Camadas da terra -Litosfera conteúdo 6º ano
Camadas da terra -Litosfera  conteúdo 6º anoCamadas da terra -Litosfera  conteúdo 6º ano
Camadas da terra -Litosfera conteúdo 6º anoRachel Facundo
 
aula de bioquímica bioquímica dos carboidratos.ppt
aula de bioquímica bioquímica dos carboidratos.pptaula de bioquímica bioquímica dos carboidratos.ppt
aula de bioquímica bioquímica dos carboidratos.pptssuser2b53fe
 

Dernier (20)

Polígonos, Diagonais de um Polígono, SOMA DOS ANGULOS INTERNOS DE UM POLÍGON...
Polígonos, Diagonais de um Polígono, SOMA DOS ANGULOS INTERNOS DE UM  POLÍGON...Polígonos, Diagonais de um Polígono, SOMA DOS ANGULOS INTERNOS DE UM  POLÍGON...
Polígonos, Diagonais de um Polígono, SOMA DOS ANGULOS INTERNOS DE UM POLÍGON...
 
Responde ou passa na HISTÓRIA - REVOLUÇÃO INDUSTRIAL - 8º ANO.pptx
Responde ou passa na HISTÓRIA - REVOLUÇÃO INDUSTRIAL - 8º ANO.pptxResponde ou passa na HISTÓRIA - REVOLUÇÃO INDUSTRIAL - 8º ANO.pptx
Responde ou passa na HISTÓRIA - REVOLUÇÃO INDUSTRIAL - 8º ANO.pptx
 
TCC_MusicaComoLinguagemNaAlfabetização-ARAUJOfranklin-UFBA.pdf
TCC_MusicaComoLinguagemNaAlfabetização-ARAUJOfranklin-UFBA.pdfTCC_MusicaComoLinguagemNaAlfabetização-ARAUJOfranklin-UFBA.pdf
TCC_MusicaComoLinguagemNaAlfabetização-ARAUJOfranklin-UFBA.pdf
 
3 2 - termos-integrantes-da-oracao-.pptx
3 2 - termos-integrantes-da-oracao-.pptx3 2 - termos-integrantes-da-oracao-.pptx
3 2 - termos-integrantes-da-oracao-.pptx
 
Educação Financeira - Cartão de crédito665933.pptx
Educação Financeira - Cartão de crédito665933.pptxEducação Financeira - Cartão de crédito665933.pptx
Educação Financeira - Cartão de crédito665933.pptx
 
Aula 25 - A america espanhola - colonização, exploraçãp e trabalho (mita e en...
Aula 25 - A america espanhola - colonização, exploraçãp e trabalho (mita e en...Aula 25 - A america espanhola - colonização, exploraçãp e trabalho (mita e en...
Aula 25 - A america espanhola - colonização, exploraçãp e trabalho (mita e en...
 
O que é arte. Definição de arte. História da arte.
O que é arte. Definição de arte. História da arte.O que é arte. Definição de arte. História da arte.
O que é arte. Definição de arte. História da arte.
 
Sistema de Bibliotecas UCS - Cantos do fim do século
Sistema de Bibliotecas UCS  - Cantos do fim do séculoSistema de Bibliotecas UCS  - Cantos do fim do século
Sistema de Bibliotecas UCS - Cantos do fim do século
 
Cópia de AULA 2- ENSINO FUNDAMENTAL ANOS INICIAIS - LÍNGUA PORTUGUESA.pptx
Cópia de AULA 2- ENSINO FUNDAMENTAL ANOS INICIAIS - LÍNGUA PORTUGUESA.pptxCópia de AULA 2- ENSINO FUNDAMENTAL ANOS INICIAIS - LÍNGUA PORTUGUESA.pptx
Cópia de AULA 2- ENSINO FUNDAMENTAL ANOS INICIAIS - LÍNGUA PORTUGUESA.pptx
 
Renascimento Cultural na Idade Moderna PDF
Renascimento Cultural na Idade Moderna PDFRenascimento Cultural na Idade Moderna PDF
Renascimento Cultural na Idade Moderna PDF
 
Aula prática JOGO-Regencia-Verbal-e-Nominal.pdf
Aula prática JOGO-Regencia-Verbal-e-Nominal.pdfAula prática JOGO-Regencia-Verbal-e-Nominal.pdf
Aula prática JOGO-Regencia-Verbal-e-Nominal.pdf
 
Historia de Portugal - Quarto Ano - 2024
Historia de Portugal - Quarto Ano - 2024Historia de Portugal - Quarto Ano - 2024
Historia de Portugal - Quarto Ano - 2024
 
classe gramatical Substantivo apresentação..pptx
classe gramatical Substantivo apresentação..pptxclasse gramatical Substantivo apresentação..pptx
classe gramatical Substantivo apresentação..pptx
 
LENDA DA MANDIOCA - leitura e interpretação
LENDA DA MANDIOCA - leitura e interpretaçãoLENDA DA MANDIOCA - leitura e interpretação
LENDA DA MANDIOCA - leitura e interpretação
 
Expansão Marítima- Descobrimentos Portugueses século XV
Expansão Marítima- Descobrimentos Portugueses século XVExpansão Marítima- Descobrimentos Portugueses século XV
Expansão Marítima- Descobrimentos Portugueses século XV
 
Os editoriais, reportagens e entrevistas.pptx
Os editoriais, reportagens e entrevistas.pptxOs editoriais, reportagens e entrevistas.pptx
Os editoriais, reportagens e entrevistas.pptx
 
Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...
Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...
Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...
 
QUIZ ensino fundamental 8º ano revisão geral
QUIZ ensino fundamental 8º ano revisão geralQUIZ ensino fundamental 8º ano revisão geral
QUIZ ensino fundamental 8º ano revisão geral
 
Camadas da terra -Litosfera conteúdo 6º ano
Camadas da terra -Litosfera  conteúdo 6º anoCamadas da terra -Litosfera  conteúdo 6º ano
Camadas da terra -Litosfera conteúdo 6º ano
 
aula de bioquímica bioquímica dos carboidratos.ppt
aula de bioquímica bioquímica dos carboidratos.pptaula de bioquímica bioquímica dos carboidratos.ppt
aula de bioquímica bioquímica dos carboidratos.ppt
 

Curso de HTML5 - Aula01

  • 1. Curso de HTML5 Visão Geral sobre o HTML sábado, 21 de janeiro de 12
  • 2. Conteúdo da Aula de Hoje O que é Web!? Como funciona a Web!? Quem é W3C e o que são padrões web!? (X)HTML CSS sábado, 21 de janeiro de 12
  • 3. De onde vem a Web!? Criada por Tim Berners-Lee em 1989. Baseado no projeto ENQUIRE (1980), enquanto ele trabalhava na CERN. Seu intento original do sistema foi tornar mais fácil o compartilhamento de documentos de pesquisas entre os colegas. Também conhecida como World-Wide Web (WWW) é a parte multimídia da Internet, portanto possibilita a exibição de páginas de hipertexto, ou seja, texto em formato digital, documentos que podem conter todo o tipo de informação: textos, fotos, animações, trechos de vídeo e sons e programas e que permite conexões entre documentos (os links). sábado, 21 de janeiro de 12
  • 4. Como funciona a Web!? A web consiste em um sistema cliente-servidor. ! A comunicação entre os clientes e servidores se dá através do protocolo HTTP: ! 1. Usuário digita uma URL navegador (browser) ou clica em um link; ! 2. Navegador envia a requisição até o servidor de web; ! 3. Servidor de web envia o conteúdo requisitado para o navegador; ! 4. O Navegador apresenta a informação para o usuário. sábado, 21 de janeiro de 12
  • 5. Como funciona a Web!? sábado, 21 de janeiro de 12
  • 6. W3C e os Padrões Web W3C (World Wide Web Consortium) é um consórcio de empresas de tecnologia. Fundado por Tim Berners-Lee em 1994 para levar a Web ao seu potencial máximo. Padrões Web ou Web Standards é um conjunto de recomendações, produzidos pelo W3C e destinados a orientar fabricantes, desenvolvedores e projetistas para o uso de práticas que possibilitem a criação de uma Web acessível a todos, independentemente dos dispositivos usados ou de suas necessidades sábado, 21 de janeiro de 12
  • 7. O que é o HTML HTML é a abreviação para HyperText Markup Language, que pode ser traduzido como Linguagem de Marcação para Hipertexto. Compõe a estrutura de uma página Web através de etiquetas (tags) e atributos. sábado, 21 de janeiro de 12
  • 8. O que é o HTML TAGs ou Marcadores Atributo das TAGs sábado, 21 de janeiro de 12
  • 9. Tags básicas <html></html> - Define o começo e final de um documento HTML. <head></head> - Cabeçalho. Contém informação descritiva, como o título. <meta /> - Meta-Informação <title></title> - Título do documento. <body></body> - Corpo. Conteúdo da página. <div></div> - Divide página em seções lógicas. <ul></ul> - Inicia/termina Lista não ordenada; <li></li> - Item de lista padrão; <a href="X">Y<a> - Cria um hyperlink com o conteúdo; X é o endereço e Y o nome do endereço. img src="X" /> - Insere uma imagem, X é o nome ou diretório da imagem. <hX></hX> - Inicia um cabeçalho (Títulos), onde X varia de 1 até 6. Em escala descrescente. <p></p> - Inicia e finaliza um parágrafo. sábado, 21 de janeiro de 12
  • 10. E esse (X)HTML O “X” aí empregado quer dizer que utilizaremos um HTML Extendido, ou seja um HTML como algo a mais, que nesse caso é o CSS. sábado, 21 de janeiro de 12
  • 11. Mas o que é o CSS!? Cascading Style Sheets, em português Folhas de Estilo em Cascata, são documentos que descrevem de que forma o HTML deve ser apresentado. Contêm um conjunto de regras que descrevem o aspecto visual dos elementos (as tags) HTML. sábado, 21 de janeiro de 12
  • 12. Css... mais detalhes... Sintaxe sábado, 21 de janeiro de 12
  • 13. Css... mais detalhes... Uma classe define a variação de um estilo, o qual é referenciado através de uma ocorrência específica de um elemento utilizando o atributo class. No código de css é utilizado o símbolo “.” sábado, 21 de janeiro de 12
  • 14. Css... mais detalhes... Pode-se atribuir um ID aos elementos e então associar estilos à este ID. Para declarar o estilo para um ID é usado o símbolo "#". sábado, 21 de janeiro de 12
  • 15. Css... mais detalhes... Assim como em qualquer linguagem de programação, em CSS é possível adicionar comentários para melhor documentar o código. sábado, 21 de janeiro de 12
  • 16. Não confundam!!! ! “(X)HTML para estruturar! ! e ! CSS para apresentar (formatação).” sábado, 21 de janeiro de 12
  • 17. E como juntar o CSS com o HTML!? Primeira forma sábado, 21 de janeiro de 12
  • 18. E como juntar o CSS com o HTML!? Segunda forma (+ utilizada) sábado, 21 de janeiro de 12
  • 19. Referências dessa aula! @igorpimentel Site do W3C - você encontra toda a documentação online sobre html e css Wikipédia sábado, 21 de janeiro de 12
  • 20. Mais sobre mim... Follow me os bons... @zarathon Facebook.com.br/zarathon www.zarathon.com.br (em breve online) sábado, 21 de janeiro de 12