html tutorial


Published on

Published in: Education, Technology
  • 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 tutorial

  1. 1.  Hyper text markup language (HTML) - The language used to develop web pages is called hyper text markup language (HTML). HTML is the language interpreted by a browser. Web pages are also called HTML documents. HTML is a set of special codes that can be embedded in text to add formatting and linking information. HTML is specified as TAGS in an HTML document (i.e. the web page). HTML Tags – Tags are instruction that are embedded directly into the document. An HTML tag is a single to a browser that it should to something other than just throw text up on the screen. By convention all HTML tags begin with an open angle bracket (<) and end with a close angle bracket (>).
  2. 2.  HTML tags can be of two types:- Paired tags - A tag is said to be paired tag if it, along with a companion tag, flanks the text. For example the <B> tag is paired tag. The <B> tag with its companion tag </B> causes the text contained between them to be rendered in bold. The effect of other paired tags is applied only to the text they contain. In paired tags, the first tag (<B>) is often called the opening tag and the second tag (<B>) is called the closing tag. The opening tag activates the effect and the closing tag turns the effect off. Singular Tags – The second type of tag is the singular or stand-alone tag. A stand-alone tag does not have a companion tag. For example <BR> tag will insert a line break. This tag does not require any companion tag.
  3. 3.  Commonly Used HTML Commands - The Structure of an HTML program – Every HTML program has a rigid structure. The entire web page is enclosed within <HTML> <HTML> tags. Within these tags two distinct sections are created using the <HEAD> </HEAD> tags and the <BODY> </BODY> tags. These sections are described below. Document Head – Information placed in this section is essential to the inner working of the document and has nothing to do with be content of the document. With the exception of information contained within the <TITLE> </TITLE> tags, all information placed within the <HEAD> </HEAD> tags is not displayed in the browser. The HTML tags used to indicate the start and end of the head section are: <HEAD><TITLE>…………</TITLE></HEAD>
  4. 4.  Document Body – The tags used to indicate the start and end of the main body of textual information are: <BODY> ………… </BODY> Page defaults like background color, text color, font size, font weight and so on can be specified as attributes of the <BODY> tag. The attributes that the <BODY> tag takes are:
  5. 5. BGCOLOR Changes the default background color to whatever color is specified with this tag. The user can specify a color by name or its equivalent hexadecimal number. BACKGROUND Species the name of the Gif file that will be used as the background of the document. This Gif tiles up across the page to give a background. TEXT Changes the body text color from its default value to the color specified with this attribute. Example:- <BODY BACKGROUND =“starfield.gif” TEXT=red>
  6. 6.  Titles And Footers – Title – A web page could have a title that describes what the page is about without being too wordy. This can be achieved by using the TITLE tag. Text included between the <TITLE>…..</TITLE> tag shows up in the title bar of the browser window. Footer – Just as a title can be placed in the title bar of the browser window, certain information is commonly placed at the foot of the web page. Copyright information, contact details of the creator of the web page and so on are the type of information traditionally placed at the foot of the web page. The HTML tags are: <ADDRESS>…..</ADDRESS> This tag should ideally be placed immediately after the last line of the textual material of the web page. However, it could also be placed anywhere in the body of the document. The text typed within these tags always appears in italics.
  7. 7.  Example:- <HEAD><TITLE>This is the title </TITLE></HEAD> <BODY> …………. <ADDRESS>This is the footer </ADDRESS> </BODY> Text Formatting – Paragraph breaks – A blank line always separates paragraphs in textual material. The tag that provides this functionality is <P>. On encountering this tag the browser, moves into a new line, skipping one line between the previous line and the new line.
  8. 8.  Line Breaks – When text to start from a new line not continue on the same line (without skipping a blank line), the <BR> tag should be used. This tag simply jumps to the start of the next line. Example: Silicon Chip Technologies, <BR> A/5, Jay Apartments, <BR> Vile Parle (East), <BR> Mumbai – 400057. Output: Silicon Chip Technologies, A/5, Jay Apartments, Vile Parle (East), Mumbai – 400057.
  9. 9.  Emphasizing Material In A Web Page – Document pages are usually divided into sections and subsection (i.e. pages could have headings and sub headings), which need to be emphasized. HTML provides certain HEADING STYLES and HORIZONTAL RULES, which helps break text into logical sections with visual appeal. Heading Styles – HTML supports six different levels of heading. The highest-level header format is <H1> and the lowest level is <H6>. All the styles appear in BOLDFACE and the size of the heading depends on the level chosen, i.e. <H1> to <H6> Example: <H3> The early years </H3> Output: The early years
  10. 10.  Drawing Lines – The tag <HR> draws line and horizontal rules. This tag draws a horizontal line across the whole page, wherever specified. The attributes to the <HR> tag are: Attributes Description ALIGN Align the line on the Browser screen, which is by default, aligned to the center of the screen,. ALIGN = LEFT will align the line to the left of the screen ALIGN = RIGHT will align the line to the right of the screen ALIGN = CENTER will align the line to the center of the screen SIZE Changes the size of the rule. WIDTH Sets the width of the rule. It can be set to a fixed number of pixels, or to a percentage of the available screen width.
  11. 11.  Example: Welcome to our web site. <HR ALIGN=LEFT WIDTH=10 SIZE=4> Text Styles – Bold – Displays text in BOLDFACE style. The tags used are <B>… </B> Example: <B> Welcome to our home page! </B> Output: Welcome to our home page! Italics – Displays text in ITALICS. The tags used are between <I>…</I> Example: <I> Welcome to our home page! </I> Output: Welcome to our home page!
  12. 12.  Underline – Displays text as UNDERLINED, The tags used are <U>…..</U> Example: <U> Welcome to our home page! </U> Output: Welcome to our home page! Focus 3: Emphasize the headings and sub-headings displayed on the DEPL web page.
  13. 13.  Lists – Types Of Lists – Unordered List (Bullets) – An unordered list starts with the tag <UL> and ends with </UL>. Each list item start with the tag <LI>. The attributes that can be specified with <LI> are: TYPE Specifies the type of the bullet. TYPE= FILLROUND will give a solid round black bullet TYPE= SQUARE will give a solid square black bullet Example: Some of these products include: <UL> TYPE= FILLROUND> <LI> Floppies <LI> Hard Disks <LI> Monitors </UL>
  14. 14.  Output: Some of these products include: Floppies Hard Disks Monitors Ordered List (Numbering) An ordered list start with the tag <OL>. Each list items start with the tag <LI>. The attributes that can be specified with <LI> are:
  15. 15. TYPE Controls the numbering scheme to be used. TYPE = “1” will give counting number (1, 2, ……..) TYPE = “A” will give Uppercase letters (A, B, …….) TYPE = “a” will give Lowercase letters (a, b, ……..) TYPE = “I” will give Uppercase Roman Numerals (I, II, …….) TYPE = “i” will give Lowercase Roman Numerals (i, ii, ……..)START Alters the numbering sequence. Can be set to any numeric value.VALUE Changes the numbering sequence in the middle of an ordered list. It is to be specified with the <LI> tag.
  16. 16.  Example: Some of these products include: <OL TYPE=“1” START=“3”> <LI> Floppies <LI> Hard Disks <LI> Monitors </OL> Output: Some of these product include:1. Floppies2. Hard Disks3. monitors
  17. 17.  Definition Lists – Definition list values appear within tag <DL> and <DL>. Definition lists consists of two parts: Definition term appears after the tag <DT> Definition description appears after the tag <DD> Example: <DL> <DT> Keyboard <DD> An input device <DT> Printer <DD> An output device </DL>
  18. 18.  Output: Keyboard An input device Printer An output device Adding Graphics To HTML Documents – Other than text, HTML allows placing of static and/or animated images in an HTML page, HTML accepts two picture file formats .gif and .jpg. Once an image is ready and stored in the above-mentioned formats, it can be inserted into a web page using the tag <IMG>, which takes the name of the image file (file name .gif file name .jpg or file name .jpeg) as an attribute. In addition, HTML also allows control of the height, width, border and so on, of every image placed on the web page. The <IMG> tag takes the following attributes:
  19. 19.  Example: <IMG Align=CENTER Border=0 Height=57 H Space=0 Src=“Image1.GIF” Width=447> The attributes taken by the <IMG……..> tag are explained in the following examples. Using The Border Attribute – Example: <HTML> <HEAD><TITLE> Working with image </TITLE></HEAD> <BODY Background=“images/texturel1.gif”> <B> Controlling image borders!</B><CENTER> <I> Image without a BORDER </I><BR><BR> <IMG Src=“images/corp.gif”><BR><BR> <I> Image with BORDER = 3</I><BR><BR> <IMG Border=3 Src=“images/crop.gif”><BR> </CENTER> </BODY> </HTML>
  20. 20.  Linking Documents – Links – HTML allows linking to other HTML document as well as image. Clicking on a section of text or an image in one web page will open an entire web page or an image. The text or on image that provides such linking is called Hypertext, a Hypertext, or a Hotspot. Link are are created in a web page by using the <A>….</A> tags. Anything written between the <A></A> tags become a hyperlink/hotspot. Example: <A Href=“filename.html”> Hyperlinks can be of two types: Links to an external document Link (jumps) to a specific place within the same document Generally done in case of a web page containing a large amount of text Example: <A Href=“deatails.html”> Visit my Home Page</A>
  21. 21.  Code for index.html – <HTML> <BODY Background=“../images/texture1.gif”> <CENTER><FONT Face=“Latinopalsh”> <B>SILICON CHIP TECHNOLOGIES</B><BR> <IMG Width=50 Height=50 Src=“../images/traing31.gif”> </FONT></CENTER><HR> <H4>SCT provides Corporate Training For Following Products:</H4> <UL> <LI><A Href=“HTMLSyl.html”>HTML</A> <LI><A Href =“JsSyl.html”>JavaScript</A> <LI><A Href=“CGISyl.html”>CGI</A> <LI><A Href=“JvSyl.html”>java</A> <LI><A Href=“PBSSyl.html”>Power Builder</A> <LI><A Href=“OraSyl.html”>Oracle Developer 2000</A> <LI><A Href=“DbaSyl.html”>Oracle DBA</A> </Ul><SPACER Size=275>Click for more Details! </BODY> </HTML>
  22. 22.  Images As Hyperlinks – Just as text can act as a hyperlink, so also images can act as hyperlinks. Anything included within <A>…</A> tags become a Hotspot. Thus, an image can be made a Hotspot by enclosing an <IMG> tag within the <A>…</A> tags. The <IMG> tag places the image on the screen, and because the <IMG> tag is enclosed within the <A>…</A> tags, it becomes a Hotspot. Example: <A Href=“details.html”><IMG Src=“mickey.gif”></A>
  23. 23.  Frames – Introduction To Frames – Until now each web page when opened takes over the entire browser screen. The browser screen could not be split into separate (Unique) sections, showing different but related information. The <Frame> Tag – SRC=“url” Indicates the URL of the document to be loaded in to frame. Margin Height=“n” Specifies the amount of white space to be left at the top and bottom of the frame. Margin Width=“n” Specifies the amount of white space to be left along the sides of the frame. Name=“name” Gives the frame a unique name so it can be targeted by other documents. The name given must being with an Alphanumeric character. Noresize Disables the frames resizing capability. Scrolling Controls the appearance of horizontal and vertical scrollbars in a frame. This takes the value YES/NO/AUTO.
  24. 24.  Example: <HTML> <FRAMESET Row=“30%”> -- Divides the screen into 2 rows. One occupying 30% of the screen. And the other occupying the remaining space, i.e.70% of the screen.