Scribd Logo
Importer

Bienvenue sur Scribd !

  • Introdução Ao HTML

    Transféré par

    DomClau
    14 vues11 pages

    Titre original

    Introdução ao HTML

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    14 vues11 pages

    Introdução Ao HTML

    Transféré par

    DomClau

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 11

    Desenvolvimento Web

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

    Sobre o Contedo Este documento foi baseado na traduo, livre de direitos autorais, do site W3Schoos (http://www.w3schools.com/), em experincias prprias acumulada no decorrer do tempo e em pesquisas diversas. O contedo da apostila poder ser impresso, copiado e compartilhado desde que devidamente referenciado. Copyleft 2011 Thiago Guimares Tavares. IFTO. Sumrio 1. INTRODUO AO HTML ...............................................................................................................3 O que HTML? ................................................................................................................................3 O que so Tags? ...............................................................................................................................3 Do que voc Precisa? .......................................................................................................................3 HTML, XHTML ou HTML 5? ..............................................................................................................3 Como saber qual verso utilizar? .....................................................................................................3 Criando um arquivo HTML ...............................................................................................................4 Elementos HTML ..............................................................................................................................4 Elementos Vazios .........................................................................................................................5 Atributos ......................................................................................................................................5 Comentrios no HTML .................................................................................................................5 Ttulos ...........................................................................................................................................5 Pargrafos ....................................................................................................................................6 Quebra de Linha ...........................................................................................................................6 Linhas ...........................................................................................................................................6 Formatao de Texto ...................................................................................................................6 Formatao de Fonte ...................................................................................................................7 Hyperlinks (Links) .........................................................................................................................7 Imagens ........................................................................................................................................7 Listas .............................................................................................................................................8 Tabelas .........................................................................................................................................9 Formulrios ................................................................................................................................10

    1. INTRODUO AO HTML
    O que HTML? O HTML uma linguagem para desenvolver pginas de internet. HTML significa (Hyper Text Markup Language) Linguagem de marcao de Hipertexto. HTML no uma linguagem de programao, uma linguagem de marcao. HTML utiliza tags de marcao para estruturar as paginas de Internet.

    O que so Tags? As tags so comandos de formatao da linguagem HTML. As tags HTML vm entre os sinais de < e >. Exemplo: <html>. As tags HTML normalmente vm em pares uma tag de abertura e uma tag de fechamento. Exemplo: o <html> </html> As tags de abertura e fechamento servem para delimitar uma poro do documento que ir ser formatada.

    Do que voc Precisa? Para desenvolver pginas HTML no necessrio um software especial, atravs de qualquer editor de texto podem ser criadas as pginas html.

    HTML, XHTML ou HTML 5? O HTML no seu processo de evoluo passou por vrias verses (HTML+, HTML 2.0, HTML 3.0) e diversas mudanas foram propostas para o enriquecimento da linguagem. Em 1997, o W3C responsvel por manter o padro do cdigo, trabalhou para que a linguagem fosse tratada como prtica comum, ou seja, fosse padronizada. A verso 4.01 do HTML foi documentada a fim de manter um padro desenvolvido pela W3C. O XHTML foi uma das verses do HTML que implica num maior rigor na utilizao da linguagem e no seu desenvolvimento a fim de padronizar a forma de utilizao da linguagem. O HTML5 o que pode ser chamado da nova verso do HTML4. O HTML5 foi idealizado pelo WHATWG (http;//www.whatwg.org) um grupo fundado por desenvolvedores de empresas como Mozilla, Apple, Oracle e Opera com o intuito de trazer mais flexibilidade para a produo de websites. O trabalho do WHATWG passou a ser reconhecido pelo mundo e posteriormente recebeu apoio do W3C que hoje trabalham em conjunto para a manuteno da linguagem.

    Como saber qual verso utilizar? A seleo de qual das verses ser utilizada feita atravs da utilizao do DOCTYPE apropriado (ser comentado mais a frente) e obviamente segundo os padres que a verso recomenda para validao. Para aprendizagem ser utilizado o HTML em sua forma simples para ambientao da linguagem e da forma de utiliz-la e posteriormente os padres e boas prticas sero gradativamente abordados.

    Criando um arquivo HTML Para criar um arquivo HTML basta redigir seu cdigo salva-lo com a extenso .html. Exemplo: Aula01.html. Dessa forma o navegador ir entender que aquele arquivo um arquivo de pgina 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> - Define o incio de um documento HTML e indica ao navegador que todo contedo posterior deve ser tratado como uma srie de cdigos HTML. <head> - Define o cabealho de um documento HTML que traz informaes sobre o documento. <title> - Define o ttulo da pgina. <body> - o corpo do documento HTML, responsvel por reter todo o contedo do web site que ser exibido.

    Elementos HTML toda informao contida desde a marca de incio ao fim da tag, conhecidas como tag de abertura e tag de fechamento. A maioria dos elementos HTML possuem tags de abertura e fechamento. Alguns elementos possuem contedo vazio para esses casos devem ser fechados na tag de incio. A maioria dos Elementos HTML possuem atributos. Um elemento HTML pode possuir outros elementos, ou seja, elementos aninhados. Exemplo:
    <head> <title> Pargrafo! </title> </head> <body> <p> esse meu primeiro pargrafo</p> </body> </html>

    <html>

    O exemplo apresentado possui 3 elementos: Elemento <html> o Elemento que define todo o documento HTML. Elemento <body> o o corpo do documento HTML. Elemento <p> o Define pargrafos num documento HTML.

    Os elementos HTML no so case sensitive, ou seja, as tags podem ser digitadas tanto em minscula quanto em maiscula (exceto em xhtml), porm a w3c (w3c.org) recomenda a utilizao das tags em minsculo. Elementos Vazios Elementos HTML sem contedo so chamados de Elementos Vazios. <br> um elemento vazio que caracteriza em uma quebra de linha. Esse elemento no tem uma tag de fechamento. Em xtml ou html5 todos os elementos precisam ser fechados (inclusive os elementos vazios).

    Atributos Atributos adicionam informaes adicionais aos elementos HTML. Atributos so caracterizados por seu nome e valor: name=valor. Novamente a w3c recomenda a utilizao de minsculas para nomes e valores de atributos. Logo a baixo a lista de alguns atributos que so comuns para a maioria dos elementos: Valor nome_da_classe id definio_de_estilo texto Descrio Especifica uma classe para o elemento Especifica uma identificao ao elemento Especifica um estilo ao elemento Especifica informaes extras ao elemento

    Atributo class id style title

    Comentrios no HTML Comentrios HTML so teis para melhor organizao do cdigo. Para inserir um comentrio utiliza-se as tags: o <!-- e --> (sem aspas). o So respectivamente as tags de abertura e fechamento do comentrio. Todo contedo que estiver entre as tags de comentrio ser ignorado pelo navegador. Dessa forma o comentrio s visvel no cdigo, para o desenvolvedor e no para o usurio final.

    Ttulos Ttulos so constitudos pelas tags <h1> <h6> de modo que h1 representa os ttulos de maior relevncia e gradativamente at h6 os de menor relevncia. Exemplo:
    <h1> Ttulo 1 </h1> <h2> Ttulo 1 </h2> <h3> Ttulo 1 </h3> ...

    As tags de ttulos devem ser utilizadas apenas para constituir os ttulos. No se deve utilizar essas tags para criar textos em negrito. Os motores de busca utilizam a hierarquia dos ttulos para indexar a estrutura do web site, dessa forma importante utilizar os ttulos adequadamente. importante respeitar a hierarquia das tags de ttulo de forma a caracterizar a importncia da informao.

    Pargrafos Para delimitar um bloco de texto (pargrafo) no HTML utiliza-se a tag <p>. No esquecendo sempre da tag de abertura e fechamento do pargrafo. Exemplo:
    <p> Primeiro Pargrafo </p> <p> Segundo Pargrafo </p>

    Quebra de Linha Utiliza-se quando existe a necessidade de quebrar uma linha (iniciar outra linha) sem criar um novo pargrafo. Para quebra de linha utilizada a tag <br>. O comando de quebra de linha um elemento vazio, ou seja, sem contedo. De acordo com as boas prticas de desenvolvimento um elemento sem contedo deve ser fechado no final da tag de abertura da seguinte maneira:
    <p> Primeiro Pargrafo <br /> Segunda linha do primeiro pargrafo <br /> Terceira linha do primeiro pargrafo </p> <p> Segundo Pargrafo </p>

    Linhas O hr um elemento capaz de criar uma linha horizontal na pgina normalmente utilizado para separar informaes. O hr um elemento vazio, ou seja, sem contedo, portanto o elemento deve ser fechado na prpria tag de abertura.
    <h1>O velho e o moo</h1> <h2>Los hermanos</h2> <hr /> <p> Deixo tudo assim<br /> no me importo em ver a dade em mim, <br /> ouo o que convm. <br /> Eu gosto do gasto. </p> <hr />

    Formatao de Texto O HTML fornece algumas tags especficas para formatao e caracterizao de textos. importante a utilizao dessas tags, pois os navegadores e mecanismos de buscas iro indexar os textos com essas tags otimizando a navegao pelo site e melhorando as consultas nos mecanismos de busca. Logo a baixo uma tabela com as tags e suas funes: Formatao de texto <b> Define texto em negrito <big> Define texto em destaque (maior) <em> Define texto enfatizado <i> Define texto em itlico <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 excludo <u> Define texto sublinhado

    Sadas do computador <code> Define texto do cdigo de computador <kdb> Define texto do teclado <var> Define varivel <pre> Define texto pr-formatado Citaes e Etiquetas <abbr> Define abreviao <acronym> Define acrnimo <address> Define informaes de contato <bdo> Define a direo do texto (Atributos: dir=ltr e dir=rtl <blockquote> Define longa citao <q> Define citao curta <cite> Define citao <dfn> Define termo de definio

    Formatao de Fonte A formatao de fonte em HTML pode ser feita atravs da tag <font> porm essa prtica no recomendada. A tag fonte foi removida no HTML 5. A W3C removeu a tag fonte e suas recomendaes. Para as formataes de fonte e qualquer outra formatao de estilo em uma pgina HTML dever ser utilizado as folhas de estilo (CSS, que ser tratado mais a frente).

    Hyperlinks (Links) Os Hyperlinks (ou apenas links) so a forma de navegar entre as paginas HTML. Atravs dos links pode-se conectar vrias pginas ou mesmo arquivos e documentos. A tag a ser utilizada <a> e pode ser utilizada de duas maneiras: Para criar um link para outro documento, usando o atributo href.
    <a href=url target=_blank>Texto</a>

    O href pode apontar para um link externo ou para outra pgina do website. O atributo target=_blank (opcional) faz com que o link clicado abra em outra pgina. Para criar um marcador (ncora) dentro do mesmo documento, usando o atributo nome. Primeiro deve-se criar o ponto no texto onde o link ser apontado da seguinte maneira:
    <a name=ncora1>Sesso 1 da pagina</a>

    E posteriormente criar o link onde o usurio poder cliar e ser encaminhado para o ponto ancorado.
    <a href=#ncora1>Ir para Sesso 1</a>

    Imagens Em HTML a tag responsvel por definir imagens a img que por sinal tambm um elemento vazio. Os atributos da tag <img> so: Src Caminho da imagem Alt Nome para imagem Height Altura

    Width

    Largura Exemplo:
    <img src=foto1.jpg alt=Foto Area 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. O comando alt exibe uma descrio para a imagem e altamente recomendvel (importante para navegadores especficos para deficientes visuais e faz parte das boas prticas de desenvolvimento). Os parmetros height e width so facultativos.

    Listas Atravs do HTML pode-se criar trs tipos de listas para itens. Listas ordenadas, listas no ordenadas e Listas de definio. Listas Ordenadas Para as listas ordenadas deve-se utilizar o elemento <ul> ... </ul> (unordered list) dentro desse elemento utilizar a tag <li> ... </li> para cada item da lista. Exemplo:
    <ul> <li> Item 1 </li> <li> Item 2 </li> <li> Item 2 </li> </ul>

    Resultado: Item 1 Item 2 Item 3 Listas no 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. Item 1 2. Item 2 3. Item 3

    Listas de definio So listas de tens seguidos por sua definio. Para iniciar a lista deve-se utilizar o elemento <dl> ... </dl> (definition list). Os elementos <dt> e <dd> servem respectivamente para criar o item na lista e sua definio. Exemplo:
    <dl> <dt> Item 1 <dd><dt> Item 2 <dd><dt> Item 2 <dd><dd></dl> </dt> Definio </dt> Definio </dt> Definio Definio 1 do Item 1</dd> 1 do Item 2</dd> 1 do Item 3</dd> 2 do Item 3</dd>

    Resultado: Item 1 - Definio 1 do Item 1 Item 2 - Definio 1 do Item 2 Item 2 - Definio 1 do Item 3 - Definio 2 do Item 3

    Tabelas Em HTML uma tabela pode ser criada atravs do elemento <table> ... </table>. A tabela dividida em linhas atravs da tag <tr> e cada linha possui suas clulas caracterizada pela tag <td>. Exemplo:
    <table border=1> <tr> <td>Linha <td>Linha </tr> <tr> <td>Linha <td>Linha </tr> </table> 1, Clula 1</td> 1, Clula 2</td> 2, Clula 1</td> 2, Clula 2</td>

    Resultado: Linha 1, Clula 1 Linha 2, Clula 1 Linha 1, Clula 2 Linha 2, Clula 2

    Principais atributos do elemento <table>; Border Especifica a espessura das bordas ao redor da tabela Cellpadding Especifica o espao entre as paredes das clulas e seu contedo Cellspacing Especifica o espao entre as clulas Width Especifica a largura da tabela

    Formulrios Os formulrios so utilizados para fazer interao com o usurio e passar dados ao servidor. Um formulrio pode conter elementos de entrada, como campos de texto, checkboxes, botes de rdio, botes de envio e muito mais. Um formulrio tambm pode conter listas de seleo, textarea, fieldset, legend, e elementos do rtulo. Para iniciar um formulrio deve-se utilizar o elemento <form> ... </form>. Para dar interatividade o elemento form precisa de elementos de entrada <input>. Exemplo de um formulrio 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 formulrio Method Seleciona o mtodo de envio dos dados do formulrio sendo Post ou Get name Especifica um nome para o formulrio Principais atributos do elemento <input> disabled Desabilita o elemento de forma que ele no possa ser acessado maxleght Especifica o mximo de caracteres que um elemento de texto pode conter. name Especifica o nome do elemento. 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 boto) checkbox (cria caixas de seleo) file (formulrio para enviar arquivo) hidden (cria um elemento invisvel) password (entrada de senha) radio (cria uma seleo de apenas uma opo) reset (boto para redefinir o formulrio) submit (boto para enviar as informaes do formulrio) text (caixa de texto)

    Exemplo de formulrio 2:
    <h2> Formulrio <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 opo</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 vrias opo</p> <hr /> <input type="button" value="Enviar"/> <input type="reset" value="Limpar"/> </form>

    Resultado:

    Vous aimerez peut-être aussi