Html tags

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

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 ,[object Object],<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été 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>

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 ,[object Object]

inside the <HTML> tag, known as “INLINE Style Sheet”.

2. Using a <STYLE> tag inside the document body. Known as

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,

Html tags

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Html tags

Similar to Html tags (20)

Recently uploaded

Recently uploaded (20)

Html tags