DOCSLIB.ORG

HTML and How to Indicate Which Version You Are Using

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
HTML and How to Indicate Which Version You Are Using 8 Extra Markup X Specifying different versions of HTML X Identifying and grouping elements X Comments, meta information and iframes At this point, we have covered the main tags that fit nicely into groups and sections. In this chapter, we will focus on some helpful topics that are not easily grouped together. You will learn about: ● The different versions of HTML and how to indicate which version you are using ● How to add comments to your code ● Global attributes, which are attributes that can be used on any element, including the class and id attributes ● Elements that are used to group together parts of the page where no other element is suitable ● How to embed a page within a page using iframes ● How to add information about the web page using the <meta> element ● Adding characters such as angled brackets and copyright symbols 177 EXTRA MARKUP EXTRA MARKUP 178 thE Evolution of HTMl Since the web was first created, there have been several different versions of HTML. HTMl 4 XHTMl 1.0 RelEasEd 1997 RelEasEd 2000 Each new version was designed With the exception of a few In 1998, a language called XML to be an improvement on the elements added in HTML5 was published. Its purpose last (with new elements and (which have been highlighted), was to allow people to write attributes added and older code the elements you have seen in new markup languages. Since removed). this book were all available in HTML was the most widely used HTML 4. markup language around, it was There have also been several decided that HTML 4 should be versions of each browser used to Although HTML 4 had some reformulated to follow the rules view web pages, each of which presentational elements to of XML and it was renamed implements new code. Not all control the appearance of pages, XHTML. This meant that web users, however, have the authors are not recommended to authors had to follow some new, latest browsers installed on use them any more. (Examples more strict rules about writing their computers, which means include the <center> element markup. For example: that not everyone will be able to for centering content on a view all of the latest features and page, <font> for controlling ● Every element needed a markup. the appearance of text, and closing tag (except for empty <strike> to put a line through elements such as <img />). Where you should be the text — all of these can be ● Attribute names had to be in particularly aware of browsers achieved with CSS instead.) lowercase. not supporting certain features, ● All attributes required a value, I have made a note of this (as and all values were to be you have seen with some of the placed in double quotes. HTML5 elements introduced in ● Deprecated elements should the Forms chapter — and as you no longer be used. will see in the CSS chapters). ● Every element that was opened inside another element should be closed inside that same element. 179 EXTRA MARKUP htMl5 RelEasEd 2000 The examples in this book all The transitional version of In HTML5, web page authors do follow these strict rules of XML. XHTML was created because not need to close all tags, and it allowed authors to continue new elements and attributes will One of the key benefits of this to follow older practices (with a be introduced. At the time of change was that XHTML works less strict syntax) and use some writing, the HTML5 specification seamlessly with other programs of the elements and attributes had not been completed, but that are written to create and that were going to be removed the major browser makers had process XML documents. from future versions of HTML. started to implement many of the new features, and web page It could also be used with other There was also a third version authors were rapidly adopting data formats such as Scalable of XHTML 1.0 called XHTML the new markup. Vector Graphics (SVG) — a 1.0 Frameset, which allowed graphical language written in web page authors to partition Despite the fact that HTML5 XML, MathML (used to mark a browser window into several is not yet completed, you can up mathematical formulae), and "frames," each of which would safely take advantage of the CML (used to mark up chemical hold a different HTML page. new features of the language as formulae). These days, frames are very long as you endeavour to ensure rarely used and are being phased that users with older browsers In order to help web page out. will be able to view your pages authors move to this new syntax, (even though some of the extra two main flavors of XHTML 1.0 features will not be visible to were created: them). ● Strict XHTML 1.0, where authors had to follow the rules to the letter ● Transitional XHTML 1.0, where authors could still use presentational elements (such as <center> and <font>). EXTRA MARKUP 180 doCtYpEs Because there have been HTML several versions of HTML, each HTML5 web page should begin with a <!DOCTYPE html> DOCTYPE declaration to tell a browser which version of HTML HTML 4 the page is using (although <!DOCTYPE html PUBLIC browsers usually display the "-//W3C//DTD HTML 4.01 Transitional//EN" page even if it is not included). "http://www.w3.org/TR/html4/loose.dtd"> We will therefore be including one in each example for the rest Transitional XHTML 1.0 of the book. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" As you will see when we come to "http://www.w3.org/TR/xhtml1/DTD/ look at CSS and its box model on xhtml1-transitional.dtd"> page 316, the use of a DOCTYPE can also help the browser to Strict XHTML 1.0 render a page correctly. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" Because XHTML was written "http://www.w3.org/TR/xhtml1/DTD/ in XML, you will sometimes xhtml1-strict.dtd"> see pages that use the XHTML strict DOCTYPE start with XML Declaration the optional XML declaration. <?xml version="1.0" ?> Where this is used, it should be the first thing in a document. There must be nothing before it, not even a space. 181 EXTRA MARKUP Comments ainrti HTCMlEl HTML chapter-08/comments-in-html.html <!-- --> <!-- start of introduction --> <h1>Current Exhibitions</h1> If you want to add a comment <h2>Olafur Eliasson</h2> to your code that will not be <!-- end of introduction --> visible in the user's browser, you <!-- start of main text --> can add the text between these <p>Olafur Eliasson was born in Copenhagen, Denmark characters: in 1967 to Icelandic parents.</p> <p>He is known for sculptures and large-scale <!-- comment goes here --> installation art employing elemental materials such as light, water, and air temperature to It is a good idea to add enhance the viewer's experience.</p> comments to your code because, <!-- end of main text --> no matter how familiar you <!-- are with the page at the time <a href="mailto:[email protected]">Contact</a> of writing it, when you come --> back to it later (or if someone else needs to look at the code), comments will make it much easier to understand. RESULT Although comments are not visible to users in the main browser window, they can be viewed by anyone who looks at the source code behind the page. On a long page you will often see comments used to indicate where sections of the page start or end, and to pass on notes to help anyone who is looking at the code understand it. Comments can also be used around blocks of code to stop that code from being displayed in the browser. In the example on the left, the email link has been commented out. EXTRA MARKUP 182 ID attributE Every HTML element can carry chapter-08/id-attribute.html HTML the id attribute. It is used to uniquely identify that element <p>Water and air. So very commonplace are these from other elements on the substances, they hardly attract attention - and page. Its value should start with yet they vouchsafe our very existence.</p> a letter or an underscore (not a <p id="pullquote">Every time I view the sea I feel number or any other character). a calming sense of security, as if visiting my It is important that no two ancestral home; I embark on a voyage of seeing. elements on the same page </p> have the same value for their id <p>Mystery of mysteries, water and air are right attributes (otherwise the value is there before us in the sea.</p> no longer unique). As you will see when you come to look at CSS in the next RESULT section, giving an element a unique identity allows you to style it differently than any other instance of the same element on the page. For example, you might want to assign one paragraph within the page (perhaps a paragraph containing a pull quote) a different style than all of the other paragraphs. In the example on the right, the paragraph with the id attribute whose value is pullquote is made uppercase using CSS. If you go on to learn about JavaScript (a language that allows you to add interactivity to your pages), id attributes can be used to allow the script to work with that particular element. The id attribute is known as a global attribute because it can be used on any element. 183 EXTRA MARKUP Class attributartiClE Every HTML element can HTML chapter-08/class-attribute.html also carry a class attribute.
Load more

Recommended publications
  • Markup Languages & HTML
    INTERNET & WEB APPLICATION DEVELOPMENT SWE 444 Fall Semester 2008-2009 (081) Module 2: Markup Languages & HTML (()II) Dr. El-Sayed El-Alfy Computer Science Department King Fahd University of Petroleum and Minerals [email protected] Objectives/Outline y Objectives y Outline ◦ … ◦ … ◦ Create pages that have ◦ HTML Elements frames x Frames ◦ Create pages that have x Forms forms to collect user inputs x Head Element ◦ Use meta data to improve x Meta data search engine results and to x <!DOCTYPE> tag redirect a user ◦ Use the <!DOCTYPE> to declare the DTD KFUPM-081© Dr. El-Alfy 1 Frames ¾ Allow the browser window to be divided into an independent set of frames ¾ More than one HTML document can be displayed in the same browser window ¾ Frequently used to add a menu bar to a web site where the constant back and forth clicking would become tedious in a single page. ¾ Allow easier navigation under some circumstances ¾ The designer can divide the window horizontally and vertically in various ways, e.g. ¾ The disadvantages of using frames are: ◦ The web developer must keep track of many HTML documents ◦ It is difficult to print/bookmark the entire page KFUPM-081© Dr. El-Alfy SWE 444 Internet & Web Application Development 2.3 Frames (cont.) ¾ The <frameset> tag ◦ Defines how to divide the window into frames ◦ Each frameset defines a set of rows or columns ◦ The values of the rows/col umns iidindicate the amount of screen area each row/column will occupy ¾ The <frame> tag ◦ Defines what HTML document to put into each frame ¾ Useful tips ◦ If a frame has visible borders, the user can resize it by dragging the border ◦ To prevent a user from resizing a frame, add noresize="noresize" to the <frame> tag ◦ Add the <noframes> tag for browsers that do not support frames KFUPM-081© Dr.
    [Show full text]
  • 101 Ways to Promote Your
    Increase Your Real Estate Sales Online! 101 Ways to Promote Your Real Estate Web Site Web Real Estate Your to Promote Ways 101 An increasing number of real estate buyers and sellers are making This Book and Web Site 101 Ways to Promote Your the Web their first destination. So now is the time to stake your Will Help You: claim in the Internet land rush with an effective and well-promoted • Draw more buyers and sellers to your Web site. Getting potential customers to visit Web site rather your Web site than those of your competitors can mean thousands of additional • Optimize your site for real estate-specific search engines commission dollars in your pocket every month. • Learn what techniques work best in the “Great stuff! online real estate arena Real Esta t e Practical, powerful • Make effective marketing use of In 101 Ways to Promote Your Real Estate Web Site, widely tips on growing newsgroups, mail lists, meta indexes, sales from your Web recognized expert Susan Sweeney provides proven promotion e-zines, Web rings, cybermalls, site. Get it!” techniques that help you draw buyers and sellers to your real estate podcasting, blogs, wikis, mobile, autoresponders, banner exchange Web site. If you deal in either residential or commercial real estate programs, and more — Randy Gage, author of as an agent, broker, or firm, this book (and it’s companion Web site) • Leverage the power of e-mail in real Prosperity Mind estate sales Web Site is exactly what you need. Bottom line, it will help you draw more • Use offline promotion to increase buyers and sellers to your Web site and increase your earnings.
    [Show full text]
  • Extending Expression Web with Add-Ons
    APPENDIX Extending Expression Web with Add-Ons Any good web editor must be extensible, because the Web is constantly changing. This capability is one of the strongest assets of Expression Web; it means that third parties can add new features that are easy to use inside of Expression Web. You don’t have to wait for Microsoft to release a new version to get more features. I am talking not about code snippets, like the one we created in Chapter 2, but about fea- tures that make it easy to add e-commerce capabilities using PayPal buttons or a shopping cart, improve your search engine ranking using Google Sitemaps, or add Flash banners and interactivity without becoming a programmer or a search engine specialist. Some of these add-ons are commercial applications that charge a fee, and others are created by someone who sees a need and creates a free add-on. At the time of this writing, there were over a dozen add-ons available for download and more actively under develop- ment. A current list is available at http://foundationsofexpressionweb.com/exercises/ appendix. Add-ons are usually easy to install and use. Once you have found an extension for Expression Web that offers you the ability to extend what you can do, download the add-on, and follow the extension maker’s instructions on how to install it. Most add-ons will have an installer that creates either a toolbar or an entry in one of the menus. Adding PayPal Buttons The first add-on I will show you creates a menu item.
    [Show full text]
  • Check Seo of Article
    Check Seo Of Article Forensic Hamilton girdle some viridescence and values his Latinists so delayingly! Stark-naked Westbrook never invaginatingdisguisings so foreknown etymologically ungainly. or muring any roomettes nauseously. Dolomitic Goddard autoclave, his shadoofs In your post is a drop in? Some of your posts are some other domains option, perform the top serp features cover it. We check out of seo article by nightwatch search engines but keep google only indexes and seos and match interested. As a article, of articles are unlimited focus of those pages? Google had low content in enterprise search index due to querystring parameters that shadow were passing along god the URL. SEO checklist on the internet. On page is kindergarten a few since many factors that search engines looks at are they build their index. How do I know that a particular page can be indexed? Irina Weber is Brand Manager at SE Ranking. It makes you frustrated when faculty receive affection with errors. This category only includes cookies that ensures basic functionalities and security features of the website. Google SEO Ranking Checker Our Free Google SEO Ranking Tool helps your find you top traffic driving keywords Enter a domain known to identify high. This makes it easy for readers to share your content continuously as they are reading down the page. This ensures that a wider audience will enjoy great content and acquit the headline but it shows up in Google results pages. Thanks for seo article title tag, checking tool can conduct readability score to click the articles are highly useful was of.
    [Show full text]
  • CSS Lecture 2
    ΠΡΟΓΡΑΜΜΑΤΙΣΜΟΣ ∆ΙΑ∆ΙΚΤΥΟΥ HTLM – CSS Lecture 2 ver. 2.03 Jan 2011 ∆ρ. Γεώργιος Φ. Φραγκούλης ΤΕΙ ∆υτ. Μακεδονίας - 1 Μεταπτυχιακό Τμήμα The HTML head Element The head element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more. The following tags can be added to the head section: <title>, <base>, <link>, <meta>, <script>, and <style>. ΤΕΙ ∆υτ. Μακεδονίας - 2 Μεταπτυχιακό Τμήμα The HTML title Element The <title> tag defines the title of the document. The title element is required in all HTML documents. The title element: – defines a title in the browser toolbar – provides a title for the page when it is added to favorites – displays a title for the page in search-engine results ΤΕΙ ∆υτ. Μακεδονίας - 3 Μεταπτυχιακό Τμήμα Example <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html> ΤΕΙ ∆υτ. Μακεδονίας - 4 Μεταπτυχιακό Τμήμα The HTML base Element The <base> tag specifies a default address or a default target for all links on a page: <head> <base href="http://www.mypages.com/images/" /> <base target="_blank" /> </head> ΤΕΙ ∆υτ. Μακεδονίας - 5 Μεταπτυχιακό Τμήμα The HTML link Element The <link> tag defines the relationship between a document and an external resource. The <link> tag is most used to link to style sheets: <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> ΤΕΙ ∆υτ. Μακεδονίας - 6 Μεταπτυχιακό Τμήμα The HTML style Element The <style> tag is used to define style information for an HTML document.
    [Show full text]
  • Getting Back on the Trail, Combating Information Overload with Topic Maps Thesis for the Cand
    View metadata, citation and similar papers at core.ac.uk brought to you by CORE provided by NORA - Norwegian Open Research Archives UNIVERSITY OF OSLO Faculty of Humanities Department of Linguistics and Scandinavian Studies (Humanistic Informatics) Getting back on the trail, combating information overload with Topic Maps Thesis for the Cand. Philol. degree Rolf B. Guescini May 8, 2006 Contents 1 Historical overview and contributions 1 1.1 Vannevar Bush . 1 1.1.1 Memex . 2 1.1.2 Sequential vs. Associative . 2 1.1.3 From Memex to hypertext . 3 1.2 Theodore Nelson . 4 1.2.1 Literary Machines . 4 1.2.2 Project XANADU . 5 1.2.3 Embedded markup . 6 1.2.4 Other visions and projects on the way . 8 1.3 Douglas Engelbart . 12 1.4 Hypertext before the World Wide Web . 14 1.4.1 Modularity, juxtaposing, and editing . 14 1.4.2 Hierarchical structure vs. non-hierarchical link structures . 15 1.4.3 Filtering of information . 16 1.4.4 Extended link functionality . 16 1.4.5 Paths . 17 1.4.6 High level info to combat overload . 18 1.4.7 Tim Berners-Lee and the World Wide Web . 18 1.4.8 Development of the World Wide Web . 19 1.4.9 WWW becomes commercial . 20 1.4.10 The World Wide Web Consortium . 21 2 The World Wide Web and HTML: What is wrong with hypertext at this point? 23 2.1 The hyper in hypertext . 24 2.1.1 Associative links . 25 2.1.2 Link directionality . 26 2.1.3 Broken links .
    [Show full text]
  • Analysis of Web Spam for Non-English Content: Toward More Effective Language- Based Classifiers
    RESEARCH ARTICLE Analysis of Web Spam for Non-English Content: Toward More Effective Language- Based Classifiers Mansour Alsaleh*, Abdulrahman Alarifi King Abdulaziz City for Science and Technology (KACST), Riyadh, Saudi Arabia * [email protected] a11111 Abstract Web spammers aim to obtain higher ranks for their web pages by including spam contents that deceive search engines in order to include their pages in search results even when they are not related to the search terms. Search engines continue to develop new web spam detection mechanisms, but spammers also aim to improve their tools to evade detection. In OPEN ACCESS this study, we first explore the effect of the page language on spam detection features and we demonstrate how the best set of detection features varies according to the page lan- Citation: Alsaleh M, Alarifi A (2016) Analysis of Web Spam for Non-English Content: Toward More guage. We also study the performance of Google Penguin, a newly developed anti-web Effective Language-Based Classifiers. PLoS ONE spamming technique for their search engine. Using spam pages in Arabic as a case study, 11(11): e0164383. doi:10.1371/journal. we show that unlike similar English pages, Google anti-spamming techniques are ineffective pone.0164383 against a high proportion of Arabic spam pages. We then explore multiple detection features Editor: Muhammad Khurram Khan, King Saud for spam pages to identify an appropriate set of features that yields a high detection accu- University, SAUDI ARABIA racy compared with the integrated Google Penguin technique. In order to build and evaluate Received: June 3, 2016 our classifier, as well as to help researchers to conduct consistent measurement studies, we Accepted: September 23, 2016 collected and manually labeled a corpus of Arabic web pages, including both benign and Published: November 17, 2016 spam pages.
    [Show full text]
  • Creating HTML Meta-Tags Using the Dublin Core Element Set Abstract Creating HTML Meta-Tags with the Dublin Core Element Set Over
    View metadata, citation and similar papers at core.ac.uk brought to you by CORE provided by E-LIS Creating HTML Meta-tags Using the Dublin Core Element Set Christopher Sean Cordes Assistant Professor Instructional Technology Librarian Parks Library Iowa State University Abstract The breadth and scope of information available online and through intranets is making the standardization and use of metadata to identify records imperative if not mandated. Some measure of searchability is provided by the html meta tag<meta>. But the tag has limited potential for describing complex documents. The Dublin Core Initiative group has developed metadata standards that support a broad range of purposes and business models,” most notably the Dublin Core Element Set. The set is fairly easy to learn but must be combined with HTML if to provide metadata for referencing by a web crawler or search engine. This paper will outline the steps needed to create HTML metadata using the Dublin Core Element Set, and some of the benefits of doing so. Keywords: Dublin Core Element Set, HTML, Metadata, Meta tag, Search engine Creating HTML Meta-tags with the Dublin Core Element Set Overview The breadth and scope of information available online and through intranets is making the standardization and use of metadata to identify records imperative if not mandated. There is a small degree of metadata control built in to the HTML language in the meta <meta> element. However this tag has limited potential for describing complex documents. The Dublin Core Initiative a group working towards “the development of interoperable online metadata standards that support a broad range of purposes and business models” developed an element set for building flexible control records for online documents.
    [Show full text]
  • Web Data Management
    http://webdam.inria.fr Web Data Management Web Search Serge Abiteboul Ioana Manolescu INRIA Saclay & ENS Cachan INRIA Saclay & Paris-Sud University Philippe Rigaux CNAM Paris & INRIA Saclay Marie-Christine Rousset Pierre Senellart Grenoble University Télécom ParisTech Copyright @2011 by Serge Abiteboul, Ioana Manolescu, Philippe Rigaux, Marie-Christine Rousset, Pierre Senellart; to be published by Cambridge University Press 2011. For personal use only, not for distribution. http://webdam.inria.fr/Jorge/ For personal use only, not for distribution. 2 Contents 1 The World Wide Web 2 2 Parsing the Web 5 2.1 Crawling the Web . .5 2.2 Text Preprocessing . .8 3 Web Information Retrieval 11 3.1 Inverted Files . 12 3.2 Answering Keyword Queries . 15 3.3 Large-scale Indexing with Inverted Files . 18 3.4 Clustering . 24 3.5 Beyond Classical IR . 25 4 Web Graph Mining 26 4.1 PageRank . 26 4.2 HITS . 31 4.3 Spamdexing . 32 4.4 Discovering Communities on the Web . 32 5 Hot Topics in Web Search 33 6 Further Reading 35 With a constantly increasing size of dozens of billions of freely accessible documents, one of the major issues raised by the World Wide Web is that of searching in an effective and efficient way through these documents to find those that best suit a user’s need. The purpose of this chapter is to describe the techniques that are at the core of today’s search engines (such as Google1, Yahoo!2, Bing3, or Exalead4), that is, mostly keyword search in very large collections of text documents.
    [Show full text]
  • Internet Technologies Some Sample Questions for the Exam
    Internet Technologies Some sample questions for the exam F. Ricci 1 Questions 1. Is the number of hostnames (websites) typically larger, equal or smaller than the number of hosts running an http daemon? Explain why. 2. What is the main difference, with respect to the network topology, between a telephone network and Internet? 3. List the operations performed by the browser, the DNS and a web server A when you request on your browser a page located on web server A. 4. Say what are well formed URL in the following list of items: http://www.unibz.it/~ricci file:///C:/ricci/Desktop/students.doc mailto:[email protected] telnet://www.chl.it:80 1 Larger, may web sites can be hosted on the same physical host. But it is also true that in a web farm many physical machines will serve the same hostname (e.g. google). 2 The telephone line is typically not redundant, i.e., there is just one path from one phone to another phone. So is something is broken in the middle the communication cannot be established. 3 see slide (lect2 5-17-19) 4 all of them 2 Questions 5. What colour is #000000? And #ff0000? 6. What tag will produce the largest heading: <h2>, <h3>, <head>? 7. What types of information is contained in the head element of an HTML file? 8. How the browser will use a meta element like this: <meta name=”keywords” content=”servlet, jsp, beans”/> What kinds of web applications are using the meta elements of web pages? 9.
    [Show full text]
  • An Introduction to Web Page Design
    Chapter Three An Introduction to Web Page Design Introduction Welcome to the beginning of the Web Page Class. In this class we are going to learn the basic building blocks of web pages and how to use them. This can appear to be very complicated. Let’s look at where we ultimately are going. Open a web page in your favorite web browser (i.e. Internet Explorer, Google Chrome, Mozilla Firefox, etc.). Position your mouse cursor on the page, not over an image, and right-click. In the menu that appears, select “View Source” or “View Page Source”. What appears is the code that creates this page in your browser (see example below). Looks complicated doesn’t it? It is complicated; however, it is built out of a Figure 1 Internet Explorer Page Showing Page Source bunch of small components that you will learn during the remainder of this class. If you stick with me and do the little exercises I ask of you during the semester, by its end you will be well on your way toward being able combine them and create such pages on your own. XHTML, HTML, and CSS The code that makes up a webpage consists of two types of coding, the code that defines and organizes the information on the page and the code that formats the information in the webpage. The code that defines and organizes the information on the webpage in XHTML or HTML. We will be using XHTML (see figure 2 for a timeline of XHTL/HTML development). Figure 2 Timeline of the Development of XHTML and HTML What’s the difference and why XHTML? HTML, which stands for HyperText Markup Language, was used in the beginning for the creation of web pages.
    [Show full text]
  • Yadis Specification 1.0
    Yadis Specification 1.0 Yadis Specification Version 1.0 18 March 2006 Joaquin Miller, editor www.yadis.org 1 Yadis Specification 1.0 Table of Contents 0 Introduction........................................................................................................................................................ 3 1 Scope..................................................................................................................................................................... 3 2 Normative References.........................................................................................................................................4 2.1 Requests for Comments............................................................................................................................. 4 2.2 W3C Recommendations.............................................................................................................................4 2.3 OASIS Specifications...................................................................................................................................4 3 Terms and Definitions....................................................................................................................................... 5 3.1 Implementor Terms.................................................................................................................................... 5 3.2 Definitions from other specifications......................................................................................................
    [Show full text]