Curso de HTML5 com @zarathon
Aula01 - Introdução ao HTML
- Link para a video-aula : http://youtu.be/GL_ULlrwUMI
Inscrevam-se no canal para ficar sempre informado de quando sair um conteúdo novo!
Me sigam no twitter para mais informações: @zarathon
Dúvidas, críticas deixem nos comentários... Responderei a todos com muita satisfação!
GUIA DE APRENDIZAGEM 2024 9º A - História 1 BI.doc
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
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
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