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>
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.
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) .
<html><head><title>Document Title Goes Here</title>…….Head Information Goes Here</head><body>….Document content & markup go Hear</body></html>
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”.
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.
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>
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 .
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 .
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 .
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).
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”>
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 sHtml 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>
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 ”>
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)
<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.
<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>
What is URL ?Stands for uniform resource locators .It is uniform way to refer to objects and services over internet.E.G :www.yahoo.comIt’s url of yahoo website which uniquelyidentifiesIt’s services .
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.
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.
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.)
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”>
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>.
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.
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 .
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 .
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.
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 .
<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.
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>
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 .
Use the target attribute in an <a> tag to set thetarget for the anchor.For example a link such as<a href=“www.yahoo.com” 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 .
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.
Syntax :<iframe src=“greet.html”></iframe>Some of the attributes of <iframe> tag aresrcnameWidthHeightvspacehspacealign
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 .