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

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 Aulade 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 vema 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 aWeb!? 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 aWeb!? sábado, 21 de janeiro de 12
  • 6.
    W3C e osPadrõ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 juntaro CSS com o HTML!? Primeira forma sábado, 21 de janeiro de 12
  • 18.
    E como juntaro 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