tecnologia web i - instituto siegeninstitutosiegen.com.br/documentos/aula_1_cic_twi.pdf ·...

Prof. Erwin Alexander Uhlmann

01/07/2010

TECNOLOGIA WEB I Apostila de HTML, CSS e Javascript

Esta apostila foi criada para os alunos de Ciência da Computação para a disciplina de TECWEBI com o intuito de auxiliar nos estudos dos primeiros passos da programação para este novo horizonte do mundo da informática que se abre a Internet. Com os agradecimentos aos alunos que de forma intuitiva e importante contribuíram, sejam com perguntas, dúvidas, erros e acertos, mas contribuíram! Muito obrigado.

Prof. Erwin Alexander Uhlmann 1/7/2010

Instituto Siegen Universidade Guarulhos 1 ©

TECNOLOGIA WEB I Apostila de HTML, CSS e Javascript

Como vocês devem ter notado e se questionado: Mas ainda é preciso aprender HTML? Claro!, o HTML é a base da WEB.

Como o Objetivo não é enrolar, vamos pôr a mão na massa?

AULA 1

HTML O objetivo desta parte do curso é escrever – não é programar, HTML não é uma linguagem mas sim um script – uma página web que seja válida, mas por que validar uma página? Simples, todos navegadores abrirão? Todos funcionarão da mesma forma? Todos recursos serão válidos e apresentarão os mesmos resultados?

Para validar uma página você deve estar de acordo com as regras definidas pelo W3C - http://www.w3.org/ - e pode ser consultado seu escritório no Brasil - http://www.w3c.br/ - e a validação pelo endereço - http://validator.w3.org/ -. PRESTE ATENÇÃO! Estes endereços são de suma importância e merecem ser adicionados como favoritos.

Crie a página e submeta-a, seja via endereço num servidor ou via upload. Se

a página estiver correta, o W3C lhe oferecerá um selo para o HTML, certificando sua página.

Então vamos iniciar!

Abaixo, a codificação de uma página, em branco criado pelo software Amaya.

1. <?xml version="1.0" encoding="iso-8859-1"?> 2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3. <html xmlns="http://www.w3.org/1999/xhtml"> 4. <head> 5. <meta http-equiv="content-type" content="text/html; charset=iso-

8859-1" /> 6. <title>Página do Amaya</title> 7. <meta name="generator" content="Amaya, see

http://www.w3.org/Amaya/" /> 8. </head> 9. <body> 10. </body> 11. </html>



Meta dados incorporados ao código XHTML são, na verdade, estruturas de dados sobre os próprios dados, uma breve descrição do conteúdo da página, seu autor, data de criação, linguagem e outras

Então, vai explicar?

1. <?xml version="1.0" encoding="iso-8859-1"?>

Nesta linha o documento é especificado como xml, codificado para o padrão europeu ocidental de fontes.

2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

DOCTYPE é o tipo de document – de novo??? Sim, ele também pode ser um documento tipo... – html público, seguindo as regras do W3C.

3. <html xmlns="http://www.w3.org/1999/xhtml">

Aqui começa o html. Ele obedecerá aos padrões definidos pelo W3C no endereço referenciado.

4. <head>

Na head – que deve ser encerrada por </head> - estão as informações sobre

o documento, como título - <title>Aqui fica o título</title> - e as metatags.

Metatags Name

Meta tags com o atributo "name" são usadas para tipos que não correspondem a cabeçalhos HTTP. Muitas vezes esta distinção é ignorada. Por exemplo, alguns buscadores reconhecem a meta tag "Keywords" com o tipo "http-equiv", outros com o tipo "name".

Dublin Core

Com o objetivo de melhorar a indexação das páginas pelos motores de busca, muitos grupos de desenvolvedores acabam criando sua própria "liguagem de metatags", a mais popular delas pertence ao projeto Dublin Core iniciado em 1995 buscando, segundo organizadores, mais flexibilidade para os autores.

Site oficial do projeto: http://www.dublincore.org

Lista de Metatags, atributos e especificações Apesar de todo o alvoroço existente em torno dos meta dados, muitas pessoas ainda não tem um conhecimento adequado da maioria dos recursos que estas ferramentas proporcionam, abaixo segue uma lista das principais meta tags, seus valores e funcionalidades.

Nota: As palavras-chave "http-equiv", "name" e "content" são case-insensitive, assim como seus valores, mas segundo as especificações do XHTML, todo o código deve ser em letras minúsculas.

Author



O nome do autor da página.

<meta name="author" content="André" />

Cache-Control

Esta tag é apenas reconhecida pelo http 1.1 e permite os seguintes valores:

* Public: Os dados da página podem ser armazenados de forma compartilhada, isto é, será utilizado por diferentes usuários de um mesmo browser (Notar que só é possível especificar usuários de browser no Firefox e Opera).

* Private: É o contrário de public, o cache é armazenado para um específico usuário.

* No-Cache: A página não é armazenada em Cache.

* No-Store: É feito um cache temporário, a página não é arquivada.

Nota: A diretiva "cache-control:no-cache" tem a mesma função de "pragma:no-cache". O ideal quando se usa essa instrução é utilizar ambas as formas caso não se saiba se o servidor é ou não compatível com o HTTP 1.1.

<meta http-equiv="cache-control" content="no-cache" />

Content-language

Declara a(s) linguagem(ns) natural(is) do documento. Pode ser usada pelos motores de busca para categorizar por idioma.

<meta http-equiv="content-language" content="pt-br, en-US, fr" />

* Content-type: Define o tipo de conteúdo da página e o tipo de codificação de caracteres. Pode-se dizer que é a meta tag mais importante, sempre deve ser usada.

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

CopyRight

Como o nome já diz declara o direito autoral da página.

<meta name="copyright" content="© 2004 tex texin" />

Description

Contém uma descrição da página

<meta name="description" content="...resumo da página..." />

Expires

A data e a hora depois dos quais o documento deve ser considerado como expirado. Uma data ilegal como, por exemplo "0" é considerada como "agora".



Configurar "Expires" como "0" pode também ser usado para forçar uma nova checagem a cada visita do robô de busca.

Nota: Alguns robôs de busca podem deletar um documento de seu banco de dados ao encontrá-lo expirado, outros podem marcar uma revisita

<meta http-equiv="expires" content = "Mon, 22 jul 2006 11:12:01 GMT" />

Keywords

As keywords tipicamente são usadas por alguns motores de busca para indexar os documentos juntamente com informações encontradas em seu título e body.

As frases ou palavras devem ser separadas por vírgulas.

<meta name="keywords" content="..palavras-chave do documento" />

Pragma no-cache

Faz com que o navegador não armazene a página em cache. Diferencia-se de "cache-control:no-cache" pelo fato de ser reconhecida por todas as versões do HTTP.

<meta http-equiv="pragma" content="no-cache" />

Refresh

Especifica um tempo em segundos para o browser atualizar a página, opcionalmente pode-se adicionar uma URL para a qual será redirecionado.

<meta http-equiv="refresh" content="15;url=http://www.thechessman.org" />

Robots

Especifica informações de indexação para os robôs de busca, suporta os seguintes valores:

* All: Valor default, significa vazio, o robô de busca não recebe nenhuma informação.

* Index: Os robôs de busca podem incluir a página normalmente.

* Follow: Robôs podem indexar a página e ainda seguir os links para outras páginas que ela contém.

* NoIndex:Os links podem ser seguidos, mas a página não é indexada.

* NoFollow: A página é indexada, mas os links não são seguidos.

* None: Os robôs podem ignorar a página.

* NoArchive (Apenas Google): A página não é arquivada.



DC.title

Desempenha a mesma função da tag "title", e deve conter o mesmo valor.

<meta name="DC.title" content="Mr.TheChessMan - Impressões Ideológicas" />

DC.Creator

Tem o mesmo papel da meta tag "Author"

<meta name="DC.creator " content="Gazola, André" />

DC.Creator.adress

E-mail para contato com o autor da página.

<meta name="DC.creator.address" [email protected]" />

DC.Suject

Tem a mesma função da meta "Keywords".

<meta name="DC.subject" content="metadata, metatags, dublin core,web design" />

DC.Description

Tem a mesma função da meta "Description".

<meta name="DC.description" content="..aqui vai a descrição da página.." />

DC.Publisher

Nome da organização que é responsável pelo documento.

<meta name="DC.publisher" content="Info Web Design" />

DC.Custodian

Normalmente, o webmaster responsável pela página.

<meta name="Custodian" content="Gazola, André" />

DC.Date.Created

Data de criação da página no formato AAAA-MM-DD.

<meta name="DC.date.created" content="2006-02-01" />

DC.Date.Modified

Última data de modificação do documento, importante para buscas por data.

<meta name="DC.date.modified" content="2006-02-01" />

DC.Identifier

URL do documento.

<meta name="DC.Identifier" content="http://www.thechessman.org">

DC.Format



Especifica o tipo de dados contidos no documento.

* Text/html;

* Text/xml;

* Text/html;

* Image/jpg;

* Image/gif;

* Video/quicktime;

<meta name="DC.format" content="text/xhtml" />

DC.Type

Text, Home Page, menu, image, vídeo, dados, software ou sound são alguns dos valores suportados.

<meta name="DC.type" content="text.homepage.institucional" />

Fonte: Mozilla. https://developer.mozilla.org/pt/Utilizando_meta_tags

5. <body>

Tudo que for escrito dentro destas tags – deve ser encerrada com </body> -

será exibido no navegador.

6. </html>

Fim da página.

Elementos intrínsecos Os elementos intrínsecos são disparadores de eventos (ações), criados para escrever scripts dentro da marcação HTML. São eles:

onload – ao carregar página; onunload – ao fechar a página; onclick – ao clicar; ondblclick – adivinha... duplo clique! onmousedown – no clique; onmouseup – ao liberar o maouse; onmouseover – ao passar sobre; onmousemove – ao mover o mouse; onmouseout – ao retirar o mouse; onfocus – quando selecionado; onblur – ao desselecionar; onkeypress – quando pressionar uma tecla sobre o elemento; onkeyup – ao soltar a tecla; onsubmit – quando o formulário é enviado; onreset – quando os dados são apagados;



onselect – quando o campo texto de um formulário é selecionado; onchange – ao alterar o valor de um campo.

Bem, vamos pôr a mão na massa?

Vamos criar uma página com os seguintes itens:

Um título tamanho 1, um subtítulo tamanho 2, um menu de navegação com os links para a página índex.html, html.html, css.html e javascript.html, um rodapé e os selos de validação do W3C para o HTML e do CSS.

Claro que deverá ter um conteúdo e você poderá escrever como é que se escreve o HTML!

Divirta-se!

Passo nº 1.

Vamos escolher o editor.

Podemos fazer com o notepad (bloco de notas) o notepad++ (http://notepad-plus-plus.org/) – nota 7,0, o Amaya (http://www.w3.org/Amaya) nota 9,0, pois é o editor próprio do W3C e é do tipo WYSIWYG (What You See Is What You Get – O que você vê é o que você tem, ou seja, é um editor totalmente visual) ou ainda o Aptana (http://www.aptana.com), nota 9,0, bem mais completo, com suporte e visual.



Figura 1 – Notepad++

Figura 2 – Amaya



Figura 3 - Aptana

Crie a estrutura base do HTML.



8859-1" /> 6. <title>Novo</title> 7. <meta name="generator" content="Amaya, see

http://www.w3.org/Amaya/" /> 8. </head> 9. <body> 10. </body> 11. </html>

Agora vamos ao Título, tamanho 1. Que tal Tecnologia Web I?



8859-1" /> 6. <title>Novo</title> 7. <meta name="generator" content="Amaya, see

http://www.w3.org/Amaya/" /> 8. </head> 9. <body> 10. <h1>Tecnologia Web I</h1> 11. </body> 12. </html>

Simples não?



Os marcadores <h1> servem para indicar que é um título tamanho 1, o maior. Ele deve ser encerrado com </h1>. Você pode utilizar desde <h1> até <h6>.

Agora escreva o subtítulo, tamanho 2, escrito: Fundamentos do HTML, CSS e Javascript.

Que tal uma Lina horizontal? Faça <hr /> Mas se quiser melhorar pode informar também o tamanho da linha, <hr width=”75%”/>.

Agora vamos ao links?

Para criar um link é necessária a marcação <a>. O endereço de destino é indicado pela marcação href=”endereço”, depois indique um texto

amigável e encerre com </a>, assim.

<a href="index.htm">Não clique aqui!</a> Agora crie todos os links solicitados!

Para escrever o texto, basta escrevê-lo dentro da marcação <p> e </p> de parágrafo e <br /> para quebra de linha.

Salve e valide no W3C, no endereço http://validator.w3.org.

Se estiver tudo certo, coloque o código oferecido pelo W3C para adicionar em sua página.

Parabéns! Você criou com sucesso!!! Eu acho...

AULA 2 As tags singulares como <link />, <hr />, <meta />, entre outras, são aquelas que não possuem as tags de fechamento, elas abrem e nelas mesmas são encerradas, de acordo com o XHTML 1.1, o atual, devem ser encerrados com um espaço a barra e o sinal de menor, como vimos antes, nos exemplos.



Listas Não ordenadas <ul>............................Tag de abertura da lista não ordenada <li>Item 1</li>...............Tags de abertura e fechamento da lista <li>Intem 2...................A tag de abertura é encerrada abaixo <ul>........................Sub item <li>Item 2.1</li>......... </ul>.......................Fechamento do sub item </li>.........................Fechamento do item 2 <li>Item 3</li>.................Lista de primeiro nível </ul>...........................Fim

Ordenadas <ol> <li>Lista</li> <li>Ordenada <ul> <li>Subnível</li> </ul> </li> </ol>

Textos <p><strong>Negrito</strong>, <em>Itálico</em>.</p>

Onde <p> é parágrafo, <strong> é negrito, <em> é itálico.

Imagem <img alt="ovo" src="img/ovo.gif" width="154" height="244" />

<img /> para indicar ao navegador que se trata de uma imagem, alt é o

texto alternativa à imagem, caso não abra, src é a localização do arquivo, width e height correspondem à largura e altura.

Tabelas <table border="1"> ........... aqui começa a tabela <tr>...................... Observe que a tag <tr> abre a linha <td>C1</td>............. E a <td> abre a coluna <td>C2</td> <td>C3</td> <td>C4</td> <td>C5</td> </tr>..................... Fim da primeira linha <tr>...................... Início da segunda linha <td>C6</td>............. E suas colunas <td>C7</td> <td>C8</td> <td>C9</td>



<td>C10</td> </tr> </table>...................... Feche a tabela!

Formulários 1. <form action="html.html" method="post"> 2. <input type="text" name="texto" /> 3. <input type="checkbox" name="check" /> 4. <input type="password" name="senha" /> 5. <select> 6. <option selected="selected">Escolha um item</option> 7. <option value="Item 1">Item 1</option> 8. <option value="Item 2">Item 2</option> 9. </select> 10. <input type="radio" name="radio" /> 11. <textarea rows="4" cols="20" name="texto"></textarea> 12. <input type="submit" value="Submit" /> 13. </form>

A tag <form> indica a abertura do formulário, mas um formulário serve para enviar informações para outra página ou para um Banco de Dados (BD), neste caso é preciso informar qual é a ação que ele irá tomar action e indicar para onde a informação será enviada, se estiver vazio o formulário enviará para a própria página. Method é a forma de envio dos dados que podem ser GET ou POST. GET enviará pela barra de endereços e POST como arquivo temporário.

Na linha 2 a tag <input /> insere um item no formulário, neste caso é do

type="text", ou seja, um campo texto. Na linha 3 é um item checkbox, □. Na

linha 3 para senhas (****). Na linha 5 para as caixas de seleção de vários itens, veja que o que será enviado é o que está em value e não o texto que se chama label. Na linha 10, semelhante ao checkbox, o radio funciona com uma pequena diferença, ele aceitará apenas um item selecionado. Na linha 11 um textarea para escrita de textos mais longos. Na linha 12 o botão submit que é o responsável por disparar a informação e por fim, encerre o form. Iframe O iframe é um interessante comando presente no HTML para incluir uma página em outra, isto significa que nosso formulário pode ser único e incluído em diversas páginas. E? Bem, simples, e se o site tiver 100 páginas e seu cliente pede para incluir ou excluir um item? Fazer 100 vezes??? iframe!

<iframe frameborder="0" scrolling="no" src="menu.html" height="15px"> </iframe>

Abra o iframe, indique a espessura de sua borda, se terá barra de rolagem, qual o caminho da página que será incorporada e suas dimensões e por fim, encerre. Simples.

E como fica a página que será incorporada?



Links <link rel="stylesheet" href="twi.css" type="text/css" /> |<a href="index.html" target="_parent">Home</a> |<a href="html.html" target="_parent">HTML</a> |<a href="css.html" target="_parent">CSS</a> |<a href="javascript.html" target="_parent">Javascript</a> |

Esta é a página. Observe que ela não tem estrutura HTML. NENHUMA!!! Por que? Ela será incluída em outra que já tem!

Então vamos lá.

<link rel="stylesheet" href="twi.css" type="text/css" />

Refere-se ao CSS que vamos aprender logo adiante, então esqueça-o!

|<a href="index.html" target="_parent">Home</a>

| - elemento de design.

<a> link!

href – qual o destino?

target – onde abrirá. Sem informação abrirá na mesma página, ou _blank, _parent abrirá na página hospedeira.



AULA 3

HTML 5 O html 5 é a nova versão do html 4. Foi desenvolvido para a interoperabilidade e padronização de plataformas e navegadores (motores).

Compare as estruturas do html4 e do 5, abaixo:

HTML 4 HTML 5 <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title></title> </head> <body> </body> </html>

<!DOCTYPE HTML> <html lang="pt-br"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="estilo.css"> <title></title> </head> <body> </body> </html>

É claro que são as duas estruturas base e validadas pelo W3C.

Então aqui vem o desafio. Abaixo segue uma série de instruções do html5. Crie uma página com um formulário de cadastro, exiba uma imagem, crie algum design simplificado, dois links e a atividade somente será valida se for autenticada pelo http://html5.validator.nu/ ou http://validator.w3.org/, sem erros, claro.

HTML 5

Categorias Cada elemento no HTML pode ou não fazer parte de um grupo de elementos com características similares. As categorias estão a seguir. Manteremos os nomes das categorias em inglês para que haja um melhor entendimento:

• Metadata content

• Flow content

• Sectioning content

• Heading content

• Phrasing content

• Embedded content

• Interactive content



Abaixo segue como as categorias estão relacionadas de acordo com o WHATWG:

Metadata content Os elementos que compõe a categoria Metadata são:

• base

• command

• link

• meta

• noscript

• script

• style

• title

Este conteúdo vem antes da apresentação, formando uma relação com o documento e seu conteúdo com outros documentos que distribuem informação por outros meios.

Flow content A maioria dos elementos utilizados no body e aplicações são categorizados como Flow Content. São eles:

• a

• abbr

• address

• area (se for um decendente de um elemento de mapa)

• article

• aside

• audio

• b

• bdo

• blockquote

• br

• button

• canvas

• cite

• code

• command

• datalist

• del

• details

• dfn



• div

• dl

• em

• embed

• fieldset

• figure

• footer

• form

• h1

• h2

• h3

• h4

• h5

• h6

• header

• hgroup

• hr

• i

• iframe

• img

• input

• ins

• kbd

• keygen

• label

• link (Se o atributo itemprop for utilizado)

• map

• mark

• math

• menu

• meta (Se o atributo itemprop for utilizado)

• meter

• nav

• noscript

• object

• ol

• output

• p

• pre

• progress

• q



• ruby

• samp

• script

• section

• select

• small

• span

• strong

• style (Se o atributo scoped for utilizado)

• sub

• sup

• svg

• table

• textarea

• time

• ul

• var

• video

• wbr

• Text

Por via de regra, elementos que seu modelo de conteúdo permitem inserir qualquer elemento que se encaixa no Flow Content, devem ter pelo menos um descendente de texto ou um elemento descendente que faça parte da categoria embedded.

Sectioning content Estes elementos definem um grupo de cabeçalhos e rodapés.

• article

• aside

• nav

• section

Basicamente são elementos que juntam grupos de textos no documento.

Heading content Os elementos da categoria Heading definem uma seção de cabeçalhos, que podem estar contidos em um elemento na categoria Sectioning.

• h1

• h2



• h3

• h4

• h5

• h6

• hgroup

Phrasing content Fazem parte desta categoria elementos que marcam o texto do documento, bem como os elementos que marcam este texto dentro do elemento de parágrafo.

• a

• abbr

• area (se ele for descendente de um elemento de mapa)

• audio

• b

• bdo

• br

• button

• canvas

• cite

• code

• command

• datalist

• del (se ele contiver um elemento da categoria de Phrasing)

• dfn

• em

• embed

• i

• iframe

• img

• input

• ins (se ele contiver um elemento da categoria de Phrasing)

• kbd

• keygen

• label

• link (se o atributo itemprop for utilizado)

• map (se apenas ele contiver um elemento da categoria de Phrasing)

• mark

• math



• meta (se o atributo itemprop for utilizado)

• meter

• noscript

• object

• output

• progress

• q

• ruby

• samp

• script

• select

• small

• span

• strong

• sub

• sup

• svg

• textarea

• time

• var

• video

• wbr

• Text

Embedded content Na categoria Embedded, há elementos que importam outra fonte de informação para o documento.

• a

• audio

• canvas

• embed

• iframe

• img

• math

• object

• svg

• video

Interactive content Interactive Content são elementos que fazem parte da interação de usuário.

• a



• audio (se o atributo control for utilizado)

• button

• details

• embed

• iframe

• img (se o atributo usemap for utilizado)

• input (se o atributo type não tiver o valor hidden)

• keygen

• label

• menu (se o atributo type tiver o valor toolbar)

• object (se o atributo usemap for utilizado)

• select

• textarea

• video (se o atributo control for utilizado)

Alguns elementos no HTML podem ser ativados por um comportamento. Isso significa que o usuário pode ativá-lo de alguma forma. O início da sequencia de eventos depende do mecanismo de ativação e normalmente culminam em um evento de click seguido pelo evento DOMActivate.

O user-agent permite que o usuário ative manualmente o elemento que tem este comportamento utilizando um teclado, mouse, comando de voz etc.

Este atributos foram descontinuados porque modificam a formatação do elemento e suas funções são melhores controladas pelo CSS:

• align como atributo da tag caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead e tr.

• alink, link, text e vlink como atributos da tag body.

• background como atributo da tag body.

• bgcolor como atributo da tag table, tr, td, th e body.

• border como atributo da tag table e object.

• cellpadding e cellspacing como atributos da tag table.

• char e charoff como atributos da tag col, colgroup, tbody, td, tfoot, th, thead e tr.

• clear como atributo da tag br.

• compact como atributo da tag dl, menu, ol e ul.

• frame como atributo da tag table.

• frameborder como atributo da tag iframe.

• height como atributo da tag td e th.

• hspace e vspace como atributos da tag img e object.

• marginheight e marginwidth como atributos da tag iframe.



• noshade como atributo da tag hr.

• nowrap como atributo da tag td e th.

• rules como atributo da tag table.

• scrolling como atributo da tag iframe.

• size como atributo da tag hr.

• type como atributo da tag li, ol e ul.

• valign como atributo da tag col, colgroup, tbody, td, tfoot, th, thead e tr.

• width como atributo da tag hr, table, td, th, col, colgroup e pre.

Alguns atributos do HTML4 não são mais permitidos no HTML5. Se eles tiverem algum impacto negativo na compatibilidade de algum user-agent eles serão discutidos.

• rev e charset como atributos da tag link e a.

• shape e coords como atributos da tag a.

• longdesc como atributo da tag img and iframe.

• target como atributo da tag link.

• nohref como atributo da tag area.

• profile como atributo da tag head.

• version como atributo da tag html.

• name como atributo da tag img (use id instead).

• scheme como atributo da tag meta.

• archive, classid, codebase, codetype, declare e standby como atributos da tag object.

• valuetype e type como atributos da tag param.

• axis e abbr como atributos da tag td e th.

• scope como atributo da tag td.

Atributos Alguns elementos ganharam novos atributos:

• O atributo autofocus pode ser especificado nos elementos input (exceto quando há atributo hidden atribuído), textarea, select e button.

• A tag a passa a suportar o atributo media como a tag link.

• A tag form ganha um atributo chamado novalidate. Quando aplicado o formulário pode ser enviado sem validação de dados.

• O elemento ol ganhou um atributo chamado reversed. Quando ele é aplicado os indicadores da lista são colocados na ordem inversa, isto é, da forma descendente.

• O elemento fieldset agora permite o atributo disabled. Quando aplicado, todos os filhos de fieldset são desativados.



• O novo atributo placeholder pode ser colocado em inputs e textareas.

• O elemento area agora suporta os atributos hreflang e rel como os elementos a e link

• O elemento base agora suporta o atributo target assim como o elemento a. O atributo target também não está mais descontinuado nos elementos a e area porque são úteis para aplicações web.

Os atributos abaixo foram descontinuados:

• O atributo border utilizado na tag img.

• O atributo language na tag script.

• O atributo name na tag a. Porque os desenvolvedores utilizam ID em vez de name.

• O atributo summary na tag table.

O W3C mantém um documento atualizado constantemente nesta página: http://www.w3.org/TR/2010/WD-html5-diff-20100624/

Quer saber de onde veio isso tudo? Me pergunte!

Ou então, vamos dar os créditos à quem de direito:

http://tableless.com.br/html5/



AULA 4

CSS O CSS (Cascading Style Sheet), folha de estilo em cascata é uma codificação que pode ser incluído ou à parte da codificação html. Ele tem este nome por permitir a herança dos estilos de pai para filho, em cascata.

Basicamente o CSS obedece a seguinte estrutura:

Seletor {Propriedade: Valor}

Ou seja...

O seletor é uma tag html ou uma classe que você poderá criar, como <h1>, <p>, <img>, ou no caso das classes, .topo, .navegacao, .rodape. Note que as classes são iniciadas com um ponto e NUNCA possuem acentos, espaços, caracteres especiais, etc. Exemplos:

p { color: #FFFFFF}

Todos os parágrafos da página html terão cor branca. Observe que no CSS os sinais “<” e “>” não são escritos.

h1 { color: #000000; background-color: #ffff00; font-style: italic; text-align: right; }

ou

img { float: left; padding: 5px; }

No primeiro exemplo a cor dos títulos será preta, o background amarelo, com a fonte itálica alinhada à direita, no segundo exemplo a imagem está alinhada à esquerda, independente do texto, por isso o float e com um distanciamento de 5 pixels de qualquer objeto. Os dois casos são válidos, porém no primeiro, o ; separa as instruções, assim como no segundo que está separado por linhas.

Há também os casos de multivaloração, como:

h1{ font-family: "Times New Roman"; color: #AAFFDD; text-shadow: /*0.1em 0 0.2em #88AAFF,*/ -0.1em 0 0.2em #88AAFF, 0 0.1em 0.2em #88AAFF/*, 0 -0.1em 0.2em #88AAFF*/; font-size: 50px; text-align: center; }

Veja o seletor text-shadow, que cria sombras no texto que ele trabalha da seguinte forma: Deslocamento para a direita (para esquerda coloque um valor negativo), para cima (adivinhe como faz para ser para baixo...), sua



difusão, 0 para cópia idêntica do texto e quanto maior o valor maior a difusão e por fim a cor. Ele pode ter várias sombras, por isso é multivalorado.

Você viu o comentário /*...*/?

Quando a fonte tiver espaço no nome, adicione aspas.

Listas Vamos criar uma lista?

• Item 1

• Item 2

• Item 3

• Item 4

• Item 5

A codificação será assim:

HTML

<div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="#" id="current">Item one</a></li> <li><a href="#">Item two</a></li> <li><a href="#">Item three</a></li> <li><a href="#">Item four</a></li> <li><a href="#">Item five</a></li> </ul> </div>

CSS

None

Para fazer com que os pontos da lista sejam quadrados, escreva o CSS assim:

#navlist li { list-style-type: square; }

Mas por quê???

Você notou no html que o id da lista é navlist? O CSS pode ser feito com um . no lugar do #.Então os itens li dentro do navlist terão o tipo de estilo de lista quadrado, square.

Ok, mãos à obra!

Crie listas com outros elementos como imagens e símbolos do word.

Agora vamos criar a seguinte lista:



Neste caso foram criadas linhas separadoras, vejamos o código

HTML

<div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="#" id="current">Item um</a></li> <li><a href="#">Item dois</a></li> <li><a href="#">Número três</a></li> <li><a href="#">Item quatro</a></li> <li><a href="#">O ponto cinco</a></li> </ul> </div>

CSS

#navlist { padding-left: 0; margin-left: 0; border-bottom: 1px solid gray; width: 200px; } #navlist li { list-style: none; margin: 0; padding: 0.25em; border-top: 1px solid gray; } #navlist li a { text-decoration: none; }

Float O float é a flutuação de um objeto. Ele aceita somente o alinhamento à esquerda ou à direta.

Crie uma imagem alinhada à esquerda e o texto à sua direita, assim:



Para este efeito o código será:

CSS

None

HTML

<p> <img src="images/image.gif" alt="" width="100" height="100">Lorem ipsum dolor sit amet, consectetuer... </p>

Para alinhas o quadrado à direta, adicione o código:

CSS

.floatright { float: right; }

HTML CODE

<p> <img class="floatright" src="images/image.gif" alt="" width="100" height="100">Lorem ipsum dolor sit amet, consectetuer... </p>



<HTML> <HEAD> <TITLE>Titulo</TITLE> </HEAD> <BODY> </BODY>

AULA 8

JAVASCRIPT Vamos aprender passo-a-passo. Então, para quê o JAVASCRIPT?

O Javascript é uma linguagem tipo script, ou seja, é interpretada linha a linha, para executar funções em seu navegador, esteja ele online ou não.

Agora que conhecemos o HTML e o CSS, podemos entender um pouco mais de Javascript.

A estrutura HTML segue um padrão único. Dentro desta estrutura vamos posicionar nosso Javascript. Primeiramente no próprio arquivo HTML, depois em um arquivo externo.

De forma geral os scripts podem ser escritos dentro da HEAD, por uma razão simples. ORGANIZAÇÃO! Organize-se, chega de ser bagunceiro!

Mas e se eu colocar fora?

Vai funcionar do mesmo jeito, mas naquela bagunça. Onde é HTML, CSS, PHP, JS....

O script se escreve assim:

<script> e terminamos com </script> Mas que tipo de script?.... Ok, vamos especificar então.

<script type="text/javascript"> e encerrado simplesmente com </script>, ok?

Mas nem todo lugar precisa ter uma inscrição de script, como dentro das TAGs HTML que já aceitam o Javascript por natureza de seus navegadores.

<body onload="alert('Olá mundo!');">

Vamos lá, respire fundo, tome muita coragem e teste! Teste até doer, mas teste!!!

Incrível não? Até você deve estar se achando inteligente, mas calma, as coisas não acabaram faltam muitas páginas...

Agora vamos escrever um pouco. Um texto pode ser escrito pelo JavaScript da seguinte forma:

1. <script type="text/javascript"> 2. //Isto é um comentário de uma linha



3. /*E este é 4. de múltiplas linhas.*/ 5. document.write("Código JavaScript"); 6. </script>

Alert A função alert serve para situações em que o usuário deverá ver o alerta, como no preenchimento de formulário ou ao ler um texto.

Escreva!

<script type="text/javascript"> alert("Clique em 'OK' para formatar seu micro!"); </script>

Observe que a palavra OK está com aspas simples, isto por que se você colocar aspas duplas o texto se encerrará ali! Dentro das aspas duplas, somente as simples. Compreendeu 02?

Mas e se eu quiser que o texto tenha aspas duplas? Simples! Adicione \ antes das aspas duplas, assim.

alert("Clique em \"OK\" para formatar seu micro!"); Então quer dizer que se eu escrever vai aparecer esta janela?

Figura 4 – Alert

E onde é que eu escrevo?

Se você escrever antes do <title> antes dele o popup irá se apresentar, se escrever antes do <body>, adivinhe! Então escreva onde melhor lhe convir!

Quer uma boa sacada?

Como funciona o carregamento do HTML?

O desafio é fazer aparecer um popup explicativo para cada parte (antes dela) a ser carregada.

Mas aprender a dar más vindas ao site é fácil, eu quero resolver problemas!!!!



Ok, então o problema é esse: Você foi contratado para trabalhar numa agência de webdesign a designwebdesign e a página de um de seus clientes não estava lá grande coisa...

O símbolo do cliente, um OVO, deveria interagir com as pessoas ao entrar. O cliente também queria que a pessoa fosse ao menos cumprimentada, pelo nome, claro. O que devemos pensar então?

1. Crie o HTML; 2. Vamos criar uma função chamada ClicaOvo. Assim: function

ClicaOvo();

Toda função tem os parênteses para poder neles, inserir os parâmetros da função.

3. Dentro desta função vamos criar uma variável para receber o nome do caboclo, conforme o cliente pediu, assim: var Usuario.

var é a função que cria uma variável e Usuario (sem acento) é o nome da variável.

a. Nesta variável vamos adicionar o comando prompt que irá abrir uma caixa que permitirá o usuário escrever seu nome, assim: prompt();

Quer pronto? Então sofra!

1. <HTML> 2. <HEAD> 3. <TITLE>Tecnologia Web I</TITLE> 4. <link rel="stylesheet" href="twi.css" type="text/css" /> 5. <script type="text/javascript"> 6. function ClicaOvo () { 7. var Usuario = prompt("Diga seu nome, o mané!", "Adivinha onde você deve escrever,

estúpido... É! Aqui!!! Homo Sapiens nem tão Sapiens..."); 8. if (Usuario) { 9. alert ("O... "+Usuario + ", boa sorte. Você vai precisar..."); 10. document.getElementById("ovoimg").src = "img/ovo_sorrindo.gif"; 11. } //Você consegue reparar na linha 6, onde abre a funcition? Veja que lá é aberta a

primeira chave"{" que é fechada aqui. 12. } //E na linha 8 é a berta a segunda, que se encerra aqui. Dãããããã... 13. </script> 14. </HEAD> 15. <BODY onload="alert('Olá mundo!');"> 16. <h1>Tecnologia Web I</h1> 17. <img src="img/ovo.gif" id="ovoimg" alt="Ovo" onclick="ClicaOvo();" /> 18. </BODY> 19. </HTML>

Muito bem e o desafio?

Agora o cliente pediu para que o usuário pudesse colorir o Ovo. Dá?

Funções e Variáveis



O Javascript – cansei de escrever Javascript, vou escrever só JS.... – então, o JS possui diversas funções que são inerentes à ele, são fixas, imutáveis, como a Tabela 1 – Funções do Javascript mostra:

Função Tradução Script exemplo Cuidado!

onclick Ao clicar no objeto

<img src="xxx" id="xxx" alt="xxx" onclick="Funcao();" />

Com o nome da função, deve estar igual tanto na function quanto no onclick

onmouseover Quando passar o mouse por sobre

alert Emite um aviso do tipo pop-up

Tabela 1 – Funções do Javascript

tecnologia web i - instituto siegeninstitutosiegen.com.br/documentos/aula_1_cic_twi.pdf ·...

Documents