Apostila ppw

Prévia do material em texto

Universidade Paulista – UNIP		Comunicação Digital
	Publicações para Web
Pelos caminhos da World Wide Web
Prof. Esp. Francisco José De Marco Lopes dos Santos
Lista de Figuras
Figura 1: Pilha	9
Figura 2: Divisões da página	21
Lista de Tabelas
Tabela 1: TAGs HTML	12
As origens da World Wide Web
Algumas vezes poderíamos nos perguntar “de onde vem a Web?”, porém é mais fácil aceita-la apenas como uma presença existente.
Apesar de a maioria achar que a World Wide Web e a Internet são a mesma coisa, não são. Devemos pensar a Internet como o suporte da WWW (World Wide Web), seu meio físico apesar de imaterial, e a WWW como a forma de acesso às informações apresentadas no formato de hipertexto. Neste sentido devemos notar que o e-mail não faz parte da Web, ele é um serviço de troca de mensagens eletrônicas baseado na Internet com protocolo e padrões bem definidos, diferentes dos da Web que necessita de um programa apropriado, o navegador, para podermos estabelecer o acesso às informações.
Mas a ideia de um ambiente onde as informações se conectam como vemos hoje na Web não é nova e já completou cem anos de existência. Foi em 1910 que Paul Otlet, juntamente com La Fonteine, concebeu uma forma de intercâmbio de informações e ‘navegação’ por temas, ou peças de informação, com a qual o indivíduo poderia obter informação inter-relacionada, por caminhos que fizessem sentido segundo sua forma particular e individual de raciocínio em outras palavras conforme sua forma de pensar.
World Wide Web revisitada
Da forma que conhecemos hoje a Web, ela se utiliza de diversas infraestruturas pré-existentes na Internet, como o encaminhamento de rede, os serviços de FTP, servidores de arquivo, serviço de correio eletrônico e serviço de resolução de nomes de domínios, entre outros.
Ao apontarmos nosso navegador para um determinado sítio da Web (sítio é o termo português que indica determinado local, equivalente ao termo site do inglês) é necessário saber qual é o endereço IP (Internet Protocol) do servidor que abriga o sítio. Pois a navegação dos pacotes de dados na Internet é baseada nos endereços IP das diversas máquinas e mediada pelo protocolo de controle de transferência (TCP – Transfer Control Protocol).
Assim a função dos endereços de internet é basicamente para fins humanos de entendimento e necessita de uma tradução para endereços IP. Sem que saibamos nosso navegador envia um pacote de dados solicitando o endereço IP daquele endereço Web para um sistema distribuído mundialmente desempenhado por vários servidores de nomes de domínio. Desta forma se inicia a navegação na web, com uma solicitação de resolução de nome pelo DNS (Domain Name System – Sistema de Nomes de Domínios).
Uma vez identificado o endereço IP do servidor que abriga o sítio desejado o navegador emite uma requisição HTTP (HyperText Transfer Protocol – Protocolo de Transferência de HiperTexto), que recebida pelo servidor devido é processada e em resposta ele envia um arquivo contendo a página codificada em HTML.
Ao ser recebido pelo navegador tal arquivo é analisado e inicia-se o processo de montagem da página na janela do navegador. Este processo de montagem é chamado de page rendering, que podemos admitir de forma simplista como o processo de desenhar a página, segundo as marcações HTML e formatações CSS.
Princípio da Linguagem de Marcação de Hipertexto – HTML
A sigla HTML significa HyperText Markup Language, ou em português linguagem de marcação de hipertexto.
A primeira versão do HTML, em 1990, foi baseada no SGML (Standard Generalized Markup Language – linguagem de marcação generalizada padrão) e vem sofrendo diversas revisões e atualizações.
Atualmente na versão 5, o HTML incorpora diversas novidades em relação a versão 4.01 e ao XHTML (eXtensible Hypertext Markup Language – linguagem de marcação de hipertexto extensível) tendo sido fortemente influenciado pelo WHATWG – Web Hypertext Application Technology Working Group (grupo de trabalho tecnológico de aplicações de hipertexto para Web) que agrega os desenvolvedores de navegadores web e interessados, com foco prático e defendendo os padrões públicos e abertos para o desenvolvimento da Web.
A ideia básica por trás do HTML é tomarmos uma informação textual e diretamente nela marcar as partes com funções relevantes, algo como marcar os trechos que servem de título, subtítulo e mesmo cada parágrafo, dando estrutura ao conteúdo a ser mostrado.
Veja como o texto seria mostrado sem e com marcação HTML em um navegador ao visitarmos uma página:
Branca de Neve e os sete Anões. ERA UMA VEZ um rei que vivia num reino distante, com a sua filha pequena, que se chamava Branca de Neve. O rei, como se sentia só, voltou a casar, achando que também seria bom para a sua filha ter uma nova mãe. A nova rainha era uma mulher muito bela, mas também muito má, e não gostava de Branca de Neve que, quanto mais crescia, mais bela se tornava. A rainha malvada tinha um espelho mágico, ao qual perguntava, todos os dias: - Espelho meu, espelho meu, haverá mulher mais bela do que eu? E o espelho respondia: - Não minha rainha, és tu a mulher mais bela! Mas uma manhã, a rainha voltou a perguntar o mesmo ao espelho, e este respondeu: - Tu és muito bonita minha rainha, mas Branca de Neve é agora a mais bela! Enraivecida, a rainha ordenou a um dos seus servos que levasse Branca de Neve até à floresta e a matasse, trazendo-lhe de volta o seu coração, como prova...
Esta forma não é nem ao menos razoável, muito melhor é a visualização marcada do texto, como a seguir:
Branca de Neve e os sete Anões
ERA UMA VEZ um rei que vivia num reino distante, com a sua filha pequena, que se chamava Branca de Neve. O rei, como se sentia só, voltou a casar, achando que também seria bom para a sua filha ter uma nova mãe. A nova rainha era uma mulher muito bela, mas também muito má, e não gostava de Branca de Neve que, quanto mais crescia, mais bela se tornava.
A rainha malvada tinha um espelho mágico, ao qual perguntava, todos os dias:
- Espelho meu, espelho meu, haverá mulher mais bela do que eu?
E o espelho respondia:
- Não minha rainha, és tu a mulher mais bela!
Mas uma manhã, a rainha voltou a perguntar o mesmo ao espelho, e este respondeu:
- Tu és muito bonita minha rainha, mas Branca de Neve é agora a mais bela!
Enraivecida, a rainha ordenou a um dos seus servos que levasse Branca de Neve até à floresta e a matasse, trazendo-lhe de volta o seu coração, como prova...
Muito melhor não é mesmo. Para isso foi usada a marcação HTML, auxiliada por um pouquinho de CSS, que é a ‘linguagem’ que empresta estilo às páginas Web. Por exemplo, o título ‘Branca de Neve e os sete Anões’ foi marcado como um cabeçalho de nível 3, assim: <h3>Branca de Neve e os sete Anões</h3>. Observe que marcar é sinalizar com etiquetas o início e o fim da porção de texto que se deseja que tenha uma certa função, neste caso título.
Vamos de novo, mas agora vamos marcar também alguns parágrafos:
<h3>Branca de Neve e os sete Anões</h3> <p>ERA UMA VEZ um rei que vivia num reino distante, com a sua filha pequena, que se chamava Branca de Neve. O rei, como se sentia só, voltou a casar, achando que também seria bom para a sua filha ter uma nova mãe. A nova rainha era uma mulher muito bela, mas também muito má, e não gostava de Branca de Neve que, quanto mais crescia, mais bela se tornava.</p> <p>A rainha malvada tinha um espelho mágico, ao qual perguntava, todos os dias:</p> <p>- Espelho meu, espelho meu, haverá mulher mais bela do que eu?</p> <p>E o espelho respondia:</p> <p>- Não minha rainha, és tu a mulher mais bela!</p> <p>Mas uma...
Então veja, onde começou o título, marcamos com <h3> e onde ele terminou com </h3>, onde começou um parágrafo marcamos com <p> e onde terminou com </p>. É não parece assim tão difícil marcar um texto então.
De fato, marcar um texto é apenas uma parte do trabalho, mas daqui por diante nada tão assustador assim. Apenas seria melhor visualizarmos de forma mais imediatao texto marcado, então é recomendável, quebrar as linhas de forma conveniente, assim:
<h3>Branca de Neve e os sete Anões</h3>
<p>ERA UMA VEZ um rei que vivia num reino distante, com a sua filha pequena, que se chamava Branca de Neve. O rei, como se sentia só, voltou a casar, achando que também seria bom para a sua filha ter uma nova mãe. A nova rainha era uma mulher muito bela, mas também muito má, e não gostava de Branca de Neve que, quanto mais crescia, mais bela se tornava.</p>
<p>A rainha malvada tinha um espelho mágico, ao qual perguntava, todos os dias:</p>
<p>- Espelho meu, espelho meu, haverá mulher mais bela do que eu?</p>
<p>E o espelho respondia:</p>
<p>- Não minha rainha, és tu a mulher mais bela!</p> <p>Mas uma...
Pronto bem mais legível o texto marcado agora.
TAGs HTML
Uma etiqueta de marcação em HTML é chamada de tag HTML, um termo de origem inglesa (tag = etiqueta).
Toda tag HTML é iniciada pelo sinal de menor ‘<’ e terminada pelo sinal de maior ‘>’ e isso é uma regra rígida.
Como a maioria das tags marcam início e fim de trechos de texto, elas trabalham em pares sendo tag de abertura e tag de fechamento diferenciadas por um caractere barra antes da tag, assim: <html> e </html>.
Aquelas tags que não trabalham em pares, ou seja, as que não tem versão de fechamento, são sinalizadas colocando o caractere barra após a tag e com um espaço para ficar bem destacado, assim: <br />.
Muitas tags podem ser modificadas para causar efeitos específicos na página visualizada no navegados e parar isso podem ter um ou mais atributos.
Os atributos vão junto à tag de abertura e são separados por ao menos um espaço tanto das tags quanto de outros atributos e isso é uma regra rígida.
Alguns atributos apenas precisam estar presentes para ter efeito sobre as tags, outros necessitam de um valor associado para exercer mais ou menos efeito sobre as tags, por exemplo, o atributo ‘disable’ é suficiente e não requer valor associado para impedir acesso a um campo de formulário que não se pretenda permitir ao usuário muda-lo, muito embora possa ser, opcionalmente, valorado como mostrado aqui disable="disable", o que é totalmente dispensável.
Os demais atributos, que necessitam de um valor associado para impor sua ação, são sempre trabalhados na forma nome/valor e sua sintaxe geral é nome="valor". Por exemplo, o atributo que define a largura de um elemento de tabela é declarado como: width="100%". Note que isso é uma regra rígida.
Podemos agora mostrar a forma geral da sintaxe de uma tag HTML, na sua forma mais rica, que inclui a própria tag e mais de um atributo.
<tag atributo1="valor" atributo2="valor" ... atributoN="valor"> .. </tag>
Os pontos importantes, regras de sintaxe, são:
Daquilo que compõe a etiqueta completa SEMPRE se usa ao menos um espaço para separa-los;
Sempre que um atributo tiver valor, o atributo e o valor DEVEM estar ligados por um sinal de igual e mais nada;
Todo valor de um atributo PRECISA estar entre aspas ou entre apóstrofos, ou um, ou outro;
Toda aspa (ou apóstrofo) aberto em uma tag TEM de ser fechado na mesma tag.
Sabendo como as tags podem ser declaradas, ou escritas, a próxima regra a ser sabida é que toda tag aberta, deve ser fechada, obedecendo a ordem reversa de abertura, ou seja abrindo uma tag dentro de outra, a última DEVE ser fechada antes da sua anterior. Isto se assemelha ao balanceamento de parênteses em equações matemáticas, onde todo parêntese aberto deve ser fechado conforme sua ordem de uso.
Por exemplo, e aproveitando para conhecer algumas das tags HTML:
<html><head><title>Exemplo</title></head><body></body></html>
Deve-se notar que a primeira tag aberta (<html>) é a última a ser fechada. Podemos também pensar nisso como um empilhamento de tags, no qual não se pode retirar da pilha uma tag que não seja a última a ter sido empilhada, sob risco de desmoronar toda a pilha. 
Propositalmente o exemplo anterior mostrou quatro tag HTML, que constituem o conjunto mínimo de tags a existir em todas as páginas web, são elas:Figura 1: Pilha
<html> .. </html> 	delimita (marca) início e fim do documento HTML.
<head> .. </head>	delimita a sessão de meta-dados da página
<title> .. </title>	marca o título da página
<body> .. </body>	delimita a sessão de conteúdo da página
Página da Web
As páginas da web têm uma estrutura padrão para sua constituição que segue o padrão mostrado abaixo:
Abertura do documento HTML
Declarações de meta-informações (meta-dados)
Nome do documento HTML
Declaração do conteúdo do documento
As quatro tags do exemplo desempenham, cada uma, um destes itens estruturais.
Tomando-se o arquivo da história marcada de Branca de Neve e os sete Anões e encaixando-o na estrutura mostrada como sendo o conteúdo do documento, ou seja, entre as tags <body> e </body>, obtém-se um documento HTML completo.
Página passivas X Páginas ativas
A página da história de Branca de Neve montada acima é um exemplo de página estática, ou passiva, a qual é meramente informativa e não tem a capacidade de interagir ativamente com o visitante, em contrapartida às páginas dinâmicas, ou ativas, que são capazes de reagir às interações do visitante muito além de apenas navegar por ligações hipertextuais entre páginas.
As páginas dinâmicas requerem programas operando dentro do servidor Web e para tanto existem diversas linguagens como PHP, PERL, IsisScript, ASP, Python, Java e etc.
Com as páginas ativas pode-se construir sistemas que cumpram funções as mais diversas, deste um blog até um sistema de controle empresarial (tipo ERP distribuído) em geral sistemas associados a gerenciados de bancos de dados (SGDBs).
Divisão de Conteúdo, Estilo e Comportamento
Modernamente o melhor estilo de projeto e desenvolvimento web, dita como boa prática exercer a divisão entre conteúdo, estilo, e comportamento, cada qual em seus arquivos sem que ocorram misturas, pois a separação propicia muito maior facilidade de manutenção e isolação entre as responsabilidades.
Na prática quer dizer que os conteúdos e estruturas do site devem estar dentro de arquivos HTML, cujo elenco de tags é altamente direcionado ao cumprimento desta finalidade. A formatação e estilo de apresentação devem estar dentro de arquivos CSS a qual também foi planejada para máxima eficiência nesta área. Por fim o comportamento reativo das páginas deve permanecer confinado em arquivos JS onde estarão todas as rotinas escritas em linguagem de programação, neste caso JavaScript, que darão conta de reagir aos diferentes eventos ‘causados’ pelo visitante, ao clicar em botões e links, ou passar o cursor do mouse sobre elementos diversos.
A HTML atual
Estamos vivenciando o HTML5 como mais recente versão da linguagem de marcação da Web, e nesta versão foram introduzidas novas tags e condenadas umas outras.
Elementos mais interessantes adicionados na versão 5:
Elementos semânticos:	<header>, <footer>, <article>, e <section>.
Elementos gráficos: <svg> e <canvas>.
Elementos multimídia: <audio> e <video>.
Atributos para campos de formulários: number, date, time, calendar, e range.
Elementos descontinuados na versão 5, cujas funções e efeitos foram incorporados pelo CSS:
<basefont>
<big>
<center>
<font>
<strike>
<tt>
Elementos descontinuados com funções e efeitos assumidos por outros no HTML5:
<acronym> passou a ser <abbr>
<applet> passou a ser <object>
<dir> passou a ser <ul>
Elementos descontinuados no HTML5:
<frame>
<frameset>
<noframes>
Lista com as tags do HTML5 ordenadas alfabeticamente:
	Tag
	Group
	Description
	<!--...-->
	Basic element
	Defines a comment
	<!DOCTYPE> 
	Basic element
	Defines the document type
	<a>
	Inline text semantics
	Defines a hyperlink
	<abbr>
	Inline text semantics
	Defines an abbreviation or an acronym
	<acronym>
	Obsolite and deprecated
	† Use <abbr> instead. Defines an acronym
	<address>
	Content sectioning
	Defines contact information for the author/owner of a document
	<applet>
	Obsolite and deprecated
	† Use <embed> or<object> instead. Defines an embedded applet
	<area>
	Image and multimedia
	Defines an area inside an image-map
	<article>
	Content sectioning
	* Defines an article
	<aside>
	Content sectioning
	* Defines content aside from the page content
	<audio>
	Image and multimedia
	* Defines sound content
	<b>
	Inline text semantics
	Defines bold text
	<base>
	Document metadata
	Specifies the base URL/target for all relative URLs in a document
	<basefont>
	Obsolite and deprecated
	† Use CSS instead. Specifies a default color, size, and font for all text in a document
	<bdi>
	Inline text semantics
	* Isolates a part of text that might be formatted in a different direction from other text outside it
	<bdo>
	Inline text semantics
	Overrides the current text direction
	<big>
	Obsolite and deprecated
	† Use CSS instead. Defines big text
	<blockquote>
	Text content
	Defines a section that is quoted from another source
	<body>
	Basic element
	Defines the document's body
	<br>
	Inline text semantics
	Defines a single line break
	<button>
	Forms
	Defines a clickable button
	<canvas>
	Scripting
	* Used to draw graphics, on the fly, via scripting (usually JavaScript)
	<caption>
	Table contents
	Defines a table caption
	<center>
	Obsolite and deprecated
	† Use CSS instead. Defines centered text
	<cite>
	Inline text semantics
	Defines the title of a work
	<code>
	Inline text semantics
	Defines a piece of computer code
	<col>
	Table contentes
	Specifies column properties for each column within a <colgroup> element
	<colgroup>
	Table contentes
	Specifies a group of one or more columns in a table for formatting
	<data>
	Inline text semantics
	Links a given content with a machine-readable translation
	<datalist>
	Forms
	* Specifies a list of pre-defined options for input controls
	<dd>
	Text content
	Defines a description/value of a term in a description list
	<del>
	Demarcating edits
	Defines text that has been deleted from a document
	<details>
	Interactive elements
	* Defines additional details that the user can view or hide
	<dfn>
	Inline text semantics
	Represents the defining instance of a term
	<dialog>
	Interactive elements
	* Defines a dialog box or window
	<dir>
	Obsolite and deprecated
	† Use <ul> instead. Defines a directory list
	<div>
	Text content
	Defines a section in a document
	<dl>
	Text content
	Defines a description list
	<dt>
	Text content
	Defines a term/name in a description list
	<em>
	Inline text semantics
	Defines emphasized text 
	<embed>
	Embedded content
	* Defines a container for an external (non-HTML) application
	<fieldset>
	Forms
	Groups related elements in a form
	<figcaption>
	Text content
	* Defines a caption for a <figure> element
	<figure>
	Text content
	* Specifies self-contained content
	<font>
	Obsolite and deprecated
	† Use CSS instead. Defines font, color, and size for text
	<footer>
	Content sectioning
	* Defines a footer for a document or section
	<form>
	Forms
	Defines an HTML form for user input
	<frame>
	Obsolite and deprecated
	† Defines a window (a frame) in a frameset
	<frameset>
	Obsolite and deprecated
	† Defines a set of frames
	<h1> to <h6>
	Content sectioning
	Defines HTML headings
	<head>
	Document metadata
	Defines information about the document
	<header>
	Content sectioning
	Defines a header for a document or section
	<hgroup>
	Content sectioning
	Represents the heading of a section
	<hr>
	Text content
	Defines a thematic change in the content
	<html>
	Basic elements
	Defines the root of an HTML document
	<i>
	Inline text semantics
	Defines a part of text in an alternate voice or mood
	<iframe>
	Embedded content
	Defines an inline frame
	<img>
	Embedded content
	Defines an image
	<input>
	Forms
	Defines an input control
	<ins>
	Demarcating edits
	Defines a text that has been inserted into a document
	<kbd>
	Inline text semantics
	Defines keyboard input
	<keygen>
	Forms
	* Defines a key-pair generator field (for forms)
	<label>
	Forms
	Defines a label for an <input> element
	<legend>
	Forms
	Defines a caption for a <fieldset> element
	<li>
	Text content
	Defines a list item
	<link>
	Document metadata
	Defines the relationship between a document and an external resource (most used to link to style sheets)
	<main>
	Text content
	* Specifies the main content of a document
	<map>
	Image and multimedia
	Defines a client-side image-map
	<mark>
	Inline text semantics
	* Defines marked/highlighted text
	<menu>
	Interactive elements
	Defines a list/menu of commands
	<menuitem>
	Interactive elements
	* Defines a command/menu item that the user can invoke from a popup menu
	<meta>
	Document metadata
	Defines metadata about an HTML document
	<meter>
	Forms
	* Defines a scalar measurement within a known range (a gauge)
	<nav>
	Content sectioning
	* Defines navigation links
	<noframes>
	Obsolite and deprecated
	† Defines an alternate content for users that do not support frames
	<noscript>
	Scripting
	Defines an alternate content for users that do not support client-side scripts
	<object>
	Embedded content
	Defines an embedded object
	<ol>
	Text content
	Defines an ordered list
	<optgroup>
	Forms
	Defines a group of related options in a drop-down list
	<option>
	Forms
	Defines an option in a drop-down list
	<output>
	Forms
	* Defines the result of a calculation
	<p>
	Text content
	Defines a paragraph
	<param>
	Embedded content
	Defines a parameter for an object
	<pre>
	Text content
	Defines preformatted text
	<progress>
	Forms
	* Represents the progress of a task
	<q>
	Inline text semantics
	Defines a short quotation
	<rp>
	Inline text semantics
	* Defines what to show in browsers that do not support ruby annotations
	<rt>
	Inline text semantics
	* Defines an explanation/pronunciation of characters (for East Asian typography)
	<rtc>
	Inline text semantics
	* Embraces semantic annotations of characters 
	<ruby>
	Inline text semantics
	* Defines a ruby annotation (for East Asian typography)
	<s>
	Inline text semantics
	Defines text that is no longer correct
	<samp>
	Inline text semantics
	Defines sample output from a computer program
	<script>
	Scripting
	Defines a client-side script
	<section>
	Content sectioning
	* Defines a section in a document
	<select>
	Forms
	Defines a drop-down list
	<small>
	Inline text semantics
	Defines smaller text
	<source>
	Embedded content
	* Defines multiple media resources for media elements (<video> and <audio>)
	<span>
	Inline text semantics
	Defines a section in a document
	<strike>
	Obsolite and deprecated
	† Use <del> or <s> instead. Defines strikethrough text
	<strong>
	Inline text semantics
	Defines important text
	<style>
	Document metadata
	Defines style information for a document
	<sub>
	Inline text semantics
	Defines subscripted text
	<summary>
	Interactive elements
	* Defines a visible heading for a <details> element
	<sup>
	Inline text semantics
	Defines superscripted text
	<table>
	Table contentes
	Defines a table
	<tbody>
	Table contentes
	Groups the body content in a table
	<td>
	Table contentes
	Defines a cell in a table
	<textarea>
	Forms
	Defines a multiline input control (text area)
	<tfoot>
	Table contentes
	Groups the footer content in a table
	<th>
	Table contentes
	Defines a header cell in a table
	<thead>
	Table contentes
	Groups the header content in a table
	<time>
	Inline text semantics
	* Defines a date/time
	<title>
	Document metadata
	Defines a title for the document
	<tr>
	Table contentes
	Defines a row in a table
	<track>
	Image and multimedia
	* Defines text tracks for media elements(<video> and <audio>)
	<tt>
	Obsolite and deprecated
	† Use CSS instead. Defines teletype text
	<u>
	Inline text semantics
	Defines text that should be stylistically different from normal text
	<ul>
	Text content
	Defines an unordered list
	<var>
	Inline text semantics
	Defines a variable
	<video>
	Image and multimedia
	* Defines a video or movie
	<wbr>
	Inline text semantics
	* Defines a possible line-break
Tabela 1: TAGs HTML
* Tags novas do HTML5
† Tags alteradas, com função incorporada pelo CSS, ou eliminadas
Conforme mostra a Tabela 1 acima as tags estão distribuídas em x grupos, sendo eles:
Basic element (elementos básicos)
Content sectioning (Seccionamento de conteúdo)
Demarcating edits (Demarcadores de edição)
Document metadata (Metadados de documento)
Embedded content (Conteúdo embutido)
Foms (Formulários)
Image and multimedia (Multimidia e imagem)
Inline text semantics (Texto semantico em linha)
Interactive elements (Elementos interativos)
Obsolites and deprecateds (Obsoletos)
Scripting 
Table content (Conteúdo de tabela)
Text content (Conteúdo textual)
A CSS
CSS, formalmente, Cascading Style Sheet (folha de estilo em cascata) é uma linguagem para estilos que define o layout de documentos HTML. Por exemplo, CSS controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos e muito mais.
Com CSS criamos regras de formato e estilo de exibição das etiquetas HTML, controlando ou modificando seus diversos aspectos de visualização. Com CSS podemos inclusive criar regras de exibição específicas para cada mídia, ou seja, apresentações diferenciadas e otimizadas de uma mesma página HTML para monitor e impressora, por exemplo.
Sintaxe CSS
A sintaxe básica usada em CSS é seletor { propriedade: valor; }. Seletor pode ser uma tag HTML, uma classe com características próprias, ou um identificador para um dado elemento dentro de uma página, o que permite alto nível de controle sobre a apresentação.
Assim uma regra CSS pode se parecer com os seguintes exemplos:
body { background-color: #d8d83f; color: navy; }
.normal {	font-family: sans-serif;
	font-style: italic;
	font-variant: small-caps;
	font-size: 120%;
	font-weight: bold; }
#container { margin: 100px 40px 10px 70px; }
Local da CSS
Basicamente podemos encontrar especificações CSS em três locais: in-line, embeded, external.
In-line (ou em linha) é quando se utiliza o atributo style para uma tag que desejamos pontualmente estilizar, como se mostra a seguir:
<body style=”background-color: #ac9f30; color: navy;”> .. </body>
Embeded (ou interna) é quando se agrupam as especificações CSS em uma tag <style> .. </style> na sessão <head> .. </head> do documento HTML, como mostrado aqui:
<html>
	<head>
		<title>Meu Site</title>
		<style type=”text/css”>
			body { background-color: #d8d83f; color: navy; }
		</style>
	</head>
	<body>
	.
	.
	</body>
</html>
External (ou externa) é quando as especificações CSS ficam em um arquivo próprio, que aliás é uma boa prática de ser utilizada, por trazer facilidades na manutenção de um sítio mais complexo. Abaixo temos a forma de explicar ao HTML onde se encontra o arquivo externo com as regras CSS que se encontra na pasta csss e se denomina estilo.css.
<html>
	 <head>
		<title>Meu documento</title>
		<link rel="stylesheet" type="text/css" href="csss/estilo.css" />
	 </head>
	 <body>
	 ...
Propriedades diversas na CSS
Há treze grupos de atributos de CSS, alguns subordinados a outros, mas a maioria é independente como se observa na tabela a seguir que lista todos os atributos aplicáveis nas regras CSS.
1 - FUNDO
background	Define todos os parâmetros referentes ao fundo de um elemento. Aceita de 1 a 5 valores.
Valores:	background-color | background-image | background-repeat | background-attachment | background-position
background-color	Define a cor de fundo de um elemento.
Valores:	nomecor | #rrggbb | #rgb | rgb(d,d,d) | rgb(d%,d%,d%) | transparent
background-image	Define uma imagem como fundo de um elemento.
Valores:	url | none
background-repeat	Define se a imagem vai repetir (formando um mosaico) ou não e a direção da repetição.
Valores:	repeat | repeat-x | repeat-y | no-repeat
background-attachment	Define se a imagem de fundo de um elemento ficará fixa ou se irá rolar junto com o conteúdo.
Valores:	scroll | fixed
background-position	Define o ponto onde inicia o desenho da imagem de fundo.
Valores:	top left | top center | top right | center left | center center | center right | bottom left | bottom center | bottom right | x% y% | x unids_css y unids_css
2 - BORDAS
border	Define o estilo, a espessura e a cor das 4 bordas. Aceita de 1 a 3 valores.
Valores:	border-style | border-width | border-color
border-top
border-right
border-bottom
border-left	Definem o estilo, a espessura e a cor das bordas superior, direita, inferior e esquerda. Aceitam de 1 a 3 valores.
Valores:	border-style | border-width | border-color
border-top-style
border-top-width
border-top-color	Definem o estilo, a espessura e a cor da borda superior. Aceitam de 1 a 3 valores.
Valores:	border-style | border-width | border-color
border-right-style
border-right-width
border-right-color	Definem o estilo, a espessura e a cor da borda direita. Aceitam de 1 a 3 valores.
Valores:	border-style | border-width | border-color
border-bottom-style
border-bottom-width
border-bottom-color	Definem o estilo, a espessura e a cor da borda inferior. Aceitam de 1 a 3 valores.
Valores:	border-style | border-width | border-color
border-left-style
border-left-width
border-left-color	Definem o estilo, a espessura e a cor da borda esquerda. Aceitam de 1 a 3 valores.
Valores:	border-style | border-width | border-color
border-style	Define o estilo das 4 bordas. Aceita de 1 a 4 valores.
Valores: 	none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
border-width	Define a espessura das 4 bordas. Aceita de 1 a 4 valores.
Valores:	thin | medium | thick | unids_css
border-color	Define a cor das 4 bordas. Aceita de 1 a 4 valores.
Valores:	nomecor | #rrggbb | #rgb | rgb(d,d,d) | rgb(d%,d%,d%)
3 - LINHAS DE CONTORNO
outline	Define o estilo, a espessura e a cor da linha de contorno. Aceita de 1 a 3 valores.
Valores: 	outline-style | outline-width | outline-color
outline-style	Define o estilo da linha de contorno.
Valores:	none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
outline-width	Define a espessura da linha de contorno.
Valores:	thin | medium | thick | unids_css
outline-color	Define a cor da linha de contorno.
Valores:	nomecor | #rrggbb | #rgb | rgb(d,d,d) | rgb(d%,d%,d%) | invert
4 - MARGENS
Margin	Define as 4 margens do elemento. Aceita de 1 a 4 valores.
Valores:	margin-top | margin-right | margin-bottom | margin-left
margin-top
margin-right
margin-bottom
margin-left	Definem as margens superior, direita, inferior e esquerda.
Valores:	auto | unids_css | %
5 - ESPAÇO EM BRANCO (PADDING)
padding	Define o espaço entre o conteúdo e os 4 limites do elemento. Aceita de 1 a 4 valores.
Valores:	padding-top | padding-right | padding-bottom | padding-left
padding-top
padding-right
padding-bottom
padding-left	Definem o espaço entre o conteúdo e os limites superior, direito, inferior e esquerdo.
Valores:	unids_css | %
6 - CLASSIFICAÇÃO (FORMA DE EXIBIÇÃO)
clear	Define os lados de um elemento onde não são permitidos elementos flutuantes.
Valores:	left | right | both | none
cursor	Define um formato para o cursor.
Valores:	url | auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help
display	Define se um elemento deve ser apresentado e a forma de apresentação.
Valores:	none | inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group |table-column | table-cell | table-caption
float	Define o alinhamento de um elemento e controla o fluxo de texto ou de outros elementos ao seu redor.
Valores:	left | right | none
position	Define a posição de um elemento como estática, relativa, absoluta ou fixa.
Valores:	static | relative | absolute | fixed
visibility	Define se um elemento deve ficar visível ou invisível.
Valores:	visible | hidden | collapse
7 - POSICIONAMENTO
top
right
bottom
left	Definem a distância do elemento em relação ao limite do elemento que o contém.
Valores:	auto | unids_css | %
vertical-align	Define o alinhamento vertical do elemlento.
Valores:	baseline | sub | super | top | text-top | middle | bottom | text-bottom | unids_css | %
clip	Define a forma de um elemento.
Valores:	auto | shape
overflow	Define o que deve ocorrer quando o conteúdo de um elemento excede sua área.
Valores:	visible | hidden | scroll | auto
z-index	Define a ordem de apresentação dos elementos quando há sobreposição.
Valores:	auto | número
8 - DIMENSIONAMENTO
width
height	Definem a largura e a altura de um elemento.
Valores:	auto | unids_css | %
max-width
max-height	Definem a largura máxima e a altura máxima de um elemento.
Valores:	none | unids_css | %
min-width
min-height	Definem a largura mínima e a altura mínima de um elemento.
Valores:	unids_css | %
line-height	Define a distância entre linhas de texto.
Valores:	normal | número | unids_css | %
9 - FONTE
font	Define vários valores da fonte.
Valores:	font-family | font-size/line-height | font-style | font-weight | font-variant | caption | icon | menu | message-box | small-caption | status-bar
font-family	Define o tipo de fonte.
Valores:	family-name | generic-family
font-size	Define o tamanho da fonte.
Valores:	xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | unids_css | %
font-style	Define o estilo da fonte.
Valores:	normal | italic | oblique
font-weight	Define a espessura do traço da fonte.
Valores:	normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
font-variant	Define se deve ser utilizado um tipo de fonte "small-caps" ou normal.
Valores:	normal | small-caps
font-size-adjust	Define que o tamanho da fonte deve ser ajustado, caso o browser tenha de utilizar outro tipo de fonte que não o escolhido em font-family.
Valores:	none | número
font-stretch	Define uma contração ou expansão na largura da fonte.
Valores:	normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
10 - TEXTO
color	Define a cor do texto.
Valores:	nomecor | #rrggbb | #rgb | rgb(d,d,d) | rgb(d%,d%,d%)
text-align	Define o alinhamento do texto.
Valores:	left | right | center | justify
text-indent	Define um deslocamento para a direita ou esquerda da primeira linha do texto.
Valores:	unids_css | %
text-decoration	Define um efeito decorativo para o texto.
Valores:	none | underline | overline | line-through | blink
text-transform	Define que o texto deve ser capitalizado ou ser exibido todo em maiúsculas ou minúsculas.
Valores:	none | capitalize | uppercase | lowercase
letter-spacing
word-spacing	Definem um aumento ou diminuição no espaço entre os caracteres ou entre as palavras.
Valores:	normal | unids_css
white-space	Define o tratamento a ser dado ao espaço em branco existente dentro de um elemento.
Valores:	normal | pre | nowrap
direction	Define a direção em que é escrito o texto. Da esquerda para a direita ou da direita para a esquerda.
Valores:	ltr | rtl
11 - LISTAS E MARCADORES
list-style	Define todos os parâmetros referentes a uma lista. Aceita de 1 a 3 valores.
Valores:	list-style-type | list-style-position | list-style-image
list-style-type	Define o tipo de marcador de item da lista.
Valores:	none | disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-alpha | upper-alpha | lower-greek | lower-latin | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha
list-style-position	Define a posição do marcador de item da lista.
Valores:	inside | outside
list-style-image	Define a imagem a ser utilizada como marcador de item da lista.
Valores:	none | url
12 - TABELAS
border-collapse	Define se os traços das bordas serão fundidos ou mantidos separados.
Valores:	collapse | separate
border-spacing	Define a distância entre as bordas de células adjacentes. Só aplicável quando border-collapse for separate.
Valores:	unids_css
empty-cells	Define se as células sem conteúdo visível devem ter bordas ou não. Só aplicável quando border-collapse for separate.
Valores:	show | hide
caption-side	Define a posição da legenda na tabela.
Valores:	top | bottom | left | right
table-layout	Define como será desenhada a tabela
Valores:	auto | fixed
13 - GERAÇÃO DE CONTEÚDO
content	Gera conteúdo para um elemento. Utilizada com os pseudo-elementos :before e :after.
Valores:	string | url | counter(name) | counter(name, list-style-type) | counters(name, string) | counters(name, string, list-style-type) | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote
counter-increment	Define em quanto será incrementado o contador a cada ocorrência de um seletor.
Valores:	none | número identificador
counter-reset	Define o valor a ser atribuído ao contador a cada ocorrência de um seletor.
Valores:	none | número identificador
quotes	Define o estilo das aspas.
Valores:	none | string string
A Formação estrutural de uma Página Web
Até aqui vimos algumas das coisas que colocamos em um arquivo de página da web, e até alguns porquês, mas nada sobre o como colocar, então avançaremos neste tema por ora.
Lembrando que a página web que vemos em nosso navegador é o ‘desenho’ resultante das instruções contidas no arquivo recebido do servidor onde reside o sítio que desejamos explorar, então deve haver algum tipo de formalidade para construir o tal arquivo que serve de suporte para a página que vemos na tela.
Regras de formação de arquivos HTML
As regras relativas ao arquivo HTML não são muitas. Em verdade temos apenas cinco (05) regras, relacionadas a seguir:
O arquivo HTML deve ser um texto humanamente legível;
O arquivo deve conter três partes mínimas;
Definição de tipo de documento;
Cabeçalho com metadados da página;
O Corpo da página onde se encontra o conteúdo a ser disseminado;
O arquivo deve ser ‘encapsulado’ pela tag <html>;
Aninhada a esta devem haver as tags <head> e <body>;
A tag <head> deve conter, minimamente, uma tag <title>.
Certamente que o conteúdo está sujeito às regras de abertura a fechamento de tags em forma de pilha como abordado anteriormente.
Como observado na Figura 2 ao lado a primeira parte na qual se divide o arquivo da página HTML, é a definição de tipo. Isto refere-se à versão de HTML que será adotada. 
A segunda parte é aquela delimitada pela tag <head>, onde assentam os metadados da página e alguns controles do tipo inclusão de arquivos externos como, por exemplo, das CSS.
Já a terceira e última parte é onde estará o conteúdo informacional da página, que em última análise é o que motiva a criação da página html.
Figura 2: Divisões da página
Os textos específicos a serem escritos em cada parte são mostrados a seguir.
Na definição de tipo do documento encontraremos textos como estes:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional/EM"
				"http://www.w3.org/TR/html4/loose.dtd">
ou 
<!DOCTYPE html>
O primeiro define que o padrão adotado para a página HTML é o HTML 4.01 Transicional, e o segundo que o padrão é o HTML 5. Não é necessário muito esforço para perceber que a evolução dos padrões levou à sua simplificação. Ambos são passíveis de uso, no entanto cada vez mais o HTML 5 é o padrão em uso, motivo pelo qual deve ser preferido.
Na porção de metadados e controles devemos, minimamente, encontrar o seguinte texto:
<html>
<head><title>QAPLA Comércioe Serviços de Informática</tile></head>
Onde vemos a tag de abertura de documento <html> e a seguir a tag <head>, contendo a tag <title>.
Uma versão mais elaborada pode ser está, onde temos além do título da página a definição de idioma da página (atributo lang na tag html), codificação de caracteres (chamada encode), palavras chave, descrição de conteúdo, identificador único para mecanismos de busca, e o link para o arquivo contendo a folha de estilos em cascata (css):
<html lang="pt-br">
 <head>
 <title>QAPLA Comércio e Serviços de Informática</title>
 <meta charset=”iso-8859-1">
 <meta name="keywords" content="CDS/ISIS, ISIS, WWWISIS, informática, serviços">
 <meta name="description" content="Site da QAPLA CSI Ltda-ME">
 <meta name="verify-v1" content="FGu7l6iR6GOhfx8tKg6M2j4xn3AEndUf8wuYtiemKDU=">
 <link rel="stylesheet" type="text/css" href="css/qapla.css">
 </head>
Além de estar presente também a endentação das tags HTML que aumenta em muito a legibilidade do código HTML.
Por fim na parte do corpo da página encontra-se código HTML para dar suporte à informação a ser transmitida ao visitante, que se inicia e termina como a seguir:
 <body>
.
.
.
 </body>
</html>
Como descrito acima as cinco regras para delinear como efetuar a página estão presentes e cumpridas.
Falar sobre a complacência dos navegadores, que é melhor ser tudo minúsculas e da endentação
	São Paulo
	2015