Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.



Published on

Published in: Education, Technology
  • Be the first to comment


  1. 1. HTML- Concept of Hypertext HTML, which stands for HyperText Markup Language, is the predominant markup languagefor web pages. HTML is the basic building-blocks of webpages. HTML is written in the form of HTML elements consisting of tags, enclosed in angle brackets(like <html>), within the web page content. HTML tags normally come in pairs like <h1> and </h1>. The first tag in a pair is the start tag, the second tag is the end tag (they are also calledopening tags and closing tags). The purpose of a web browser is to read HTML documents and compose them into visual or audible web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page. HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. It can embed scripts in languages such as JavaScript which affect the behavior of HTML webpages. Elements HTML documents are composed entirely of HTML elements that, in their most general form have three components: a pair of element tags, a "start tag" and "end tag"; some element attributes within the start tag; and finally, any textual and graphical content between the start and end tags. The HTML element is everything between and including the tags. Each tag is enclosed in angle brackets. A pair of tags and the content these include are known as an element . HTML section tags To organize the various parts of HTML that describes a Web page, we use a set of section tags. The types of html tags in each section of web page definition have a specifics purpose:
  2. 2. 1- <html></html> These occur at the start and end of an HTML document. Start and end html tags enclose all the other html tags we use to describe the web page.2- <head></head> Start and end header tag immediately follow the start HTML tag (<html>) and denote the web page header. We can use tags in the web page header to include such information as the name of author and date of the created page. In addition, we insert tags with information that describes your page so that Web search engines can add references to your page to their search indexes. Of the HTML tags and information you place in the header section, the visitor’s browser displays only the Web page title. You insert the Web page title in the header section between start and end title tags (<title></title>), as shown in the code sample that follows this list of section tags.3- <body></body> Start and end body tag immediately follow the web page header section and denote the web page body. The body section of the web page contains the tags that tells the web browser what to display onscreen and how we want it to look. The < head > element: Often referred to as the head of the page, this contains information about the page (this is not the main content of the page). For example, it might contain a title and a description of the page, or instructions on where a browser can find CSS rules that explain how the document should look. It consists of the opening < head > tag, the closing < /head > tag, and everything in between. The < body > element: Often referred to as the body of the page, this contains the information you actually see in the main browser window. It consists of the opening < body > tag, closing < /body > tag, and everything in betweenBuilding HTML document:- HTML text documents are actually quite simple to create. To create anHTML document, you open a text-editing program and then type in theHTML code. After you have entered the HTML statements, you save yourdocument as a text file with an .htm or .html extension. For example, start
  3. 3. your favorite text editor (such as Windows Notepad) now, and enter thefollowing HTML:<html><head><title>Example of a Simple HTML Document</title></head><body><p>HELLO WORLD! Here I am.</p></body></html>Now, save your work to a Web page file (that is, a file with an .htm or .htmlextension) on your hard drive. Create a folder (such as C:HTMLExamples) inwhich to store the Web pages. Then, save the code you entered for thisexample as TestPage.htm in the folder you create.Then start your Web browser, and type File:// followed by the drive letter andpathname of your Web page into the browser’s Address field. For example, ifyou saved the Web page in this example as TestPage.htm in theC:HTMLExamples folder, type File://c:/HTMLExamples/TestPage.htminto the browser’s Address field. Then, press ENTER. Your Web browser, inturn, will display the Web page.Inserting text:In standard word processing, a paragraph defines a group of sentences.Typically, a blank line or an indented first word identifies the start of a newparagraph. When you insert text into a Web page, the </p> tag controls theend of text and the subsequent beginning of the next paragraph. The </p> taginstructs the Web browser to move down one line, insert a blank line, and thento begin the next paragraph on the line below the blank line for the textfollowing the </p> tag.For eg:<html><head><title>Welcome to Lots of Text </title></head><body>
  4. 4. <p>The text between the two paragraph tags defines asingle paragraph. Paragraphs contain one or moresentences</p><p>The next paragraph starts here with a blank lineinserted between the two paragraphs</p></body></html>HTML also has several text formatting tags you can use to change theappearance of text, usually for emphasis. To apply a formatting style, placethe format’s start tag at the beginning of the text you want to style. Thefollowing list describes three of the most common formatting tags.• <b></b> Text placed between the Bold tags is displayed in bold font.• <i></i> Text placed between the Italic tags is displayed in italic font.• <u></u> Text placed between the Underline tags is displayed with anunderline.Images:For eg:<html><head><title> Example of text and graphic placement</title></head><body><img src="flower.jpg"></body></html>Hyperlinks:A hypertext link is a single word or a group of words upon which a visitorclicks to instruct the Web browser to retrieve a Web page (or other file) fromthe Web server.
  5. 5. <a href="info.htm">Click here to move to the nextpage.</a>Table:The HTML tables you use to display content on a Web page, like the tables you see inprinted materials consist of columns of data arranged in rows.• <table></table> Alert the Web browser that it is to treat the text between the start andend tags as a table• <tr></tr> (table row) Alert the Web browser that it is to put the data items and perhapsheadings between the start and end tags on a single, new row in the table• <td></td> (table data) Alert the Web browser that the HTML tags, attributes, and text(if any) between the start and end tags is content (in other words, the data) that the Webbrowser is to display in a table columnFor example, you would write the following HTML code to have a Web browser displaythe simplethree-column, two-row table shown here:<table border="1"><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr></table>• border Attribute in a <table> tag that tells the Web browser the number of pixels wideto draw the border around the perimeter of the table and each of the table’s cells• <caption> </caption> Alert the Web browser that it is to style the text between thestart and end tags as a caption (most browsers use a boldface font)• <th></th> (table heading) Alert the Web browser that the text between the start and endtags is to be formatted as heading text (most browsers use a boldface font)<table border="1" ><caption>Tags and Attributes Used to Create aTable</caption><tr><th>HTML Tag</th><th>Description</th></tr>
  6. 6. Form:From a designer’s viewpoint, forms let you establish a dialog with your site’s visitors.Instead of using text and pictures to send information, forms let you use text boxes, checkboxes, radio buttons, and selection menus to retrieve information.<form name="ExampleForm"><p>First Name: <input type="text" name="FirstName"size="15">Last Name: <input type="text" name="LastName" size="20"></p><p>[Form RESET and SUBMIT pushbuttons go here]</p></form><html><body><script language="JavaScript"><!--function ValidateForm(Form){if (Form.Email.value == ""){alert("Please enter a value for the "E-mail" field.");Form.Email.focus();return(false);}else return(true);}// --></script><input type="checkbox" name="DT" value="ON">Desktop<input type="radio" value="Yes" name="ShareEmail">YesFrames:Frames divide a browser window into two or more separate pieces or panes, with eachpane containing a separate web page. One of the key advantages that frames offer isthat you can load and reload single panes without having to reload the entire contentsof the browser window. A collection of frames in the browser window is known as aframeset .
  7. 7. A frameset divides the window into rows and columns (rather like a table). The simplestof framesets might just divide the screen into two rows, whereas a complex framesetcould use several rows and columns.< html >< head >< title > Frames example < /title >< /head >< frameset rows=”150, *, 100” >< frame src=”top_frame.html” / >< frame src=”main_frame.html” / >< frame src=”bottom_frame.html” / >< noframes > < body >This site uses a technology called frames. Unfortunately, yourbrowser does not support this technology. Please upgradeyour browser and visit us again!< /body > < /noframes >< /frameset >< /html >The border attribute specifies the width of the border of each frame in pixels.border=”10”The frameborder attribute specifies whether a border should be displayed betweenframes. The following indicates that there should not be any borders (which is the sameas if the border attribute is given a value of 0 ):frameborder=”0”List:You can create three types of lists in XHTML:Unordered lists , which are like lists of bullet points
  8. 8. Ordered lists , which use a sequence of numbers or letters instead of bullet pointsDefinition lists , which allow you to specify a term and its definition< ul >< li > Bullet point number one < /li >< li > Bullet point number two < /li >< li > Bullet point number three < /li >< /ul >< ol >< li > Point number one < /li >< li > Point number two < /li >< li > Point number three < /li >< /ol >< ol type=”i” >< li > Point number one < /li >< li > Point number two < /li >< li > Point number three < /li >< /ol >< ol type=”A” start=”4” >< li > Point number one < /li >< li > Point number two < /li >< li > Point number three < /li >< /ol >