Successfully reported this slideshow.
F                                    141 PáginasLinguagem  HTMLProfessora Ana Carolina Jaskulski     http://anacarol.blog....
2                                                                                       ÍndiceIntrodução.....................
3                 src="..."..................................................................................................
4   <u> ... </u>.............................................................................................................
5                  type= “tipo"..............................................................................................
615 Multimídia ..............................................................................................................
7                  offy .....................................................................................................
8Tamanhos e Formatos ........................................................................................................
9                                         Introdução     Aqui neste material você encontrará muitas informações sobre HTML...
10                                         1 História       A internet nasceu em 1969, nos Estados unidos. Interligava ori...
11apresenta por volta de 70 novas propriedades.      1999 - HTML v4.01 Alguma modificações da versão anterior.      2000 -...
12        <tag1> <tag2> <tag3> texto </tag3> </tag2> </tag1>      Nunca misture a seqüência, como por exemplo:        <tag...
13                                  2 Elementos                                 Estruturais      <html atributos> ... </ht...
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Apostila completa-html
Próximos SlideShares
Carregando em…5
×

Apostila completa-html

879 visualizações

Publicada em

  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Apostila completa-html

  1. 1. F 141 PáginasLinguagem HTMLProfessora Ana Carolina Jaskulski http://anacarol.blog.br anamaxwell@gmail.com Março/2007
  2. 2. 2 ÍndiceIntrodução..................................................................................................................................91 História........................................................................................................................... .......10 1.1 Evolução do HTML ....................................................................................................................................... ..................10 1.2 Fundamentos da Linguagem HTML...............................................................................................................................11 . 1.3 Os Nomes dos Arquivos ................................................................................................................................... ..............11 1.4 A Lógica LIFO............................................................................................................................................................. .....11 1.5 O Arquivo HTML Básico .............................................................................................................................. ...................12 1.6 O Arquivo index.htm ..................................................................................................................................... ..................122 Elementos Estruturais.........................................................................................................13 . <html atributos> ... </html>.................................................................................................................................... ................13 version= "versão" ................................................................................................................................................................13 lan="idioma".........................................................................................................................................................................13 dir= "rtl| ltr" ..........................................................................................................................................................................13 <head atributos> ... </head>............................................................................................................................................... ...13 <body atributos> ... </body> ................................................................................................................................. ................14 background= "URL".............................................................................................................................................................14 bgcolor= "#rrggbb" ou "nome".............................................................................................................................................15 text= "#rrggbb" ou "nome"...................................................................................................................................................15 link= "#rrggbb" ou "nome"....................................................................................................................................................15 alink= "#rrggbb" ou "nome"..................................................................................................................................................15 vlink= "#rrggbb" ou "nome"..................................................................................................................................................16 hover= "#rrggbb" ou "nome"................................................................................................................................................16 bgproperties= "fixed"...........................................................................................................................................................16 leftmargin= "n".....................................................................................................................................................................16 topmargin= "n".....................................................................................................................................................................17 scroll= "yes | no | auto"........................................................................................................................................................173 Elementos do Cabeçalho....................................................................................................18 . <script >...</script > ......................................................................................................................................... .....................18 status= "mensagem"............................................................................................................................................................18 defaultstatus= "mensagem".................................................................................................................................................18 Alterando o Formato do Cursor ......................................................................................................................... ...................18 Usando um Arquivo como Cursor....................................................................................................................................... ...19 cursor:url(...)........................................................................................................................................................................19 Anexando Objetos ao Cursor ........................................................................................................................ .......................204 Links e Imagens .................................................................................................................22 . Links Internos e Externos .................................................................................................................................. ...................22 href= "..."........................................................................................................................................................................ ........22 name= "..."...........................................................................................................................................................................23 target="_blank", "nome" ou "_top".......................................................................................................................................24 title="descrição"...................................................................................................................................................................24 style=text-decoration=: " "............................................................................................................................................. .........25 Link Que Muda o Cursor....................................................................................................................................................... .25 onmouseover=" "................................................................................................................................................. ..................26 Fazendo um link oculto................................................................................................................................................... .......26 onclick="alert(...)"........................................................................................................................................... ......................27 mailto:...................................................................................................................................................................... ..............27 Criando Links Para Download.............................................................................................................................. .................28 Abrir no Browser Arquivos de Outros Softwares .................................................................................................................29 . Configurando a Página Inicial - Página de Abertura ............................................................................................................29 .5 Imagens...............................................................................................................................31 . <img atributos>............................................................................................................................................................ ..........31 Profª Ana Carolina Jaskulski http://anacarol.blog.br anaschneider@gmail.com
  3. 3. 3 src="..."................................................................................................................................................................................31 align="top | middle | bottom | left | right"..............................................................................................................................31 width="largura", height="altura"...........................................................................................................................................33 border="valor"......................................................................................................................................................................33 vspace="y" hspace="x"........................................................................................................................................................34 alt="texto".............................................................................................................................................................................35 onmouseover, onmouseout="imagem"...............................................................................................................................35 Criando um Diretório de Imagens Reduzidas ......................................................................................................................35 . Imagem de Baixa Resolução ........................................................................................................................................ ........36 lowsrc="arquivo"..................................................................................................................................................................366 Elementos Especiais...........................................................................................................37 . <applet> ... </applet>...................................................................................................................................................... .......37 code="classe Java".............................................................................................................................................................37 codebase="URL base".........................................................................................................................................................37 name="nome"......................................................................................................................................................................37 align, alt, hspace, vspace, height, width..............................................................................................................................37 <param atributos> ................................................................................................................................................................. 37 name="nome"......................................................................................................................................................................37 value="valor"........................................................................................................................................................................38 <font atributos> ... </font> ............................................................................................................................................... ......38 size="valor" ou "incremento"...............................................................................................................................................38 color="#rrggbb" ou "nome"..................................................................................................................................................39 face="nome de fonte"..........................................................................................................................................................40 <br atributos>.............................................................................................................................................. ..........................41 clear="left", "right", "all"........................................................................................................................................................41 <nobr> ... </nobr>....................................................................................................................................................... ...........41 <wbr> ................................................................................................................................................................................. ...41 <map atributos> ... </map > ............................................................................................................................................. .....42 name="nome_do_mapa".....................................................................................................................................................42 ismap...................................................................................................................................................................................42 usemap="#nome_do_mapa"...............................................................................................................................................42 <area atributos> ......................................................................................................................................... ..........................43 shape="circ", "poly" ou "rect"...............................................................................................................................................43 coords="coordenadas"........................................................................................................................................................43 href="URL"...........................................................................................................................................................................43 nohref...................................................................................................................................................................................437 Bloqueando a Cópia da Página...........................................................................................44 . oncontextmenu="return false".............................................................................................................................................44 onselectstart="return false"..................................................................................................................................................44 <!-- comentários ... --> ...................................................................................................................................... ....................448 Formatação de textos e caracteres.....................................................................................45 . Elementos Lógicos........................................................................................................................................... .....................45 <strong> ... </strong>................................................................................................................................... .........................45 <em> ... </em>............................................................................................................................................... .......................45 <cite> ... </cite>.................................................................................................................................................. ...................45 <var> ... </var>............................................................................................................................................... .......................45 <samp> ... </samp>....................................................................................................................................................... ........45 <kbd> ... </kbd>.............................................................................................................................................................. .......45 <dfn> ... </dfn>............................................................................................................................................... .......................45 <code> ... </code>.......................................................................................................................................................... .......45 <pre> ... <pre> ........................................................................................................................................................... ...........46 Elementos Físicos.......................................................................................................................................... .......................47 <b> ... </b>...................................................................................................................................................... ......................47 <i> ... </i>......................................................................................................................................................................... ......47 <tt> ... </tt>................................................................................................................................................... .........................47 Profª Ana Carolina Jaskulski http://anacarol.blog.br anaschneider@gmail.com
  4. 4. 4 <u> ... </u>...................................................................................................................................................... ......................47 <strike> ... </strike>........................................................................................................................................... ....................47 <del> ... </del>.......................................................................................................................................................................47 <s> ... </s>...................................................................................................................................................................... .......47 <sub> ... </sub>.............................................................................................................................................................. .......47 <sup> ... </sup>.............................................................................................................................................................. .......47 <small> ... </small>............................................................................................................................................................. ...47 <big> ... </big>.......................................................................................................................................................................47 <blink> ... </blink>................................................................................................................................................................ ..48 align="top", "middle", "bottom" ............................................................................................................................................49 behavior =scroll, slide, alternate .........................................................................................................................................49 bgcolor="cor" ......................................................................................................................................................................50 direction=left, right, up, down...............................................................................................................................................50 height="número", %:............................................................................................................................................................50 hspace="número"................................................................................................................................................................50 loop="número", -1 a infinite.................................................................................................................................................50 scrollamount="número".......................................................................................................................................................50 scrolldelay="número"...........................................................................................................................................................50 vspace="número".................................................................................................................................................................50 width="número", %..............................................................................................................................................................509 Formatações................................................................................................................. ........57 <H1, H2, ..., H6 atributos>.................................................................................................................................... .................57 </H1, H2, ..., H6> ........................................................................................................................................................ ..........57 align="center", "left", "right" ou "justify"...............................................................................................................................57 style="propriedades"............................................................................................................................................................57 <p atributos> ... </p> ......................................................................................................................................................... ....58 align.....................................................................................................................................................................................58 style="propriedades" ...........................................................................................................................................................5810 Linhas Horizontais ............................................................................................................60 . <hr atributos> ............................................................................................................................................. ..........................60 size="número"......................................................................................................................................................................60 width="número"....................................................................................................................................................................60 align="left", "center" ou "right".............................................................................................................................................61 noshade...............................................................................................................................................................................61 color="#rrggbb" ou "nome"..................................................................................................................................................6111 Linhas Verticais.................................................................................................................63 . Outros Separadores de Texto........................................................................................................................ .......................6612 Texto Pré-Formatado .......................................................................................................68 . <pre atributos> ... </pre> .................................................................................................................................. ....................68 width="...".............................................................................................................................................................................68 Espaçamento Forçado........................................................................................................................................................... 68 <q atributo> ... </q> ..................................................................................................................................... .........................69 cite=URL..............................................................................................................................................................................69 <blockquote> ... </blockquote> ........................................................................................................................................ .....69 <address> ... </address> ............................................................................................................................................. .........70 <div atributos> ... </div> ............................................................................................................................. ..........................70 align="center", "left" ou "right".............................................................................................................................................70 style="propriedades"............................................................................................................................................................70 <center> ... </center> .................................................................................................................................. .........................71 <acronym atributos> ... </acronym> ................................................................................................................... ..................71 title ......................................................................................................................................................................................7113 Listas.................................................................................................................................72 . Não Ordenada.......................................................................................................................................................... .............72 <ul atributos> ... </ul> ............................................................................................................................................. ..............72 Profª Ana Carolina Jaskulski http://anacarol.blog.br anaschneider@gmail.com
  5. 5. 5 type= “tipo"...........................................................................................................................................................................72 Ordenada.............................................................................................................................................................................. .72 <ol atributos> ... </ol> ...........................................................................................................................................................72 type="tipo"............................................................................................................................................................................72 start="valor".........................................................................................................................................................................73 <li atributos> ... </li> .................................................................................................................................... .........................73 <dl atributos> ... </dl> ...........................................................................................................................................................73 compact...............................................................................................................................................................................73 <dt atributos> ... </dt> ...................................................................................................................................................... .....74 <dd atributos> ... </dd> .........................................................................................................................................................74 Usando Figuras como Marcadores ................................................................................................................................... ....7414 Tabelas..............................................................................................................................76 . <table>...</table> ........................................................................................................................................................... .......76 <tr>...</tr> ................................................................................................................................................................. ............76 <td>...</td> ...........................................................................................................................................................................76 <table atributos> ... </table> ................................................................................................................................. ................76 border="valor"......................................................................................................................................................................77 cellpadding="valor"..............................................................................................................................................................78 width="valor" e height="valor"...........................................................................................................................................79 bgcolor="#rrggbb" ou "nome"..............................................................................................................................................79 background ="diretório/nome do arquivo"...........................................................................................................................80 bordercolor ="#rrggbb" ou "nome".......................................................................................................................................80 bordercolordark ="#rrggbb" ou "nome"................................................................................................................................81 bordercolorlight ="#rrggbb" ou "nome"................................................................................................................................81 <tr atributos> ... </tr> ....................................................................................................................................... .....................82 align="left, right" ou "center"................................................................................................................................................82 valign="baseline, bottom, top" ou "middle"..........................................................................................................................83 bgcolor="cor".......................................................................................................................................................................83 bordercolor="cor".................................................................................................................................................................84 bordercolordark="cor"..........................................................................................................................................................84 bordercolorlight="cor"..........................................................................................................................................................84 char="caracter"....................................................................................................................................................................84 charoff="número".................................................................................................................................................................84 table data <td atributos> ... </td> ........................................................................................................................................85 rowspan=número.................................................................................................................................................................85 colspan=número..................................................................................................................................................................85 align=left, right ou center ....................................................................................................................................................86 valign=baseline, bottom, top ou middle ..............................................................................................................................87 nowrap.................................................................................................................................................................................87 width=valor...........................................................................................................................................................................88 bgcolor="#RRGGBB"...........................................................................................................................................................89 background="diretório/nome do arquivo"............................................................................................................................89 bordercolor...........................................................................................................................................................................89 bordercolordark e bordercolorlight.......................................................................................................................................90 <th atributos> ... </th> ...................................................................................................................................................... .....90 <caption atributos> </caption> .................................................................................................................... .........................91 align=top, (default) ou bottom..............................................................................................................................................91 Formatando grandes tabelas ......................................................................................................................................... .......91 <thead>...</thead> ........................................................................................................................................ .......................91 <tbody>...</tbody> ........................................................................................................................................................ ........92 <tfoot>...</tfoot> .......................................................................................................................................... .........................92 Usando Tabelas para criar Colunas de Texto......................................................................................................................93 . Imagens, Cores e Backgrounds em Tabelas................................................................................................................... ......96 Fazendo Gráficos de Estatísticas........................................................................................................................ ................100 Tabela com Imagens Linkadas.................................................................................................................................... ........103 Profª Ana Carolina Jaskulski http://anacarol.blog.br anaschneider@gmail.com
  6. 6. 615 Multimídia .......................................................................................................................106 . <bgsound atributo> ........................................................................................................................................................ .....106 src="URL"..........................................................................................................................................................................106 loop="número | infinite"......................................................................................................................................................106 meta................................................................................................................................................................................... ..10616 Vídeos com img...............................................................................................................107 . align= ""..............................................................................................................................................................................107 alt="texto"...........................................................................................................................................................................107 border="número"................................................................................................................................................................107 controls..............................................................................................................................................................................107 dynsrc="URL"....................................................................................................................................................................107 height="número"................................................................................................................................................................107 hspace="número"..............................................................................................................................................................107 loop="número ou infinite"...................................................................................................................................................108 src="endereço"..................................................................................................................................................................108 start="fileopen / mouseover"..............................................................................................................................................108 vspace="número"...............................................................................................................................................................108 width="número"..................................................................................................................................................................108 <embed atributos> ... </embed> .................................................................................................................................... .....108 align="left", "right", "top", "bottom" ....................................................................................................................................108 border="número"................................................................................................................................................................108 frameborder="no"...............................................................................................................................................................108 height="número"................................................................................................................................................................108 hidden="true", "false".........................................................................................................................................................108 hspace="número"..............................................................................................................................................................109 name="texto".....................................................................................................................................................................109 pallete="foreground", "background"...................................................................................................................................109 pluginspace="endereço"....................................................................................................................................................109 vspace="número"...............................................................................................................................................................109 type="mimetype"................................................................................................................................................................109 width="número"..................................................................................................................................................................109 <nobed> ... </nobed> .................................................................................................................................. .......................10917 Posicionamento de Objetos - div.....................................................................................110 left (esquerdo) e top (topo)................................................................................................................................................110 width (largura) e height (altura).........................................................................................................................................110 position...............................................................................................................................................................................110 z-index...............................................................................................................................................................................113 overflow..............................................................................................................................................................................11318 Filtros...............................................................................................................................115 . alpha............................................................................................................................................................................. .......115 opacity ............................................................................................................................................................ ....................115 finishopacity ......................................................................................................................................................................115 style ...................................................................................................................................................................................115 startx .................................................................................................................................................................................115 starty .................................................................................................................................................................................115 finishx ................................................................................................................................................................................115 finishx ................................................................................................................................................................................115 blur...................................................................................................................................................................................... .117 add ....................................................................................................................................................................................117 direction ............................................................................................................................................................................117 strength .............................................................................................................................................................................117 chroma ............................................................................................................................................................................. ...119 color ..................................................................................................................................................................................119 dropshadow .......................................................................................................................................................... ..............119 color...................................................................................................................................................................................119 offx ....................................................................................................................................................................................119 Profª Ana Carolina Jaskulski http://anacarol.blog.br anaschneider@gmail.com
  7. 7. 7 offy ....................................................................................................................................................................................119 positive ..............................................................................................................................................................................120 fliph e flipv........................................................................................................................................................................ ....120 glow ................................................................................................................................................................. ...................120 color ..................................................................................................................................................................................121 strength .............................................................................................................................................................................121 gray.................................................................................................................................................................................... ..121 invert............................................................................................................................................................................ ........122 motion blur ................................................................................................................................................................. .........122 strenght .............................................................................................................................................................................123 direction ............................................................................................................................................................................123 progid:DXimagetransform.Microsoft .................................................................................................................................123 wave ................................................................................................................................................................ ...................124 add ....................................................................................................................................................................................124 freq ....................................................................................................................................................................................124 lightstrength ......................................................................................................................................................................124 phase ................................................................................................................................................................................124 strength .............................................................................................................................................................................124 xray ............................................................................................................................................................................. ........12519 Frames .......................................................................................................................... ...126 <frameset atributos> ... </frameset> ........................................................................................................................... ........126 cols="x, y, ...".....................................................................................................................................................................126 rows="x, y, ..."....................................................................................................................................................................126 frameborder="1 / 0"............................................................................................................................................................126 Frames verticais .......................................................................................................................................... .......................126 Frames Horizontais..............................................................................................................................................................127 Frames Combinados..................................................................................................................................... ......................127 framespacing="valor".........................................................................................................................................................128 <frame atributos> ............................................................................................................................................................... .128 align="top, middle, bottom, left, right"................................................................................................................................128 frameborder="1 / 0" ...........................................................................................................................................................128 src="URL"..........................................................................................................................................................................128 name="rótulo"....................................................................................................................................................................129 marginheight="número".....................................................................................................................................................129 marginwidth="número".......................................................................................................................................................129 noresize ............................................................................................................................................................................129 scrolling="yes | no"............................................................................................................................................................129 Montando um Diretório com frames ..................................................................................................................................130 . <iframe> ... </iframe > .............................................................................................................................. ..........................132 src="URL"..........................................................................................................................................................................132 name="texto".....................................................................................................................................................................132 width="número"..................................................................................................................................................................132 height="número"................................................................................................................................................................133 align="top | middle | bottom | left | right"............................................................................................................................133 Frameborder="1 | 0"..........................................................................................................................................................133 margnwidth="pixels"..........................................................................................................................................................133 marginheight="pixels"........................................................................................................................................................133 scrolling="yes | no | auto"..................................................................................................................................................13320 Botões............................................................................................................................ ...135 Fechar a janela........................................................................................................................................................... .........135 Imprimir a página....................................................................................................................................................... ..........135 "Voltar" e "Avançar".............................................................................................................................................................136 Exibir Código Fonte............................................................................................................................................. ................137 Botões Coloridos ................................................................................................................................................................137 Botões com Links ........................................................................................................................................ .......................137 Botões Texturizados................................................................................................................................................. ...........139 Profª Ana Carolina Jaskulski http://anacarol.blog.br anaschneider@gmail.com
  8. 8. 8Tamanhos e Formatos ...................................................................................................................................................... ..140Botões com Imagens............................................................................................................................................... ............141 Profª Ana Carolina Jaskulski http://anacarol.blog.br anaschneider@gmail.com
  9. 9. 9 Introdução Aqui neste material você encontrará muitas informações sobre HTML. É um apanhado de materiais que encontrei (outros que ganhei) e alguns exemplos que visam ajudar no seu aprendizado. Esta apostila não substitui a aula. Tampouco você precisa ter ela durante as aulas- ela é um complemento. Nem todos os conteúdos abordados aqui nós veremos em sala de aula... porque não há tempo para tudo. Esta apostila é um Guia. Ela não vai te ensinar CSS. Ela não vai te ensinar tudo de HTML. Nem DHTML. Nem Javascript. Nem Ajax. A editora Alta Books lançou a coleção Use a cabeça. com livros MUITO divertidos, muito completos e muito bons de ler. Sãoescritos com técnicas que ajudam o leitor decorar os comandos através de exemplos bem humorados e figuras divertidas. No site da editora eles disponibilizaram parte dos livros em formato PDF. Dê uma olhada. É muito divertido!. Use a Cabeça - HTML com CSS e Use a Cabeça – AJAX No site http://anacarol.com.br eu vou sempre colocar mais informações e outras fontes de pesquisa - de vários assuntos. Essa apostila não visa lucros.... você não deve pagar por ela. Bons estudos! Profª Ana Carolina Jaskulski http://anacarol.blog.br anaschneider@gmail.com
  10. 10. 10 1 História A internet nasceu em 1969, nos Estados unidos. Interligava originalmente laboratórios de pesquisa e se chamava ARPANET(ARPA: Advanced Research Projects Agency). Era uma rede do Departamento de Defesa norte-americano. Era o auge da Guerra Fria, eos cientistas queriam uma rede que continuasse de pé em caso de um bombardeio. Surgiu então o conceito central da internet: uma redeem que todos os pontos se equivalem e não há um comando central. Assim, se B deixa de funcionar, A e C continuam podendo secomunicar. O nome “internet" surgiu bem mais tarde, quando a tecnologia da ARPANET passou a ser usada para conectar universidades elaboratórios, primeiro nos EUA e depois em outros países. Por isso que não há um único lugar que "governa" a internet. Hoje ela é umconjunto de milhares de redes no mundo inteiro. O que essas redes têm em comum é o protocolo TCP/IP (Transmission ControlProtocol/Internet Protocol), que permite que elas se comuniquem umas com as outras. Então, a internet pode ser definida como: uma rede de redes baseadas no protocolo TCP/IP; uma comunidade de pessoas que usame desenvolvem essas redes; uma coleção de recursos que podem ser alcançados através destas redes. Durante cerca de duas décadas, a internet ficou restrita ao ambiente acadêmico e científico. Em 87 pela primeira vez foi liberadoseu uso comercial nos EUA. A "antiga" internet, antes da Web, exigia do usuário disposição para aprender comandos em Unix (uma linguagem deprogramação) bastante complicados, e enfrentar um ambiente pouco amigável (unicamente em texto). A Web fez pela internet o que oWindows fez pelo computador pessoal – tornou acessível. O poder da WWW (World Wide Web - Rede de Alcance Mundial), reside em sua capacidade em associar uma determinada partede um documento eletrônico a outro computador e a outro documento à milhares de quilômetros afastado. Essa conexão entredocumentos é possível graças à utilização do protocolo de comunicação chamado HTTP (Hypertext Transfer Protocol - Protocolo detransferência de Hipertexto) e da linguagem HTML (Hypertext Markup Language – Linguagem de Desenvolvimento de Hipertexto). O HTML nasceu em 1991 no CERN (European Council for Nuclear Research – Conselho Europeu de Pesquisas Nucleares), nasuíça. Seu criador, o inglês Tim Berners-Lee de 44 anos, a concebeu unicamente como uma linguagem que serviria para interligarcomputadores do laboratório e outras instituições de pesquisa e exibir documentos científicos de forma simples e fácil de acessar. Um desenvolvimento fundamental aconteceu em julho de 1992 com a liberação da biblioteca de desenvolvimento para WWW. Foiessa biblioteca que deu origem à construção de vários browsers WWW e servidores que tornaram a WEB viável. Um desses browsers foi o Mosaic, o primeiro browser multiplataforma que explorava completamente a capacidade de hipermídiada WEB. Desenvolvido por Marc Andreson, então do NCSA, o Mosaic foi que iniciou o crescimento explosivo da WEB. No outono1993 tornou-se disponível a milhões de usuários, com a liberação das versões para Mac e Windows. Se por um lado novos browsers têm superado os recursos do Mosaic, por outro lado foi esse programa que se tornou sinônimo daWEB. Cada versão de HTML tem tentado refletir todo o consenso entre a indústria de software para que o investimento feito pelosautores de páginas não seja desperdiçado e que os seus documentos não deixem de se poder ler num curto período de tempo. O HTMLtem sido desenvolvido com a visão que todos os equipamentos fossem capazes de usar a informação da Web, computadores commonitores de diversas resoluções e vários números de cores, equipamentos para input e output de voz, computadores com alta e baixalargura de freqüência e muito mais. Não desperdiçando o tempo (e custo) de serviço de um Webmaster que faz um site e logo-logo essesite deixa de funcionar - para isso é mantido o padrão. Com o HTML (e a facilidade dele), a internet se tornou uma imensa biblioteca, onde há de tudo. Tornou-se uma grande arena deconhecimento e diversão O HTML 4.0 estende com mecanismos para style sheets (CSS), scripting, frames (janelas), embedding objects, melhor suportepara texto com direção variável (esquerda, direita, e ambos), tabelas mais visualizáveis, melhorias nos forms, melhor acessibilidade parapessoas com incapacidades. 1.1 Evolução do HTML 1992 - Primeira aparição do HTML. 1993 - HTML+ Algumas definições da aparência, tabelas, formulários. 1994 - HTML v2.0 Padronização para as características principais. 1994 - HTML v3.0 uma extensão do HTML+ entendido como um rascunho de padrão. 1995 - HTML v3.2 Netscape e Internet Explorer definem seus próprios padrões baseados nas implementações correntes. 1995 - JavaScript criada por Brendan Eich da Netscape como uma extensão do HTML para o browser Navigator v2.0. JavaScript éuma linguagem de roteiro (script) baseada em objetos e permite que sejam manipulados através de eventos dinâmicos que faltavam aoHTML: abertura de janelas de avisos etc. 1996 - CSS1 em dezembro deste ano é apresentada pela primeira vez a Folha de Estilo, criada para complementar a linguagemHTML. Possuía uma formatação simples e cerca de 60 propriedades. 1997 - HTML v4.0 São lançados os browsers Netscape v4.0 (agosto) e internet Explorer v4.0 (outubro) que apresentaram umconjunto de tecnologias (CSS, JavaScript/VBScript e DOM) que juntas disponibilizaram diversos recursos tornando o HTML dinâmico.Surge então o DHTML. 1998 - CSS2 em maio é lançado a segunda versão da Folha de Estilo que, além de incluir todas as propriedades do CSS1 ainda Profª Ana Carolina Jaskulski http://anacarol.blog.br anaschneider@gmail.com
  11. 11. 11apresenta por volta de 70 novas propriedades. 1999 - HTML v4.01 Alguma modificações da versão anterior. 2000 - XHTML v1.0 É criado e consiste de uma versão XML do HTML v4.01. 1.2 Fundamentos da Linguagem HTML O Edit foi um dos primeiros (e mais simples) editores de texto. Caracteres ASCii puro, sem formatação alguma (mudança de corde fonte, tabulações nem parágrafos), mas depois vieram os WordStar, OpenAcces, Carta Certa, Word. Cada um trazia suas inovações(suas possibilidades), que infelizmente não eram compatíveis entre si, ou seja: uma arquivo do Word não abria no Carta Certa. A incompatibilidade existia porque cada programa adicionava ao texto códigos próprios (para o controle dele e que os outros nãoconheciam), mas com o passar do tempo foram-se criando formas de transformar de um padrão para outro: de Word para Carta Certa, porexemplo. Para evitar que ocorram incompatibilidades como esta, na internet foi desenvolvido o padrão HTML. O HTML é uma linguagem de formatação criada para estruturar a página que será exibida na internet (no browser). Seus arquivossão de texto puro com códigos de marcação (as Tags). Cada Tag é um comando que será interpretado pelo browser (por exemplo, a tag<b> é o comando para transformar o texto em negrito). Ser em texto puro significa que os arquivos em HTML não contêm nada além de letras, números, sinais de pontuação e caracteresem geral que podem ser impressos. um arquivo HTML é também conhecido como página Web ou Home Page e são identificados com aextensão .htm ou .html, exemplo: index.htm. Os códigos de marcação de uma página HTML também são conhecidos como código fonte e para acessá-los basta posicionar oponteiro do mouse sobre a página, clicar no botão direito e selecionar a opção [Exibir código fonte]. Muitos Webmasters não gostamque os usuários da internet fiquem xeretando no código fonte de sua home page porque lá está toda a sua criatividade, truques demacetes de elaboração da página (a questão de copyright ou direitos autorais), por isso é comum encontrarmos sites com bloqueio desterecurso A grande vantagem da linguagem HTML é que, por ela ser muito simples, não necessita de conhecimentos prévios deprogramação, por isso que muitas vezes é escolhida como a primeira Linguagem de Programação a ser aprendida por uma pessoa. Outrofator é o de não precisar de um editor específico, qualquer um serve (o Bloco de Notas e o Vi, por serem texto puro, são excelente paraisso), mas existem editores exclusivamente HTML, os WYSiWYG (What You See is What You Get - O que você vê é o que você tem). Estas ferramentas foram desenvolvidas para facilitar a vida do Webmaster, porém, como tudo na Rede está em fase de transição,estes editores ainda deixam muito a desejar tanto na apresentação de novos recursos do HTML (que normalmente levam tempo paraserem incorporados aos editores), como também na possibilidade de acontecerem incompatibilidades do editor para com a linguagem.Quando isso acontece o Webmaster (que conhece a Linguagem HTML), simplesmente entra no código fonte e "faz na mão", pois nãotem como o browser não cumprir uma ordem direta. Entrar no código fonte para suprimir as redundâncias e os caracteres de controle doseditores ("sujeiras do código") é um grande artifício, principalmente para diminuir o tamanho do arquivo. Sabendo HTML se ganha independência para criar, usando a criatividade, e sem depender dos recursos do Editor HTML que seestaria usando. 1.3 Os Nomes dos Arquivos HTML não faz distinção entre letras maiúsculas (caixa alta) e letras minúsculas (caixa baixa). Tanto faz escrever <font> como<FONT>. Porém o servidor onde a página estiver hospedada (ou o sistema operacional, caso a página esteja no seu próprio computador)diferencia letras minúsculas e maiúsculas, e se criar um link para um arquivo chamado apostila.htm e ele estiver com o nomeApostila.htm, o servidor simplesmente não irá encontrá-lo. É por isso que muitas vezes o servidor retorna com uma mensagem de"Arquivo não encontrado". Os nomes não devem conter mais que 32 caracteres nem espaços em branco (use o símbolo _ para substituir o espaço em branco),assim, ao invés de nomear o arquivo "pagina um.html", nomeie como "pagina_um.html" O ponto final deve ser usado uma só vez para separar a extensão (de três letras) que classifica o arquivo. Não use pagina..html, usepagina.html para o nome do arquivo. Os nomes de arquivos não devem conter caracteres, tais como: acentos, cedilha, pontuações, sinais de maior e menor, pipe, trema,e comercial, asterisco, parênteses, chaves etc. use somente números, letras e underline (o _) 1.4 A Lógica LIFO O HTML é uma Linguagem de Marcação., onde se insere marcações (tags), na forma de elementos HTML no conteúdo dainformação que será publicada. As marcações informam ao browser como formatar o conteúdo (em Cabeçalhos, Parágrafos, Listas eTabelas) e onde inserir links em hipertexto e imagens e outros Objetos. As tags são delimitadas entre os sinais de menor "<" e maior ">". A maioria das tags funciona em dois tempos, ou seja, tem que seespecificar onde começa e onde termina, por exemplo: <tag>texto</tag>, onde o sinal "/" significa o fim da atuação da tag. Nunca se deve embaralhar as tags, elas podem vir uma dentro da outra, porém a que começou primeiro tem que necessariamenteterminar por último, assim: Profª Ana Carolina Jaskulski http://anacarol.blog.br anaschneider@gmail.com
  12. 12. 12 <tag1> <tag2> <tag3> texto </tag3> </tag2> </tag1> Nunca misture a seqüência, como por exemplo: <tag1> <tag2> <tag3> texto </tag2> </tag1> </tag3> isso segue a lógica LIFO (Last in, First Out - O último aberto deve ser o primeiro a ser fechado). Nem todas as tags necessitam ser terminadas. A tag que significa linha em branco não necessita de fim, assim como também a tagde barra horizontal. Como não são todas as tags que são relacionadas com textos, a tag que significa imagem não necessita de terminação e nem serelaciona necessariamente com texto. Uma tag é formada por comando, atributo e valor. Os atributos com seus valores modificam os resultados default dos comandos. 1.5 O Arquivo HTML Básico O documento HTML normalmente possui extensão .htm ou .html. Existe uma tag que identifica o documento como sendo HTML,é a <html>, que necessariamente é a primeira que aparece no texto, e sua terminação </html> é obviamente a última. em seguida define-se o cabeçalho com <head> e </head> Dentro do cabeçalho podem existir diversas outras tags específicas e scripts em diversas linguagens, porém o que sempre existe é adefinição do título, com <title> e </title>. Este título é o que irá aparecer na barra superior da janela do browser, junto com o nome domesmo. Fora do cabeçalho, porém dentro das tags <html>, existe o "corpo" definido por <body> e </body> e aonde vai o "corpo" dosite. Estas são as tags básicas de todo arquivo html. <html> <!— início do código html --> <head> <!— cabeçalho --> <title> <!— título --> </title> <!— final do título --> </head> <!— final do cabeçalho --> <body> <!— corpo do site --> </body> <!— final do corpo do site --> </html> <!— final do código html--> 1.6 O Arquivo index.htm Normalmente, o arquivo index.htm é o arquivo default dentro de um diretório. Quando indicamos um endereço (link) e nãoespecificamos um arquivo dentro de um diretório, o browser procura pelo arquivo index.html. Se esse arquivo não existir, o browserapresentará uma listagem dos arquivos contidos naquele diretório, o que pode não ser nosso desejo. Por exemplo, o endereço de um site pode ser http://www.meusite.com.br/meu_diretorio/index.html. Se digitar no browser somente http://www.meusite.com.br/meu_diretorio/, o browser procurará naquele servidor("meusite.com.br") o arquivo index.html dentro do diretório "meu_diretorio" mesmo que eu não tenha especificado isso quando eudigitei o endereço. Porém, se o arquivo index.html tiver sido deletado ou for inexistente, o browser não abrirá nenhum outro arquivo,mas exibirá uma lista de todos os arquivos e diretórios contidos no diretório "meu_diretorio". Profª Ana Carolina Jaskulski http://anacarol.blog.br anaschneider@gmail.com
  13. 13. 13 2 Elementos Estruturais <html atributos> ... </html> É o comando de abertura e fechamento do documento HTML. Todos os demais comandos devem ser envolvidos por ele. version= "versão" informa a versão do HTML usado. lan="idioma" <html lang="en-us"> O corpo do arquivo... </html> No exemplo acima estou declarando que o arquivo HTML está no idioma inglês Americano. Os idiomas diferem de muitasmaneiras quanto à aparência impressa: tipos de caracteres, fluxo direcional e uma infinidade de peculiaridades principalmente nosidiomas orientais. dir= "rtl| ltr" Determina a direção do fluxo do texto: RTL da direita para a esquerda, Ltr da esquerda para a direita. <html lang="HE" Dire="RTL"> Essa é uma página formatada para o Hebraico. </html> Visualização: rtl (observe que a barra de rolagem vertical passou para o lado esquerdo): Visualização dir.= "Ltr" <head atributos> ... </head> Profª Ana Carolina Jaskulski http://anacarol.blog.br anaschneider@gmail.com

×