Html basic


Published on

presentation for learining html basic tags and concepts

Published in: Education
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Html basic

  2. 2.  What is Markup ?Markup is information that is added to adocument to convey information about documentsstructure or presentation.Markup Elements are made of start tag <strong>and Also might also have closing tag </strong>.E.G:<strong> HTML </strong>
  3. 3. What is Html ?Html stands for hyper Text Markup Languageused widely to develop web pages over internetto publish the information.It is a basic Markup language to develop webpages over internet .Html has Well defined syntax .All documents should follow a formatstructure.
  4. 4. The World Wide Web Consortium (W3C) is theprimary organization that attempts to standardizeHtml.W3C has defined Html As an Application Of theStandard Generalized Markup Language (SGML).SGML is the language which is used to defineother languages by specifying document structurein the form of DATA TYPE DEFINITION (DTD) .
  5. 5. <html><head><title>Document Title Goes Here</title>…….Head Information Goes Here</head><body>….Document content & markup go Hear</body></html>
  6. 6. Html Document is a simple text file savedwith the (.html ) extension .The html document is well structured anddesigned format as an application. Within <html> tag Basic Structure of thedocument relates two primary sections the“head” & the “body”.
  7. 7. Contains meta-information.Search engines use meta-information to indexweb pages.Apart from it head element can includeauthor contact info. , scripts , style sheets,comments and most importantly a page title.The starting <head> tag must contain closing</head> tag , because it enclose some contentof the document.
  8. 8. Contains information about title bar at thetop of the browser window .Regardless of specification variations , the<title> tag must be used in every HTMLdocument as it gives an HTML document a titleby which it is known to browsers and indexingrobots.E.G :<title> Document title </title>
  9. 9. The body of the document is delimited by <body>and</body> .Under the HTML 4.01 specification and manybrowsers, the body element is optional .Only one body element can appear per document .The body element delimits the document itself ,itsattributes are primarily used to effect change acrossthe entire document such as setting backgroundimages , background colors , and link , text colors .
  10. 10. Block level elements :<p> , <h1> these elements include line break .Inline elements :<b> (bold) , <strong> <strong>.Miscellaneous elements :<img> , used to render image to the document.Browser specific elements :<marquee> , used to make the text to mobile intothe browser window .
  11. 11.  Easy to use, learn and implement . Do not contain any complex programmingstructure .Do not need any software tool or specificapplication to make the document , it simply useany text editor to write the coding .Almost 100% compatibility with the browser’still now published .Important tool for the beginner’s in the webdevelopment field .
  12. 12.  Considered as poor language for webdevelopment.Concept of dynamic web pages is ignored inthis language .Hand coding makes the work tedious ascompare to other web development technique.Using html interactive programming can not bedone as it is not a programming language.Traditional html is going away .Html is WYSIWYG( what you see is what youget).
  13. 13. Html is not case sensitive : E.G :<b> Go boldly </b><B>Go boldly </B>Html attribute values may be case sensitive.E.G:<img SRC=“test.gif ”>Is same as<img src=“test.gif ”>but<img src=“test.gif ”> will not be same as<img src=“TEST.GIF”>
  14. 14. Html is sensitive to single white space character .E.G :<b>T e s t o f S p a c e s </b> <br/>o/p = T e s t o f S p a c e sHtml follows content model .E.G :<ol><li> Element 1</li></ol>Elements must have close tag unless empty.E.G :<p> This is closed </p>
  15. 15. A few tags such as horizontal rule <hr> or line break<br> .E.G:This isn’t closed <br>Elements should be nested properly .E.G:<b><i>Nested tags are here <i></b>Attribute value should be Quoted .<img src=“test.gif ”>
  16. 16. Headings :The heading element are used to create“headlines” in documents. There are six differentlevels of headings Supported by html.<h1>……….</h1> ( first heading)...<h6>………..</h6> ( sixth heading)
  17. 17. <html><head><title>Document Title Goes Here</title></head><body><h1> Heading 1 </h1><h2> Heading 2 </h2><h3> Heading 3 </h3><h4> Heading 4 </h4><h5> Heading 5 </h5><h6> Heading 6 </h6></body></html>
  18. 18. <p> Tag : It generally rendered f lush left, with a raggedright margin.<br> Tag:Empty element , do no have closing tag.Used to break a line in a document.<div> Tag:Used to divide large section of group text.<center> Tag :To keep the alignment of text to center of webpage.
  19. 19. <pre> Tag :Stands for preformatted text.The <pre> tag can be used to indicate text thatshould not be formatted by the browser.It retains all spacing and returns ,It does not ref low when browser resized .Tag requires to be closed with </pre> tag .E.G:<pre> T E A </pre>
  20. 20. What is URL ?Stands for uniform resource locators .It is uniform way to refer to objects and services over internet.E.G’s url of yahoo website which uniquelyidentifiesIt’s services .
  21. 21. In html the main way to define hyperlinks iswith the anchor element.In hypertext end points of link typically calledas anchors.For linking purpose anchor <a> tag is usedwhich again requires href attribute .The href attribute is set to the url of the targetresource.The text enclosed within the a tag is calledhotspot.
  22. 22. E.G :<a href=“hubble.html”> Visit image </a>Attributes for anchors :<a href=“logo.html” title=“Hubble Telescope”>Hubble Telescope</a>
  23. 23.  To insert or render the image to the htmldocument <img> tag is used by setting it’s srcattribute to the url of the image.It is an empty element , so no need to have aclosing tag.Syntax:<img src=“f lower.jpg”>The above element will render the imagenamed f lower to the document.
  24. 24. height :Used to set the height of the image .width :Used to set the width of the image.alt :Incase if image is not rendered properly insteadof broken image it will show some message oftext.Border :Used to make the border to the image .(Note :Values of attributes above are measured in pixel unit.)
  25. 25. hspace :Used to create horizontal space between imageand other html objects or window from bothsides. vspace :Used to create vertical space between image andother html objects or window from both sides.Eg:<img src=“image.jpg” height=“100” width=“150”alt=“robot” border=“1” hspace=“50” vspace=“50”>
  26. 26. In its simplest form , a table places informationinside the cells formed by dividing a rectangleinto rows and columns .In markup , a table tag pair <table>…..</table>, contains an optional captionelement followed by one or more rows,<tr>……</tr>.Each row contains cells by holding a heading.<th>…..</th> or data <td>….</td>.
  27. 27. Attributes :width :Used to set the width of the table .height :Used to set the height of the table .cellspacing :used to set the space between two cells in a table.cellpadding :Used to set the padding between cell and wall .Note : above attribute values are are measured interms of pixel or percentage.
  28. 28. rowspan and colspan attributes :By adding rowspan and colspan attributes to thetable elements , it is possible to create data cells thatspan a given number of rows or columns.Widely used attribute to create interactive webpagesBy making the whole window as a table collection .
  29. 29. A frame is an independent scrolling region , or window, of a web page can be divided into many individualframes , which can even be nested within other frames.Each frame can be separated from other frame usingborder attribute .Each separate frame can contain a different document,referenced by a unique URL .Each frame can provide scrollbar and other controls tomanipulate the size of the frame .
  30. 30.  A framed document divides a browser window intomultiple panes , or smaller window frames .Frames offer many useful navigation possibilitiessuch as a table of content , site index , and lists oflink.Frames offer fixed-screen navigation .The lack of scrolling and minimization of screenrefresh afforded by framed documents can providegreat advantage over the single window approach.
  31. 31. Each frame can contain different document.It uses <frameset> tag instead of <body>tag .The frameset element uses totally different doctypestatement which refer to frameset DTD .Major attributes for frameset element are rows andcols .
  32. 32. <html><head><title>My Frame</title></head><frameset cols=“50,50”><frame src=“first.html” name=“parent”><frame src=“second.html” name=“child”></frameset></html>Note :the above code will divide window into two parts each of 50 pixel ,in terms of columns.
  33. 33. Cols :It is used to make the partition of the window in termsof columns .Syntax :<frameset cols=“200,100”>..</frameset>Rows :It is used to make the partition of the window in termsof rows .Syntax :<frameset rows=“200,100”>..</frameset>
  34. 34. name :Value of this attribute makes nomenclatureto the individual frame .Used to target the contain of one frame in tothe other frame .Id :Works same as name attribute but id Isunique for all the frames .Used for the purpose of style sheets andscripting activities .
  35. 35. Use the target attribute in an <a> tag to set thetarget for the anchor.For example a link such as<a href=“” target=“display”>It will load the site into the window called“display” , if such a frame exists .If the target specified by the name doesn’t exist ,the link typically loads in to a new window .
  36. 36. Up to now all the frames shown has beenattached to the sides of the browser (left , right,top, bottom).Another form of frame is known as a f loatingframe but more appropriately called as inlineframe .An inline frame is defined by the iframeelement and can occur anywhere within the<body> of an HTML document.
  37. 37. Syntax :<iframe src=“greet.html”></iframe>Some of the attributes of <iframe> tag aresrcnameWidthHeightvspacehspacealign
  38. 38. Frames contain numerous problem regarding design .Problems with bookmarks.Site navigation is confusing .Makes webpage difficult and reserved while printing.Problem with url context and search enginecompatibility .Tedious work for the developer to keep maintainingframe target contains .