Carregado porinfo_cimol
1,332 visualizações

Apostila Criação de Sites

O documento discute as novas características do HTML5, a nova versão do HTML. Apresenta os editores de código mais usados e conceitos básicos como tags, elementos, atributos e valores. Detalha estruturas como textos, links, imagens, vídeos, listas e tabelas. Por fim, aborda elementos de formulários.

Incorporar apresentação

______________________________________________________________________________________________ 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
______________________________________________________________________________________________ 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 ....................................................................15 1.4.1.5 Formatação de texto (estilo físico x estilo lógico) ...............................16 1.4.1.6 Fonte ..................................................................................................18 1.4.1.6.1 Face......................................................................................18 Sumário
______________________________________________________________________________________________ Curso Técnico em Informática 3 Criação de sites 1.4.1.6.2 Size.......................................................................................19 1.4.1.6.3 Color .....................................................................................20 1.4.1.7 Cor .....................................................................................................21 1.4.1.8 Alinhamento e recuo...........................................................................22 1.4.1.8.1 Alinhamento (DIV).................................................................22 1.4.1.8.2 Recuo (BLOCKQUOTE) .......................................................22 1.4.1.9 Caracteres especiais e comentários ..................................................23 1.4.1.9.1 Caracteres especiais ............................................................23 1.4.1.9.2 Comentários .........................................................................24 1.4.2 Links ................................................................................................................25 1.4.2.1 O atributo target .................................................................................25 1.4.2.2 Imagem como Link .............................................................................25 1.4.2.3 Criar um marcador .............................................................................25 1.4.3 Imagens...........................................................................................................26 1.4.3.1 Imagem no documento HTML............................................................26 1.4.3.2 Tipos de imagem ................................................................................26 1.4.3.3 Atributos do elemento IMG.................................................................26 1.4.3.3.1 Src, border, alt ......................................................................26 1.4.3.3.2 Width, height.........................................................................27 1.4.3.3.3 Align......................................................................................28 1.4.3.4 Imagem de fundo ...............................................................................30 1.4.4 Vídeos..............................................................................................................30 1.4.5 Listas ...............................................................................................................31 1.4.5.1 Lista ordenada e lista não-ordenada..................................................31 1.4.5.2 Atributos do elemento OL...................................................................32 1.4.5.3 Atributos do elemento UL ...................................................................33 1.4.5.4 Lista de definição ...............................................................................34 1.4.5.5 Aninhando de listas ............................................................................34 1.4.6 Tabelas ............................................................................................................36 1.4.6.1 Linha de tabela: TR ............................................................................38 1.4.6.2 Título e legenda: CAPTION................................................................39 1.5 Formulários..................................................................................................................41 1.5.1 Elementos do formulário ..................................................................................41 1.5.1.1 O elemento <form> ............................................................................41 1.5.1.2 O elemento <input>............................................................................41
______________________________________________________________________________________________ Curso Técnico em Informática 4 Criação de sites 1.5.1.3 O elemento <select> ..........................................................................41 1.5.1.4 O elemento <option>..........................................................................42 1.5.1.5 O elemento <textarea>.......................................................................42 1.5.1.6 O elemento <button>..........................................................................42 1.5.1.7 Elemento <datalist>............................................................................42 1.5.1.8 Elemento <keygen> ...........................................................................43 1.5.1.9 Elemento <output> .............................................................................43 1.5.2 Atributos .....................................................................................................................44
______________________________________________________________________________________________ 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 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. Esse artigo 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
______________________________________________________________________________________________ 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 software que fazem essa função, cada um com suas caracte- rí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
______________________________________________________________________________________________ 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:  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.
______________________________________________________________________________________________ Curso Técnico em Informática 8 Criação de sites  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 Etiqueta 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 etiquetas1 - símbolos da linguagem HTML identifica- dos pelos sinais "< >" (se for a etiqueta inicial) ou pelos sinais "</ >" (se for a etiqueta final). A etiqueta <I> no código acima marca o início do texto a ser apresentado em itálico, e a eti- queta </I> marca o fim da formatação em itálico. Portanto, tudo o que estiver entre este par de etiquetas <I> e </I> será ficará em itálico. Assim também funcionam as etiquetas <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 elementos2 para construir estruturas como: textos formata- dos, parágrafos, listas, tabelas, etc. Cada elemento, em geral, é composto por três partes: eti- queta inicial + conteúdo + etiqueta final. O elemento itálico exemplifica esta estrutura genérica: Alguns elementos permitem omitir a etiqueta final. Por exemplo, para construir um parágrafo basta explicitar a etiqueta inicial <P>. Exemplo utilizando o elemento P: <P>Primeiro parágrafo. <P>Segundo parágrafo. 1 Etiqueta é a tradução aqui adotada para o termo tag (que é o termo original utilizado nas especificações da linguagem HTML). Alguns autores adotam outras traduções como marcador, rótulo, comando ou mesmo o termo original tag. 2 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).
______________________________________________________________________________________________ Curso Técnico em Informática 9 Criação de sites Resultado: Primeiro parágrafo. Segundo parágrafo. Casos como o elemento P (parágrafo), a etiqueta 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 etiqueta final. Por exemplo, o elemento HR (Horizontal Rule) desenha uma linha horizontal - não possui conteúdo nem etiqueta 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: 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> Resultado: Observe, no exemplo acima, que o alinhamento do segundo parágrafo é à direita da página. Na etiqueta 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 va- lor que configura a característica. Cada elemento pode ter associado alguns pares atributo="va- lor" dentro de sua etiqueta inicial.
______________________________________________________________________________________________ Curso Técnico em Informática 10 Criação de sites O estudo da linguagem HTML consiste, principalmente, na investigação dos elementos, eti- quetas, atributos e valores que compõem esta linguagem. A figura abaixo (correspondente ao fra- gmento de código do segundo parágrafo do exemplo acima) identifica estes conceitos fundamentais para a compreensão de um código escrito em HTML. 1.3.3.1 Convenções As etiquetas, 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 etiqueta. 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> 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 etiqueta </HTML>. O cabeçalho, delimitado pelas etiquetas <HEAD> e </HEAD>, destina-se a conter informações sobre
______________________________________________________________________________________________ Curso Técnico em Informática 11 Criação de sites o documento - 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 etiquetas <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. 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 etiquetas <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>
______________________________________________________________________________________________ Curso Técnico em Informática 12 Criação de sites 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 bloco 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"> 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>
______________________________________________________________________________________________ Curso Técnico em Informática 13 Criação de sites 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) 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 etiqueta inicial do elemento P, o parágrafo é alinhado à esquerda (valor padrão).
______________________________________________________________________________________________ Curso Técnico em Informática 14 Criação de sites 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 torna-se bastante simples; a desvantagem é que torna-se simples demais. Como o texto é apresentado exatamente como digitado, ignora-se o tamanho da janela em que o texto é visualizado. Experimente redimen- sionar 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 enquadrado inde- sejá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. 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>
______________________________________________________________________________________________ Curso Técnico em Informática 15 Criação de sites 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 (Heading = cabeçalho) pode ser utilizado para construir os cabeçalhos das seções de um texto. Existem seis níveis de cabeçalhos, de H1 (o primeiro e mais importante nível) a H6 (o último e menos impor- tante). O cabeçalho, assim como o parágrafo, também admite o atributo align. 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>
______________________________________________________________________________________________ Curso Técnico em Informática 16 Criação de sites <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 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 eti- queta inicial e etiqueta 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>
______________________________________________________________________________________________ Curso Técnico em Informática 17 Criação de sites 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 <STRIKE>ex- clui</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> <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
______________________________________________________________________________________________ Curso Técnico em Informática 18 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 verdadeiros, em dados que são falsos por eu, artisticamente, não saber senão mentir" é uma citação dentro 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: 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
______________________________________________________________________________________________ Curso Técnico em Informática 19 Criação de sites 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 pa- drã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 fonte. 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> 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
______________________________________________________________________________________________ Curso Técnico em Informática 20 Criação de sites 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 atra- vé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-es- curo</FONT><BR> <FONT color="silver">Cinza-Claro</FONT><BR> <FONT co- lor="white">Branco</FONT><BR> <FONT color="red">Vermelho</FONT><BR> <FONT color="maroon">Verme- lho-escuro</FONT><BR> <FONT color="yellow">Amarelo</FONT><BR> <FONT color="olive">Ama- relo-escuro</FONT><BR> <FONT color="lime">Verde</FONT><BR> <FONT color="green">Verde-es- curo</FONT><BR> <FONT color="aqua">Ciano</FONT><BR> <FONT color="teal">Ciano-es- curo</FONT><BR> <FONT color="blue">Azul</FONT><BR> <FONT color="navy">Azul-es- curo</FONT><BR> <FONT color="fuchsia">Magenta</FONT><BR> <FONT color="purple">Ma- genta-escuro</P></FONT><BR> Resultado: Preto Cinza-escuro Cinza-Claro Branco Vermelho Vermelho-escuro Amarelo
______________________________________________________________________________________________ Curso Técnico em Informática 21 Criação de sites 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> Para especificar o valor da cor,<BR> <FONT color="lime">utilize o nome</FONT><BR> <FONT color="#00FF00">ou o código da cor.</FONT> </P> </BODY> </HTML> Resultado: Para especificar o valor da cor, utilize o nome ou o código da cor. 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
______________________________________________________________________________________________ Curso Técnico em Informática 22 Criação de sites 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) 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>
______________________________________________________________________________________________ Curso Técnico em Informática 23 Criação de sites 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. 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 &
______________________________________________________________________________________________ Curso Técnico em Informática 24 Criação de sites ("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). á &aacute; Á &Aacute; é &eacute; ó &eacute; ã &atilde; Ã &Atilde; õ &otilde; â &acirc; Â &Acirc; ê &ecirc; ô &ocirc; à &agrave; À &Agrave; è &egrave; ò &ograve; ç &ccedil; Ç &Ccedil; ü &uml; Ü &uml; 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>
______________________________________________________________________________________________ Curso Técnico em Informática 25 Criação de sites 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> 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 marcador, 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>
______________________________________________________________________________________________ Curso Técnico em Informática 26 Criação de sites 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 atri- buto src (source = origem) aponta para o endereço URI da imagem. <IMG src="uri"> 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. Cada 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 com fronteiras nítidas e com poucas cores (logotipos, ícones, esquemas etc.) enquanto o formato JPEG é mais adequado para imagens com muitas cores e sem fronteiras nítidas (geralmente, fotografias). 1.4.3.3 Atributos do elemento IMG 1.4.3.3.1 Src, border, alt O atributo src (resource) aponta para o endereço URI do arquivo de imagem. Este é o único atributo obrigatório do elemento IMG - não há imagem sem especificar este atributo. O atributo bor- der especifica a espessura da borda que irá envolver a imagem.
______________________________________________________________________________________________ Curso Técnico em Informática 27 Criação de sites Exemplo utilizando o atributo border: O atributo alt (alternate text) especifica o texto que é apresentado quando o usuário fica com o mouse parado sobre a imagem. 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:
______________________________________________________________________________________________ Curso Técnico em Informática 28 Criação de sites 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. 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 esquema: 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"
______________________________________________________________________________________________ Curso Técnico em Informática 29 Criação de sites alt="1914"> 1914 - Escreve poemas dos três heterônimos. </P> <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.
______________________________________________________________________________________________ Curso Técnico em Informática 30 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 etiqueta 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. É sem- pre 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>: Exemplo de código utilizando o elemento vídeo: <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4">
______________________________________________________________________________________________ Curso Técnico em Informática 31 Criação de sites <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> Defines 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> Resultado: 1. Item número um. 2. Item número dois. 3. Item número três. Uma lista ordenada é delimitada pelas etiquetas <OL> e </OL> (Ordered List). Cada item da lista é delimitado pelas etiquetas <LI> e </LI> (List Item).
______________________________________________________________________________________________ Curso Técnico em Informática 32 Criação de sites 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 alta 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. O quadro abaixo resume os principais atributos do elemento OL: type=estilo_nu- meraçã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
______________________________________________________________________________________________ Curso Técnico em Informática 33 Criação de sites 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 square quadrados cheios  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:
______________________________________________________________________________________________ Curso Técnico em Informática 34 Criação de sites  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 é constru- ído com o elemento DT (Definition Term) e cada descrição de definição é construída com o ele- mento 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: 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 Aninhando de listas É possível aninhar listas - colocar uma lista dentro de outra podendo, inclusive, misturar listas ordenadas e não-ordenadas. Dependendo da estrutura de lista que se deseja construir, podem existir diversos níveis de aninhamento. Uma boa estratégia para aninhar listas é pensar isolada- mente 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>
______________________________________________________________________________________________ Curso Técnico em Informática 35 Criação de sites <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> <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
______________________________________________________________________________________________ Curso Técnico em Informática 36 Criação de sites 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 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>
______________________________________________________________________________________________ Curso Técnico em Informática 37 Criação de sites </TR> </TABLE> Resultado: O atributo border especifica a espessura da borda ao redor da tabela. O atributo cellpad- ding especifica o espaço entre a moldura da célula e seu conteúdo. O atributo cellspacing espe- cifica 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 redimen- sionar a janela onde o exemplo anterior é visualizado. Observe que a tabela também é redimensi- onada 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)
______________________________________________________________________________________________ Curso Técnico em Informática 38 Criação de sites 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 (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>
______________________________________________________________________________________________ Curso Técnico em Informática 39 Criação de sites <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 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=alinha- mento Posição do conteúdo de CAPTION:
______________________________________________________________________________________________ Curso Técnico em Informática 40 Criação de sites 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> <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>
______________________________________________________________________________________________ Curso Técnico em Informática 41 Criação de sites <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 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:
______________________________________________________________________________________________ Curso Técnico em Informática 42 Criação de sites <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: 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="message" 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.
______________________________________________________________________________________________ Curso Técnico em Informática 43 Criação de sites 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> Esse código HTML é renderizado assim no Firefox 4: 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_page.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_page.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>
______________________________________________________________________________________________ Curso Técnico em Informática 44 Criação de sites Resultado: 1.5.2 Atributos Exemplo de código para o atributo text: <form> First name:<br> <input type="text" name="firstname"><br> Last name:<br> <input type="text" name="lastname"> </form> Resultado: Isto é como ficará em um navegador: Primeiro nome: Último nome: Exemplo de código para o atributo rádio: <form> <input type="radio" name="gender" value="male" checked> Masculino<br> <input type="radio" name="gender" value="female"> Feminino<br> <input type="radio" name="gender" value="other"> De outros </form> Resultado: Masculino Fêmea De outros Exemplo de código para o atributo submit: <form action="/action_page.php"> Primeiro Nome:<br> <input type="text" name="primeiro_nome" value="Maria"><br> Ultimo nome:<br> <input type="text" name="ultimo_nome" value="Felipeta"><br> <br> <input type="submit" value="enviar"> </form> Resultado:
______________________________________________________________________________________________ Curso Técnico em Informática 45 Criação de sites Primeiro nome: Mickey Último nome: Mouse Enviar <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: Será abordado nesta apostila, a seguir 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 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:
______________________________________________________________________________________________ Curso Técnico em Informática 46 Criação de sites 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 (date e hora): <input type="datetime-local" name="data_nasci- mento"> </form> Exemplo de código para o atributo email: 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>
______________________________________________________________________________________________ Curso Técnico em Informática 47 Criação de sites 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> <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="googlesearch"> </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>
______________________________________________________________________________________________ Curso Técnico em Informática 48 Criação de sites 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> 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. week Permite ao usuário selecionar uma semana e um ano
______________________________________________________________________________________________ Curso Técnico em Informática 49 Criação de sites 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 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 atributos id ou class. No HTML5 foram criadas diversas tags semânticas para indicar aos user-agents quais conteúdos estão sendo inseridos em cada uma das divisões da página, organizando e padronizando o desen- volvimento.
______________________________________________________________________________________________ Curso Técnico em Informática 50 Criação de sites 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> 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.
______________________________________________________________________________________________ Curso Técnico em Informática 51 Criação de sites 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 Fundamentos do CSS 2.2 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 proprie- dade 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. 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; }
______________________________________________________________________________________________ Curso Técnico em Informática 52 Criação de sites 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 { 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;
______________________________________________________________________________________________ Curso Técnico em Informática 53 Criação de sites 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; } /* 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>
______________________________________________________________________________________________ Curso Técnico em Informática 54 Criação de sites 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 pode conter qualquer propriedade CSS. O exemplo abaixo mostra como alterar a cor ea 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: Color Nome Red Green Blue Orange Yellow Cyan 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
______________________________________________________________________________________________ Curso Técnico em Informática 55 Criação de sites mais alto (255) e os outros são definidos como 0. Experimente misturando os valores RGB abaixo: Exemplo: Cor RGB rgb(255,0,0) rgb(0,255,0) rgb(0,0,255) rgb(255,165,0) rgb(255,255,0) rgb(0,255,255) 2.5.3 Cores hexadecimais Os valores RGB também podem ser especificados usando valores de cor hexadecimais na forma: # RRGGBB ,onde RR (vermelho), GG (verde) e BB (azul) são valores hexadecimais entre 00 e FF (mesmo que decimal 0-255). Por exemplo, #FF0000 é apresentado como vermelho, porque vermelho é definido para o seu valor mais alto (FF) e os outros são definidos para o valor mais baixo (00). Nota: Os valores HEX não diferenciam maiúsculas de minúsculas: "# ff0000" é o mesmo que "FF0000". Exemplo: Cor HEX #FF0000 #00FF00 #0000FF #FFA500
______________________________________________________________________________________________ Curso Técnico em Informática 56 Criação de sites #FFFF00 #00FFFF 2.6 Background As propriedades de fundo CSS são usadas para definir os efeitos de fundo para os elementos. Propriedades de fundo CSS: cor de fundo background-color imagem de fundo background-image fundo de repetição repeating-background Anexo de fundo background-attachment Posição de fundo background-position Cor de fundo A propriedade background-color especifica a cor de fundo de um elemento. A cor de fundo de uma página é definida conforme o exemplo a seguir: body { background-color: blue; } Imagem de fundo A propriedade background-image especifica uma imagem para usar como o plano de fundo de um elemento. Por padrão, a imagem é repetida de modo que abrange todo o display A imagem de plano de fundo de uma página pode ser definida da seguinte forma: body { background-image: url("imagem.png"); } Para que a imagem não se repita, deve-se utilizar a propriedade background-repeat, conforme ilustra o exemplo a seguir: body { background-image: url("imagem.png"); background-repeat: no-repeat; } Ainda é possível especificar a posição da imagem com a propriedade background-position: body { background-image: url("imagem.png"); background-repeat: no-repeat; background-position: right top;
______________________________________________________________________________________________ Curso Técnico em Informática 57 Criação de sites } Também é possível fazer com que a imagem de fundo permaneça fixa, para isso, utilize a propriedade background-attachment: body { background-image: url("imagem.png"); background-repeat: no-repeat; background-position: right top; background-attachment: fixed; } 2.7 Bordas As propriedades do border permitem especificar o estilo, largura e cor da borda de um elemento. A propriedade border-style especifica que tipo de borda para exibir. São permitidos os seguintes valores:  dotted - Define uma borda pontilhada;  dashed - Define uma borda tracejada;  solid - Define uma borda sólida;  double - Define um limite duplo;  groove- Define uma borda ranhurada 3D. O efeito depende do valor da cor da borda;  ridge- Define uma borda estriada 3D. O efeito depende do valor da cor da borda;  inset- Define uma borda inserida 3D. O efeito depende do valor da cor da borda;  outset- Define uma borda de início 3D. O efeito depende do valor da cor da borda;  none - Não define nenhuma borda;  hidden - Define uma borda oculta. Exemplo: p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.none {border-style: none;} p.hidden {border-style: hidden;} p.mix {border-style: dotted dashed solid double;} Resultado: Borda dotted Borda dashed
______________________________________________________________________________________________ Curso Técnico em Informática 58 Criação de sites Borda solid borda Borda double Borda groove Borda ridge Borda inset Borda outset Sem borda Borda oculta Borda mixed Largura da borda A propriedade border-width especifica a largura das quatro bordas. A largura pode ser definida como um tamanho específico (em px, pt, cm, etc) ou usando um dos três valores pré-definidos: thin, medium, ou thick (fino, médio ou grosso). A propriedade border-width pode ter de um a quatro valores (para a borda superior, borda direita, borda inferior e a borda esquerda). Exemplo: p.primeiro { border-style: solid; border-width: 5px; } p.segundo { border-style: solid; border-width: medium; } p.terceiro { border-style: solid; border-width: 2px 10px 4px 20px; } Cor da borda A propriedade border-color é usada para definir a cor das quatro bordas. A cor pode ser definida por:  Nome - especifique um nome de cor, como "vermelho";  Hex - especifique um valor hexadecimal, como "# ff0000";  RGB - especifique um valor RGB, como "rgb (255,0,0)";
______________________________________________________________________________________________ Curso Técnico em Informática 59 Criação de sites  Transparent (que corresponde a borda transparente). A propriedade border-color pode ter de um a quatro valores (para a borda superior, borda direita, borda inferior e a borda esquerda). Se border-color não estiver definido, ele herda a cor do elemento. Exemplo: p.primeiro { border-style: solid; border-color: pink; } p.segundo { border-style: solid; border-color: blue; } p.terceiro { border-style: solid; border-color: red green blue yellow; } No CSS você pode ainda especificar para cada borda do elemento uma propriedade diferente, conforme o exemplo a seguir: p { border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid; } Para encurtar o código, também é possível especificar todas as propriedades de borda individuais em uma propriedade. A propriedade border é uma propriedade abreviada para as seguintes propriedades de borda individuais: border-width border-style (requeridos) border-color Exemplo borda esquerda: p { border-left: 6px solid blue; }
______________________________________________________________________________________________ Curso Técnico em Informática 60 Criação de sites Exemplo borda direita: p { border-right: 6px solid blue; } Exemplo borda inferior: p { border-bottom: 6px solid blue; } Exemplo borda superior: p { border-top: 6px solid blue; } É possível deixar as bordas arredondadas com a utilização da propriedade border-radius: Exemplo: p { border: 2px solid red; border-radius: 5px; } 2.8 Margens As propriedades CSS margin são usadas para gerar espaço em torno de elementos. Elas definem o tamanho do espaço em branco fora da borda. Com CSS, você tem controle total sobre as margens. Existem propriedades CSS para definir a margem para cada lado de um elemento (parte superior, direita, inferior e esquerda). Margem - Lados Individuais CSS tem propriedades para especificar a margem para cada lado de um elemento:  margin-top;  margin-right;  margin-bottom;  margin-left. Todas as propriedades de margem podem ter os seguintes valores:  Auto - o navegador calcula a margem;  Length - especifica uma margem em px, pt, cm, etc.;  % - especifica uma margem em % da largura do elemento;  Inherit - especifica que a margem deve ser herdada do elemento pai. Sugestão: São permitidos valores negativos. O exemplo a seguir define margens diferentes para todos os quatro lados de um elemento <p>: Exemplo: p { margin-top: 100px;
______________________________________________________________________________________________ Curso Técnico em Informática 61 Criação de sites margin-bottom: 100px; margin-right: 150px; margin-left: 80px; } Para encurtar o código, é possível especificar todas as propriedades de margem em uma propriedade. margin é uma propriedade abreviada para as seguintes propriedades de margem individuais:  margin-top;  margin-right;  margin-bottom;  margin-left. Exemplo: p { margin: 100px 150px 100px 80px; } Se a propriedade margin tiver quatro valores:  Margem: 25px 50px 75px 100px;  Margem superior é 25px;  Margem direita é 50px;  Margem inferior é 75px;  Margem esquerda é 100px. Se a propriedade margin tiver três valores:  Margem: 25px 50px 75px;  Margem superior é 25px;  Direita e esquerda são 50px;  Margem inferior é 75px. Se a propriedade margin tiver dois valores:  Margem: 25px 50px;  Margens superior e inferior são 25px;  Direita e esquerda são 50px. Se a propriedade margin tiver um valor:  Margem: 25px;  Todas as quatro margens são 25px. Você pode utilizar a propriedade auto para centralizar horizontalmente o elemento dentro do contêiner. O elemento então ocupará a largura especificada e o espaço restante será dividido igualmente entre as margens esquerda e direita:
______________________________________________________________________________________________ Curso Técnico em Informática 62 Criação de sites Exemplo: div { width: 300px; margin: auto; border: 1px solid red; } 2.9 CSS Padding O padding tem um funcionamento muito similar ao do margin, porém ao invés de dar um espaçamento externo, ele dá um interno. As propriedades para especificar o preenchimento para cada lado de um elemento são:  padding-top;  padding-right;  padding-bottom;  padding-left. Todas as propriedades de preenchimento podem ter os seguintes valores:  comprimento - especifica um estofamento em px, pt, cm, etc.;  % - especifica um preenchimento em % da largura do elemento que contém;  Inherit - especifica que o preenchimento deve ser herdado do elemento pai; O exemplo a seguir define preenchimento diferente para todos os quatro lados de um elemento <p>: p { padding-top: 50px; padding-right: 30px; padding-bottom: 50px; padding-left: 80px; } Para encurtar o código, é possível especificar todas as propriedades de preenchimento em uma propriedade. p { padding: 50px 30px 50px 80px; } 2.10 Height e Width As propriedades height e width são usadas para definir a altura e a largura de um elemento. O height e width pode ser configurado para auto (isso é padrão. Significa que o navegador calcula a altura e a largura), ou ser especificado em valores de comprimento, como px, cm, etc., ou em porcentagem (%) do bloco que contém. Você pode ainda utilizar a propriedade max-width para definir a largura máxima de um elemento. O valor max-width pode ser especificado em valores de comprimento, como px, cm, etc., ou em percentagem (%) do bloco que contém, ou definido como none (isso é padrão), significa que não há largura máxima.
______________________________________________________________________________________________ Curso Técnico em Informática 63 Criação de sites Propriedades Descrição height Define a altura de um elemento. max-height Define a altura máxima de um elemento. max-width Define a largura máxima de um elemento. min-height Define a altura mínima de um elemento. min-width Define a largura mínima de um elemento. width Define a largura de um elemento. 2.11 Outline As propriedades outline especificam o estilo, cor e largura de um contorno. Um contorno é uma linha que é desenhada em torno de elementos (fora das bordas) para fazer o elemento "se destacar". No entanto, a propriedade de estrutura de tópicos é diferente da propriedade de borda - O esquema não é uma parte das dimensões de um elemento; A largura total e a altura do elemento não são afetadas pela largura do contorno. Estilos de Contorno A propriedade outline-style especifica o estilo do contorno. Ela pode ter um dos seguintes valores:
______________________________________________________________________________________________ Curso Técnico em Informática 64 Criação de sites  dotted - Define um contorno pontilhado;  dashed - Define um contorno tracejado;  solid - Define um contorno sólido;  double - Define um contorno duplo;  groove- Define um contorno em 3D. O efeito depende do valor da cor do contorno;  ridge- Define um contorno ridged 3D. O efeito depende do valor da cor do contorno;  inset- Define um contorno acima3D. O efeito depende do valor da cor do contorno;  outset- Define um contorno abaixo 3D. O efeito depende do valor da cor do contorno;  none - Não define nenhum contorno;  hidden - Define um contorno oculto. 2.12 Texto Cor do texto A propriedade color é usada para definir a cor do texto. Com CSS, uma cor é mais frequentemente especificada por:  Um nome de cor - como "vermelho";  Um valor HEX - como "# ff0000";  Um valor RGB - como "rgb (255,0,0)";  A cor de texto padrão de uma página é definida no seletor de corpo. Exemplo: body { color: pink; } h1 { color: blue; } Alinhamento de Texto A propriedade text-align é usada para definir o alinhamento horizontal de um texto. Um texto pode ser alinhado à esquerda ou à direita, centralizado ou justificado. O exemplo a seguir mostra o alinhamento central, justificado e o texto alinhado à esquerda e à direita (o alinhamento à esquerda é o padrão se a direção do texto for da esquerda para a direita e o alinhamento à direita é padrão se a direção do texto for da direita para a esquerda): Exemplo: h1 { text-align: center; } h2 { text-align: justify; } h3 { text-align: left; }
______________________________________________________________________________________________ Curso Técnico em Informática 65 Criação de sites h4 { text-align: right; } Decoração de texto A propriedade text-decoration é usada para definir ou remover decorações do texto. O valor text-decoration: none; é frequentemente usado para remover sublinhados de links: Exemplo: a { text-decoration: none; } Transformação de texto A propriedade text-transform é usada para especificar letras maiúsculas e minúsculas em um texto. Ela pode ser usada para transformar tudo em letras maiúsculas ou minúsculas, ou a primeira letra de cada palavra com a utilização do capitalize: Exemplo: p.uppercase { text-transform: uppercase; } p.lowercase { text-transform: lowercase; } p.capitalize { text-transform: capitalize; } Recuo de texto A propriedade text-indent é usada para especificar o recuo da primeira linha de um texto: Exemplo: p { text-indent: 50px; } Espaçamento entre letras A propriedade letter-spacing é usada para especificar o espaço entre os caracteres em um texto. O exemplo a seguir demonstra como aumentar ou diminuir o espaço entre caracteres: Exemplo: h1 { letter-spacing: 3px; }
______________________________________________________________________________________________ Curso Técnico em Informática 66 Criação de sites h2 { letter-spacing: -3px; } Altura da linha A propriedade line-height é usada para especificar o espaço entre as linhas: Exemplo: p.small { line-height: 0.8; } p.big { line-height: 1.8; } Direção do texto A propriedade direction é usada para alterar a direção do texto de um elemento: Exemplo: div { direction: rtl; } Espaçamento entre palavras A propriedade word-spacing é usada para especificar o espaço entre as palavras de um texto. O exemplo a seguir demonstra como aumentar ou diminuir o espaço entre palavras: Exemplo: h1 { word-spacing: 10px; } h2 { word-spacing: -5px; } Sombra de texto A propriedade text-shadow adiciona sombra ao texto. O exemplo a seguir especifica a posição da sombra horizontal (3px), a posição da sombra vertical (2px) e a cor da sombra (vermelho). Exemplo: h1 { text-shadow: 3px 2px red; }
______________________________________________________________________________________________ Curso Técnico em Informática 67 Criação de sites Segue abaixo uma tabela com todas as propriedades de texto CSS: Propriedade Descrição color Seta a cor do texto. direction Especifica a direção do texto. letter-spacing Especifica o espaçamento entre letras. line-height Propriedade utilizada para especificar o tamanho entre linhas. text-align Propriedade utilizada para definir o alinhamento do texto. text-decoration Propriedade utilizada para adicionar uma decoração ao texto. text-indent Propriedade utilizada para recuo na primeira linha. text-shadow Propriedade utilizada para adicionar sombra ao texto. text-transform Propriedade utilizada para especificar letras maiúsculas e minúsculas. text-overflow Determina como o conteúdo que ultrapassou a sua div e que não é mostrado ao usuário deve ser exibido. unicode-bidi Usada em conjunto com a propriedade direction para definir ou retornar se o textodeve ser substit uído para oferecer suporte a vários idiomas no mesmo documento. vertical-align Centraliza textos ou imagens. white-space Especifica como a escrita de espaços dentro de um elemento é manejada. word-spacing Aumenta ou diminui o espaço entre as palavras.
______________________________________________________________________________________________ Curso Técnico em Informática 68 Criação de sites 2.13 Fontes CSS As propriedades da fonte CSS definem a família de fontes, o tamanho e o estilo de um texto. Famílias de fontes CSS Em CSS, existem dois tipos de nomes de família de fonte:  Família genérica - um grupo de famílias de fontes com um aspecto semelhante (como "Se- rif" ou "Monospace");  Família de fontes - uma família de fontes específica (como "Times New Roman" ou "Arial"). Família genérica Família de fontes Descrição Serif Times New Roman Georgia Fontes Serif têm linhas pequenas nas extremida- des em alguns caracteres. Sans-serif Arial Verdana "Sans" significa sem - essas fontes não têm as linhas nas extremidades dos caracteres. Monospace Courier New Lucida Console Todos os caracteres monospace têm a mesma largura. Família de fontes A família de fontes de um texto é definida com a propriedade font-family. Ela deve conter vários nomes de fonte como um sistema de "fallback". Se o navegador não suporta a primeira fonte, ele tenta a próxima fonte e assim por diante. Comece com a fonte desejada e termine com uma família genérica, para permitir que o navegador escolha uma fonte semelhante na família genérica, se nenhuma outra fonte estiver disponível. Observação: Se o nome de uma família de fontes for mais de uma palavra, ele deve estar entre aspas, como: "Times New Roman". Mais de uma família de fontes é especificada em uma lista separada por vírgulas: Exemplo: p { font-family: "Times New Roman", Times, serif; }
______________________________________________________________________________________________ Curso Técnico em Informática 69 Criação de sites Estilo de fonte A propriedade font-style é usada principalmente para especificar texto em itálico. Esta propriedade tem três valores:  Normal - O texto é mostrado normalmente;  Itálico - O texto é mostrado em itálico;  Oblíquo - O texto é "inclinado" (oblíquo é muito semelhante ao itálico, mas menos apoiado). Exemplo: p.normal { font-style: normal; } p.italic { font-style: italic; } p.oblique { font-style: oblique; } Tamanho da fonte A propriedade font-size define o tamanho do texto. Ser capaz de gerenciar o tamanho do texto é importante na web design. No entanto, você não deve usar ajustes de tamanho de fonte para fazer parágrafos parecidos com títulos ou títulos parecidos com parágrafos. Sempre use as tags HTML apropriadas, como <h1> - <h6> para cabeçalhos e <p> para parágrafos. O valor font- size pode ser um tamanho absoluto ou relativo. Tamanho absoluto:  Define o texto para um tamanho especificado;  Não permite que um usuário altere o tamanho do texto em todos os navegadores (ruim por razões de acessibilidade);  O tamanho absoluto é útil quando o tamanho físico da saída é conhecido. Tamanho relativo:  Define o tamanho relativo aos elementos circundantes;  Permite que um usuário altere o tamanho do texto nos navegadores. Definir tamanho de fonte com pixels Definir o tamanho do texto com pixels fornece controle total sobre o tamanho do texto: Exemplo: h1 { font-size: 40px; }
______________________________________________________________________________________________ Curso Técnico em Informática 70 Criação de sites h2 { font-size: 30px; } p { font-size: 14px; } Definir tamanho de fonte com “em” Para permitir que os usuários redimensionem o texto (no menu do navegador), muitos desenvolvedores utilizam “em” ao invés de pixels. 1em é igual ao tamanho da fonte atual. O tamanho de texto padrão nos navegadores é 16px. Assim, o tamanho padrão de 1em é 16px. O tamanho pode ser calculado de pixels para em usando esta fórmula: pixels / 16 = em Exemplo: h1 { font-size: 2.5em; /* 40px/16=2.5em */ } h2 { font-size: 1.875em; /* 30px/16=1.875em */ } p { font-size: 0.875em; /* 14px/16=0.875em */ } No exemplo acima, o tamanho do texto em “em” é o mesmo que o exemplo anterior em pixels. No entanto, com o tamanho “em”, é possível ajustar o tamanho do texto em todos os nave- gadores. Espessura da Fonte A propriedade font-weight especifica a espessura de uma fonte: Exemplo: p.normal { font-weight: normal; } p.thick { font-weight: bold; } Variante da fonte A propriedade font-variant especifica se um texto deve ou não ser exibido em uma fonte small-caps, isso significa que em uma fonte de letras pequenas, todas as letras minúsculas são convertidas em letras maiúsculas. No entanto, as letras maiúsculas convertidas aparecem em um
______________________________________________________________________________________________ Curso Técnico em Informática 71 Criação de sites tamanho de fonte menor do que as letras maiúsculas originais no texto. Exemplo: p.normal { font-variant: normal; } p.small { font-variant: small-caps; } Todas as propriedades da fonte CSS: Propriedade Descrição font Seta as propriedades para fonte. font-family Especifica uma família de fontes. font-size Especifica o tamanho da fonte. font-style Especifica um estilo para fonte. font-variant Especifica se um texto deve ou não ser exibido em uma fonte small- caps. font-weight Especifica a espessura da fonte. 2.14 como adicionar ícones A maneira mais simples de adicionar um ícone à sua página HTML é com uma biblioteca de ícones, como Font Awesome. Adicione o nome da classe de ícone especificada a qualquer elemento HTML em linha (como <i>ou <span>). Todos os ícones nas bibliotecas de ícones a seguir, são vetores escaláveis que podem ser personalizados com CSS (tamanho, cor, sombra, etc.) Para usar os ícones Font Awesome, adicione a seguinte linha dentro da <head>seção de sua
______________________________________________________________________________________________ Curso Técnico em Informática 72 Criação de sites página HTML: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font- awesome.min.css"> Exemplo: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <i class="fa fa-cloud"></i> <i class="fa fa-heart"></i> <i class="fa fa-car"></i> <i class="fa fa-file"></i> <i class="fa fa-bars"></i> </body> </html> Resultado: Ícones do Bootstrap Para usar os glyphicons Bootstrap, adicione a seguinte linha dentro da <head> seção de sua página HTML: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> Exemplo: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <i class="glyphicon glyphicon-cloud"></i> <i class="glyphicon glyphicon-remove"></i> <i class="glyphicon glyphicon-user"></i> <i class="glyphicon glyphicon-envelope"></i>
______________________________________________________________________________________________ Curso Técnico em Informática 73 Criação de sites <i class="glyphicon glyphicon-thumbs-up"></i> </body> </html> Resultado: Ícones do Google Para usar os ícones do Google, adicione a seguinte linha dentro da <head>seção de sua página HTML: <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> Exemplo: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <i class="material-icons">cloud</i> <i class="material-icons">favorite</i> <i class="material-icons">attachment</i> <i class="material-icons">computer</i> <i class="material-icons">traffic</i> </body> </html> Resultado: 2.15 Links CSS Com CSS, as ligações podem ser denominadas em maneiras diferentes. Texto Link Texto Link Link Botão Botão Link Links de estilo Os links podem ser decorados com qualquer propriedade CSS (por exemplo color, font- family, background, etc.). Os quatro estados de links são:  a:link - uma ligação normal e não visitada;  a:visited - um link que o usuário visitou;  a:hover - um link quando o usuário passa o mouse sobre ele;
______________________________________________________________________________________________ Curso Técnico em Informática 74 Criação de sites  a:active - um link no momento em que ele é clicado. Utiliza-se a propriedade text-decoration para remover sublinhados de links. 2.16 Listas CSS As propriedades da lista CSS permitem:  Definir marcadores de itens de lista diferentes para listas ordenadas;  Definir marcadores de itens de lista diferentes para listas não ordenadas;  Definir uma imagem como marcador de item de lista;  Adicionar cores de fundo a listas e itens de lista. Propriedade Descrição list-style Define todas as propriedades de uma lista em uma declaração. list-style-image Especifica uma imagem como o marcador de item de lista. list-style-position Especifica se os marcadores de itens de lista devem aparecer dentro ou fora do fluxo de conteúdo. list-style-type Especifica o tipo de marcador de item de lista. 2.17 Tabelas CSS Com as propriedades CSS é possível estilizar a tabela. Segue abaixo, as propriedades de tabela. Propriedade Descrição border Seta uma borda para a tabela. border-collapse Especifica que a tabela deve ter uma borda única. border-spacing Especifica a distância entre as bordas e as células adjacentes. caption-side Especifica o posicionamento de uma legenda de tabela.
______________________________________________________________________________________________ Curso Técnico em Informática 75 Criação de sites empty-cells Especifica se deseja ou não exibir bordas e plano de fundo em células vazias em uma tabela. table-layout Define o layout para todas as tabelas. 2.18 Propriedade display A propriedade display é a propriedade CSS mais importante para controlar layout. A propriedade display especifica como um elemento é exibido. Cada elemento HTML tem um valor de exibição padrão dependendo do tipo do elemento. O valor de exibição padrão para a maioria dos elementos é block ou inline. Elemento de nível block Um elemento de nível de bloco sempre começa em uma nova linha e ocupa toda a largura disponível (se estende para a esquerda e para a direita o máximo possível). O elemento <div> é um elemento de nível de bloco. Exemplos de elementos de nível de bloco: <div> <h1> - <h6> <p> <form> <header> <footer> <section> Elementos incorporados (inline) Um elemento inline não inicia em uma nova linha e ocupa apenas a largura que for necessária. Este é um elemento inline <span> dentro de um parágrafo. Exemplos de elementos inline: <span> <a> <img>
______________________________________________________________________________________________ Curso Técnico em Informática 76 Criação de sites Display none É muito utilizado com JavaScript para ocultar e mostrar elementos sem excluir e recriá-los. O <script> elemento usa display: none; como padrão. Substituir o valor de exibição padrão Como mencionado, cada elemento tem um valor de exibição padrão. No entanto, você pode substituir isso. Alterar um elemento inline para um elemento de bloco, ou vice-versa, pode ser útil para fazer a página parecer uma maneira específica e ainda seguir os padrões da web. Um exemplo comum é fazer elementos <li> embutidos para menus horizontais: Exemplo: li { display: inline; } 2.19 width e max-width Um elemento de nível de bloco sempre ocupa toda a largura disponível (estende-se para a esquerda e para a direita tanto quanto possível). A configuração width de um elemento de nível de bloco impedirá que ele se estenda até as bordas de seu recipiente. Em seguida, você pode definir as margens para auto, assim, horizontalmente centralizar o elemento dentro de seu contêiner. O elemento ocupará a largura especificada e o espaço restante será dividido igualmente entre as duas margens. O problema de especificar o tamanho de um elemento com width é que por exemplo, se uma div fosse definida com 700px, quando a janela do navegador for menor aparecerá uma barra de rolagem. Porém, se for utilizado max-width, em vez de width, irá melhorar a manipulação do navegador de janelas pequenas tornando o site utilizável em dispositivos pequenos. 2.20 position A propriedade position especifica o tipo de método de posicionamento utilizado para um elemento (estático, relativo, fixo ou absoluto). Existem quatro valores de posição diferentes:  static  relative  fixed  absolute Os elementos são posicionados usando as propriedades superior, inferior, esquerda e direita. No entanto, essas propriedades não funcionarão a menos que a propriedade position seja definida primeiro. Eles também funcionam de forma diferente dependendo do valor da posição. Posição estática Os elementos HTML são posicionados estáticos por padrão. Esses elementos estáticos não são afetados pelas propriedades superior, inferior, esquerda e direita. Um elemento com position: static; não está posicionado de forma especial. Ele é sempre posicionado de acordo com o fluxo da página.
______________________________________________________________________________________________ Curso Técnico em Informática 77 Criação de sites Posição relativa Um elemento com position: relative; é posicionado em relação à sua posição normal. Definir as propriedades superior, direita, inferior e esquerda de um elemento relativamente posicionado fará com que seja ajustado longe de sua posição normal. Outros conteúdos não serão ajustados para caber em qualquer espaço deixado pelo elemento. Posição fixo Um elemento com position: fixed; é posicionado em relação à janela de visualização, o que significa que ele permanece sempre no mesmo local, mesmo que a página seja deslocada. As propriedades superior, direita, inferior e esquerda são usadas para posicionar o elemento. Um elemento fixo não deixa uma lacuna na página onde ele normalmente teria sido localizado. Posição absoluta Um elemento com position: absolute; é posicionado em relação ao ancestral posicionado mais próximo (em vez de posicionado em relação à janela de visualização, como fixo). Porém, se um elemento posicionado absoluto não tiver ancestrais posicionados, ele usa o corpo do documento e move-se com a rolagem da página. Nota: Um elemento "posicionado" é aquele cuja posição é qualquer coisa exceto estático (static). Elementos sobrepostos Quando os elementos são posicionados, eles podem sobrepor outros elementos. A propriedade z-index especifica a ordem da pilha de um elemento (que deve ser colocado na frente ou atrás dos outros). Um elemento pode ter uma ordem de pilha positiva ou negativa: img { position: absolute; left: 0px; top: 0px; z-index: -1; } Todas as propriedades de posicionamento CSS: Propriedade Descrição bottom Define a borda da margem inferior para uma caixa posicionada. clip Um elemento absolutamente posicionado. cursor Especifica o tipo de cursor a ser exibido. left Define a borda da margem esquerda para uma caixa posicionada.
______________________________________________________________________________________________ Curso Técnico em Informática 78 Criação de sites overflow Especifica o que acontece se o conteúdo ultrapassa a caixa de um elemento. overflow-x Especifica o que fazer com as margens esquerda / direita do conteúdo se ele ultrapassar a área de conteúdo do elemento. overflow-y Especifica o que fazer com as bordas superior / inferior do conteúdo se ele ultrapassar a área de conteúdo do elemento. position Especifica o tipo de posicionamento de um elemento. right Define a borda da margem direita para uma caixa posicionada. top Define a borda da margem superior para uma caixa posicionada. z-index Define a ordem de sobreposição dos elementos. 2.21 float e clear A propriedade float especifica se um elemento deve ou não flutuar. Já a clear é usada para controlar o comportamento de elementos flutuantes. Em seu uso mais simples, a propriedade float pode ser usada para fazer com que o texto fique em torno de imagens. A propriedade clear é usada para controlar o comportamento de elementos flutuantes. Especifica em quais lados de um elemento, os elementos flutuantes não estão autorizados a flutuar. Pode-se utilizar a propriedade clearfix Hack caso um elemento seja mais alto que o elemento que o contém e ele for flutuado, nesse caso, ele será transbordado fora de seu contêiner. Para resolver esse problema, basta utilizar overflow: auto; para adicionar o conteúdo ao elemento que o contém.
______________________________________________________________________________________________ Curso Técnico em Informática 79 Criação de sites 2.4 Responsividade 2.4.1 Introdução O design web responsivo faz com que sua página da web fique bem em todos os dispositi- vos. As páginas da Web podem ser visualizadas usando muitos dispositivos diferentes: desktops, tablets e telefones. Sua página da web deve ficar bem, e ser fácil de usar, independentemente do dispositivo. As páginas da Web não devem deixar de fora informações para caber dispositivos menores, mas sim adaptar seu conteúdo para caber qualquer dispositivo: Ele é chamado de web design responsivo quando você usa CSS e HTML para redimensionar, ocultar, encolher, ampliar ou mover o conteúdo para torná-lo bem em qualquer tela. 2.4.2 Viewport A viewport é a área visível do usuário de uma página da web. Ela varia de acordo com o dispositivo e será menor em um telefone celular do que em uma tela de computador. Antes de tablets e telefones celulares, páginas da web foram projetadas apenas para telas de computador, e era comum para páginas da web ter um design estático e um tamanho fixo. Então, quando começamos a navegar na internet usando tablets e telefones celulares, páginas de tamanho fixo eram muito grandes para caber na viewport. Para corrigir isso, os navegadores nesses dispositivos reduziram a página da Web inteira para caber na tela. 2.4.2.1 Configurando o Viewport O HTML5 introduziu um método para permitir que os designers da Web assumissem o controle sobre a viewport, através da tag <meta>. Você deve incluir o seguinte elemento <meta> viewport em todas as suas páginas da web: <meta name="viewport" content="width=device-width, initial-scale=1.0"> Um elemento <meta> viewport fornece instruções do navegador sobre como controlar as dimensões e dimensionamento da página. A width=device-width é a parte que define a largura da página para seguir a largura da tela do dispositivo (que variará dependendo do dispositivo). A initial- scale=1.0 define o nível de zoom inicial quando a página é carregada pela primeira vez pelo navegador.
______________________________________________________________________________________________ Curso Técnico em Informática 80 Criação de sites Observe abaixo, a diferença do mesmo layout, porém um utiliza a tag <meta> e outro não. Sem a tag <meta> Com a tag <meta> Dicas de conteúdo de tamanho para o Viewport Se o usuário for forçado a rolar horizontalmente, ou diminuir o zoom, para ver toda a página da web, isso resultará em uma má experiência do usuário. Algumas regras adicionais a seguir: 1. NÃO utilize grandes elementos de largura fixa - Por exemplo, se uma imagem for exibida com uma largura maior do que a janela de visualização, ela pode fazer com que a janela de exibição rode horizontalmente. Lembre-se de ajustar este conteúdo para caber dentro da largura da viewport. 2. NÃO deixe que o conteúdo dependa de uma largura de janela de exibição específica para ficar bom - Como as dimensões de tela e largura em pixels CSS variam amplamente entre dispositivos, o conteúdo não deve depender de uma largura de janela de exibição específica. 3. Utilize consultas de mídia CSS para aplicar estilo diferente para telas pequenas e grandes - Definir grandes larguras CSS absolutas para elementos de página, fará com que o elemento seja muito grande para a viewport em um dispositivo menor. Em vez disso, considere usar valores de largura relativa, como largura: 100%. Além disso, tenha cuidado ao usar valores de posicionamento absoluto grandes. Isso pode fazer com que o elemento caia fora da viewport em dispositivos pequenos. 2.4.2.2 Grid-View Muitas páginas da web são baseadas em uma grade-view, o que significa que a página é
______________________________________________________________________________________________ Curso Técnico em Informática 81 Criação de sites dividida em colunas: Usar uma grade de exibição é muito útil ao projetar páginas da web. Facilita a colocação de elementos na página. Uma visão de grade responsiva geralmente tem 12 colunas e tem uma largura total de 100%, e diminuirá e se expandirá à medida que você redimensiona a janela do navegador. 2.4.2.3 Como criar um Grid-View responsivo Certifique-se de que todos os elementos HTML tenham a propriedade box-sizing definida como border-box. Isso garante que o preenchimento e borda estão incluídos na largura total e altura dos elementos. Adicione o seguinte código em seu CSS: * { box-sizing: border-box; } O exemplo a seguir mostra uma página da Web responsiva simples, com duas colunas:
______________________________________________________________________________________________ Curso Técnico em Informática 82 Criação de sites Exemplo: .menu { width: 25%; float: left; } .main { width: 75%; float: left; } O exemplo acima seria bom se a página Web contiver apenas duas colunas. No entanto, nós queremos usar uma grade responsiva-view com 12 colunas, para ter mais controle sobre a página da web. Primeiro, devemos calcular a porcentagem de uma coluna: 100% / 12 colunas = 8,33%. Em seguida, fazemos uma classe para cada uma das 12 colunas class="col-" e um número definindo quantas colunas a seção deve abranger: CSS: .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;}
______________________________________________________________________________________________ Curso Técnico em Informática 83 Criação de sites .col-12 {width: 100%;} Todas estas colunas devem estar flutuando para a esquerda e ter um preenchimento de 15px: CSS: [class*="col-"] { float: left; padding: 15px; border: 1px solid red; } Cada linha deve ser acondicionada em um arquivo <div>. O número de colunas dentro de uma linha deve sempre somar até 12: HTML: <div class="row"> <div class="col-3">...</div> <!-- 25% --> <div class="col-9">...</div> <!-- 75% --> </div> As colunas dentro de uma linha estão todas flutuando para a esquerda e, portanto, são retiradas do fluxo da página e outros elementos serão colocados como se as colunas não existissem. Para evitar isso, vamos adicionar um estilo que limpa o fluxo: CSS: .row::after { content: ""; clear: both; display: table; } 2.4.2.4 Media Query A consulta de mídia é uma técnica CSS introduzida no CSS3. Ele usa a regra @media para incluir um bloco de propriedades CSS somente se uma determinada condição for verdadeira.
______________________________________________________________________________________________ Curso Técnico em Informática 84 Criação de sites Exemplo: Se a janela do navegador for menor que 500px, a cor do plano de fundo mudará para rosa: @media only screen and (max-width: 500px) { body { background-color: pink; } } Sempre projetar primeiro o desing mobile depois para desktop ou qualquer outro dispositivo (Isso fará com que a página seja exibida mais rapidamente em dispositivos menores). Isso significa que devemos fazer algumas alterações em nosso CSS. Em vez de mudar estilos quando a largura fica menor do que 768px, devemos alterar o design quando a largura fica maior do que 768px. Exemplo: /* Para mobile: */ [class*="col-"] { width: 100%; } @media only screen and (min-width: 768px) { /* Para desktop: */ .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;}
______________________________________________________________________________________________ Curso Técnico em Informática 85 Criação de sites .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} } Orientação: Retrato / Paisagem As consultas de mídia também podem ser usadas para alterar o layout de uma página, dependendo da orientação do navegador. Você pode ter um conjunto de propriedades CSS que só serão aplicadas quando a janela do navegador for mais larga do que sua altura, uma orientação chamada "Paisagem": Exemplo: A página da web terá um fundo rosa se a orientação estiver no modo paisagem: @media only screen and (orientation: landscape) { body { background-color: pink; } } 2.4.2.5 Imagens Usando a propriedade width Se a propriedade width estiver definida como 100%, a imagem será responsiva para cima e para baixo: Exemplo: img { width: 100%; height: auto; } Usando a propriedade max-width Se a propriedade max-width estiver definida como 100%, a imagem será reduzida se for necessário, mas nunca até ser maior do que seu tamanho original:
______________________________________________________________________________________________ Curso Técnico em Informática 86 Criação de sites Exemplo: img { max-width: 100%; height: auto; } Imagens de fundo Imagens de plano de fundo também podem responder ao redimensionamento e dimensionamento. Aqui vamos mostrar três métodos diferentes: 1. Se a propriedade background-size estiver definida como "contain", a imagem de fundo será dimensionada e tentará ajustar a área de conteúdo. No entanto, a imagem manterá sua relação de aspecto (a relação proporcional entre a largura e a altura da imagem): Código CSS: div { width: 100%; height: 400px; background-image: url('flores.jpg'); background-repeat: no-repeat; background-size: contain; border: 1px solid red; } 2. Se a propriedade background-size estiver definida como "100% 100%", a imagem de fundo será
______________________________________________________________________________________________ Curso Técnico em Informática 87 Criação de sites esticada para cobrir toda a área de conteúdo: Código CSS: div { width: 100%; height: 400px; background-image: url('img_flowers.jpg'); background-size: 100% 100%; border: 1px solid red; } 3. Se a propriedade background-size estiver definida como "cover", a imagem de fundo será dimensionada para cobrir toda a área de conteúdo. Observe que o valor "cover" mantém a relação de aspecto e parte da imagem de plano de fundo pode ser cortada: Código CSS: div {
______________________________________________________________________________________________ Curso Técnico em Informática 88 Criação de sites width: 100%; height: 400px; background-image: url('img_flowers.jpg'); background-size: cover; border: 1px solid red; } O elemento <picture> funciona de forma semelhante aos elementos <video> e <audio>. Você configura imagens diferentes e a primeira imagem que se encaixa as preferências é aquela que está sendo usada: Exemplo: <picture> <source srcset="flor.jpg" media="(max-width: 400px)"> <source srcset="flores.jpg"> <img src="vaso_flores.jpg" alt="Vaso de flores"> </picture>  O atributo srcset é obrigatório e define a origem da imagem;  O atributo media é opcional e aceita as consultas de mídia encontradas na regra CSS @media;  Você também deve definir um elemento <img> para navegadores que não suportam o <picture>elemento. 2.4.2.6 Frameworks Existem muitos frameworks CSS existentes que oferecem design responsivo. Eles são gratuitos e fáceis de usar. Usando W3.CSS Uma ótima maneira de criar um design responsivo, é usar um estilo responsivo, como W3.CSS que torna mais fácil desenvolver sites que parecem agradáveis em qualquer tamanho: Desktop, laptop, tablet ou telefone; Bootstrap Outro framework popular é o Bootstrap, ele usa HTML, CSS e jQuery para fazer páginas da Web responsivas.
______________________________________________________________________________________________ Curso Técnico em Informática 89 Criação de sites CONTINUA..

Mais conteúdo relacionado

DOCX
Atividade avaliativa de ciências do 2 ano a e b
porAndré Moraes
 
DOC
Avaliação de geografia 4° bimestre do 1° ano
porKatia Lopes
 
DOCX
Termo responsabilidade
porgravanadas
 
PDF
Produzindo texto informativo - rinoceronte
porMary Alvarenga
 
DOCX
Ficha técnica
poraldreatrindade
 
DOCX
Avalcienciasprimeira
porJanaí Bayão
 
PDF
1ª avaliação de português 10 pontos 1º bim para o blog
porKelry Carvalho
 
PDF
Apostila de ensino religioso pdf
porJussaney Ranielly Godoy
 
Atividade avaliativa de ciências do 2 ano a e b
porAndré Moraes
 
Avaliação de geografia 4° bimestre do 1° ano
porKatia Lopes
 
Termo responsabilidade
porgravanadas
 
Produzindo texto informativo - rinoceronte
porMary Alvarenga
 
Ficha técnica
poraldreatrindade
 
Avalcienciasprimeira
porJanaí Bayão
 
1ª avaliação de português 10 pontos 1º bim para o blog
porKelry Carvalho
 
Apostila de ensino religioso pdf
porJussaney Ranielly Godoy
 

Mais procurados

DOC
Caça+palavras
porVinicius O Resiliente
 
PDF
Oficio tombamento
poretneves2011
 
DOC
Ficha72
pordannee468
 
PDF
Receita pao de queijo atividades
porZairaGreis1
 
DOCX
AUTORIZAÇÃO MENORES
porMINHANO
 
DOC
TERMO DE IMAGEM ATUALIZADO
porO MURAL Projeto
 
PDF
20 atividades para colagens e pinturas em flores
porJosy Fonseca
 
PDF
3a2022 ATIVIDADES COM PALITOS DIA DO ÍNDIO .pdf
porSimoneHelenDrumond
 
DOCX
Atividades com numerais até o 20 vizinhos
porlyzandra de camargo
 
PDF
Capa de avaliações
porRoseli Aparecida Tavares
 
PDF
Cores primárias
porMary Alvarenga
 
DOC
Avaliacao de-matematica-1º-bimestre-5º-ano (1)
porUesb - Universidade Estadual do Sudoeste da Bahia
 
DOCX
Avaliação de Língua Portuguesa
porMaria Élia David de Assis Ferreira
 
PDF
Avaliação diagnóstica de Língua Portuguesa 1º ano - 2015
porMaria Élia David de Assis Ferreira
 
DOCX
Texto lacunado e atividade de estranhamento
porRoseli Aparecida Tavares
 
DOCX
Teste diagnóstico a população - indicadores demograficos(1)
porCláudia Alvarinho
 
PDF
APOSTILA DE CIENCIAS JUNHO.pdf
poralessandra souza bispo
 
PDF
Atividades dia da mulher 1
porSimoneHelenDrumond
 
DOC
Animais OvíParos E VivíParos E Bi
porguest95dd02
 
DOCX
Sequência com encartes
porDário Reis
 
Caça+palavras
porVinicius O Resiliente
 
Oficio tombamento
poretneves2011
 
Ficha72
pordannee468
 
Receita pao de queijo atividades
porZairaGreis1
 
AUTORIZAÇÃO MENORES
porMINHANO
 
TERMO DE IMAGEM ATUALIZADO
porO MURAL Projeto
 
20 atividades para colagens e pinturas em flores
porJosy Fonseca
 
3a2022 ATIVIDADES COM PALITOS DIA DO ÍNDIO .pdf
porSimoneHelenDrumond
 
Atividades com numerais até o 20 vizinhos
porlyzandra de camargo
 
Capa de avaliações
porRoseli Aparecida Tavares
 
Cores primárias
porMary Alvarenga
 
Avaliacao de-matematica-1º-bimestre-5º-ano (1)
porUesb - Universidade Estadual do Sudoeste da Bahia
 
Avaliação de Língua Portuguesa
porMaria Élia David de Assis Ferreira
 
Avaliação diagnóstica de Língua Portuguesa 1º ano - 2015
porMaria Élia David de Assis Ferreira
 
Texto lacunado e atividade de estranhamento
porRoseli Aparecida Tavares
 
Teste diagnóstico a população - indicadores demograficos(1)
porCláudia Alvarinho
 
APOSTILA DE CIENCIAS JUNHO.pdf
poralessandra souza bispo
 
Atividades dia da mulher 1
porSimoneHelenDrumond
 
Animais OvíParos E VivíParos E Bi
porguest95dd02
 
Sequência com encartes
porDário Reis
 

Semelhante a Apostila Criação de Sites

PDF
Apostila Criação de Sites I
porinfo_cimol
 
PDF
HTML 5 - TCC MARLLON BIANCHINI
porMarllon Bianchini
 
PPTX
HTML5, CSS3 e o futuro da web
porDiego Pessoa
 
PDF
1191535521 Curso De Html 41.01 E Introducao Ao Xhtml 1.0
portiagosouselo
 
PDF
0. Introdução ao HTML pptx.pdf
porRubenManhia
 
PDF
HTML5
porAlex Camargo
 
PDF
Minicurso de HTML básico - Atualizado para HTML5
porJose Augusto Cintra
 
PDF
HTML
pordotTEC
 
PDF
Html
porGustavo Guerreiro
 
PDF
Html+para+iniciantes
porbradock1964
 
PDF
HyperText Markup Language
porMateus Ferri Schmitz
 
PDF
Html
porJoel Camillo
 
PDF
Laboratório Web 2013-2014 - HTML5
porRicardo Pereira Rodrigues
 
PPTX
Html 5
porFernando Pontes
 
PPTX
Introdução de web
porSedu
 
DOC
Programacao para Web I Plano de Ensinodoc
porDESIGN DIGITAL UNIARA 2012
 
PDF
O pontapé inicial para sua carreira de programador!
porProfessorSergioGurge
 
PPTX
Introdução a HTML5
porSalvador Torres
 
PDF
Criação de Sites - Manual do Aluno (web developing - student's manual )
porDenise Pinho
 
PDF
Html5
porthiagosenac
 
Apostila Criação de Sites I
porinfo_cimol
 
HTML 5 - TCC MARLLON BIANCHINI
porMarllon Bianchini
 
HTML5, CSS3 e o futuro da web
porDiego Pessoa
 
1191535521 Curso De Html 41.01 E Introducao Ao Xhtml 1.0
portiagosouselo
 
0. Introdução ao HTML pptx.pdf
porRubenManhia
 
HTML5
porAlex Camargo
 
Minicurso de HTML básico - Atualizado para HTML5
porJose Augusto Cintra
 
HTML
pordotTEC
 
Html
porGustavo Guerreiro
 
Html+para+iniciantes
porbradock1964
 
HyperText Markup Language
porMateus Ferri Schmitz
 
Html
porJoel Camillo
 
Laboratório Web 2013-2014 - HTML5
porRicardo Pereira Rodrigues
 
Html 5
porFernando Pontes
 
Introdução de web
porSedu
 
Programacao para Web I Plano de Ensinodoc
porDESIGN DIGITAL UNIARA 2012
 
O pontapé inicial para sua carreira de programador!
porProfessorSergioGurge
 
Introdução a HTML5
porSalvador Torres
 
Criação de Sites - Manual do Aluno (web developing - student's manual )
porDenise Pinho
 
Html5
porthiagosenac
 

Mais de info_cimol

PPT
Modelagem de Dados - Introdução à UML
porinfo_cimol
 
PPTX
Aula III HTML - Criação de Sites I
porinfo_cimol
 
PDF
Apostila de Banco de Dados
porinfo_cimol
 
PPTX
Aula II - Criação de sites I
porinfo_cimol
 
PPTX
Aula 5 PHP - Criação de sites II
porinfo_cimol
 
PPTX
aula 6 PHP - Criação de sites II
porinfo_cimol
 
PPTX
Funções PHP - Criação de sites II
porinfo_cimol
 
PPTX
Arrays PHP - Criação de sites II
porinfo_cimol
 
PPTX
Introdução ao PHP - Criação de sites II
porinfo_cimol
 
PPTX
Mapeamento do modelo conceitual para o lógico - Banco de Dados
porinfo_cimol
 
PPTX
Introdução a modelagem de dados - Banco de Dados
porinfo_cimol
 
PPTX
Modelo Conceitual - Banco de Dados
porinfo_cimol
 
PPTX
Introdução a modelagem de dados parte II - Banco de Dados
porinfo_cimol
 
PDF
JavaScript
porinfo_cimol
 
PDF
JQUERY
porinfo_cimol
 
PDF
Introdução JQuery
porinfo_cimol
 
PDF
Exercitando modelagem em UML
porinfo_cimol
 
PDF
E-Book de estudos
porinfo_cimol
 
PDF
Ebook curso linux ubuntu v-1.0
porinfo_cimol
 
PDF
Ebook 6-passos
porinfo_cimol
 
Modelagem de Dados - Introdução à UML
porinfo_cimol
 
Aula III HTML - Criação de Sites I
porinfo_cimol
 
Apostila de Banco de Dados
porinfo_cimol
 
Aula II - Criação de sites I
porinfo_cimol
 
Aula 5 PHP - Criação de sites II
porinfo_cimol
 
aula 6 PHP - Criação de sites II
porinfo_cimol
 
Funções PHP - Criação de sites II
porinfo_cimol
 
Arrays PHP - Criação de sites II
porinfo_cimol
 
Introdução ao PHP - Criação de sites II
porinfo_cimol
 
Mapeamento do modelo conceitual para o lógico - Banco de Dados
porinfo_cimol
 
Introdução a modelagem de dados - Banco de Dados
porinfo_cimol
 
Modelo Conceitual - Banco de Dados
porinfo_cimol
 
Introdução a modelagem de dados parte II - Banco de Dados
porinfo_cimol
 
JavaScript
porinfo_cimol
 
JQUERY
porinfo_cimol
 
Introdução JQuery
porinfo_cimol
 
Exercitando modelagem em UML
porinfo_cimol
 
E-Book de estudos
porinfo_cimol
 
Ebook curso linux ubuntu v-1.0
porinfo_cimol
 
Ebook 6-passos
porinfo_cimol
 

Apostila Criação de Sites

  • 1.
    ______________________________________________________________________________________________ Curso Técnico emInformática 1 Criação de sites ESCOLA TÉCNICA ESTADUAL MONTEIRO LOBATO Criação de Sites Curso Técnico em Informática
  • 2.
    ______________________________________________________________________________________________ Curso Técnico emInformá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 ....................................................................15 1.4.1.5 Formatação de texto (estilo físico x estilo lógico) ...............................16 1.4.1.6 Fonte ..................................................................................................18 1.4.1.6.1 Face......................................................................................18 Sumário
  • 3.
    ______________________________________________________________________________________________ Curso Técnico emInformática 3 Criação de sites 1.4.1.6.2 Size.......................................................................................19 1.4.1.6.3 Color .....................................................................................20 1.4.1.7 Cor .....................................................................................................21 1.4.1.8 Alinhamento e recuo...........................................................................22 1.4.1.8.1 Alinhamento (DIV).................................................................22 1.4.1.8.2 Recuo (BLOCKQUOTE) .......................................................22 1.4.1.9 Caracteres especiais e comentários ..................................................23 1.4.1.9.1 Caracteres especiais ............................................................23 1.4.1.9.2 Comentários .........................................................................24 1.4.2 Links ................................................................................................................25 1.4.2.1 O atributo target .................................................................................25 1.4.2.2 Imagem como Link .............................................................................25 1.4.2.3 Criar um marcador .............................................................................25 1.4.3 Imagens...........................................................................................................26 1.4.3.1 Imagem no documento HTML............................................................26 1.4.3.2 Tipos de imagem ................................................................................26 1.4.3.3 Atributos do elemento IMG.................................................................26 1.4.3.3.1 Src, border, alt ......................................................................26 1.4.3.3.2 Width, height.........................................................................27 1.4.3.3.3 Align......................................................................................28 1.4.3.4 Imagem de fundo ...............................................................................30 1.4.4 Vídeos..............................................................................................................30 1.4.5 Listas ...............................................................................................................31 1.4.5.1 Lista ordenada e lista não-ordenada..................................................31 1.4.5.2 Atributos do elemento OL...................................................................32 1.4.5.3 Atributos do elemento UL ...................................................................33 1.4.5.4 Lista de definição ...............................................................................34 1.4.5.5 Aninhando de listas ............................................................................34 1.4.6 Tabelas ............................................................................................................36 1.4.6.1 Linha de tabela: TR ............................................................................38 1.4.6.2 Título e legenda: CAPTION................................................................39 1.5 Formulários..................................................................................................................41 1.5.1 Elementos do formulário ..................................................................................41 1.5.1.1 O elemento <form> ............................................................................41 1.5.1.2 O elemento <input>............................................................................41
  • 4.
    ______________________________________________________________________________________________ Curso Técnico emInformática 4 Criação de sites 1.5.1.3 O elemento <select> ..........................................................................41 1.5.1.4 O elemento <option>..........................................................................42 1.5.1.5 O elemento <textarea>.......................................................................42 1.5.1.6 O elemento <button>..........................................................................42 1.5.1.7 Elemento <datalist>............................................................................42 1.5.1.8 Elemento <keygen> ...........................................................................43 1.5.1.9 Elemento <output> .............................................................................43 1.5.2 Atributos .....................................................................................................................44
  • 5.
    ______________________________________________________________________________________________ Curso Técnico emInformá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 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. Esse artigo 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.
    ______________________________________________________________________________________________ Curso Técnico emInformá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 software que fazem essa função, cada um com suas caracte- rí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.
    ______________________________________________________________________________________________ Curso Técnico emInformá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:  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.
  • 8.
    ______________________________________________________________________________________________ Curso Técnico emInformática 8 Criação de sites  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 Etiqueta 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 etiquetas1 - símbolos da linguagem HTML identifica- dos pelos sinais "< >" (se for a etiqueta inicial) ou pelos sinais "</ >" (se for a etiqueta final). A etiqueta <I> no código acima marca o início do texto a ser apresentado em itálico, e a eti- queta </I> marca o fim da formatação em itálico. Portanto, tudo o que estiver entre este par de etiquetas <I> e </I> será ficará em itálico. Assim também funcionam as etiquetas <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 elementos2 para construir estruturas como: textos formata- dos, parágrafos, listas, tabelas, etc. Cada elemento, em geral, é composto por três partes: eti- queta inicial + conteúdo + etiqueta final. O elemento itálico exemplifica esta estrutura genérica: Alguns elementos permitem omitir a etiqueta final. Por exemplo, para construir um parágrafo basta explicitar a etiqueta inicial <P>. Exemplo utilizando o elemento P: <P>Primeiro parágrafo. <P>Segundo parágrafo. 1 Etiqueta é a tradução aqui adotada para o termo tag (que é o termo original utilizado nas especificações da linguagem HTML). Alguns autores adotam outras traduções como marcador, rótulo, comando ou mesmo o termo original tag. 2 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.
    ______________________________________________________________________________________________ Curso Técnico emInformática 9 Criação de sites Resultado: Primeiro parágrafo. Segundo parágrafo. Casos como o elemento P (parágrafo), a etiqueta 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 etiqueta final. Por exemplo, o elemento HR (Horizontal Rule) desenha uma linha horizontal - não possui conteúdo nem etiqueta 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: 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> Resultado: Observe, no exemplo acima, que o alinhamento do segundo parágrafo é à direita da página. Na etiqueta 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 va- lor que configura a característica. Cada elemento pode ter associado alguns pares atributo="va- lor" dentro de sua etiqueta inicial.
  • 10.
    ______________________________________________________________________________________________ Curso Técnico emInformática 10 Criação de sites O estudo da linguagem HTML consiste, principalmente, na investigação dos elementos, eti- quetas, atributos e valores que compõem esta linguagem. A figura abaixo (correspondente ao fra- gmento de código do segundo parágrafo do exemplo acima) identifica estes conceitos fundamentais para a compreensão de um código escrito em HTML. 1.3.3.1 Convenções As etiquetas, 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 etiqueta. 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> 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 etiqueta </HTML>. O cabeçalho, delimitado pelas etiquetas <HEAD> e </HEAD>, destina-se a conter informações sobre
  • 11.
    ______________________________________________________________________________________________ Curso Técnico emInformática 11 Criação de sites o documento - 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 etiquetas <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. 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 etiquetas <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>
  • 12.
    ______________________________________________________________________________________________ Curso Técnico emInformática 12 Criação de sites 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 bloco 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"> 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>
  • 13.
    ______________________________________________________________________________________________ Curso Técnico emInformática 13 Criação de sites 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) 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 etiqueta inicial do elemento P, o parágrafo é alinhado à esquerda (valor padrão).
  • 14.
    ______________________________________________________________________________________________ Curso Técnico emInformática 14 Criação de sites 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 torna-se bastante simples; a desvantagem é que torna-se simples demais. Como o texto é apresentado exatamente como digitado, ignora-se o tamanho da janela em que o texto é visualizado. Experimente redimen- sionar 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 enquadrado inde- sejá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. 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>
  • 15.
    ______________________________________________________________________________________________ Curso Técnico emInformática 15 Criação de sites 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 (Heading = cabeçalho) pode ser utilizado para construir os cabeçalhos das seções de um texto. Existem seis níveis de cabeçalhos, de H1 (o primeiro e mais importante nível) a H6 (o último e menos impor- tante). O cabeçalho, assim como o parágrafo, também admite o atributo align. 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>
  • 16.
    ______________________________________________________________________________________________ Curso Técnico emInformática 16 Criação de sites <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 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 eti- queta inicial e etiqueta 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>
  • 17.
    ______________________________________________________________________________________________ Curso Técnico emInformática 17 Criação de sites 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 <STRIKE>ex- clui</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> <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
  • 18.
    ______________________________________________________________________________________________ Curso Técnico emInformática 18 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 verdadeiros, em dados que são falsos por eu, artisticamente, não saber senão mentir" é uma citação dentro 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: 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
  • 19.
    ______________________________________________________________________________________________ Curso Técnico emInformática 19 Criação de sites 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 pa- drã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 fonte. 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> 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
  • 20.
    ______________________________________________________________________________________________ Curso Técnico emInformática 20 Criação de sites 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 atra- vé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-es- curo</FONT><BR> <FONT color="silver">Cinza-Claro</FONT><BR> <FONT co- lor="white">Branco</FONT><BR> <FONT color="red">Vermelho</FONT><BR> <FONT color="maroon">Verme- lho-escuro</FONT><BR> <FONT color="yellow">Amarelo</FONT><BR> <FONT color="olive">Ama- relo-escuro</FONT><BR> <FONT color="lime">Verde</FONT><BR> <FONT color="green">Verde-es- curo</FONT><BR> <FONT color="aqua">Ciano</FONT><BR> <FONT color="teal">Ciano-es- curo</FONT><BR> <FONT color="blue">Azul</FONT><BR> <FONT color="navy">Azul-es- curo</FONT><BR> <FONT color="fuchsia">Magenta</FONT><BR> <FONT color="purple">Ma- genta-escuro</P></FONT><BR> Resultado: Preto Cinza-escuro Cinza-Claro Branco Vermelho Vermelho-escuro Amarelo
  • 21.
    ______________________________________________________________________________________________ Curso Técnico emInformática 21 Criação de sites 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> Para especificar o valor da cor,<BR> <FONT color="lime">utilize o nome</FONT><BR> <FONT color="#00FF00">ou o código da cor.</FONT> </P> </BODY> </HTML> Resultado: Para especificar o valor da cor, utilize o nome ou o código da cor. 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
  • 22.
    ______________________________________________________________________________________________ Curso Técnico emInformática 22 Criação de sites 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) 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>
  • 23.
    ______________________________________________________________________________________________ Curso Técnico emInformática 23 Criação de sites 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. 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 &
  • 24.
    ______________________________________________________________________________________________ Curso Técnico emInformática 24 Criação de sites ("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). á &aacute; Á &Aacute; é &eacute; ó &eacute; ã &atilde; Ã &Atilde; õ &otilde; â &acirc; Â &Acirc; ê &ecirc; ô &ocirc; à &agrave; À &Agrave; è &egrave; ò &ograve; ç &ccedil; Ç &Ccedil; ü &uml; Ü &uml; 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>
  • 25.
    ______________________________________________________________________________________________ Curso Técnico emInformática 25 Criação de sites 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> 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 marcador, 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>
  • 26.
    ______________________________________________________________________________________________ Curso Técnico emInformática 26 Criação de sites 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 atri- buto src (source = origem) aponta para o endereço URI da imagem. <IMG src="uri"> 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. Cada 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 com fronteiras nítidas e com poucas cores (logotipos, ícones, esquemas etc.) enquanto o formato JPEG é mais adequado para imagens com muitas cores e sem fronteiras nítidas (geralmente, fotografias). 1.4.3.3 Atributos do elemento IMG 1.4.3.3.1 Src, border, alt O atributo src (resource) aponta para o endereço URI do arquivo de imagem. Este é o único atributo obrigatório do elemento IMG - não há imagem sem especificar este atributo. O atributo bor- der especifica a espessura da borda que irá envolver a imagem.
  • 27.
    ______________________________________________________________________________________________ Curso Técnico emInformática 27 Criação de sites Exemplo utilizando o atributo border: O atributo alt (alternate text) especifica o texto que é apresentado quando o usuário fica com o mouse parado sobre a imagem. 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:
  • 28.
    ______________________________________________________________________________________________ Curso Técnico emInformática 28 Criação de sites 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. 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 esquema: 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"
  • 29.
    ______________________________________________________________________________________________ Curso Técnico emInformática 29 Criação de sites alt="1914"> 1914 - Escreve poemas dos três heterônimos. </P> <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.
  • 30.
    ______________________________________________________________________________________________ Curso Técnico emInformática 30 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 etiqueta 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. É sem- pre 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>: Exemplo de código utilizando o elemento vídeo: <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4">
  • 31.
    ______________________________________________________________________________________________ Curso Técnico emInformática 31 Criação de sites <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> Defines 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> Resultado: 1. Item número um. 2. Item número dois. 3. Item número três. Uma lista ordenada é delimitada pelas etiquetas <OL> e </OL> (Ordered List). Cada item da lista é delimitado pelas etiquetas <LI> e </LI> (List Item).
  • 32.
    ______________________________________________________________________________________________ Curso Técnico emInformática 32 Criação de sites 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 alta 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. O quadro abaixo resume os principais atributos do elemento OL: type=estilo_nu- meraçã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
  • 33.
    ______________________________________________________________________________________________ Curso Técnico emInformática 33 Criação de sites 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 square quadrados cheios  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:
  • 34.
    ______________________________________________________________________________________________ Curso Técnico emInformática 34 Criação de sites  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 é constru- ído com o elemento DT (Definition Term) e cada descrição de definição é construída com o ele- mento 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: 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 Aninhando de listas É possível aninhar listas - colocar uma lista dentro de outra podendo, inclusive, misturar listas ordenadas e não-ordenadas. Dependendo da estrutura de lista que se deseja construir, podem existir diversos níveis de aninhamento. Uma boa estratégia para aninhar listas é pensar isolada- mente 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>
  • 35.
    ______________________________________________________________________________________________ Curso Técnico emInformática 35 Criação de sites <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> <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
  • 36.
    ______________________________________________________________________________________________ Curso Técnico emInformática 36 Criação de sites 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 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>
  • 37.
    ______________________________________________________________________________________________ Curso Técnico emInformática 37 Criação de sites </TR> </TABLE> Resultado: O atributo border especifica a espessura da borda ao redor da tabela. O atributo cellpad- ding especifica o espaço entre a moldura da célula e seu conteúdo. O atributo cellspacing espe- cifica 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 redimen- sionar a janela onde o exemplo anterior é visualizado. Observe que a tabela também é redimensi- onada 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)
  • 38.
    ______________________________________________________________________________________________ Curso Técnico emInformática 38 Criação de sites 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 (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>
  • 39.
    ______________________________________________________________________________________________ Curso Técnico emInformática 39 Criação de sites <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 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=alinha- mento Posição do conteúdo de CAPTION:
  • 40.
    ______________________________________________________________________________________________ Curso Técnico emInformática 40 Criação de sites 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> <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>
  • 41.
    ______________________________________________________________________________________________ Curso Técnico emInformática 41 Criação de sites <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 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:
  • 42.
    ______________________________________________________________________________________________ Curso Técnico emInformática 42 Criação de sites <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: 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="message" 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.
  • 43.
    ______________________________________________________________________________________________ Curso Técnico emInformática 43 Criação de sites 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> Esse código HTML é renderizado assim no Firefox 4: 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_page.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_page.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>
  • 44.
    ______________________________________________________________________________________________ Curso Técnico emInformática 44 Criação de sites Resultado: 1.5.2 Atributos Exemplo de código para o atributo text: <form> First name:<br> <input type="text" name="firstname"><br> Last name:<br> <input type="text" name="lastname"> </form> Resultado: Isto é como ficará em um navegador: Primeiro nome: Último nome: Exemplo de código para o atributo rádio: <form> <input type="radio" name="gender" value="male" checked> Masculino<br> <input type="radio" name="gender" value="female"> Feminino<br> <input type="radio" name="gender" value="other"> De outros </form> Resultado: Masculino Fêmea De outros Exemplo de código para o atributo submit: <form action="/action_page.php"> Primeiro Nome:<br> <input type="text" name="primeiro_nome" value="Maria"><br> Ultimo nome:<br> <input type="text" name="ultimo_nome" value="Felipeta"><br> <br> <input type="submit" value="enviar"> </form> Resultado:
  • 45.
    ______________________________________________________________________________________________ Curso Técnico emInformática 45 Criação de sites Primeiro nome: Mickey Último nome: Mouse Enviar <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: Será abordado nesta apostila, a seguir 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 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:
  • 46.
    ______________________________________________________________________________________________ Curso Técnico emInformática 46 Criação de sites 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 (date e hora): <input type="datetime-local" name="data_nasci- mento"> </form> Exemplo de código para o atributo email: 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>
  • 47.
    ______________________________________________________________________________________________ Curso Técnico emInformática 47 Criação de sites 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> <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="googlesearch"> </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>
  • 48.
    ______________________________________________________________________________________________ Curso Técnico emInformática 48 Criação de sites 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> 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. week Permite ao usuário selecionar uma semana e um ano
  • 49.
    ______________________________________________________________________________________________ Curso Técnico emInformática 49 Criação de sites 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 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 atributos id ou class. No HTML5 foram criadas diversas tags semânticas para indicar aos user-agents quais conteúdos estão sendo inseridos em cada uma das divisões da página, organizando e padronizando o desen- volvimento.
  • 50.
    ______________________________________________________________________________________________ Curso Técnico emInformática 50 Criação de sites 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> 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.
  • 51.
    ______________________________________________________________________________________________ Curso Técnico emInformática 51 Criação de sites 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 Fundamentos do CSS 2.2 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 proprie- dade 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. 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; }
  • 52.
    ______________________________________________________________________________________________ Curso Técnico emInformática 52 Criação de sites 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 { 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;
  • 53.
    ______________________________________________________________________________________________ Curso Técnico emInformática 53 Criação de sites 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; } /* 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>
  • 54.
    ______________________________________________________________________________________________ Curso Técnico emInformática 54 Criação de sites 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 pode conter qualquer propriedade CSS. O exemplo abaixo mostra como alterar a cor ea 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: Color Nome Red Green Blue Orange Yellow Cyan 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
  • 55.
    ______________________________________________________________________________________________ Curso Técnico emInformática 55 Criação de sites mais alto (255) e os outros são definidos como 0. Experimente misturando os valores RGB abaixo: Exemplo: Cor RGB rgb(255,0,0) rgb(0,255,0) rgb(0,0,255) rgb(255,165,0) rgb(255,255,0) rgb(0,255,255) 2.5.3 Cores hexadecimais Os valores RGB também podem ser especificados usando valores de cor hexadecimais na forma: # RRGGBB ,onde RR (vermelho), GG (verde) e BB (azul) são valores hexadecimais entre 00 e FF (mesmo que decimal 0-255). Por exemplo, #FF0000 é apresentado como vermelho, porque vermelho é definido para o seu valor mais alto (FF) e os outros são definidos para o valor mais baixo (00). Nota: Os valores HEX não diferenciam maiúsculas de minúsculas: "# ff0000" é o mesmo que "FF0000". Exemplo: Cor HEX #FF0000 #00FF00 #0000FF #FFA500
  • 56.
    ______________________________________________________________________________________________ Curso Técnico emInformática 56 Criação de sites #FFFF00 #00FFFF 2.6 Background As propriedades de fundo CSS são usadas para definir os efeitos de fundo para os elementos. Propriedades de fundo CSS: cor de fundo background-color imagem de fundo background-image fundo de repetição repeating-background Anexo de fundo background-attachment Posição de fundo background-position Cor de fundo A propriedade background-color especifica a cor de fundo de um elemento. A cor de fundo de uma página é definida conforme o exemplo a seguir: body { background-color: blue; } Imagem de fundo A propriedade background-image especifica uma imagem para usar como o plano de fundo de um elemento. Por padrão, a imagem é repetida de modo que abrange todo o display A imagem de plano de fundo de uma página pode ser definida da seguinte forma: body { background-image: url("imagem.png"); } Para que a imagem não se repita, deve-se utilizar a propriedade background-repeat, conforme ilustra o exemplo a seguir: body { background-image: url("imagem.png"); background-repeat: no-repeat; } Ainda é possível especificar a posição da imagem com a propriedade background-position: body { background-image: url("imagem.png"); background-repeat: no-repeat; background-position: right top;
  • 57.
    ______________________________________________________________________________________________ Curso Técnico emInformática 57 Criação de sites } Também é possível fazer com que a imagem de fundo permaneça fixa, para isso, utilize a propriedade background-attachment: body { background-image: url("imagem.png"); background-repeat: no-repeat; background-position: right top; background-attachment: fixed; } 2.7 Bordas As propriedades do border permitem especificar o estilo, largura e cor da borda de um elemento. A propriedade border-style especifica que tipo de borda para exibir. São permitidos os seguintes valores:  dotted - Define uma borda pontilhada;  dashed - Define uma borda tracejada;  solid - Define uma borda sólida;  double - Define um limite duplo;  groove- Define uma borda ranhurada 3D. O efeito depende do valor da cor da borda;  ridge- Define uma borda estriada 3D. O efeito depende do valor da cor da borda;  inset- Define uma borda inserida 3D. O efeito depende do valor da cor da borda;  outset- Define uma borda de início 3D. O efeito depende do valor da cor da borda;  none - Não define nenhuma borda;  hidden - Define uma borda oculta. Exemplo: p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.none {border-style: none;} p.hidden {border-style: hidden;} p.mix {border-style: dotted dashed solid double;} Resultado: Borda dotted Borda dashed
  • 58.
    ______________________________________________________________________________________________ Curso Técnico emInformática 58 Criação de sites Borda solid borda Borda double Borda groove Borda ridge Borda inset Borda outset Sem borda Borda oculta Borda mixed Largura da borda A propriedade border-width especifica a largura das quatro bordas. A largura pode ser definida como um tamanho específico (em px, pt, cm, etc) ou usando um dos três valores pré-definidos: thin, medium, ou thick (fino, médio ou grosso). A propriedade border-width pode ter de um a quatro valores (para a borda superior, borda direita, borda inferior e a borda esquerda). Exemplo: p.primeiro { border-style: solid; border-width: 5px; } p.segundo { border-style: solid; border-width: medium; } p.terceiro { border-style: solid; border-width: 2px 10px 4px 20px; } Cor da borda A propriedade border-color é usada para definir a cor das quatro bordas. A cor pode ser definida por:  Nome - especifique um nome de cor, como "vermelho";  Hex - especifique um valor hexadecimal, como "# ff0000";  RGB - especifique um valor RGB, como "rgb (255,0,0)";
  • 59.
    ______________________________________________________________________________________________ Curso Técnico emInformática 59 Criação de sites  Transparent (que corresponde a borda transparente). A propriedade border-color pode ter de um a quatro valores (para a borda superior, borda direita, borda inferior e a borda esquerda). Se border-color não estiver definido, ele herda a cor do elemento. Exemplo: p.primeiro { border-style: solid; border-color: pink; } p.segundo { border-style: solid; border-color: blue; } p.terceiro { border-style: solid; border-color: red green blue yellow; } No CSS você pode ainda especificar para cada borda do elemento uma propriedade diferente, conforme o exemplo a seguir: p { border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid; } Para encurtar o código, também é possível especificar todas as propriedades de borda individuais em uma propriedade. A propriedade border é uma propriedade abreviada para as seguintes propriedades de borda individuais: border-width border-style (requeridos) border-color Exemplo borda esquerda: p { border-left: 6px solid blue; }
  • 60.
    ______________________________________________________________________________________________ Curso Técnico emInformática 60 Criação de sites Exemplo borda direita: p { border-right: 6px solid blue; } Exemplo borda inferior: p { border-bottom: 6px solid blue; } Exemplo borda superior: p { border-top: 6px solid blue; } É possível deixar as bordas arredondadas com a utilização da propriedade border-radius: Exemplo: p { border: 2px solid red; border-radius: 5px; } 2.8 Margens As propriedades CSS margin são usadas para gerar espaço em torno de elementos. Elas definem o tamanho do espaço em branco fora da borda. Com CSS, você tem controle total sobre as margens. Existem propriedades CSS para definir a margem para cada lado de um elemento (parte superior, direita, inferior e esquerda). Margem - Lados Individuais CSS tem propriedades para especificar a margem para cada lado de um elemento:  margin-top;  margin-right;  margin-bottom;  margin-left. Todas as propriedades de margem podem ter os seguintes valores:  Auto - o navegador calcula a margem;  Length - especifica uma margem em px, pt, cm, etc.;  % - especifica uma margem em % da largura do elemento;  Inherit - especifica que a margem deve ser herdada do elemento pai. Sugestão: São permitidos valores negativos. O exemplo a seguir define margens diferentes para todos os quatro lados de um elemento <p>: Exemplo: p { margin-top: 100px;
  • 61.
    ______________________________________________________________________________________________ Curso Técnico emInformática 61 Criação de sites margin-bottom: 100px; margin-right: 150px; margin-left: 80px; } Para encurtar o código, é possível especificar todas as propriedades de margem em uma propriedade. margin é uma propriedade abreviada para as seguintes propriedades de margem individuais:  margin-top;  margin-right;  margin-bottom;  margin-left. Exemplo: p { margin: 100px 150px 100px 80px; } Se a propriedade margin tiver quatro valores:  Margem: 25px 50px 75px 100px;  Margem superior é 25px;  Margem direita é 50px;  Margem inferior é 75px;  Margem esquerda é 100px. Se a propriedade margin tiver três valores:  Margem: 25px 50px 75px;  Margem superior é 25px;  Direita e esquerda são 50px;  Margem inferior é 75px. Se a propriedade margin tiver dois valores:  Margem: 25px 50px;  Margens superior e inferior são 25px;  Direita e esquerda são 50px. Se a propriedade margin tiver um valor:  Margem: 25px;  Todas as quatro margens são 25px. Você pode utilizar a propriedade auto para centralizar horizontalmente o elemento dentro do contêiner. O elemento então ocupará a largura especificada e o espaço restante será dividido igualmente entre as margens esquerda e direita:
  • 62.
    ______________________________________________________________________________________________ Curso Técnico emInformática 62 Criação de sites Exemplo: div { width: 300px; margin: auto; border: 1px solid red; } 2.9 CSS Padding O padding tem um funcionamento muito similar ao do margin, porém ao invés de dar um espaçamento externo, ele dá um interno. As propriedades para especificar o preenchimento para cada lado de um elemento são:  padding-top;  padding-right;  padding-bottom;  padding-left. Todas as propriedades de preenchimento podem ter os seguintes valores:  comprimento - especifica um estofamento em px, pt, cm, etc.;  % - especifica um preenchimento em % da largura do elemento que contém;  Inherit - especifica que o preenchimento deve ser herdado do elemento pai; O exemplo a seguir define preenchimento diferente para todos os quatro lados de um elemento <p>: p { padding-top: 50px; padding-right: 30px; padding-bottom: 50px; padding-left: 80px; } Para encurtar o código, é possível especificar todas as propriedades de preenchimento em uma propriedade. p { padding: 50px 30px 50px 80px; } 2.10 Height e Width As propriedades height e width são usadas para definir a altura e a largura de um elemento. O height e width pode ser configurado para auto (isso é padrão. Significa que o navegador calcula a altura e a largura), ou ser especificado em valores de comprimento, como px, cm, etc., ou em porcentagem (%) do bloco que contém. Você pode ainda utilizar a propriedade max-width para definir a largura máxima de um elemento. O valor max-width pode ser especificado em valores de comprimento, como px, cm, etc., ou em percentagem (%) do bloco que contém, ou definido como none (isso é padrão), significa que não há largura máxima.
  • 63.
    ______________________________________________________________________________________________ Curso Técnico emInformática 63 Criação de sites Propriedades Descrição height Define a altura de um elemento. max-height Define a altura máxima de um elemento. max-width Define a largura máxima de um elemento. min-height Define a altura mínima de um elemento. min-width Define a largura mínima de um elemento. width Define a largura de um elemento. 2.11 Outline As propriedades outline especificam o estilo, cor e largura de um contorno. Um contorno é uma linha que é desenhada em torno de elementos (fora das bordas) para fazer o elemento "se destacar". No entanto, a propriedade de estrutura de tópicos é diferente da propriedade de borda - O esquema não é uma parte das dimensões de um elemento; A largura total e a altura do elemento não são afetadas pela largura do contorno. Estilos de Contorno A propriedade outline-style especifica o estilo do contorno. Ela pode ter um dos seguintes valores:
  • 64.
    ______________________________________________________________________________________________ Curso Técnico emInformática 64 Criação de sites  dotted - Define um contorno pontilhado;  dashed - Define um contorno tracejado;  solid - Define um contorno sólido;  double - Define um contorno duplo;  groove- Define um contorno em 3D. O efeito depende do valor da cor do contorno;  ridge- Define um contorno ridged 3D. O efeito depende do valor da cor do contorno;  inset- Define um contorno acima3D. O efeito depende do valor da cor do contorno;  outset- Define um contorno abaixo 3D. O efeito depende do valor da cor do contorno;  none - Não define nenhum contorno;  hidden - Define um contorno oculto. 2.12 Texto Cor do texto A propriedade color é usada para definir a cor do texto. Com CSS, uma cor é mais frequentemente especificada por:  Um nome de cor - como "vermelho";  Um valor HEX - como "# ff0000";  Um valor RGB - como "rgb (255,0,0)";  A cor de texto padrão de uma página é definida no seletor de corpo. Exemplo: body { color: pink; } h1 { color: blue; } Alinhamento de Texto A propriedade text-align é usada para definir o alinhamento horizontal de um texto. Um texto pode ser alinhado à esquerda ou à direita, centralizado ou justificado. O exemplo a seguir mostra o alinhamento central, justificado e o texto alinhado à esquerda e à direita (o alinhamento à esquerda é o padrão se a direção do texto for da esquerda para a direita e o alinhamento à direita é padrão se a direção do texto for da direita para a esquerda): Exemplo: h1 { text-align: center; } h2 { text-align: justify; } h3 { text-align: left; }
  • 65.
    ______________________________________________________________________________________________ Curso Técnico emInformática 65 Criação de sites h4 { text-align: right; } Decoração de texto A propriedade text-decoration é usada para definir ou remover decorações do texto. O valor text-decoration: none; é frequentemente usado para remover sublinhados de links: Exemplo: a { text-decoration: none; } Transformação de texto A propriedade text-transform é usada para especificar letras maiúsculas e minúsculas em um texto. Ela pode ser usada para transformar tudo em letras maiúsculas ou minúsculas, ou a primeira letra de cada palavra com a utilização do capitalize: Exemplo: p.uppercase { text-transform: uppercase; } p.lowercase { text-transform: lowercase; } p.capitalize { text-transform: capitalize; } Recuo de texto A propriedade text-indent é usada para especificar o recuo da primeira linha de um texto: Exemplo: p { text-indent: 50px; } Espaçamento entre letras A propriedade letter-spacing é usada para especificar o espaço entre os caracteres em um texto. O exemplo a seguir demonstra como aumentar ou diminuir o espaço entre caracteres: Exemplo: h1 { letter-spacing: 3px; }
  • 66.
    ______________________________________________________________________________________________ Curso Técnico emInformática 66 Criação de sites h2 { letter-spacing: -3px; } Altura da linha A propriedade line-height é usada para especificar o espaço entre as linhas: Exemplo: p.small { line-height: 0.8; } p.big { line-height: 1.8; } Direção do texto A propriedade direction é usada para alterar a direção do texto de um elemento: Exemplo: div { direction: rtl; } Espaçamento entre palavras A propriedade word-spacing é usada para especificar o espaço entre as palavras de um texto. O exemplo a seguir demonstra como aumentar ou diminuir o espaço entre palavras: Exemplo: h1 { word-spacing: 10px; } h2 { word-spacing: -5px; } Sombra de texto A propriedade text-shadow adiciona sombra ao texto. O exemplo a seguir especifica a posição da sombra horizontal (3px), a posição da sombra vertical (2px) e a cor da sombra (vermelho). Exemplo: h1 { text-shadow: 3px 2px red; }
  • 67.
    ______________________________________________________________________________________________ Curso Técnico emInformática 67 Criação de sites Segue abaixo uma tabela com todas as propriedades de texto CSS: Propriedade Descrição color Seta a cor do texto. direction Especifica a direção do texto. letter-spacing Especifica o espaçamento entre letras. line-height Propriedade utilizada para especificar o tamanho entre linhas. text-align Propriedade utilizada para definir o alinhamento do texto. text-decoration Propriedade utilizada para adicionar uma decoração ao texto. text-indent Propriedade utilizada para recuo na primeira linha. text-shadow Propriedade utilizada para adicionar sombra ao texto. text-transform Propriedade utilizada para especificar letras maiúsculas e minúsculas. text-overflow Determina como o conteúdo que ultrapassou a sua div e que não é mostrado ao usuário deve ser exibido. unicode-bidi Usada em conjunto com a propriedade direction para definir ou retornar se o textodeve ser substit uído para oferecer suporte a vários idiomas no mesmo documento. vertical-align Centraliza textos ou imagens. white-space Especifica como a escrita de espaços dentro de um elemento é manejada. word-spacing Aumenta ou diminui o espaço entre as palavras.
  • 68.
    ______________________________________________________________________________________________ Curso Técnico emInformática 68 Criação de sites 2.13 Fontes CSS As propriedades da fonte CSS definem a família de fontes, o tamanho e o estilo de um texto. Famílias de fontes CSS Em CSS, existem dois tipos de nomes de família de fonte:  Família genérica - um grupo de famílias de fontes com um aspecto semelhante (como "Se- rif" ou "Monospace");  Família de fontes - uma família de fontes específica (como "Times New Roman" ou "Arial"). Família genérica Família de fontes Descrição Serif Times New Roman Georgia Fontes Serif têm linhas pequenas nas extremida- des em alguns caracteres. Sans-serif Arial Verdana "Sans" significa sem - essas fontes não têm as linhas nas extremidades dos caracteres. Monospace Courier New Lucida Console Todos os caracteres monospace têm a mesma largura. Família de fontes A família de fontes de um texto é definida com a propriedade font-family. Ela deve conter vários nomes de fonte como um sistema de "fallback". Se o navegador não suporta a primeira fonte, ele tenta a próxima fonte e assim por diante. Comece com a fonte desejada e termine com uma família genérica, para permitir que o navegador escolha uma fonte semelhante na família genérica, se nenhuma outra fonte estiver disponível. Observação: Se o nome de uma família de fontes for mais de uma palavra, ele deve estar entre aspas, como: "Times New Roman". Mais de uma família de fontes é especificada em uma lista separada por vírgulas: Exemplo: p { font-family: "Times New Roman", Times, serif; }
  • 69.
    ______________________________________________________________________________________________ Curso Técnico emInformática 69 Criação de sites Estilo de fonte A propriedade font-style é usada principalmente para especificar texto em itálico. Esta propriedade tem três valores:  Normal - O texto é mostrado normalmente;  Itálico - O texto é mostrado em itálico;  Oblíquo - O texto é "inclinado" (oblíquo é muito semelhante ao itálico, mas menos apoiado). Exemplo: p.normal { font-style: normal; } p.italic { font-style: italic; } p.oblique { font-style: oblique; } Tamanho da fonte A propriedade font-size define o tamanho do texto. Ser capaz de gerenciar o tamanho do texto é importante na web design. No entanto, você não deve usar ajustes de tamanho de fonte para fazer parágrafos parecidos com títulos ou títulos parecidos com parágrafos. Sempre use as tags HTML apropriadas, como <h1> - <h6> para cabeçalhos e <p> para parágrafos. O valor font- size pode ser um tamanho absoluto ou relativo. Tamanho absoluto:  Define o texto para um tamanho especificado;  Não permite que um usuário altere o tamanho do texto em todos os navegadores (ruim por razões de acessibilidade);  O tamanho absoluto é útil quando o tamanho físico da saída é conhecido. Tamanho relativo:  Define o tamanho relativo aos elementos circundantes;  Permite que um usuário altere o tamanho do texto nos navegadores. Definir tamanho de fonte com pixels Definir o tamanho do texto com pixels fornece controle total sobre o tamanho do texto: Exemplo: h1 { font-size: 40px; }
  • 70.
    ______________________________________________________________________________________________ Curso Técnico emInformática 70 Criação de sites h2 { font-size: 30px; } p { font-size: 14px; } Definir tamanho de fonte com “em” Para permitir que os usuários redimensionem o texto (no menu do navegador), muitos desenvolvedores utilizam “em” ao invés de pixels. 1em é igual ao tamanho da fonte atual. O tamanho de texto padrão nos navegadores é 16px. Assim, o tamanho padrão de 1em é 16px. O tamanho pode ser calculado de pixels para em usando esta fórmula: pixels / 16 = em Exemplo: h1 { font-size: 2.5em; /* 40px/16=2.5em */ } h2 { font-size: 1.875em; /* 30px/16=1.875em */ } p { font-size: 0.875em; /* 14px/16=0.875em */ } No exemplo acima, o tamanho do texto em “em” é o mesmo que o exemplo anterior em pixels. No entanto, com o tamanho “em”, é possível ajustar o tamanho do texto em todos os nave- gadores. Espessura da Fonte A propriedade font-weight especifica a espessura de uma fonte: Exemplo: p.normal { font-weight: normal; } p.thick { font-weight: bold; } Variante da fonte A propriedade font-variant especifica se um texto deve ou não ser exibido em uma fonte small-caps, isso significa que em uma fonte de letras pequenas, todas as letras minúsculas são convertidas em letras maiúsculas. No entanto, as letras maiúsculas convertidas aparecem em um
  • 71.
    ______________________________________________________________________________________________ Curso Técnico emInformática 71 Criação de sites tamanho de fonte menor do que as letras maiúsculas originais no texto. Exemplo: p.normal { font-variant: normal; } p.small { font-variant: small-caps; } Todas as propriedades da fonte CSS: Propriedade Descrição font Seta as propriedades para fonte. font-family Especifica uma família de fontes. font-size Especifica o tamanho da fonte. font-style Especifica um estilo para fonte. font-variant Especifica se um texto deve ou não ser exibido em uma fonte small- caps. font-weight Especifica a espessura da fonte. 2.14 como adicionar ícones A maneira mais simples de adicionar um ícone à sua página HTML é com uma biblioteca de ícones, como Font Awesome. Adicione o nome da classe de ícone especificada a qualquer elemento HTML em linha (como <i>ou <span>). Todos os ícones nas bibliotecas de ícones a seguir, são vetores escaláveis que podem ser personalizados com CSS (tamanho, cor, sombra, etc.) Para usar os ícones Font Awesome, adicione a seguinte linha dentro da <head>seção de sua
  • 72.
    ______________________________________________________________________________________________ Curso Técnico emInformática 72 Criação de sites página HTML: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font- awesome.min.css"> Exemplo: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <i class="fa fa-cloud"></i> <i class="fa fa-heart"></i> <i class="fa fa-car"></i> <i class="fa fa-file"></i> <i class="fa fa-bars"></i> </body> </html> Resultado: Ícones do Bootstrap Para usar os glyphicons Bootstrap, adicione a seguinte linha dentro da <head> seção de sua página HTML: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> Exemplo: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <i class="glyphicon glyphicon-cloud"></i> <i class="glyphicon glyphicon-remove"></i> <i class="glyphicon glyphicon-user"></i> <i class="glyphicon glyphicon-envelope"></i>
  • 73.
    ______________________________________________________________________________________________ Curso Técnico emInformática 73 Criação de sites <i class="glyphicon glyphicon-thumbs-up"></i> </body> </html> Resultado: Ícones do Google Para usar os ícones do Google, adicione a seguinte linha dentro da <head>seção de sua página HTML: <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> Exemplo: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <i class="material-icons">cloud</i> <i class="material-icons">favorite</i> <i class="material-icons">attachment</i> <i class="material-icons">computer</i> <i class="material-icons">traffic</i> </body> </html> Resultado: 2.15 Links CSS Com CSS, as ligações podem ser denominadas em maneiras diferentes. Texto Link Texto Link Link Botão Botão Link Links de estilo Os links podem ser decorados com qualquer propriedade CSS (por exemplo color, font- family, background, etc.). Os quatro estados de links são:  a:link - uma ligação normal e não visitada;  a:visited - um link que o usuário visitou;  a:hover - um link quando o usuário passa o mouse sobre ele;
  • 74.
    ______________________________________________________________________________________________ Curso Técnico emInformática 74 Criação de sites  a:active - um link no momento em que ele é clicado. Utiliza-se a propriedade text-decoration para remover sublinhados de links. 2.16 Listas CSS As propriedades da lista CSS permitem:  Definir marcadores de itens de lista diferentes para listas ordenadas;  Definir marcadores de itens de lista diferentes para listas não ordenadas;  Definir uma imagem como marcador de item de lista;  Adicionar cores de fundo a listas e itens de lista. Propriedade Descrição list-style Define todas as propriedades de uma lista em uma declaração. list-style-image Especifica uma imagem como o marcador de item de lista. list-style-position Especifica se os marcadores de itens de lista devem aparecer dentro ou fora do fluxo de conteúdo. list-style-type Especifica o tipo de marcador de item de lista. 2.17 Tabelas CSS Com as propriedades CSS é possível estilizar a tabela. Segue abaixo, as propriedades de tabela. Propriedade Descrição border Seta uma borda para a tabela. border-collapse Especifica que a tabela deve ter uma borda única. border-spacing Especifica a distância entre as bordas e as células adjacentes. caption-side Especifica o posicionamento de uma legenda de tabela.
  • 75.
    ______________________________________________________________________________________________ Curso Técnico emInformática 75 Criação de sites empty-cells Especifica se deseja ou não exibir bordas e plano de fundo em células vazias em uma tabela. table-layout Define o layout para todas as tabelas. 2.18 Propriedade display A propriedade display é a propriedade CSS mais importante para controlar layout. A propriedade display especifica como um elemento é exibido. Cada elemento HTML tem um valor de exibição padrão dependendo do tipo do elemento. O valor de exibição padrão para a maioria dos elementos é block ou inline. Elemento de nível block Um elemento de nível de bloco sempre começa em uma nova linha e ocupa toda a largura disponível (se estende para a esquerda e para a direita o máximo possível). O elemento <div> é um elemento de nível de bloco. Exemplos de elementos de nível de bloco: <div> <h1> - <h6> <p> <form> <header> <footer> <section> Elementos incorporados (inline) Um elemento inline não inicia em uma nova linha e ocupa apenas a largura que for necessária. Este é um elemento inline <span> dentro de um parágrafo. Exemplos de elementos inline: <span> <a> <img>
  • 76.
    ______________________________________________________________________________________________ Curso Técnico emInformática 76 Criação de sites Display none É muito utilizado com JavaScript para ocultar e mostrar elementos sem excluir e recriá-los. O <script> elemento usa display: none; como padrão. Substituir o valor de exibição padrão Como mencionado, cada elemento tem um valor de exibição padrão. No entanto, você pode substituir isso. Alterar um elemento inline para um elemento de bloco, ou vice-versa, pode ser útil para fazer a página parecer uma maneira específica e ainda seguir os padrões da web. Um exemplo comum é fazer elementos <li> embutidos para menus horizontais: Exemplo: li { display: inline; } 2.19 width e max-width Um elemento de nível de bloco sempre ocupa toda a largura disponível (estende-se para a esquerda e para a direita tanto quanto possível). A configuração width de um elemento de nível de bloco impedirá que ele se estenda até as bordas de seu recipiente. Em seguida, você pode definir as margens para auto, assim, horizontalmente centralizar o elemento dentro de seu contêiner. O elemento ocupará a largura especificada e o espaço restante será dividido igualmente entre as duas margens. O problema de especificar o tamanho de um elemento com width é que por exemplo, se uma div fosse definida com 700px, quando a janela do navegador for menor aparecerá uma barra de rolagem. Porém, se for utilizado max-width, em vez de width, irá melhorar a manipulação do navegador de janelas pequenas tornando o site utilizável em dispositivos pequenos. 2.20 position A propriedade position especifica o tipo de método de posicionamento utilizado para um elemento (estático, relativo, fixo ou absoluto). Existem quatro valores de posição diferentes:  static  relative  fixed  absolute Os elementos são posicionados usando as propriedades superior, inferior, esquerda e direita. No entanto, essas propriedades não funcionarão a menos que a propriedade position seja definida primeiro. Eles também funcionam de forma diferente dependendo do valor da posição. Posição estática Os elementos HTML são posicionados estáticos por padrão. Esses elementos estáticos não são afetados pelas propriedades superior, inferior, esquerda e direita. Um elemento com position: static; não está posicionado de forma especial. Ele é sempre posicionado de acordo com o fluxo da página.
  • 77.
    ______________________________________________________________________________________________ Curso Técnico emInformática 77 Criação de sites Posição relativa Um elemento com position: relative; é posicionado em relação à sua posição normal. Definir as propriedades superior, direita, inferior e esquerda de um elemento relativamente posicionado fará com que seja ajustado longe de sua posição normal. Outros conteúdos não serão ajustados para caber em qualquer espaço deixado pelo elemento. Posição fixo Um elemento com position: fixed; é posicionado em relação à janela de visualização, o que significa que ele permanece sempre no mesmo local, mesmo que a página seja deslocada. As propriedades superior, direita, inferior e esquerda são usadas para posicionar o elemento. Um elemento fixo não deixa uma lacuna na página onde ele normalmente teria sido localizado. Posição absoluta Um elemento com position: absolute; é posicionado em relação ao ancestral posicionado mais próximo (em vez de posicionado em relação à janela de visualização, como fixo). Porém, se um elemento posicionado absoluto não tiver ancestrais posicionados, ele usa o corpo do documento e move-se com a rolagem da página. Nota: Um elemento "posicionado" é aquele cuja posição é qualquer coisa exceto estático (static). Elementos sobrepostos Quando os elementos são posicionados, eles podem sobrepor outros elementos. A propriedade z-index especifica a ordem da pilha de um elemento (que deve ser colocado na frente ou atrás dos outros). Um elemento pode ter uma ordem de pilha positiva ou negativa: img { position: absolute; left: 0px; top: 0px; z-index: -1; } Todas as propriedades de posicionamento CSS: Propriedade Descrição bottom Define a borda da margem inferior para uma caixa posicionada. clip Um elemento absolutamente posicionado. cursor Especifica o tipo de cursor a ser exibido. left Define a borda da margem esquerda para uma caixa posicionada.
  • 78.
    ______________________________________________________________________________________________ Curso Técnico emInformática 78 Criação de sites overflow Especifica o que acontece se o conteúdo ultrapassa a caixa de um elemento. overflow-x Especifica o que fazer com as margens esquerda / direita do conteúdo se ele ultrapassar a área de conteúdo do elemento. overflow-y Especifica o que fazer com as bordas superior / inferior do conteúdo se ele ultrapassar a área de conteúdo do elemento. position Especifica o tipo de posicionamento de um elemento. right Define a borda da margem direita para uma caixa posicionada. top Define a borda da margem superior para uma caixa posicionada. z-index Define a ordem de sobreposição dos elementos. 2.21 float e clear A propriedade float especifica se um elemento deve ou não flutuar. Já a clear é usada para controlar o comportamento de elementos flutuantes. Em seu uso mais simples, a propriedade float pode ser usada para fazer com que o texto fique em torno de imagens. A propriedade clear é usada para controlar o comportamento de elementos flutuantes. Especifica em quais lados de um elemento, os elementos flutuantes não estão autorizados a flutuar. Pode-se utilizar a propriedade clearfix Hack caso um elemento seja mais alto que o elemento que o contém e ele for flutuado, nesse caso, ele será transbordado fora de seu contêiner. Para resolver esse problema, basta utilizar overflow: auto; para adicionar o conteúdo ao elemento que o contém.
  • 79.
    ______________________________________________________________________________________________ Curso Técnico emInformática 79 Criação de sites 2.4 Responsividade 2.4.1 Introdução O design web responsivo faz com que sua página da web fique bem em todos os dispositi- vos. As páginas da Web podem ser visualizadas usando muitos dispositivos diferentes: desktops, tablets e telefones. Sua página da web deve ficar bem, e ser fácil de usar, independentemente do dispositivo. As páginas da Web não devem deixar de fora informações para caber dispositivos menores, mas sim adaptar seu conteúdo para caber qualquer dispositivo: Ele é chamado de web design responsivo quando você usa CSS e HTML para redimensionar, ocultar, encolher, ampliar ou mover o conteúdo para torná-lo bem em qualquer tela. 2.4.2 Viewport A viewport é a área visível do usuário de uma página da web. Ela varia de acordo com o dispositivo e será menor em um telefone celular do que em uma tela de computador. Antes de tablets e telefones celulares, páginas da web foram projetadas apenas para telas de computador, e era comum para páginas da web ter um design estático e um tamanho fixo. Então, quando começamos a navegar na internet usando tablets e telefones celulares, páginas de tamanho fixo eram muito grandes para caber na viewport. Para corrigir isso, os navegadores nesses dispositivos reduziram a página da Web inteira para caber na tela. 2.4.2.1 Configurando o Viewport O HTML5 introduziu um método para permitir que os designers da Web assumissem o controle sobre a viewport, através da tag <meta>. Você deve incluir o seguinte elemento <meta> viewport em todas as suas páginas da web: <meta name="viewport" content="width=device-width, initial-scale=1.0"> Um elemento <meta> viewport fornece instruções do navegador sobre como controlar as dimensões e dimensionamento da página. A width=device-width é a parte que define a largura da página para seguir a largura da tela do dispositivo (que variará dependendo do dispositivo). A initial- scale=1.0 define o nível de zoom inicial quando a página é carregada pela primeira vez pelo navegador.
  • 80.
    ______________________________________________________________________________________________ Curso Técnico emInformática 80 Criação de sites Observe abaixo, a diferença do mesmo layout, porém um utiliza a tag <meta> e outro não. Sem a tag <meta> Com a tag <meta> Dicas de conteúdo de tamanho para o Viewport Se o usuário for forçado a rolar horizontalmente, ou diminuir o zoom, para ver toda a página da web, isso resultará em uma má experiência do usuário. Algumas regras adicionais a seguir: 1. NÃO utilize grandes elementos de largura fixa - Por exemplo, se uma imagem for exibida com uma largura maior do que a janela de visualização, ela pode fazer com que a janela de exibição rode horizontalmente. Lembre-se de ajustar este conteúdo para caber dentro da largura da viewport. 2. NÃO deixe que o conteúdo dependa de uma largura de janela de exibição específica para ficar bom - Como as dimensões de tela e largura em pixels CSS variam amplamente entre dispositivos, o conteúdo não deve depender de uma largura de janela de exibição específica. 3. Utilize consultas de mídia CSS para aplicar estilo diferente para telas pequenas e grandes - Definir grandes larguras CSS absolutas para elementos de página, fará com que o elemento seja muito grande para a viewport em um dispositivo menor. Em vez disso, considere usar valores de largura relativa, como largura: 100%. Além disso, tenha cuidado ao usar valores de posicionamento absoluto grandes. Isso pode fazer com que o elemento caia fora da viewport em dispositivos pequenos. 2.4.2.2 Grid-View Muitas páginas da web são baseadas em uma grade-view, o que significa que a página é
  • 81.
    ______________________________________________________________________________________________ Curso Técnico emInformática 81 Criação de sites dividida em colunas: Usar uma grade de exibição é muito útil ao projetar páginas da web. Facilita a colocação de elementos na página. Uma visão de grade responsiva geralmente tem 12 colunas e tem uma largura total de 100%, e diminuirá e se expandirá à medida que você redimensiona a janela do navegador. 2.4.2.3 Como criar um Grid-View responsivo Certifique-se de que todos os elementos HTML tenham a propriedade box-sizing definida como border-box. Isso garante que o preenchimento e borda estão incluídos na largura total e altura dos elementos. Adicione o seguinte código em seu CSS: * { box-sizing: border-box; } O exemplo a seguir mostra uma página da Web responsiva simples, com duas colunas:
  • 82.
    ______________________________________________________________________________________________ Curso Técnico emInformática 82 Criação de sites Exemplo: .menu { width: 25%; float: left; } .main { width: 75%; float: left; } O exemplo acima seria bom se a página Web contiver apenas duas colunas. No entanto, nós queremos usar uma grade responsiva-view com 12 colunas, para ter mais controle sobre a página da web. Primeiro, devemos calcular a porcentagem de uma coluna: 100% / 12 colunas = 8,33%. Em seguida, fazemos uma classe para cada uma das 12 colunas class="col-" e um número definindo quantas colunas a seção deve abranger: CSS: .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;}
  • 83.
    ______________________________________________________________________________________________ Curso Técnico emInformática 83 Criação de sites .col-12 {width: 100%;} Todas estas colunas devem estar flutuando para a esquerda e ter um preenchimento de 15px: CSS: [class*="col-"] { float: left; padding: 15px; border: 1px solid red; } Cada linha deve ser acondicionada em um arquivo <div>. O número de colunas dentro de uma linha deve sempre somar até 12: HTML: <div class="row"> <div class="col-3">...</div> <!-- 25% --> <div class="col-9">...</div> <!-- 75% --> </div> As colunas dentro de uma linha estão todas flutuando para a esquerda e, portanto, são retiradas do fluxo da página e outros elementos serão colocados como se as colunas não existissem. Para evitar isso, vamos adicionar um estilo que limpa o fluxo: CSS: .row::after { content: ""; clear: both; display: table; } 2.4.2.4 Media Query A consulta de mídia é uma técnica CSS introduzida no CSS3. Ele usa a regra @media para incluir um bloco de propriedades CSS somente se uma determinada condição for verdadeira.
  • 84.
    ______________________________________________________________________________________________ Curso Técnico emInformática 84 Criação de sites Exemplo: Se a janela do navegador for menor que 500px, a cor do plano de fundo mudará para rosa: @media only screen and (max-width: 500px) { body { background-color: pink; } } Sempre projetar primeiro o desing mobile depois para desktop ou qualquer outro dispositivo (Isso fará com que a página seja exibida mais rapidamente em dispositivos menores). Isso significa que devemos fazer algumas alterações em nosso CSS. Em vez de mudar estilos quando a largura fica menor do que 768px, devemos alterar o design quando a largura fica maior do que 768px. Exemplo: /* Para mobile: */ [class*="col-"] { width: 100%; } @media only screen and (min-width: 768px) { /* Para desktop: */ .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;}
  • 85.
    ______________________________________________________________________________________________ Curso Técnico emInformática 85 Criação de sites .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} } Orientação: Retrato / Paisagem As consultas de mídia também podem ser usadas para alterar o layout de uma página, dependendo da orientação do navegador. Você pode ter um conjunto de propriedades CSS que só serão aplicadas quando a janela do navegador for mais larga do que sua altura, uma orientação chamada "Paisagem": Exemplo: A página da web terá um fundo rosa se a orientação estiver no modo paisagem: @media only screen and (orientation: landscape) { body { background-color: pink; } } 2.4.2.5 Imagens Usando a propriedade width Se a propriedade width estiver definida como 100%, a imagem será responsiva para cima e para baixo: Exemplo: img { width: 100%; height: auto; } Usando a propriedade max-width Se a propriedade max-width estiver definida como 100%, a imagem será reduzida se for necessário, mas nunca até ser maior do que seu tamanho original:
  • 86.
    ______________________________________________________________________________________________ Curso Técnico emInformática 86 Criação de sites Exemplo: img { max-width: 100%; height: auto; } Imagens de fundo Imagens de plano de fundo também podem responder ao redimensionamento e dimensionamento. Aqui vamos mostrar três métodos diferentes: 1. Se a propriedade background-size estiver definida como "contain", a imagem de fundo será dimensionada e tentará ajustar a área de conteúdo. No entanto, a imagem manterá sua relação de aspecto (a relação proporcional entre a largura e a altura da imagem): Código CSS: div { width: 100%; height: 400px; background-image: url('flores.jpg'); background-repeat: no-repeat; background-size: contain; border: 1px solid red; } 2. Se a propriedade background-size estiver definida como "100% 100%", a imagem de fundo será
  • 87.
    ______________________________________________________________________________________________ Curso Técnico emInformática 87 Criação de sites esticada para cobrir toda a área de conteúdo: Código CSS: div { width: 100%; height: 400px; background-image: url('img_flowers.jpg'); background-size: 100% 100%; border: 1px solid red; } 3. Se a propriedade background-size estiver definida como "cover", a imagem de fundo será dimensionada para cobrir toda a área de conteúdo. Observe que o valor "cover" mantém a relação de aspecto e parte da imagem de plano de fundo pode ser cortada: Código CSS: div {
  • 88.
    ______________________________________________________________________________________________ Curso Técnico emInformática 88 Criação de sites width: 100%; height: 400px; background-image: url('img_flowers.jpg'); background-size: cover; border: 1px solid red; } O elemento <picture> funciona de forma semelhante aos elementos <video> e <audio>. Você configura imagens diferentes e a primeira imagem que se encaixa as preferências é aquela que está sendo usada: Exemplo: <picture> <source srcset="flor.jpg" media="(max-width: 400px)"> <source srcset="flores.jpg"> <img src="vaso_flores.jpg" alt="Vaso de flores"> </picture>  O atributo srcset é obrigatório e define a origem da imagem;  O atributo media é opcional e aceita as consultas de mídia encontradas na regra CSS @media;  Você também deve definir um elemento <img> para navegadores que não suportam o <picture>elemento. 2.4.2.6 Frameworks Existem muitos frameworks CSS existentes que oferecem design responsivo. Eles são gratuitos e fáceis de usar. Usando W3.CSS Uma ótima maneira de criar um design responsivo, é usar um estilo responsivo, como W3.CSS que torna mais fácil desenvolver sites que parecem agradáveis em qualquer tamanho: Desktop, laptop, tablet ou telefone; Bootstrap Outro framework popular é o Bootstrap, ele usa HTML, CSS e jQuery para fazer páginas da Web responsivas.
  • 89.