HTML

• A internet(Rede Mundial de Computadores) foi criada por volta de 1969, com o objetivo de auxiliar a comunicação das forças
armadas americanas em meio a guerra. Seu propósito inicial era manter contato alternativo entre as tropas, caso os ataques
inimigos interrompessem os meios tradicionais de telecomunicação da época;
• Na década de 1960, os Estados Unidos e a União Soviética eram grandes potências mundiais.
• Temendo a perda de documento sigilosos, através de um ataque soviético, os americanos desenvolveram um sistema de
comunicação capaz de compartilhar e descentralizar informações.
• Para tornar isso possível, foi necessária a criação de uma rede operacional de computadores, trabalho desenvolvido pela
ARPA(Agência de Pesquisas em Projetos ou Advanced Research and Projects Agency )
• A ARPANET foi então criada e passou a interligar bases e departamentos do governo americano. A Arpanet utilizava um
sistema de transmissão de dados conhecido como chaveamento de pacotes(Divide as informações em pequenos pacotes
diferentes e envia tais pacotes aos poucos).
• Na década de 1970, com a diminuição da tensão entre EUA e União Soviética, os EUA dividiu o sistema em dois:
MILNET, com uso exclusivo para propósitos militares.
ARPANET, passou a ser desenvolvida por universidades e pesquisadores, com isso a mesma passou a ter uma nova
função : a comunicação acadêmica.
• Para realizar a comunicação, a ARPANET utilizava um sistema chamado backbone (espinha dorsal, em português). O backbone
era formado por computadores potentes, ligados por linhas em lugares estratégicos, para realizar a transferência de um
grande fluxo de dados.
• 1989, Tim Berners-Lee apresentou a primeira proposta para a World Wide Web (rede mundial de computadores). Com a ajuda
de um estudante do Conselho Europeu para Pesquisa Nuclear (CERN). Tim Berners-Lee conseguiu realizar a primeira
comunicação entre um cliente e um servidor por meio da internet. Comunicação essa que foi realizada por meio do
HTTP(hypertext transfer protocol).
• HTTP – O cliente envia a mensagem com a requisição para o servidor por meio do protocolo HTTP. O protocolo HTTP, por sua
vez retorna com a mensagem.
• A World Wide Web (www) é composta de pequenas quantidades de documentos interligadas por meio de hiperlinks. O
conjunto de documentos é chamado de página Web(possuem títulos , imagens, textos, formulários e outros elementos.). Já os
sítios ou sites são formados pelo conjunto de páginas webs localizadas em um mesmo endereço.
• A estrutura das páginas webs é criada pela linguagem de marcação chamada HTML (Hypertext Markup Language).

• O primeiro navegar web foi criado por Tim Berners-Lee e foi intitulado de World Wide Web. E foi implementado para realizar a
comunicação entre pesquisadores e alunos do CERN.
• Tim Beners-Lee é o atual diretor do W3C que é o consócio internacional que tem como principal função o desenvolvimento
de padrões que auxiliem no crescimento da internet.

Acessibilidade:
• Acessibilidade é Possibilidade e condição de alcance, percepção e entendimento para a utilização, em igualdade de
oportunidades, com segurança e autonomia, do meio físico, do transporte, da informação e da comunicação, inclusive dos
sistemas e tecnologias de informação e comunicação, bem como de outros serviços e instalações.
• Acessibilidade na web significa que pessoas com deficiência podem usar a web. Mais especificamente, a acessibilidade na web
significa que pessoas com deficiência podem perceber, entender, navegar, interagir e contribuir para a web. E mais. Ela
também beneficia outras pessoas, incluindo pessoas idosas com capacidades em mudança devido ao envelhecimento.
• O uso dos padrões criados pelo W3C no desenvolvimento torna os sites mais visíveis aos motores de busca, como Google,
Bing e Yahoo.
 HTML

• O HTML é considerado a linguagem base da internet. Ele é o acrônimo de Hypertext Markup Language e significa Linguagem
de Marcação de Hipertexto, em português.
• Com o surgimento da web, Tim Berners-Lee desenvolveu o HTML.
A linguagem HTML é usada para a publicação de conteúdo na web, como textos, imagens, vídeos, áudio etc.
A proposta do HTML é suprir a necessidade de criar uma linguagem compatível com os diferentes meios de acesso.
• 1990 HTLML ganhou força e desde então ele foi adotado por desenvolvedores e fabricantes de browsers.
• Marc Andreessen, desenvolveu o navegador Mosaic – browser, responsável pela popularização do HTML.
• Entre 1993 e 1995, o HTML evoluiu com as novas versões: HTML+, HTML 2.0, HTML 3.0. Essa evolução incluiu diversas
mudanças para enriquecer a linguagem com novos recursos e aplicabilidades no mundo web.
• O HTML só se tornou padrão em 1997, quando um grupo de profissionais do W3C trabalhou na versão 3.2.
• Está estruturado no conceito de HiperTexto. Desse modo, elementos são conectados por palavras, imagens, vídeos, áudios e
documentos.
• 2004, grupo de desenvolvedores das empresas Mozilla, Apple e Opera fundaram a WHATWG – WEB Hypertext Application
Technology Working Group. Com isso começou o desenvolvimento da nova versão HTML, o HTML5.
• Alterações encontradas no HTML5 :
• Novas APIs, para o desenvolvimento de gráficos bidimensionais, por exemplo
• Aprimoramento do uso off-line
• Melhoria na depuração de erros
• Controle embutido de conteúdo multimídia, entre outras propostas.
• Atualmente, os problemas e as dificuldades são diferentes do passado. Existe a necessidade da instalação de plugins para dar
acesso aos recursos de mídias ou à execução de algum script com efeito no site.
• O HTML foi reformulado e readequado para o HTML5 para facilitar, agilizar e disponibilizar o acesso a tais recursos, sem a
necessidade de pré-requisitos de plugins.
• Por exemplo, uma API no HTML5 oferecerá o funcionamento de sites que exigem a instalação de plugins no HTML4,
atualmente.
• Desse modo, a nova tecnologia HTML5 altera todo o cenário e o contexto de programação das linguagens web. O HTML5
ignora as famosas permissões necessárias para a visualização de uma imagem ou a exibição de um vídeo, por exemplo.

HTML tags:

• Utiliza Rótulos para informar ao navegador como a página deve ser apresentada, a maioria desses rótulos indicam: A abertura
e o fechamento da página.
• Rótulos em HTML são conhecidos como tags que iniciam-se com o sinal de menor < e maior >. EX:
<tagdeabertura></tagdefechamento>
• Tags Nulas: São tags que não necessitam de fechamento. EX: <menta>, <br>, <img>...
• Doctype: é um declaração com o tipo de documento de sua página web, é por meio dele que o navegador identifica e
processa corretamente o documento. Por existir vários tipos de HTML e declaração correta é de extrema importância, pois
assim o navegador não perde tempo tentando decifrar qual o tipo de código utilizado na página. Quando o navegador
identifica o tipo de HTML, pode utilizar o tipo de renderização adequada.

Metatags:
• São tags que fornecem dados aos navegadores e motores de busca sobre o documento Html, elas não aparecem na telas, pois
são informações específicas para os navegadores.
• Exemplo de Metatags.

• Comentário: Os comentários em HTML possuem abertura e fechamento como as tags. Ex: <! -- seu comentário vai aqui -- >
• Atributos: São informações que inserimos nas tags para que elas tenha o comportamento desejado. EX:
<tag atributo="Valor do Atributo"></tag>... Ex. de atributos: id, class, alt, name, contente.

• Publicação do documento: Para fazer a publicação do documento ou upload é necessário criar um site que será
disponibilizado por meio de um endereço URL. O nome dado ao armazenamento do arquivo é Hospedagem, e que que faz
essa hospedagem geralmente são empresas especializadas.

• <html> -> Informa ao navegador que o conteúdo dentro da tag é html. E envolve todo o conteúdo da página.
• <head> -> Informações que o navegador vai ler, como títulos, descrições, palavras-chaves...
• <meta charsert="utf-8"> -> Charset, informa ao navegador o tipo de codificação que deve ser usada; O modelo de codificação
UTF-8 pode representar qualquer caráter universal padrão Unicode.
• <meta> também é utilizado na formatação de caractere especiais;
• <title> É uma das tags mais importante, pois além de adicionar um título na aba do navegador, ela auxilia os motores de busca
a encontrarem o site no momento da pesquisa.
• <body> -> Mostra na tela todo o conteúdo da página, ou seja, é nessa tag que será inserido todo o conteúdo da página.
• Código HTML pode ser escrito em qualquer editor de texto;
Tags de Separadores:
• Quebra de linha – Utiliza-se a tag <br>, no local que a tag for inserida o texto pulará para a próxima linha. OBS: A tag <br> é
uma tag nula.
• Parágrafos – Utiliza-se a tag <p></p>, que tem como função separar blocos de textos ou seja parágrafos.
• Linha horizontal – Utiliza-se a tag <hr> para colocar uma linha horizontal no código. OBS: É uma tag nula, e quebra o texto.

Tags de formatação:
• Cabeçalhos – Usa-se as tags <h1></h1>,<h2></h2>...<h6></h6>; Essas tags representam os títulos;

• Negrito – Tags:
<b>Segundo as orientações do W3C, usada para destacar uma palavra.
<strong>, destaca a palavra também , mas deve ser usada
para representar algo importante, sério ou urgente.

• Itálico – Tags:
<i> – Segundo as orientações do W3C, a tag <i> deve ser usada em
termos técnicos. Por exemplo: O nome da flor é Orquídea.
<em> – Já a tag <em> deve ser usada para dar ênfase a uma
palavra. Por exemplo: Ela não passou por aqui ontem.

• Sublinhar, subscrever e sobrescrever – Tags:

<u> – A tag <u> adiciona sublinhado ao texto.
<sub> – O texto dentro da tag <sub> se torna subscrito (letras pequenas abaixo de um texto). Ex: H 20.
<sup> – Coloca o texto como sobrescrito (letras pequenas acima de um texto). Ex: X 4.
Aplicação de Cores – Background e Foreground. OBS : Nas aplicações de cores utilizamos atributos e não tags.
• bgcolor – tem como função adicionar cor de fundo(background).
<body bgcolor="Cor"></body>.
Cores podem ser inseridas por seus nomes em inglês ou código hexadecimal;
• font – tem como função tratar dos elementos que estão no primeiro plano da página. A fonte (qualquer caracter de texto –
letra, número, símbolos) é um elemento que faz parte do foregroung de uma página.
<font color="cor">texto</font>

Tamanho e estilo de texto:

• size – é o atributo utilizado para definir o tamanho da fonte, por padrão utiliza-se a unidade de medida px, mas pode-se
utilizar outras unidades de medidas também.
<font size="20px">texto</font>
• face – é o atributo utilizado para alterar o estilo da fonte
<font face="Verdana">texto</font>

OBS: Com a chegada do HTML5 e do CSS3, o W3C orienta que qualquer aplicação de estilos seja feita por meio das folhas de
estilo ou CSS.
Listas:
• Não ordenadas -> adiciona-se a tag <ul></ul> e para os itens dentro da tag, utiliza-se a tag <li></li>
• Listas ordenadas -> É utilizada para representar uma sequência ou numeração – Utiliza-se as tags <ol> <li> </li> </ol>
• Lista de definição -> É aplicada quando necessita criar níveis e subníveis em uma mesma lista. É constituída por um termo e
uma descrição, utiliza-se três elementos do HTML:
• <dl> - Cria a lista
• <dt> - Define o termo
• <dd> - adiciona a definição
Inserção de links:
• Conhecido também como hiperlink, o link é o segredo por trás da internet, já que sua função é estabelecer a ligação com
outros sites, páginas, imagens, sons e outros elementos.
• Os links podem direcionar o usuário para outra parte de uma mesma página, para outra página no próprio site ou para um
arquivo.
• Para criar um link necessita-se de:
• O local de destino de seu link (target).
• O local de origem, em que devemos clicar.
• <a (action)> (Faz o papel de direcionar a navegação entre as páginas).
• <href> é obrigatório, pois guarda o endereço para o qual o usuário será direcionado.
• <a href="Endereço de destino">Texto para o seu link</a>
• Pode-se utilizar o atributo target com o valor _blank.
• O target é um atributo muito funcional quando se trabalha com links, ele possui quatro opções de valores, dentre eles
o _blank
• O valor _blank carrega o novo endereço de destino em uma nova janela ou em uma nova aba.
• <a href="Endereço de destino" target="_blank">Texto para o seu link</a>

Inserção de imagens:
• As imagens em html são muito importantes por questões de estética e compreensão do conteúdo.
• Utiliza-se a tag <img> -> para adicionar imagens, ela possui atributos para auxiliar na definição, tamanho, posição e descrição
da imagen.
• <img src="Local onde está a imagem">
• Atributos da tag <img>:
• alt="Breve descrição para imagem"
• width( largura ) – Define a largura da imagem.
Tabelas:
• As tabelas são bastante utilizadas para a criação de dados e relatórios.
• Para criar uma tabela, utiliza-se de três tags: <table> (tabela), <tr> (linha) e <td> (coluna).
• Não é possível criar uma tabela sem a tag <table>, table significa tabela.
• Outra tag é a, <th> - que adiciona um título para a coluna da tabela
• Atributo -> border – cria bordas para a tabela.
Formulários – Forms.
• Os formulários são responsáveis por enviar informações ao servidor, através deles os dados são coletados e enviados ao
servidor posteriormente.
• Composição do formulário:
• text área – campo de texto.
• Radio bottons – botões radiais.
• Checkboxex – caixas de seleção.
• Outros widgets – componentes.
• Para criar um botão , utiliza-se a tag <button>, essa tag apresenta mais de um comportamento, e seu comportamento
depende do seu type:
• type submit – Envia os dados do formulário à página destino do atributo action.
• type reset – Redefine todos os campos para padrão quando acionado.
• type button – Não realiza nenhuma ação, a não ser que seja acionada via codificação JavaScript.

• CheckBox – É um atributo que permite o usuário selecionar mais de uma opção sem cancelar as opções selecionadas
anteriormente.

• checkbox – É uma tag codificada para uma seleção múltipla e independente de opções, ou seja, uma opção selecionada
não cancela a outra.
• name e value – São atributos responsáveis por informar actions aos dados que devem ser enviados ao servidor.
• checked – Caso esse atributo esteja aplicado o elemento já aparece selecionado.
• br – Quebra de linha para separar cada tag input.

• Type Radio – É semelhante ao CheckBox, porém somente uma das opções pode ser selecionada.

• Para o type radio os valores do atributo "name" devem ser idênticos, por ser seleção única.
Select
• A tag <select> é formada por um conjunto de opções <option>. Tais opções fornecem ao usuário uma lista organizada no
formato drop-down.
• A tag <select> é uma tag não nula, ou seja, ela deve conter abertura e fechamento
• A tag <option> é seguida do atributo value="valor a ser enviado ao servidor".

Type Hidden – Oculto

• O type hidden torna o campo input invisível para o usuário, permitindo, dessa forma, a passagem de dados para o servidor
sem a necessidade de interação com o usuário.
CSS
Enquanto o HTML define a estrutura das páginas web, o CSS é responsável por sua aparência. Nesse sentido, o CSS foi criado para
suprir a necessidade de dar mais autonomia à formatação de conteúdos. Além disso o CSS facilita o reuso de regras. Atualmente
é possível inserir animação, efeitos 3Ds e estilizar completamente a sua página web.
• CSS, significa Cascading Style Sheets (Folha de estilo em cascata).
• Seu objetivo principal é formatar as informações entregues pelo HTML, pode ser aplicado no conteúdo HTML de diferentes
maneiras.
• A ligação do CSS com a página de conteúdos pode ser feita de formas distintas – a partir de atributos, seletores, classes e
propriedades para aplicar as regras contidas no CSS.
• A extensão dos arquivos CSS é .css
• Aplicações CSS.
• CSS Inline: É adicionado ao elemento HTML por meio do atributo style, essa aplicação é feita no código HTML.
• CSS Incorporado: É declarado no ínicio do código HTML , e deve ser adicionado dentro da tag head, e deve ser
incorporado na tag <style> CSS </style>;

• As regras CSS são declaradas em um documento a parte do documento HTML, ou seja, é necessário criar um arquivo .css
separado do arquivo .html; A ligação entre os dois deve ser feita por meio de um link, segundo as boas práticas, o link deve
ser incluído no cabeçalho da página, dentro da tag head. Quando criamos uma folha de estilo separada do documento .html,
ela pode ser ligada a várias páginas html ao mesmo tempo, dessa forma a manutenção de páginas, é feita de maneira mais
rápida. O CSS Linkado é o mais utilizado e mais recomendado.
CSS Linkado ou Externo:
• O CSS linkado, também conhecido como Externo, é aquele cujas regras CSS são declaradas em um documento a parte do
documento HTML, ou seja, é necessário criar um arquivo com a extensão .css separado do arquivo .html.
• A ligação entre a página HTML e a folha de estilos (CSS) deve ser feita por meio de um link. Segundo as boas práticas para o
desenvolvimento web, o link deve ser incluído no cabeçalho da página, dentro da tag <head>.
• O CSS Linkado é ideal quando há a necessidade de se aplicar em várias páginas.

• A tag link informa ao navegador que há uma folha de estilos rel="stylesheet" do tipo text/css no endereço apontado pelo
atributo href.
• Para adicionar comentários no CSS, basta inserirmos o conteúdo do comentário entre as barras (/**/).
• Atributos: São informações de um elemento que permitem a formatação total de sua aparência, posição, dimensão e outros
aspectos. São exemplos de atributos: a borda, o background, a largura e altura.
• Classes: São um conjunto de atributos predefinidos com o objetivo de formatar um elemento. Esse conjunto de informações
facilita a configuração dos elementos HTML. Podemos aplicar as classes em vários elementos distintos. Lembre-se as classes
são um tipo de seletor.
• Enquanto o ID permite a identificação de um elemento por vez, as classes permitem identificar mais de um elemento ao
mesmo tempo e aplicar a formatação de forma exemplar.
• Classe No CSS:

• Classe No HTML:
• O ID é único nos elementos, ou seja, um ID não pode ter o mesmo nome de outro ID. Não existe um número de ID igual a
outro.
• ID no CSS:

• ID no HTML:
Formatação de listas com propriedades CSS
• Para modificar a aparência das listas, o CSS oferece uma propriedade exclusiva de formatação a list-style. Tal propriedade é
dividida em três características:
• list-style-type: é responsável por configurar o tipo de marcador que a lista irá utilizar.
• Circle – ul {list-style-type: circle;}
• Square – ul {list-style-type: square;}
• upper-roman – ul {list-style-type: upper-roman;}
• lower alpha – ul {list-style-type: lower-alpha;}
• list-style-positon: Defini a posição do marcador da lista.
• Inside – ul {list-style-position: inside;}
• Outside – ul {list-style-position: outside;}
• list-style-image: Define se os marcadores da lista serão imagens.
• ul {list-style-image: url("Sua imagem");}
Tableless e HTML 5
Linguagem HTML:
 Tableless:
Um site que utiliza os padrões desenvolvidos pelo W3C é considerado um site tableless. Com isso, um site tableless não utiliza
tabelas na composição do seu layout.
No lugar das tabelas um site tableless utiliza as três camadas(Informação; Formatação; Comportamento).
As divs <div> são essenciais na composição de sites tableless. Elas são um elemento que auxilia a composição de sites Tableless.
Div:
Sua função é dividir trechos de códigos HTML. Dessa forma, podemos incluir outros elementos dentro da tag div e formatar o
bloco de elementos individualmente. Por exemplo: imagens, links, textos, lista.
A div, basicamente serve com um container para os outros elementos. Tais containers possibilitam a criação de camadas para
organizar a página web.
Diferença HTML 5 para HTML 4:
• Padrão para demonstração e apresentação de conteúdo na WEB.
• Mudanças:
• melhor tratamento de exceção
• mais tags para substitutie scripts.
• independência de plataforma.
• redução da necessidade de plugins externos.
• Objetivo: Otimizar os antigos códigos de marcação, facilitando a manutenção dos elementos.
• Com o HTML 5, o desenvolvedor pode alterar as características dos objetos sem intrusão, tornando o processo transparente
para o usuário final.
• Melhor interatividade com CSS e Javascript, resultando em um website ou uma aplicação web muito mais leve e funcional.
• O conceito de estrutura com padronização, também foi adotado com o HTML 5,Ex:
• A criação de seções comuns e específicas, como rodapé, cabeçalho, slide bar, menu.......
• Esses elementos citados acimas não existiam nas versões anteriores ao HTML
• Códigos interpoláveis
Elaboração de página web
PDF -
Menu
Margin e Padding.
A "position: fixed;" ficará fixa na tela de
acordo com as coordenas que definimos,
como: top, right, bottom e left...
PDF -
Section
PDF de pop-ups
Formatando os pop-ups:

PDF – Formação
OBS:
de pop-ups
z – index: Faz o conteúdo da página Web se sobrepor aos demais , ou
seja, quanto maior o valor atribuído ao mesmo, mais para frente o
elemento ficará.