Comandos HTML

SERVIÇO PÚBLICO FEDERAL MINISTÉRIO DA EDUCAÇÃO CENTRO FEDERAL DE EDUCAÇÃO TECNOLÓGICA DE MINAS GERAIS UNIDADE DE ENSINO DESCENTRALIZADA DE DIVINÓPOLIS

ÍNDICE ANALÍTICO TAG > tag ___________ ______________________ ______________________ ______________________ _______________________ ____________ 4 TAG < !DOCTYPE> tag_______________ ________________________________ __________________________________ ___________________ __4 TAG tag___________ _______________________ ______________________ _____________________ _____________________ ________________ ______5 TAG tag ________ __________________ __________________ _________________ __________________ _________________ _____________ _____7 TAG nym> tag__________________________ ___________________________________________________ ____________________________ ___8 TAG ss> tag________________________ _________________________________________________ _______________________________ ______8 TAG tag______________ __________________________ ________________________ _________________________ __________________ _____9 TAG > tag_________________________________________________________ 10 TAG > tag_________________________________________________________ 11 TAG nt> tag t ag________________ _____________________________ ____________________________ ________________________ _________ 12 TAG tag t ag_____________ _________________________ _______________________ ________________________ _____________________ ________ 12 TAG te> tag_________________ __________________________________ ________________________________ _________________ __13 TAG tag ta g____________ ______________________ ____________________ _____________________ _____________________ _____________ ___14 TAG n> tag___________________________________________ _______________________________________________________ ____________ 15 TAG n> tag t ag_________________ ___________________________________ ____________________________________ ____________________15 TAG tag__________________ _________________________________ _________________________________ ______________________ ____16 TAG tag_____________________________________________ __________________________________________________________ _____________ 16 TAG oup> tag_____________________________________________________ 18 TAG

tag ta g____________ _______________________ ______________________ _______________________ _______________________ _____________19 TAG tag_____________________________________________ __________________________________________________________ _____________ 19 TAG tag_________________________ _________________________________________________ _________________________________ _________ 20 TAG
tag_____________________________________________ __________________________________________________________ _____________ 20 TAG
tag ___________________________________________________________ 21 TAG
tag ___________________________________________________________ 21 TAG > < cite> tags ______ ____________ ______22 TAG > tag _____________ ________________________ _____________________ _____________________ ____________________ _________ 23 TAG tag________________________________ _________________________________________________________ _________________________ 23 TAG tag____________ ________________________ __________________________ __________________________ __________________ ______ 24 TAG tag ta g___________ ______________________ _____________________ ______________________ ______________________ ____________25 TAG t> tag____________________ _______________________________________ _________________________________ ______________ 26 TAG tag____________ ________________________ __________________________ __________________________ __________________ ______ 27 TAG < h1> a tags ___________________________________________________ 27 Este é um cabeça cabeçalho lho 1______________________________ ____________________________________________________ ______________________28 TAG tag__________ _____________________ _____________________ ____________________ ___________________ _________________ ________ 28 TAG tag ________ __________________ ___________________ __________________ _________________ _________________ ____________ ___29 TAG me> tag_______________________________________________________ 29 TAG tag______________ ______________________________ ______________________________ ___________________________ _____________ 30 TAG tag___________________________________ ________________________________________________________ _____________________ 31 TAG tag_____________________________________________ __________________________________________________________ _____________ 33 TAG tag____________ ________________________ __________________________ __________________________ __________________ ______ 34 TAG nd> tag_______________________________________________________ 34 TAG tag_____________ ____________________________ ____________________________ ___________________________ __________________ ____35 TAG < link> tag__________________ _______________________________________ _______________________________________ __________________ 36 TAG tag_________________________________________________________ 38 TAG tag ta g_______ _____________ ______________ ______________ _____________ ______________ ______________ _____________ ________ __39 TAG <meta> tag t ag____________ ________________________ __________________________ __________________________ __________________ ______ 39 TAG <nofr ames> tag__________ ____________________ ____________________ ___________________ ___________________ _____________ ___40 TAG <noscript> <noscri pt> tag ta g________ ________________ ________________ ________________ ________________ ________________ _____________ _____41 TAG <object> <obje ct> tag t ag___________ ______________________ _____________________ ______________________ ______________________ ____________42 TAG <ol> tag ___________________________________________________________ 43 TAG <optg <optgroup> roup> tag_____________________________________________________ 44 TAG <optio < option> n> tag________________________ _______________________________________________ _______________________________ ________ 45 TAG tag___________ _______________________ _______________________ ______________________ ______________________ ______________ ___46 TAG <pre> tag__________________________________________________________ 46 TAG <q> tag___________ _______________________ _______________________ ______________________ ______________________ ______________ ___47 TAG <s> and <strik <strike> e> tags _____________________ ________________________________________________ ___________________________48 TAG <scri <script> pt> tag________________________________________________________ 48 TAG <selec <select> t> tag________________________________________________________ 49 TAG <spa n> tag ____________ ______________________ ____________________ _____________________ _____________________ _____________ ___50 TAG <styl <style> e> tag_________________________________________________________ 51 TAG and a nd tags ta gs____________________ ________________________________________ ___________________________ _______ 52 TAG <table> <ta ble> tag____________ ________________________ __________________________ __________________________ __________________ ______ 52 TAG <tbod <tbody> y> tag________________________________________________________ 53 TAG <td> tag ___________________________________________________________ 55 TAG <textarea> <textar ea> tag ________ ________________ ________________ ________________ ________________ ________________ _____________ _____56 TAG <tfoot> <tfoot > tag ________ __________________ ___________________ __________________ _________________ _________________ ____________ ___57 UnED Divinópolis Sallum Prof. William 2 TAG <h1> < h1> a <h6> tags ___________________________________________________ 27 Este é um cabeça cabeçalho lho 1______________________________ ____________________________________________________ ______________________28 TAG <hr> tag__________ _____________________ _____________________ ____________________ ___________________ _________________ ________ 28 TAG <html> <html > tag ________ __________________ ___________________ __________________ _________________ _________________ ____________ ___29 TAG <ifra <iframe> me> tag_______________________________________________________ 29 TAG <img> tag______________ ______________________________ ______________________________ ___________________________ _____________ 30 TAG <input> tag___________________________________ ________________________________________________________ _____________________ 31 TAG <ins> tag_____________________________________________ __________________________________________________________ _____________ 33 TAG <label> <la bel> tag____________ ________________________ __________________________ __________________________ __________________ ______ 34 TAG <lege <legend> nd> tag_______________________________________________________ 34 TAG <li> <l i> tag_____________ ____________________________ ____________________________ ___________________________ __________________ ____35 TAG <link> < link> tag__________________ _______________________________________ _______________________________________ __________________ 36 TAG <map> tag_________________________________________________________ 38 TAG <menu> tag ta g_______ _____________ ______________ ______________ _____________ ______________ ______________ _____________ ________ __39 TAG <meta> <met a> tag t ag____________ ________________________ __________________________ __________________________ __________________ ______ 39 TAG <noframes> <nofr ames> tag__________ ____________________ ____________________ ___________________ ___________________ _____________ ___40 TAG <noscript> <noscri pt> tag ta g________ ________________ ________________ ________________ ________________ ________________ _____________ _____41 TAG <object> <obje ct> tag t ag___________ ______________________ _____________________ ______________________ ______________________ ____________42 TAG <ol> tag ___________________________________________________________ 43 TAG <optg <optgroup> roup> tag_____________________________________________________ 44 TAG <optio < option> n> tag________________________ _______________________________________________ _______________________________ ________ 45 TAG tag___________ _______________________ _______________________ ______________________ ______________________ ______________ ___46 TAG <pre> tag__________________________________________________________ 46 TAG <q> tag___________ _______________________ _______________________ ______________________ ______________________ ______________ ___47 TAG <s> and <strik <strike> e> tags _____________________ ________________________________________________ ___________________________48 TAG <scri <script> pt> tag________________________________________________________ 48 TAG <selec <select> t> tag________________________________________________________ 49 TAG <spa n> tag ____________ ______________________ ____________________ _____________________ _____________________ _____________ ___50 TAG <styl <style> e> tag_________________________________________________________ 51 TAG and a nd tags ta gs____________________ ________________________________________ ___________________________ _______ 52 TAG <table> <ta ble> tag____________ ________________________ __________________________ __________________________ __________________ ______ 52 TAG <tbod <tbody> y> tag________________________________________________________ 53 TAG <td> tag ___________________________________________________________ 55 TAG <textarea> <textar ea> tag ________ ________________ ________________ ________________ ________________ ________________ _____________ _____56 TAG <tfoot> <tfoot > tag ________ __________________ ___________________ __________________ _________________ _________________ ____________ ___57 UnED Divinópolis Sallum Prof. William 2 TAG <th> tag___________________________________________________________ 59 TAG <thea <thead> d> tag________________________________________________________ 60 TAG <title> <t itle> tag______________ ______________________________ ______________________________ ___________________________ _____________ 61 TAG <tr> tag_______________________ ______________________________________________ ____________________________________ _____________ 62 TAG <tt> <big> <sma ll> tags t ags___________ ______________________ ______________________ ________________ _____63 TAG tag_____________ ____________________________ ____________________________ ___________________________ __________________ ____64 TAG <ul> tag_______ _____________ ____________ _____________ ____________ ____________ _____________ _____________ _____________ ________ __ 64 UnED Divinópolis Sallum Prof. William 3 SERVIÇO PÚBLICO FEDERAL MINISTÉRIO DA EDUCAÇÃO CENTRO FEDERAL DE EDUCAÇÃO TECNOLÓGICA DE MINAS GERAIS UNIDADE DE ENSINO DESCENTRALIZADA DE DIVINÓPOLIS TAG  tag Definição e Utilização A tag de comentário é usada para inserir um comentário no código fonte. O comentário será ignorado pelo browser. Esta tag é muito útil quando necessária a cdompreenção do código posteriormente. Pode-se, também, armazenar informações específicas no comentário. Exemplo Fonte Saída <!—Isto é um comentário--> Isto é um parágrafo normal Isto é um parágrafo normal TAG <!DOCTYPE> tag Definição e Utilização A declaração <!DOCTYPE> é a primeira linha do programa, antes da tag <html>. Esta tag informa ao browser sobre se o documento utiliza as especificações HTML ou XHTML. HTML HTML 4.01 especifica três tipo de documentos: Strict (restrito), Transitional (transitório), e Frameset (configurações). HTML Strict DTD Utilizado quando se precisa limpar tags, organizando a apresentação. Utilizado junto com Cascading Style Sheets (CSS): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML Transitional DTD O Transitional DTD inclui atributos de apresentação e elementos que o consórcio W3C espera transportar para uma folha de estilo. Este tipo é utilizado para apresentar características HTML’s quando alguns browser não suportam Cascading Style Sheets (CSS): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Frameset DTD O tipo Frameset DTD deverá ser utilizado com documentos com Framenser. O Frameset DTD é tal qual o Transitional DTD com exceção do elemento de frameset que substitui o elemento de corpo: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> XHTML XHTML 1.0 especifica três tipo de documentos: Strict (restrito), Transitional (transitório), e Frameset (configurações). XHTML Strict DTD Use este DTD se precisar limpar tags, organizando a apresentação. Utilizado junto com Cascading Style Sheets (CSS): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> XHTML Transitional DTD O Transitional DTD inclui atributos de apresentação e elementos que o consórcio W3C espera transportar para uma folha de estilo. Este tipo é utilizado para apresentar características HTML’s quando alguns browser não suportam Cascading Style Sheets (CSS): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> XHTML Frameset DTD Utilizado quando se necessita utilizar frames! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> Para constatar que se escreveu um documento SHTML válido, com um DTD correto, pode-se linkar a página XHTML a um validador XHTML. TAG <a> tag Definição e Utilização A tag <a> define uma âncora. Uma âncora pode ser usada em duas possibilidades: 1. 2. Para se crier um link para um outro documento utilizando o atributo href Para crier um bookmark - marcador de áginas dentro do documento usando o atributo name ou id Tipos e Notas UnED Divinópolis Sallum Prof. William 5 Nota: Uma pagina lincada é normalmente visializada na janela do browser ativo, a menos que se especifique outra. Exemplo Fonte Saída Linkando ao CEFETMG: <a href="http://www.cefetmg.br" rel="nofollow"> CEFETMG</a> Linkando ao CEFETMG: CEFETMG Abrindo uma nova janela CEFETMG: CEFETMG Abrindo uma nova janela CEFETMG: <a href="http://www. cefetmg.br " target="_blank" rel="nofollow">CEFETMG</a> Atributos Opcionais DTD indica em qual tipo de documento o atributo é permitido. S=Strict, T=Transitional, e F=Frameset. Atributo charset coords Valor character_encoding Se shape="rect" então coords="left,top,right,bottom " Descrição DTD Especifica o cacarcter que codifica a URL Especifica as coordenadas corespondentes às formas da região da imagem mapeada. STF STF A URL correspondente ao link. Especifica a linguagem básica da URL Nomeia uma âncora. Usado para criar uma marca no documento. Especifica a relação entre o documento atual e a URL designada. STF STF STF se shape="circ" então coords="centerx,centery,radius " se shape="poly" então coords=" x1,y1,x2,y2,..,xn,yn " href hreflang name URL language_code section_name rel alternate designates stylesheet start next prev contents index glossary copyright chapter section subsection appendix help bookmark alternate designates stylesheet start next prev contents index glossary rev UnED Divinópolis Sallum STF Especifica a relação entre a URL designada e o STF documento atual. Prof. William 6 shape target copyright chapter section subsection appendix help bookmark rect rectangle circ circle poly polygon _blank _parent _self _top Define o tipo de região a ser definida para mapeamento na tag da atual area. STF Como abrir a URL desejada: TF • • • _blank - a URL será aberta em uma nova janela _self – a URL sera aberta na mesma janela onde foi clickada _parent - a URL sera aberta na janela anterior _top - a URL sera aberta de forma maximizada Especifica o tipo de MIME (Multipurpose Internet Mail Extensions) da URL • type mime_type STF Atributos Padrões id, class, title, style, dir, lang, xml:lang, tabindex, accesskey Atributos Eventuais onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup TAG <abbr rel="nofollow"> tag Definição e Utilização Indica uma forma abreviada, como " Inc "., etc. ". Marcando as abreviações pode-se obter informação úteis dos browsers, sistemas de tradução e máquinas de procura-indexadas. Tipos and Notas Tipo: Em alguns browser o atributo title pode ser usado para mostrar a versão completa da expressão quando o mouse se encontrar em cima da abreviação. Exemplo Fonte Saída <abbr title="Centro Federal de Ensino CEFET Tecnológico" rel="nofollow">CEFET</abbr> Atributos Padrões id, class, title, style, dir, lang, xml:lang UnED Divinópolis Sallum Prof. William 7 TAG <acronym rel="nofollow"> tag Definição e Utilização A tag <acronym rel="nofollow"> determina o começo de um acrônimo, como “WWW”. Marcando os acrônimos pode-se obter informação úteis dos browsers, sistemas de tradução e máquinas de procuraindexadas Tipos e Notas Tipo: Em alguns browser o atributo title pode ser usado para mostrar a versão completa da expressão quando o mouse se encontrar em cima da abreviação Exemplo Fonte Saída <acronym title="World Wide Web" rel="nofollow">WWW</acronym> WWW Atributos Padrões id, class, title, style, dir, lang, xml:lang TAG <address rel="nofollow"> tag Definição e Utilização A tag <address rel="nofollow"> determina começo de um endereço. Deve ser usado para definer endereços, assinaturas, ou autorias de documentos. Tipos e Notas Nota: O endereço normalmente e feito em italico. Alguns browsers adicionam uma linha de quebra antes e depois do elemento endereço, Mas quebras de linhas dentro do texto devem ser inseridas por você mesmo. Exemplo Fonte <address rel="nofollow"> José Silva Rua das flores Brasil </address> Saída José Silva Rua das flores Brasil Atributos Padrões id, class, title, style, dir, lang, xml:lang Atributos Eventuais onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup UnED Divinópolis Sallum Prof. William 8 TAG <applet rel="nofollow"> tag Definição e Utilização Define um applet embutido. Tipos e Notas Nota: Para Incluir applets, se possível, use o elemento de objeto. Atributos Requeridos DTD indica em qual DTD que o atributo é permitido. S=Strict, T=Transitional, e F=Frameset. Atributo Valor Descrição DTD height width pixels pixels Define a altura do applet Define a largura do objeto TF TF Atributos Opcionais Atributo Valor Descrição DTD align Define o alinhamento de texto do applet TF alt left right top bottom middle baseline texttop absmiddle absbottom text TF archive URL code codebase URL URL hspace name pixels unique_name object name title text vspace pixels Um texto alternativo a ser exibido se o browser suporta applets mas não pode executar este applet Uma URL para o applet quando está parado em um arquivoJava ou ZIP Uma URL que aponta para a classe do applet Indica a URL base do applet se o atributo código é relativo Define o espaçameno horizontal do applet Define um nome único para o applet (a ser usado em script) Define o nome do recurso que contem a representação serial do applet Informação adicional a ser mostrada na ponta da ferramenta Define o espaçamento vertical do applet TF TF TF TF TF TF TF TF Atributos Padrões id, class, title, style, dir, lang, xml:lang Atributos Eventuais accesskey, tabindex, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup UnED Divinópolis Sallum Prof. William 9 TAG <area rel="nofollow"> tag Definição e Utilização Define uma região de uma imagem mapeada. Tipos e Notas Este elemento já se encontra dentro da tag <map>. Nota: O atributo usemap em <image> refere-se ao atributo id ou name no <map>. Exemplo Fonte Saída Click em um dos planetas: Click on one of the planets: <img src ="planetas.gif" width="145" height="126" alt="Planetas" usemap ="#planetamapa" /> <map id ="planetamapa" name="planetamapa"> <area shape ="rect" coords ="0,0,82,126" href ="sol.htm" target ="_blank" alt="Sun" / rel="nofollow"> <area shape ="circle" coords ="90,58,3" href ="mercurio.htm" target ="_blank" alt="Mercury" / rel="nofollow"> <area shape ="circle" coords ="124,58,8" href ="venus.htm" target ="_blank" alt="Venus" / rel="nofollow"> </map> Atributos Requeridos DTD indica em qual DTD que o atributo é permitido. S=Strict, T=Transitional, e F=Frameset. Atributo Valor Descrição DTD alt text Especifica um texto alternative para a área STF DTD Atributos Opcionais Atributo Valor Descrição coords se shape="rect" então coords="left,top,right,bottom" Especifica as coordenadas para a STF area clickavel se shape="circ" então coords="centerx,centery,radius" href se shape="poly" então coords="x1,y1,x2,y2,..,xn,yn" URL nohref true UnED Divinópolis Sallum STF Especifica a URL desejada da área Exclue uma area de uma imagem STF Prof. William 10 shape target false rect rectangle circ circle poly polygon _blank _parent _self _top mapeada Define a forma de uma área STF Como abrir a URL desejada: TF • • • • _blank - a URL será aberta em uma nova janela _self – a URL sera aberta na mesma janela onde foi clickada _parent - a URL sera aberta na janela anterior _top - a URL sera aberta de forma maximizada Atributos Padrões id, class, title, style, dir, lang, xml:lang, tabindex, accesskey Atributos Eventuais onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur TAG <base> tag Definição e Utilização O elemento base especifica a URL base para todos os links na página. Tipos e Notas Nota: A tag <base> deve ser inserida dentro do elemento head. Exemplo Suponha que o endereço absoluto da imagem seja: <img src="http://www.cefetmg.br/imagens/logo.gif" /> Agora, ao inserir a tag <base>, o qual especifica a URL base para todos os links na página, deverá ficar assim: <head> <base href="http://www. cefetmg.br/imagens/" /> </head> Isto feito, para se inserir imagens na página, conforme o exemplo acima, sera necessário apenas especificar o endereço relative que o browser identificar como URL completa: "http://www. cefetmg.br/imagens/logo.gif", ficando assim: UnED Divinópolis Sallum Prof. William 11 <img src="logo.gif" /> Atributos Requeridos DTD indica em qual DTD que o atributo é permitido. S=Strict, T=Transitional, e F=Frameset. Atributo Valor Descrição DTD href URL Especifica a URL a ser usada como URL base para os links na página STF Descrição DTD Onde abrir todos os links na página. Este atributo pode ser anulado usando o atributo desejado em cada link. TF Atributos Opcionais Atributo target Valor _blank _parent _self _top • • • • _blank – todos os links serão abertos em nova janela _self – todos os links serão abertos na mesma janela em que foram clickados _parent – todos os links serão abertos na janela anterior _top – todos os links serão abertos em janela maximizada TAG <basefont> tag Definição e Utilização Define uma fonte base. Atributos Opcionais DTD indica em qual DTD que o atributo é permitido. S=Strict, T=Transitional, e F=Frameset. Atributo Valor color rgb(x,x,x) Especifica a cor do texto. #xxxxxx colorname list_of_fontnames Especifica a fonte a ser usada. default_text_size Tamanho de fonte para elemento de fonte. (a number from 1 to 7) face size Descrição DTD TF TF TF Atributos Padrões id, class, title, style, dir, lang, xml:lang TAG <bdo> tag Definição e Utilização O elemento bdo anula a direção padrão do texto. UnED Divinópolis Sallum Prof. William 12 Exemplo Fonte Saída <bdo dir="rtl">Este é um texo escrito Este é um texto escrito da direta para a esquerda da direta para a esquerda</bdo> Atributos Requeridos DTD indica em qual DTD que o atributo é permitido. S=Strict, T=Transitional, e F=Frameset. Atributo Valor Descrição DTD dir ltr rtl Define a direção do texto STF Atributos Padrões id, class, title, style, dir, lang, xml:lang TAG <blockquote> tag Definição e Utilização A tag <blockquote> define o começo de uma citação longa. Tipos e Notas Nota: O elemento blockquote cria spaços em branco em ambos os lados do texto. Exemplo Fonte Saída Aqui se inicia uma longa citação: <blockquote> aqui está uma longa citação aqui está uma longa citação aqui está uma longa citação aqui está uma longa citação aqui está uma longa citação aqui está uma longa citação </blockquote> Aqui se inicia uma longa citação: aqui está uma longa citação aqui está uma longa citação aqui está uma longa citação aqui está uma longa citação aqui está uma longa citação Atributos Opcionais DTD indica em qual DTD que o atributo é permitido. S=Strict, T=Transitional, e F=Frameset. Atributo Valor Descrição DTD cite URL URL citação, se é escolhido da web STF Atributos Padrões id, class, title, style, dir, lang, xml:lang Atributos Eventuais onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup UnED Divinópolis Sallum Prof. William 13 TAG <body> tag Definição e Utilização O elemento body define o corpo do documento. Ele contem todo o conteúdo do documento (como textos, imagens, cores, gráficos, etc.). Exemplo <html> <head> </head> <body> Aqui se encontra todo o corpo do documento...... </body> </html> Atributos Opcionais DTD indica em qual DTD que o atributo é permitido. S=Strict, T=Transitional, e F=Frameset. Atributo Valor Descrição DTD alink rgb(x,x,x) #xxxxxx colorname file_name rgb(x,x,x) #xxxxxx colorname rgb(x,x,x) #xxxxxx colorname rgb(x,x,x) #xxxxxx colorname rgb(x,x,x) #xxxxxx colorname Especifica a cor do link ativo. TF Define uma imagem para usar como fundo. A cor de fundo do documento. TF TF Especifica a cor de todos os links no documento. TF Especifica a cor do texto no documento. TF Especifica a cor do link visitado. TF background bgcolor link text vlink Atributos Padrões id, class, title, style, dir, lang, xml:lang TAG tag Definição e Utilização A tag insere uma quebgra de linha. A tag é uma etiqueta vazia (Ela não tem nehuma etiqueta de finalização – o seguinte exemplo está incorreto: ). Tipos e Notas UnED Divinópolis Sallum Prof. William 14 Nota: Utilize a tag para entrar com linhas em branco, não para separar parágrafos. Exemplo Fonte Saída Este texto contem uma linha em Este texto contem branco uma linha em branco Atributos Padrões id, class, title, style TAG <button> tag Definição e Utilização Define um botão. Dentro de um elemento button pode-se colocar texto ou imagem (identificação do botão). Esta é a diferença entre este elemento o os botões criados com o elemento input . Exemplo Fonte Saída <button>Click aqui!</button> Click aqui! Atributos Opcionais DTD indica em qual DTD que o atributo é permitido. S=Strict, T=Transitional, e F=Frameset. Atributo Valor Descrição DTD disabled name type disabled button_name button reset submit some_value Desabilita o botão Especifica um nome único para o botão Define um tipo de botão STF STF STF value Especifica um valor inicial para o botão. O valor pode STF ser carregado de um script. Atributos Padrões id, class, title, style, dir, lang, xml:lang, accesskey, tabindex Atributos Eventuais onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup TAG <caption> tag Definição e Utilização UnED Divinópolis Sallum Prof. William 15 Este elemento define uma legenda de tabela. A tag <caption> deve ser iserida imediatamente após a tag <table>. Pode-se especificar somente uma legenda por tabela. Usualmente a legenda se encontrará centralizada acima da tabela. Exemplo Fonte Saída <table border="1"> <caption>Esta é uma legenda</caption> <tr> <td>Cel 1</td> <td>Cel 2</td> </tr> </table> Esta é uma legenda Cel 1 Cel 2 Atributos Opcionais DTD indica em qual DTD que o atributo é permitido. S=Strict, T=Transitional, e F=Frameset. Atributo Valor Descrição DTD align left right top bottom Como alinhar a legenda. TF Atributos Padrões id, class, title, style, dir, lang, xml:lang Atributos Eventuais onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup TAG <center> tag Definição e Utilização Centraliza horizontalmente o texsto inserido. Tipos e Notas Tipo: Use estilos CSS para centralizer textos! Atributos Padrões id, class, title, style, dir, lang, xml:lang Atributos Eventuais onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup TAG <col> tag UnED Divinópolis Sallum Prof. William 16 Definição e Utilização Define o valor de atributo para um ou mais colunas em uma mesa.somente pode-se usar este elemento dentro de uma tabela ou um colgroup (grupo de colunas) Tipos e Notas Nota: O elemento col é um elemento vazio que contem somente atributos. Para criar colunas, deve-se especificar o elemento td dentro do elemento td. Tipo: Este elemento também é utilizado quando se necessita especificar diferentes valores de atributos para uma coluna dentro de um colgroup (grupo de colunas). Sem um elemento col todos os valores herdarão todos os atributo estimados do colgroup. Exemplo Fonte Saída Este exemplo mostra um colgroup que tem três Este exemplo mostra um colgroup que tem três colunas de diferentes larguras: colunas de diferentes larguras: <table border="1"> 1 2 3 <colgroup span="3"> <col width="20"></col> <col width="50"></col> <col width="80"></col> </colgroup> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table> Atributos Opcionais DTD indica em qual DTD que o atributo é permitido. S=Strict, T=Transitional, e F=Frameset. Atributo align char charoff span valign width Valor right left center justify char character pixels % number top middle bottom baseline % pixels relative_length Descrição DTD Define o alinhamento horizontal do conteúdo da célula STF na coluna da tabela Define um character para usar alinhar texto. (use com STF ="char") Define um alinhamento balanceado para o primeiro STF caracter Define o número de colunas de <col> que se deve STF medir Define o alinhamento vertical do conteúdo na célula STF da cdoluna da tabela. Define a largura da coluna. STF Nota: O atributo de largura pode ser nulo configurando em <colgroup> Atributos Padrões UnED Divinópolis Sallum Prof. William 17 id, class, title, style, dir, lang, xml:lang Atributos Eventuais onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup TAG <colgroup> tag Definição e Utilização Define grupos de colunas de tabelas. Com este elemento, pode-se agrupar colunas para formatação. Este elemento e válido somente dentro da tag <table>. Tipos e Notas Nota: O elemento colgroup é um elemento vazio que contem atributos somente. Para criar colunas, deve-se especificar o elemento td dentro do elemento tr. Exemplo Este exemplo cria uma tabela com quarto colunas, com as primeiras três colunas em um colgroup, e a última coluna no Segundo colgroup. Fonte Saída <table border="1"> <colgroup span="3" style="color:#FF0000;"> </colgroup> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </table> 1 2 3 4 Atributos Opcionais DTD indica em qual DTD que o atributo é permitido. S=Strict, T=Transitional, e F=Frameset. Atributo align char charoff span valign Valor right left center justify char character pixels % number top middle bottom baseline UnED Divinópolis Sallum Descrição DTD Define o alinhamento horizontal nos grupos de colunas STF Define um character para ser usado no alinhamento do texto (use com align="char") Define um alinhamento balanceado para o primeiro character Define o número de colunas que <colgroup> deve medir Define o alinhamento vertical do conteúdo do grupo de colunas STF Prof. William STF STF STF 18 width % pixels relative_length Define a largura do grupo de colunas STF Nota: O atributo de largura pode ser nulo configurando em <col>! Atributos Padrões id, class, title, style, dir, lang, xml:lang Atributos Eventuais onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup TAG <dd> tag Definição e Utilização A tag <dd> define a descrição de um termo na lista de definição. Exemplo Fonte Saída <dl> <dt>Café</dt> <dd>Bebida quente escura</dd> <dt>Leite</dt> <dd>Bebida fria branca</dd> </dl> Café Leite Bebida quente escura Bebida fria branca Atributos Padrões id, class, title, style, dir, lang, xml:lang Atributos Eventuais onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup TAG <del> tag Definição e Utilização Define o texto que foi apagado no documento. Tipos e Notas Tipo: Usado juntamente com a tag <ins> para descrever atualizações e modificações no documento. Exemplo Fonte Saída Uma duzia são <del>20</del> 12 peças Uma dúzia são 12 peças UnED Divinópolis Sallum Prof. William 19 Atributos Opcionais DTD indica em qual DTD que o atributo é permitido. S=Strict, T=Transitional, e F=Frameset. Atributo Valor Descrição DTD cite URL STF datetime YYYYMMDD Define uma URL para outro documento que explica por que o texto foi apagado ou foi inserido Define a data e a hora que o texto foi apagado STF Atributos Padrões id, class, title, style, dir, lang, xml:lang Atributos Eventuais onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup TAG <dir> tag Definição e Utilização A tag <dir> define uma lista. Tipos e Notas Tipo: Use o stilo CSS para definer o tipo de lista! Exemplo Fonte Saída <dir> <li>html</li> <li>xhtml</li> </dir>   html xhtml Atributos Padrões id, class, title, style, dir, lang, xml:lang Atributos Eventuais onclick, ondblclick, onfocus, onblur, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup TAG <div> tag Definição e Utilização A tag <div> define uma divisão/seção em um documento. Exemplo Fonte Saída Isto é um texto Isto é um texto UnED Divinópolis Sallum Prof. William 20 <div style="color:#FF0000;"> <h4>Este é um cabeçalho em uma seção div </h4> Este é um parágrafo em uma seção div </div> Este é um cabeçalho em uma seção div Este é um parágrafo em uma seção div Atributos Opcionais DTD indica em qual DTD que o atributo é permitido. S=Strict, T=Transitional, e F=Frameset. Atributo align Valor left right center justify Descrição DTD Como alinhar o texto em um elemento div. TF Atributos Padrões id, class, title, style, dir, lang, xml:lang Atributos Eventuais onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup TAG <dl> tag Definição e Utilização A tag <dl> define uma lista de definição. Exemplo Fonte Saída <dl> <dt>Café</dt> <dd>Bebida quente escura</dd> <dt>Leite</dt> <dd>Bebida gelada branca</dd> </dl> Café Leite Bebida quente escura Bebida gelada branca Atributos Padrões id, class, title, style, dir, lang, xml:lang Atributos Eventuais onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup TAG <dt> tag Definição e Utilização A tag <dt> define o início do termo na lista de definição. UnED Divinópolis Sallum Prof. William 21 Exemplo Fonte Saída <dl> <dt>Café</dt> <dd>Bebida quente escura</dd> <dt>Leite</dt> <dd>Bebida gelada branca</dd> </dl> Café Leite Bebida quente escura Bebida gelada branca Atributos Padrões id, class, title, style, dir, lang, xml:lang Atributos Eventuais onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup TAG <dfn> <code> <samp> <kbd> <var> <cite> tags Definição e Utilização Os seguintes elementos são todos os elementos de frases. Com eles é possível alcançar efeitos mais ricos para as folhas de estilo. <dfn> <code> <samp> <kbd> <var> <cite> Enfatiza texto Enfatiza fortemente texto Define um termo de definição Define texto de código de computador Define exemplo de código de computador Define texto de teclado Define variáveis Define citações Exemplo Fonte enfatiza texto Texto forte <dfn>Definição de termo</dfn> <code>Texto código de computador </code> <samp>Exemplo texto código comput.</samp> <kbd>Texto de teclado</kbd> <var>variável</var> <cite>Citação</cite> Saída Enfatiza texto Texto forte Definição de termo Texto código de computador Exemplo texto código computador Texto de teclado Variável Citação Atributos Padrões id, class, title, style, dir, lang, xml:lang Atributos Eventuais onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup UnED Divinópolis Sallum Prof. William 22 TAG <fieldset> tag Definição e Utilização O elemento fieldset desenha uma caixa em torno dos elementos do conteúdo. Exemplo Fonte Saída <fieldset> Altura <input type="text" size="3" /> Largura <input type="text" size="3" /> </fieldset> Altura Largura Atributos Padrões id, class, title, style, dir, lang, xml:lang Atributos Eventuais accesskey, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup TAG tag Definição e Utilização A tag especifica a fonte, o seu tamanho e a cor da fonte do texto. Exemplo Fonte Saída Isto é um texto! Isto é um texto! Isto é um texto! Isto é um texto! Isto é um texto! Isto é um texto! Atributos Opcionais DTD indica em qual DTD que o atributo é permitido. S=Strict, T=Transitional, e F=Frameset. Atributo Valor Descrição DTD color rgb(x,x,x) #xxxxxx colorname Define a cor do texto do elemento font. TF UnED Divinópolis Sallum Prof. William 23 face size list_of_fontnames Define a fonte do texto no elemento font. A number from 1 to Define o tamanho do texto no elemento font. 7. If basefont is specified you can specify a number from -6 to 6 TF TF Atributos Padrões id, class, title, style, dir, lang, xml:lang TAG <form> tag Definição e Utilização O elemento form cria um formulário para entradas. Um formulário pode conter textfields, checkboxes, radio-buttons e outros objetos. Formulários são usados para se passer os dados do usuário para uma URL. Exemplo Fonte Saída <form action="formuario.asp" method="get"> Nome.......: sobrenome: Nome: <input type="text" name= "nome" value="José" /> Sobrenome: <input type="text" name="sobrenome" value="Silva" /> <input type="submit" value="Confirma" /> Se clicar no botão Confirma, pode-se enviar as entradas para uma nova página chamada formulario.asp. </form> Se clicar no botão Confirma pode-se enviar as entradas para uma nova página chamada formulario.asp. Atributos Requeridos DTD indica em qual DTD que o atributo é permitido. S=Strict, T=Transitional, e F=Frameset. Atributo Valor Descrição DTD action URL Uma URL que define onde enviar os dados quando o botão confirma for pressionado STF DTD Atributos Opcionais Atributo Valor Descrição accept Lista de contenttypes accept-charset charset_list enctype mimetype Uma lista separada por vírgula contendo tipos que o STF servidor processa neste formulário e envia corretamente A lista separada por virgule de possíveis conjuntos de STF caracteres para o formulário de dados. O falor padrão é "unknown" O tipo de linguagem de sinais usado para codificar o STF UnED Divinópolis Sallum Prof. William 24 method get post conteúdo do formulário O método HTTP para envio de dados à URL. O padrão STF é get. method="get": Este método envia o conteúdo do formulário pela URL: URL?name=value&name=value. Nota: Se os valores do formulário contem caracteres não-ASCII ou exceder 100 caracteres DEVE-SE usar method="post". method="post": Este método envia o conteúdo do name target form_name _blank _self _parent _top formulário para o corpo da página requerida. Nota: A maioria dos browsers está desabilitado a pedidos de post. Define um nome único para o formulário Onde abrir a URL desejada. • • • • TF TF _blank - a URL desejada se abrirá em nova janela _self – a URL desejada se abrirá na mesma janela em que foi cliclada _parent - a URL desejada se abrirá na janela anterior _top – a URL desejada se abrirá numa janela maximizada Atributos Padrões id, class, title, style, dir, lang, xml:lang TAG <frame> tag Definição e Utilização Define uma sub-janela (uma moldura). Exemplo Fonte Saída <a href="planetas.htm" target="_blank" rel="nofollow">Veja o Veja o resultado desta página resultado desta página</a> O código fonte em "planetas.htm": <html> <frameset cols = "25%, 25%,*"> <frame src ="venus.htm" /> <frame src ="sol.htm" /> <frame src ="mercurio.htm" /> </frameset> </html> Atributos Opcionais DTD indica em qual DTD que o atributo é permitido. S=Strict, T=Transitional, e F=Frameset. UnED Divinópolis Sallum Prof. William 25 Atributo Valor Descrição DTD frameborder marginheight pixels marginwidth pixels name frame_name noresize noresize scrolling yes no auto URL Especifica se mostra ou não a borda ao redor da moldura Uma URL para uma descrição longa dos conteúdos das molduras. Usado por browsers que não suportam molduras Define as margens superiors e inferiores de uma moldura Define as margens esquerdas e direitas de uma moldura Define um nome único para a moldura (a ser usado em scripts) Quando definido como noresize o usuário não pode alterar o tamanho da moldura Determina a barra de rolagem F longdesc 0 1 URL src Define a URL do arquivo que sera mostrado na moldura F F F F F F F Atributos Padrões Somente permitidos em XHTML 1.0 Frameset DTD!! id, class, title, style TAG <frameset> tag Definição e Utilização O elemento frameset define um conjunto de molduras. É usado para organizer múltiplas janelas. Cada moldura um documento separadamente. Em seu uso mais simples, o elemento de frameset declara quantas colunas ou linhas haverão no frameset. Você tem que usar o atributo cols ou as rows. Exemplo Fonte Saída <a href="planetas.htm" target="_blank" rel="nofollow">Veja o resultado Veja o resultado desta página desta página</a> O código fonte em "planetas.htm": <html> <frameset cols = "25%, 25%,*"> <frame src ="venus.htm" /> <frame src ="sol.htm" /> <frame src ="mercurio.htm" /> </frameset> </html> Atributos Opcionais DTD indica em qual DTD que o atributo é permitido. S=Strict, T=Transitional, e F=Frameset. Atributo Valor Descrição DTD cols pixels % Define o número e tamanho de colunas em um frameset F UnED Divinópolis Sallum Prof. William 26 rows * pixels % * Define o número e tamanho de linhas em um frameset F TAG <head> tag Definição e Utilização O elemento head pode conter informações sobre o documento. O browser não mostra o "cabeçalho de informação " para o usuário. As seguintes tags podem estar na seção do cabeçalho: <base>, <link>, <meta>, <script>, <style>, and <title>. Tipos e Notas Deve-se especificar um título para o documento! Exemplo Fonte <html> <head> <title>Título do documento</title> </head> <body> ... ... ... </body> </html> Atributos Opcionais DTD indica em qual DTD que o atributo é permitido. S=Strict, T=Transitional, e F=Frameset. Atributo Valor Descrição DTD profile URL A space separated list of URL's that contains meta data information about the page STF Atributos Padrões dir, lang, xml:lang TAG <h1> a <h6> tags Definição e Utilização As tags <h1> a <h6> definem cabeçalhos. <h1> define largo cabeçalho. <h6> define pequeno header. UnED Divinópolis Sallum Prof. William 27 Exemplo Fonte Saída <h1> Este é um cabeçalho 1</h1> <h2> Este é um cabeçalho 2</h2> <h3> Este é um cabeçalho 3</h3> <h4> Este é um cabeçalho 4</h4> <h5> Este é um cabeçalho 5</h5> <h6> Este é um cabeçalho 6</h6> Este é um cabeçalho 1 Este é um cabeçalho 2 Este é um cabeçalho 3 Este é um cabeçalho 4 Este é um cabeçalho 5 Este é um cabeçalho 6 Atributos Opcionais DTD indica em qual DTD que o atributo é permitido. S=Strict, T=Transitional, e F=Frameset. Atributo align Valor left center right justify Descrição DTD Especifica o alinhamento do texto no cabeçalho TF Atributos Padrões id, class, title, style, dir, lang, xml:lang TAG <hr> tag Definição e Utilização A tag <hr> inseri uma linha horizontal. Exemplo Fonte Saída Isto é um texto <hr /> Isto é um texto Isto é um texto Isto é um texto Atributos Opcionais DTD indica em qual DTD que o atributo é permitido. S=Strict, T=Transitional, e F=Frameset. Atributo Valor Descrição DTD align center left right noshade Specifies the alignment of the horizontal rule. Deprecated. Use styles instead TF noshade size width pixels % pixels UnED Divinópolis Sallum When set to true the rule should render in a solid TF color, when set to false the rule should render in a two-color "groove". Deprecated. Use styles instead Specifies the thickness (height) of the horizontal rule. TF Deprecated. Use styles instead Specifies the width of the horizontal rule Deprecated. TF Prof. William 28 % Use styles instead Atributos Padrões id, class, title, style, dir, lang, xml:lang TAG <html> tag Definição e Utilização Estes elementos informam ao browser que este é um documento HTML. Exemplo <html> <head> </head> <body> ... ... ... </body> </html> Atributos Requeridos DTD indica em qual DTD que o atributo é permitido. S=Strict, T=Transitional, e F=Frameset. Atributo Valor Descrição DTD xmlns http://www.w3.org/1999/xhtml Defines the XML namespace attribute STF Atributos Padrões dir, lang, xml:lang TAG <iframe> tag Definição e Utilização O elemento iframe cria em uma janela um outro documento. Exemplo Fonte Saída <iframe src ="/default.asp" width="100%"> </iframe> UnED Divinópolis Sallum Prof. William 29 Atributos Opcionais DTD indica em qual DTD que o atributo é permitido. S=Strict, T=Transitional, e F=Frameset. Atributo Valor Descrição DTD align Especifica como alinhar o iframe em torno do texto TF Especifica se mostra ou não a borda da janela TF Define a altura do iframe TF longdesc left right top middle bottom 1 0 pixels % URL marginheight marginwidth name pixels pixels frame_name scrolling yes no auto URL pixels % frameborder height src width Uma URL para uma grande descrição do conteudo do TF da janela Define as margens superiors e inferiors do iframe TF Define as magens direita e esquerda do iframe TF Especifica um nome único para o iframe (para uso em TF scripts) Define brarra de rolagem TF A URL do documento mostrado no iframe Define a largura do iframe TF TF Atributos Padrões id, class, title, style TAG <img> tag Definição e Utilização O elemeno img define uma imagem. Exemplo Fonte Saída <img src="irado.gif" alt="Irado" /> Atributos Requeridos DTD indica em qual DTD que o atributo é permitido. S=Strict, T=Transitional, e F=Frameset. Atributo Valor Descrição DTD alt src text URL Define uma pequena definição para a imagem A URL da imagem para exibir STF STF Atributos Opcionais Atributo Valor Descrição DTD align top bottom Especifica o alinhamento do imagem em torno do texto. TF UnED Divinópolis Sallum Prof. William 30 hspace middle left right pixels pixels % pixels ismap URL longdesc URL usemap URL vspace pixels width pixels % border height Define uma borda em torno da imagem Define a altura de uma imagem TF STF Define espaços em branco dos lados direito e esquerdo da imagem. Define a imagem como um mapa de imagem de do lado do servidor Uma URL para um documento que contem uma grande descrição da imagem. Define a imagem como um mapa de imagem do lado do cliente. Visualiza as tags <map> e <area rel="nofollow"> para delinear o trabalho. Define espaços em branco no topo e no rodapé da imagem. Configura a largura de uma imagem. TF STF STF STF TF STF Atributos Padrões id, class, title, style, lang, xml:lang TAG <input> tag Definição e Utilização A tag <input> define o início de um campo de entrada onde o usuário pode entrar com dados. Tipos e Notas Nota: O elemento input é vazio e contem somente atributos. Tipo: Use o elemento label para definer um rótulo para o controle de formulário. Exemplo Fonte <form action="formulario.asp" method="get"> Nome: <input type="text" name="nome" value="José" /> Sobrenome: <input type="text" name="sobrenome" value="Silva" /> <input type="submit" value="confirma" /> Saída Nome: Sobrenome: Se você cliclar no botão “Confirma”, Você enviará a entrada para uma nova página denominada formulario.asp. </form> Se você cliclar no botão “Confirma”, Você enviará a entrada para uma nova página denominada formulario.asp. UnED Divinópolis Sallum Prof. William 31 Atributos Opcionais DTD indica em qual DTD que o atributo é permitido. S=Strict, T=Transitional, e F=Frameset. Atributo Valor Descrição DTD accept list_of_mime_types Uma lista separada por víruglas do tipo MIME que indica o tipo de arquivo de transferência STF Nota: Usado somente com type="file" align alt left right top texttop middle absmiddle baseline bottom absbottom text Define o alinhamento do texto que segue a imagem. TF Nota: Usado somente com type="image" Define um texto alternative para a imagem. STF Nota: Usado somente com type="image" checked checked Indica qual o elemento de entrada deve ser verificado STF na primeira carga. Nota: Usado com type="checkbox" e type="radio" disabled disabled Disabilita o elemento de entrada quando da primeira STF de modo a impossbilitar ao usuário selecionar ou alterar. Nota: Não pode ser usado com type="hidden" maxlength number Defines the maximum number of characters allowed in a text field. STF Nota: usado somente com type="text" name field_name Define um nome único para o elemento de entrada. STF Nota: Este atributo é requerido com type="button", readonly readonly type="checkbox", type="file", type="hidden", type="image", type="password", type="text", e type="radio" Indica que o valor deste campo não pode ser modificado. STF Nota: Usado somente com type="text" size number_of_char Define o tamanho do elemento de entrada. STF Nota: Cannot be used with type="hidden" src URL Define a URL da imagem de exibição. STF Nota: Usado somente com type="image" type button checkbox file hidden image password radio reset UnED Divinópolis Sallum Indica o tipo do elemento de entrada. O valor padrão STF é "text" Prof. William 32 value submit text value Para buttons, reset buttons e submit buttons: Define o texto no botão. STF Para image buttons: Define o resultado simbólico do campo passado para um script. para checkboxes e radio buttons: define o resultado do elemento de entrada quando clicado. O resultado é enviado para URL de formuário. Para hidden, password, e text fields: Define o valor padrão do elemento. Nota: Não pode ser usado com type="file" Nota: Este atributo é requerido com type="checkbox" e type="radio" Atributos Padrões id, class, title, style, dir, lang, xml:lang Atributos Eventuais tabindex, accesskey, onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup TAG <ins> tag Definição e Utilização Define a inserção de um texto. Tipos e Notas Tipo: Use este juntamente com a teag <del> para descrever atualizações e modificações para um documento. Exemplo Fonte Saída a dozen is <del>20</del> <ins>12</ins> pieces! a dozen is 12 pieces! Atributos Opcionais DTD indica em qual DTD que o atributo é permitido. S=Strict, T=Transitional, e F=Frameset. Atributo Valor Descrição DTD cite URL datetime YYYYMMDD Uma URL para outro documento que explica o porque STF o texto foi inserido. Define a data e hota que o texto foi inserido. STF Atributos Padrões UnED Divinópolis Sallum Prof. William 33 id, class, title, style, dir, lang, xml:lang Atributos Eventuais onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup TAG <label> tag Definição e Utilização Define um rótulo para um controle. Tipos e Notas Nota: O atributo "for" atribui um rótulo a um outro elemento. Configure o valor do atributo "for" igual ao valor do atributo "id" do respective elemento. Exemplo Fonte Saída Teste clicando nos rótulos de texto: Teste clicando nos rótulos de texto: <form name="input" action=""> Macho <input type="radio" name="sexo" Fêmea id="macho" /> <label for="macho">Macho</label> <input type="radio" name="sexo" id="femea" /> <label for="femea">Fêmea</label> </form> Atributos Opcionais DTD indica em qual DTD que o atributo é permitido. S=Strict, T=Transitional, e F=Frameset. Atributo Valor Descrição DTD for id_of_another_field Define qual elemento do formulário é o rótulo for. Configura um ID de um elemento do formulário. STF Nota: Se este atributo não é especificado, o rótulo é associado com seus conteúdos. Atributos Padrões id, class, title, style, dir, lang, xml:lang Atributos Eventuais accesskey, onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup TAG <legend> tag Definição e Utilização UnED Divinópolis Sallum Prof. William 34 O elemento legend define um título para o campo de configuração. Exemplo Fonte Saída <fieldset> <legend>Informação:</legend> Altura: <input type="text" size="3" /> Peso: <input type="text" size="3" /> </fieldset> Informação: Altura: Peso: Atributos Opcionais DTD indica em qual DTD que o atributo é permitido. S=Strict, T=Transitional, e F=Frameset. Atributo Valor Descrição DTD align top bottom left right Determina o alinhamento para o conteúdo do campo TF de configuração. Alinhamento no topo é o padrão. Atributos Padrões id, class, title, style, dir, lang, xml:lang Atributos Eventuais accesskey, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup TAG <li> tag Definição e Utilização A tag <li> define o início de uma listagem de itens. A tag <li> é usada como lista numerada ou não numerada (<ul>). Tipos e Notas Tip: Utilize styles para definer o tipo de lista . Exemplos Fonte <ol> <li>Café</li> <li>Chá</li> </ol> <ul> <li>Café</li> <li>Chá</li> </ul> Saída 1. Café 2. Cá • Café • Chá Atributos Opcionais UnED Divinópolis Sallum Prof. William 35 DTD indica em qual DTD que o atributo é permitido. S=Strict, T=Transitional, e F=Frameset. Atributo Valor type A Especifica o tipo de lista. a I i 1 disc square circle number_of_list_item Valor value Descrição DTD TF TF Atributos Padrões id, class, title, style, dir, lang, xml:lang Atributos Eventuais onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup TAG <link> tag Definição e Utilização Este elemento define o relacionamento entre dois documentos linkados. Tipos e Notas Nota: O elemento link é um elemento vazio, ele contem somente atributos. Nota: Este elemento só paparece no cabeçalho mas pode aparecer qualquer número de vezes. Exemplo Como utilizar a tag <link> para ligar a uma folha de estilo externa: <head> <link rel="stylesheet" type="text/css" href="theme.css" /> </head> Atributos Opcionais DTD indica em qual DTD que o atributo é permitido. S=Strict, T=Transitional, e F=Frameset. Atributo Valor Descrição charset charset href URL Define a codificação dos caracteres da URL destino. O STF valor padrão é "ISO-8859-1" A URL destino. STF UnED Divinópolis Sallum DTD Prof. William 36 hreflang media rel rev target language_code screen tty tv projection handheld print braille aural all alternate appendix bookmark chapter contents copyright glossary help home index next prev section start stylesheet subsection alternate appendix bookmark chapter contents copyright glossary help home index next prev section start stylesheet subsection _blank _self _top _parent Define a linguagem para a URL destino. Especifica em qual dispositivo o documento sera mostrado. screen tty Para um computador de tela não paginada. Para dispositivos de pontos fixos tipo character a character (como teletipos, terminais, ou dispositivos com capacidade de visualização limitada) tv Para um dispositivo do tipo TV (baixa resolução e limitada varredura de tela) projection Para projetores handheld Para dispositivos portáteis (tela pequena) e.x.: Palmtop print Para pré-visialização de documentos a serem impressos. braille Para dispositivos de código Braille. aural Para sintetizadores de voz. all For all devices Define o relacionamento entre o documento atural e o STF documento destino. Define o relacionamento entre o documento destino e STF o documento atual. Como abrir a URL destino. • • • • UnED Divinópolis Sallum STF STF TF _blank – a URL destino sera apberta em uma nova janela _self – a URL destino será aberta na mesma janela em que foi clicada. _parent – a URL destino sera aberta na janela chamadora _top – a URL destino sera aberta em janela Prof. William 37 type MIME_type like: text/css text/javascript image/gif cheia Especifica o tipo MIME da URL destino STF Atributos Padrões id, class, title, style, dir, lang, xml:lang Atributos Eventuais onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup TAG <map> tag Definição e Utilização Define o mapa de imagem do lado do cliente. Um mapa de imagem é uma imagem com regiões clicáveis. Tipos e Notas Nota: A area do elemeno está sempre contido dentro do mapeamento. A área do elemento define a região do mapa de imagem. Nota: O atributo usemap em <img> referencia o atributo id ou o atributo name (dependente do browser) em <map>, então nos aldicionamos os atributosd id e name ao <map>. Exemplo Fonte Saída Click em um dos planetas: Click em um dos planetas: <img src ="planetas.gif" width ="145" height ="126" alt="Planetas" usemap ="#planetmap" /> <map id ="planetmap" name="planetmap"> <area shape ="rect" coords ="0,0,82,126" href ="sol.htm" target ="_blank" alt="Sol" / rel="nofollow"> <area shape ="circle" coords ="90,58,3" href ="mercurio.htm" target ="_blank" alt="Mercurio" / rel="nofollow"> <area shape ="circle" coords ="124,58,8" href ="venus.htm" target ="_blank" alt="Venus" / rel="nofollow"> </map> Atributos Requeridos DTD indica em qual DTD que o atributo é permitido. S=Strict, T=Transitional, e F=Frameset. UnED Divinópolis Sallum Prof. William 38 Atributo Valor Descrição DTD id unique_name Define uma única identificação para a tag map STF Atributos Opcionais Atributo Valor Descrição DTD name unique_name Define um único nome para a tag map STF Atributos Padrões class, title, style, dir, lang, xml:lang Atributos Eventuais tabindex, accesskey, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur TAG <menu> tag Definição e Utilização A tag <menu> defines uma lista de menu. Tipos e Notas Tip: Utilize estilos CSS para definer o tipo de lista! Exemplo Fonte <menu> <li>html</li> <li>xhtml</li> </menu> Saída   html xhtml Atributos Opcionais DTD indica em qual DTD que o atributo é permitido. S=Strict, T=Transitional, e F=Frameset. Atributos Padrões id, class, title, style, dir, lang, xml:lang Atributos Eventuais onclick, ondblclick, onfocus, onblur, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup TAG <meta> tag UnED Divinópolis Sallum Prof. William 39 Definição e Utilização O elemento <meta> fornece meta-informações sobre sua página, assim como descrições e palavras chaves para mecanismos de pesquisa. Tipos e Notas Nota: A tag <meta> sempre entra no elemento de cabeçalho. Nota: Metadata sempre é passado como name/value. Exemplos Define keywords for search engines: <meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, J avaScript, VBScript" /> Define uma descrição0 de da página web: <meta name="descrição" content="tutorial Web gratuito em HTML, CSS, XML e XHTML" /> Define a última versão da página: <meta name="revisado" content="Revisão em, 6/10/99" /> Atualiza a página a cada 5 minutos: <meta http-equiv="refresh" content="5" /> Atributos Requeridos DTD indica em qual DTD que o atributo é permitido. S=Strict, T=Transitional, e F=Frameset. Atributo Valor Descrição DTD content some_text Define a informação meta a ser associada com httpequiv ou name STF Atributos Opcionais Atributo Valor Descrição DTD http-equiv content-type expires refresh set-cookie author description keywords generator revised Conecta o atribuito content ao cabeçalho HTTP STF Conecta o atributo content ao name STF Define um formato a ser usado para interpretar o valor do atributo content STF name others scheme some_text Atributos Padrões dir, lang, xml:lang TAG <noframes> tag Definição e Utilização UnED Divinópolis Sallum Prof. William 40 O elemento noframes mostra texto em browsers que não manipula frames. O elemento noframes se encontra no elemento frameset. Tipos e Notas Nota: Se um browser manipula frames,ele não mostrará o texto no elemento noframes. Importante: Se adicionar a tag <noframes> a um frameset, você terá que incluir o texto entre as tags <body></body> Exemplo <frameset cols = "25%, 25%,*"> <noframes> <body>Your browser does not handle frames!</body> Atributos Padrões id, class, title, style, dir, lang, xml:lang Atributos Eventuais Não há. TAG ... ... VBScript: ... ... <script type="text/vbscript"> ... ... Atributos Padrões id, class, title, style, dir, lang, xml:lang Atributos Eventuais Não há. TAG

This text is in the THEAD
This text is in the TFOOT
This text is in the TBODY

This text is in the THEAD
This text is in the TFOOT
This text is in the TBODY

This text is in the THEAD
This text is in the TFOOT
This text is in the TBODY

Comandos HTML

Recommend Documents

< h1> a