Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • HTML

    Enviado por

    Ana Silva
    25 visualizações76 páginas

    Direitos autorais

    © Attribution Non-Commercial (BY-NC)

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    25 visualizações76 páginas

    HTML

    Enviado por

    Ana Silva

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 76

    INTRODUO A HTML

    CEF6 Escola Secundria de Vouzela

    HTML

    O QUE O HTML?
    HTML = Hypertext Markup Language (linguagem de marcao de hipertexto) Linguagem utilizada na produo de pginas Web, composta de "tags" que tm sempre a mesma estrutura: <nomedocomando> marca </nomedocomando> marca de fim parte algumas excepes, as marcas devem ser sempre fechadas.

    CRIAR DOCUMENTOS HTML


    Para escrever documentos HTML basta uma editor de texto (Notepad, WordPad, Word, etc.) ou um editor de HTML (FrontPage, DreamWeaver, etc.) e conhecimentos dos cdigos que compem a linguagem. Os cdigos, conhecidos como "tags", servem para indicar a funo de cada elemento da pgina.

    DOCUMENTOS HTML
    Estes documentos tambm podem conter imagens, sons, vdeo, cdigo de programao e links para outros documentos. As pginas so codificadas na linguagem HTML, usando-se um editor de texto comum ou um programa especfico para a produo de pginas. As pginas so interpretadas por um browser ou navegador, sendo o cdigo HTML independente de plataforma de hardware ou software.

    ESTRUTURA BSICA DE UM DOCUMENTO HTML


    <html> <head> <title> </title> ttulo do site

    </head> <body> contedo do site </body> </html>

    BLOCO DE HTML
    <html></html> Indicam o incio e o fim de um documento <head></head> delimitam o cabealho do documento <title></title> entre estas duas tags, escreve-se o ttulo do site que vai aparecer na barra do Browser <body></body> (corpo do documento) estas duas tags delimitam todo o contedo do site. aqui que aparecero os textos, as imagens, tabelas, etc.

    CORPO DO DOCUMENTO
    Dentro da tag <body> podemos inclui:
    Imagem de fundo: <body background="imagem.gif"> Cor de fundo: <body bgcolor="cor"> Cor do texto padro: <body text="cor"> Cor dos links: <body link="cor"> Cor dos links visitados:<body vlink="cor"> Cor dos links activos: <body alink="cor">

    ESTRUTURA DE UM DOCUMENTO EXEMPLO


    <html> <head> <title>Ttulo da pgina</title> </head> <body bgcolor="yellow" text="black" link="blue" vlink="purple" alink="green"> <p>Este o primeiro pargrafo do texto.</p> <p>Este o segundo pargrafo.</p> </body> </html>

    CABEALHOS
    Os cabealhos servem para marcar visualmente o incio de um tpico no texto. Podem apresentar seis tamanhos: H1, H2, H3,... , H6 Exemplo:
    ... <h1>Cabealho de nvel 1</h1> <p>Esta a seco principal do documento.</p> <h2>Cabealho de nvel 2</h2> <p>Esta uma sub-seco.</p> ...

    PARGRAFOS
    Espaos e quebras de linha no tem significado em HTML. Ao serem interpretados, so substitudos por um espao simples. Portanto, preciso forar um incio de pargrafo, usando a tag: <P> possvel, neste caso, no fechar a tag <p>, ou seja, omitir o </p>, sem prejudicar o resultado final. Alinhamento de pargrafo
    <P align="left"> <P align="right"> <P align="center">

    PARGRAFOS
    Para quebras de linha, sem acrescentar uma linha em branco, usa-se: <BR> Para inserir uma linha horizontal: <HR> Por exemplo:
    <hr size=8 align="center" width=75%> size - configura a espessura da linha width - configura a largura da linha (pode ser em percentagem ou em pixeis) align - determina o posicionamento da linha

    LISTAS
    Listas
    Ordenadas No-ordenadas de Definio

    LISTAS
    Listas Ordenadas (Ordered lists)
    <H3>Exemplo de lista ordenada</H3> <OL> <LI>Item 1 </LI> <LI>Item 2 </LI> <LI>Item 3 </LI> </OL>

    LISTAS
    Listas No-ordenadas (Unnumbered lists)
    <H2>Exemplo de lista no-ordenada</H2> <UL> <LI>Primeiro item </LI> <LI>Segundo item </LI> </UL>

    LISTAS
    Listas com listas encadeadas
    <B>Listas com listas encadeadas </B> <UL> <LI>Item 1 </LI> <LI>Item 2 </LI> <UL> <LI>Item 2.1 </LI> <LI>Item 2.2 </LI> </UL> <LI>Item 3 </LI> </UL>

    ATRIBUTOS PARA LISTAS - TYPE (OL):


    Pode assumir cinco valores para definir o tipo de numerao a ser usado na lista:
    "1" : Especifica que os algarismos arbicos padro devem ser usados para numerar a lista ( 1,2,3,4, ...). "a" : Especifica que as letras minsculas devem ser usadas para numerar a lista (a, b, c, d, etc.) "A" : Especifica que as letras maisculas devem ser usadas para numerar a lista (A, B, C, D, etc.) "i" : Especifica que os algarismos romanos minsculos devem ser usados para numerar a lista ( i, ii, iii, iv, etc.) "I" : Especifica que os algarismos romanos maisculos devem ser usados para numerar a lista ( I, II, III, IV, etc.).

    ATRIBUTOS PARA LISTAS - TYPE (UL):


    Pode assumir trs valores para definir o tipo de marcador:
    Disc: o marcador um ponto (Padro); Square: o marcador um quadrado; Circle: o marcador um ponto. Exemplo: <UL TYPE=square> <LI>Aluno <LI>Tcnico <LI>Director </UL>

    ATRIBUTOS PARA LISTAS START:


    Pode determinar o nmero ou a letra que inicia a lista. O ponto inicial 1. Usando o atributo Start, pode alterar esse nmero. Exemplo: <ol Type=a start=3>.

    ATRIBUTOS PARA LISTAS VALUE:


    Em um item da lista poderemos alterar os valores da lista apartir de qualquer ponto. Exemplo:
    <UL> <LI> <LI value=10> <LI> </UL>

    LISTAS
    Listas de Definies: consiste em alternar um termo (abreviado como DT) e uma definio (abreviado como DD). Clientes Web browsers geralmente mostram a definio em nova linha com outro alinhamento. Exemplo de uma lista de definio:
    <DL> <DT> CEF </DT> <DD> CEF Curso de Educao e Formao. </DD> </DL>

    DIRECTRIO DE LISTAS
    A tag <dir> usada para ttulo do directrio de listas. Exemplo: A directoria de listas: <dir> <li>html</li> <li>xhtml</li> <li>css</li> </dir> A tag <dir> suportada pela maioria dos browsers.

    MENU DE LISTAS
    A tag <menu> usada para criar a lista de menu de escolhas. Exemplo: A menu de listas: <menu> <li>html</li> <li>xhtml</li> <li>css</li> </menu> A tag <menu> suportada pela maioria dos browsers.

    COMENTRIOS
    Caso queira fazer comentrios a respeito do seu cdigo HTML apenas como referncia pessoal e no para ser exibido em suas pginas dever fazer o comentrio da seguinte forma: <!- -comentrio- - >

    Formatar textos em HTML


    o

    Definir estilos de caracteres: Lgicos Fsicos Pr-formatao Quebras de linhas Uso de endereos Caracteres especiais Alinhamento Uso de fontes

    Formatao Fsica
    mais consistente, pois tudo vai realmente aparecer tal como foi indicado atravs das tags.

    <Font> e </Font>
    Size=y; y ser um valor entre 1 e 7 Face= xx; xx ser o nome do tipo de letra Color=#rrggbb , cor

    FORMATAO FSICA (CONT.)


    <B> texto a formatar </B> <I> texto a formatar </I> <U> texto a formatar </U> <TT> texto a formatar <TT> mquina de escrever. negrito itlico sublinhado letra do tipo

    NOTA IMPORTANTE:
    Ainda possvel juntar os vrios tags para realizar vrias formataes em simultneo. Exemplo:
    <B><I> a negrito e itlico </I></B>

    <ADDRESS> E </ADDRESS>
    Estes tags so geralmente utilizados para indicar o autor do documento, o mtodo de contactar o autor ou a data de reviso do documento. So colocados, por norma, no final do documento. Sintaxe:
    <ADDRESS> texto <ADDRESS>

    <SUP>,</SUP> , <SUB>E </SUB>


    Atravs destes tags poder-se- colocar o texto superior linha (SUP) ou inferior linha (SUB) Sintaxe:

    <Sup>texto</Sup> <Sub>texto</Sub>

    <STRIKE>,</STRIKE> OU <S></S>
    Estes tags permitem rasurar o texto entre eles inserido. Pode ainda usar-se os tags <Strike> e </Strike> em sua substituio. Sintaxe: <Strike>texto</Strike> ou <S>texto</S>

    PR-FORMATAO
    Com estes tags pode indicar-se o browser que o texto entre eles vai aparecer exactamente como foi escrito, o texto ir aparecer no browser com um tipo de letra de tamanho fixo, com os espaos que forem inseridos e com quebras de linha no mesmo local onde foram colocadas no documento HTML. Sintaxe: <Pre> texto </Pre>

    LINHAS HORIZONTAIS <HR>:


    Produz uma linha horizontal da largura da janela do browser. No necessita da tag </HR> Esta linha pode ser utilizada para separar informao no documento HTML. Atributos:
    Size espessura, em pixels Width largura, em pixels ou percentual da tela (%) Color cor Align alinhamento (left, right, center) Noshade linha sem sombra

    FORMATAO LGICA
    DFN EM CITE CODE KBD SAMP STRONG

    SEQUNCIAS DE ESCAPE
    < &lt; > &gt; & &amp; &atilde; &egrave; &aacute; &ocirc; Nota: no esquecer de colocar sempre um ponto e virgula a seguir sequencia de escape Ao contrario de todo o resto em HTML, a sequncia de escape so sensveis a maisculas.

    IMAGENS

    IMAGENS
    <img src=> Esta tag permite colocar imagens em documentos HTML. Esta imagem ter que existir para aparecer, caso contrrio o browser mostrar uma indicao de que no existe. Esta tag tem inmeros atributos que podem ser aplicados s imagens.

    ATRIBUTOS PARA IMG SRC:<IMG SOURCE= WIDTH=N% HEIGHT=N% ALIGN=POSIO ALT=TEXTO>


    Width Heigth Align largura da imagem. altura da imagem. alinhamento do texto na imagem.

    ATRIBUTOS PARA IMG SRC:<IMG SOURCE= WIDTH=N% HEIGHT=N% ALIGN=POSIO ALT=TEXTO>


    Alt texto que ir aparecer ao passar o mouse sobre a imagem ou texto que surgir caso a imagem no possa ser visualizada.

    Border especificao da largura da limite da imagem (0 = sem limite)

    ATRIBUTOS PARA IMG SRC:<IMG SOURCE= WIDTH=N% HEIGHT=N% ALIGN=POSIO ALT=TEXTO>(CONT.)

    Hspace o texto. Vspace texto.

    espao na horizontal entre a imagem e

    espao na vertical entre a imagem e o

    ATRIBUTOS PARA IMG SRC:<IMG SOURCE= WIDTH=N% HEIGHT=N% ALIGN=POSIO ALT=TEXTO>(CONT.)

    Ismap Usemap

    um mapa com hiperligaes. nome do mapa de definio.

    Nota: O nico atributo obrigatrio o src.

    ALINHAMENTO DAS IMAGENS


    Top Middle Bottom Left Right
    Ver exemplo com os Simpsons

    Exemplo: <img align=top src => <img src= align=top >

    EXEMPLO: INSERO DE IMAGENS


    <html> <body> <img src=marca.gif align=left alt=Imagem marca> <font size=3 face=arial color =blue>Esta a primeira imagem inserida.</font> <br><br> <font size=4 face=Courier New color =orange>Insere mais trs imagens</font> </body> </html>

    LIGAES
    A tag <A> Ligao local com caminhos relativos e absolutos Ligao a outros documentos na Web Ligao a determinados locais dentro de documentos

    LIGAES
    O principal poder do HTML possibilidade de interligar partes de um texto, imagens a outros documentos ou ao mesmo documento.

    CAMINHOS RELATIVOS/ABSOLUTOS
    Em HTML, pode hiperligar-se documentos em pastas diferentes, especificando apenas o caminho relativo para essa pasta. Exemplo:
    1. 2.

    <A HREF=ano09/janeiro.html>JAN</A> <A HREF=../fevereiro.html>FEV</A>

    O primeiro exemplo cria uma hiperligao da palavra JAN para o documento janeiro.htm que se encontra na subpasta ano 09. O segundo exemplo cria uma hiperligao da palavra FEV ao documento fevereiro.html que se encontra numa pasta acima da pasta corrente, da a utilizao do ponto-ponto(..), que permite ao browser localizar ficheiros em pastas que se encontrem um nvel acima da pasta corrente.

    Este tipo de ligao chamado relativo porque est a ser indicado o caminho para o documento a ligar a partir do local onde se encontra o documento corrente. Esta ligao poderia ser feita utilizando o caminho absoluto, ou seja, o caminho indicando o servidor e todas as pastas at chegar ao documento pretendido.

    HIPERLIGAES ENTRE DOCUMENTOS HTML


    O prximo tag permite que a Web seja interactiva e dinmica ao fazer ligaes com outros documentos disponveis na Web. Sintaxe: <A HREF= caminho > texto da hiperligao</A>

    HIPERLIGAES ENTRE SECES NO MESMO


    DOCUMENTO Sintaxe: <A NAME =nome da seco>,</A> para definir a seco do documento <A HREF=#nome da seco>,</A> para fazer essa ligao

    HIPERLIGAES ENTRE SECES EM


    DOCUMENTOS DIFERENTES Sintaxe: <A NAME =nome da seco>tpico</A> na pgina com a seco <A HREF=nome_da_pgina#nome da seco> texto</A> na pgina onde se faz a ligao

    MAILTO
    Sintaxe: <A HREF=mailto: endereo_de_mail>texto</A>

    TABELAS

    TABELAS
    As tabelas em HTML so utilizadas para organizar informao dentro de um documento HTML. Ainda se pode usar as tabelas para organizar o aspecto de um documento HTML.

    TABELAS
    A etiqueta <table> usada para definir tabelas. As tabelas so constitudas por linhas e por clulas. A etiqueta <tr> que significa table row usada para definir uma linha. A etiqueta <td> que significa table data usada para definir uma clula.

    TABELAS - EXEMPLO
    <html><head> <title>Exemplo de uma tabela</title> </head> <body> <table> <tr> <td>Joo </td> <td>15</td></tr> <tr> <td>Antnio </td> <td>12</td></tr> <tr> <td>Ana </td> <td>11</td></tr> <tr> <td>Henrique</td> <td>8 </td> </table> </body></html>

    TABELA - EXEMPLO
    <html><head> <title>Resultados dos alunos</title> </head><body> <table border=1"> <tr> <td>Joo </td> <td>15</td> </tr> <tr> <td>Antnio </td> <td>12</td> </tr> <tr> <td>Ana </td> <td>11</td> </tr> <tr> <td>Henrique</td> <td>8 </td> </table></body></html>

    TABELAS - CABEALHOS
    As tabelas podem ter cabealhos. Para isso, usase a etiqueta <th> que significa table header. Os cabealhos podem ser usados nas linhas e/ou nas colunas.

    TABELAS - CABEALHOS
    <html><head> <title>Uma tabela com cabealhos</title> </head><body> <table border=2> <tr><th>Medias</th><th>Static</th><th> Dynamic </th></tr> <tr><th>Captured</th><td>Bitmaps</td><td> Video</td></tr> <tr><th>Sintetized</th><td>Text</td><td> Audio </td> </tr> </table></body></html>

    TABELAS - ESPAAMENTOS
    Cellspacing: Espaamento entre as clulas da tabela. Sintaxe: <table cellspacing=10>

    TABELAS - ESPAAMENTOS
    Cellpadding: Espaamento entre o contedo e o limite das clulas. Sintaxe: <table cellpadding=10>

    As linhas e as colunas podem ser estendidas e ocupar o espao equivalente a duas ou mais clulas. Os atributos:
    colspan - permite criar uma clula que ocupa vrias colunas; rowspan - permite criar uma clula que ocupa vrias linhas.

    TABELAS - COLSPAN
    <table border=2 cellspacing=10 cellpadding=10> <tr> <th colspan=3>Medias</th> </tr> <tr> <th> Captured</th> <td>Bitmaps</td> <td> Video</td> <tr> <th> Sintetized</th> <td>Text</td> <td> Audio </td> </tr> </table>

    TABELAS - ROWSPAN
    <table border=2 cellspacing=10 cellpadding=10> <tr> <th></th> <th>Static</th> <th>Dynamic</th> </tr> <tr> <th rowspan=2>Medias</th><td>Bitmaps </td> <td>Video</td> </tr> <tr> <td>Texto</td> <td>Audio</td> </tr> </table>

    TABELAS - CLULAS VAZIAS


    <table border=2 cellspacing=10 cellpadding=10> <tr> <th>&nbsp</th> <th>Static</th> <th>Dynamic</th> </tr> <tr> <th rowspan=2>Medias</th> <td>Bitmaps</td> <td>Video</td> </tr> <tr> <td>Texto</td> <td>Audio</td> </tr> </table>

    ATRIBUTOS PARA TABELAS:


    Align: Alinha horizontalmente a tabela em relao ao seu entorno. Background: Permite-nos colocar um fundo para a tabela desde um link a uma imagem. Bgcolor: D cor de fundo tabela. Border: Define o nmero de pixels da borda principal. Bordercolor: Define a cor da borda.

    ATRIBUTOS PARA TABELAS (CONT.)


    Cellpadding: Define, em pixels, o espao entre as bordas da clula e o contedo da mesma. Cellspacing: Define o espao entre as bordas (em pixels). height: Define a altura da tabela em pixels ou percentagem. width: Define a largura da tabela em pixels ou percentagem.

    http://www.criarweb.com/artigos/88.php

    ALINHAMENTO
    Align: define o alinhamento horizontal da clula. Valign: define o alinhamento vertical da clula

    TTULO DA TABELA
    Para criar um ttulo/legenda para a tabela usamos a tag:
    <caption>

    INSERO DE ELEMENTOS MULTIMDIA

    AUDIO

    Formatos de ficheiros suportados: MIDI, wav, mp3.

    FICHEIROS DE SONS EMBEBIDOS E


    ANCORADOS Para embeber ou inserir um ficheiro de som em HTML utiliza-se a tag <embed> Sintaxe <embed src=nomedoficheiro autostart=true hidden=false loop=false width=145 heigth=55 align=center> Autostart arranca com o som ou no; Hidden mostra ou no o reprodutor de som; Loop n. de vezes de repetio da musica; valor = 1 (repete infinitas vezes)

    AUDIO
    <BGSOUND SRC="audio.som">

    Faz com que o som seja inserido como som de fundo ou 'trilha sonora' de uma pgina. Esta formatao s funciona no Internet Explorer.

    VIDEO

    Formatos de ficheiros suportados: avi, mov e mpeg.

    FICHEIROS DE VDEO EMBEBIDOS E


    ANCORADOS Para embeber ou inserir um ficheiro de som em HTML utiliza-se a tag <embed> Sintaxe
    <EMBED SRC="nomedoficheiro PLUGINSPACE= "http://www.apple.com/quicktime/download/" LOOP="false" CONTROLLER="true" AUTOPLAY="false" WIDTH="400" HEIGHT="150>

    FICHEIROS MULTIMDIA ANCORADOS


    <embed src=nomedoficheiro autostart=false loop=false align=center></embed> <a href=nomedoficheiro>texto associado hiperligao</a> Nota: autostart deve estar a false.

    Você também pode gostar