• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Html
 

Html

on

  • 3,586 views

A complete HTML (beginner's ) tour

A complete HTML (beginner's ) tour

Statistics

Views

Total Views
3,586
Views on SlideShare
3,497
Embed Views
89

Actions

Likes
3
Downloads
225
Comments
1

3 Embeds 89

http://smashingweb.info 40
http://ranjith.zfs.in 26
http://smashingweb.ge6.org 23

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Html Html Presentation Transcript

    • CREATING WEB PAGES USING HTML
    • By : CHARU GUPTA
    • 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
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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
    • 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.
    • 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>
    • 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>
    • 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>
    • ATTRIBUTES OF BODY ELEMENT
      • ~ Background
      • ~Bgcolor
      • ~size
      • ~font
      • ~color
      • ~Left margin
      • ~Top margin….etc
      • The above mentioned attributes are explained in the next section.
    • 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.
    • 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>
    • WORKING IT OUT
    • BGCOLOR
      • <HTML>
      • <HEAD>
      • <TITLE> WELCOME TO OUR SITE </TITLE>
      • </HEAD>
      • <BODY BGCOLOR =&quot;SILVER&quot;>
      • <H1> MY FIRST HTML CODE </H1>
      • </BODY>
      • </HTML>
    • 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>
    • 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>
    • 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.
    • 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.
    • 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.
    • 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>
    • 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>
    • 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>
    • 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>
    • 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>
    • 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>
    • Overall structure of an HTML document
      • <html>
      • <head>
      • <title>The Title of the Document</title>
      • </head>
      • <body bgcolor=&quot;white&quot;>
      • ...
      • </body>
      • </html>
    • CREATING LIST AND INSERTING IMAGES
    • 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
    • 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.
    • 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.
    • 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
    • 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
    • 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
      • >
    • 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”>
    • 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”>
    • EXAMPLE
      • <html>
      • <body>
      • <img
      • border=&quot;0&quot;
      • src=&quot;/images/google.jpg&quot;
      • width=&quot;304&quot;
      • height=&quot;228“
      • >
      • </body>
      • </html>
    • HYPERLINKS AND ANCHORS
    • 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.
    • 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.
    • 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.
    • HYPERTEXT LINK EXAMPLE
    • Source Document
      • <html>
      • <head>
      • <title>Source Document</title>
      • </head>
      • <body>
      • <a href=&quot;target.html#danger&quot;>
      • Better look here
      • </a>
      • </body>
      • </html
    • 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
    • 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.
    • 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.
    • 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.
    • 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.