HTML HyperText MarkUp Language

Transcrição

1 HTML HyperText MarkUp Language HTML é uma linguagem intrepretada para elaboração de layouts. O programa HTML (página Web) corresponde a um ficheiro de texto com extensão.htm ou.html. Os comandos da linguagem HTML chamam-se TAGS (etiquetas) e identificam-se no programa por se encontrarem entre os símbolos < e >. Exemplo: <html> As TAGS interagem sobre objectos formatando-os. Por isso, existe a necessidade de em algumas situações delimitar o bloco que se pretende formatar. Exemplo: <b>isto está em destaque</b> O interpretador de HTML ignora todo e qualquer comando ou parâmetro desconhecido. As fases de análise sintáctica e semântica do programa não são implementadas pelo interpretador. Desta forma, torna-se evidente que a correcção de erros fica inteiramente dependente do espirito critico do programador. Ambientes de Desenvolvimento HTML/XHTML 1

2 Estrutura básica de um programa HTML <html> <head> </head> <body> </body> </html> Na zona do cabeçalho (<head>) colocam-se definições auxiliares para a construção da página. Exemplo: <HEAD> <TITLE>Professional Web Design - WebTutor Directory</TITLE> </HEAD> Na zona do corpo (<body>) definem-se os constituintes da página bem como as suas formatações. Ambientes de Desenvolvimento HTML/XHTML 2

3 Tag <BODY> Esta etiqueta enquadra os objectos que constituem a página. BGCOLOR = cor de fundo da página; BACKGROUND = URL da imagem; TEXT = cor do texto; LINK = cor do hyperlink não visitado; VLINK = cor do hyperlink visitado; ALINK = cor do hyperlink activo; Tag <CENTER> Esta etiqueta permite centrar no écran os objectos que enquadrar. Exemplo: <center>texto centrado</center> Tags <BR> e <P> Estas etiquetas permitem inserir mudanças de linha. A <BR> insere uma mudança de linha, a <P> insere um parágrafo (2 mudanças de linha). Exemplo:... Texto1<br>Texto2<P>Texto3 Texto4... Ambientes de Desenvolvimento HTML/XHTML 3

4 FORMATAÇÃO DE TEXTO Tags <H1>,<H2>,<H3>,<H4>,<H5>,<H6> Estas etiquetas permitem formatar cabeçalhos segundo estilos pré definidos. O cabeçalho <H1> corresponde ao estilo de maior relevância enquanto o <H6> é o mais fraco. ALIGN = right center left; Exemplo: <h1 align= center >Cabecalho 1</h1> <h2 align= center >Cabecalho 2</h2> <h3 align= center >Cabecalho 3</h3> <h4 align= center >Cabecalho 4</h4> <h5 align= center >Cabecalho 5</h5> <h6 align= center >Cabecalho 6</h6> Ambientes de Desenvolvimento HTML/XHTML 4

5 FORMATAÇÃO DE TEXTO Tag <FONT> Esta etiqueta permite formatar a font do bloco de texto enquadrado. Necessita obrigatoriamente de pelo menos um dos seguintes parâmetros. FACE COLOR SIZE = nome da font (p.e.: Arial); = cor do texto; = (1,2,3,4,5,6,7) ± Exemplo: O teste é <font face= verdana color= red size= +1 >amanhã</font>. Tags <b>,<i>,<u> Estas etiquetas correspondem aos estilos físicos do texto. <b> <i> <u> - bold; - itálico; - sublinhado; Exemplo: <b><i><u>exemplo</u></i></b> Tag <blockquote> Esta etiqueta indenta o bloco que enquadra. Ambientes de Desenvolvimento HTML/XHTML 5

6 IMAGENS EM HTML Tag <IMG> Esta etiqueta permite colocar uma imagem na página Web. Não existe </img>. SRC ALT HEIGHT WIDTH HSPACE VSPACE BORDER ALIGN NAME USEMAP = URL da imagem (jpeg gif); = Texto descritivo; = Altura; = Largura; = Espaçamento horizontal; = Espaçamento vertical; = Espessura do bordo; = bottom middle top left right = nome do objecto (para scripting); = Associa um Image Map; <img src= imag.gif align= middle > texto <img src= imag.gif align= left > texto Ambientes de Desenvolvimento HTML/XHTML 6

7 TABELAS EM HTML Tag <table> Este comando enquadra a definição de uma tabela em HTML. Em HTML uma tabela é composta por linhas, e as linhas por células. BORDER = Espessura do bordo exterior; ALIGN = left center right; CELLSPACING = Espaçamento entre células; CELLPADDING = Espaço livre entre o bordo e o conteúdo da célula. WIDTH = Largura (pixeis percentagem); BGCOLOR = Cor de fundo; Tags <tr>,<th><td> A etiqueta <tr> engloba o conteúdo de uma linha; A etiqueta <th> permite definir os títulos das colunas; A etiqueta <td> permite definir o conteúdo das células; BORDER ALIGN VALIGN BGCOLOR WIDTH HEIGHT = Espessura do bordo respectivo; = left center rigth; = top middle bottom baseline = Cor de fundo; = Largura (pixeis); = Altura (pixeis); especificos para <td>: COLSPAN ROWSPAN = Número de colunas ocupadas; = Número de linhas ocupadas; Ambientes de Desenvolvimento HTML/XHTML 7

8 Exemplos de tabelas em HTML: 1. <table border=1> <tr><td>a</td><td>b</td><td>c</td></tr> <tr><td>d</td><td>e</td><td>f</td></tr> <tr><td>g</td><td>h</td><td>i</td></tr> </table> 2. <table border= 1 > <tr> <td colspan= 2 rowspan= 2 >A</td> <td>b</td> </tr> <tr><td >C</td></tr> <tr><td>d</td><td>e</td><td>f</td></tr> </table> Ambientes de Desenvolvimento HTML/XHTML 8

9 Tags <ul>,<ol>,<dt> LISTAS EM HTML Estes comandos permitem definir os vários tipos de listas do HTML <ul> - define uma lista não ordenada; <ol> - define uma lista ordenada; <dt> - cria uma lista de definições; Parâmetros da <ul>: TYPE = disk circle square; Parâmetros da <ol>: START = valor inicial; TYPE = 1 a A i I; 1 1,2,3,4,5,... a a,b,c,d,e,... A A,B,C,D,E,... i i,ii,iii,iv,v,... I I,II,III,IV,V,... Tags <li>,<dd> Estas etiquetas permitem inserir entradas nas listas atrás referidas. Para as listas ordenadas e não ordenadas usa-se a tag <li>, para as listas de definições utiliza-se <dd>. Ambientes de Desenvolvimento HTML/XHTML 9

10 Exemplos de LISTAS em HTML: 1. <ul> <li>cebolas</li> <li>batatas</li> <li>água</li> </ul> 2. <ol> <li>boavista</li> <li>fc Porto</li> <li>guimarães</li> <li>sl Benfica</li> </ol> 3. <dt>ad</dt> <dd>ambientes de Desenvolvimento</dd> <dt>lfa</dt> <dd>linguagens Formais e Automatos</dd> Ambientes de Desenvolvimento HTML/XHTML 10

11 HYPERLINKS Tag <A> Esta etiqueta permite estabelecer uma ligação a um objecto hipertexto (vulgarmente uma página). NAME HREF TARGET = nome do objecto (para scripting ou para funcionar como destino de um outro link); = URL do objecto destino; = nome da janela/frame onde o link será executado. Exemplos: <a href= >Sapo</a> <a name= cap1 ></a> <a href= #cap1 >Capítulo 1</a> <a href= amd.htm#cap1 >Capítulo 1</a> <a href= target= _blank >Novo</a> Ambientes de Desenvolvimento HTML/XHTML 11

12 IMAGE MAPS Image Maps são figuras que permitem ao utilizador aceder a diversos endereços internet consoante a zona da imagem que fôr seleccionada. Tag <IMG> SRC USEMAP = URL da imagem (jpeg gif); = Nome do mapa (#) ou do ficheiro que contem o mapa. Exemplos: <img src= desenho.gif usemap= #mapa > <img src= desenho.gif usemap= mapas/ma.map > Tag <MAP> Esta etiqueta enquadra as definições do mapa NAME = Nome do mapa; Tag <AREA> Permite definir as zonas do mapa SHAPE COORDS HREF NOHREF TITLE = rect circle poly default; = lista de coordenadas; = URL do objecto hipermédia; Especifica uma zona como não seleccionavel = Texto descritivo Ambientes de Desenvolvimento HTML/XHTML 12

13 Exemplo: <IMG SRC=" nitesky.jpg" USEMAP="#nitesky"> <MAP NAME="nitesky"> <AREA SHAPE="rect" COORDS="250,58,386,153" HREF=" TITLE="Vic and Bob"> <AREA SHAPE="circle" COORDS="199,44,40" HREF=" TITLE="Harry Hill"> <AREA SHAPE="polygon" COORDS="11,129,11,18,63,9,146,25,146,129" HREF=" TITLE="Fast Show"> <AREA SHAPE="default" NOHREF > </MAP> Ambientes de Desenvolvimento HTML/XHTML 13

14 FRAMES A utilização de frames permite a apresentação simultânea de várias páginas web no écran do browser. Tag <FRAMESET> Este etiqueta especifica o layout da página em termos de divisões do écran. O ficheiro HTML que contem esta etiqueta não possui a etiqueta <body> COLS = Lista divisão em colunas; ROWS = Lista divisão em linhas; FRAMEBORDER = yes no 0; A lista de divisão pode ser composta por valores absolutos (pixeis), por valores relativos (percentagem em relação á dimensão do objecto pai) ou pelo símbolo * (simbolizando o restante). Exemplos de listas: 100,50%,* 70%,30% 100,*,* 2*,* Ambientes de Desenvolvimento HTML/XHTML 14

15 Tag <FRAME> Este etiqueta afecta uma página web a uma dada zona do écran SRC = URL da página web; SCROLLING = yes no auto; NORESIZE não permite redimencionamento; FRAMEBORDER = yes no 0; NAME = Nome da frame; Em XHTML <frame src= noresize= noresize > Na tag <A> TARGET = nome da janela/frame onde o link será executado. TARGET= _self O carregamento é feito na mesma frame/página onde está o link. TARGET= _parent O carregamento é feito na totalidade do frameset onde se encontra o link. TARGET= _top O carregamento é feito em toda a janela do browser. TARGET= _blank O carregamento é feito numa nova janela. Ambientes de Desenvolvimento HTML/XHTML 15

16 Exemplo: <html> <head> <title>exemplo de frames</title> </head> <frameset cols= 250,* > <frame src= > <frameset rows = 250,* > <frame src= > <frame src= > </frameset> </framest> </html> Ambientes de Desenvolvimento HTML/XHTML 16

17 FORMS As forms permitem ao utilizador fornecer informação ao documento HTML. TAG <FORM> name action method - nome para scripting; - URL da página que irá processar a informação; - post get; ggfg Ambientes de Desenvolvimento HTML/XHTML 17

18 TAG <TEXTAREA> name cols rows - nome para scripting; - número de colunas; - nome de linhas; Exemplo: <textarea cols= 30 rows= 4 name= com > texto por defeito </textarea> TAG <SELECT> name size multiple - nome para scripting; - número de items visiveis; - permite selecção multipla; TAG <OPTION> value - valor enviado como resposta da selecção; selected - coloca um item como pré seleccionado; Exemplo: <select name= cad > <option value= AD selected>ambientes de Desenvolvimento <option value= BD >Bases de Dados <option value= PA >Programação de Aplicações <option value= LFA >Ling. Formais e Autómatos </select> Em XHTML <option value= AD selected= selected >Ambientes de Desenvolvimento Ambientes de Desenvolvimento HTML/XHTML 18

19 TAG <INPUT> name - nome para scripting; type - text password radio checkbox image file submit reset button hidden; type=text type=password size - largura da caixa em número de caracteres; maxlength - número máximo de caracteres permitido; value - valor (texto) por defeito; Exemplo: login:<input type= text name= texto size= 10 ><br> password:<input type= password name= pw size= 15 > type=radio type=checkbox value checked - valor enviado como resposta da selecção; - opção seleccionada por defeito; Em XHTML < input type=... name= value= checked= checked > Exemplo: Sexo: <input type= radio name= sexo value= H checked> Masculino <input type= radio name= sexo value= M > Feminino <p> Hobbys: <input type= checkbox name= hobbys value= ler > Ler <input type= checkbox name= hobbys value= estud > Estudar <input type= checkbox name= hobbys value= cine checked> Cinema <input type= checkbox name= hobbys value= pesca > Pescar Ambientes de Desenvolvimento HTML/XHTML 19

20 type=submit type=reset type=button value - Texto inserido no botão; Exemplo: <input type= submit value= Carregue para ENVIAR > <input type= reset value= Carregue para LIMPAR > <input type= button value= Carregue para... > type=image src - URL da imagem; tem todos os parâmetros de <img> Exemplo: <input type= image src= abc.gif name= cores > type=file size - tamanho em caracteres da caixa de texto; maxlength - tamanho máximo do nome do ficheiro; Exemplo: Upload do ficheiro: <input type= file name= fx size= 30 > type=hidden value - valor enviado como resposta; Ambientes de Desenvolvimento HTML/XHTML 20

21 <body> <form method= post action= quest.cgi > Nome:<input type= text name= nome size= 40 ><p> Sexo: <input type= radio name= sexo value= fem > Feminino <input type= radio name= sexo value= masc > Masculino <p> Ano de Nascimento: <select name= nascim > <option value= 1980 selected>1980 <option value= 1981 >1981 <option value= 1982 >1982 </select> <p> Cadeiras feitas: <input type= checkbox name= cad value= ap >Algoritmia<br> <input type= checkbox name= cad value= it >Inglês Tecnico <br> <input type= checkbox name= cad value= alga >Algebra <br> <input type= checkbox name= cad value= ad > Ambientes de Desenvolvimento <table><tr> <td valign= top >Observações:</td> <td> <textarea name= obs cols= 60 rows= 5 ></textarea> </td> </tr></table><p> <center><input type= submit value= Enviar ></center> </form> </body> Ambientes de Desenvolvimento HTML/XHTML 21

22 From (Copyright Refsnes Data) Differences Between XHTML and HTML You can prepare yourself for XHTML by starting to write strict HTML. How to Get Ready for XHTML XHTML is the next generation of HTML, but it will of course take some time before browsers and other software products are ready for it. In the meantime there are some important things you can do to prepare yourself for it. As you will learn from this tutorial, XHTML is not very different from HTML 4.01, so bringing your code up to 4.01 standards is a very good start. Our complete HTML 4.01 reference can help you with that. In addition, you should start NOW to write your HTML code in lowercase letters, and NEVER make the bad habit of skipping end tags like the </p>. Happy coding! The Most Important Differences: XHTML elements must be properly nested XHTML documents must be well-formed Tag names must be in lowercase All XHTML elements must be closed Elements Must Be Properly Nested In HTML some elements can be improperly nested within each other like this: <b><i>this text is bold and italic</b></i> In XHTML all elements must be properly nested within each other like this: <b><i>this text is bold and italic</i></b> Note: A common mistake in nested lists, is to forget that the inside list must be within an li element, like this: <ul> <li>coffee</li> <li>tea <ul> <li>black tea</li> <li>green tea</li> </ul> <li>milk</li> </ul> This is correct: <ul> <li>coffee</li> <li>tea <ul> <li>black tea</li> <li>green tea</li> </ul> </li> <li>milk</li> </ul> Notice that we have inserted a </li> tag after the </ul> tag in the "correct" code example. Ambientes de Desenvolvimento HTML/XHTML 22

23 Documents Must Be Well-formed All XHTML elements must be nested within the <html> root element. All other elements can have sub (children) elements. Sub elements must be in pairs and correctly nested within their parent element. The basic document structure is: <html> <head>... </head> <body>... </body> </html> Tag Names Must Be in Lower Case This is because XHTML documents are XML applications. XML is case-sensitive. Tags like <br> and <BR> are interpreted as different tags. This is wrong: <BODY> <P>This is a paragraph</p> </BODY> This is correct: <body> <p>this is a paragraph</p> </body> All XHTML Elements Must Be Closed Non-empty elements must have an end tag. This is wrong: <p>this is a paragraph <p>this is another paragraph This is correct: <p>this is a paragraph</p> <p>this is another paragraph</p> Empty Elements Must also Be Closed Empty elements must either have an end tag or the start tag must end with />. This is wrong: This is a break<br> Here comes a horizontal rule:<hr> Here's an image <img src="happy.gif" alt="happy face"> This is correct: This is a break<br /> Here comes a horizontal rule:<hr /> Here's an image <img src="happy.gif" alt="happy face" /> IMPORTANT Compatibility Note: To make your XHTML compatible with today's browsers, you should add an extra space before the "/" symbol like this: <br />, and this: <hr />. Ambientes de Desenvolvimento HTML/XHTML 23

24 XHTML Syntax Writing XHTML demands a clean HTML syntax. Some more XHTML Syntax Rules: Attribute names must be in lower case Attribute values must be quoted Attribute minimization is forbidden The id attribute replaces the name attribute The XHTML DTD defines mandatory elements The Lang Attribute The lang attribute applies to almost every XHTML element. It specifies the language of the content within an element. If you use the lang attribute in an element, you must add the xml:lang attribute, like this: <div lang="no" xml:lang="no">heia Norge!</div> Attribute Names must be in Lower Case This is wrong: <table WIDTH="100%"> This is correct: <table width="100%"> Attribute Values must be Quoted This is wrong: <table width=100%> This is correct: <table width="100%"> Attribute Minimization is Forbidden This is wrong: <dl compact> <input checked> <input readonly> <input disabled> <option selected> <frame noresize> This is correct: <dl compact="compact"> <input checked="checked"> <input readonly="readonly"> <input disabled="disabled"> <option selected="selected"> <frame noresize="noresize"> Ambientes de Desenvolvimento HTML/XHTML 24

25 Here is a list of the minimized attributes in HTML and how they should be written in XHTML: HTML XHTML compact compact="compact" checked checked="checked" declare declare="declare" readonly readonly="readonly" disabled disabled="disabled" selected selected="selected" defer defer="defer" ismap ismap="ismap" nohref nohref="nohref" noshade noshade="noshade" nowrap nowrap="nowrap" multiple multiple="multiple" noresize noresize="noresize" The id Attribute replaces the Name Attribute HTML 4.01 defines a name attribute for the elements a, applet, frame, iframe, img, and map. In XHTML the name attribute is deprecated. Use id instead. This is wrong: <img src="picture.gif" name="picture1" /> This is correct: <img src="picture.gif" id="picture1" /> Note: To interoperate with older browsers for a while, you should use both name and id, with identical attribute values, like this: <img src="picture.gif" id="picture1" name="picture1" /> IMPORTANT Compatibility Note: To make your XHTML compatible with today's browsers, you should add an extra space before the "/" symbol. Mandatory XHTML Elements All XHTML documents must have a DOCTYPE declaration. The html, head and body elements must be present, and the title must be present inside the head element. This is a minimum XHTML document template: <!DOCTYPE Doctype goes here> <html> <head> <title>title goes here</title> </head> <body> Body text goes here </body> </html> Note: The DOCTYPE declaration is not a part of the XHTML document itself. It is not an XHTML element, and it should not have a closing tag Ambientes de Desenvolvimento HTML/XHTML 25

26 XHTML HowTo How this Web Site was converted to XHTML This web site was converted from HTML to XHTML the weekend of 18. and 19. December 1999, by Hege Refsnes and Ståle Refsnes. To convert a Web site from HTML to XHTML, you should be familiar with the XHTML syntax rules of the previous chapters. The following steps were executed (in the order listed below): A DOCTYPE Definition was Added The following DOCTYPE declaration was added as the first line of every page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Note that we used the transitional DTD. We could have chosen the strict DTD, but found it a little too "strict", and a little too hard to conform to. A Note About the DOCTYPE Your pages must have a DOCTYPE declaration if you want them to validate as correct XHTML. Be aware however, that newer browsers (like Internet Explorer 6) might treat your document differently depending on the <!DOCTYPE> declaration. If the browser reads a document with a DOCTYPE, it might treat the document as "correct". Malformed XHTML might fall over and display differently than without a DOCTYPE. Lower Case Tag and Attribute Names Since XHTML is case sensitive, and since XHTML only accepts lower case HTML tags and attribute names, a general search and replace function was executed to replace all upper case tags with lowercase tags. The same was done for attribute names. We have always tried to use lower case names in our Web, so the replace function did not produce many real substitutions. Most commonly, errors were found in code copied from other Webs. All Attributes were Quoted Since the W3C XHTML 1.0 Recommendation states that all attribute values must be quoted, every page in the web was checked to see that attributes values were properly quoted. This was a time consuming job, and we will surely never again forget to put quotes around our attribute values. Empty Tags: <hr>, <br> and <img> Empty tags are not allowed in XHTML. The <hr> and <br> tags should be substituted with <hr /> and <br />. This produced a problem with Netscape that misinterpreted the <br/> tags. We don't know why, but changing it to <br /> worked fine. After that discovery, a general search and replace function was executed to swap the tags. A few other tags (like the < img> tag) were suffering from the same problem as above. We decided not to close the <img> tags with </img>, but with /> at the end of the tag. This was done manually. Ambientes de Desenvolvimento HTML/XHTML 26

27 The Web Site was Validated (without TIDY) After that, all pages were validated against the official W3C DTD with this link: XHTML Validator. A few more errors were found and edited manually. The most common error was missing </li> tags in lists. Should we have used a converting tool? Well, we could have used TIDY. Dave Raggett's HTML TIDY is a free utility for cleaning up HTML code. It also works great on the hard-to-read markup generated by specialized HTML editors and conversion tools, and it can help you identify where you need to pay further attention on making your pages more accessible to people with disabilities. The reason why we didn't use Tidy? We knew about XHTML when we started writing this web site. We knew that we had to use lowercase tag names and that we had to quote our attributes. So when the time came (to do the conversion), we simply had to test our pages against the W3C XHTML validator and correct the few mistakes. AND - we have learned a lot about writing "tidy" HTML code. Ambientes de Desenvolvimento HTML/XHTML 27