Desenvolvimento Web

HTML, CSS, Tableless e JavaScript Prof. Thiago Guimarães Tavares. thiagogmta@gmail.com thiagogmta@ifto.edu.br

....4 Elementos Vazios .................................................................. IFTO.......................................................................................................... copiado e compartilhado desde que devidamente referenciado........................................................................................................................................................9 Formulários ..................................................................................................................................................................................................................................................................... livre de direitos autorais.............................................................................................................................10 .......................................................................................................5 Atributos ................................................................3 Criando um arquivo HTML ........................Sobre o Conteúdo Este documento foi baseado na tradução.......................................................................... Sumário 1...........................................5 Títulos ....5 Parágrafos ......w3schools...................................................................................3 HTML..........................................................................6 Quebra de Linha .......................................................................................................................... INTRODUÇÃO AO HTML ................................6 Linhas ................................................3 O que são Tags? ..............................................................................7 Hyperlinks (Links) ...................................................................................................................................................................................................................................... do site W3Schoos (http://www........................................................................3 Do que você Precisa? ..........................................3 O que é HTML?’ ................................................................................................................................6 Formatação de Texto ..............................7 Imagens ............................... Copyleft © 2011 – Thiago Guimarães Tavares.................................................................................................................com/)...................................... XHTML ou HTML 5? ......................................... O conteúdo da apostila poderá ser impresso.....................................4 Elementos HTML ...........................................................................................5 Comentários no HTML ..................................................................................................................................................................3 Como saber qual versão utilizar? ...................................................................................................... em experiências próprias acumulada no decorrer do tempo e em pesquisas diversas...........8 Tabelas ....................................7 Listas ...................................................................................................6 Formatação de Fonte ........

O que são Tags? • • • As tags são comandos de formatação da linguagem HTML.whatwg.01 do HTML foi documentada a fim de manter um padrão desenvolvido pela W3C. As tags HTML normalmente vêm em pares uma tag de abertura e uma tag de fechamento. HTML significa (Hyper Text Markup Language) Linguagem de marcação de Hipertexto. Exemplo: <html>. HTML utiliza tags de marcação para estruturar as paginas de Internet. . O HTML5 é o que pode ser chamado da nova versão do HTML4. Oracle e Opera com o intuito de trazer mais flexibilidade para a produção de websites. HTML não é uma linguagem de programação.//www. HTML 3. Apple. HTML 2. O trabalho do WHATWG passou a ser reconhecido pelo mundo e posteriormente recebeu apoio do W3C que hoje trabalham em conjunto para a manutenção da linguagem. fosse padronizada. através de qualquer editor de texto podem ser criadas as páginas html.org) um grupo fundado por desenvolvedores de empresas como Mozilla. Para aprendizagem será utilizado o HTML em sua forma simples para ambientação da linguagem e da forma de utilizá-la e posteriormente os padrões e boas práticas serão gradativamente abordados. é uma linguagem de marcação. ou seja. O XHTML foi uma das versões do HTML que implica num maior rigor na utilização da linguagem e no seu desenvolvimento a fim de padronizar a forma de utilização da linguagem. Exemplo: o <html> … </html> As tags de abertura e fechamento servem para delimitar uma porção do documento que irá ser formatada. Como saber qual versão utilizar? A seleção de qual das versões será utilizada é feita através da utilização do DOCTYPE apropriado (será comentado mais a frente) e obviamente segundo os padrões que a versão recomenda para validação. HTML.1. Em 1997. As tags HTML vêm entre os sinais de “<” e “>”. A versão 4. INTRODUÇÃO AO HTML O que é HTML?’ • • • • O HTML é uma linguagem para desenvolver páginas de internet. XHTML ou HTML 5? O HTML no seu processo de evolução passou por várias versões (HTML+.0.0) e diversas mudanças foram propostas para o enriquecimento da linguagem. trabalhou para que a linguagem fosse tratada como prática comum. o W3C responsável por manter o padrão do código. • Do que você Precisa? • Para desenvolver páginas HTML não é necessário um software especial. O HTML5 foi idealizado pelo WHATWG (http.

<head> . ou seja.É o corpo do documento HTML. Elemento <body> o É o corpo do documento HTML. <title> . Dessa forma o navegador irá entender que aquele arquivo é um arquivo de página de Internet. Exemplo de um “Olá mundo!” em HTML: <html> <head> <title>Meu Primeiro HTML!</title> </head> <body> <h1> Olá Mundo! </h1> </body> </html> • • • • • <html> . Exemplo: <head> <title> Parágrafo! </title> </head> <body> <p> esse é meu primeiro parágrafo</p> </body> </html> <html> O exemplo apresentado possui 3 elementos: • • • Elemento <html> o Elemento que define todo o documento HTML. <body> .html. conhecidas como tag de abertura e tag de fechamento.Criando um arquivo HTML • Para criar um arquivo HTML basta redigir seu código salva-lo com a extensão “.Define o cabeçalho de um documento HTML que traz informações sobre o documento. Elementos HTML • • • • • • É toda informação contida desde a marca de início ao fim da tag. Um elemento HTML pode possuir outros elementos. elementos aninhados. A maioria dos elementos HTML possuem tags de abertura e fechamento. A maioria dos Elementos HTML possuem atributos. responsável por reter todo o conteúdo do web site que será exibido.Define o título da página. Alguns elementos possuem conteúdo vazio para esses casos devem ser fechados na tag de início. . Exemplo: Aula01.html”. Elemento <p> o Define parágrafos num documento HTML.Define o início de um documento HTML e indica ao navegador que todo conteúdo posterior deve ser tratado como uma série de códigos HTML.

Não se deve utilizar essas tags para criar textos em negrito. para o desenvolvedor e não para o usuário final. Os motores de busca utilizam a hierarquia dos títulos para indexar a estrutura do web site. Esse elemento não tem uma tag de fechamento. • Títulos Títulos são constituídos pelas tags “<h1>” à “<h6>” de modo que h1 representa os títulos de maior relevância e gradativamente até h6 os de menor relevância. Dessa forma o comentário só é visível no código. Em xtml ou html5 todos os elementos precisam ser fechados (inclusive os elementos vazios). Elementos Vazios • • • Elementos HTML sem conteúdo são chamados de “Elementos Vazios”. É importante respeitar a hierarquia das tags de título de forma a caracterizar a importância da informação.. as tags podem ser digitadas tanto em minúscula quanto em maiúscula (exceto em xhtml). porém a w3c (w3c. dessa forma é importante utilizar os títulos adequadamente. Para inserir um comentário utiliza-se as tags: o “<!--” e “-->” (sem aspas). o São respectivamente as tags de abertura e fechamento do comentário. Atributos são caracterizados por seu nome e valor: name=”valor”. ou seja. <br> é um elemento vazio que caracteriza em uma quebra de linha.org) recomenda a utilização das tags em minúsculo. Logo a baixo a lista de alguns atributos que são comuns para a maioria dos elementos: Valor nome_da_classe id definição_de_estilo texto Descrição Especifica uma classe para o elemento Especifica uma identificação ao elemento Especifica um estilo ao elemento Especifica informações extras ao elemento Atributo class id style title Comentários no HTML • Comentários HTML são úteis para melhor organização do código. Exemplo: <h1> Título 1 </h1> <h2> Título 1 </h2> <h3> Título 1 </h3> .. Novamente a w3c recomenda a utilização de minúsculas para nomes e valores de atributos. Todo conteúdo que estiver entre as tags de comentário será ignorado pelo navegador. Atributos • • • • Atributos adicionam informações adicionais aos elementos HTML. .Os elementos HTML não são case sensitive. As tags de títulos devem ser utilizadas apenas para constituir os títulos.

O “hr” é um elemento vazio. portanto o elemento deve ser fechado na própria tag de abertura. O comando de quebra de linha é um elemento vazio. <br /> Eu gosto é do gasto. <h1>O velho e o moço</h1> <h2>Los hermanos</h2> <hr /> <p> Deixo tudo assim<br /> não me importo em ver a díade em mim. pois os navegadores e mecanismos de buscas irão indexar os textos com essas tags otimizando a navegação pelo site e melhorando as consultas nos mecanismos de busca.Parágrafos Para delimitar um bloco de texto (parágrafo) no HTML utiliza-se a tag “<p>”. ou seja. <br /> ouço o que convém. </p> <hr /> Formatação de Texto O HTML fornece algumas tags específicas para formatação e caracterização de textos. Para quebra de linha é utilizada a tag “<br>”. sem conteúdo. ou seja. Exemplo: <p> Primeiro Parágrafo </p> <p> Segundo Parágrafo </p> Quebra de Linha Utiliza-se quando existe a necessidade de quebrar uma linha (iniciar outra linha) sem criar um novo parágrafo. É importante a utilização dessas tags. sem conteúdo. Logo a baixo uma tabela com as tags e suas funções: • Formatação de texto <b> Define texto em negrito <big> Define texto em destaque (maior) <em> Define texto enfatizado <i> Define texto em itálico <small> Define texto em tamanho menor <strong> Define texto mais forte (negrito) <sub> Define texto subscrito <sup> Define texto sobrescrito <ins> Define texto inserido <del> Define texto excluído <u> Define texto sublinhado . Não esquecendo sempre da tag de abertura e fechamento do parágrafo. De acordo com as boas práticas de desenvolvimento um elemento sem conteúdo deve ser fechado no final da tag de abertura da seguinte maneira: <p> Primeiro Parágrafo <br /> Segunda linha do primeiro parágrafo <br /> Terceira linha do primeiro parágrafo </p> <p> Segundo Parágrafo </p> Linhas O “hr” é um elemento capaz de criar uma linha horizontal na página É normalmente utilizado para separar informações.

O atributo target=”_blank” (opcional) faz com que o link clicado abra em outra página. Primeiro deve-se criar o ponto no texto onde o link será apontado da seguinte maneira: <a name=”âncora1”>Sessão 1 da pagina</a> E posteriormente criar o link onde o usuário poderá cliar e ser encaminhado para o ponto ancorado. A tag a ser utilizada é <a> e pode ser utilizada de duas maneiras: • Para criar um link para outro documento. A tag fonte foi removida no HTML 5. • Para criar um marcador (âncora) dentro do mesmo documento. Para as formatações de fonte e qualquer outra formatação de estilo em uma página HTML deverá ser utilizado as folhas de estilo (CSS. <a href=”url” target=”_blank”>Texto</a> O href pode apontar para um link externo ou para outra página do website. usando o atributo “nome”. Hyperlinks (Links) Os Hyperlinks (ou apenas links) são a forma de navegar entre as paginas HTML. A W3C removeu a tag fonte e suas recomendações. <a href=”#âncora1”>Ir para Sessão 1</a> Imagens Em HTML a tag responsável por definir imagens é a “img” que por sinal também é um elemento vazio. usando o atributo “href”. Os atributos da tag <img> são: Src Caminho da imagem Alt Nome para imagem Height Altura . que será tratado mais a frente).• Saídas do computador <code> Define texto do código de computador <kdb> Define texto do teclado <var> Define variável <pre> Define texto pré-formatado • Citações e Etiquetas <abbr> Define abreviação <acronym> Define acrônimo <address> Define informações de contato <bdo> Define a direção do texto (Atributos: dir=”ltr” e dir=”rtl” <blockquote> Define longa citação <q> Define citação curta <cite> Define citação <dfn> Define termo de definição Formatação de Fonte A formatação de fonte em HTML pode ser feita através da tag <font> porém essa prática não é recomendada. Através dos links pode-se conectar várias páginas ou mesmo arquivos e documentos.

Item 1 2. O comando alt exibe uma descrição para a imagem e é altamente recomendável (importante para navegadores específicos para deficientes visuais e faz parte das boas práticas de desenvolvimento). </li> para cada item da lista. Listas ordenadas. Listas Através do HTML pode-se criar três tipos de listas para itens.Width Largura Exemplo: <img src=”foto1. Item 2 3. Listas Ordenadas Para as listas ordenadas deve-se utilizar o elemento <ul> .jpg” alt=”Foto Aérea IFTO” height=”200” width=”200”> O atributo src aponta para o caminha da imagem que pode estar armazenada no computador ou pode ser uma url para um link externo. </ul> (unordered list) dentro desse elemento utilizar a tag <li> . listas não ordenadas e Listas de definição... Os parâmetros height e width são facultativos.. Item 3 .. Exemplo: • <ul> <li> Item 1 </li> <li> Item 2 </li> <li> Item 2 </li> </ul> Resultado: • Item 1 • Item 2 • Item 3 Listas não ordenadas Para as listas ordenadas o procedimento é semelhante apenas substituindo o elemento <ul> por <ol> (ordered list) ficando da seguinte maneira: • <ol> <li> Item 1 </li> <li> Item 2 </li> <li> Item 2 </li> </ol> Resultado: 1.

A tabela é dividida em linhas através da tag <tr> e cada linha possui suas células caracterizada pela tag <td>.Definição 1 do Item 2 Item 2 .. Para iniciar a lista deve-se utilizar o elemento <dl> .Definição 1 do Item 3 . Os elementos <dt> e <dd> servem respectivamente para criar o item na lista e sua definição. Exemplo: <table border=”1”> <tr> <td>Linha <td>Linha </tr> <tr> <td>Linha <td>Linha </tr> </table> 1.. Célula 2</td> Resultado: Linha 1.. Célula 1</td> 1.Definição 1 do Item 1 Item 2 . Célula 2 Linha 2. Célula 1</td> 2. Border Especifica a espessura das bordas ao redor da tabela Cellpadding Especifica o espaço entre as paredes das células e seu conteúdo Cellspacing Especifica o espaço entre as células Width Especifica a largura da tabela . Célula 1 Linha 1.Listas de definição São listas de ítens seguidos por sua definição.Definição 2 do Item 3 Tabelas Em HTML uma tabela pode ser criada através do elemento <table> . Célula 2 Principais atributos do elemento <table>. Célula 2</td> 2. </table>.. Exemplo: • <dl> <dt> Item 1 <dd><dt> Item 2 <dd><dt> Item 2 <dd><dd></dl> </dt> Definição </dt> Definição </dt> Definição Definição 1 do Item 1</dd> 1 do Item 2</dd> 1 do Item 3</dd> 2 do Item 3</dd> Resultado: Item 1 . </dl> (definition list). Célula 1 Linha 2.

botões de rádio.Formulários Os formulários são utilizados para fazer interação com o usuário e passar dados ao servidor. size Especifica a largura do elemento value Especifica um valor pré-estabelecido para o elemento Type Especifica o tipo de entrada podendo ser: • button (cria um botão) • checkbox (cria caixas de seleção) • file (formulário para enviar arquivo) • hidden (cria um elemento “invisível”) • password (entrada de senha) • radio (cria uma seleção de apenas uma opção) • reset (botão para redefinir o formulário) • submit (botão para enviar as informações do formulário) • text (caixa de texto) . como campos de texto. Para dar interatividade o elemento form precisa de elementos de entrada <input>. Exemplo de um formulário simples: <form> Primeiro nome: <input type="text" name="primeiroNome" /><br /> Segundo nome: <input type="text" name="segundoNome" /><br /> <input type="button" value="Enviar"/> </form> Resultado: Principais atributos do elemento <form>: action Aponta para um arquivo que irá processar os dados do formulário Method Seleciona o método de envio dos dados do formulário sendo “Post” ou “Get” name Especifica um nome para o formulário Principais atributos do elemento <input> disabled Desabilita o elemento de forma que ele não possa ser acessado maxleght Especifica o máximo de caracteres que um elemento de texto pode conter. name Especifica o nome do elemento. legend. botões de envio e muito mais. Um formulário pode conter elementos de entrada. textarea. e elementos do rótulo. </form>... fieldset. checkboxes. Para iniciar um formulário deve-se utilizar o elemento <form> . Um formulário também pode conter listas de seleção.

Exemplo de formulário 2: <h2> Formulário <h2> <form> <hr /> <h3>Entrada de Texto</h3> Primeiro nome: <input type="text" name="primeiroNome" /><br /> Segundo nome: <input type="text" name="segundoNome" /><br /> <hr /> <h3>Entrada de Senha</h3> Senha: <input type=password name=senha /> <hr /> <h3>Marcadores Radio</h3> <input type=”radio” name=”sexo” value=”Masculino” />Masculino<br /> <input type=”radio” name=”sexo” value=”Feminino” />Feminino <p>Nas entradas de radio pode-se marcar apenas uma opção</p> <hr /> <h3>Marcadores Checkbox</h3> <input type=”checkbox” name=”veiculo” value=”carro” />Carro<br /> <input type=”checkbox” name=”veiculo” value=”moto” />Moto<br /> <input type=”checkbox” name=”veiculo” value=”bicicleta” />Bike <p>Nas entradas de checkbox pode-se marcar várias opção</p> <hr /> <input type="button" value="Enviar"/> <input type="reset" value="Limpar"/> </form> Resultado: .