Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Apostila Criação de Sites I

Apostila da disciplina de criação de sites I

  • Als Erste(r) kommentieren

Apostila Criação de Sites I

  1. 1. ______________________________________________________________________________________________ Curso Técnico em Informática 1 Criação de sites ESCOLA TÉCNICA ESTADUAL MONTEIRO LOBATO Criação de Sites Curso Técnico em Informática Vol. 1
  2. 2. ______________________________________________________________________________________________ Curso Técnico em Informática 2 Criação de sites 1 HTML............................................................................................................................................5 1.1 Introdução. ......................................................................................................................5 1.1.1 O HTML5 ...........................................................................................................5 1.1.2 Requisitos para o desenvolvimento de uma página WEB .................................5 1.1.3 Tags HTML.........................................................................................................5 1.1.4 Navegadores......................................................................................................6 1.2 Editor...............................................................................................................................6 1.2.1 Adobe Dreamweaver .........................................................................................6 1.2.2 Notepad++ .........................................................................................................7 1.2.3 IDEs – Muito além do HTML..............................................................................7 1.2.3.1 Eclipse..................................................................................................7 1.2.3.2 Aptana ..................................................................................................7 1.2.3.3 Netbeans..............................................................................................7 1.3 Fundamentos do HTML...................................................................................................8 1.3.1 Etiqueta..............................................................................................................8 1.3.2 Elemento............................................................................................................8 1.3.3 Atributo e valor...................................................................................................9 1.3.3.1 Convenções .......................................................................................10 1.4 Estruturas ....................................................................................................................10 1.4.1 Textos .............................................................................................................. 11 1.4.1.1 Parágrafo e quebra de linha............................................................... 11 1.4.1.2 Atributo align.......................................................................................12 1.4.1.3 Texto pré-formatado ...........................................................................14 1.4.1.4 Cabeçalho e linha horizontal ..............................................................15 1.4.1.4.1 Cabeçalho.............................................................................15 1.4.1.4.2 Linha horizontal ....................................................................16 1.4.1.5 Formatação de texto (estilo físico x estilo lógico) ...............................17 1.4.1.6 Fonte ..................................................................................................19 1.4.1.6.1 Face......................................................................................19 Sumário
  3. 3. ______________________________________________________________________________________________ Curso Técnico em Informática 3 Criação de sites 1.4.1.6.2 Size.......................................................................................20 1.4.1.6.3 Color .....................................................................................21 1.4.1.7 Cor .....................................................................................................22 1.4.1.8 Alinhamento e recuo...........................................................................24 1.4.1.8.1 Alinhamento (DIV).................................................................24 1.4.1.8.2 Recuo (BLOCKQUOTE) .......................................................25 1.4.1.9 Caracteres especiais e comentários ..................................................26 1.4.1.9.1 Caracteres especiais ............................................................26 1.4.1.9.2 Comentários .........................................................................27 1.4.2 Links ................................................................................................................27 1.4.2.1 O atributo target .................................................................................28 1.4.2.2 Imagem como Link .............................................................................28 1.4.2.3 Criar um marcador .............................................................................28 1.4.3 Imagens...........................................................................................................28 1.4.3.1 Imagem no documento HTML............................................................28 1.4.3.2 Tipos de imagem ................................................................................29 1.4.3.3 Atributos do elemento IMG.................................................................29 1.4.3.3.1 Src, border, alt ......................................................................29 1.4.3.3.2 Width, height.........................................................................30 1.4.3.3.3 Align......................................................................................30 1.4.3.4 Imagem de fundo ...............................................................................33 1.4.4 Vídeos..............................................................................................................33 1.4.5 Listas ...............................................................................................................34 1.4.5.1 Lista ordenada e lista não-ordenada..................................................34 1.4.5.2 Atributos do elemento OL...................................................................35 1.4.5.3 Atributos do elemento UL ...................................................................36 1.4.5.4 Lista de definição ...............................................................................38 1.4.5.5 Aninhando de listas ............................................................................39 1.4.6 Tabelas ............................................................................................................40 1.4.6.1 Linha de tabela: TR ............................................................................43 1.4.6.2 Título e legenda: CAPTION................................................................44 1.5 Formulários..................................................................................................................46 1.5.1 Elementos do formulário ..................................................................................46 1.5.1.1 O elemento <form> ............................................................................46 1.5.1.2 O elemento <input>............................................................................46
  4. 4. ______________________________________________________________________________________________ Curso Técnico em Informática 4 Criação de sites 1.5.1.3 O elemento <select> ..........................................................................46 1.5.1.4 O elemento <option>..........................................................................47 1.5.1.5 O elemento <textarea>.......................................................................47 1.5.1.6 O elemento <button>..........................................................................47 1.5.1.7 Elemento <datalist>............................................................................47 1.5.1.8 Elemento <keygen> ...........................................................................48 1.5.1.9 Elemento <output> .............................................................................48 1.5.2 Atributos .....................................................................................................................49
  5. 5. ______________________________________________________________________________________________ Curso Técnico em Informática 5 Criação de sites 1.1 Introdução O HiperText Markup Language ou simplesmente HTML, continua trazendo grandes contribuições para o advento da internet, pois é o tipo de conteúdo que mais trafega pela rede mundial de computadores. Apesar da enorme importância para o mundo da informação o HTML estancou na versão 4.0.1 desde 1999 e não acompanhou as dinâmicas mudanças que ocorreram nos últimos anos e para atender as necessidades careceu de utilizar plugins externos como o flash player e outros. Mas felizmente, isso são coisas do passado, pois a W3C (World Wide Web Consortium) e a WHATWG (Web Hypertext Application Technology Working Group) disponibilizaram uma versão de teste que provavelmente será a nova cara do HTML. Esta apostila mostra as novas características dessa versão que, inclusive, já tem suporte para algumas funcionalidades nos mais conceituados navegadores e brevemente será oficializado por definitivo como o HTML 5. 1.1.1 O HTML5 Surgido a partir de um consórcio entre a W3C (World Wide Web Consortium) e a WHATWG (Web Hypertext Application Technology Working Group), o HTML5 será o novo padrão para a estruturação e apresentação de conteúdo na Word Wide Web trazendo melhorias significativas com novas funcionalidades de semântica e acessibilidade, além de melhorar o suporte aos mais recentes conteúdos multimídias. As principais mudanças que a nova versão proporcionará aos usuários são: Melhor tratamento de exceção, mais tags para substituir scripts, independência de plataforma e redução da necessidade de plugins externos. 1.1.2 Requisitos para o desenvolvimento de uma página WEB Para desenvolver uma página Web é necessário conhecer a linguagem HTML para escrever o código fonte de sua página. Como ferramenta é utilizado um editor de textos para gerar o seu código fonte (bloco de notas, Front Page, Dremweaver, entre outros). Para exibição de uma página Web é necessário um navegador de internet (browser) para visualizar as páginas (Internet Explorer, Mozilla, Chrome, Netscape, etc). 1.1.3 Tags HTML Tags HTML são palavras-chave (nomes de tag) cercadas por colchetes angulares: < tagname > conteúdo < / tagname >  Tags HTML normalmente vêm em pares como <p> e </ p>;  A primeira tag em um par é a marca inicial, a segunda tag é a tag final;  A marca final é escrita como a marca inicial, mas com uma barra antes do nome do tag. HTML 1
  6. 6. ______________________________________________________________________________________________ Curso Técnico em Informática 6 Criação de sites Exemplo de um pequeno documento HTML: <!DOCTYPE html> <html> <head> <title>Titulo da página</title> </head> <body> <h1>Título</h1> <p>Paragrafo</p> </body> </html> Exemplo Explicado:  A declaração DOCTYPE define o tipo de documento HTML;  O texto entre <html> e </ html> descreve um documento HTML;  O texto entre <head> e </ head> fornece informações sobre o documento;  O texto entre <title> e </ title> fornece um título para o documento;  O texto entre <body> e </ body> descreve o conteúdo da página visível;  O texto entre <h1> e </ h1> descreve um título;  O texto entre <p> e </ p> descreve um parágrafo. Usando esta descrição, um navegador pode exibir um documento com um título e um parágrafo. A marca de início é muitas vezes chamada de tag de abertura. A marca final é muitas vezes chamada a marca de fechamento. 1.1.4 Navegadores A finalidade de um navegador (Chrome, IE, Firefox, Safari) é ler documentos HTML e exibi- los. O navegador não exibe as tags HTML, mas usa elas para determinar como exibir o documento. 1.2 Editor Um bom editor de códigos pode agilizar e facilitar muito a vida do WebDesigner.Eles pos- suem recursos que facilitam muito a fase de criação e codificação das páginas, aumentando a produtividade e reduzindo os erros. Existem no mercado diversos softwares que fazem essa função, cada um com suas carac- terísticas. Cabe ao profissional analisar qual se encaixa melhor no seu perfil e necessidades e então definir qual é o melhor editor HTML para ele. Segue abaixo, alguns dos principais editores do mercado, com suas principais característi- cas, para que você possa fazer a melhor escolha. 1.2.1 Adobe Dreamweaver Essa é uma das ferramentas mais completas do mercado, traz funcionalidades de auto- completamento de código, coloração especifica das tags, ótima integração com todas as outras
  7. 7. ______________________________________________________________________________________________ Curso Técnico em Informática 7 Criação de sites ferramentas da Adobe e várias outras funções que facilitam muito o trabalho do WebDesigner. Ele traz a possibilidade de se criar uma página Web em dois modos, o modo Código, aonde você vai realmente codificar a página, e o modo Design que é uma opção visual aonde você vai “desenhar” a página e o próprio Dreamweaver irá criar o código no background. Se por um lado ele é uma excelente opção para profissionais, não é uma boa para quem está aprendendo, pois, as funções que facilitam a codificação provavelmente irão inibir o aprendizado do HTML e CSS em si. 1.2.2 Notepad++ O Notepad++ é um dos melhores editores HTML para quem está começando e aprendendo, além de ser a opção de muitos desenvolvedores “hardcore”. Ele é um editor de código que irá facilitar a leitura e a codificação, através de definição de cores e espaçamentos no código, possui também algumas funções de auto-completamento, mas não tão complexas quanto o Dreamweaver. 1.2.3 IDEs – Muito além do HTML Ambientes Integrados de Desenvolvimento (Integrated Development Environment – IDE) são programas que agilizam o desenvolvimento em diversas linguagens de programação, sem com isso poluir o código ou interferir no trabalho do programador. Existem diversas IDEs de código aberto melhores que o Dreamweaver. 1.2.3.1 Eclipse Com uma grande e ativa comunidade de desenvolvedores e parceiros, o IDE Eclipse é uma das melhores ferramentas de desenvolvimento que existem. Leve e flexível, ele possui diversos tutoriais que podem auxiliar os iniciantes. É possível personalizar a interface gráfica da maneira que você se sentir mais confortável por meio das Views e Perspectives, gerenciar atividades complexas por meio de projetos, codificar com toda liberdade através do autocompletar, abrir diversos arquivos ao mesmo tempo através de abas e muito mais. A partir da instalação de plugins é possível codificar em diversas linguagens de programação. 1.2.3.2 Aptana O Aptana é um IDE baseado no Eclipse que possui suporte nativo a HTML, CSS, JavaScript, XML, Ruby entre outras. Alguns dos interessantes recursos que ele oferece são:  Assistente de código – sugere as tags ou códigos a serem utilizados, além de mostrar a compatibilidade com diferentes navegadores.  Outline – Exibe as principais tags estruturadas hierarquicamente para facilitar a pesquisa.  FTP – Oferece a possibilidade de realizar o download ou upload dos arquivos direto para o servidor. 1.2.3.3 Netbeans O NetBeans é um IDE gratuito e de código aberto para desenvolvedores de software nas linguagens Java, C, C++, PHP, Groovy, Ruby, entre outras. O IDE é executado em muitas plataformas, como Windows, Linux, Solaris e MacOS. O NetBeans IDE oferece aos desenvolvedores ferramentas necessárias para criar aplicativos profissionais de desktop, empresariais web e móveis multiplataformas. Entre os seus recursos podemos destacar:
  8. 8. ______________________________________________________________________________________________ Curso Técnico em Informática 8 Criação de sites  Suporte a HTML5: Suporte para Browsers do Android e IOS, suporte de edição para linguagens de folhas de estilo SASS e LESS, network monitor.  JavaScript: Suporte aos Frameworks AngularJS, Knockout e ExtJS, navegador e código em arquivos JSON, excelente autocompletar.  PHP: Recursos de HTML5 nas aplicações PHP, Suporte a Nette Framework e Zend Framework, suporte a análise de código estático.  Outros Recursos: Novos painéis de tarefas e janelas de notificações, modo offiline do Bugzilla, avanços em controle de versão, melhorias para bancos de dados. 1.3 Fundamentos do HTML 1.3.1 Tag Observe as diferenças entre estas duas frases: HTML é uma linguagem. HTML é uma linguagem. As diferenças entre as frases estão na forma com que o texto é apresentado. Na segunda frase, a palavra "HTML" aparece em itálico e "linguagem" aparece em negrito. Para marcar essa forma- tação de texto na linguagem HTML, utiliza-se o seguinte código: <I>HTML</I> é uma <B>linguagem de marcação</B> A formatação do texto é obtida com o uso de tags - símbolos da linguagem HTML identificados pelos sinais "< >" (se for a tag inicial) ou pelos sinais "</ >" (se for a tag final). A tag <I> no código acima marca o início do texto a ser apresentado em itálico, e a tag </I> marca o fim da formatação em itálico. Portanto, tudo o que estiver entre este par de tags <I> e </I> ficará em itálico. Assim também funcionam as tags <B> e </B>, que marcam o início e o fim do texto a ser exibido em negrito (Bold). 1.3.2 Elemento A linguagem HTML especifica elementos1 para construir estruturas como: textos formata- dos, parágrafos, listas, tabelas, etc. Cada elemento, em geral, é composto por três partes: tag inicial + conteúdo + tag final. O elemento itálico exemplifica esta estrutura genérica: 1 Elemento de conteúdo e elemento vazio são classificações para os elementos. "Elemento de conteúdo" é aquele que possui conteúdo (como Itálico ou Parágrafo) enquanto "elemento vazio" é o que não possui conteúdo (como a Linha Horizontal).
  9. 9. ______________________________________________________________________________________________ Curso Técnico em Informática 9 Criação de sites Alguns elementos permitem omitir a tag final. Por exemplo, para construir um parágrafo basta ex- plicitar a etiqueta inicial <P>. Exemplo utilizando o elemento P: <P>Primeiro parágrafo. <P>Segundo parágrafo. Resultado: Primeiro parágrafo. Segundo parágrafo. Casos como o elemento P (parágrafo), a tag final é opcional - pode ou não ser declarada. Portanto, o código anterior também poderia ser escrito desta maneira: <P>Primeiro parágrafo</P> <P>Segundo parágrafo</P> Alguns tipos de elementos não possuem conteúdo nem tag final. Por exemplo, o elemento HR (Horizontal Rule) desenha uma linha horizontal - não possui conteúdo nem tag final; a linha é construída com uma única etiqueta. Exemplo utilizando o elemento HR: <P>Observe o elemento a seguir:</P> <HR> <P>A linha horizontal é construída com o elemento vazio HR.</P> Resultado: Observe o elemento a seguir _________________________________________________ A linha horizontal é construída com o elemento vazio HR. 1.3.3 Atributo e valor Exemplo de código: <P> Navegadores antigos tinham uma frase gloriosa: <I>"Navegar é preciso; viver não é preciso."</I> Quero para mim o espírito desta frase, transformada a forma para a casar com o que eu sou: Viver não é necessário; o que é necessário é <B>criar</B>. </P> <P align="right">(Fernando Pessoa)</P>
  10. 10. ______________________________________________________________________________________________ Curso Técnico em Informática 10 Criação de sites Resultado: Navegadores antigos tinham uma frase gloriosa: “navegar é preciso; viver não é preciso. ” Quero para mim o espírito desta frase, transformada a forma para a casar com o que eu sou: Viver não é necessário: o que é necessário é criar. (Fernando Pessoa) Observe, no exemplo acima, que o alinhamento do segundo parágrafo é à direita da pági- na. Na tag inicial do segundo parágrafo (<P align="right">), o "alinhamento do parágrafo" corres- ponde ao atributo "align"; e "à direita" corresponde ao valor "right". Um atributo é uma característica associada ao elemento. Cada atributo recebe um valor que configura a característica. Cada elemento pode ter associado alguns pa- res atributo="valor" dentro de sua tag inicial. O estudo da linguagem HTML consiste, principalmente, na investigação dos elementos, tags, atributos e valores que compõem esta linguagem. A figura abaixo (corres- pondente ao fragmento de código do segundo parágrafo do exemplo acima) identifica estes con- ceitos fundamentais para a compreensão de um código escrito em HTML. 1.3.3.1 Convenções As tags, os atributos e valores podem ser escritos tanto em maiúsculo como em minúsculo, e até misturado. Desta forma, <HTML> <html> ou <HtmL> representam a mesma tag. 1.4 Estruturas Observe o exemplo a seguir: <HTML> <HEAD> <TITLE>Citação de Fernando Pessoa</TITLE> </HEAD> <BODY> <P> Navegadores antigos tinham uma frase gloriosa: <I>"Navegar é preciso; viver não é preciso.</I>" Quero para mim o espírito desta frase, transformada a forma para a casar com o que eu sou: Viver não é necessário; o que é necessário é <B>criar</B>. </P> <P align="right">(Fernando Pessoa)</P> </BODY> </HTML>
  11. 11. ______________________________________________________________________________________________ Curso Técnico em Informática 11 Criação de sites Um típico documento escrito em HTML possui três partes: a estrutura principal, o cabeçalho e o corpo. A estrutura principal deve iniciar com a etiqueta <HTML> e terminar com a tag </HTML>. O cabe- çalho, delimitado pelas tags <HEAD> e </HEAD>, destina-se a conter informações sobre o docu- mento - por exemplo, o título do documento (que é construído com o elemento TITLE e aparece no título da janela do navegador). O corpo do documento, delimitado pelas tags <BODY> e </BODY>, destina-se ao conteúdo da página. 1.4.1 Textos 1.4.1.1 Parágrafo e quebra de linha Na linguagem HTML, um parágrafo é construído com o elemento de conteúdo P (Paragraph). Exemplo de código utilizando elemento P: <P>O navegador, ao apresentar uma página HTML, ignora o formato com que o código original da página foi escrito - ou seja, espaços em branco, linhas quebradas com a tecla ENTER, ou mesmo linhas em branco, são formatações ignoradas.</P> <P>O elemento P é utilizado para construir parágrafos. Sempre que sua etiqueta inicial aparecer, um novo parágrafo será construído - o texto prossegue na segunda linha após o final do parágrafo anterior (uma linha em branco é apresentada entre os parágrafos).</P> <P>Mesmo que a etiqueta inicial apareça no meio <P>de uma linha contínua (do código original), um novo parágrafo será criado naquele ponto.</P> Resultado: O navegador, ao apresentar uma página HTML, ignora o formato com que o código original da página foi escrito - ou seja, espaços em branco, linhas quebradas com a tecla ENTER, ou mesmo linhas em branco, são formatações ignoradas.
  12. 12. ______________________________________________________________________________________________ Curso Técnico em Informática 12 Criação de sites O elemento P é utilizado para construir parágrafos. Sempre que sua etiqueta inicial aparecer, um novo parágrafo será construído - o texto prossegue na segunda linha após o final do parágrafo anterior (uma linha em branco é apresentada entre os parágrafos). Mesmo que a etiqueta inicial apareça no meio de uma linha contínua (do código original), um novo parágrafo será criado naquele ponto. Para forçar uma quebra de linha dentro do parágrafo, utilize o elemento vazio BR (BReak). Ele também pode ser utilizado para construir linhas em branco, basta adicionar várias tags <BR> consecutivas entre um parágrafo e outro. Exemplo de código utilizando o elemento BR: <P>Utilize o elemento P para organizar o texto em diversos parágrafos. Um parágrafo define um bloco de texto contínuo.</P> <P> Utilize o elemento BR para forçar a quebra <BR> das linhas <BR> de um mesmo <BR> parágrafo. </P> Resultado: Utilize o elemento P para organizar o texto em diversos parágrafos. Um parágrafo define um blo- co de texto contínuo. Utilize o elemento BR para forçar a quebra das linhas de um mesmo parágrafo. 1.4.1.2 Atributo align O atributo align (alinhamento) especifica a disposição do texto dentro do parágrafo. Exemplo de código utilizando alinhamento de parágrafo: <P align="center"> AUTOPSICOGRAFIA<BR> (Fernando Pessoa) </P> <P align="left"> O poeta é um fingidor.<BR> Finge tão completamente<BR> Que chega a fingir que é dor<BR> A dor que deveras sente. </P> <P align="center"> E os que lêem o que escreve,<BR> Na dor lida sentem bem,<BR> Não as duas que ele teve,<BR> Mas só a que eles não têm. </P> <P align="right">
  13. 13. ______________________________________________________________________________________________ Curso Técnico em Informática 13 Criação de sites E assim nas calhas de roda<BR> Gira, a entreter a razão,<BR> Esse comboio de corda<BR> Que se chama coração. </P> <HR> <P align="justify">Há 61 anos morria, em Lisboa, Fernando Pessoa, cuja obra, por sua complexidade e beleza, deu novo sentido e novo peso à literatura de língua portuguesa. Falar desse poeta e dessa obra equivale a mergulhar num atordoante labirinto de espelhos. O que é previsível, quando se lê o que ele mesmo disse em carta a João Gaspar Simões: "O estudo a meu respeito, que peca só por se basear, como verdadeiros, em dados que são falsos por eu, artisticamente, não saber senão mentir" (...) <P align="right"> (Fragmento do artigo "A Razão Poética", de Ferreira Gullar.<BR> Folha de São Paulo, Caderno Mais!, 10 nov. 1996) </P> Resultado: AUTOPSICOGRAFIA (Fernando Pessoa) O poeta é um fingidor. Finge tão completamente Que chega a fingir que é dor A dor que deveras sente. E os que lêem o que escreve, Na dor lida sentem bem, Não as duas que ele teve, Mas só a que eles não têm. E assim nas calhas de roda Gira, a entreter a razão, Esse comboio de corda Que se chama coração. Há 61 anos morria, em Lisboa, Fernando Pessoa, cuja obra, por sua complexidade e beleza, deu novo sentido e novo peso à literatura de língua portuguesa. Falar desse poeta e dessa obra equi- vale a mergulhar num atordoante labirinto de espelhos. O que é previsível, quando se lê o que ele mesmo disse em carta a João Gaspar Simões: "O estudo a meu respeito, que peca só por se ba- sear, como verdadeiros, em dados que são falsos por eu, artisticamente, não saber senão mentir" (...) (Fragmento do artigo "A Razão Poética", de Ferreira Gullar. Folha de São Paulo, Caderno Mais!, 10 nov. 1996)
  14. 14. ______________________________________________________________________________________________ Curso Técnico em Informática 14 Criação de sites Conforme ilustrado no exemplo acima, a linguagem HTML permite quatro possíveis valores para o atributo align: left (à esquerda), center (centralizado), right (à direita) e justify (justificado). Se o atributo align não for especificado na tag inicial do elemento P, o parágrafo é alinhado à esquerda (valor padrão). Atributos do elemento P para alinhamento: align= "left" (à esquerda) "center" (centralizado) "right" (à direita) "justify" (justificado) 1.4.1.3 Texto pré-formatado O texto pré-formatado, construído com o elemento PRE, apresenta o texto exatamente como digitado no código original da página HTML - ao contrário do que ocorre com o elemento P (parágrafo) que ignora espaços em branco e as quebras de linha. A vantagem de se utilizar o elemento PRE é que a formatação do texto se torna bastante simples; a desvantagem é que se torna simples demais. Como o texto é apresentado exatamente como digitado, ignora-se o tamanho da janela em que o texto é visualizado. Experimente redi- mensionar a janela em que o exemplo acima é visualizado. Se a janela for menor do que o espa- ço necessário para apresentar o texto pré-formatado, o texto ficará parcialmente oculto (aparece barra de rolagem horizontal); se a janela for muito grande, o texto poderá ficar com um enquadra- do indesejável. Quando o texto é formatado com os outros elementos da linguagem HTML (sem utilizar o elemento PRE), é possível levar em consideração o tamanho da janela - desta forma, quando a janela for redimensionada, o texto será automaticamente reajustado.
  15. 15. ______________________________________________________________________________________________ Curso Técnico em Informática 15 Criação de sites Exemplo de código utilizando texto pré-formatado: <PRE> AUTOPSICOGRAFIA (Fernando Pessoa) O poeta é um fingidor. Finge tão completamente Que chega a fingir que é dor A dor que deveras sente. E os que lêem o que escreve, Na dor lida sentem bem, Não as duas que ele teve, Mas só a que eles não têm. E assim nas calhas de roda Gira, a entreter a razão, Esse comboio de corda Que se chama coração. </PRE> Resultado: AUTOPSICOGRAFIA (Fernando Pessoa) O poeta é um fingidor. Finge tão completamente Que chega a fingir que é dor A dor que deveras sente. E os que lêem o que escreve, Na dor lida sentem bem, Não as duas que ele teve, Mas só a que eles não têm. E assim nas calhas de roda Gira, a entreter a razão, Esse comboio de corda Que se chama coração. 1.4.1.4 Cabeçalho e linha horizontal 1.4.1.4.1 Cabeçalho Um texto geralmente é organizado em capítulos, seções, tópicos etc. O elemento H (Hea- ding = cabeçalho) pode ser utilizado para construir os cabeçalhos das seções de um texto. Exis- tem seis níveis de cabeçalhos, de H1 (o primeiro e mais importante nível) a H6 (o último e menos importante). O cabeçalho, assim como o parágrafo, também admite o atributo align.
  16. 16. ______________________________________________________________________________________________ Curso Técnico em Informática 16 Criação de sites Exemplo de código utilizando cabeçalho: <H1>Cabeçalho H1</H1> <H2>Cabeçalho H2</H2> <H3 align="center">Cabeçalho H3</H3> <H4>Cabeçalho H4</H4> <H5 align="right">Cabeçalho H5</H5> <H6>Cabeçalho H6</H6> Resultado: Cabeçalho H1 Cabeçalho H2 Cabeçalho H3 Cabeçalho H4 Cabeçalho H5 Cabeçalho H6 1.4.1.4.2 Linha horizontal O elemento HR (Horizontal Rule) insere uma linha horizontal. Seu uso é indicado para criar uma divisão na página, separando-a em tópicos e assuntos relacionados. Exemplo de código utilizando o elemento HR: <H1 align="center">Heterônimos de Fernando Pessoa</H1> <HR> <P>Fernando Pessoa projetou personagens para pensar e escrever. Entre os principais heterônimos: Ricardo Reis, Álvaro de Campos, e Alberto Caeiro.</P> <P> "Se as coisas são estilhaços<BR> Do saber do universo,<BR> Seja eu os meus pedaços,<BR> Impreciso e diverso.<BR> Eles foram e não foram". </P> <P>(Fernando Pessoa)</P> Resultado: Heterônimos de Fernando Pessoa
  17. 17. ______________________________________________________________________________________________ Curso Técnico em Informática 17 Criação de sites Fernando Pessoa projetou personagens para pensar e escrever. Entre os principais heterônimos: Ricardo Reis, Álvaro de Campos, e Alberto Caeiro. "Se as coisas são estilhaços Do saber do universo, Seja eu os meus pedaços, Impreciso e diverso. Eles foram e não foram". (Fernando Pessoa) 1.4.1.5 Formatação de texto (estilo físico x estilo lógico) Existem vários elementos para a formatação do texto: B Negrito (Bold) I Itálico U Sublinhado (Underlined) STRIKE Riscado SUP . Sobrescrito SUB . Subscrito BIG Grande SMALL Pequeno TT Fonte Monoespaçada (TeleType text) Todos estes elementos são do tipo "elemento de conteúdo" - ou seja, é preciso especificar a tag inicial e tag final para marcar o início e o fim da formatação. As formatações podem ser utilizadas em conjunto. Por exemplo, para obter um texto formatado em negrito e em itálico: <B><I>...texto...</I></B> Observe que o elemento I (itálico) encontra-se aninhado pelo elemento B (negrito). Exemplo de código utilizando os elementos de formatação de texto: <P> Para ser <BIG>grande</BIG>, sê inteiro: nada<BR> Teu exagera ou <STRI- KE>exclui</STRIKE>.<BR> <B><I>Sê todo em cada coisa</I></B>. Põe quanto és<BR> No <SMALL>mínimo</SMALL> que fazes.<BR> Assim em cada lago a lua toda<BR> Brilha, porque <SUP>alta</SUP> vive. </P>
  18. 18. ______________________________________________________________________________________________ Curso Técnico em Informática 18 Criação de sites <P align="right"> <TT>(Do poema "Para Ser Grande" - Ricardo Reis)</TT> </P> Resultado: Para ser grande, sê inteiro: nada Teu exagera ou exclui. Sê todo em cada coisa. Põe quanto és No mínimo que fazes. Assim em cada lago a lua toda Brilha, porque alta vive. (Do poema "Para Ser Grande" - Ricardo Reis) Os elementos acima são conhecidos como estilos físicos pois determinam o aspecto físico do texto, a aparência das letras. Os estilos lógicos (ou "elementos de frase"), por sua vez, relacio- nam-se com a "lógica da informação", com o tipo de informação que um determinado fragmento de texto representa. Elementos de formatação de texto estilo lógico: EM Ênfase (EMphasis) STRONG Ênfase forte CITE Citação ou referência DFN Definição SAMP Exemplo (SAMPle) CODE Fragmento de código (de programa de computador) KBD Entrada de texto pelo teclado (KeyBorD) VAR Instância de variável (VARiable) ABBR Abreviação ACRONYM Acrônimo Exemplo de código utilizando os elementos de formatação de texto do estilo lógico: <P> Há 61 anos morria, em Lisboa, Fernando Pessoa, cuja obra, por sua complexidade e beleza, deu novo sentido e novo peso à literatura de
  19. 19. ______________________________________________________________________________________________ Curso Técnico em Informática 19 Criação de sites língua portuguesa. Falar desse poeta e dessa obra equivale a mergulhar num atordoante labirinto de espelhos. O que é previsível, quando se lê o que ele mesmo disse em carta a João Gaspar Simões: <CITE>"O estudo a meu respeito, que peca só por se basear, como verdadeiros, em dados que são falsos por eu, artisticamente, não saber senão mentir"</CITE>(...) <P align="right"> (Fragmento do artigo "A Razão Poética", de Ferreira Gullar.<BR> Folha de São Paulo, Caderno Mais!, 10 nov. 1996) </P> Resultado: Há 61 anos morria, em Lisboa, Fernando Pessoa, cuja obra, por sua complexidade e beleza, deu novo sentido e novo peso à literatura de língua portuguesa. Falar desse poeta e dessa obra equi- vale a mergulhar num atordoante labirinto de espelhos. O que é previsível, quando se lê o que ele mesmo disse em carta a João Gaspar Simões: "O estudo a meu respeito, que peca só por se ba- sear, como verdadeiros, em dados que são falsos por eu, artisticamente, não saber senão men- tir"(...) (Fragmento do artigo "A Razão Poética", de Ferreira Gullar. Folha de São Paulo, Caderno Mais!, 10 nov. 1996) No exemplo acima, a frase "O estudo a meu respeito, que peca só por se basear, como verdadei- ros, em dados que são falsos por eu, artisticamente, não saber senão mentir" é uma citação den- tro do artigo de Ferreira Gullar. O elemento CITE (citação) foi utilizado para diferenciar esta cita- ção do resto do texto. Observe que a formatação, neste caso, relaciona-se com o tipo de informa- ção (citação), e não necessariamente com a aparência do texto. 1.4.1.6 Fonte O elemento FONT possibilita modificar o tipo, o tamanho e a cor da fonte. 1.4.1.6.1 Face O atributo face (do elemento FONT) especifica o nome da fonte a ser utilizada para escrever o texto - determina a tipografia do texto; a forma das letras. Observe alguns exemplos:
  20. 20. ______________________________________________________________________________________________ Curso Técnico em Informática 20 Criação de sites O problema em utilizar um determinado tipo de fonte é que ela poderá não existir no computador de quem irá ler a página HTML. Para minimizar este problema, especifica-se várias fontes (nomes alternativos) no atributo face. Se no computador em que a página estiver sendo visualizada não existir a primeira fonte, será utilizada a segunda fonte; se a segunda fonte não existir, será utilizada a terceira fonte; e assim por diante. <FONT face="Verdana, Arial">...texto...</FONT> Se não for encontrada nenhuma das fontes especificadas neste atributo, será utilizada a fonte padrão do navegador (em geral, "Times New Roman"). Dica: Utilize fontes sem serifa Serifa é aquele pequeno traço que pode ser identificado nas extremidades de alguns tipos de fon- te. Serifas são bonitas no papel pois são impressas com alta resolução. Na tela do computador, que não possui uma resolução muito alta, as fontes mais quadradas e sem serifa, em geral, são mais nítidas e, por isto, mais adequadas. Uma boa dica é utilizar a fonte "Verdana" ou "Arial", pois não possuem serifa e estão presentes na maioria dos computadores. 1.4.1.6.2 Size O atributo size especifica o tamanho da fonte. A fonte pode ter tamanho entre 1 (menor tamanho) e 7 (maior tamanho). Este atributo pode ser especificado de forma absoluta (p. ex.: <FONT size="3">), ou de forma relativa (p. ex.: <FONT size="+2">). Exemplo de código utilizando o atributo size: <P>Tamanho de fonte padrão</P> <P> <FONT size="1">Tamanho de fonte 1</FONT><BR> <FONT size="2">Tamanho de fonte 2</FONT><BR> <FONT size="3">Tamanho de fonte 3</FONT><BR> <FONT size="4">Tamanho de fonte 4</FONT><BR> <FONT size="5">Tamanho de fonte 5</FONT><BR> <FONT size="6">Tamanho de fonte 6</FONT><BR> <FONT size="7">Tamanho de fonte 7</FONT> </P> <P> <FONT size="3">Tamanho de fonte 3, <FONT size="+2">agora acrescido de 2,</FONT> <FONT size="-1">reduzido de 1,</FONT> e normal novamente. </FONT> </P>
  21. 21. ______________________________________________________________________________________________ Curso Técnico em Informática 21 Criação de sites Resultado: Tamanho de fonte padrão Tamanho de fonte 1 Tamanho de fonte 2 Tamanho de fonte 3 Tamanho de fonte 4 Tamanho de fonte 5 Tamanho de fonte 6 Tamanho de fonte 7 Tamanho de fonte 3, agora acrescido de 2, reduzido de 1, e normal novamente. 1.4.1.6.3 Color O atributo color especifica a cor da fonte. O valor deste atributo pode ser especificado através do nome da cor ou através de um código. Todos os três atributos do elemento FONT (face, size e color) podem ser usados concomi- tantemente. face=nome_fonte Nome da fonte. size=número Tamanho da fonte; valor entre 1 e 7. color=cor Cor da fonte. Exemplo de código utilizando o atributo color: <P> <B> <FONT color="black">Preto</FONT><BR> <FONT color="gray">Cinza- escuro</FONT><BR> <FONT color="silver">Cinza-Claro</FONT><BR> <FONT co- lor="white">Branco</FONT><BR> <FONT color="red">Vermelho</FONT><BR> <FONT co- lor="maroon">Vermelho-escuro</FONT><BR> <FONT color="yellow">Amarelo</FONT><BR> <FONT co- lor="olive">Amarelo-escuro</FONT><BR> <FONT color="lime">Verde</FONT><BR> <FONT color="green">Verde- escuro</FONT><BR> <FONT color="aqua">Ciano</FONT><BR> <FONT color="teal">Ciano- escuro</FONT><BR> <FONT color="blue">Azul</FONT><BR> <FONT color="navy">Azul- escuro</FONT><BR>
  22. 22. ______________________________________________________________________________________________ Curso Técnico em Informática 22 Criação de sites <FONT color="fuchsia">Magenta</FONT><BR> <FONT co- lor="purple">Magenta-escuro</P></FONT><BR> Resultado: Preto Cinza-escuro Cinza-Claro Branco Vermelho Vermelho-escuro Amarelo Amarelo-escuro Verde Verde-escuro Ciano Ciano-escuro Azul Azul-escuro Magenta Magenta-escuro 1.4.1.7 Cor Uma cor pode ser especificada através de seu nome, ou de seu código, conforme ilustra a imagem abaixo. Exemplo de código utilizando a especificação da cor para o fundo da página e outra para a fonte do texto. Observe a especificação através do nome da cor e através de seu código. <HTML> <BODY bgcolor="teal"> <P>
  23. 23. ______________________________________________________________________________________________ Curso Técnico em Informática 23 Criação de sites Para especificar o valor da cor,<BR> <FONT color="lime">utilize o no- me</FONT><BR> <FONT color="#00FF00">ou o código da cor.</FONT> </P> </BODY> </HTML>
  24. 24. ______________________________________________________________________________________________ Curso Técnico em Informática 24 Criação de sites Resultado: Utilizar o nome da cor é mais compreensível do que utilizar o seu código. Contudo, ao utilizar o nome da cor, a escolha fica restrita aos 16 nomes de cores predefinidos na linguagem HTML. Com o uso de código, é possível escolher uma entre 16 milhões de cores (mais precisamente, 16.777.216 cores). O código da cor em HTML é composto pelo símbolo "#" seguido da intensidade (entre 0 e 255) de cada uma das cores do sistema RGB. A intensidade da cor não é representada na base decimal, mas sim, na base hexadecimal (o que resulta num número de 2 dígitos). 1.4.1.8 Alinhamento e recuo 1.4.1.8.1 Alinhamento (DIV) O elemento DIV define o alinhamento para vários blocos de elementos: parágrafos, listas, tabelas, imagens etc. Por exemplo, utilizando o elemento DIV não é necessário especificar o alinhamento dentro de cada parágrafo. O tipo de alinhamento é especificado no atributo align. Exemplo de código utilizando DIV: <DIV align="center"> <P> AUTOPSICOGRAFIA<BR> (Fernando Pessoa) </P> <P> O poeta é um fingidor.<BR> Finge tão completamente<BR> Que chega a fingir que é dor<BR> A dor que deveras sente. </P> <P> E os que lêem o que escreve,<BR> Na dor lida sentem bem,<BR> Não as duas que ele teve,<BR> Mas só a que eles não têm. </P> <P> E assim nas calhas de roda<BR> Gira, a entreter a razão,<BR> Esse comboio de corda<BR> Que se chama coração. </P> </DIV> Resultado: AUTOPSICOGRAFIA (Fernando Pessoa) Para especificar o valor da cor, utilize o nome ou o código da cor.
  25. 25. ______________________________________________________________________________________________ Curso Técnico em Informática 25 Criação de sites O poeta é um fingidor. Finge tão completamente Que chega a fingir que é dor A dor que deveras sente. E os que lêem o que escreve, Na dor lida sentem bem, Não as duas que ele teve, Mas só a que eles não têm. E assim nas calhas de roda Gira, a entreter a razão, Esse comboio de corda Que se chama coração. 1.4.1.8.2 Recuo (BLOCKQUOTE) O elemento BLOCKQUOTE define um recuo (afastamento da margem) de blocos de elementos. Exemplo de código utilizando o recuo blockquote: <P> AUTOPSICOGRAFIA<BR> (Fernando Pessoa) </P> <BLOCKQUOTE> <P> O poeta é um fingidor.<BR> Finge tão completamente<BR> Que chega a fingir que é dor<BR> A dor que deveras sente. </P> <P> E os que lêem o que escreve,<BR> Na dor lida sentem bem,<BR> Não as duas que ele teve,<BR> Mas só a que eles não têm. </P> <P> E assim nas calhas de roda<BR> Gira, a entreter a razão,<BR> Esse comboio de corda<BR> Que se chama coração. </P> </BLOCKQUOTE> Resultado: AUTOPSICOGRAFIA (Fernando Pessoa) O poeta é um fingidor. Finge tão completamente Que chega a fingir que é dor A dor que deveras sente.
  26. 26. ______________________________________________________________________________________________ Curso Técnico em Informática 26 Criação de sites E os que lêem o que escreve, Na dor lida sentem bem, Não as duas que ele teve, Mas só a que eles não têm. E assim nas calhas de roda Gira, a entreter a razão, Esse comboio de corda Que se chama coração. 1.4.1.9 Caracteres especiais e comentários 1.4.1.9.1 Caracteres especiais Observe que no código a seguir existem certos símbolos (como "&nbsp;") que são convertidos em caracteres quando a página é visualizada: <P>&quot;Etiquetas da linguagem HTML&quot;</P> <P> &nbsp;&nbsp;&nbsp; &lt;P&gt; par&aacute;grafo<BR> &nbsp;&nbsp;&nbsp; &lt;BR&gt; quebra de linha<BR> &nbsp;&nbsp;&nbsp; &lt;PRE&gt; par&aacute;grafo pr&eacute;-formatado<BR> &nbsp;&nbsp;&nbsp; &lt;H1&gt; cabe&ccedil;alho ... </P> Estes "símbolos estranhos" são os caracteres especiais. São precedidos pelo símbolo & ("e" comercial) e terminados pelo símbolo; (ponto-e-vírgula). Os caracteres especiais são úteis para incluir espaços em branco e alguns símbolos que fazem parte da sintaxe da linguagem HTML: < &lt; > &gt; & &amp; " &quot; &nbsp; (espaço em branco) Caracteres acentuados também podem ser escritos através de símbolos. Se o computador estiver configurado para o idioma Português, estes caracteres podem ser digitados diretamente através do teclado e serão vistos normalmente pelo navegador. A necessidade de utilizar caracteres especiais surge quando o público alvo da página não tiver o computador configurado para o idioma Português (por exemplo, uma página a ser consultada internacionalmente)
  27. 27. ______________________________________________________________________________________________ Curso Técnico em Informática 27 Criação de sites Existe uma lógica para a elaboração destes símbolos que representam letras acentuadas. Cada acento possui uma abreviatura: acute (acento agudo), tilde (acento til), circ (acento circunflêxo), grave (acento grave). O caractere especial é obtido pela composição do símbolo "&", mais a vogal a ser acentuada (em maiúsculo ou minúsculo), mais a abreviação do acento, mais o símbolo ";" (ponto-e-vírgula). 1.4.1.9.2 Comentários Um comentário começa com o símbolo "<!--" e termina com "-->"; qualquer informação contida entre estes dois símbolos não será apresentada pelo navegador. Exemplo de código utilizando comentários: <!-- Exemplo de comentário --> <P> Comentários servem para documentar o código, registrar lembretes, observações etc. Comentários <!-- como este --> não são vistos quando a página é apresentada pelo navegador. </P> Resultado: Comentários servem para documentar o código, registrar lembretes, observações etc. Comentá- rios não são vistos quando a página é apresentada pelo navegador. 1.4.2 Links Links são encontrados em quase todas as páginas da web. As hiperligações permitem aos usuários clicarem em um link e serem direcionados para outra página. Em HTML, os links são definidos com a tag <a> : <a href="url">Texto do link </a>
  28. 28. ______________________________________________________________________________________________ Curso Técnico em Informática 28 Criação de sites O atributo href especifica o endereço de destino do link. O texto do link é a parte de texto que ficará visível para que o usuário clique em cima. Clicando no texto do link o usuário será direcio- nado para o endereço especificado. 1.4.2.1 O atributo target O atributo de target (destino) especifica onde abrir o documento vinculado. O atributo de destino pode ter um dos seguintes valores:  _blank - Abre o documento em uma nova janela ou guia.  _self - Abre o documento na mesma janela / guia onde ele foi clicado (isso é padrão).  _parent - Abre o documento no quadro principal.  _top - Abre o documento no topo da janela.  Framename - Abre o documento em frame com nome. Este exemplo abrirá o documento em uma nova janela / guia do navegador: <a href="exemplo.html” target="_blank">Olá visitante!</a> 1.4.2.2 Imagem como Link É comum usar imagens como links: Exemplo de código utilizando imagem como link: <a href="exemplo.html"> <img src="ola.gif" alt="olá" style="width: 42px; height: 42px; border: 0;"> </a> 1.4.2.3 Criar um marcador Marcadores HTML são usados para permitir que os leitores saltem para partes específicas de uma página da Web. Marcadores podem ser úteis se sua página da web for muito longa. Para criar um marca- dor, primeiro você deve criar o marcador e, em seguida, adicionar um link para ele. Quando o link é clicado, a página rola para o local com o marcador. Primeiro, crie um marcador com o atributo id: <h2 id="tipo">tipo de seção </h2> Em seguida, adicione um link para o marcador, a partir de dentro da mesma página: <a href="#tipo">tipo de seção </a> 1.4.3 Imagens 1.4.3.1 Imagem no documento HTML Para inserir uma imagem no documento HTML, é primeiro necessário que a imagem já exista no computador. No computador, uma imagem é um arquivo de um tipo específico. Uma vez que a imagem já existe, para incluí-la no documento HTML utiliza-se o elemento IMG. O valor do atributo src (source = origem) aponta para o endereço URI da imagem. <IMG src="uri">
  29. 29. ______________________________________________________________________________________________ Curso Técnico em Informática 29 Criação de sites Exemplos de código inserindo imagem no documento HTML: <P align=center> <IMG src="poesia.gif"><BR> Poesia de Ricardo Reis (heterônimo de Fernando Pessoa) </P> Resultado: Poesia de Ricardo Reis (heterônimo de Fernando Pessoa) 1.4.3.2 Tipos de imagem No computador, as imagens são armazenadas em arquivos de um tipo específico. Ca- da tipo de imagem (ou formato de imagem) possui características próprias relacionadas ao nú- mero de cores, ao tamanho do arquivo, entre outras características. Exemplos de tipos de imagem: BMP, GIF, JPEG, TIFF, PCX etc. Nem todos os tipos de imagem podem ser visualizados pelos navegadores - em geral, as imagens para Web são do tipo GIF ou JPEG. O formato GIF é mais adequado para imagens níti- das e com poucas cores (logotipos, ícones, esquemas etc.) enquanto o formato JPEG é mais adequado para imagens com muitas cores e sem muita nitidez (geralmente, fotografias). O atributo src (resource) aponta para o endereço URI do arquivo de imagem. Este é o úni- co atributo obrigatório do elemento IMG - não há imagem sem especificar este atributo. O atribu- to border especifica a espessura da borda que irá envolver a imagem. O atributo alt (alternate text) especifica o texto que é apresentado quando o usuário fica com o mouse parado sobre a imagem.
  30. 30. ______________________________________________________________________________________________ Curso Técnico em Informática 30 Criação de sites 1.4.3.3.2 Width, height Os atributos width e height especificam a largura e a altura da imagem (valores em pixels). Quando não são especificados, a imagem é apresentada com o seu tamanho original. Exemplo de código utilizando os atributos width e height: <P> <IMG src="rosa.gif"> <IMG src="rosa.gif" width="113" height="220"> <IMG src="rosa.gif" width="77" height="121"> <IMG src="rosa.gif" width="48" height="75"> <IMG src="rosa.gif" width="77" height="36"> </P> Resultado: 1.4.3.3.3 Align O atributo align especifica o alinhamento da imagem. Quando align="top", a imagem fica alinhada no topo da linha em que é inserida; quando align="middle", a imagem fica alinhada no meio da linha em que é inserida; e quando align="bottom", fica alinhada na base da linha.
  31. 31. ______________________________________________________________________________________________ Curso Técnico em Informática 31 Criação de sites Observe o esquema: Dois outros valores também podem ser especificados para o atributo align: "left" e "right". Estes dois valores modificam o comportamento da imagem. Em geral, a imagem é inserida na linha em que o elemento IMG é declarado. Contudo, se um destes dois valores for especificado ("left" ou "right"), a imagem ficará flutuando na margem (esquerda ou direita) da página. Observe o esque- ma: Todos os atributos do elemento IMG podem ser especificados ao mesmo tempo - o que possibilita maior controle sobre a apresentação da imagem. Exemplo de código utilizando todos os elementos do atributo IMG: <H1 align="center">Fernando Pessoa</H1> <P>1888 - Nasce em Lisboa, em 13 de junho, Fernando Antônio Nogueira Pessoa.</P> <P> <IMG src="fp1908.jpg" border="1" align="top" width="85" height="100" alt="1908"> 1906 - Matricula-se no Curso Superior de Letras. </P> <P>1907 - Abandona o curso.</P> <P> <IMG src="fp1914.jpg" border="1" align="middle" width="85" height="100" alt="1914"> 1914 - Escreve poemas dos três heterônimos. </P>
  32. 32. ______________________________________________________________________________________________ Curso Técnico em Informática 32 Criação de sites <P>1934 - "Mensagem", seu único livro publicado.</P> <P> <IMG src="fp1935.jpg" border="1" align="top" width="85" height="100" alt="1935"> 1935 - Em 30 de novembro, morre em Lisboa, aos 47 anos </P> <P> <IMG src="rosa.gif" border=0 align="left" width="77" height="121" alt="Circunda-te de rosas..."> "(...)Morre! Tudo é tão pouco!<BR> Nada se sabe, tudo se imagina.<BR> Circunda-te de rosas, ama, bebe<BR> E cala. O mais é nada." <P> <P>(Ricardo Reis)</P> <P> <IMG src="fpcaricatura.gif" border=0 align="right" width="80" height="100" alt="Caricatura, por Almada Negreiros"> "Tenho pensamentos que, se pudesse revelá-los e fazê-los viver, acrescentariam nova luminosidade às estrelas, nova beleza ao mundo e maior amor ao coração dos homens." </P> <P align="right">(Fernando Pessoa, em "O Eu Profundo")</P> Resultado: Fernando Pessoa 1888 - Nasce em Lisboa, em 13 de junho, Fernando Antônio Nogueira Pessoa. 1906 - Matricula-se no Curso Superior de Letras. 1907 - Abandona o curso. 1914 - Escreve poemas dos três heterônimos. 1934 - "Mensagem", seu único livro publicado.
  33. 33. ______________________________________________________________________________________________ Curso Técnico em Informática 33 Criação de sites 1935 - Em 30 de novembro, morre em Lisboa, aos 47 anos "(...)Morre! Tudo é tão pouco! Nada se sabe, tudo se imagina. Circunda-te de rosas, ama, bebe E cala. O mais é nada." (Ricardo Reis) "Tenho pensamentos que, se pudesse revelá-los e fazê-los viver, acrescentariam nova luminosidade às estrelas, nova beleza ao mundo e maior amor ao coração dos homens." (Fernando Pessoa, em "O Eu Profundo") 1.4.3.4 Imagem de fundo Para adicionar uma imagem de fundo, basta especificar na tag inicial do elemento BODY, o atributo background contendo o endereço URI da imagem. Exemplo de código utilizando o atributo background: <HTML> <HEAD> <TITLE>"Segue o teu destino" - Ricardo Reis</TITLE> </HEAD> <BODY background="fundo.gif"> <P align="right"> Segue o teu destino<BR> Rega as tuas plantas,<BR> Ama as tuas ro- sas.<BR> O resto é sombra<BR> De árvores alheias. </P> <P align="right">(Ricardo Reis)</P> <P align="right"> <IMG src="rosa.gif" width="77" height="121"> </P> </BODY> </HTML> 1.4.4 Vídeos O atributo controls adiciona controles de vídeo, como reprodução, pausa e volume. É sempre bom especificar a altura e a largura não estiverem definidas. O elemento <source> permite que você especifique arquivos de vídeo alternativos que o navegador pode escolher. O navegador usará o primeiro formato reconhecido. Para mostrar um vídeo em HTML, use o elemento <video>.
  34. 34. ______________________________________________________________________________________________ Curso Técnico em Informática 34 Criação de sites Exemplo de código utilizando o elemento vídeo: <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Olá </video> Para iniciar um vídeo automaticamente utiliza-se o atributo autoplay. Exemplo de código utilizando o elemento autoplay: <video width="320" height="240" autoplay> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Olá </video> Tags de vídeo: <video> Define um vídeo. <source> Define vários recursos de mídia como <video> e <audio>. <track> Define faixas de texto em players de mídia. 1.4.5 Listas Listas são mecanismos úteis para organizar informações. Este capítulo objetiva discutir os três principais tipos de listas construídos com a linguagem HTML: lista ordenada, lista não- ordenada e lista de definição. 1.4.5.1 Lista ordenada e lista não-ordenada A principal diferença entre a lista ordenada e a lista não-ordenada está na maneira com que os itens de cada lista são apresentados - a lista ordenada enumera os elementos; a lista não-ordenada coloca marcadores antes de cada elemento. Exemplo de código de uma lista ordenada: <OL> <LI>Item número um.</LI> <LI>Item número dois.</LI> <LI>Item número três.</LI> </OL>
  35. 35. ______________________________________________________________________________________________ Curso Técnico em Informática 35 Criação de sites Resultado: 1. Item número um. 2. Item número dois. 3. Item número três. Uma lista ordenada é delimitada pelas tags <OL> e </OL> (Ordered List). Cada item da lista é delimitado pelas tags <LI> e </LI> (List Item). Exemplo de código de uma lista não ordenada: <UL> <LI>Primeiro item.</LI> <LI>Segundo item.</LI> <LI>Terceiro item.</LI> </UL> Resultado:  Primeiro item.  Segundo item.  Terceiro item. A estrutura da lista não-ordenada é semelhante à da lista ordenada - porém, ao invés de ser construída com o elemento OL, é construída com o elemento UL (Unordered List). 1.4.5.2 Atributos do elemento OL A aparência de uma lista ordenada pode ser modificada com o uso dos atributos type e start. O atributo type é utilizado para modificar o estilo da numeração (os números que aparecem à esquerda de cada item). Os seguintes valores são aceitos: valor Estilo de numeração 1 Algarismos arábicos 1, 2, 3, 4, ... A Letras em caixa altas A, B, C, D, ... a Letras maiúsculas a, b, c, d, ... V Algarismos romanos em letra maiúscula I, II, III, IV, ... i Algarismos romanos em letra minúscula i, ii, iii, iv, ... O atributo start possibilita que a lista comece em qualquer valor e não apenas a partir da primeira unidade de sua numeração.
  36. 36. ______________________________________________________________________________________________ Curso Técnico em Informática 36 Criação de sites O quadro abaixo resume os principais atributos do elemento OL: type=estilo_numeração Modifica o estilo da numeração. Valores = "1" (1,2,3,4 ...) "A" (A,B,C,D ...) "a" (a,b,c,d ...) "V" (I,II,III,IV...) "v" (i,ii,iii,iv...) start=número Número inicial do primeiro elemento da lista Exemplo de código utilizando atributos do elemento OL: <OL type="i" start=3> <LI>Item número um.</LI> <LI>Item número dois.</LI> <LI>Item número três.</LI> </OL> Resultado: iii. Item número um. iv. Item número dois. v. Item número três. 1.4.5.3 Atributos do elemento UL A aparência de uma lista não-ordenada pode ser modificada com o atributo type, utilizado para especificar um tipo de marcador para os itens da lista. Os seguintes valores são aceitos: valor tipo de marcador disc Círculo cheio  circle Círculo vazio o
  37. 37. ______________________________________________________________________________________________ Curso Técnico em Informática 37 Criação de sites square Quadrados cheios 
  38. 38. ______________________________________________________________________________________________ Curso Técnico em Informática 38 Criação de sites O quadro abaixo resume este atributo: type=estilo_de_marcador Estilo do marcador dos itens da lista. Valores="disc" "circle" "square" Exemplo de código utilizando os atributos do elemento UL: <UL type="square"> <LI>Item número um.</LI> <LI>Item número dois.</LI> <LI>Item número três.</LI> </UL> Resultado:  Item número um.  Item número dois.  Item número três. 1.4.5.4 Lista de definição A lista de definição foi originalmente concebida para possibilitar uma listagem de termos e definições. Glossários e catálogos de produtos são típicos exemplos deste tipo de lista. Uma lista de definição é construída com o elemento DL (Definition List). Cada termo de definição é cons- truído com o elemento DT (Definition Term) e cada descrição de definição é construída com o elemento DD (Definition Description). Exemplo de código utilizando lista de definição: Tipos de Listas: <DL> <DT>Lista ordenada</DT> <DD>Apresenta itens enumerados.</DD> <DT>Lista não-ordenada</DT> <DD>Apresenta itens com marcadores.</DD> <DT>Lista de definição</DT> <DD>Listagem de termos e definições.</DD> </DL> Resultado:
  39. 39. ______________________________________________________________________________________________ Curso Técnico em Informática 39 Criação de sites Tipos de Listas: Lista ordenada Apresenta itens enumerados. Lista não-ordenada Apresenta itens com marcadores. Lista de definição Listagem de termos e definições. 1.4.5.5 Aninhamento de listas É possível aninhar listas - colocar uma lista dentro de outra podendo, inclusive, misturar lis- tas ordenadas e não-ordenadas. Dependendo da estrutura de lista que se deseja construir, po- dem existir diversos níveis de aninhamento. Uma boa estratégia para aninhar listas é pensar iso- ladamente cada parte (ou nível) da lista, para depois juntar as partes (aninhar). Exemplo de código utilizando listas aninhadas: <P> <B>Sumário</B> <OL type="I"> <LI>Introdução <OL> <LI>HTML: uma linguagem para Web</LI> <LI>HTML: uma linguagem de hipertexto</LI> <LI>HTML: uma linguagem de marcação</LI> <LI>Navegadores de HTML</LI> <LI>Editores de HTML</LI> <LI>Fundamentos da linguagem HTML</LI> <LI>A estrutura do documento HTML</LI> <LI>Resumo</LI> </OL> <LI>Textos <OL> <LI>Parágrafo e quebra de linha</LI> <LI>Texto pré-formatado</LI> <LI>Cabeçalho e linha horizontal</LI> <LI>Formatação de texto</LI> <LI>Fonte</LI> <LI>Cor (da fonte e do fundo da página)</LI> <LI>Alinhamento e recuo</LI> <LI>Caracteres especiais e comentários</LI> <LI>Resumo</LI> </OL> <LI>Listas <OL>
  40. 40. ______________________________________________________________________________________________ Curso Técnico em Informática 40 Criação de sites <LI>Lista ordenada e lista não-ordenada</LI> <UL type="disc"> <LI>Atributos do elemento OL</LI> <LI>Atributo do elemento UL</LI> </UL> <LI>Lista de definição</LI> <LI>Aninhando listas</LI> <LI>Resumo</LI> </OL> <LI>... </OL> Resultado: Sumário I. Introdução 1. HTML: uma linguagem para Web 2. HTML: uma linguagem de hipertexto 3. HTML: uma linguagem de marcação 4. Navegadores de HTML 5. Editores de HTML 6. Fundamentos da linguagem HTML 7. A estrutura do documento HTML 8. Resumo II. Textos 1. Parágrafo e quebra de linha 2. Texto pré-formatado 3. Cabeçalho e linha horizontal 4. Formatação de texto 5. Fonte 6. Cor (da fonte e do fundo da página) 7. Alinhamento e recuo 8. Caracteres especiais e comentários 9. Resumo III. Listas 1. Lista ordenada e lista não-ordenada 2. Atributos do elemento OL 3. Atributo do elemento UL 4. Lista de definição 5. Aninhando listas 6. Resumo IV. ... 1.4.6 Tabelas O elemento TABLE é utilizado para marcar o início e o fim de uma tabela. Numa tabela podem ser definidas várias linhas - cada linha da tabela é construída com o elemento TR (Table
  41. 41. ______________________________________________________________________________________________ Curso Técnico em Informática 41 Criação de sites Row). Dentro de cada linha são definidas as células da tabela. Cada célula pode ser uma "célula de cabeçalho" (construída com o elemento TH - Table Header) ou uma "célula de dado" (construída com o elemento TD - Table Date). Um título, construído com o elemento CAPTION, pode estar associado à tabela para possibilitar uma breve descrição - o seu uso é opcional. Exemplo de código utilizando o elemento TABLE: <TABLE border="1"> <CAPTION>Boletim</CAPTION> <TR> <TH>Aluno</TH> <TH>Nota</TH> <TH>Situação</TH> </TR> <TR> <TD>Beltrano</TD> <TD>8.5</TD> <TD>Aprovado</TD> </TR> <TR> <TD>Ciclano</TD> <TD>4.0</TD> <TD>Reprovado</TD> </TR> <TR> <TD>Fulano</TD> <TD>9.0</TD> <TD>Aprovado</TD> </TR> </TABLE> Resultado:
  42. 42. ______________________________________________________________________________________________ Curso Técnico em Informática 42 Criação de sites  O atributo border especifica a espessura da borda ao redor da tabela.  O atributo cellpadding especifica o espaço entre a moldura da célula e seu conteúdo.  O atributo cellspacing especifica o espaço entre as células e a borda da tabela (como também o espaço das células entre si).  O atributo bgcolor especifica a cor de fundo da tabela.  O atributo valign especifica o alinhamento vertical do conteúdo da célula. Por padrão, uma tabela ocupa o espaço necessário para mostrar os dados de suas células. Ao especificar o atributo width ou height é possível modificar este comportamento (ajuste automá- tico ao conteúdo). O atributo width especifica a largura da tabela. O atributo height especifica a altura da tabela. Se os valores destes atributos são definidos em porcentagem, então o tamanho da tabela será definido em relação ao tamanho total da janela. Por exemplo, experimente redi- mensionar a janela onde o exemplo anterior é visualizado. Observe que a tabela também é redi- mensionada para ocupar 50% da largura total da janela. Observe, ainda no exemplo anterior, que a altura da tabela permanece constante em 100 pontos - o atributo height foi definido de forma absoluta (medida em pontos), independentemente do tamanho da janela. Principais atributos dos elementos TH e TD (todos os atributos são válidos para os dois elementos): bgcolor=cor Cor de fundo da célula. align=alinhamento_horizontal Alinhamento horizontal do conteúdo da célula. Valores = "left" (à esquerda) "center" (no centro) "right" (à direita) valign=alinhamento_vertical Alinhamento vertical do conteúdo da célula. Valores = "top" (no topo) "center" (no centro) "bottom" (na base) width=número Largura de célula - o número define a largura absoluta (em pontos) ou a largura relativa ao tamanho da tabela (em porcentagem). height=número Altura de célula - o número define a altura absoluta (em pontos) ou em relação à altura da tabela
  43. 43. ______________________________________________________________________________________________ Curso Técnico em Informática 43 Criação de sites (em porcentagem). colspan=número Expande a célula para ocupar um número de células à direita de sua coluna. border=número Espessura da borda da tabela (em pontos). cellspacing=número Espaço entre as células da tabela (em pontos). 1.4.6.1 Linha de tabela: TR Uma tabela, na linguagem HTML, é construída através de uma sequência de linhas onde cada linha (construída com o elemento TR - Table Row) contém uma sequência de células. Cada célula pode ser uma "célula de cabeçalho" (elemento TH - Table Header) ou uma "célula de dado" (elemento TD - Table Date). Exemplo de código utilizando o elemento TR: <table border="1"> <tr> <td>linha 1 - célula 1</td> <td>linha 1 - célula 2</td> <td>linha 1 - célula 3</td> </tr> <tr> <td>linha 2 - célula 1</td> </tr> <tr> <td>linha 3 - célula 1</td> <td>linha 3 - célula 2</td> </tr> </table> Resultado: linha 1 - célula 1 linha 1 - célula 2 linha 1 - célula 3 linha 2 - célula 1 linha 3 - célula 1 linha 3 - célula 2
  44. 44. ______________________________________________________________________________________________ Curso Técnico em Informática 44 Criação de sites Principais atributos do elemento TR: bgcolor=cor Cor de fundo das células da linha. align=alinhamento_horizontal Alinhamento horizontal do conteúdo das células da linha. Valores = "left" (à esquerda) "center" (no centro) "right" (à direita) valign=alinhamento_vertical Alinhamento vertical do conteúdo das células da linha. Valores = "top" (no topo) "center" (no centro) "bottom" (na base) 1.4.6.2 Título e legenda: CAPTION O elemento CAPTION possibilita a construção de um título ou de uma legenda para a tabela quando presente deve fornecer uma breve descrição da natureza da tabela. O atributo align especifica a posição: se align="top",o elemento CAPTION é apresentado como título da tabela; se align="bottom", o elemento CAPTION é apresentado como legenda da tabela. Atributos de CAPTION: align=alinhamento Posição do conteúdo de CAPTION: Valores = "top" (no topo = título da tabela) "bottom" (na base = legenda da tabela) Exemplo de código utilizando elementos para construção de tabelas: <DIV align="center"> <CENTER> <TABLE border="1"> <CAPTION align="top">Boletim</CAPTION> <TR> <TH>Aluno</TH> <TH>Nota</TH> <TH>Situação</TH> </TR> <TR>
  45. 45. ______________________________________________________________________________________________ Curso Técnico em Informática 45 Criação de sites <TD>Fábio</TD> <TD>9.5</TD> <TD>Aprovado</TD> </TR> <TR> <TD>Mariano</TD> <TD>9.0</TD> <TD>Aprovado</TD> </TR> </TABLE> <P> <HR> </P> <TABLE border="1"> <CAPTION align="bottom">Dados sobre as turmas do curso de HTML</CAPTION> <TR> <TH></TH> <TH>inscritos</TH> <TH>selecionados</TH> <TH>aprovados</TH> </TR> <TR> <TH>01/2000</TH> <TD>105</TD> <TD>26</TD> <TD>21</TD> </TR> <TR> <TH>03/2000</TH> <TD>97</TD> <TD>26</TD> <TD>23</TD> </TR> </TABLE> </CENTER> </DIV> Resultado: Boletim Aluno Nota Situação Fábio 9.5 Aprovado Mariano 9.0 Aprovado inscritos selecionados Aprovados 01/2000 105 26 21 03/2000 97 26 23
  46. 46. ______________________________________________________________________________________________ Curso Técnico em Informática 46 Criação de sites Dados sobre as turmas do curso de HTML 1.5 Formulários 1.5.1 Elementos do formulário 1.5.1.1 O elemento <form> O elemento HTML <form> define um formulário que é usado para coletar entrada do usuá- rio. Existem vários tipos de elementos de formulário, como campos de texto, caixas de seleção, botões de opção, botões de envio e muito mais. 1.5.1.2 O elemento <input> O elemento <input> é o elemento de formulário mais importante. O elemento <input> pode ser exibido de várias maneiras, dependendo do atributo type. Tipo Descrição <Input type = "text"> Campo de entrada de texto em uma linha. <Input type = "radio"> Botão de opção (para selecionar uma de muitas opções). <Input type = "submit"> Botão Enviar (para enviar o formulário). 1.5.1.3 O elemento <select> O elemento select permite uma ou mais opções em um menu onde cada opção é representada por um elemento option. Exemplo de código utilizando o elemento select: <select name="carros"> <option value="volvo">Volvo</option> <option value=fFord">Ford</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> Resultado:
  47. 47. ______________________________________________________________________________________________ Curso Técnico em Informática 47 Criação de sites 1.5.1.4 O elemento <option> É utilizado para criar uma opção que pode ser selecionada. Por padrão, o primeiro item na lista fica selecionado. Para definir qual o elemento deve ficar pré-selecionado, adicione o atributo selected. Exemplo de código do elemento option: <option value="fiat" selected>Fiat</option> Resultado: Fiat Enviar 1.5.1.5 O elemento <textarea> O elemento <textarea> define um campo de entrada de texto com várias linhas (uma área de texto): <textarea name="mensagem" rows="10" cols="30"> Olá mundo. </textarea> O atributo rows especifica o número visível de linhas em uma área de texto. O atributo cols especifica a largura visível de uma área de texto. 1.5.1.6 O elemento <button> Define um botão clicável: <button type="button" >Click aqui!</button> 1.5.1.7 Elemento <datalist> O elemento datalist, novo no HTML 5, mostra uma lista de elementos predefinidos como opção para um caixa de entrada de texto. Caso o browser não suporte este componente, ele pode exibir os elementos que compõem o datalist em forma de texto simples. Exemplo de código utilizando o elemento datalist: <input list="browsers" /> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Internet Explorer"> <option value="Opera"> <option value="Safari"> </datalist>
  48. 48. ______________________________________________________________________________________________ Curso Técnico em Informática 48 Criação de sites Resultado: 1.5.1.8 Elemento <keygen> O objetivo do elemento <keygen> é fornecer uma maneira segura de autenticar usuários. O elemento <keygen> especifica um campo gerador de par de chaves em um formulário. Quando o formulário é enviado, duas chaves são geradas, uma privada e uma pública. A chave privada é armazenada localmente e a chave pública é enviada para o servidor. A chave pública pode ser usada para gerar um certificado de cliente para autenticar o usuário no futuro. Exemplo de código utilizando o elemento keygen: <form action="/action_pagina.php"> Usuario: <input type="text" name="user"> Criptografia: <keygen name="security"> <input type="submit"> </form> 1.5.1.9 Elemento <output> Representa o resultado de um cálculo (como um executado por um script). Exemplo de código utilizando o elemento <output>: <!DOCTYPE html> <html> <body> <form action="/action_pagina.php" oninput="x.value=parseInt(a.value)+parseInt(b.value)"> 0 <input type="range" id="a" name="a" value="50"> 100 + <input type="number" id="b" name="b" value="50"> = <output name="x" for="a b"></output> <br> <br> <input type="submit"> </form> </body> </html> Resultado:
  49. 49. ______________________________________________________________________________________________ Curso Técnico em Informática 49 Criação de sites 1.5.2 Atributos Exemplo de código para o atributo text: <form> Nome:<br> <input type="text" name="nome"><br> Sobrenome:<br> <input type="text" name="sobrenome"> </form> Resultado: Isto é como ficará em um navegador: Nome: Sobrenome: Exemplo de código para o atributo rádio: <form> <input type="radio" name="genero" value="masculino" checked> Masculino<br> <input type="radio" name="genero" value="feminino"> Feminino<br> <input type="radio" name="genero" value="outros"> Outros </form> Resultado: Masculino Feminino Outros Exemplo de código para o atributo submit: <form action="/action_pagina.php"> Nome:<br> <input type="text" name="nome" value="Maria"><br> Sobrenome:<br> <input type="text" name="sobrenome" value="Felipeta"><br> <br> <input type="submit" value="enviar">
  50. 50. ______________________________________________________________________________________________ Curso Técnico em Informática 50 Criação de sites </form> Resultado: <input type = "submit"> é utilizado como botão para enviar os dados do formulário para uma página que irá manipula-los. Um manipulador de formulários normalmente é uma página de servi- dor com um script para processamento de dados de entrada. Este manipulador é especificado no atributo de ação. Exemplo de código para o atributo Password: <input type="password" name="senha"> Resultado: Obs: A seguir nesta apostila, será abordado sobre o tratamento de formulários. É assim que o código HTML acima será exibido em um navegador: Exemplo de código para o atributo Checkbox: As caixas de seleção permitem que um usuário selecione opções zero ou mais de um número limitado de opções. <form> <input type="checkbox" name=”lapis" value="Lapis"> Eu tenho um lápis<br> <input type="checkbox" name="caneta" value="Caneta"> Eu tenho uma caneta </form> Resultado: Eu tenho uma bicicleta Eu tenho um carro
  51. 51. ______________________________________________________________________________________________ Curso Técnico em Informática 51 Criação de sites Exemplo de código para o atributo color: O <input type = "color"> é usado para campos de entrada que devem conter uma cor. Dependendo do suporte do navegador, um seletor de cores pode aparecer no campo de entrada. <form> Selecione sua cor favorita: <input type="color" name="cor_favorita "> </form> Resultado: Selecione sua cor favorita: Exemplo de código para o atributo date: O <input type = "date"> é usado para campos de entrada que devem conter uma data. Dependendo do suporte do navegador, um seletor de data pode aparecer no campo de entrada. <form> Selecione a data do seu aniversário: <input type="date" name=”aniversario"> </form> Resultado: Selecione a data do seu aniversário: Exemplo de código para o atributo datetime-local: O <input type = "datetime-local"> especifica um campo de entrada de data e hora, sem fuso horário. Dependendo do suporte do navegador, um seletor de data pode aparecer no campo de entrada. <form> Data de nascimento (data e hora): <input type="datetime-local" na- me="data_nascimento"> </form> Exemplo de código para o atributo email:
  52. 52. ______________________________________________________________________________________________ Curso Técnico em Informática 52 Criação de sites O <input type = "email"> é usado para campos de entrada que devem conter um endereço de e-mail. Dependendo do suporte do navegador, o endereço de e-mail pode ser validado automaticamente quando enviado. Alguns smartphones reconhecem o tipo de e-mail e adicionam ".com" ao teclado para corresponder à entrada de e-mail. <form> E-mail: <input type="email" name="email"> </form> Resultado: E-mail: Exemplo de código para o atributo month: <form> Data de nascimento (mês e ano): <input type="month" name="aniversario"> </form> Resultado: Data de nascimento (mês e ano): Exemplo de código utilizando o atributo number: O <input type = "number"> define um campo de entrada numérico. Você também pode de- finir restrições sobre quais números são aceitos. O exemplo a seguir exibe um campo de entrada numérico, onde você pode inserir um valor de 1 a 5: <form> Quantidade (entre 1 e 5) <input type="number" name="quantidade" min="1" max="5"> </form> Exemplo de código utilizando o atributo range: O <input type = "range"> define um controle para inserir um número cujo valor exato não é importante (como um controle deslizante). O intervalo padrão é 0 a 100. No entanto, você pode definir restrições sobre quais números são aceitos com os atributos min, max e step: <form>
  53. 53. ______________________________________________________________________________________________ Curso Técnico em Informática 53 Criação de sites <input type="range" name="pontos" min="0" max="10"> </form> Resultado: Pontos: Exemplo de código utilizando o atributo search: O <input type = "search"> é usado para campos de pesquisa (um campo de pesquisa se comporta como um campo de texto normal). <form> Pesquisar no Google: <input type="search" name="pesquisagoogle"> </form> Resultado: Pesquisar no Google: Exemplo de código utilizando o atributo tel: O <input type = "tel"> é usado para campos de entrada que devem conter um número de telefone. <form> Telefone: <input type="tel" name="telefone"> </form> Resultado: Telefone: Exemplo de código utilizando o atributo time: O <input type = "time"> permite que o usuário selecione uma hora (sem fuso horário). Dependendo do suporte do navegador, um seletor de tempo pode aparecer no campo de entrada. <form> Selecione uma hora: <input type="time" name="hora"> </form>
  54. 54. ______________________________________________________________________________________________ Curso Técnico em Informática 54 Criação de sites Resultado: Selecione uma hora: Exemplo de código utilizando o atributo url: O <input type = "url"> é usado para campos de entrada que devem conter um endereço URL. Dependendo do suporte do navegador, o campo url pode ser validado automaticamente quando enviado. Alguns smartphones reconhecem o tipo de url e adicionam ".com" ao teclado para corresponder à entrada do URL. <form> Adiciona uma nova página: <input type="url" name="nova_pagina"> </form> Existem outros tipos de atributos como: Atributo Especificação Value Especifica o valor inicial para um campo de entrada. readonly Especifica que o campo de entrada é somente leitura (não pode ser alterado). disabled Especifica que o campo de entrada está desativado. Um campo de entrada desativado é inutilizável e não pode ser clicado, e seu valor não será enviado ao enviar o formulário. Size Especifica o tamanho (em caracteres) para o campo de entrada. maxlength Especifica o comprimento máximo permitido para o campo de entrada. autocomplete="on" Quando ativado, o navegador completará automaticamente os valores de entrada com base nos valores que o usuário inseriu anteriormente. novalidate Especifica que os dados do formulário não devem ser validados no envio.
  55. 55. ______________________________________________________________________________________________ Curso Técnico em Informática 55 Criação de sites week Permite ao usuário selecionar uma semana e um ano autofocus Especifica que o campo de entrada deve automaticamente obter foco quando a página é carregada. form Especifica um ou mais formulários a que pertence um elemento <input>. formaction Especifica a URL de um arquivo que processará o controle de entrada quando o formulário for enviado. O atributo formaction substitui o atributo action do elemento <form>. formenctype Especifica como os dados do formulário devem ser codificados quando enviados (somente para formulários com method = "post"). formmethod Define o método HTTP para enviar dados de formulário para o URL de ação. formnovalidate Define um formulário com dois botões de envio (com e sem validação). formtarget Especifica um nome ou uma palavra-chave que indica onde exibir a resposta que é recebida após o envio do formulário. O atributo formtarget substitui o atributo de destino do elemento <form> List Refere-se a um elemento <datalist> que contém opções pré-definidas para um elemento <input>. min e max Especificam os valores mínimo e máximo para um elemento <input>. multiple Especifica que o usuário tem permissão para inserir mais de um valor no elemento <input>. pattern Especifica uma expressão regular que o valor
  56. 56. ______________________________________________________________________________________________ Curso Técnico em Informática 56 Criação de sites do elemento <input> é verificado. placeholder Especifica uma dica que descreve o valor esperado de um campo de entrada (um valor de amostra ou uma breve descrição do formato). Required Especifica que um campo de entrada deve ser preenchido antes de enviar o formulário. Step Especifica os intervalos de número para um elemento <input>. 1.6 Elementos semânticos HTML5 Nas versões anteriores do HTML não haviam tags com uma semântica apropriada para cada uma dessas divisões. Dessa forma, os desenvolvedores acabavam usando a tag <div> para todas as situações, e criando seus próprios padrões de nomenclaturas através dos atribu- tos id ou class. No HTML5 foram criadas diversas tags semânticas para indicar aos user-agents quais con- teúdos estão sendo inseridos em cada uma das divisões da página, organizando e padronizando o desenvolvimento. 1.6.1.1 Cabeçalho com o elemento <header> O novo elemento <header> do HTML5 é usado para definir o cabeçalho de uma página ou seção, e pode conter logo, títulos, menu de navegação, campo de busca, etc. <header> <img alt="logo" src="/img/logo.png"> <h1>Entendo a estrutura e semântica do HTML5</h1> </header>
  57. 57. ______________________________________________________________________________________________ Curso Técnico em Informática 57 Criação de sites 1.6.1.2 Elemento <nav> O novo elemento <nav> do HTML5 serve para agrupar uma lista de links para outras par- tes do site, seja essa lista de navegação local ou global. Esses blocos de links podem estar em diferentes partes do layout, como no cabeçalho ou no rodapé. <nav> <ul class="menu"> <li><a href="inicio.html">Início</a></li> <li><a href="sobre.html">Sobre</a></li> <li><a href="contato.html">Contato</a></li> </ul> </nav> 1.6.1.3 Elemento <section> Enquanto as divs servem para dividir o conteúdo em diferentes seções, que podem conter elementos como <header> e outros, o <section>divide o conteúdo sem finalidade especifica. 1.6.1.4 Elemento <article> Serve para identificar um conteúdo independente e de maior relevância dentro da página. O elemento <article> pode conter outros elementos como <header> ou <footer>. 1.6.1.5 Elemento <aside> Serve para mostrar conteúdos que fazem referência ao conteúdo principal à sua volta, como informações, blocos de navegação ou até mesmo publicidade. 1.6.1.6 Elemento <footer> Representa o rodapé de um documento ou de uma seção específica do mesmo, podendo conter informações relacionadas ao autor e ao copyright, blocos de navegação ou links relacionados. 2. CSS 2.1 Sintaxes css Um conjunto de regras CSS consiste em um seletor e um bloco de declaração: O seletor aponta para o elemento HTML que você deseja criar. O bloco de declaração contém uma ou mais declarações separadas por ponto e vírgula. Cada declaração inclui um nome de propriedade CSS e um valor, separados por dois-pontos. Uma declaração CSS sempre termina com um ponto-e-vírgula, e os blocos de declaração são rodeados por chaves.
  58. 58. ______________________________________________________________________________________________ Curso Técnico em Informática 58 Criação de sites 2.2.1 Seletores CSS Os seletores CSS são usados para "localizar" (ou selecionar) elementos HTML baseados em seu nome de elemento, id, classe, atributo e muito mais. 2.2.2 O seletor de elementos O seletor de elementos seleciona elementos com base no nome do elemento. Você pode selecionar todos os elementos <p> em uma página como esta (neste caso, todos os elementos <p> serão alinhados no centro, com uma cor de texto vermelha): p { text-align: center; color: red; } 2.2.3 O seletor de identificação O seletor de identificação usa o atributo id de um elemento HTML para selecionar um elemento específico. O id de um elemento deve ser exclusivo dentro de uma página, de modo que o seletor de identificação é usado para selecionar um único elemento! Para selecionar um elemento com um id específico, escreva um caractere de hash (#), seguido do id do elemento. A regra de estilo abaixo será aplicada ao elemento HTML com id = "exemplo1": #exemplo1 { text-align: center; color: blue; } Obs: Um nome de id não pode começar com um número! 2.2.4 O seletor de classe O seletor de classe seleciona elementos com um atributo de classe específico. Para selecionar elementos com uma classe específica, escreva um caractere de ponto (.), seguido do nome da classe. No exemplo abaixo, todos os elementos HTML com class = "center" serão vermelhos e alinhados no centro: .center { text-align: center; color: red; } Você também pode especificar que somente elementos HTML específicos devem ser afetados por uma classe. No exemplo abaixo, apenas elementos <p> com class = "center" serão alinhados no centro: p.center {
  59. 59. ______________________________________________________________________________________________ Curso Técnico em Informática 59 Criação de sites text-align: center; color: red; } Os elementos HTML também podem se referir a mais de uma classe. No exemplo abaixo, o elemento <p> será denominado de acordo com class = "center" e class = "large": <p class="center large">Parágrafo utilizando duas classes.</p> 2.2.5 Seletores de Agrupamento Se você tiver elementos com as mesmas definições de estilo, como este: h1 { text-align: center; color: red; } h2 { text-align: center; color: red; } p { text-align: center; color: red; } Será melhor agrupar os seletores, para minimizar o código. Para agrupar seletores, separe cada seletor com uma vírgula. No exemplo abaixo agrupamos os seletores do código acima: h1, h2, p { text-align: center; color: red; } 2.3 Comentários CSS Comentários são usados para explicar o código e podem ajudar quando você editar o código fonte em uma data posterior. Os comentários são ignorados pelos navegadores. Um comentário CSS começa com / * e termina com * /. Os comentários também podem abranger várias linhas: p { color: red; /* Comentário de uma linha */ text-align: center; }
  60. 60. ______________________________________________________________________________________________ Curso Técnico em Informática 60 Criação de sites /* Comentário de múltiplas linhas */ 2.4 Folha de estilos externa Com uma folha de estilo externa, você pode alterar a aparência de um site inteiro alterando apenas um arquivo! Cada página deve incluir uma referência ao arquivo de planilha de estilo externo dentro do elemento <link>. O elemento <link> vai dentro da seção <head>: <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> Uma folha de estilo externa pode ser escrita em qualquer editor de texto. O arquivo não deve conter tags html. O arquivo de folha de estilos deve ser salvo com uma extensão .css. Aqui está como o "style.css" parece: body { background-color: lightblue; } h1 { color: navy; margin-left: 20px; } 2.4.1 Folha de estilos interna Uma folha de estilo interna pode ser usada se uma única página tiver um estilo exclusivo. Os estilos internos são definidos dentro do elemento <style>, dentro da seção <head> de uma página HTML: <head> <style> body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } </style> </head> 2.4.2 Estilos Inline Um estilo inline pode ser usado para aplicar um estilo exclusivo para um único elemento. Para usar estilos em linha, adicione o atributo de estilo ao elemento relevante. O atributo de estilo
  61. 61. ______________________________________________________________________________________________ Curso Técnico em Informática 61 Criação de sites pode conter qualquer propriedade CSS. O exemplo abaixo mostra como alterar a cor e a margem esquerda de um elemento <h1>: <h1 style="color:blue;margin-left:30px;">Exemplo de Css em linha</h1> 2.5 Cores Cores em CSS são mais frequentemente especificados por:  Um nome de cor válido - como "vermelho", porém em inglês  Um valor RGB - como "rgb (255, 0, 0)"  Um valor HEX - como "# ff0000" 2.5.1 Nomes de cores Cores definidas usando nomes de cores: Exemplo: Cor Nome Vermelho Red Verde Green Azul Blue Laranja Orange Amarelo Yellow Ciano Cyan Preto Black 2.5.2 RGB (vermelho, verde, azul) Os valores de cor RGB podem ser especificados usando esta fórmula: rgb (vermelho, verde, azul). Cada parâmetro (vermelho, verde, azul) define a intensidade da cor entre 0 e 255. Por exemplo, rgb (255,0,0) é exibido como vermelho, porque vermelho é definido como seu valor mais alto (255) e os outros são definidos como 0. Experimente misturando os valores RGB abaixo: Exemplo: Cor Nome Vermelho rgb(255,0,0) Verde rgb(0,255,0) Azul rgb(0,0,255) Laranja rgb(255,165,0) Amarelo rgb(255,255,0)

    Als Erste(r) kommentieren

    Loggen Sie sich ein, um Kommentare anzuzeigen.

  • RodrigoSantos83

    Sep. 17, 2017

Apostila da disciplina de criação de sites I

Aufrufe

Aufrufe insgesamt

712

Auf Slideshare

0

Aus Einbettungen

0

Anzahl der Einbettungen

136

Befehle

Downloads

21

Geteilt

0

Kommentare

0

Likes

1

×