2 Introdução ao HTML DAWeb 2012/2013 Autoria ! Autores " João Moura Pires ([email protected]) " With contributions of − Fernando Birra ([email protected]) ! Estes slides podem ser usados livremente para fins pessoais ou académicos sem autorização dos autores, desde que a lista de autores seja incluída. ! O uso destes slides para fins comerciais não é permitido a não ser que haja um acordo prévio com os autores 2 2 – DAWeb Bibliografia ! Alguns dos exemplos são extraídos e adaptados de − Web Programming Step by Step de Marty Stepp, Jessica Miller, Victoria Kirst − e o do site do livro: http://www.webstepbook.com/ − W3Schools: http://www.w3schools.com/html/default.asp 3 2 – DAWeb Índice ! Linguagens de Marcação (Markup Languages) ! Evolução do HTML " (Breve) Introdução ao XML ! Aspectos fundamentais do (X)HTML ! Principais elementos ! Validação e adopção de standards 4 2 – DAWeb Introdução ao HTML Markup Languages Material da Unidade Curricular CT-XML 2 – DAWeb Markup Languages - Introduction ! Markup languages where introduced by document authors which annotated their documents with extra information for their publication editors. ! In this context, markups can be seen as meta information, i.e., information (for the editors) about information (for the readers who will read the documents). ! Markup was limitedly used in computer, by the use of special characters of the ASCII encoding (CR, LF, ...). ! The use of the same alphabet for the data and the meta-information simplifies the management and introduce tags and special delimiters that constrain the syntax. 6 Markup Languages 2 – DAWeb Markup Languages - Example <html> <body> <table border="5" width="32%" bordercolor="maroon" bgcolor="fuschia" cellspacing="2"> <tr> <td width="53%" align="center" bgcolor="#FFFF00"> <b><font color="navy" size="5">Fuel</font></b></td> <td width="47%" align="center" bgcolor="#FFFF00"> <b><font color="navy" size="5">Price (€/l) </font></b></td> </tr> <tr> <td width="53%" align="center" bgcolor="#FFFF00"> <font color="teal" size="4">Unleaded</font></td> <td width="47%" align="center" bgcolor="#FFFF00"> <font color="red" size="4">1.19</font></td> </tr> ..... ver </table> </body> </html> 7 Markup Languages 2 – DAWeb Standard Generalized Markup Language ! SGML - Standard Generalized Markup Language ! Developed in IBM by Mosher, Lorie and Goldfarb, in 1969, for structuring several types of documents (technical, management, legal, etc...) ! Markup use: " Not for presentation – which eases the analysis by humans " But for structuring the information – which eases the analysis by computers. ! Later it became a standard: ISO 8879 ! More details in: " http://www.iso.org/iso/en/CatalogueDetailPage.CatalogueDetail?CSNUMBER=16387 − http://www.w3.org/MarkUp/SGML/ 8 Markup Languages 2 – DAWeb SGML - Examples ! Example 1: " Ease the searching of relevant information in documents: <model> Golf </model> " Golf is a car model, but it is also a sport name, a video game, a card game, a submarine, a village, etc... More information in: http://en.wikipedia.org/wiki/ Golf_%28disambiguation%29 ! Example 2: " Structuring information – a car has a manufacturer and a model. <car> <manufacturer>Volkswagen</manufacturer> <model>Golf</model> </car> 9 Markup Languages 2 – DAWeb Hyper Text Markup Language ! Developed by Tim Berners-Lee and Anders Berglun at CERN in 1989. ! Motivation – presentation of information by graphical interfaces in the web, by using the following markup: " For graphical presentation of the information: <td>, <b>, <font size=“3" color=“red">, " For representing hypertext for easing the navigation in the web: <a href="http://www.di.fct.unl.pt#tel"> Computer Science Department</a> <a name=“tel">+351 21 294 85 36</a> 10 Markup Languages 2 – DAWeb HTML downside ! Not extensible " The markup is limited and has a predefined meaning. ! Only one DTD (Document Type Definition) " Ignored by most of the web browsers ... " ...which add their own proprietary marks to the language... " ...what leads to most of the ” HTML errors ” in the web. ! “WYSAYG” - what you see is ALL you get " No meta-information... " No meaning – just formatting " Just for rendering purpose of data. 11 2 – DAWeb Markup Languages Introdução ao HTML Evolução do HTML 12 2 – DAWeb Breve História do HTML ! 1989 - Tim apresenta, no CERN, a proposta original para um projecto de um sistema global de hyper-texto ! 1991 - Tim Berners-Lee termina a implementação da primeira versão do HTML (e do HTTP) de um servidor e de um cliente (browser). ! 1993 - A versão inicial é proposta para normalização ao IETF ! 1994 - Criação do W3C ! 1995 - HTML 2 torna-se a versão oficial da linguagem ! 1996-97 - HTML 3.2 normaliza algumas caracteristicas adicionais, forms , tabela, image maps, internacionalização 13 Evolução do HTML 2 – DAWeb Breve História do HTML (2) ! 1989 - 1997 - até HTML 3.2 " Propósito original era permitir uma fácil publicação e partilha de conteúdos " Publicação = (conteúdo + apresentação) + Interacção ! 1997 - HTML 4 " Separação do conteúdo da apresentação " Introdução das folhas de estilo; frames; objectos embebidos, acessibilidade para deficiências 14 Evolução do HTML 2 – DAWeb HTML 4 (W3C) ! http://www.w3.org/TR/1999/REC-html401-19991224/intro/intro.html HTML has been developed with the vision that all manner of devices should be able to use information on the Web: PCs with graphics displays of varying resolution and color depths, cellular telephones, hand held devices, devices for speech for output and input, computers with high or low bandwidth, and so on. HTML 4 extends HTML with mechanisms for style sheets, scripting, frames, embedding objects, improved support for right to left and mixed direction text, richer tables, and enhancements to forms, offering improved accessibility for people with disabilities. 15 Evolução do HTML 2 – DAWeb HTML 4 (W3C) ! http://www.w3.org/TR/1999/REC-html401-19991224/intro/intro.html HTML 4 developments inspired by concerns for accessibility include: - Better distinction between document structure and presentation, thus encouraging the use of style sheets instead of HTML presentation elements and attributes. .... -The requirement that alternate text accompany images included with the IMG element and image maps included with the AREA element. .. - Support for the title and lang attributes on all elements. ... 16 Evolução do HTML 2 – DAWeb HTML 4 (W3C) ! http://www.w3.org/TR/1999/REC-html401-19991224/intro/intro.html Style sheets - Style sheets simplify HTML markup and largely relieve HTML of the responsibilities of presentation. They give both authors and users control over the presentation of documents -- font information, alignment, colors, etc. - Style information can be specified for individual elements or groups of elements - Style information may be specified in an HTML document or in external style sheets. - Before the advent of style sheets, authors had limited control over rendering. HTML 3.2 included a number of attributes and elements offering control over alignment, font size, and text color. (...) W3C will eventually phase out many of HTML's presentation elements and attributes 17 Evolução do HTML 2 – DAWeb Breve História do HTML (3) Fácil publicação ! 1989 - 1997 - até HTML 3.2 ! 1997 - HTML 4 Separação do conteúdo e da apresentação " Versão estrita (Strict); " Versão de transição (Transitional) " Versão para frames (Frameset) ! 2000 - XHTML 1.0 " Reformulação do HTML 4 como uma aplicação do XML .... 18 Evolução do HTML 2 – DAWeb Introdução ao HTML (Breve) Introdução ao XML Material da Unidade Curricular CT-XML 2 – DAWeb Índice da (Breve) Introdução ao XML ! XML Goals ! Well-formed and valid documents ! Some XML Syntatic Rules ! Namespaces 20 2 – DAWeb Introdução ao HTML XML Goals Material da Unidade Curricular CT-XML 2 – DAWeb XML - eXtensible Markup Language (the main ! In 1996, the World Wide Web Consortium (W3C) consortium for the development of web technologies) started the design of a extensible markup language that included: " The flexibility and extensibility of SGML (but not its complexity) " The broad HTML acceptance (but overtaking its limitations) ! The eXtensible Markup Language (XML) was born. ! The XML is in fact a Meta-Markup Language. 22 XML Goals 2 – DAWeb XML - eXtensible Markup Language ! In February 1998, the first version of the XML (1.0) was defined. ! Slight updates in October 2000, but the version remained as 1.0. ! In 2004 the version 1.1 was defined including support of Unicode 4.0 (no changes for the languages already present in Unicode 2.0) ! The definition of this language is a W3C recomendation, that although not being a ISO standard, is a de facto standard. ! W3C information: http://www.w3c.org ! Information about technical recomendations of W3C: http://www.w3c.org/TR ! Information about XML version 1.1: http://www.w3.org/TR/2004/REC-xml11-20040204/ 23 XML Goals 2 – DAWeb XML – Goals ! Ready to use on the Web ! Provide support to a broad range of applications ! SGML Compatibility ! Computational ease of processing XML documents ! Straight standard with the minimum set of options. ! XML documents shall be readable by humans ! XML design shall be quick, formal and concise. ! XML documents shall be easy to create ! Tag verbosity it's not a problem! 24 XML Goals 2 – DAWeb Semantic and Presentation - Separation (1) ! Markups in an XML document " Define the semantic structure of the document (elements, attributes, their relations, ...), but " Don’t specify their presentation (e.g. in a web browser) ! HTML markups are used almost exclusively for presentation and rendering. ! In the first stage of processing XML, parsers can use semantic information to validate XML documents. ! In a second stage of processing (in a browser or editor), style sheets (e.g. XSL) can be used to transform or render XML documents. 25 XML Goals 2 – DAWeb Semantic and Presentation - Separation (2) ! So, depending on the style sheet used, several presentations are possible for the same XML document. For instance: " Web display (HTML) " PDA displaying (WML) " Voice syntesis (VoiceXML) ! Many XML documents can contain technical information for interchanging between computer systems (distributed systems), such as: " RPC-XML: for implementation of Remote Procedure Calls " SOAP: for access to remote methods and objects via Web Services. 26 XML Goals 2 – DAWeb Internationalization ! XML was designed for international use (Internationalization, I18N, i18n) ! It supports the Universal Character Set (UCS – normalized with the reference ISO/IEC 10646, known as UNICODE). ! So, XML text can use the characters of any alphabet in the world (Latin, Arabic, Hebraic, Chineses, Japaneses, Indian, ...) ! But not all the XML processors are ready to use all these alphabets... 27 XML Goals 2 – DAWeb Internationalization ! XML uses several Internet standards and protocols: " Uniform Resource Identifiers, Locators and Names sintax (URIs, URLs e URNs). " Communication protocols such as HTTP(S) - Hypertext Transfer Protocol (Secured). " Allows transformation to HTML from XHTML (eXtensible Hyper Text Markup Language) − Allows transformations from XML 1.0 and 1.1 in HTML 4.0 for compatibility with older web browsers that don’t support XML. 28 XML Goals 2 – DAWeb XML and SGML ! XML (version 1.0 and 1.1) is fully compatible with SGML " What allows XML development using existent tools for SGML. ! Among these, there are tools for document validations (DTDs – Document Type Definitions) " That are quite limited ! But some tools have been suffering enhancements " XML Schemas instead of DTDs. 29 XML Goals 2 – DAWeb Introdução ao HTML Well-formed and valid documents Material da Unidade Curricular CT-XML 2 – DAWeb Well-formed XML ! Well-formed XML documents are compliant with the XML specification syntax, and don’t have references to external resources (if not included in a DTD). ! A document is composed by several elements in a tree (hierarchy) where the root node of the tree is known as the document element. ! Example: A car with a license plate, has as detail the manufacturer name, the model name and the year of the car <car licencePlate = "45-37-PQ"> <manufacturer>Volkswagen</manufacturer> <model>Polo</model> <year>2000</year> </car> 31 Well-formed and valid documents 2 – DAWeb Valid XML ! Valid XML documents are well-formed documents which are complaint with the additional restrictions: " Sintactic (for instance, data type restrictions that the attributes must obey, or referenced entity definitions that shall be correctly defined) " These can be defined in a DTD or in a schema ! Example: <!ELEMENT <!ATTLIST <!ELEMENT <!ELEMENT <!ELEMENT <!ELEMENT car (manufacturer,model,year,colour)> car licensePlate CDATA #REQUIRED> manufacturer (#PCDATA)> model (#PCDATA)> year (#PCDATA)> colour (#PCDATA)> 32 Well-formed and valid documents 2 – DAWeb Introdução ao HTML Some XML Syntatic Rules Material da Unidade Curricular CT-XML 2 – DAWeb Characters in XML (1) ! Regardless of any structure, an XML document is composed by simple text with characters written in a certain coding. ! Among all the available codings, all XML processors should allow the use of the UNICODE encoding. ! For ensuring that an XML processor detects the encoding of an XML document automatically, it shall include an initial declaration using ASCII characters with the version and encoding attributes. ! For all the XML documents that don’t use the UTF-8 or UTF-16 encodings, the initial declaration with the encoding attribute must be included. 34 Characters in XML documents 2 - DAWeb Characters in XML (2) ! Although there are several encodings (which define a binary codification to each character), UNICODE shall be used. UNICODE was developed by a consortium with the goal of defining an Universal Character Set (UCS). " UTF-8 is useful for ASCII documents, since it codifies each character in a single byte. But for other characters, uses 2 or 4 bytes, what makes it very flexible. " UTF-16 uses a 2 byte codification which allows to represent up to 65535 characters. With the use of surrogate pairs bytes it allows up to 1 048 576. " UTF-32 uses a 4 byte codification where almost all the characters are represented. Due to the 4 byte representation this encoding is quite redundant. " UCS-4 is widely used in Asia, for avoiding the 4 byte representation of most of the Asian characters. It is considered less useful for Ocidental languages. 35 Characters in XML documents 2 - DAWeb Characters in XML (3) ! UNICODE Examples: " " " " " " " < U+003C - Less-Than Sign N U+004E - Latin Capital Letter N Æ U+00E6 - Latin Upper Letter Ae η U+03B7 - Greek Small Letter Eta Г U+0413 - Cyrillic Capital Letter Ghe - Hebrew Letter He U+05D4 ה - Arabic Letter Kaf U+0643 $ ! For more information about UNICODE version 3.0, refer to: www.unicode.org/standard/versions/Unicode3.0.1.html ! For last updates and most recent standards as UTF-32, refer to: www.unicode.org 36 Characters in XML documents 2 - DAWeb Characters in XML (4) ! The UNICODE de facto standard designed by the UNICODE consortium was adopted previously by ISO... " ISO/IEC 10646-1:2000 http://www.iso.org/iso/en/CatalogueDetailPage.CatalogueDetail? CSNUMBER=39921&ICS1=35&ICS2=40&ICS3= ... but is different from the UNICODE standard, refer to: www.usenix.org/publications/login/standards/38.labonte.html !... also present in IETF Requests for Comments: " RFC 2279: UTF-8 a transformation format of ISO 10646 [1998-01] www.ietf.org/rfc/rfc2279.txt " RFC 2781: UTF-16 an encoding of ISO 10646 [2000-02] www.ietf.org/rfc/rfc2781.txt 37 Characters in XML documents 2 - DAWeb Characters in XML (5) ! Range 0000 - 00FF 38 Characters in XML documents 2 - DAWeb Referencing Entities ! One or more characters can be specificed in an entity. Each entity has a name associated with it (this name is written in XML syntax – see next points) ! XML processors replace all entity references (if not inside CDATA or comments) &name; ! All entities must be declared in DTDs before being referenced. ! To avoid mismatch errors with the markups, there are 5 escape sequences for markup reserved characters. These are, technically speaking, references to predefined XML entities. & replaces & > replaces > < replaces < ' replaces ’ " replaces “ 39 Characters in XML documents 2 - DAWeb White Characters ! XML Processors shall deal with white spaces and “end-of-line” characters in a normalized way, as they deal with references to entities or special characters. ! To make XML independent from the operating system, XML processors shall replace the “end-of-line” characters used in the various operating systems by a single one. So the “end-of-line” sequences " CR-LF (Windows, DOS, CPM) " LF (Unix, Linux) " CR (MacOS) are always replaced by a single LF (Line Feed) character by the XML processors 40 Characters in XML documents 2 - DAWeb Other Characters ! There are several other characters that cannot be drawn graphically in regular text processors due to various reasons (such as missing text fonts). Anyway these are not considered as white spaces (separators) ! In XML the only white characters, parsed as processors are the following: separators by XML 09 (HT-Horizontal Tab) 0A (LF-Line Feed), 0D (CR-Carriage Retrurn) 20 (“space”) ! XML processors preserve all white characters (except CR) in the content of the elements, but can remove them in markups and in attribute values. 41 2 - DAWeb Characters in XML documents Elements and Markups ! The simple open markups (for elements without attributes) have the following syntax: <ElementName> where ElementName is the name of the element (XML name) ! Close makups have the following syntax: </ElementName> where ElementName is the name of the element (XML name) ! An empty element can be specified with a specific markup (empty element markup) <ElementName/> 42 XML documents 2 - DAWeb Valid XML Names (1) ! The names of the elements (and other XML structures) must obey to the XML naming syntax. ! All XML names are composed by a first character (Name1) followed by zero or more name characters (Name Chars). 43 2 - DAWeb XML documents Valid XML Names(2) ! To avoid errors with other alphabets, XML Names are case sensitive, which means that they are sensitive to upper / lower casing of their characters. ! The use of Colon (:) in XML names should only be made in the context of XML Name Spaces (see ahead) ! Names starting with xml, XML or any of their casing variants such as XmL are reserved. ! Some valid names: First_Name-1 %_'ﭗ F-ьнє βετα ! Some invalid names: First!Name-1 %&'ﭗ -Fьнє 1βετα 44 XML documents 2 - DAWeb XML Attributes (2) ! Attributes are specified inside the opening or empty markup of the element (never in the closing markup). Attributes are specified like a pair (name, value) Attribute_Name = Attribute_Value ! A single element can have several attributes, separated by spaces, as long as each attribute has a different name. ! Distinct elements can have attributes with the same name. ! Syntax: " Attributes names are XML Names. " Attribute_Value is an XML string. 45 XML documents 2 - DAWeb XML Strings ! An XML string is delimited by quotation marks (“string”) or by apostrophes (‘string’). ! In their content any character different than the delimitation character can be used. ! So, if it is necessary to write quotation marks in an XML string, it should be delimited by apostrophes and vice versa. As an alternative solution, it is also possible to write quotation marks and apostrophes by using the escape entities (' for ‘, and " for “) ! Examples: “Hello”, ‘Hello’, name?”, ‘visit “Lisboa”’ name?” ’ “Hello, what’s your ‘Hello, what's your 46 XML documents 2 - DAWeb Introdução ao HTML Namespaces Material da Unidade Curricular CT-XML 2 – DAWeb Namespaces (1) ! In XML documents, elements are used to describe and correlate various types of information. ! For instance, a product can be considered from several points of view or contexts: " Warehouse information: Identification of the product, stock quantity, internal price. " Customer Information: description of the product: type, model, final price, etc. ! The structure of the elements for the two cases will be different (even the name of the element might be different) and their validation should be dependent on the different “contexts” where the elements are considered. ! This context notion is materialized in XML by the use of Namespaces. 48 Namespaces 2 - DAWeb Namespaces (2) ! Example: " From the warehouse point of view (war prefix) <war:Book prodRef="p1"> <war:StockQuantity>20</war:StockQuantity> <war:Price currency=“USD">25</war:Price> </war:Book> " From the customer point of view (prefix cust) <cust:Book bookId="p1"> <cust:Title> ... </cust:Title> <cust:Authors> .... </cust:Authors> <cust:Publisher> .... </cust:Publisher> <cust:Date> ... </cust:Date> <cust:Price currency="EUR"> 40 </cust:Price> </cust:Book> 49 Namespaces 2 - DAWeb Namespaces (3) ! In a formal way, a namespace is only the name of a collection of names! As this topic is highly misunderstood, it is important to state that a namespace: " Is not an object, interface or structure with some internal organization; " Is not a set of resources saved in an URL or somewhere else; " Is not part of the XML 1.0 syntax; " Is not directly related with DTDs or schemas; " Has no meaning by itself. 50 Namespaces 2 - DAWeb Namespaces and DNSs ! To avoid confusions between contexts, it is important to ensure that the name to invoque the namespace uniquely identifies that namespace (uniqueness) ! Note the previous condition must be ensured in a generalized way to any possible namespace to be used. ! The solution is to delegate this uniqueness to existing mechanisms in the Internet made with that objective in mind, like the Domain Name System (DNS). ! So each namespace has an associated URI address (Universal Resource Identifier). But anyway a namespace isn’t related with any physical resource! 51 Namespaces 2 - DAWeb Qualified Names ! Once namespaces are identified uniquely, the elements markup names shall be qualified names in order to inform the XML processors about the use of each namespace. ! A qualified name is composed of a prefix, which identifies the name space, followed by the name of the element (local name). The prefix and the local name are separated by a colon (:), forming a valid XML name. ! For instance <book:Title> is the markup of an element whose name is “Title” and is defined in a namespace that is referred as “book” in this point of the document. ! Note that the prefix is only available for parsers, not being used for other applications. 52 Namespaces 2 - DAWeb XML Name prefixes ! Besides the unique URI, each namespace declaration must also define a prefix for use in the descendant elements. ! The assignment between the URI and the prefix, is made in the declaration of the namespace, by using a special attribute, xmlns:prefix, where prefix is the prefix to use for qualifying elements of that namespace. ! Example: The following declaration < cpy:Company xmlns:cpy = "www.company.com"> assigns the cpy prefix to the namespace identified in the “www. company.com” URI. So <cpy:Name>My&Your Company</cpy:Name> is an element defined in that namespace. 53 Namespaces 2 - DAWeb Multiple Namespaces ! It is possible to declare multiple namespaces in a single markup. As each namespace has a different prefix, the attributes used for the declaration will have different names (therefore obeying the XML syntax rules) ! Example: The declaration <cpy:Company xmlns:cpy = "www.company.com" xmlns:book = "www.bookstore.com" xmlns:ware = "www.warehouse.com"> assigns prefixes to the URI identified namespaces: cpy ⇔ “www.company.com”, book ⇔ “www.bookstore.com” e ware ⇔ “www.warehouse.com”. 54 Namespaces 2 - DAWeb Default namespaces ! It is possible to define a default namespace and thus ominting the prefix. ! Example: In the following namespace declaration <cpy:Company xmlns:cpy = "www.company.com" xmlns = "www.bookstore.com" xmlns:ware = "www.warehouse.com"> the namespace “www.bookstore.com” is declared as default and thus the prefix is omited, so elements of this namespace can be accessed without using prefixes, such as <Title> (instead of the previous <book:Title> where the book prefix was defined for the namespace) 55 Namespaces 2 - DAWeb Namespace scope (1) ! The scope of a namespace includes the element in which the namespace is declared and all its descendant elements, unless that in one of the descendants another namespace is declared using the same prefix. ! For instance, in the following declaration <Book xmlns:book = "www.bookstore.com"> <book:Title>...<book:Title> <book:Author>...</book:Author> </Book> the namespace “www.bookstore.com” applies to " The “Book” element and, " Any of its descendants (“Title” and “Author”). 56 Namespaces 2 - DAWeb Namespace scope (2) ! In the declaration <Book xmlns:book = "www.bookstore.com"> <book:Title>...</liv:Title> <book:Author>... <her:Title xmlns:her = "www.authors.com "> Author Title </her:Title> </liv:Author> </Book> The Title element under the Author element (Author title) is declared in the “www.authors.com” namespace, which is different than the book title element. 57 Namespaces 2 - DAWeb Namespace scope (3) ! The default namespace can also be rewritten (overridden). For instance in the declaration <Book xmlns:book = "www.bookstore.com"> <book:Title>...</book:Title> <book:Author>... <Title xmlns = "www.authors.com"> Author Title </Title> </book:Author> </Book> The Title element applied to the Author (Author Title) is declared in the “www.authors.com” namespace omitting the prefix. 58 Namespaces 2 - DAWeb Namespaces and attributes (1) ! There are a few rules regarding the use of namespaces with attributes: 1. An opening markup can’t have two attributes with the same name. 2. An opening markup can’t have two attributes with the same local name and prefixes referring to the same namespace. For instance, the following declaration is illegal: <Markup xmlns:ns1 = "www.namespace.com" xmlns:ns2 = "www.namespace.com"> <Error ns1:atr = “attr1" ns2:atr = “attr2"/> </Markup> 59 Namespaces 2 - DAWeb Namespaces and attributes (2) 3. The full attribute names can only contain up to one colon (0 or 1). The colon splits a qualified name in a the prefix and a local name. 4. Namespace omission declarations don’t have any effect over attributes. 5. A non-qualified name does not belong to any namespace. For instance: <Markup xmlns:ns = "www.namespace.com"> <Ok ns:atr = “at1" atr = “at2"/> </Markup > In this situation there is no conflict between attributes. The first attribute belongs to the namespace “www.namespace.com” , while the second one doesn’t belong to any namespace. 60 Namespaces 2 - DAWeb Breve História do HTML (3) Fácil publicação ! 1989 - 1997 - até HTML 3.2 ! 1997 - HTML 4 Separação do conteúdo e da apresentação ! 2000 - XHTML 1.0 " Reformulação do HTML 4 como uma aplicação do XML .... ! 2001 - XHTML 1.1 " Modularização do XHTML 1.0 61 Evolução do HTML 2 – DAWeb HTML 4 - Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Título do Documento</title> </head> <body> <p>Hello World</p> </body> </html> 62 Evolução do HTML 2 – DAWeb XHTML 1.0 - Strict <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Título do Documento</title> </head> <body> <p>Hello World!</p> </body> </html> 63 Evolução do HTML 2 – DAWeb XHTML 1.0 - Transitional <!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Título do Documento</title> </head> <body> <p align="center">Hello World!</p> </body> </html> 64 Evolução do HTML 2 – DAWeb XHTML 1.1 - Strict (DTD) <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Título do Documento</title> </head> <body> <p>Hello World!</p> </body> </html> É este que vamos usar em DAWeb 65 Evolução do HTML 2 – DAWeb XHTML 1.1 - Strict (Schema) <?xml version="1.0" encoding="UTF-8"?> <html xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.w3.org/1999/xhtml http://www.w3.org/MarkUp/SCHEMA/xhtml11.xsd" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Título do Documento</title> </head> <body> <p>Hello World!</p> </body> </html> 66 Evolução do HTML 2 – DAWeb XHTML 1.1 + MathML + SVG <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html SYSTEM "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"> <head> <title>Sample XHTML with Equations</title> </head> <body> <h1>Sample MathML:</h1> <math xmlns="http://www.w3.org/1998/Math/MathML"> <mstyle displaystyle="false" scriptlevel="0"> <mrow> <mfrac> <mrow> <mi mathcolor="gray">sin</mi> <mo rspace="verythinmathspace"></mo> <mi>θ</mi> </mrow> <mi>π</mi> </mfrac> </mrow> </mstyle> </math> <h1>Sample SVG:</h1> <svg:svg version="1.1" baseProfile="full" width="300px" height="200px"> <svg:circle cx="150px" cy="100px" r="50px" fill="#ff0000" stroke="#000000" stroke-width="5px"/> </svg:svg> </body> </html> Evolução do HTML 67 2 – DAWeb Leituras recomendadas ! O que é o HTML 4? ! http://www.w3.org/TR/1999/REC-html401-19991224/intro/intro.html ! Quais as diferenças do HTML 4 para o XHTML (1.0) ! http://www.w3.org/TR/2002/REC-xhtml1-20020801/#diffs ! Quais as diferenças do XHTML 1.0 (Strict) para o XHTML 1.1 ! http://www.w3.org/TR/xhtml11/changes.html#a_changes ! Perceber as ideias da modularização do XHTML ! http://www.w3.org/TR/2001/REC-xhtml-modularization-20010410/ introduction.html#s_intro 5 Evolução do HTML 2 - DAweb Introdução ao HTML Aspectos fundamentais do (X)HTML 69 2 – DAWeb XHTML ! XHTML é uma reformulação do HTML 4 como uma aplicação do XML ! XML eXtensible Markup Language " Conjunto de regras sintácticas simples mas estrito − ex: sensível a maiúsculas e minúsculas; as marcas tem que ser sempre fechadas, etc. − Cada novo vocabulário pode ser definido através de DTDs ou XML Schema ! Existem 3 tipos de definições do XHTML (ou seja 3 DTDs) " Strict, Transitional, and Frameset " Vamos usar a versão estrita (separação do conteúdo da apresentação) 70 Aspectos fundamentais do (X)HTML 2 – DAWeb Estrutura geral da página <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Título do Documento</title> </head> Não obrigatória em todos os documentos. Obrigatória se a codificação não for UTF8 ou UTF16 e a codificação não tiver <body> <p>Hello World!</p> </body> </html> 71 Aspectos fundamentais do (X)HTML 2 – DAWeb Estrutura geral da página <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Título do Documento</title> </head> <body> <p>Hello World!</p> A raiz tem que ser html. Tem que conter a declaração do espaço de nomes </body> </html> 72 Aspectos fundamentais do (X)HTML 2 – DAWeb Estrutura geral da página <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> Cabeçalho <head> <title>Título do Documento</title> </head> Corpo do documento <body> <p>Hello World!</p> </body> </html> 73 Aspectos fundamentais do (X)HTML 2 – DAWeb Cabeçalho: <head> <head> <!-- o base é opcional e serve para indicar o url de base para qualquer url relativo que esteja presente no doecumento --> <base href="http://ssdi.di.fct.unl.pt/daweb"/> <!-- title é o único sub-elemento de <head> que é obrigatório --> <title xml:lang="pt">Título do documento</title> <!-- link define a relação entre este documento e outros recursos é sobretudo usado para ligar a style sheets --> <link rel="stylesheet" type="text/css" href="default.css" media="screen"/> <link rel="stylesheet" type="text/css" href="special.css" media="print"/> <link rel="next" type="text/html" href="doc_seguinte.xhtml"/> <link rel="previous" type="text/html" href="doc_seguinte.xhtml"/> <meta> ...</meta> <script> ... </script> <style> ... </style> </head> 74 Aspectos fundamentais do (X)HTML 2 – DAWeb Cabeçalho: <head>/<link> - Atributos ! charset: char_encoding ! href: URL (do documento que está realcionado) ! hreflang: language_code ! media: screen, ... , projection, handheld, print, braille ! rel: relação com o documento: alternate, appendix, chapter, ..., help, next, prev, home, index, ... ! rev: relação inversa de rel ! type: MIME_type: 75 Aspectos fundamentais do (X)HTML 2 – DAWeb Cabeçalho: <head>/<meta> <!-- The <meta> tag indica meta-informação sobre o documento. Esta informação não é apresentada na página mas pode ser processada pelos browsers, motores de pesquisa, etc. Os elementos meta são tipicamente usados para conter descrições, autores, data da ultima modificação, etc --> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="generator" content="S5" /> <meta name="version" content="S5 1.1" /> <meta name="author" content="Marty Stepp" /> <meta name="company" content="University of Washington" /> <meta name="description" content="Lecture slides to accompany Web Programming Step by Step, a college textbook on web programming." /> <meta name="keywords" content="web programming, html, xhtml, css, style sheets, layout, w3c, php, forms, " /> <!-- configuration parameters --> <meta name="defaultView" content="slideshow" /> <meta name="controlVis" content="hidden" /> Aspectos fundamentais do (X)HTML 76 2 – DAWeb Cabeçalho: <head>/<script> e <style> ! <script> " Código que é para ser executado do lado do browser <script type="text/javascript"> document.write("Hello World!") </script> ! <style> " definições de estilo dentro do documento HTML <style type="text/css"> h1 {color:red} p {color:blue} </style> 77 Aspectos fundamentais do (X)HTML 2 – DAWeb <head>/<meta> <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> Cabeçalho <head> <title>Título do Documento</title> </head> <body> Corpo do documento <p>Hello World!</p> </body> </html> 78 Aspectos fundamentais do (X)HTML 2 – DAWeb Corpo: <body> ! O elemento body contem todo o conteúdo do documento HTML, nomeadamente texto, links, imagens, tabelas, listas etc. ! Dois tipos de elementos: Block elements; inline elements. " Block elements − Elementos significativos do documento HTML com informação que se pode estender por várias linhas; − pode conter outros block elements e inline elements; − o browser apresenta cada block element numa area rectangular e com uma mudança de linha e com margens verticais. " Inline elements − afecta (em geral) uma pequena parte e podem aparecer vários dentro de uma mesma linha. − devem existir dentro de um block element; não podem conter block elements. 79 Aspectos fundamentais do (X)HTML 2 – DAWeb Alguns “Block elements” ! Parágrafo: <p> ! Headings: <h1>, ..., <h6> ! Horizontal Rule: <hr> ! Listas: <ul> <ol> <li> ! Lista de definições: <dl>, <dt>, <dd> ! Tabela: <table>, <tr>, <td>, <th>, <caption> ! Citação: <blockquote> ! Texto préformatado: <pre> ! Secção de uma página: <div> 80 Principais elementos 2 – DAWeb Alguns “inline elements” ! Images: <img> ! Links: <a> ! Line breaks: <br> ! Emphasis: <em>, <strong> ! Citação: <q> ! Código de computador: <code> ! Span:<span> 81 Principais elementos 2 – DAWeb Processamento de caracteres ! Caracteres brancos são colapsados ! Caracteres proibidos e entidades 82 Aspectos fundamentais do (X)HTML 2 – DAWeb Processamento de caracteres <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>As entidades e os caracetres especiais</title> </head> <body> <p>No HTML os espaços são colapsados num único. Alias as mudanças de linha são igualmente tratadas como espaços</p> <p>Como podemos escrever os sinais de maior (>) e de menor (<)</p> <p><p> <a href="http://google.com/search?q=marty&ie=utf-8&aq=t"> Search Google for Marty </a></p></p> </body> </html> 83 Aspectos fundamentais do (X)HTML 2 – DAWeb Atributos standard 84 Aspectos fundamentais do (X)HTML 2 – DAWeb Introdução ao HTML Principais elementos 85 2 – DAWeb Parágrafo - <p></p> ! A etiqueta <p> define um parágrafo. ! O elemento p cria automaticamente um espaço antes e depois dele próprio. O espaço é automaticamente definido pelo browser e pode ser controlao através de uma folha de estilo. Elemento p Descrição Parágrafo de texto (Block) Sintaxe <p>conteúdo</p> W3Cchools /tags/tag_p.asp 86 Principais elementos 2 – DAWeb Parágrafo - <p></p>: Exemplo <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Parágrafos</title> </head> <body> <p>Os alunos que ainda não tenham escolhido um turno prático devem fazê-lo o mais rapidamente possível. Os dois alunos erasmus não se devem inscrever nos turnos, devendo apenas contactar o docente das práticas.</p> <p>Este é o site da unidade curricular de Desenvolvimento de Aplicações Web, edição 2010/2011. Esta será a fonte primária de publicação de informação de interesse para os alunos. Visite o menu (à esquerda e veja que informação está disponível). Sempre que houver actualização do site haverá uma notícia apropriada para alertar das novidades. Avisos para os alunos serão igualmente publicados por esta via. Mantenha-se a par das novidades subscrevendo o RSS feed (ver o link à esquerda)</p> </body> </html> 87 Aspectos fundamentais do (X)HTML 2 – DAWeb Parágrafo - <p></p>: Exemplo 88 Principais elementos 2 – DAWeb Parágrafo - <p></p>: Erro <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Parágrafos</title> </head> <body> <p> texto <p>este paragrafo não pode estar dentro do outro</p> </p> <p>os parágrafos são para serem usados em sequência</p> </body> </html> 89 Aspectos fundamentais do (X)HTML 2 – DAWeb Parágrafo - <p></p>: Erro <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Parágrafos</title> </head> <body> <p> texto <p>este paragrafo não pode estar dentro do outro</p> </p> <p>os parágrafos são para serem usados em sequência</p> </body> </html> 90 Aspectos fundamentais do (X)HTML 2 – DAWeb Parágrafo - <p></p>: Erro - Validação <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Parágrafos</title> </head> <body> <p> texto <p>este paragrafo não pode estar dentro do outro</p> </p> <p>os parágrafos são para serem usados em sequência</p> </body> </html> 91 Aspectos fundamentais do (X)HTML 2 – DAWeb Headings - <h1></h1>, ..., <h6></h6> ! As etiquetas <h1> até <h6> definem os headings HTML. ! Os elementos devem ser usados hierarquicamente começando no <h1> independentemente da sua representação visual. Elemento h1, h2, ...., h6 Descrição Parágrafo de texto (Block) Sintaxe <h1>conteúdo</h1> W3Cchools /tags/tag_hn.asp 92 Principais elementos 2 – DAWeb Headings - : Exemplo, válido mas ... <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Headings</title> </head> <body> <p>Texto</p> <h2>Título</h2> <p>Texto</p> <h1>Título</h1> <p>Texto</p> </body> </html> 93 Aspectos fundamentais do (X)HTML 2 – DAWeb Lista não ordenada - <ul>, <li> Elemento ul li Descrição Lista não ordenada (Block) Item de lista (Block) Sintaxe <ul> <li>item</li> <li>item</li> <li>item</li> </ul> W3Cchools /tags/tag_ul.asp /tags/tag_ul.asp 94 Principais elementos 2 – DAWeb Lista ordenada - <ol>, <li> Elemento ol li Descrição Lista ordenada ou numerada(Block) Item de lista (Block) Sintaxe <ol> <li>item</li> <li>item</li> <li>item</li> </ol> W3Cchools /tags/tag_ol.asp /tags/tag_ul.asp 95 Principais elementos 2 – DAWeb Listas : Exemplo encadeado <body> <h1>Lista de compras</h1> <p>Lista das compras para a festa</p> <ul> <li>Loja 1 <ul> <li>Item 1 da Loja 1</li> <li>item 2 da loja 1</li> </ul> </li> <li>Loja 2 <ul> <li>Item 1 da Loja 2</li> <li>item 2 da loja 2</li> </ul> </li> <li>item 3 em qualquer loja</li> </ul> <h1>Lista de coisas a fazer</h1> <p>Tenho que fazer estas tarefas por esta ordem</p> <ol> <li>Tarefa 1</li> <li>Tarefa 2</li> </ol> </body> Aspectos fundamentais do (X)HTML 96 2 – DAWeb Imagem - <img> ! A etiqueta <img> insere um imagem na página HTML ! As imagens não são inseridas no documento HTML, mas sim ligadas ao documento. A etiqueta <img> cria um espaço para a imagem referenciada ! A etiqueta <img> tem dois atributos obrigatórios: 97 Principais elementos 2 – DAWeb Imagem - <img> ! A etiqueta <img> atributos opcionais: 98 Principais elementos 2 – DAWeb Imagem - <img> ! A etiqueta <img>: atributos opcionais: Attribute Value Description DTD height pixels % Specifies the height of an image STF ismap ismap Specifies an image as a server-side image-map. Rarely used. Look at usemap instead STF longdesc URL Specifies the URL to a document that STF contains a long description of an image usemap #mapname Specifies an image as a client-side image-map STF width pixels % Specifies the width of an image STF 99 Principais elementos 2 – DAWeb Imagem - <img>: Exemplo <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Imagem</title> </head> <body> <p>O símbolo da FCT:</p> <p><img src="fct.jpg" alt="Símbolo da FCT em formato JPG" height="50 px"></img></p> </body> </html> 100 Aspectos fundamentais do (X)HTML 2 – DAWeb Imagem - <img>: Exemplo - ligação perdida <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Imagem</title> </head> <body> <p>O símbolo da FCT:</p> <p><img src="fct.jpg" alt="Símbolo da FCT em formato JPG" height="50 px"></img></p> </body> </html> URL relativos vs absolutos 101 Aspectos fundamentais do (X)HTML 2 – DAWeb Ancora ou hiperligação - <a> ! A etiqueta <a> serve para estabelecer uma ligação, de um sentido, de uma página web para outra página web <p> Um excelente referencia para HTML é <a href="http://www.w3schools.com">W3Schools.com!</a> </p> ! Além de texto as imagens podem ser usadas como hiperligação <p> <a href="http://validator.w3.org/check?uri=referer"> <img src="http://www.w3.org/Icons/valid-xhtml11" alt="Valid XHTML 1.1" height="31" width="88"/> </a> </p> 102 Principais elementos 2 – DAWeb Ancora ou hiperligação - <a> ! A etiqueta <a>: atributos opcionais: Attribute Value Description DTD charset char_encoding Specifies the character-set of a linked document STF coords coordinates Specifies the coordinates of a link STF href URL Specifies the destination of a link STF hreflang language_code Specifies the language of a linked document STF name section_name Specifies the name of an anchor STF rel text Specifies the relationship between the current document STF and the linked document rev text Specifies the relationship between the linked document and the current document STF shape default rect circle poly Specifies the shape of a link STF 103 Principais elementos 2 – DAWeb Tabelas - <table> ! A etiqueta <table> define uma tabela HTML ! As tabelas simples são constituídas por um elemento table e um ou mais elementos tr (table row), th (table heading) e td (table data). ! A simple HTML table consists of the table element and one or more tr, th, and td elements. ! Tabelas HTML mais complexas podem incluir igualmente os elementos: caption, col, colgroup, thead e tbody. 104 Principais elementos 2 – DAWeb Tabelas - <table> - Atributos Attribute Value Description DTD border pixels Specifies the width of the borders around a table STF cellpadding pixels Specifies the space between the cell wall and the cell content STF cellspacing pixels Specifies the space between cells STF frame void, above, below hsides, lhs, rhs, vsides, box, border Specifies which parts of the outside borders that should be visible STF rules none, groups, rows cols, all Specifies which parts of the inside borders that should be visible STF summary text Specifies a summary of the content of a table STF width pixels % Specifies the width of a table STF 105 Principais elementos 2 – DAWeb Tabelas - <table> - Exemplo simples <table border="1"> <caption>Nation Information</caption> <tr> <th>Country</th> <th>Happiness Ranking</th> <th>Population</th> <th>Life Expectancy</th> <th>GDP per Capita</th> </tr> <tr> <td>Denmark</td> <td>1</td> <td>5.5 million</td> <td>77.8 years</td> <td>$34,600</td> </tr> <tr> .. </tr> .... <tr> <td>Ireland</td> <td>11</td> <td>2.3 million</td> <td>55 years</td> <td>$1,400</td> </tr> </table> 106 Principais elementos 2 – DAWeb Tabelas: <td> e <th> e o colspan e o rowspan ! As células de uma tabela podem estender-se por mais do que uma coluna ou por mais do que uma linha. ! O atributo colspan indica quantas colunas a célula deve ocupar ! O atributo rowspan indica quantas linhas a célula deve ocupar <td colspan="#colunas" rowspan="#linhas"> Conteúdo </td> 107 Principais elementos 2 – DAWeb Tabelas - <table> - Exemplo de (r, c)span <table border="1"> <caption>Nation Information</caption> <tr> <th> </th> <th>Country</th> <th>Happiness Ranking</th> <th>Life Expectancy</th> <th>GDP per Capita</th> </tr> <tr><th colspan="5">North America</th></tr> <tr> <th rowspan="1">Developing</th> <td>Bahamas</td><td>5</td><td>65.6 years</td><td>$20,200</td> </tr> <tr> <th rowspan="2">Developed</th> <td>Canada</td><td>8</td><td>80.4 years</td><td>$38,200</td> </tr> <tr> <td>United States</td><td>17</td><td>78.1 years</td><td>$45,800</td> </tr> </table> 108 Principais elementos 2 – DAWeb Introdução ao HTML Validação e adopção de standards 109 2 – DAWeb Validação e consistência ! Validação formal do XHTML " http://validator.w3.org/check ! Usar as etiquetas para descrever o conteúdo " e posteriormente usar as CSS para definir a apresentação 110 Validação e adopção de standards 2 – DAWeb Introdução ao HTML Leituras e actividades recomendadas 111 2 – DAWeb Leituras recomendadas ! Leituras recomendadas " O que é o HTML 4? ! ! Quais as diferenças do HTML 4 para o XHTML (1.0) ! ! http://www.w3.org/TR/2002/REC-xhtml1-20020801/#diffs Quais as diferenças do XHTML 1.0 (Strict) para o XHTML 1.1 ! ! http://www.w3.org/TR/1999/REC-html401-19991224/intro/intro.html http://www.w3.org/TR/xhtml11/changes.html#a_changes Perceber as ideias da modularização do XHTML ! http://www.w3.org/TR/2001/REC-xhtml-modularization-20010410/ introduction.html#s_intro ! Do Livro: ! da Pag 14 à Pag 46 5 2 - DAweb Actividades recomendadas ! Crie uns documentos XHTML (1.1) - Strict ! Experimentando os exemplos apresentados nestes slides ! Experimentando o uso dos elementos seguintes: ! ! <hr> ! <br> ! <em> ! <strong> ! lista de definições: <dl>, <dt>, <dd> ! quotations: <blockquote>, <q> ! texto pré-formatado: <code>, <pre> Verifique sempre se os seus documentos passam a validação do W3C ! http://validator.w3.org/ 5 2 - DAweb
Download
