Você está na página 1de 41

TECNOLOGIAS PARA INTERNET I

ANTONIO MARIA CARNEIRO NETO

Unidade I - O AMBIENTE INTERNET

Surgimento da Internet após a Segunda Guerra Mundial

A Teia

O embrião do que hoje é a maior rede de comunicação do planeta

nasceu em setembro de 1969. O Departamento de Defesa dos Estados Unidos tiveram a ideia de criar um sistema de comunicação que não pudesse ser destruído por bombardeios eu fosse capaz de ligar pontos estratégicos, como centros de pesquisas de bases das Forças Armadas.

O projeto ARPA

O projeto foi financiado pela Advanced Research Projects Agency (ARPA), órgão responsável pelo desenvolvimento de pesquisas científicas e tecnológicas para fins militares do governo norte- americano, o que fez com que a rede fosse batizada de Arpanet. A rede funcionou pela primeira vez em janeiro de 1972 interligando 4 computadores em locais distintos, todos na costa oeste dos EUA

O AMBIENTE INTERNET

Breve descrição do protocolo TCP/IP

Cerf, juntamente com engenheiro Robert Kahn foi responsável pela criação de um pequeno mecanismo que permite dois computadores conversassem entre si, no mesmo idioma, quando ligados na rede. Esse mecanismo foi batizado como protocolo TCP/IP em inglês Transfer Control / Internet Protocol - fez com que as diversas redes se integrassem, formando uma gigantesca rede internacional de redes de computadores, chamada pela primeira vez de Internet. Surgiram a Bitnet, que transportava mensagens de correio eletrônico, e a NSFnet, que permitia o uso interativo de computadores remotos e a troca de arquivos e de mensagens de e- mail. Mas a popularização da Internet em todo o mundo foi a World Wide Web (também chamada de WWW, ou teia de alcance mundial), criada pelo físico inglês Tim Berners-Lee em 1990, na Suíça, no laboratório Europeu de Partículas Físicas, o CERN (sigla de Conseil Européen pour la Recherche Nucléaire).

CCT0412 - TECNOLOGIA PARA INTERNET I

O AMBIENTE INTERNET

O primeiro navegador Mosaic

Pouco depois da criação da WWW, o Centro Nacional para Aplicações em Supercomputadores dos Estados Unidos (NCSA), deu início à criação de um programa que possibilitou a visualização do conteúdo da Web, o Mosaic . O Mosaic foi o primeiro programa de navegação (ou browser) da história. O software fez com que a internet abandonasse o miserável mundo das letrinhas verdes e ganhasse uma interface gráfica, ou seja, um rosto. Essa nova cara fez com que as pessoas pudessem compartilhar textos e arquivos, como ocorria até então, mas também imagens, sons e gráficos em locais de atualização dinâmica, denominados sites. Algo semelhante às páginas de uma revista, só que na tela do computador.

O AMBIENTE INTERNET

A rede no Brasil

O primeiro contato do brasil com a Internet ocorreu em

1988 quando a Fundação de Amparo à Pesquisa do estado de São Paulo (Fapesp), ligada à Secretaria Estadual de Ciência e Tecnologia realizou a primeira conexão à rede através de uma parceria com o Fermilab, um dos mais importantes centros de pesquisa científica dos Estados Unidos.

O Consórcio World Wide Web (W3C)

Conforme W3C (Consórcio World Wide Web (W3C) é um consórcio internacional criado em 1989, no qual organizações filiadas, uma equipe em tempo integral e o público trabalham juntos para desenvolver padrões para a Web. Liderado pelo inventor da web Tim Berners-Lee e o CEO Jeffrey Jaffe, o W3C tem como missão Conduzir a World Wide Web para que atinja todo seu potencial, desenvolvendo protocolos e diretrizes que garantam seu crescimento de longo prazo.

Unidade II - INTRODUÇÃO AO HTML5

história do HTML5

Em 1998 a W3C decidiu que não continuaria a evoluir o HTML. O futuro era o XML. Então o HTML foi congelado na versão 4.01 e uma especificação foi lançada com nome de XHTML, que era uma versão do XML do HTML exigindo regras XML de sintaxe como atributos com aspas, algumas tags com fechamento enquanto outras eram autocontidas. Um pequeno grupo no Ópera, entretanto, não estava convencido que o XML era o futuro para todos os autores web. Estes indivíduos começaram um trabalho extra curricular em uma especificação prova de conceito que estender os formulários HTML sem quebrar a retrocompatibilidade. Aquela especificação eventualmente se tornou Web Forms 2.0, subsequentemente foi incorporado na especificação HTML5. Em 2006 a W3C decidiu que talvez tivesse sido otimista demais na esperança de que o mundo se mudasse para o XML. Boas ideias geram implementadas e as mais rejeitadas independentemente de quem fosse a fonte e quem ela representasse, ou até mesmo onde elas foram inicialmente debatida. Boas ideias serão adotadas no Twitter, blogs e IRC.

CCT0412 - TECNOLOGIA PARA INTERNET I

NTRODUÇÃO AO HTML5

história do HTML5

Devido a especificação HTML 5 está sendo desenvolvida tanto pela W3c quanto a WHATWG, há diferentes versões da especificação. Conforme abaixo:

www.w3.org/TR/html5 é o snapshot oficial da W3C;

Em 2009 a W3C parou de trabalhar no XHTML 2.0 e desviou recursos para HTML5 ficando claro que o HTML5 havia vencido a batalha de filosofias. O fato de os grupos de trabalho HTML5 consistir em representantes de todas as fabricantes de navegadores, também era importante. Se os fabricantes estivesse dispostos a implementar parte da especificação ( como a indisposição da Microsoft para implementar <dialog>, ou a oposição da Mozilla ao <bb>) ela era removida; Hickson (Ian ?Hixie? Hickson, líder da Mozilla que ajudou na especificação do HTML 5) disse ?A realidade é que os fabricantes de navegadores têm o veto definitivo em tudo na especificação, já que se eles não a implementarem , a especificação não é nada além do trabalho de ficção? (

). Muitos participantes acharam isto altamente desagradável: Os fabricantes de

navegadores tomaram de assalto ?nossa web? reclamaram com alguma justificativa.

CCT0412 - TECNOLOGIA PARA INTERNET I

INTRODUÇÃO AO HTML5

A filosofia por trás do HTML5

Ainda mais importante é a necessidade de um padrão aberto livre (para utilizar e livre para implementar) que possa competir com padrões proprietários como Adobe Flash ou Microsoft Silverlight. Independente do que você acha destas tecnologias ou empresas acreditamos que a Web seja uma plataforma muito vital à sociedade, comércio e comunicações para estar nas mãos de um fabricante. O quão diferente teria progredido a Renascença se Caxton tivesse mantido patente e monopólio da fabricação de prensas de impressão ?

Não quebre a Web

Há exatamente milhões de páginas Web já em uso por aí, e é interativo que elas continuem a ser reproduzidas. Então o HTML5 é em sua maioria é um derivativo do HTML4 que continua definir como os navegadores devem lidar com marcações antigas como <font>, <center> e outras tags de apresentação, pois milhões de páginas web as utilizam. Mas os autores não devem utilizá-las pois estão obsoletas

CCT0412 - TECNOLOGIA PARA INTERNET I

INTRODUÇÃO AO HTML5

Estrutura Principal

Primeiro o DOCTYPE:

<!doctype html>

Note que se quer há um número de versão, isto é tudo. Não é uma instrução para encantamento: ela é exigida pelos navegadores que precisam da presença do de um doctype para ativar o modo de padrões, e esta string é a string mais curta que o faz de maneira confiável. Então precisamos definir a codificação de caracteres do documento não fazê lo pode resultar em um risco de segurança obscuro porém real

CCT0412 - TECNOLOGIA PARA INTERNET I

INTRODUÇÃO AO HTML5

O que é uma TAG HTML?

É o elemento que compõem a estrutura do documento HTML5, este elemento é iniciado com o símbolo menor ( < ) e terminado com o símbolo maior ( > ), como por exemplo: <doctype>, <html>, <div>, etc. As são divididas conforme categorias abaixo:

O elemento root metadados Scripts seções agrupamento de conteúdo Semânticas de nível de texto Edições Conteúdo incorporado Tabelas Formulários Interativo

CCT0412 - TECNOLOGIA PARA INTERNET I

INTRODUÇÃO AO HTML5

Atributos de uma TAG

Uma TAG pode conter atributos, que são informações que alteram o comportamento da TAG. Os atributos podem ser divididos em atributos específicos para cada TAG e atributos globais que são comuns a todas as tags. Além das TAGs, existem outros elementos que ajudam na construção de documentos HTML5, que são: o CSS, o Javascript.

Uma breve definição de CSS

É uma abreviação do termo Cascading Style Sheet (Folhas de Estilo em Cascata). O CSS permite, de uma forma simples, a a utilização de estilos (cor do texto, tamanho e tipo da fonte) ao documento HTML. Tem como finalidade fornecer ao navegador a forma como os elementos são apresentados.

CCT0412 - TECNOLOGIA PARA INTERNET I

INTRODUÇÃO AO HTML5

Uma breve definição da linguagem Javascript

É uma linguagem de programação que está localizado do lado cliente, isto é, no navegador e tem como objetivo controlar o HTML e o CSS manipulando-os no documento HTML. Esta linguagem é muito parecida com as linguagens C++ e Java, permitindo inclusive a orientação a objetos. É mantida pela European Computer Manufacturer's Association (http://www.ecmascript.org/) e atualmente encontra-se na versão 5.

O que é DOM (Document Object Model) ou Modelo de Objetos do Documento ?

É a interface entre a linguagem Javascript e os objetos do HTML. Basicamente quando o documento HTML é carregado pelo navegador, o mesmo fica armazenado em uma estrutura hierárquica em forma de árvore que pode ser facilmente manipulável através de comandos Javascript.

CCT0412 - TECNOLOGIA PARA INTERNET I

Unidade III - INTRODUÇÃO À CONSTRUÇÃO DE PÁGINAS ESTÁTICAS - TAGS

Tag's estruturais do HTML5

Os elementos estruturais definem a forma como o documento HTML5 pode ser criado. Sua utilização não é obrigatória, no entanto, recomenda-se que sejam utilizados em determinadas circunstâncias dentro o documento.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>The HTML Document</title> </head> <body> <p>The HTML content</p> </body> </html>

CCT0412 - TECNOLOGIA PARA INTERNET I

INTRODUÇÃO À CONSTRUÇÃO DE PÁGINAS ESTÁTICAS - TAGS

<HTML>

O elemento <HTML> representa a TAG principal

para a construção do documento HTML. É apresentado abaixo a estrutura de um documento HTML.

Onde:

<head> - Representa uma coleção de metadados. Neste elemento são carregadas as informações referentes ao documento, como por exemplo comandos CSS e Javascript. <title> - Localizado dentro do <head>, representa o título do documento. <body> - Localizado no mesmo nível do <head>, este elemento representa o conteúdo principal da página. Aqui estão localizados todos os comandos necessários para a criação do documento HTML.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>The HTML Document</title> </head> <body> <p>The HTML content</p> </body> </html>

CCT0412 - TECNOLOGIA PARA INTERNET I

INTRODUÇÃO À CONSTRUÇÃO DE PÁGINAS ESTÁTICAS - TAGS

<SECTION>

O elemento <section> representa uma seção genérica dentro de um documento. Este elemento pode conter um agrupamento de textos com vários capítulos, seções numeradas, etc. No exemplo abaixo é apresentado um artigo contendo um assunto principal e dentro deste assunto várias seções com assuntos distintos. Exemplo de utilização:

<article> <hgroup> <h1>Livro sobre HTML</h1> <h2>Como criar uma página </h2> </hgroup> <p>O curso de HTML é muito importante </p> <section> <h1>O HTML 5</h1> <p>Surgimento do HTML 5</p> </section> <section>

<h1>Tags</h1>

<p>Comandos de criação de páginas.</p> </section> </article>

CCT0412 - TECNOLOGIA PARA INTERNET I

INTRODUÇÃO À CONSTRUÇÃO DE PÁGINAS ESTÁTICAS - TAGS

<NAV>

Este elemento é a seção onde ficam as informações de navegação de página. Geralmente nesta seção são colocados os ligações ( links internos) para a própria página ou ligações externas para outras páginas de sites externos. Exemplo de utilização:

<header> <nav> <h1>Menu Principal</h1> <ul> <li><a href="articles.html">índice de artigos</a></li> <li><a href=" http://www.estacio.br"> Site da Estácio</a></li> </ul> </nav> </header>

CCT0412 - TECNOLOGIA PARA INTERNET I

INTRODUÇÃO À CONSTRUÇÃO DE PÁGINAS ESTÁTICAS - TAGS

<ARTICLE>

É um artigo independente dentro de um texto, este elemento pode estar ou não dentro de um elemento <section>. Imagine um jornal com as seções de esportes, fofocas, etc. Dentro de cada seção existem vários artigos sobre textos específicos, por exemplo, na seção de esportes

pode ter um artigo falando sobre o time A, outro

sobre time B

e o outro sobre o time C. Um artigo

pode conter um elemento <header> que é o título e um elemento <footer> que é o rodapé do elemento. Exemplo de utilização:

<article> <header> <h1>Nova Vitória !</h1> <p><time pubdate

datetime="2009-10-09T14:28-

08:00"></time></p>

</header> <p>O time A ganhou novamente, se continuar assim será líder do campeonato </p> ... <p> </p> ... <footer> <a href="?

comments=1">Comentários</a>

</footer>

</article>

CCT0412 - TECNOLOGIA PARA INTERNET I

INTRODUÇÃO À CONSTRUÇÃO DE PÁGINAS ESTÁTICAS - TAGS

<ASIDE>

Neste elemento estão contidas as informações que não estão relacionadas diretamente com o texto. Como por exemplo: comerciais pagos, links promocionais, etc. Exemplo de utilização:

<aside> <h1>Tenha uma graduação !!! </h1> <p><a href=?http://www.estacio.br?> Estude na estácio</a></p> </aside> <H1>, <H2>, <H3>, <H4>, <H5>, e

<H6>

Elementos que representam o título de cada seção, sendo <h1> o maior título e <h6> o menor título. Exemplo de utilização:

<body> <h1>Maior </h1> <h2>Menor 2 </h2> <h3>Menor 3 </h3> <h4>Menor 4 </h4> <h5>Menor 5 </h5> <h6>Menor 6 </h6> </body>

CCT0412 - TECNOLOGIA PARA INTERNET I

INTRODUÇÃO À CONSTRUÇÃO DE PÁGINAS ESTÁTICAS - TAGS

<HGROUP>

Elemento usado em conjunto com as TAGs

anteriores para delimitar o título da seção. Exemplo de utilização:

<hgroup> <h1>Livro sobre HTML</h1> <h2>Como criar uma página </h2> </hgroup>

CCT0412 - TECNOLOGIA PARA INTERNET I

INTRODUÇÃO À CONSTRUÇÃO DE PÁGINAS ESTÁTICAS - TAGS

<HEADER>

Também utilizado para delimitar o título da seção, trabalha em conjunto com os elementos anteriores, no entanto, não é obrigatório. Exemplo de utilização:

<article> <header> <hgroup> <h1>Livro sobre HTML</h1> <h2>Como criar uma página </h2> </hgroup> <p>O curso de HTML é muito importante </p> </header> <section> <h1>O HTML 5</h1> <p>Surgimento do HTML 5</p> </section> <section>

<h1>Tags</h1>

<p>Comandos de criação de páginas.</p> </section> </article>

CCT0412 - TECNOLOGIA PARA INTERNET I

INTRODUÇÃO À CONSTRUÇÃO DE PÁGINAS ESTÁTICAS - TAGS

<FOOTER>

Este elemento contém basicamente as informações sobre o conteúdo da seção, como por exemplo o autor, links relacionados, etc. Exemplo de utilização:

<footer> <nav> <p><a href="/credits.html">Créditos</a> ? <a href="/tos.html">Termos Legais</a> ? <a herf="/index.html">Mais Informações</a> </p> </nav> </footer>

CCT0412 - TECNOLOGIA PARA INTERNET I

INTRODUÇÃO À CONSTRUÇÃO DE PÁGINAS ESTÁTICAS - TAGS

Tag's Textuais

<P>

Elemento que representa um parágrafo.

Exemplo de utilização:

<HR>

Elemento que representa uma quebra de

parágrafo ou tema exibindo uma linha horizontal. Exemplo de utilização:

<PRE>

Este elemento apresenta um bloco de texto pré-

formatado, preservando seu conteúdo. Exemplo de utilização:

<p> Isto é um parágrafo </p>

<hr />

<pre> Line 1. Line 2 is to the right of line 1. Line 3 aligns with line 2. </pre>

CCT0412 - TECNOLOGIA PARA INTERNET I

INTRODUÇÃO À CONSTRUÇÃO DE PÁGINAS ESTÁTICAS - TAGS

Tag's Textuais

<BLOCKQUOTE>

Tem como função exibir o texto indicando de

qual referência foi retirado (citação). Exemplo de utilização:

<FIGURE>

Este elemento permite definir logicamente as

informações de uma imagem. Trabalha com <figcaption> e <img>. Exemplo de utilização:

Onde:

<figcaption> - Elemento que permite dar um título a uma imagem. <img> - Elemento que exibe a imagem. Neste exemplo o atributo src indica o endereço e o tipo da imagem e o atributo alt é mostrado caso a imagem não possa ser exibida.

<blockquote cite="http://www.quote.com/sample.ht ml"> <p>Elemento textual. </p> </blockquote>

<figure> <figcaption>Foto de Férias</figcaption> <img src="stata.jpg" alt="Foto das férias no Rio de Janeiro"> </figure>

CCT0412 - TECNOLOGIA PARA INTERNET I

INTRODUÇÃO À CONSTRUÇÃO DE PÁGINAS ESTÁTICAS - TAGS

Tag's Textuais

<DIV>

Elemento que representa um bloco de texto. As TAGs <body>, <header>, <footer>, etc, possuem regras de utilização bem definidas. Caso o desenvolvedor necessite da criação de um bloco de texto que não se encaixe em alguma regra defina de bloco, pode-se utilizar o recurso da <div>. A <div> é um bloco de texto que pode ser usado em qualquer lugar do documento. Geralmente a <div> é usada para diagramar o layout de um site. Exemplo de utilização:

<div> teste </div>

CCT0412 - TECNOLOGIA PARA INTERNET I

INTRODUÇÃO À CONSTRUÇÃO DE PÁGINAS ESTÁTICAS - TAGS

Tag's Semânticas

<A>

Elemento que representa um hiperlink

Atributos:

href =

A URL que fornece o destino do

hiperlink. target = nome de navegação ao contexto ou

palavra-chaves seguintes strings literais:

"_blank", "_self", "_parent", ou "_top".

Exemplo de utilização:

<p> <a href="http://en.wikipedia.org/wiki/Cam bera">Cambera</a> is the capital city of Australia. </p>

CCT0412 - TECNOLOGIA PARA INTERNET I

INTRODUÇÃO À CONSTRUÇÃO DE PÁGINAS ESTÁTICAS - TAGS

Tag's Semânticas

<EM>

Este elemento enfatiza um bloco de texto,

colocando-o em itálico. Exemplo de utilização:

<p><em>Cats</em> are cute animals.</p>

<STRONG>

Este elemento transforma um texto simples em um texto de certa importância, colocando-o em negrito. Exemplo de utilização:

<p><em>Cats</em> are cute animals.</p>

<p><strong><strong>Warning.</stro ng> This dungeon is dangerous.</strong></p>

CCT0412 - TECNOLOGIA PARA INTERNET I

INTRODUÇÃO À CONSTRUÇÃO DE PÁGINAS ESTÁTICAS - TAGS

Tag's Semânticas

<SMALL>

Este elemento diminui o tamanho do texto.

Exemplo de utilização:

<S>

Este elemento transforma o texto em um

conteúdo não relevante. Exemplo de utilização:

<footer> <p><small>© copyright 2010 Example Corp.</small></p> </footer>

<p>Buy our Iced Tea and Lemonade! </p> <p><s>Recommended retail price:

$3.99 per bottle</s></p> <p><strong>Now selling for just $2.99 a bottle!</strong></p>

CCT0412 - TECNOLOGIA PARA INTERNET I

INTRODUÇÃO À CONSTRUÇÃO DE PÁGINAS ESTÁTICAS - TAGS

Tag's Semânticas

<CITE>

Este elemento transforma o texto em uma

citação.

<Q>

Este elemento coloca aspas em um bloco de texto. Exemplo de utilização:

<CODE>

Este elemento representa um fragmento de

código de computador. Exemplo de utilização:

<p>My favorite movie is <cite>star wars</cite>.</p>

<p>The man said <q>The quote is input here</q>.</p>

<pre> <code> function Panel(element, canClose, closeHandler) { this.element = element; this.canClose = canClose; this.closeHandler = function () { if (closeHandler) closeHandler() }; } </code> </pre>

CCT0412 - TECNOLOGIA PARA INTERNET I

INTRODUÇÃO À CONSTRUÇÃO DE PÁGINAS ESTÁTICAS - TAGS

Tag's Semânticas

<SPAN>

Elemento de utilização genérica idêntico ao

elemento <DIV>. Exemplo de utilização:

<BR>

Este elemento representa uma quebra de linha. Exemplo de utilização:

<span> Teste de exemplo </span>

<p>32 Vassar Street<br /> Cambridge, MA 02139 </p>

CCT0412 - TECNOLOGIA PARA INTERNET I

INTRODUÇÃO À CONSTRUÇÃO DE PÁGINAS ESTÁTICAS - TAGS

Listas

São elementos de ordenação de texto podendo

ser numeradas e não numeradas.

<OL>

Define uma lista numerada. Os itens da listas

são definidos pela tag <li>. Exemplo de utilização:

Atributos da lista:

<ol>

<li>exemplo1</li>

<li>exemplo2</li>

<li>exemplo3</li>

</ol>

reversed = altera a ordem da lista. start = Valor inicial da lista type = Altera o numerador da lista( ! – A – a – I – i).

CCT0412 - TECNOLOGIA PARA INTERNET I

INTRODUÇÃO À CONSTRUÇÃO DE PÁGINAS ESTÁTICAS - TAGS

Listas

<UL>

Define uma lista não numerada. Utiliza os

mesmos atributos de <ol>. Exemplo de utilização:

<DL>

Elemento que textual que exibe uma lista de definições, com termos específicos. Trabalha com as tags <dt> termo a ser exibido e <dd> elementos do termo. Exemplo de utilização:

<ul>

<li>exemplo1</li>

<li>exemplo2</li>

<li>exemplo3</li>

</ul>

<dl>

<dt>Carros</dt>

<dd>Uno</dd>

<dd>Gol</dd>

<dt>Motos</dt>

<dd>Honda</dd>

<dd>Yamaha</dd>

</dl>

CCT0412 - TECNOLOGIA PARA INTERNET I

INTRODUÇÃO À CONSTRUÇÃO DE PÁGINAS ESTÁTICAS - TABELAS

Tabelas

São elementos que representam dados de uma ou mias dimensões. Podem ser utilizadas para

exibição de tabelas de preços de um site.

<TABLE>

Elemento básico para criação da tabela.

Exemplo de utilização:

<table> <caption>Lista de preços</caption> <thead> <tr> <th>Serviço</th> <th>Tempo</th> <th>Valor</th> </tr> </thead>

<tbody> <tr> <th>Corte de Cabelo</th> <td>10 Min</td> <td>R$ 5,00</td> </tr> <tr> <th>Manicure</th> <td>30 Min</td> <td>R$ 20,00</td> </tr> <tr> <th>Pedicure</th> <td>30 Min</td> <td>R$ 10,00</td> </tr> </tbody> </table>

CCT0412 - TECNOLOGIA PARA INTERNET I

INTRODUÇÃO À CONSTRUÇÃO DE PÁGINAS ESTÁTICAS - TABELAS

Tabelas

Onde:

<CAPTION>

Elemento que indica o título da tabela.

<THEAD>

Neste elemento encontram-se as linhas que formam o título de cada coluna

da tabela.

<TBODY>

Neste elemento encontram-se os dados de cada coluna.

<TFOOT>

Neste elemento encontram-se as informações finais de cada coluna.

<TR>

Elemento que cria uma linha na tabela.

<TD>

Elemento que cria uma coluna na tabela.

<TH>

Este elemento é idêntico ao <TD>, no entanto só é utilizado dentro da TAG

de título <TH>.

CCT0412 - TECNOLOGIA PARA INTERNET I

INTRODUÇÃO À CONSTRUÇÃO DE PÁGINAS ESTÁTICAS - TABELAS

Vídeo

Anteriormente, para a exibição de vídeos em um documento HTML, os desenvolvedores utilizavam a TAG <object> que é um container genérico para incorporar objetos estrangeiros ( plugins de terceiros ) a página. Devido a inconsistência dos navegadores, era necessário replicar várias linhas de código para que o vídeo pudesse ser exibido. O HTML 5 provê a TAG <video> para eliminar os problemas de incompatibilidade entre os navegadores.

<VIDEO>

Elemento que exibe vídeos ou filmes. Atributos:

autoplay = "autoplay" ou "" (string vazia) ou sem atributo. Todas vez que a página for recarregada, o vídeo se iniciará. controls = "controls" ou "" (string vazia) ou sem atributo. Será exibido a interface de controle de vídeo. loop = "loop" ou "" (string vazia) ou sem atributo. O vídeo será passado contínuamente.

INTRODUÇÃO À CONSTRUÇÃO DE PÁGINAS ESTÁTICAS - TABELAS

Vídeo

poster = Endereço de uma imagem será exibida enquanto o vídeo não carrega. height = Altura do vídeo em pixels width = Largura do vídeo em pixels muted = "muted" or ""ou "" (string vazia) ou sem atributo. Estado do vídeo default com o áudio desligado. src = URL do vídeo

Exemplo de utilização:

<video controls

src="http://media.w3.org/2010/05/bun

ny/movie.ogv"> Seu navegador não suporta vídeos em HTML 5 </video>

CCT0412 - TECNOLOGIA PARA INTERNET I

INTRODUÇÃO À CONSTRUÇÃO DE PÁGINAS ESTÁTICAS - TABELAS

Audio

<AUDIO>

Elemento que permite tocar um arquivo de

áudio. Com atributos semelhantes ao <video>. Exemplo de utilização:

<audio controls

src="http://media.w3.org/2010/07/bun

ny/04-Death_Becomes_Fur.oga">

Seu navegador não suporta áudio em HTML 5 </audio>

CCT0412 - TECNOLOGIA PARA INTERNET I

Unidade IV - LINGUAGEM DE MARCAÇÃO E ESTILOS - CSS

Definição

Conforme W3C, Cascading Style Sheets (CSS) é um mecanismo simples para adicionar estilo (por exemplo, fontes, cores, espaçamento ) a documentos da Web. O CSS é um conjunto de comandos que alteram o comportamento dos elementos HTML 5.

4.2 Sintaxe

A regra CSS é a unidade básica de uma folha de estilo. Nessa definição o termo unidade

básica significa a menor porção de código capaz de produzir efeito de estilização. Uma regra CSS é composta de duas partes: o seletor e a declaração. A declaração compreende uma propriedade e um valor. Onde:

seletor { propriedade: valor; } Seletor: é o alvo da regra CSS. Declaração: Determina a regra. Exemplo de utilização:

h1, h2 {color: green } h3, h4 & h5 {color: red } h6 {color: black }

CCT0412 - TECNOLOGIA PARA INTERNET I

Unidade IV - LINGUAGEM DE MARCAÇÃO E ESTILOS - CSS

4.3 Seleção de elementos

No CSS, a seleção de elementos pode variar de uma forma simplificada até

padrões contextuais ricos. Tipos de seleção Agrupamento - o CSS permite agrupar declarações repetidas. h1 { font-family: sans-serif } h2 { font-family: sans-serif } h3 { font-family: sans-serif }

É equivalente a:

h1, h2, h3 { font-family: sans-serif }

CCT0412 - TECNOLOGIA PARA INTERNET I

Unidade IV - LINGUAGEM DE MARCAÇÃO E ESTILOS - CSS

4.3.1 Seletores descendentes

Um elemento pode estar contido dentro de outro elemento. Exemplo:

<H1>Este texto é <EM>muito</EM> importante</H1> h1 { color: red } /* indica que todos os elementos h1 possuem a cor vermelha */ em { color: red } /* indica que todos os elementos em possuem a cor vermelha */

h1 em { color: blue } /* indica que os elementos em contidos em um elemento h1 possuem a cor azul */

  • 4.3.2 Seletores filhos

Um elemento filho é caraterizado quando os elementos são separados por ">". Exemplo:

div ol>li p {color: green } Neste exemplo, todos os elementos p serão de cor verde quando estiverem dentro de um elemento item <li>, filho de uma lista <ol> dentro de uma <div>.

CCT0412 - TECNOLOGIA PARA INTERNET I

Unidade IV - LINGUAGEM DE MARCAÇÃO E ESTILOS - CSS

  • 4.3.3 Seletores por atributos

Especifica regras para os elementos que possuem determinado atributo.

Exemplo:

span[hello="Cleveland"][goodbye="Columbus"] { color: blue; } A regra será aplicada a todos os elementos span que possuem o atributo hello="Cleveland" e o atributo goodbye="Columbus".

  • 4.3.4 Seletores por classes

Uma classe permite atribuir um conjunto de regras a um determinado elemento. É determinado por asterístico ponto (*.) ou simplesmente ponto (. ). Exemplo:

.pastoral { color: green } /* todos os elementos com a classe~=pastoral */ ou *.pastoral { color: green } /* todos os elementos com a classe~=pastoral */

  • 4.3.5 Seletores por ID

O atributo ID permite identificar um elemento único no documento HTML. Para selecionar este elemento basta utilizar o caracter ?#? seguindo pelo nome do elemento. Exemplo:

h1#titulo1 { text-align: center } /* aplica a regra ao elemento h1 com o id=titulo */

CCT0412 - TECNOLOGIA PARA INTERNET I