• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
3,459
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
230
Comments
1
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. CREATING WEB PAGES USING HTML
  • 2. By : CHARU GUPTA
  • 3. INDEX
    • Introduction to HTML
    • 2. Importance of HTML
    • 3. Understanding HTML elements
    • 4. Overall structure of an HTML document
    • 5. Creating list & inserting images
    • 6. Hyperlinks & anchors
    • 7. Conclusion
  • 4. Introduction to HTML
    • HTML = H yper T ext M arkup L anguage
    • HYPERTEXT – An ordinary text that has some ‘extra’ features such as formatting, images, multimedia etc.
    • MARKUP - process of adding ‘extra’ features to ordinary text.
    • LANGUAGE - Means it has its own syntax, slang and rules for proper communication.
  • 5. Short History
    • Initially SGML (Standard Generalised Mark-up Language) – A high level language was used by Department of Defense (DoD).
    • Later HTML developed as a subset of SGML.
    • Advantages of HTML:
    • -- simple
    • -- Best suited for internet transmission.
    • -- lets you create page that can be read on web.
  • 6. Tools for Web Publishing
    • The most basic element of any HTML page is ASCII text.
    • HTML pages, while they include the .htm or .html file extensions, are simply ASCII text files.
    • HTML Editor- Any program that generates ASCII text files.
    • e.g.: A word processor or Microsoft word.
  • 7. Importance of HTML
    • 1. Used to display any type of document on the host computer.
    • 2. A versatile language and can be used on any platform.
    • 3. Used to make the text look attractive.
    • 4. Can link one document with another.
  • 8. Steps to Creating an HTML Document
    • Open a text editor.
    • Create your HTML document
        • Head - not displayed with body
        • Body
    • Save the HTML (extension of .htm or .html)
    • Display your HTML document in WWW browser window (Open File rather than Open Location).
    • Check your work and modify as necessary.
    • Place it on the Web.
  • 9. NOTE:-
    • If we create an HTML page in a word processor THEN we use the Save As command to save it as an ASCII text file.
    • For checking on the appearance of the web page we have created we need a web browser.
    • A web browser should have the ability to load, locate pages from the hard drive.
  • 10. Introduction to HTML
    • A web page is made up of elements, each of which is defined by an HTML code or tag.
    • Document Tags :- The tags that are required for every HTML page we create.
    • HTML document has two distinct parts:
    • 1. A Head
    • 2. A Body
    • Between these two tags, we enter the rest of text and graphics.
  • 11. Understanding Tags
    • The HTML tags include < and > symbol on either side of the tag’s command.
    • If the symbols are not used then the browser will assume the commands as text.
    • HTML elements can be categorized as :
    • Container elements
    • Empty elements
  • 12. HOW TAGS WORK??
    • The first part of the tag <tag name> turns the tag on.
    • The ending part of the tag, </tag name>, contains the &quot;/&quot; slash character.
    • This &quot;/&quot; slash tells a WWW browser to stop tagging the text. Many HTML tags are paired this way. Think of the tag as a container.
    • If you forget the backslash, a WWW browser will continue the tag for the rest of the text in your document,producing undesirable results.
  • 13. HTML Element
    • A container element.
    • Identifies the document as an HTML document.
    • The <HTML> element delimits the beginning and end of HTML document.
    • Contains only the <HEAD> and <BODY> elements.
    • Eg. <HTML>
    • :
    • :
    • </HTML>
  • 14. HEAD Element
    • A container element.
    • Contains information about the document.
    • TITLE element is included in HEAD element.
    • -> TITLE element is a container element.
    • ->used to provide title of the document.
    • Eg.
    • <HTML>
    • <HEAD>
    • <TITLE> This is my first page </TITLE>
    • </HEAD>
    • </HTML>
  • 15. BODY Element
    • A container element.
    • The BODY element contains all the text and images that make up the page. It also contains HTML elements that provide the control and formatting of the page.
    • Eg: <BODY>
        • -------
        • -------
        • </BODY>
  • 16. ATTRIBUTES OF BODY ELEMENT
    • ~ Background
    • ~Bgcolor
    • ~size
    • ~font
    • ~color
    • ~Left margin
    • ~Top margin….etc
    • The above mentioned attributes are explained in the next section.
  • 17. SYNTAX
    • 1. Background:
    • <BODY BACKGROUND =“figure.jpg”>
    • -------
    • </BODY>
    • 2. Bgcolor :
    • <BODY BGCOLOR=“RED”>
    • --------
    • </BODY>
    • 3. Leftmargin:
          • <BODY LEFTMARGIN= VALUE>
          • --------------
          • </BODY>
          • Where, value is in pixels.
  • 18. Conti…
    • 4. Topmargin:
    • <BODY TOPMARGIN=VALUE>
    • --------
    • </BODY>
    • 5.Size:
    • <FONT SIZE = VALUE>
    • Where, Default value=3
    • Valid range= 1-7
    • 6. Color: This attribute changes the colour of the text that will appear on screen.
    • Eg. <BODY>
    • <FONT SIZE=“5” COLOR=“RED”>
    • </FONT>
    • </BODY>
  • 19. WORKING IT OUT
  • 20. BGCOLOR
    • <HTML>
    • <HEAD>
    • <TITLE> WELCOME TO OUR SITE </TITLE>
    • </HEAD>
    • <BODY BGCOLOR =&quot;SILVER&quot;>
    • <H1> MY FIRST HTML CODE </H1>
    • </BODY>
    • </HTML>
  • 21.
  • 22. FONT SIZE EXAMPLE
    • <HTML>
    • <BODY>
    • THIS TEXT IS WRITTEN IN FONT SIZE 3.
    • <FONT SIZE =&quot;+2&quot;>
    • THIS TEXT IS WRITTEN IN FONT SIZE 5.
    • </FONT>
    • <FONT SIZE = &quot;7&quot;>
    • THIS TEXT IS WRITTEN IN FONT SIZE 7.
    • </FONT>
    • <FONT SIZE =&quot;+12&quot;>
    • THIS TEXT IS ASLO WRITTEN IN FONT SIZE 7 'COZ ITS VALUE IS OUT OF THE RANGE.
    • </FONT>
    • </BODY>
    • </HTML>
  • 23.
  • 24. COLOR TESTING
    • <HTML>
    • <HEAD>
    • <TITLE> COLOR TESTING </TITLE>
    • </HEAD>
    • <BODY>
    • <FONT SIZE=&quot;5&quot; COLOR=&quot;RED&quot;>
    • THIS TEXT IS WRITTEN IN FONT SIZE 5 AND IN RED COLOR.
    • </FONT>
    • </BODY>
    • </HTML>
  • 25.
  • 26. LEFT MARGIN
    • <HTML>
    • <HEAD>
    • <TITLE> TESTING THE LEFT MARGIN </TITLE>
    • </HEAD>
    • <BODY LEFT MARGIN = “45&quot;>
    • LET US SET LEFT MARGIN.
    • </BODY>
    • </HTML>
    • The above example will give an output, where the text between the <BODY> element will be indented 45 pixels from the left hand side of the page.
  • 27.
  • 28. TOP MARGIN
    • <HTML>
    • <HEAD>
    • <TITLE> TESTING THE TOP MARGIN </TITLE>
    • </HEAD>
    • <BODY TOPMARGIN = &quot;55&quot;>
    • LET US SET TOPMARGIN.
    • </BODY>
    • </HTML>
    • The above example will give an output, where the text is 55 pixels away from the top of the page.
  • 29.
  • 30. HEADING Element
    • HTML defines six levels of heading.
    • The heading element is written as:
    • <Hn>………………………</Hn>
    • Where n -  level of heading and can take values from 1 to 6.
    • H1 --  most prominent heading ,while
    • H6 --  least prominent heading.
    • Headings are usually displayed in bolder and larger font than the normal text.
    • NOTE: (From the example next)- An extra line is generally inserted above and below the heading.
  • 31. HTML CODE
    • <HTML>
    • <BODY>
    • <H1> HEADING ONE</H1>
    • <H2>HEADING TWO</H2>
    • <H3>HEADING THREE</H3>
    • <H4>HEADING 4 </H4>
    • <H5> HEADING FIVE</H5>
    • <H6>HEADING SIX</H6>
    • </BODY>
    • </HTML>
  • 32.
  • 33. PARAGRAPH Element
    • The PARAGRAPH Element <P> indicates a paragraph.
    • This element is used to insert a line break with extra space in the beginning.
    • The paragraph can be aligned by using the ALIGN attribute.
    • The ALIGN = LEFT/CENTER/RIGHT attribute can be added to the <H1> through to <H6> elements.
    • SYNTAX:
    • <P> ……………………………..</P>
  • 34. HTML CODE
    • <HTML>
    • <BODY>
    • <P> THIS IS FIRST PARAGRAPH </P>
    • <P ALIGN=&quot;CENTER&quot;> THIS IS SECOND PARAGRAPH WHICH IS CENTER ALIGNED
    • </P>
    • <P ALIGN =&quot;RIGHT&quot;> THIS IS THIRD PARAGRAPH WHICH IS RIGHT ALIGNED
    • </P>
    • </BODY>
    • </HTML>
  • 35.
  • 36. STYLE TAGS
    • B (BOLD) Syntax: <B> ---------- </B>
    • I (ITALIC) Syntax: <I> ----------- </I>
    • 3. SUB (Subscript)
    • Syntax: <SUB> ---------- </SUB>
    • 4. SUP (Super script)
    • Syntax: <SUP> ---------- </SUP>
  • 37. HTML code for BOLD & SUBSCRIPT
    • <HTML>
    • <BODY>
    • <H1 ALIGN=&quot;CENTER&quot;><B> SOME CHEMICAL FORMULAS</B></H1> <BR>
    • <B>CO<SUB>2</SUB></B>
    • <B>H<SUB>2</SUB>O<BR></B>
    • H<SUB>2</SUB>SO<SUB>4</SUB>
    • <BODY>
    • <HTML>
  • 38.
  • 39. HTML code for ITALIC & SUP
    • <HTML>
    • <BODY>
    • <H1 ALIGN=&quot;CENTER&quot;><B> <I>SOME MATHEMATICAL FORMULAS</I></B></H1> <BR>
    • (A+B) <SUP>2</SUP>=A<SUP>2</SUP> + B<SUP>2</SUP> + 2AB<BR>
    • (A-B) <SUP>2</SUP>=A<SUP>2</SUP> + B<SUP>2</SUP> - 2AB
    • </BODY>
    • </HTML>
  • 40.
  • 41. Overall structure of an HTML document
    • <html>
    • <head>
    • <title>The Title of the Document</title>
    • </head>
    • <body bgcolor=&quot;white&quot;>
    • ...
    • </body>
    • </html>
  • 42. CREATING LIST AND INSERTING IMAGES
  • 43. Making Lists
    • HTML supports several types of list elements that should be included within the BODY element of the document.
    • The tag used to indicate an item is LI.
    • <LI> tag is an empty element.
    • List can be of two types:
    • Ordered list
    • Unordered list
  • 44. Conti…
    • Ordered list(OL):
    • Syntax:
    • <OL START =“VALUE”
    • TYPE= “A”/“a”/”i”/”I”/”1”>
    • ----------
    • </OL>
    • Where,
    • start=“value” indicates the starting number for the list.
    • Type attribute defines the type of numbering sequence.
  • 45. Conti…
    • Unordered list(UL):
    • Syntax:
    • <UL TYPE = “CIRCLE”/”DISC”/”SQUARE”>
    • --------
    • </UL>
    • TYPE attribute can be one of the following:
    • ~ CIRCLE: Specifies a bullet.
    • ~ DISC: Specifies a solid round bullet.
    • ~ SQUARE: Specifies a square bullet.
  • 46. Unordered List
    • <html>
    • <body>
    • <h4>An Unordered List:</h4>
    • <ul type= “circle”>
    • <li>Coffee
    • <li>Tea
    • <li>Milk
    • </ul>
    • </body>
    • </html>
    • Output
    • An Unordered List:
    • Coffee
    • Tea
    • Milk
  • 47.
  • 48. Ordered List
    • <html>
    • <body>
    • <h4>An Ordered List:</h4>
    • <ol start=“1” type= “1”>
    • <li>Coffee
    • <li>Tea
    • <li>Milk
    • </ol>
    • </body>
    • </html>
    • Output
    • An Ordered List:
    • 1.Coffee
    • 2.Tea
    • 3.Milk
  • 49.
  • 50. INSERTING IMAGES
    • IMG Element :
    • The IMG tag specifies an image to be displayed in an HTML document.
    • It is an empty element.
    • Syntax:
    • <IMG
    • SRC = IMAGE_URL
    • ALIGN= ALIGNMENT
    • BORDER= BORDER WIDTH_VALUE
    • HEIGHT= HEIGHT_VALUE
    • WIDTH= WIDTH_VALUE
    • ALT = TEXT
    • >
  • 51. DESCRIPTION
    • SRC : The value is the URL of the image to be displayed.
    • Eg; <IMG SRC = “CLOUDS.GIF”>
    • ALIGN : Used to determine the vertical alignment of the text adjacent to the image.
    • By default navigator uses BOTTOM.
    • Eg: <IMG SRC = “CLOUDS.GIF” ALIGN = “LEFT”>
    • <IMG SRC = “CLOUDS.GIF” ALIGN = “RIGHT”>
    • <IMG SRC = “CLOUDS.GIF” ALIGN = “BOTTOM”>
    • <IMG SRC = “CLOUDS.GIF” ALIGN = “TOP”>
    • BORDER : Specifies the width of a border around the image. The value must be a positive integer.
    • Eg: <IMG SRC = CLODS.GIF” BORDER = “3”>
  • 52. CONTI…
    • HEIGHT : Specifies the height of an image either in the form of an integer or as a percentage of the height of the window.
    • Eg: <IMG SRC =“ CLOUDS.GIF” BORDER =“3” HEIGHT = 20%>
    • WIDTH : Specifies the width of an image either in the form of an integer or as a percentage of the width of the window.
    • Eg: <IMG SRC= “SKY.GIF” BORDER= “3” HEIGHT= 20% WIDTH= 50%>
    • ALT : Used to give alternate text that will be displayed in place of the image.
    • USAGE: This is required when the user needs to stop the display of images while retrieving a document in order to make the retrieval faster or when the browser does not support graphics.
    • Eg: <IMG SRC=“SKY.GIF” ALT= “CLOUDS IN THE SKY”>
  • 53. EXAMPLE
    • <html>
    • <body>
    • <img
    • border=&quot;0&quot;
    • src=&quot;/images/google.jpg&quot;
    • width=&quot;304&quot;
    • height=&quot;228“
    • >
    • </body>
    • </html>
  • 54.
  • 55. HYPERLINKS AND ANCHORS
  • 56. INTRODUCTION
    • ANCHOR ELEMENT :
    • The Anchor element <A> marks the text as a hypertext link, that the user can click to display an anchor as a document.
    • The <A> or anchor tag is used for creating hypertext links. This tag is a container tag and requires </A> to mark the end of the text, images.
    • Syntax:
        • <A HREF =“URL” > TEXT DESCRIBING LINK </A>
        • DESC:
        • If the above statement is displayed in a browser, the words TEXT DESCRIBING LINK would appear underlined and in another color to indicate that clicking that text starts the execution of the hypertext link.
  • 57. CONTI…
    • HREF
    • The HREF attribute make the text enclosed between the opening <A> and closing </A> anchor elements as hypertext .
    • If the user selects this hypertext the control moves to the document specified by the value of the attribute.
    • Eg: <A HREF = “SHAPE.HTM”> CLICK HERE </A>
    • In the above example selecting the hypertext CLICK HERE takes the reader to the document named SHAPE.HTM
    • SELECTION LINKS : Create links to other parts of the same document in which link appears.
    • This requires two instances of the anchor tag- one that serves as a hypertext link and another that acts as a reference point for that link.
  • 58. CONTI….
    • FOR EXAMPLE:
    • <A HREF = “#SECTION-NAME”> Link to another section of same document </A>
    • <A NAME = “ SECTION-NAME”> New Section </A>
    • The anchor tag that creates the hyperlink is similar to the anchor tag that we have done previously.
    • The only difference is that it begins with (#) sign in HREF text.
    • This sign tells the anchor that it is looking for a section within the current document.
    • The NAME attribute is used to create the actual section within the current HTML document.
    • NAME is like an internal reference; w/o it, though, the link would not work. The NAME text is case sensitive.
  • 59. HYPERTEXT LINK EXAMPLE
  • 60. Source Document
    • <html>
    • <head>
    • <title>Source Document</title>
    • </head>
    • <body>
    • <a href=&quot;target.html#danger&quot;>
    • Better look here
    • </a>
    • </body>
    • </html
  • 61. Target Document
    • <html>
    • <head>
    • <title>Target Document</title>
    • </head>
    • <body>
    • ....
    • … .
    • <a name=&quot;danger&quot;> </a>
    • <h2> Chapter 17: Dangerous Shell Commands
    • </h2>
    • Never execute a shell command that inadvertently changes
    • all vowels to the character 'x'.
    • </body>
    • </html
  • 62.
  • 63. COMMON TAGS USED
    • <HTML> </HTML> Opens and closes the HTML document.
    • <title> </title> This is the title of your page and will appear at the top of your browser’s window.
    • <h1> </h1> <h5> </h5> Header sizes for titles and larger text formats. Or specify font size: <font size=“4”> </font>
    • <img src=“filename.gif”>
      • Sources an image file and needs no closing tag.
  • 64. COMMON TAGS USED
    • <a href=“filename.html”> Place URL </a>
      • Links text or images to the designated file.
    • <b> text </b> Bold text.
    • <i> text </i> Italic text.
    • <u> text </u> Underline text.
    • <br> (no closing) Line break.
    • <hr> (no closing) Horizontal line.
  • 65. POINTS TO REMEMBER
    • There are two kinds of HTML elements used to construct an HTML document. These are container and empty elements.
    • An HTML document should start with a container HTML tag and end with a closing HTML tag.
    • The HTML tags are not case sensitive.
    • The image to be copied should have an extension GIF or JPEG.
    • The items in a list will be displayed in a bulleted form if TYPE attribute is not given.
  • 66. POINTS TO REMEMBER
    • There are five ways in which we can number the list.
    • The IMG tag specifies an image to be displayed in a HTML document.
    • The extension of the image file should be either GIF or JPEG.
    • The image can be aligned as- left, right, top, bottom margin.
    • An Anchor element may not enclose another Anchor element.
    • An image can also be used as an hyperlink.