Html tags

Introduction of CSS and HTML For the Web

By- Gaurav Jaiswal

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 topublish and the appropriate markup instructions indicating how the browser shouldstructure 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 tagHTML 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 optionalExample-<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 allowedExamples--

18

Images<HTML> <BODY><img src=“1.jpg" alt="Graham Allan" height="320" width="150">

<img src=“2.jpg" lowsrc="loading.jpg" border="0" height="50%“ width="50%" alt="Picture of Olivia" longdesc="olivia-bio.html">

<a href="home.html"><img src=“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, rightVALIGN -- top, middle, bottomBGCOLOR -- 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 occupiesrowspan – 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><acronym title="Société Nationale de Chemins deFer">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>Gaurav Jaiswal,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 PRESERVEDNO 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.

SelectorDeclaration

• 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 maintenance To change the style of an element, you only have to make an edit in one place.

• Superior styles to HTML CSS has a much wider array of attributes than HTML.

Disadvantages of CSS

• Browser compatibility Browsers 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 SheetsIf 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”></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

Html tags

Education

Transcript of Html tags