Aula 02
Transferir como ODP, PDF1 gostou560 visualizações
O documento descreve a história e evolução das linguagens HTML e CSS. Começa explicando que o HTML foi baseado na linguagem SGML e herdou tags como <h1>-<h6>, <head> e <p>. Também introduziu a tag <a> com o atributo href para permitir links. Posteriormente, a W3C passou a regularizar o padrão HTML.
Aula 02
- 1. Html e CSS
- 2. História do HTML ● A primeira versão do HTML foi baseada na linguagem SGML. ● O SGML era utilizado para a estruturação de documentos, sendo dele que o HTML herdou diversas tags tais como: título <h1> ao <h6>, cabeçalho <head> e parágrafo <p>. ● Mas a principal diferença entre essas duas linguagens de marcação é que o HTML implementava a tag <a> com o atributo href, permitindo assim a ligação (links)
- 3. História do HTML ● O HTML surgiu em 1990 e até o seu quinto ano de vida sofreu várias revisões e alterações na sua especificação. Nesta época, quem controlava o padrão era o CERN e a IETF. ● Após 1995, o padrão passou a ser regularizado pela W3C, entidade que regula os padrões Web e que será detalhada com maior profundidade posteriormente.
- 4. História do HTML ● 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.
- 5. HTML ● O Web Standards Project (WaSP) é um grupo formado em 1998 com o objetivo de promover os Padrões Web, assegurando desse modo um acesso simples e com menos custos para todos. ● Vem encorajando e persuadindo os fabricantes de Browsers a fornecerem suporte aos padrões, como o XHTML, CSS, ECMAScript (a versão standard do JavaScript) e o DOM.
- 6. História do HTML ● Em 1993, Dave Raggett propôs uma evolução do padrão HTML, denominada HTML+. Entretanto tal proposta nunca foi implementada. ● O verdadeiro sucessor do HTML foi o HTML 2.0, o qual foi apresentado na primeira conferência mundial sobre Web, a World Wide Web Conference. ● Essa versão do HTML pode ser vista apenas como uma correção da versão anterior, ou seja, apenas formalizava as características do HTML que já estavam em uso.
- 7. Evolução do HTML ● Versões do HTML: ● HTML 2.0 (Novembro de 1995) ● HTML 3.2 (Janeiro de 1997) ● HTML 4.0 (Dezembro de 1997) ● HTML 4.01 (Dezembro de 1999) ● ISO/IEC 15445:2000 "ISO HTML" (Maio de 2000) ● HTML 5 (Janeiro de 2008)
- 8. HTML 5 ● O HTML5 será o novo padrão para HTML, XHTML, e HTML DOM. Atualmente, está em fase de esboço, porém diversos navegadores já implementam algumas de suas funcionalidades.
- 9. HTML 5 ● Web dividida em três camadas: – Conteúdo (XHTML) – Apresentação (CSS) – Comportamento (Javascript) Devem ser desenvolvidas de forma independente, porém uma complementa a outra.
- 10. Evolução do HTML
- 11. HTML
- 12. HTML ● Semântica: – Semântica refere-se ao estudo do significado. – Quando utilizamos cada marcação para o que ela realmente foi criada, estamos construindo um “Código Semântico”. – Parar de pensar em “isso vem aqui, isso vai ali...” e pensar na “Estrutura da Informação” – Criar uma “Marcação com Significado”.
- 13. HTML ● Mão na massa…..
- 14. HTML ● Marca ou Tag HTML: – Marca ou Tag do Html é tudo aquilo que você escreve entre < > (maior que e menor que) ● EX: – <html></html> – A maioria das Tag HTML possui uma abertura e um fechamento. – Algumas Tags não tem fechamento
- 15. HTML ● OBS: – Importante lembrar que o HTML esta na versão 5, então para informar o navegador que estamos trabalhando com HTML5 colocamos a teg no inicio do codigo <!DOCTYPE HTML>
- 16. HTML ● OBS: – Para informar para o navegador que iremos trabalhar com a linguagem português Brasil, dentro da Tag HTML colocamos a linguagem para ajudar os mecanismos de buca. – EX: <html lang= ”pt-br ”> </html>
- 17. HTML ● A Tag Head: – A Tag Head serve para indicar a área de cabeçalho do site ● Ex: <head> </head>
- 18. HTML ● A Tag Body que serve para indicar o corpo do seu site. – Ex: <body> </body>
- 19. HTML ● Essa é estrutura básica de um site em HTML
- 20. HTML ● A Tag meta serve para traduzir para linguagem portuguesa juntamente com as acentuações nescessárias. – EX: <meta charset=”utf-8”> Quando não tem a tag meta
- 21. HTML Quando se coloca a Tag meta
- 22. HTML ● A seção <BODY> – Tudo que estiver contido em <BODY> será mostrado na janela principal do browser, sendo apresentado ao leitor. <BODY> pode conter cabeçalhos, parágrafos, listas, tabelas, links para outros documentos, imagens, formulários, animações, vídeos, sons e scripts embutidos.
- 23. HTML ● Atributos de <BODY> – Através de atributos de <BODY> , podemos definir cores para os textos, links e para o fundo das páginas, bem como uma imagem de fundo (marca d’água): <BODY BGCOLOR="#rrggbb" TEXT="#rrggbb" LINK="#rrggbb" ALINK="#rrggbb" VLINK="#rrggbb" BACKGROUND="URL">
- 24. HTML ● BGCOLOR – cor de fundo (quando não é indicada, o browser irá mostrar uma cor padrão, geralmente o cinza ou branco; alguns editores poderão estabelecer o branco para o fundo da página) ● TEXT – cor dos textos da página (padrão: preto)
- 25. HTML ● LINK – cor dos links (padrão: azul) ● ALINK – cor dos links, quando acionados (padrão: vermelho) ● VLINK – cor dos links, depois de visitados (padrão: azul escuro ou roxo)
- 26. HTML ● Seus valores são dados em hexadecimal, equivalentes a cores no padrão RGB ( Red, Green, Blue ). ● Existem tabelas de cores com esses valores, mas grande parte dos editores já oferece uma interface bem amigável através da qual escolhemos as cores desejadas, sem nos preocuparmos com números esdrúxulos tais como #FF80A0 .
- 27. HTML ● Browsers que seguem a definição de HTML 3.2 em diante, também aceitam 16 nomes de cores, tirados da paleta VGA do Windows - por exemplo, podemos escrever BGCOLOR="BLUE" . ● Porém, browsers mais antigos não apresentarão as cores indicadas.
- 28. HTML ● BACKGROUND – indica o URL da imagem a ser replicada no fundo da página, como uma marca d’água. – Veja o exemplo de uma página cuja imagem de fundo é. – Para efeitos de design, é possível fixar a imagem de fundo, para que ela não se mova junto com o texto ao se rolar a página. – Esse efeito não é padrão e funciona no Internet Explorer.
- 29. HTML ● Títulos: – Há seis níveis de Títulos em HTML, de <H1> a <H6> :
- 30. HTML ● Parágrafos – Quando exibimos qualquer texto em nossa página, é recomendado que ele seja sempre conteúdo de alguma tag filha da tag <body> . – A marcação mais indicada para textos comuns é a tag de parágrafo: <p>Exemplo de parágrafo</p> <p>Outro Parágrafo</p>
- 31. HTML ● Marcações de ênfase – Quando queremos dar uma ênfase diferente a um trecho de texto, podemos utilizar as marcações de ênfase. – Podemos deixar um texto “mais forte” com a tag <strong> ou deixar o texto com uma “ênfase acentuada” com a tag <em> . Também há a tag <small> , que diminui o tamanho do texto. <p>Estude para passar no<strong>ENEM</strong></p>
- 32. HTML ● Imagens: – A tag <img> define uma imagem em uma página HTML e necessita de dois atributos preenchidos: src e alt . – O primeiro aponta para o local da imagem e o segundo, um texto alternativo para a imagem caso essa não possa ser carregada ou visualizada. – O HTML 5 introduziu duas novas tags específicas para imagem: <figure> e <figcaption> . – A tag <figure> define uma imagem com a conhecida tag <img> . Além disso, permite adicionar uma legenda para a imagem por meio da tag <figcaption> .
- 33. HTML <figure> <img src=”img/produto.jpg” alt=”Foto do produto”> <figcaption>essa figura é um exemplo</figcaption> </figure>
- 34. Exercicio
- 35. HTML ● Tag LINK: – Há dois tipos de links no HTML: a tag A, que são links que levam o usuário para outros documentos e a tag LINK, que são links para fontes externas que serão usadas no documento.
- 36. HTML ● No nosso exemplo há uma tag LINK que importa o CSS para nossa página: <link rel=”stylesheet” type=”text/css” href=”estilo.css”> ● O atributo rel=”stylesheet” indica que aquele link é relativo a importação de um arquivo referente a folhas de estilo. ●
- 37. HTML ● Há outros valores para o atributo REL, como por exemplo o ALTERNATE: <link rel=”alternate” type= ”application/atom+xml” title=”feed” href= ”/feed/”> ● Neste caso, indicamos aos user-agents que o conteúdo do site poder ser encontrado em um caminho alternativo via Atom FEED.
- 38. HTML ● No HTML5 há outros links relativos que você pode inserir como o rel=”archives” que indica uma referência a uma coleção de material histórico da página. ● Por exemplo, a página de histórico de um blog pode ser referenciada nesta tag.