Tecnologia WEB I. Prof. Erwin Alexander Uhlmann. Dos princípios do HTML, estruturação com CSS e automação com Javascript

Tamanho: px

Começar a partir da página:

Download "Tecnologia WEB I. Prof. Erwin Alexander Uhlmann. Dos princípios do HTML, estruturação com CSS e automação com Javascript"

Rubens Amado Teixeira
8 Há anos
Visualizações:

1 1 Tecnologia WEB I Prof. Erwin Alexander Uhlmann Dos princípios do HTML, estruturação com CSS e automação com Javascript UHLMANN, Erwin Alexander. Dos princípios do HTML, estruturação com CSS e automação com Javascript. Instituto Siegen. Guarulhos, 2012.

com CSS e automação com Javascript UHLMANN, Erwin Alexander.

2 2 Agradecimentos Agradeço à minha esposa Kátia por entender minha ausência, meus pais Mirtes e Günter por terem criado meu caminho, aos meus alunos que viabilizaram este trabalho e a todos os autores de livros e bibliotecas que consultei para que pudesse devidamente embasar este.

meus alunos que viabilizaram este trabalho e a todos os autores de

3 3 Sumário Agradecimentos... 2 Introdução... 5 Aula Pré-requisitos... 6 Software... 6 HTML... 8 Títulos Aula Tabelas Cores Junção de colunas Junção de linhas Linhas e colunas fundidas Aula Listas Listas ordenadas Listas aninhadas e mistas Aula Formulários Exercício iframe Aula HTML Audio Vídeo... 24

.. 17 Linhas e colunas fundidas... 17 Aula 3... 18 Listas... 18 Listas ordenadas.

4 4 CSS Aula Aula Aula Aula Aula Aula Aula Aula Aula Aula Bibliografia... 26

.. 25 Aula 11... 25 Aula 12... 25 Aula 13.

5 5 Introdução O objetivo deste trabalho é introduzir as técnicas basilares para construção de um website seguindo os preceitos e padrões definidos pelo W3C ( o esperado pelo mercado e que seja simples de produzir, manter e modificar.

preceitos e padrões definidos pelo W3C (www.w3c.

6 6 Aula 1 Pré-requisitos Software Amaya Este é o software referência em edição da marcação HTML. Criado pelo W3C, o Amaya é um editor WYSIWYG (What You See Is What You Get Editor visual de marcação HTML) que já aplica as definições do W3C com avisos de erros de codificação ou desconformidades. $ : Grátis. Avaliação:

visual de marcação HTML) que já aplica as definições do W3C com avisos de erros de

7 7 Dreamweaver Este é o melhor! O problema é que é pago, e bem pago. Este editor da Adobe tem longa história de desenvolvimento. Atende diversas ferramentas que permitem até um usuário com pouco conhecimento criar uma página, além de suporte à diversas linguagens de programação e Banco de Dados. $: US$ 229,00 (13/12/2011) Avaliação: Expression Web A Microsoft definitivamente entrou para a briga dos editores web. Para encarar o Dreamweaver ela lançou o Expression Web 4, que pode ser avaliado como uma versão antiga, de uma ou duas gerações passadas, do software da Adobe. Pago mas com diversos recursos, segue a linha do principal concorrente. $: US$149,00 Avaliação:

com/cfusion/tdrc/index.cfm?product=dreamweaver&loc=pt_br $: US$ 229,00 (13/12/2011) Avaliação: Expression Web A Microsoft definitivamente entrou para a briga dos editores web.

8 8 Existem diversos editores HTML, ao longo deste trabalho, iremos utilizar o Amaya, pois além de gratuito é a referência. HTML Hypertext Markup Language é o significado do HTML, isto é, uma linguagem de marcação de hipertexto (texto comum também). O HTML básico segue a seguinte estrutura: <html> <! Isto é um comentário em HTML. Aqui começa a página.--> <head> <! Esta parte pertence ao cabeçalho--> <title>título da página </title> </head> <body> <! Aqui fica a parte visível do site--> <p>olá, seja benvindo ao seu primeiro site!</p> <! Você notou que as TAGs <...> sempre terminam com </...>?--> </body> </html> Agora é com você, Construa uma página usando o HTML com o título Página do...(seu nome), e com alguns conteúdos visíveis, seu são:

Isto é um comentário em HTML. Aqui começa a página.--> <head> <! Esta parte pertence ao cabeçalho--> <title>título da página </title> </head> <body> <!

9 9 Página do XXX em título 1. Como??? <h1>página do XXX</h1> Exercício de escrita em marcação HTML em título 2. Como??? <h2>...</h2> Exercício 1 Título 3. Como??? Última chance! <h3>...</h3> Então, posso ir colocando <hx> enquanto quiser títulos? Não, você pode colocar de 1 até 6. E por que devo colocar títulos? GOOGLE!!! Se você não colocar títulos, ele não vai te ranquear devidamente, a isto se chama SEO (Search Engine Optimization). Saiba mais em: Outra coisa interessante, você notou que quando uma tag é aberta (<body>, <h1>) outra a encerra (</body>, </h1>)? Mas nem todas são assim, as tags que marcam conteúdos devem ser encerradas, as tags que são estruturantes, como <meta />, <hr /> e outras se autoencerram. Como? Vamos pegar o exemplo da linha horizontal, <hr />, depois da identificação da tag, adicione um espaço uma barra e feche. O interessante desta tag, assim como veremos em outras, você pode adicionar atributos. Vamos ver algumas (das 91 recomendas pelo W3C) tags e atributos: Elemento Descrição Atributos a Link accesskey = atalho de teclado (<a accesskey= l...) href = endereço de destino (<a href= link.html...) name = nome do elemento (<a name= nome...) target = onde vai abrir? _self, na mesma janela, _blank, em uma nova janela,_parent, na janela pai, _top, no topo do documento (<a target= _blank...) tabindex = ordem de uso da tecla TAB para usabilidade (<a tabindex= 0...) b Negrito <b>palavra</b> body Corpo background = imagem.jpg

!! Se você não colocar títulos, ele não vai te ranquear devidamente, a isto se chama SEO (Search Engine Optimization). Saiba mais em: http://support.google.com/webmasters/bin/answer.py?

10 10 bgcolor = cor de fundo (#FFFFFF) text = cor de todo texto contido no body link = cor dos links vlink = links visitados alink = links ativos hlink = ao passar o mouse sobre br Quebra de <br /> Observe que este elemento não marca linha nenhum texto, por isso se auto encerra. div Divisão Uma div (<div>...</div>)deve conter uma classe (<div class= topo >) e tudo o que for criado dentro desta div irá obedecer o que foi criado na classe topo (Veja mais em CSS) em Ênfase Itálico fieldset Caixa Cria um acaixa entorno de elementos comuns, apenas visual. form Formulári o Cria um elemento que o que estiver dentro dele, exceto textos do formulário, será enviado. method = post envia os dados de forma oculta e get que utiliza a url para enviar (veja mais na sessão formulário) h1 a h6 Título <h1></h1> align = center, left, right, justify alinhamento do texto head Cabeçalho Informações sobre o documento como o nome, documentos relacionados, idioma, autoria, palavras chave, entre outros. iframe Quadro Cria uma janela para outro documento <iframe src= documento.html width= 100 height= 100 scrolling= auto yes no frameborder= 1 align= center left right justify ></iframe>

..</div>)deve conter uma classe (<div class= topo >) e tudo o que for criado dentro desta div irá obedecer o que foi criado na classe topo (Veja mais em CSS) em Ênfase Itálico fieldset Caixa Cria um

11 11 img Imagem <img src= imagem.jpg width= 253 height= 128 align= bottom middle top left right alt= nome da imagem /> input Comunica ção Este é um elemento do formulário <input type= text = caixa de texto password = senha checkbox = caixa de ticar (tic check) radio = semelhante o check, mas permite apenas uma opção submit = botão de enviar file = para procurar arquivos no seu micro hidden = oculto. Para enviar informações. Image = um botão com uso de alguma imagem Button = sem ação, para uso do Javascript li Lista Marcador ou numerador em associação com a ul ou ol ol Ordinate Lista ordenada, numerada, associada ao li list option Opção Associada ao select p Parágrafo <p></p> Select Seleção <select><option value= XPTO >XPTO</option>...</select> O objetivo desta parte do curso é escrever não é programar, HTML não é uma linguagem, mas sim uma marcação 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 e pode ser consultado seu escritório no Brasil e a validação pelo endereço PRESTE

= caixa de ticar (tic check) radio = semelhante o check, mas permite apenas uma opção submit = botão de enviar file = para procurar arquivos no seu micro hidden = oculto. Para enviar informações.

12 12 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 certificando sua página. para o HTML, Vamos criar a seguinte página: Figura 1 - Primeira página HTML Para tanto vamos começar pela estrutura básica. 1. <?xml version="1.0" encoding="iso "?> 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"

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

13 13 " 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=" 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. 5. <body> O body contém a parte visível do site. Títulos Para o título vamos utilizar a tag <h1>. Esta tag abre o título de maior tamanho e encerra com </h1>, desta forma: <h1>tecnologia Web I</h1> Estes títulos podem ir de h1 à h6. Para escrevermos os elementos textuais, vamos utilizar a tag <p>texto</p>. Existem diversos elementos textuais, mas vamos estuda-los aos poucos, conforme necessidade. Para navegar vamos utilizar a tag <a>link</a>. No entanto todo link deve ter um endereço, assim vamos adicionar o parâmetro href que é o endereço de destino, ficando <a href= pagina.html >Texto do link</a>. Podemos ainda informar que o navegador poderá abrir uma nova página, na mesma somente no topo quando dividida ou ainda na parte principal, usando o target, assim, <a href= paginas.html target= _parent >nome do link</a>. Assim como no link praticamente todas as tags de marcação aceitam mais parâmetros formatadores como cores, tamanhos e alinhamento. <h1><font color="#dd3333">tecnologia Web I</font></h1>

<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. 5.

14 14 Para quebra de linha vamos utilizar o <br /> e outro elemento interessante é a linha horizontal <hr />. Note que a quebra de linha não aceita conteúdo (<br>texto</br>) nem aparece, por isso não há parâmetros, no entanto a tag hr aceita, como <hr width= 75% align= right />. Para as imagens os navegadores interpretam como tal quando há a tag <img />. Ele vai renderizar como imagem, então é preciso informar qual com o parâmetro src, <img src= imagem.jpg />, podendo estar na raiz, numa pasta (src= pasta/imagem.jpg ) ou num endereço da internet (src=" além deste elemento é importante informar o texto alternativo alt e as dimensões width e height. <img src=" alt="valid XHTML 1.0 Transitional" height="31" width="88" />

Para as imagens os navegadores interpretam como tal quando há a tag <img />. Ele vai renderizar como imagem, então é preciso informar qual com o parâmetro src, <img src= imagem.

Documentos relacionados

Tecnologia WEB III. Prof. Erwin Alexander Uhlmann. PHP e MySQL. UHLMANN, Erwin Alexander. Introdução ao PHP. Instituto Siegen. Guarulhos, 2012.

Tecnologia WEB III. Prof. Erwin Alexander Uhlmann. PHP e MySQL. UHLMANN, Erwin Alexander. Introdução ao PHP. Instituto Siegen. Guarulhos, 2012. Tecnologia WEB III Prof. Erwin Alexander Uhlmann PHP e MySQL UHLMANN, Erwin Alexander. Introdução ao PHP. Instituto Siegen. Guarulhos, 2012. Agradecimentos Agradeço à minha esposa Kátia por entender minha