1 / 81

HTML

HTML. The Mother Tongue of The Browser. Web Site. World Wide Web. The World Wide Web (Web) is a network of information resources. The Web relies on three mechanisms to make these resources readily available to the widest possible audience:

kaul
Download Presentation

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 The Mother Tongue of The Browser

  2. Web Site

  3. World Wide Web • The World Wide Web (Web) is a network of information resources. • The Web relies on three mechanisms to make these resources readily available to the widest possible audience: • A uniform naming scheme for locating resources on the Web (e.g., URLs). • Protocols, for access to named resources over the Web (e.g., HTTP). • Hypertext, for easy navigation among resources (e.g., HTML).

  4. Web Programming • Programming for the World Wide Web involves both • server-side programming, and • client-side (browser-side) programming. • The publishing language used by the World Wide Web is HTML.

  5. Web Programming • Servers make web documents, which are specified in HTML, available on request to browsers. • Browsers display, to users, web documents which have been received from servers.

  6. HTML Background • HTML stands for “Hyper Text Mark-up Language”. • The language used to design Web Page. • HTML was invented in 1990 by a scientist called Tim Berners-Lee. The purpose was to make it easier for scientists at different universities to gain access to each other's research documents. • HTML standards are organized by W3C : http://www.w3.org/MarkUp/

  7. Hyper-Text-Markup-Language • Hyper is the method by which you move around on the web. • Text is self-explanatory. • Mark-up is what you do with the text. You are marking up the text the same way you do in a text editing program with headings, bullets and bold text and so on. • Language is what HTML is. It uses many English words. Simply, HTML is a Language, as it has code-words and syntax like any other language.

  8. HTML • HTML is used for creating static web pages. • It is designed to display data & focus on how data looks. • HTML’s role on the web is to tell the browser how a document should appear. • HTML was the only language one could use to create Web pages. • HTML is about displaying information.

  9. HTML Functionalities • HTML gives authors the means to: • Publish online documents with headings, text, tables, lists, photos, etc. • Include spread-sheets, video clips, sound clips, and other applications directly in their documents. • Link information via hypertext links, at the click of a button. • Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc.

  10. HTML Versions • HTML 2.0 was developed by the IETF's HTML Working Group, which set the standard for core HTML features based upon current practice in 1994. • HTML 3.2 was W3C's first Recommendation for HTML on January 14, 1997. • HTML 4.0 was first released as a W3C Recommendation on December 18 ,1997. • HTML 4.01 is a revision of the HTML 4.0 became a W3C Recommendation December 24, 1999. • XHTML is a stricter and cleaner version of HTML. • HTML5 is the next major version of HTML.

  11. Sample Webpage

  12. Sample Webpage HTML Structure Title tags <html> <head> <title>First Demo</title> </head> <body> <p>Welcome all</p> <!-- The content of the document --> </body> </html> Body tags

  13. HTML Basic Structure • HTML documents contain text and various tags that define elements such as headings, paragraphs and Hyperlinks. • Each element describes how the document should be displayed. • An HTML document is divided into a • head section • The title of the document appears in the head (along with other information about the document). • body section • The content of the document appears in the body.

  14. HTML Element Syntax • Each element has a number of properties associated with it: • An HTML element starts with a start tag / opening tag. • An HTML element ends with an end tag / closing tag. • The element content is everything between the start and the end tag. • Some HTML elements have empty content. • Empty elements are closed in the start tag. • Most HTML elements can have attributes. • HTML documents consist of nested HTML elements. • Most elements can contain other HTML elements. <start_of_tag attribute_name=“attribute value”> Content </end_of_tag> • HTML elements can have attributes. • Attributes provide additional information about the element. • Attributes are always specified in the start tag. • Attributes come in name/value pairs like: name="value“.

  15. General Element Attributes • Core Attributes • Not valid in base, head, html, meta, script, style, and title elements.

  16. HTML Document Elements Hierarchy document head body script title meta style p h1-h6 anchor form image tables style script legend label input button select textarea

  17. <meta> Tag • Meta tags are used to store information usually relevant to browsers and search engines. • Define the author of the document as well as the content of the webpage. • provides additional information about the page; for example, which character encoding the page uses, a summary of the page’s content, instructions to search engines about whether or not to index content, and so on. <meta name="description" content="an html tutorial“ /> <meta name="keywords" content="html, webdesign, javascript“ /> <meta name="author" content="bill gates“ /> <meta http-equiv="refresh" content="5; url=http://www.abc.com“ /> Example!

  18. Inside <body> Section • Background • Colors • Images • Tables • Frames • Forms • Text • Formatting • Resizing • Layout • Listing • Images • Inserting images (GIF & jpg) • Adding a link to an image • Links • To local pages • To pages at other sites • To bookmarks

  19. HTML Text • The <font> tag will change the font. <font color="red" face="arial" size="2"> This local text looks different.</font>

  20. Text Format Appearance

  21. Text Size Appearance

  22. Text Layout

  23. HTML Lists • HTML supports • ordered “Numbered” lists, • unordered “Bulleted” lists and • definition lists.

  24. Numbered List <ol start="5"> <li>text</li> <li>text</li> </ol> <ol type=“A"> <li>text</li> <li>text</li> </ol>

  25. Bulleted Lists • You have the following bullet options: • disc • circle • square

  26. Definition List • The <dd> tag is used to describe an item in a definition list. • The <dd> tag is used in conjunction with <dl> (defines the definition list) and <dt> (defines the item in the list). <dl>  <dt>Coffee</dt>    <dd>- black hot drink</dd>  <dt>Milk</dt>    <dd>- white cold drink</dd></dl> Example!

  27. HTML Images • Images types used in browsers are : .gif & .jpg <img src=“abc.gif"> <img src=“http://www.xyz.com/abc.gif"> • Resizing <img src=“abc.gif" width="60" height="60"> <img src=“" width="" height="“ align=“” alt=“” hspace="" vspace="">

  28. HTML Images • Alignment of Images You can align images according to the text around it Default, left, right, top, texttop, middle, center. • Alternative Text <img src=“logo.gif" alt="This is a text that goes with the image"> Example!

  29.  HTML Links Click <a href="http://www.yahoo.com">here</a> to go to yahoo. • Link targets <a href="http://www.yahoo.com" target="_blank"> • Image link <a href="myfile.htm"><img src="rainbow.gif"></a> <a href="url“ target=“”>Link text</a> • The target can be one of the following Values to identify where the link is loaded : • "_blank“Loads the link into a new blank window. • "_self“ Loads the link into the same window. (default)

  30.  HTML Links • Link to email <a href="mailto:youremailaddress">Email Me</a> <a href="mailto:email@hotmail.com?subject=SweetWords">Send Email</a>

  31.  HTML Links • Link Within a Page • To link to an anchor you need to: • Create a link pointing to the anchor • Create the anchor itself. <a name =“chapter4”></a> Click <a href=“# chapter4”>here</a> to read chapter 4 <a name =“top”></a> Click <a href=“#top”>Top</a> Example!

  32. <marquee> Tag • <marquee attribute1 attribute2>moving text< / marquee > (IE)Places a scrolling text marquee into the document. Example!

  33. Forms

  34. Sample Form Design

  35. HTML Forms <form> <!-- Here goes form fields and HTML --></form> • <form> Main Attributes • action=address • Specifies where to send the form-data when a form is submitted. • method=post or method=get • Specifies how to send form-data.

  36. Form Fields • A <form> can contain <input> elements: • Text field • Password field • Hidden field • Check box • File • Submit button • Reset button • Image button • Radio button • Other elements: • <textarea> • <label> • Drop-down menu

  37. <input> Text Field Attributes • size • maxlength • name • value • align • tabindex: Specifies the tab order of an element. <input type="text" size="25" value="Enter your name here!">

  38. <input> Password Field Attributes • size • maxlength • name • value • align • tabindex Enter Password : <input type="password" size="25">

  39. <input> file Field • Used for file uploads. • When used, two controls appear in the browser: • a field that looks similar to a text input, and • a button control that’s labeled Browse…. The text that appears on this button can’t be changed. • accept attribute, is used to define the kinds of files that may be uploaded. • Browser support for this attribute is inconsistent, however, the job of validating file uploads is best left to the server. <input type="file" name="picture" id="picture“ accept="image/jpeg, image/gif"/>

  40. <textarea> Field Attributes • rows • cols • Name • tabindex • readonly • disabled <textarea cols="40" rows="5" name="myname"> Now we are inside the area - which is nice.</textarea>

  41. <input> Checkbox Field Attributes • name • value • align • tabindex • Checked <input type="checkbox" name="option1" value="Milk"> Milk<br> <input type="checkbox" name="option2" value="Butter" checked> Butter<br>

  42. <input> Radio Button Field Attributes • name • value • align • tabindex • checked <input type="radio" name="group1" value="Milk"> Milk<br> <input type="radio" name="group1" value="Butter" checked =“checked”> Butter<br> <input type="radio" name="group1" value="Cheese"> Cheese

  43. Drop-Down Menu Tags • <select> Attributes • name • size • multiple • <option> Attributes • selected • value <select>  <option>Milk</option>  <option selected>Coffee</option>   <option>Tea</option> </select>

  44. <input> Submit button / Reset button Attributes • name • value • align • tabindex <input type="button" value="Hello world!">

  45. <input> Image button • Image buttons have the same effect as submit buttons • Attributes • name • src • align • border • width • Height • tabindex <input type="image" src=“abc.gif" name="image" width="60" height="60"> Example!

  46. Frames

  47. Sample Web Page Designed Using Frames

  48. Frames • Frames allow multi-windowed layout. • i.e. splitting a single Web page into multiple windows, each of which can open a different document. • Framesare independent, scrollable portions of a Web browser window, with each frame capable of displaying a different document.

  49. Frames Tags

  50. HTML <frame> Attributes

More Related