1 / 42

HTML

HTML. HyperText Markup Language: A set of tags and rules for using them in developing hypertext documents

sanaa
Télécharger la présentation

HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML HyperText Markup Language: A set of tags and rules for using them in developing hypertext documents Hypertext Markup Language is the tags used to structure Web pages so that a browser can display it in a way that is also influenced by the browser's design and the users preferences for font size, style, etc. Hypertext Markup Language is the tags used to structure Web pages so that a browser can display it in a way that is also influenced by the browser's design and the users preferences for font size, style, etc.

  2. Develop Websites with HTML

  3. XHTMLExtensible Hypertext Markup Language • The next generation of HTML, compliant with XML standards. Although it is very similar to the current HTML, it follows a stricter set of rules, thus allowing for better automatic code validation. • XHTML (eXtensible HTML) is a version of HTML that restricts the use of the HTML language with the same restrictions of the XML language. The main difference is that all the tags are lower case and must be properly closed. For instance, you must write <br/> with a / before the closing bracket. Also, with the proper declarations in the header, one can extend XHTML with any number of languages. For instance, the math language is used to describe mathematical formulas directly within XHTML

  4. DHTML • Dynamic HTML, or DHTML, is an umbrella term for a collection of technologies used together to create interactive and animated web sites by using a combination of a static markup language (such as HTML), a client-side scripting language (such as JavaScript), a presentation definition language (such as CSS), and the Document Object Model. • DHTML allows scripting languages to change variables in a web page's definition language, which in turn affects the look and function of otherwise "static" HTML page content, after the page has been fully loaded and during the viewing process. Thus the dynamic characteristic of DHTML is the way it functions while a page is viewed, not in its ability to generate a unique page with each page load. • By contrast, a dynamic web page is a broader concept — any web page generated differently for each user, load occurrence, or specific variable values. This includes pages created by client-side scripting, and ones created by server-side scripting (such as PHP, Perl, JSP or ASP.NET) where the web server generates content before sending it to the client.

  5. XML (Extensible Markup Language) • XML is a set of rules for encoding documents electronically • XML started as a very constrained version of HTML. It is used for all sorts of things such as XHTML and any type of data handling in many different type of software.

  6. Basic Structure <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <TITLE>My first HTML document</TITLE> </HEAD> <BODY> <P>Hello world! </BODY> </HTML

  7. Doc Type A valid HTML document declares what version of HTML is used in the document. The document type declaration names the document type definition (DTD) in use for the document (see [ISO8879] This means that in a document type declaration, authors may safely use a system identifier that refers to the latest version of an HTML 4 DTD.

  8. Head Element The HEAD element contains information about the current document, such as its title, keywords that may be useful to search engines, and other data that is not considered document content. User agents do not generally render elements that appear in the HEAD as content. They may, however, make information in the HEAD available to users through other mechanisms

  9. Title Element • Every HTML document must have a TITLE element in the HEAD section. • Authors should use the TITLE element to identify the contents of a document. Since users often consult documents out of context, authors should provide context-rich titles. Thus, instead of a title such as "Introduction", which doesn't provide much contextual background, authors should supply a title such as "Introduction to Birds of Sri Lanka" instead.

  10. Meta data A common use for META is to specify keywords that a search engine may use to improve the quality of search results. When several META elements provide language-dependent information about a document, search engines may filter on the lang attribute to display search results using the language preferences of the user <-- For speakers of US English --> <META name="keywords" lang="en-us" content="vacation, Greece, sunshine"> <-- For speakers of British English --> <META name="keywords" lang="en" content="holiday, Greece, sunshine"> <-- For speakers of French --> <META name="keywords" lang="fr" content="vacances, Gr&egrave;ce, soleil">

  11. Text formatting <html> <head> <title> Title of the page here</title> </head> <body> <p>Introduction- birds of Sri Lanka</p> <p>There are 26 endemic birds in Sri Lanka<br> Following are the varieties</p> </body> </html>

  12. Text formatting <html> <head> <title> Title of the page here</title> </head> <body> <p><b>This is bold face text</b></p> <p><u>This is underlined text</u></p> <p><i>This text is in italics</i></p> <p><b><font face="Arial">This is bold face Arial text</font></b></p> <p><b><font face="Arial" color="#FF0000">This is bold face Arial red color text</font></b></p> <p><b><font face="Arial" color=red>This is bold face Arial red color text</font></b></p> <p><b><font face="Arial" size="6" color=green>The font size is 6 or 24pt</font></b></p> </body> </html>

  13. Comments <!-- this is a comment -->

  14. Headings <h1>Heading1</h1> <h2>Heading2</h2> <h3>Heading3</h3> <h4>Heading4</h4> <h5>Heading5</h5> <h6>Heading6</h6>

  15. Ordered List <ol> <li>Sparrow</li> <li>Mynah</li> <li>Crow</li> <li>Parrot</li> </ol>

  16. Unordered List <ul> <li>Sparrow</li> <li>Mynah</li> <li>Crow</li> <li>Parrot</li> </ul>

  17. Tables <table border="1" width="41%" id="table1"> <tr> <td width="208">Name</td> <td width="129">Mathematics</td> <td>English</td> </tr> <tr> <td width="208">Nimal</td> <td width="129">45</td> <td>56</td> </tr> <tr> <td width="208">Sunil</td> <td width="129">34</td> <td>51</td> </tr> <tr> <td width="208">Kamala</td> <td width="129">78</td> <td>41</td> </tr> </table>

  18. Images <img border="0" src="file:///C:/Users/Dell/Documents/mypicture.jpg" width="229" height="229">

  19. Hyperlinks To a text <p> <a href="http://www.microsoft.com">Click to go to Microsoft Web site</a></p> To an Image <a href="http://www.yahoo.com"><img border="0" src="file:///C:/Users/Dell/Documents/mypicture.jpg" width="229" height="229"></a>

  20. Frames Frames are most typically used to have a menu in one frame, and content in another frame. When someone clicks a link on the menu that web page is then opened on the content page. Here is a classic example of a basic "index" frameset with a menu on the left and content on the right. <html> <head> </head> <frameset cols="30%,*"> <frame src="menu.html"> <frame src="content.html"> </frameset> </html> • frameset - The parent tag that defines the characteristics of this frames page. Individual frames are defined inside it. • frameset cols="#%, *"- Cols(columns) defines the width that each frame will have. In the above example we chose the menu (the 1st column) to be 30% of the total page and used a "*", which means the content (the 2nd column) will use the remaining width for itself. • frame src="" -The location of the web page to load into the frame.

  21. Frames <FRAMESET ROWS="75%, *" COLS="*, 40%"> <FRAME SRC="framea.html"> <FRAME SRC="frameb.html"> <FRAME SRC="framec.html"> <FRAME SRC="framed.html"> </FRAMESET>

  22. Frames <html> <head> </head> <frameset rows="20%,*"> <frame src="title.html"> <frameset cols="30%,*"> <frame src="menu.html"> <frame src="content.html"> </frameset> </html> frameset rows="#%, *"- rows defines the height that each frame will have. In the above example we chose the new title (the 1st row) to be 20% of the total page height and used a "*", which means that menu and content (which are the 2nd row) will use the remaining height.

  23. Background Colour <body bgcolor=red> </body>

  24. Web 2.0 Web 2.0 websites allow users to do more than just retrieve information. By increasing what was already possible in "Web 1.0", they provide the user with more user-interface, software and storage facilities, all through their browser. This has been called "Network as platform" computing. Users can provide the data that is on a Web 2.0 site and exercise some control over that data. These sites may have an "Architecture of participation" that encourages users to add value to the application as they use it.

  25. Web 2.0 Web 2.0 can be described in 3 parts which are as follows: Rich Internet Application (RIA) - It defines the experience brought from desktop to browser whether it is from a graphical point of view or usability point of view. Some buzz words related to RIA are AJAX and Flash. Service-oriented Architecture (SOA) - It is a key piece in Web 2.0 which defines how Web 2.0 applications expose its functionality so that other applications can leverage and integrate the functionality providing a set of much richer applications (Examples are: Feeds, RSS, Web Services, Mash-ups) Social Web - It defines how Web 2.0 tend to interact much more with the end user and making the end user an integral part.

  26. Web 3.0 Technology According to Wikipedia, an online encyclopedia, “Web 3.0 is a third generation of Internet based Web services, which emphasize machine-facilitated understanding of information in order to provide a more productive and intuitive user experience.”. The third generation of Internet services is collectively consists of semantic web, microformats, natural language search, data-mining, machine learning, recommendation agents that is known as Artificial Intelligence Web 3.0 TechnologyWith the Internet dominating the business world, the need to have an effective web 3.0 sites has increased among companies. In today's always-on world, a company's web site is critical to its ability to compete and succeed. Our top priority is to provide high-quality updates on web 2.0 and 3.0 solution around the world. Web 3.0 is defined as the creation of high-quality content and services produced by individuals using Web 2.0 technology as an enabling platform.

  27. Web 3.0 Technology Web 3.0 Technologies (Semantic Web) Includes • Artificial intelligence • Automated reasoning • Cognitive architecture • Composite applications • Distributed computing • Knowledge representation • Ontology (computer science) • Recombinant text • Scalable vector graphics • Semantic Web • Semantic Wiki • Software agents

  28. CSS- Cascading Style Sheets • CSS was created to clearly separate the style of web pages from the description of the boxes and text forming pages. • Pages download faster, sometimes by as much as 50% • You have to type less code, and your pages are shorter and neater. • The look of your site is kept consistent throughout all the pages that work off the same stylesheet. • Updating your design and general site maintenance are made much easier, and errors caused by editing multiple HTML pages occur far less often.

  29. CSS There are 3 ways to apply CSS to HTML • in-line styles • internal styles (embedded) • external style sheets

  30. In-line styles • To use in-line styles you place the "style" attribute within the relevant HTML tag. The style attribute can contain any CSS property. • An in-line style can apply to a whole HTML element or it can apply to a selected area within that element. For example it can apply to a whole paragraph or it can apply to only a string of text within the paragraph. <html > <head> <title>this is the title of the web page</title> </head> <body> <p style="color: red"> the text in this paragraph is red </p> <p> this is the <span style="color: red">best CSS and HTML tutorial </span> available on the world wide web </p> </body> </html>

  31. Internal Style Sheets(Embedded) <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>this is the title of the web page</title> <style type="text/css"> p { color: red; } </style> </head> <body> <p> the text in this paragraph will be red </p> <p> the text in this paragraph is also going to be red </p> </body> </html>

  32. Internal Style Sheets <html > <head> <title>Untitled Document</title> <style type="text/css"> .NewStyles { font-family: Arial, Helvetica, sans-serif; font-size: 36px; font-style: italic; font-weight: bold; color: #0033CC; text-decoration: underline; } </style> </head> <body class="NewStyles"> New Styles </body> </html>

  33. External Style Sheets • External style sheets are styles that can be applied to as many web pages as you like that are on the same website. With external style sheets there are at least 2 documents: the document that the styles are on and the the web page that the styles apply to (of course you can apply the styles to multiple web pages on the same site). • The web page(s) need to link to the style sheet by using the following code within the openning and closing <head> tags. • <link rel="stylesheet" type="text/css" href="mystylesheet.css" /> <html > <head> <title>this is the title of the web page</title> <link rel="stylesheet" type="text/css" href="mystylesheet.css" /> </head> <body> <p> the text in this paragraph is red </p> <p> I now know HTML and CSS </p> </body> </html>

  34. CSS file NS { font-family: Arial, Helvetica, sans-serif; font-size: 36px; font-style: italic; font-weight: bold; color: #0033CC; text-decoration: underline; }

  35. Calling into HTML <link rel="stylesheet" type="text/css" href="Styles.css" /> <html> <body> <NS> This is style </NS> </body> </html>

  36. Link to the HTML Document <html > <head> <title>Untitled Document</title> <link href="file:///C|/B.Ed(IT)/TestWeb/Mystyles.css" rel="stylesheet" type="text/css" /> </head> <body class="MyStyles"> This is my styles </body> </html>

  37. Link to the HTML code <html > <head> <title>Untitled Document</title> <link href="file:///C|/B.Ed(IT)/Styles/MySty.css" rel="stylesheet" type="text/css" /> </head> <body> <p class="MyStyles">This is External style Sheet</p> </body> </html>

  38. W3C The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards. Led by Web inventor Tim Berners-Lee and CEO Jeffrey Jaffe, W3C's mission is to lead the Web to its full potential. Contact W3C for more information.

  39. What does W3C do? • W3C's primary activity is to developing protocols and guidelines that ensure long-term growth for the Web. W3C's standards define key parts of what makes the World Wide Web work. Learn more about W3C's mission. • Where is W3C located? • W3C does not have a single physical headquarters. There are three institutions, however, that "host" W3C: MIT (in Cambridge, MA, USA), ERCIM (in Sophia-Antipolis, France), and Keio University (near Tokyo, Japan). • The W3C staff is distributed around the world, but there are concentrations of people in Cambridge, Massachusetts (USA), Sophia-Antipolis (France), and Tokyo (Japan). In addition, W3C is represented in 17 other regions of the world via representatives based at organizations. W3C calls these regional points of contact "W3C Offices." • How is W3C funded? • W3C receives funds from: • W3C Member dues • Research grants and other sources of private and public funding • Individual donations of money and equipment

  40. What is the difference between the Web and the Internet? • From the definition in the Wikipedia: "The Internet is a global system of interconnected computer networks that interchange data by packet switching using the standardized Internet Protocol Suite (TCP/IP)." • Thus, the Internet is defined by the TPC/IP standards. • The Web, on the other hand, is defined in W3C's Architecture of the World Wide Web, Volume I as follows: "The World Wide Web (WWW, or simply Web) is an information space in which the items of interest, referred to as resources, are identified by global identifiers called Uniform Resource Identifiers (URI)." • Thus, the Web is defined by other specifications. The first three specifications for Web technologies defined URLs, HTTP, and HTML.

  41. Choosing a DOCTYPE • According to HTML standards, each HTML document requires a document type declaration. The "DOCTYPE" begins the HTML document and tells a validator which version of HTML to use in checking the document's syntax. • If standard HTML does not meet your needs but you still wish to gain the benefits of HTML validation. • The following DOCTYPEs are commonly used: • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">

  42. What is HTML validation? • This is the process that analyzes an HTML document incomparison to standard HTML rules, identifying errors andon-standard codes. • Web pages are rendered using HTML(Hyper Text Markup Language). • As with any language thereare rules and standards that should be followed. • For example the HTML 4.01 Specification (rules and standards)are available at http://www.w3.org/TR/html4/. • You can check the html validation of your web page by entering your urlat: http://validator.w3.org/

More Related