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

Html tags

on

  • 1,447 views

All basics tags of HTML and CSS.....

All basics tags of HTML and CSS.....

Statistics

Views

Total Views
1,447
Views on SlideShare
1,364
Embed Views
83

Actions

Likes
0
Downloads
35
Comments
0

2 Embeds 83

http://localhost 81
http://www.docshut.com 2

Accessibility

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Html tags Html tags Presentation Transcript

    • Introduction of
      CSS and HTML For the Web
      By-
      GauravJaiswal
      M.Tech. (1st year)
      S.R.M.S.C.E.T. Bareilly
    • Contents
      Introduction of HTML
      HTML page format
      Basics elements
      Important tags
    • HTML --- Hypertext Markup Language
    • Introduction of HTML
      An HTML document is simply a text file that contains the information you want to
      publish and the appropriate markup instructions indicating how the browser should
      structure or present the document.
      A graphical overview of the HTML markup syntax shown so far is presented here :
      Tag Attribute Attribute
      name name value
      <h1 class = “primary”>Example Heading</h1>
      Attribute
      start tag affected tag end tag
      HTML tag
      Versions of HTML --
    • HTML Page Format
      <HTML>
      <HEAD>
      <TITLE> Qi’s web! </TITLE>
      </HEAD>
      <BODY>
      <H1> Hello World </H1>
      <! Rest of page goes here. This is a comment. >
      </BODY>
      </HTML>
    • 7
      BODY Element
      <BODY attribute name="attribute value">
      Deprecated attributes (but still used)
      BACKGROUND=“Sunset.jpg” (can be tiled)
      BGCOLOR=color
      TEXT=color
      LINK=color (unvisited links)
      VLINK=color (visited links)
      ALINK=color (when selected)
      The full syntax of the elements allowed in the body element
    • Some HTML basics Elements
    • 9
      Headings
      <H1 ...> text </H1> -- largest of the six
      <H2 ...> text </H2>
      <H3 ...> text </H3>
      <H4 ...> text </H4>
      <H5 ...> text </H5>
      <H6 ...> text </H6> -- smallest of the six
      ALIGN="position" --left (default), center or right
      Examples-
    • 10
      <HTML>
      <HEAD>
      <TITLE>Document Headings</TITLE>
      </HEAD>
      <BODY>
      Samples of the six heading types:
      <H1>Level-1 (H1)</H1>
      <H2>Level-2 (H2)</H2>
      <H3><U>Level-3 (H3)</U></H3>
      <H4>Level-4 (H4)</H4>
      <H5>Level-5 (H5)</H5>
      <H6>Level-6 (H6)</H6>
      </BODY>
      </HTML>
    • 11
      <P> Paragraph
      <P> defines a paragraph
      Add ALIGN="position" (left, center, right)
      But </P> is optional
      Example-
      <BODY>
      <P>Here is some text </P>
      <P ALIGN="center"> Centered text </P> <P><P><P>
      <P ALIGN="right"> Right-justified text
      </BODY>
    • 12
      Fonts
      <P><FONT COLOR="red" SIZE="2" FACE="Times Roman">
      This is the text of line one </FONT>
      <FONT COLOR="green" SIZE="4" FACE="Arial">
      Line two contains this text </FONT>
      Here is some text. Please read carefully. </P>
    • 13
      Ordered (Numbered) Lists
      <OL TYPE="1">
      <LI> Item one </LI>
      <LI> Item two </LI>
      <OL TYPE="I" >
      <LI> Sublist item one </LI>
      <LI> Sublist item two </LI>
      <OL TYPE="i">
      <LI> Sub-sublist item one </LI>
      <LI> Sub-sublist item two </LI>
      </OL>
      </OL>
      </OL>
    • 14
      Unordered (Bulleted) Lists
      <UL TYPE="disc">
      <LI> One </LI>
      <LI> Two </LI>
      <UL TYPE="circle">
      <LI> Three </LI>
      <LI> Four </LI>
      <UL TYPE="square">
      <LI> Five </LI>
      <LI> Six </LI>
      </UL>
      </UL>
      </UL>
    • 15
      <A> Anchors (Hyperlinks)
      Link to an absolute URL:
      If you get spam, contact <A HREF="htttp:www.microsoft.com">
      Microsoft </A> to report the problem.
      Link to a relative URL:
      See these <A HREF="#references"> references </A>
      concerning our fine products.
      Link to a section within a URL:
      Amazon provided a <A HREF="www.amazon.com/#reference">
      reference for our company. </A>
    • 16
      Hyperlinks
      Examples-
      <BODY>
      <H3>Welcome to <A HREF="http://www.srmscet.edu">
      <STRONG>Computer Science</STRONG></A>
      at the <A HREF="www.srmscet.edu">SRMSCET, Bareilly.</A>
      </H3>
      </BODY>
    • 17
      Images
      SRC is required
      WIDTH, HEIGHT may be in units of pixels or percentage of page or frame
      WIDTH="357"
      HEIGHT="50%"
      Images scale to fit the space allowed
      Examples--
    • 18
      Images
      <HTML>
      <BODY>
      <imgsrc=“1.jpg" alt="Graham Allan" height="320" width="150">
      <imgsrc=“2.jpg" lowsrc="loading.jpg" border="0" height="50%“ width="50%" alt="Picture of Olivia" longdesc="olivia-bio.html">
      <a href="home.html"><imgsrc=“google.png" width="50" height="20"
      alt="Link to Home Page" /></a>
      </BODY></HTML>
    • 19
      Tables
      • Elements of tables in HTML are-
      <TABLE> table tag
      <CAPTION> optional table title
      <TR> table row
      <TH> table column header
      <TD> table data element
    • 20
      Tables
      <table bgcolor="white" border="2">
      <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td> </tr>
      <tr>
      <td>Cell 5</td>
      <td>Cell 6</td> </tr> </table>
      <table bgcolor="yellow">
      <caption>Widgets by Area</caption>
      <thead align="center" bgcolor="green" valign="middle">
      <tr>
      <td>Region</td>
      <th>Regular Widget</th>
      <th>Super Widget</th> </tr>
      </thead>
      <tbody>
      <tr>
      <th>West Coast</th>
      <td>10</td>
      <td>12</td> </tr>
      <tr>
      <th>East Coast</th>
      <td>1</td>
      <td>20</td> </tr> </tbody>
      </table>
    • 21
      cellspacing=10
      cellpadding=10
    • 22
      <TR> Table Row Attributes
      Valid for the table row:
      ALIGN -- left, center, right
      VALIGN -- top, middle, bottom
      BGCOLOR -- background color
      Example--
      <TABLE ALIGN=“left" WIDTH="300" HEIGHT="200">
      <TR ALIGN="left" VALIGN="top" BGCOLOR="red"><TD>One</TD><TD>Two</TD>
      <TR ALIGN="center" VALIGN="middle" BGCOLOR="lightblue"><TD>Three</TD><TD>Four</TD>
      <TR ALIGN="right" VALIGN="bottom" BGCOLOR="yellow"><TD>Five</TD><TD>Six</TD>
      </TABLE>
    • 23
      <TD> Table Cell Attributes
      Valid for the table cell:
      colspan -- how many columns this cell occupies
      rowspan – how many rows this cell occupies
      Example--
      <TABLE ALIGN="center" WIDTH="300" HEIGHT="200"
      border="1">
      <TR>
      <TD colspan="1" rowspan="2">a</TD>
      <TD colspan="1" rowspan="1">b</TD>
      </TR>
      <TR>
      <TD colspan="1" rowspan="1">c</TD>
      </TR>
      </TABLE>
    • 24
      Frames
      Frames help control navigation and display
      <FRAME> attributes include
      FRAMEBORDER – yes or 1 for borders
      FRAMESPACING – width of border
      BORDERCOLOR – color
      SRC – location of HTML to display in frame
      NAME – destination for TARGET attribute
    • 25
      Frames
      <FRAMESET ROWS="75%,25%">
      <FRAMESET COLS="*,*,*">
      <FRAME SRC="http://www.google.com">
      <FRAME SRC="http://www.facebook.com">
      <FRAME SRC="http://www.yahoo.com">
      </FRAMESET>
      <FRAMESET COLS="*,*">
      <FRAME SRC="http://www.rediffmail.com">
      <FRAME SRC="http://www.gmail.com">
      </FRAMESET>
      </FRAMESET>
    • Some Important HTML tags with example
    • 1. <abbr> (Abbreviation)
      Examples :
      <p><abbr title="California">Calif</abbr></p>
      2. <acronym> (Acronym)
      Examples :
      <p><acronym title="Extensible Markup Language">XML</acronym>
      <acronymtitle="Soci&eacute;t&eacute; Nationale de Chemins de
      Fer">SNCF</acronym></p>
    • 3. <area> (Image Map Area)
      Examples :
      <map id="primary" name="primary">
      <area shape="circle" coords="200,250,25" href="another.html">
      <area shape="default" nohref>
      </map>
      4. <applet> (Java Applet)
      Example :
      <applet code="atarigame.class" align="left" archive="game.zip” height="250" width="350">
      <param name="difficulty" value="easy">
      <strong>Sorry, you need Java to play this game.</strong> </applet>
      5. <address> (Address)
      Example :
      <address>PINT, Inc.<br>
      2105 Garnet Ave.<br>
      San Diego, CA 92109<br>
      U.S.A.</address>
    • 6. <base> (Base URL)
      Examples :
      <base href="http://www.htmlref.com/">
      7. <basefont> (Base Font)
      Example :
      <basefont color="#ff0000" face="Helvetica" size="+2">
      8. <big> (Big Font)
      Example :
      <p>This text is regular size. <big>This text is larger.</big> Now back to regular size.</p>
      9. <blink> (Blinking Text)
      Example :
      <blink>Annoying, isn't it?</blink>
      10. <blockquote> (Block Quote)
      Example :
      <blockquote cite="http://www.loc.gov/rr/program/bib/ourdocs/DeclarInd.html">
      We hold these truths to be self-evident, that all men are created equal,
      that they are endowed by their Creator with certain unalienable rights,
      that among these are life, liberty and the pursuit of happiness. </blockquote>
    • 11. <caption> (Table Caption)
      Example :
      <table border="1">
      <caption align="top">Our High-Priced Menu</caption>
      <tr> <td>Escargot</td>
      <td>Filet Mignon</td>
      <td>Big Mac</td>
      </tr> </table>
      12. <cite> (Citation)
      Example :
      <p>This presentation is presented by <cite>GauravJaiswal,M.Tech student
      </cite> batch 2011.</p>
      13. <code> (Code Listing)
      Example :
      <p>To increment a variable <var>count</var>, use
      <code> count++ </code> or <code> count = count + 1 </code>.</p>
      14. <center> (Center Alignment)
      Examples :
      <center>This is in the center of the page.</center>
    • 15. <dir> (Directory List)
      Example :
      <dir> <li>Header Files</li>
      <li>Code Files</li>
      <li>Comment Files</li> </dir>
      16. <div> (Division)
      Examples :
      <div class="special" id="div1" style="background-color: yellow;"> Divs are useful for setting arbitrary style </div>
      17. <em> (Emphasis)
      Example :
      <p><em>This is the important point</em> to consider, not this other less exciting point.</p>
      18. <hr> (Horizontal Rule)
      Examples :
      <hr align="center" width="100%" size="3" color=“blue" />
      19. <input> (Input Form Control)
      Example :
      <form><p>Enter your name: <input type="text" maxlength="35" size="20"><br>
      Enter your password: <input type="password" maxlength="35" size="20">
      </p> </form>
    • 20. <isindex> (Index Prompt)
      Examples :
      <isindex action="cgi-bin/search.pl" prompt="Enter search terms">
      21. <kbd> (Keyboard Input)
      Example :
      <p>On a Linux or Unix based system you can list files by typing
      <kbd>ls</kbd> at a command prompt.</p>
      22. <map> (Client-Side Image Map)
      Example :
      <map name="mainmap" id="mainmap">
      <area shape="circle" coords="200,250,25" href="file1.html" /> </map>
      23. <meta> (Meta-Information)
      Example :
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    • 24. <menu> (Menu List or Command Menu)
      Example :
      <menu>
      <li>Fish</li>
      <li>Beef</li>
      <li>Chicken</li> </menu>
      25. <option> (Option in Selection List)
      Examples :
      <p>Which is your favorite dog?:
      <select>
      <option value="Australian Shepard">Sabrina</option>
      <option value="German Shepard">Lucky</option> </select> </p>
      26. <param> (Object Parameter)
      Examples :
      <applet code="plot.class">
      <param name="min" value="5">
      <param name="max" value="30">
      <param name="line-style" value="dotted">
      </applet>
    • 27. <pre> (Preformatted Text)
      Examples :
      <pre>
      Within PREFORMATTED text A L L formatting IS PRESERVED
      NO m a t t e r how wild it is. </pre>
      28. <samp> (Sample Text)
      Example :
      <p>Use the following salutation in all e-mail messages to the boss:
      <samp>Please excuse the interruption, oh exalted manager.</samp></p>
      29. <script> (Scripting)
      Examples :
      <script type="text/javascript">
      alert("Hello World !!!"); </script>
      30. <select> (Selection List)
      Examples :
      <form action="#" method="get">
      <p><label>Choose your favorite colors:</label>
      <select name="colors" multiple="multiple" size="2">
      <option>Red</option>
      <option>Yellow</option> </select>
      </p> </form>
    • 31. <small> (Small Text)
      Examples :
      <p>Here is some <small>small text</small>.</p>
      32. <strike> (Strikeout Text)
      Examples :
      <p>This line contains a spelling <strike>mistake</strike> mistake</p>.
      33. <strong> (Strong Emphasis)
      Examples :
      <p>It is really <strong>important</strong> to pay attention.</p>
      34. <style> (Style Information)
      Examples :
      <html> <head>
      <style type="text/css">
      body {background: black; color: white; font: 12px Helvetica;}
      h1 {color: red; font: 14px Impact;}
      </style> </head> </html>
    • 35. <sup> (Superscript)
      Examples :
      <p>Here is some <sup>superscripted</sup> text.</p>
      36. <textarea> (Multiline Text Input)
      Example :
      <textarea id="CommentBox" cols="40" rows="8">
      Default text in field </textarea>
      37. <tt> (Teletype Text)
      Examples :
      <p>Here is some <tt>monospaced text</tt></p>.
      38. <var> (Variable)
      Examples :
      <p>In Math the variable <var>x</var> holds the answer to many of life's most important questions. </p>
      39. <sub> (Subscript)
      Examples :
      <p>Here is some <sub>subscripted</sub> text.</p>
    • CSS---Cascading Style Sheet
    • Cascading Style Sheet (CSS)
      Introduction
      CSS general form
      Style rules
      Advantages and disadvantages
      4 Ways To Put CSS And HTML Together
    • Introduction
      CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements.
      Cascade is a method of defining the weight (importance) of individual styling rules thus allowing conflicting rules to be sorted out should such rules apply to the same selector.
      Style Sheets are templates, very similar to templates in desktop publishing applications, containing a collection of rules declared to various selectors (elements).
    • 40
      CSS
      General form:
      Property name value Declaration separation
      h1 {font-size: xx-large; color: red;}
      Selector
      Declaration Declaration Rule
      Declaration block
    • Understanding Style Rules
      A Style Rule is composed of two parts: a selector and a declaration.
      TH {color: red;}.
      The Selector indicates the element to which the rule is applied.
      The Declaration determines the property values of a selector.
      Declaration
      Selector
    • The Property specifies a characteristic, such as color, font-family, position, and is followed by a colon (:).
      The Value expresses specification of a property, such as red for color, Arial for font family, 12 pt. for font-size, and is followed by a semicolon (;).
      P {color: red;}
      Property
      Value
    • Advantages of CSS
      CSS saves timeWhen most of us first learn HTML, we get taught to set the font face, size, color, style etc. every time it occurs on a page. This means we find ourselves typing (or copying & pasting) the same thing over and over again. With CSS, you only have to specify these details once for any element. CSS will automatically apply the specified styles whenever that element occurs.
      Pages load fasterLess code means faster download times.
      Easy maintenanceTo change the style of an element, you only have to make an edit in one place.
      Superior styles to HTMLCSS has a much wider array of attributes than HTML.
      Disadvantages of CSS
      Browser compatibilityBrowsers have varying levels of compliance with Style Sheets. This means that some Style Sheet features are supported and some aren't. To confuse things more, some browser manufacturers decide to come up with their own proprietary tags.
    • 4 Ways To Put CSS And HTML Together
      • 1. Defining a style sheet inside of the HTML document,
      • inside the <HTML> tag, known as “INLINE Style Sheet”.
      • 2. Using a <STYLE> tag inside the document body. Known as
      • “INTERNAL Style Sheet”.
      • 3. Referring to an external file which contains a style sheet,
      • by using the 'LINK' element, Known as “EXTERNAL Style Sheet”.
      • 4. Referring to an external file which contains a style sheet,
      • by using the '@import' notation.
    • 1.) Inline Styles
      <p style="color:red;margin-left:20px">This is a paragraph.</p>
      Multiple Style Sheets
      If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet. 
      For example, an external style sheet has these properties for the h3 selector:
      h3{color:red;text-align:left;font-size:8pt;}
      And an internal style sheet has these properties for the h3 selector:
      h3{text-align:right;font-size:20pt;}
      If the page with the internal style sheet also links to the external style sheet the properties for h3 will be:
      color:red;text-align:right;font-size:20pt;
      The color is inherited from the external style sheet and the text-alignment and the font-size is replaced by the internal style sheet.
    • 2.) Internal Style Sheet
      An internal style sheet should be used when a single document has a unique style.
      <head><Body><style type="text/css">hr {color:red;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}</style>
      </Body></head>
    • 3.) External Style Sheet
      An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:
      <head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>
      An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .css extension. An example of a style sheet file is shown below:
      hr {color:red;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}
    • 4.) Import Style Sheet
      Another way to use document-wide style rules rather than type the properties directly within a <style> tag is to import them.
      The syntax for importing a style sheet is @import, followed by the keyword url and the actual URL of the style sheet to include, and terminated with a semicolon:
      @import url(corerules.css);
      Though not advisable stylistically or for ensured browser compatibility, the specification also allows us to set a string after @import of the URL, like so:
      @import "corerules.css";
    • <!DOCTYPE html>
      <html> <head>
      <title>Imported Styles</title>
      <style type="text/css“ media=“all”>
      <!--
      @import url(corerules.css);
      @import url(linkrules.css);
      h1 {font-size: xx-large; font-family: Sans-Serif; color: black; text-align: center; border-bottom: solid 4px orange;}
      p {text-indent: 1em; text-align: justify; line-height: 150%;}
      -->
      </style>
      </head>
      <body>
      <div id="page">
      <h1>HTML with Imported Style</h1>
      <p>Cascading Style Sheets 2.1 as defined by the
      <a href="http://www.w3.org">W3C</a> Provides powerful page layout facilities. The technology depends on correct markup so make sure you get that right too!</p>
      </div>
      </body>
      </html>
    • Thank you