Apostila de HTML (Microcamp)

PRINCIPAIS TAGS DE HTML E SEUS RESPECTIVOS ATRIBUTOS Estrutura Bsica <html> > Incio do Documento <head> > Incio
do Cabealho do Documento <title> > Incio do Ttulo do Documento Aqui entra o Ttulo do documento (Aparecer na barra superior do browser) </title> > Fim do Ttulo do Documento </head> > Fim do Cabealho do Documento <body> > Incio do Contedo do Documento Aqui entra todo o contedo que ser exposto pelo Browser... </body> > Fim do Contedo do Documento </html> > Fim do Documento ESTRUTURAO DA PGINA HTML <html>...</html> Atributo: No possui atributos Explicao: Indica que o documento presente um documento HTML. Deve englobar todos os demais TAGs. Exemplo: <html> ...todos os demais TAGs, textos, etc. </html> HEAD <head>...</head> Atributo: No possui atributos Explicao: Contm o cabealho do documento diversas informaes lgicas, isto , que no fazem parte do corpo do documento e portanto no sero exibidas diretamente. Exemplo: <head> ...diversos TAGs contendo informaes lgicas sobre o documento... </head>
Elementos presentes em HEAD TITLE <title>...</title> Atributo: No possui atributos Explicao: Contm o ttulo do documento. Muitos browsers utilizam o ttulo como forma de referenciar a pgina em uma lista de links teis criadas pelo usurio (conhecida como "Bookmarks" ou "Favorites"). Alm disso, exibem o ttulo como nome da janela em que a pgina visualizada. O Ttulo obrigatrio. No confunda o ttulo da pgina com o nome do arquivo gravado em disco. Exemplo: <title> XYZ Informtica </title> BODY <body>...</body> Explicao: Deve englobar toda a parte fsica do documento, isto , o que deve ser exibido pelo Browser. Atributos de BODY Atributo: BACKGROUND Explicao: Define uma imagem que ser utilizada como "fundo" da pgina. Caso a imagem tenha um tamanho inferior ao da pagina ela ser repetida diversas vezes de forma a cobrir o fundo do documento Exemplo: <body background="images/fundo.gif"> ...diversos TAGs, textos etc... </body> Atributo: BGCOLOR Explicao: Define a cor de fundo da pgina. Essa cor pode ser escrita atravs de cdigo (sem aspas) ou atravs do nome em ingls(com aspas). Exemplo: <body bgcolor="white"> Atributo: TEXT Explicao: Define a cor do texto da pgina Exemplo: <body text="black"> Atributo: LINK Explicao: Define a cor dos links ainda no visitados Exemplo: <body link="blue">
Atributo: VLINK Explicao: Define a cor dos links j visitados nos ltimos x dias onde x um valor definido pelo usurio em seu browser. Exemplo: <body vlink="purple"> Atributo: ALINK Explicao: Define a cor dos links no instante em que so clicados pelo usurio. Exemplo: <body alink="red"> Utilizao dos trs atributos: Exemplo: <body link="blue" vlink="purple" alink="red"> Atributo: BGPROPERTIES (Microsoft Internet Explorer) Explicao: Deve ter o valor "fixed". Indica que o fundo da pgina fixo, isto , no "rola" junto com o contedo da pgina. Exemplo: <body background="images/fundo.gif" bgproperties="fixed"> Atributo: LEFTMARGIN (Microsoft Internet Explorer) Explicao: Especifica uma quantidade de espao (em pixels) a ser deixada como margem esquerda do documento. Exemplo: <body leftmargin="20"> Atributo: TOPMARGIN (Microsoft Internet Explorer) Explicao: Especifica uma quantidade de espao (em pixels) a ser deixada como margem superior do documento. Exemplo: <body toptmargin="20"> Exemplo do Elemento BODY com todos os seus Atributos: <html> <head> <title>XYZ Informtica</title> </head> <body background="images/fundo.gif" link="blue" vlink="purple" alink="red" bgproperties="fixed" bgcolor="white text="black" topmargin="20" leftmargin="20"> <p><a href="http://www.xyz.com.br">Oi! Eu sou um link!</a></p> </body> </html>
Caracteres Especiais e Acentuao Seqncias de escape suportam caracteres ISO Latin1. Temos aqui uma tabela com as entidades mais utilizados em Portugus: Tabela de Caracteres Especiais e Acentuao
Caracter Entidade de Caracter " À Á Â Ã Ç É Ê Í Ó Ô Õ Ú Ü à á â ã ç é ê í ñ ó ô õ ú ü Entidade Numrica " " À Á Â Ã Ç É Ê Í Ó Ô Õ Ú Ü à á â ã ç é ê í ñ ó ô õ ú ü Descrio Tabulao Horizontal Espao no ignorvel Aspas A c/ crase A c/ acento agudo A c/ acento circunflexo A c/ til C cedilha (maisculo) E c/ acento agudo E c/ acento circunflexo I c/ acento agudo O c/ acento agudo O c/ acento circunflexo O c/ til U c/ acento agudo U c/ trema a c/ crase a c/ acento agudo a c/ acento circunflexo a c/ til c cedilha (minsculo) e c/ acento agudo e c/ acento circunflexo i c/ acento agudo n c/ til o c/ acento agudo o c/ acento circunflexo o c/ til u c/ acento agudo u c/ trema
Veja outras entidades numricas: Tabela de Caracteres Especiais e Acentuao

Caracter # $ % Entidade de Caracter Entidade Numrica # $ % Descrio Tralha Cifro Percente
Cores Atravs de Valores Hexadecimais As cores so definidas atravs de um valor hexadecimal de 6 algarismos, ou atravs de seus nomes. Os nomes padronizados so: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white e yellow. Estes nomes foram escolhidos por serem os nomes originais das cores suportadas pelas primeiras verses do MS-Windows. Alguns Browsers implementam outros nomes no padronizados.
Tabela de Cores Atravs de Valores Hexadecimais

Antiquewhite....... Aqua.................. Aquamarine........ Azure................. Beige.................. Bisque................ Black.................. Blanchedalmond Blue................... Blueviolet........... Brown................. Burlywood.......... Cadetblue........... Chatreuse........... Chocolate........... Coral.................. Carnflowerblue... Cornsilk.............. Crimson............. Cyan.................. Darkblue............. Darkcyan............ Darkgoldenrod.... Darkgray............ Darkgreen.......... Darkkhaki........... Darkmagenta...... Darkolivegreen... Darkorange........ Darkorchid.......... Darkred.............. Darksalmon........ Darkseagreen..... Darkslateblue..... Darkslategray..... Darkturquoise..... Darkviolet........... Deeppink............ Deepskyblue...... Dimgray............. Dodgerblue......... Firebrick............. Floralwhite.......... Forestgreen........ Fuchsia.............. Gainsboro.......... Ghostwhite......... Gold................... #FAEBD7 #00FFFF #7FFFD4 #F0FFFF #F5F5DC #FFE4C4 #000000 #FFEBCD #0000FF #8A2BE2 #A52A2A #DEB887 #5F9EA0 #7FFF00 #D2691E #FF7F50 #6495ED #FFF8DC #DC143C #00FFFF #00008B #008B8B #B8860B #A9A9A9 #006400 #BDB76B #8B008B #556B2F #FF8C00 #9932CC #8B0000 #E9967A #8FBC8F #483D8B #2F4F4F #00CED1 #9400D3 #FF1493 #00BFFF #696969 #1E90FF #B22222 #FFFAF0 #228B22 #FF00FF #DCDCDC #F8F8FF #FFD700 Goldenrod...................... Gray.............................. Green............................ Greenyellow................... Honeydew...................... Hotpink.......................... Indianred....................... Indigo............................ Ivory.............................. Khaki............................. Lavander....................... Lavanderblush............... Lawngreen..................... Lemonchiffon................. Lightblue........................ Lightcoral....................... Lightcyan....................... Lightgoldenrodyelloow... Lightgreen...................... Lightgray........................ Lightpink........................ Lightsalmon................... Lightseagreen................ Lightskyblue................... Lightslategray................ Lightsteelblue................ Lightyellow..................... Lime.............................. Limegreen..................... Linen............................. Magenta........................ Maroon.......................... Mediumaquamarine....... Mediumblue................... Mediumorchid................ Mediumpurple................ Mediumseagreen........... Mediumslateblue............ Mediumspringreen......... Mediumturquoise........... Mediumvioltred.............. Midnightblue.................. Mintcream...................... Mistyrose....................... Moccasin....................... Navajowhite................... Navy.............................. Oldlace.......................... #DAA520 #808080 #008000 #ADFF2F #F0FFF0 #FF69B4 #CD5C5C #4B0082 #FFFFF0 #F0E68C #E6E6FA #FFF0F5 #7CFC00 #FFFACD #ADD8E6 #F08080 #E0FFFF #FAFAD2 #90EE90 #D3D3D3 #FFB6C1 #FFA07A #20B2AA #87CEFA #778899 #B0C4DE #3FFFFE0 #00FF00 #32CD32 #FAF0E6 #FF00FF #800000 #66CDAA #0000CD #BA55D3 #9370DB #3CB371 #7B68EE #00FA9A #48D1CC #C71585 #191970 #F5FFFA #FFE4E1 #FFE4B5 #FFDEAD #000080 #FDF5E6 Olive..................... Olivedrab.............. Orange.................. Orangered............. Orchid................... Palegoldenrod....... Palegreen............. Paleturquoise........ Palevioletred......... Papayawhip.......... Peachpuff............. Peru...................... Pink...................... Plum..................... Powderblue........... Purple................... Red....................... Rsybrown.............. Royalblue.............. Saddlebrown......... Salmon................. Sandybrown.......... Seagreen.............. Seashell................ Sienna.................. Silver.................... Skyblue................. Slateblue............... Slategray.............. Snow..................... Springgreen.......... Steelblue............... Tan....................... Teal...................... Thistle................... Tomato................. Turquoise.............. Violet.................... Wheat................... White.................... Whitesmoke.......... Yellow................... Yellowgreen.......... #808000 #6B8E23 #FFA500 #FF4500 #DA70D6 #EEE8AA #98FB98 #AFEEEE #DB7093 #FFEFD5 #FFDAB9 #CD853F #FFC0CB #DDA0DD #B0E0E6 #800080 #FF0000 #BC8F8F #4169E1 #8B4513 #FA8072 #F4A460 #2E8B57 #FFF5EE #A0522D #C0C0C0 #87CEEB #6A5ACD #708090 #FFFAFA #00FF7F #4682B4 #D2B48C #008080 #D8BFD8 #FF6347 #40E0D0 #EE82EE #F5DEB3 #FFFFFF #F5F5F5 #FFFF00 #9ACD32
Comentrios !  Atributo: No possui atributos Explicao: Nada do que for escrito dentro deste TAG ser interpretado pelo browser. Comentrios so extremamente teis para facilitar a manuteno das pginas, que muitas vezes poder ser feita por uma pessoa diferente daquela que a escreveu pela primeira vez. Atravs dos comentrios, se explica o que se deseja com cada comando. Exemplo:  Exemplo: <!-========================================== = --> Exemplo: <html> <head> <title>XYZ Informtica</title> </head> <body>  <p><a href="http://www.xyz.com.br">Oi! Eu sou um link para o site da XYZ Informtica!</a></p> </body> </html> Visualizao pelo Browser: Oi! Eu sou um link para o site da XYZ Informtica! Ttulos / Subttulos Hn <hn>...</hn> Explicao: Indica que o texto influenciado uma "HEADER" (cabealho). Os cabealhos tm seis nveis de importncia, sendo o nvel "1" o mais importante e o nvel "6" o menos. Exemplo: <h1>Este o cabealho de nvel 1</h1> <h2>Este o cabealho de nvel 2</h2> <h3>Este o cabealho de nvel 3</h3> <h4>Este o cabealho de nvel 4</h4> <h5>Este o cabealho de nvel 5</h5> <h6>Este o cabealho de nvel 6</h6> Nota:
Veja os nveis de cabealho e o equivalente aos tamanhos da fonte. (h1 - 24 pt / h2 - 18 pt / h3 - 14 pt / h4 - 12 pt / h5 - 10 pt / h6 - 8 pt). Visualizao pelo Browser:
Este o cabealho de nvel 1

Atributos de Hn Atributo: ALIGN Explicao: Indica se o cabealho ser alinhado a esquerda (padro), centralizado ou direita, usando-se, respectivamente, as palavras "LEFT", "CENTER" e "RIGHT". Exemplo: <h1 align="left">Texto Um</h1> <h2 align="center">Texto Dois</h2> <h3 align="right">Texto Trs</h3>
Controles "Fsicos"de Formatao de Texto I <i>...</i> ou EM <em>...</em> Atributo: No possui atributos Explicao: Indica que o texto deve ser apresentado em itlico. Exemplo: <i>Este texto est em itlico</i> Exemplo: <em>Este texto tambm est em itlico</em> Visualizao pelo Browser: Este texto est em itlico B <b>...</b> ou STRONG <strong>...</strong> Atributo: No possui atributos Explicao: Indica que o texto deve ser apresentado em negrito. Exemplo: <b>Este texto est em negrito</b> Exemplo: <strong>Este texto tambm est em negrito</strong> Visualizao pelo Browser: Este texto est em negrito U <u>...</u> Atributo: No possui atributos Explicao: Indica que o texto deve ser apresentado sublinhado. Exemplo: <u>Este texto est sublinhado</u> Visualizao pelo Browser: Este texto est sublinhado STRIKE <strike>...</strike> Atributo: No possui atributos Explicao: Indica que o texto deve ser apresentado com um trao cortando-o. Exemplo: <strike>Este texto est strike !</strike> Visualizao pelo Browser: Este texto est strike ! SUB <sub>...</sub> Atributo: No possui atributos Explicao: Indica que o texto deve ser apresentado em subscrito. Exemplo: <sub>Este texto est subscrito</sub> Visualizao pelo Browser: Este texto est subscrito
SUP <sup>...</sup> Atributo: No possui atributos Explicao: Indica que o texto deve ser apresentado em sobrescrito. Exemplo: <sup> Este texto est subrescrito </sup> Visualizao pelo Browser: Este texto est subrescrito Controles de Fontes FONT <font>...</font> Explicao: Existem 7 tamanhos de fonte em HTML, numeradas de 1 a 7. O tamanho padro 3. As cores so definidas atravs de um valor hexadecimal de 6 algarismos, ou atravs de seus nomes. Caso o usurio no possua nenhuma das fontes listadas, ser usada uma fonte padro. Usualmente a fonte padro a Times New Romam. Exemplo: <font face="Times New Roman" size="5" color="#000000">Texto</font> Atributos de FONT Atributo: SIZE Explicao: Indica qual o tamanho de fonte que deve ser usado dentro de sua rea de influncia. Exemplo: <font size="5">Texto</font> Atributo: COLOR Explicao: Indica qual a cor da fonte dentro de sua rea de influncia Exemplo: <font color="#000000">Texto</font> <font color="black">Texto</font> Atributo: FACE Explicao: Determina a fonte (tipo de letra) a ser utilizada. Como valor deve ter uma lista de nomes de fontes separados por vrgula. Exemplo: <font face="Times New Roman">Texto</font> Exemplo: <font face="Verdana, Arial, Helvetica">Texto</font> Formatao de Pargrafos P <p>...</p>
Explicao: Indica que o texto influenciado um pargrafo, e possui um alinhamento prprio. Os browsers, habitualmente, deixam um espao vertical em branco de cerca de "uma linha" antes de cada pargrafo. Exemplo: <p>Esta a Home Page da XYZ Informtica. E este um exemplo de pargrafo.</p> Atributos de P Atributo: ALIGN Explicao: Indica se o pargrafo ser alinhado a esquerda (padro), centralizado, direita ou justificado usando-se, respectivamente, as palavras "LEFT", "CENTER", "RIGHT" e "JUSTIFY". Exemplo: <p align="center">Esta a Home Page da XYZ Informtica. E este um exemplo de pargrafo centralizado.</p> Quebra de Linha BR <br> Atributo: No possui atributos Explicao: Passa para a prxima linha. Exemplo: <p>Este texto ficar na mesma linha.<br> E este em outra linha.</p> Visualizao pelo Browser: Este texto ficar na mesma linha. E este em outra linha. O TAG Blockquote <blockquote>...</blockquote> Atributo: No possui atributos Explicao: Faz a margem comear mais dentro da pgina. O efeito deste TAG pode ser acumulado, obtendo assim margens maiores. Exemplo: <blockquote>Esta a Home Page da XYZ Informtica. E este um exemplo de margem visualizada pelo Browser.</blockquote> Visualizao pelo Browser: Esta a Home Page da XYZ Informtica. E este um exemplo de margem visualizada pelo Browser. O TAG PRE <pre>...</pre> Atributo: No possui atributos
Explicao: Usualmente o browser ignora os espaos em branco e as quebras de linha existentes no documento fonte, formatando o texto de acordo com o tamanho de sua janela. Com a utilizao deste TAG os espaos e as quebras de linha so honrados. O browser exibe o contedo de <pre> usando uma fonte diferente da usual. Exemplo: <pre> Esta a Home Page da XYZ Informtica. Aqui nos veremos:Treinamento Consultoria Representaes Solues Web </pre> O TAG CENTER <center>...</center> Atributo: No possui atributos Explicao: Centraliza o texto influenciado. o TAG <center> foi criado quando no havia outras formas de se centralizar os elementos na tela. Hoje faz parte da definio do HTML para que seja mantida a compatibilidade com pginas escritas no passado. Exemplo: <center> Esta a Home Page da XYZ Informtica. Este texto ser centralizado. </center> O TAG NOBR <nobr>...</nobr> Explicao: Impede que o texto em sua rea de influncia seja "quebrado", isto , dividido em mais de uma linha. Deve-se usar este TAG de forma cuidadosa. Normalmente o usurio no deseja ser obrigado a empregar a "scroll bar" para ler o contedo de uma pgina. Exemplo: <nobr>Este texto ficar na mesma linha ao visualiz-lo no browser. <nobr> Visualizao pelo Browser: Este texto ficar na mesma linha ao visualiz-lo no browser.
Listas Listas Ordenadas OL <ol>...</ol> Explicao: Indica o incio e o final de uma lista ordenada (numerada). Exemplo: <ol> <li> Treinamento </li> <li> Consultoria </li> <li> Desenvolvimento </li> <li> Manuteno </li> </ol> Visualizao pelo Browser: 1. Treinamento 2. Consultoria 3. Desenvolvimento 4. Manuteno Atributos de OL Atributo: START Explicao: Especifica o nmero do primeiro elemento da lista. Exemplo: <ol start="10"> <li> Treinamento </li> <li> Consultoria </li> <li> Desenvolvimento </li> <li> Manuteno </li> </ol> Visualizao pelo Browser: 10. Treinamento 11. Consultoria 12. Desenvolvimento 13. Manuteno
Atributo: TYPE Explicao: Define o tipo de numerao empregada na lista. Pode assumir os valores "1 (1, 2, 3, 4, etc.), "I" (I, II, III, IV, etc.), "i" (i, ii, iii, iv, etc.), "A" (A,B, ..., Z) ou "a" (a, b, ..., z). Exemplo: <ol type="A"> <li> Treinamento </li> <li> Consultoria </li> <li> Desenvolvimento </li> <li> Manuteno </li> </ol> Visualizao pelo Browser: A. Treinamento B. Consultoria C. Desenvolvimento D. Manuteno Elementos LI <li>. . . </li> LI <li> Explicao: Demarca os elementos de listas ordenadas e no ordenadas. Exemplo: <ol> <li> Treinamento </li> <li> Consultoria </li> <li> Desenvolvimento </li> <li> Manuteno </li> </ol> Visualizao pelo Browser: 1. Treinamento 2. Consultoria 3. Desenvolvimento 4. Manuteno
Atributos de LI Atributo: TYPE Explicao: Deve ser usado somente em listas no numeradas. Indica qual o smbolo a ser usado para demarcar o elemento. Exemplo: <ul type="square"> <li> Treinamento </li> <li type="disc"> Consultoria </li> <li> Desenvolvimento </li> <li> Manuteno </li> </ul> Visualizao pelo Browser: Treinamento Consultoria Desenvolvimento Manuteno Atributo: VALUE Explicao: Deve ser usado somente em listas numeradas. Altera a seqncia da numerao. Exemplo: <ol> <li> Treinamento </li> <li> Consultoria </li> <li value="15"> Desenvolvimento </li> <li> Manuteno </li> </ol> Visualizao pelo Browser: 1. Treinamento 2. Consultoria 15. Desenvolvimento 16. Manuteno Nota: Este TAG deve estar presente somente na rea de influncia dos TAGs <OL> (Listas Ordenadas) ou <UL> (Listas No Ordenadas). O texto presente em cada item da lista pode ser formatado normalmente. No entanto, no so permitidos "headers" (H1, H2, H3 etc.).
Listas No Ordenadas UL <ul>...</ul> Explicao: Indica o incio e o final de uma lista no numerada Exemplo: <ul> <li> Treinamento </li> <li> Consultoria </li> <li> Desenvolvimento </li> <li> Manuteno </li> </ul> Visualizao pelo Browser: Treinamento Consultoria Desenvolvimento Manuteno Atributo de UL Atributo: TYPE Explicao: Indica qual o smbolo deve ser usado para demarcar cada elemento da lista. Pode ser os valores "disc" ( ), "circle" () ou "square"(). Exemplo: <ul type="circle"> <li> Treinamento </li> <li> Consultoria </li> <li> Desenvolvimento </li> <li> Manuteno </li> </ul> Visualizao pelo Browser: Treinamento Consultoria Desenvolvimento Manuteno
Listas de Definio DL <dl>...</dl> Atributo: No possui atributos Explicao: Demarca os elementos de listas ordenadas e no ordenadas. Exemplo: <dl> <dt> Treinamento </dt> <dd> um departamento da XYZ Informtica. </dd> <dt> Consultoria </dt> <dd> um outro departamento! </dd> </dl> Visualizao pelo Browser: Treinamento um departamento da XYZ Informtica. Consultoria um outro departamento! Nota: So muito teis para estruturas do tipo "dicionrio", onde um termo citado e ento explicado. Na Web muito utilizada para listas de URLs e seus respectivos comentrios. DT <dt> Atributo: No possui atributos Explicao: Representa o termo definido, a ser explicado em <DD>. Exemplo: <dl> <dt> Treinamento </dt> <dd> um departamento da XYZ Informtica. </dd> <dt> Consultoria </dt> <dd> um outro departamento! </dd> </dl> Visualizao pelo Browser: Treinamento um departamento da XYZ Informtica. Consultoria um outro departamento!
Nota: No devem conter TAGs referentes a: HEADER, Pargrafo, Listas, Texto Pre-Formatado, Diviso, CENTER, BLOCKQUOTE, Formulrio, ISINDEX, Linha Horizontal ou Tabela. DD <dd> Atributo: No possui atributos Explicao: Representa a definio do termo presente em <DT>. No deve conter HEADERs. Exemplo: <dl> <dt> Treinamento </dt> <dd> um departamento da XYZ Informtica. </dd> <dt> Consultoria </dt> <dd> um outro departamento! </dd> </dl> Visualizao pelo Browser: Treinamento um departamento da XYZ Informtica. Consultoria um outro departamento!
Links Os pontos que ligam os hipertextos so chamados de hyperlinks, links ou ncoras de hipertexto. O TAG que indica a regio a ser tratada como um hyperlink o par <A> e </A> - "A" (anchor). Dentro desse TAG, na forma de atributo, colocada a referncia ao arquivo ligado. A referncia indica a URL do documento. Quando o usurio clicar sobre o trecho realado pela ncora de hipertexto, o arquivo ligado ser requisitado ao servidor e mostrado na janela do navegador. Geralmente o Browser apresenta os links em azul e sublinhados, mas como j vimos possvel alterar isso atravs dos parmetros opcionais do elemento <BODY>. A <a>...</a> Explicao: Indica a regio a ser tratada como hyperlink Exemplo: <a href="http://www.xyz.com.br">XYZ Informtica</a> Visualizao pelo Browser: XYZ Informtica Atributos de A Atributo: HREF Explicao: Define que sua rea de influncia um link. Exemplo: <p> Clique em <a href="http://www.xyz.com.br/cursos.htm">Cursos</a> para acessar a pgina dos Descritivos dos Cursos.</p> Visualizao pelo Browser: Clique em Cursos para acessar a pgina dos Descritivos dos Cursos. 11. Imagens IMG <img> Explicao: Este TAG exibe uma imagem na pgina. Atributos de IMG Atributo: SRC Explicao: Obrigatrio, indica a URL da imagem a ser exibida. Podem ser usadas URL absoluto (http://www.xyz.com.br/images/imagem.gif) ou URL relativo (/images/imagem.gif) Exemplo:
<img src="/images/imagem.gif"> Atributo: ALIGN Explicao: Determina o alinhamento da imagem em relao ao texto existente na mesma linha. Os valores vlidos so "TOP", "MIDDLE", "BOTTOM","LEFT" e "RIGHT". Exemplo: <img src="/images/imagem.gif" align="top"> Atributo: WIDTH Explicao: Determina a largura, em pixels, da imagem. Exemplo: <img src="/images/imagem.gif" width="600"> Atributo: HEIGHT Explicao: Determina a altura, em pixels, da imagem. Exemplo: <img src="/images/imagem.gif" height="60"> Atributo: BORDER Explicao: Determina a largura, em pixels, da imagem. Exemplo: <img src="/images/imagem.gif" border="2"> Atributo: HSPACE Explicao: Determina a quantidade de espao deixado em branco aos lados da imagem, de forma que ela no fique demasiadamente prxima dos outros elementos da pgina. Exemplo: <img src="/images/imagem.gif" hspace="10"> Atributo: VSPACE Explicao: Determina a quantidade de espao deixado em branco acima e abaixo da imagem. Exemplo: <img src="/images/imagem.gif" vspace="10"> Os atributos WIDTH e HEIGHT so extremamente importantes. Os browsers, tendo informaes sobre a altura e a largura das imagens, no precisam esperar que elas cheguem por inteiro para continuar a exibio do resto do documento. Alm disto, WIDTH e HEIGHT podem ser usados para distorcer imagens. Pode-se usar o atributo BORDER para se retirar a borda de um link (quando claro, este for uma imagem). No entanto, deve-se tomar cuidado para no confundir o usurio, pois este poder no perceber que a imagem tambm um link. 12. Formatos de Imagens
GIF (Graphics Interchange Format) e JPEG (Joint Photographic Experts Group) so os dois formatos grficos padres usados na Internet, cada formato tem suas vantagens e desvantagens, como analisado a seguir. Os dois formatos de imagens so bastante utilizados, mas possuem caractersticas diferentes. 12.1. Usando o GIF (Graphics Interchange Format) O GIF apresenta um bom rendimento no tamanho e qualidade em imagens com cores "limpas", sem muito detalhes. Possui suporte para imagens animadas e com partes "transparentes". Trabalha com cores indexadas, podendo representar um mximo de 256 cores. Armazena imagens com grandes reas planas (da mesma cor) de forma bastante eficiente. No possui nveis de compreenso, apesar de j ser naturalmente compactado (GIFs tem uma compresso padro). Podem ser entrelaadas. Uma imagem entrelaada (interlaced) pode ser vista medida que vai sendo carregada (melhorando a definio aos poucos). Pode-se definir uma das cores como sendo "transparente", permitindo que se veja o que est por trs. O recurso de transparncia muito interessante, pois permite criar a sensao de que as imagens no so todas retangulares. Permite a criao de animaes (GIFs Animados). O Princpio do GIF Animado o mesmo de um filme que vemos no cinema, ou seja, uma seqncia de imagens transmitida rapidamente, uma animao propriamente dita. Os anncios (chamados de banners) que se v na Web, na verdade so, GIFs Animados.
12.2. Usando o JPEG (Joint Photographic Experts Group) O JPEG melhor para imagens que apresentam muitos tons de cor. Este formato ideal para trabalhar com fotografias digitais e imagens complexas. Pode representar imagens com at 16 milhes de cores. Armazena imagens complexas de forma eficiente. Tem uma compresso varivel. Porm, como nem tudo perfeito, quanto mais voc comprime, maior ser a perda da qualidade. A compresso padro em torno de 33 (numa escala de 1 a 100), mas a ideal, s testando mesmo. Quanto maior o nmero, pior fica a qualidade. No possui o recurso de transparncia, portanto sempre aparecem retangulares na tela.
O entrelaamento pode ser conseguido utilizando o formato Progressive Rendered JPEG, uma nova verso criada para possibilitar um carregamento igual ao de um GIF entrelaado. Os Browsers de ltima gerao j entendem este formato numa boa, mas no os antigos. No permite a criao de animaes.
15. Tabelas Assim como as listas, no HTML existem elementos especficos para a criao e formatao de tabelas. O recurso de tabelas muito interessante e muito usado nas pginas Web. O conceito o mesmo conhecido usualmente: ela tem linhas e colunas, e na interseo delas esto as clulas. Na linguagem HTML voc pode inserir nas clulas tudo o que normalmente faz parte do corpo de um documento, como textos, links, imagens, listas e at outras tabelas. TABLE <table>...</table> Explicao: Indica o incio e o final de uma determinada tabela. Todas as demais marcas referentes a tabelas - linhas e clulas somente sero consideradas se includas entre <table> e </table>. <table> <tr> <td>Texto A</td> <td>Texto B</td> </tr> </table> Atributos de TABLE Atributo: BORDER Explicao: Se presente, a tabela apresenta bordas. Se for atributo o valor 0 (zero), no somente a tabela no apresentar bordas, como o espao usualmente reservado para bordas ser liberado, permitindo a confeco de tabelas mais compactas. Exemplo: <table border="4"> Atributo: CELLSPACING Explicao: Indica quanto espao, em pixels, deve ser inserido entre as clulas da tabela. Exemplo: <table cellspacing="10"> Atributo: CELLPADDING Explicao: Indica quanto espao, em pixels, deve ser inserido entre as bordas das clulas e seu contedo.
Exemplo: <table cellpadding="5"> Atributo: WIDTH Explicao: Indica a largura da tabela. Usa-se como medida o nmero de pixels desejado ou uma porcentagem da largura do documento. Exemplo: <table width="300"> Atributo: ALIGN Explicao: Indica a posio da tabela no documento. Pode assumir os valores "LEFT" ou "RIGHT", indicando, respectivamente, que a tabela deve estar a esquerda ou a direita do documento, e com o texto "fluindo" sua volta. Exemplo: <table align="center"> Atributo: BACKGROUND Explicao: Especifica uma imagem que ser utilizada como "background" da tabela. A imagem ser "TILED", isto , repetida de forma a cobrir todo o fundo da tabela. Exemplo: <table border background="imagem.gif"> Atributo: BGCOLOR Explicao: Especifica uma cor de fundo para a tabela. Exemplo: <table border bgcolor="yellow"> Atributo: BORDERCOLOR Explicao: Especifica uma cor para as bordas da tabela. Exemplo: <table border bgcolor="yellow" bordercolor="blue"> Atributo: BORDERCOLORLIGHT Explicao: Especifica uma das cores utilizadas para desenhar a borda com efeito tridimensional da tabela. Exemplo: <table border bgcolor="yellow" bordercolorlight="blue"> Atributo: BORDERCOLORDARK Explicao: Especifica uma das cores utilizadas para desenhar a borda com efeito tridimensional da tabela. Exemplo: <table border bgcolor="yellow" bordercolordark="blue"> Atributo: RULES Explicao: Indica quais linhas internas a tabela deve apresentar. Pode assumir os valores: "ROWS (somente as linhas horizontais)",
"COLS (somente as linhas verticais)", "NONE (nenhuma)" e "ALL (todas)". Exemplo: <table border bgcolor="yellow" rules="rows"> Atributo: FRAME Explicao: Indica quais bordas externas a tabela deve apresentar. Pode assumir os valores: "VOID (nenhuma)", "ABOVE (topo da tabela)", "BELOW (base da tabela) ", "HSIDES (topo e base da tabela)", "LHS (lado direito da tabela) ", "VSIDES (esquerda e direita da tabela)" e "BOX (todas)". Exemplo: <table border bgcolor="yellow" frame="below"> Todos os atributos de uma tabela so opcionais. Uma tabela padro no possui bordas e sua altura e largura so as mnimas necessrias para suportar seu contedo. TR <tr>...</tr> Explicao: Indica o incio e o final de uma determinada linha da tabela (Table Row). Uma linha composta de elementos. Exemplo: <table> <tr> <td>Texto A</td> <td>Texto B</td> </tr> </table> Atributos de TR Atributo: BGCOLOR Explicao: Define a cor de fundo de uma linha da tabela. Exemplo: <table> <tr bgcolor="red"> <td>Texto A</td> <td>Texto B</td> </tr> </table> TD <td>...</td> Explicao: Indica um elemento (clula) da tabela, vindo do ingls "Table Data". Os elementos contm os dados da tabela, sejam eles texto, links, imagens, etc. Exemplo: <table> <tr>
<td>Texto A</td> <td>Texto B</td> </tr> </table> Atributos de TD Atributo: ALIGN Explicao: Define se o contedo da clula estar alinhado a esquerda ("LEFT"), centralizado ("CENTER") ou a direita ("RIGHT"). Se omitido, o alinhamento fica esquerda. Exemplo: <table> <tr> <td align= center >Texto A</td> <td>Texto B</td> </tr> </table> Atributo: VALIGN Explicao: Define se o contedo da clula estar alinhado com seu topo ("TOP"), centralizado ("MIDDLE") ou com sua base ("BOTTOM"). Se omitido o alinhamento fica ao meio. Exemplo: <table> <tr> <td valign="middle">Texto A</td> <td>Texto B</td> </tr> </table> Atributo: WIDTH Explicao: Define a largura da clula. Pode ser expressa em pixels ou como uma porcentagem da largura total da tabela. Exemplo: <table> <tr> <td width="30 %"> Texto A</td> <td width="70 %"> Texto B</td> </tr> </table> Atributo: COLSPAN Explicao: Indica quantas respectiva clula deve ocupar. Exemplo: <table> <tr> "clulas de largura" (colunas) a
<td colspan="2">Texto A</td> </tr> <tr> <td>Texto B</td> </tr> </table> Atributo: ROWSPAN Explicao: Indica quantas "clulas de altura" (linhas) a respectiva clula deve ocupar. Exemplo: <table> <tr> <td rowspan="2">Texto A</td> <td>Texto B</td> </tr> <tr> <td>Texto C</td> </tr> </table>
Atributo: BACKGROUND Explicao: Define uma imagem como fundo de uma clula. Exemplo: <table> <tr> <td background="file:///c:\seta.gif">Texto A</td> <td>Texto B</td> <td>Texto C</td> </tr> </table> Atributo: BGCOLOR Explicao: Define a cor de fundo de uma determinada clula. Exemplo: <table> <tr> <td bgcolor="yellow">Texto A</td> <td>Texto B</td> <td>Texto C</td> </tr> </table> TH <th>...</th> Explicao: Indica um elemento da tabela. A nica diferena para "TD" que o elemento identificado como "HEADER" (cabealho) da tabela. Exemplo: <table> <tr> <th>Texto A</th> </tr> </table> Atributos de TH Explicao: Define se o contedo da clula estar alinhado a esquerda ("LEFT"), centralizado ("CENTER") ou a direita ("RIGHT"). Se omitido, o alinhamento fica centralizado.
Exemplo: <table> <tr> <th align="center">Texto A</th>
<th>Texto B</th> </tr> </table> Atributo: VALIGN Explicao: Define se o contedo da clula estar alinhado com seu topo ("TOP"), centralizado ("MIDDLE") ou com sua base ("BOTTOM"). Se omitido o alinhamento fica ao meio. Exemplo: <table> <tr> <th valign="middle">Texto A</th> <th>Texto B</th> </tr> </table> Atributo: WIDTH Explicao: Define a largura da clula. Pode ser expressa em pixels ou como uma porcentagem da largura total da tabela. Exemplo: <table> <tr> <th width="30 %"> Texto A</th> <th width="70 %"> Texto B</th> </tr> </table> Atributo: COLSPAN Explicao: Indica quantas "clulas respectiva clula deve ocupar. Exemplo: <table> <tr> <th colspan="2">Texto A</th> </tr> <tr> <th>Texto B</th> </tr> </table> de largura" (colunas) a
Atributo: ROWSPAN Explicao: Indica quantas "clulas de altura" (linhas) a respectiva clula deve ocupar. Exemplo: <table> <tr> <th rowspan="2">Texto A</th> <th>Texto B</th> </tr>
<tr> <th>Texto C</th> </tr> </table> Nota: Usualmente os Browsers exibem o contedo de <TH> em negrito e centralizado. CAPTION <caption>...</caption> Explicao: Define um ttulo (legenda) para a tabela. Exemplo: <table> <caption>Ttulo da Tabela</caption> <tr> <td>Texto A</td> <td>Texto B</td> </tr> </table> Atributos de CAPTION Atributo: ALIGN Explicao: Indica se o ttulo (legenda) deve ficar acima ou abaixo da tabela. Deve possuir o valor "TOP" ou "BOTTOM". Exemplo: <table> <caption align="bottom">Ttulo da Tabela</caption> <tr> <td>Texto A</td> <td>Texto B</td> </tr> </table> O ttulo no exibido "dentro" da tabela (visualmente). O TAG "CAPTION" deve estar contido entre os TAGs de abertura e fechamento da tabela, no entanto, fora de qualquer linha. Marquee (Microsoft Internet Explorer) MARQUEE <marquee>...</marquee> Explicao: O texto ou figura presente na rea de influncia deixa de ser esttico e passa a percorrer horizontalmente a janela do browser (ou sua frame). Exemplo: <marquee>
XYZ Informtica presta Servios de Desenvolvimento; Manuteno e Implantao de Sistemas; Consultoria; Treinamento; Suporte Tcnico e Solues Web. </marquee> Atributos de MARQUEE Atributo: ALIGN Explicao: Pode assumir os valores "TOP", "MIDDLE" e "DOWN". Define o comportamento da "MARQUEE" em relao ao texto a seu lado. Exemplo: <marquee align="top"> Atributo: BEHAVIOR Explicao: Indica o comportamento da "MARQUEE". Pode assumir os valores "SCROLL" (default), "SLIDE" e "ALTERNATE". Exemplo: <marquee behavior="alternate"> Atributo: DIRECTION Explicao: Define para que direo a "MARQUEE" deve correr. Pode assumir os valores "LEFT" (default) e "RIGHT". Exemplo: <marquee direction="right"> Atributo: LOOP Explicao: Especifica o nmero de rotaes que a "MARQUEE" deve executar. Os valores "INFINITE" e "-1" indicam um nmero infinito. Exemplo: <marquee loop="5"> Atributo: SCROLLAMOUNT Explicao: Indica o nmero de pixels de deslocamento do texto entre cada quadro de animao da "MARQUEE". Exemplo: <marquee scrollamount="15"> Atributo: SCROLLDELAY Explicao: Indica o nmero de milissegundos transcorridos entre cada quadro de animao da "MARQUEE". Exemplo: <marquee scrolldelay="10"> Atributo: WIDTH Explicao: Indica a largura do efeito "MARQUEE". Pode ser expressa em pixels ou porcentagem da janela. Exemplo: <marquee width="50%">
Atributo: HEIGHT Explicao: Indica a altura do efeito "MARQUEE". Pode ser expressa em pixels ou porcentagem da janela. Exemplo: <marquee height="30"> Atributo: BGCOLOR Explicao: Indica a cor de fundo da "MARQUEE". Cria um efeito de "tarja". Exemplo: <marquee bgcolor="yellow"> Atributo: HSPACE Explicao: Especifica a quantidade de espao deixado em branco aos lados da "MARQUEE". Exemplo: <marquee hspace="20"> Atributo: VSPACE Explicao: Especifica a quantidade de espao deixado em branco acima e abaixo da "MARQUEE". Exemplo: <marquee vspace="30">

Apostila de HTML (Microcamp)

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Apostila de HTML (Microcamp)

Uploaded by

Copyright:

Available Formats

PRINCIPAIS TAGS DE HTML E SEUS RESPECTIVOS ATRIBUTOS Estrutura Bsica <html> > Incio do Documento <head> > Incio

Veja outras entidades numricas: Tabela de Caracteres Especiais e Acentuao

Tabela de Cores Atravs de Valores Hexadecimais

Este o cabealho de nvel 1

Exemplo: <table> <tr> <th align="center">Texto A</th>

You might also like