Total Pageviews

Monday 25 February 2013

HTML IN SIMPLE STEPS!!!
PART - I
GETTING STARTED &
WORKING WITH TEXT


STRUCTURE:
<HTML>
<HEAD>
<TITLE>
Title to be displayed in title bar of the web browser
</TITLE>
</HEAD>
<BODY>
Contents of the web page
</BODY>
</HTML>

TO CHANGE BACKGROUND:
<BODY bgcolor=”yellow”>
</BODY>

ADDING BACKGROUND PICTURE:
<BODY background=”C:\Documents and Settings\image.jpg”>
</BODY>

ADDING PLAIN TEXT:
<BODY>
This is the text…
</BODY>

LINE BREAK:
<br> tag is used. It DOESN’T HAVE CLOSING TAG </br>

CREATING HEADINGS: (no need of end tag)
<h1>hai</h1>                                 hai
<h2>hai</h2>                             hai
<h6>hai</h6>                                 hai

CREATING PARAGRAPH:
<P>this is para 1</P>
<P>this is para 2.
Welcome!!! J</P>

ALIGNMENTS:
<align=left>
<align=right>
<align=center>

CREATING HORIZONTAL RULE:
<hr>   NO END TAG!
---------------------------------------------------------------------------------------------
<hr align=”right” width=”50%”>
                                                     -------------------------------------------------
<hr align=”center” size=”20”>


CREATING SUBSCRIPT:
<sub>text</sub>

CREATING SUPERSCRIPT:
<sup>text</sup>

TEXT ALIGNMENT:
<h3 align=”center”>hai

BOLD, ITALIC AND UNDERLINE:
<B>ABC</B>
<I>ABC</I>
<U>ABC</U>

FONT:
<FONT SIZE=”4” FACE=”VERDANA” COLOR=”RED”>hello world!</FONT>

GROUPING TEXT AS BLOCKS:
We can define a section of the web page and give that section a different style with the heop of the <div> tag. This tag places a line break before and after the <div> elements.
EG:
<body>
Hai
<div style=”color:red”>
<h4>hello</h4>
<p>how are you? ;-)</p>
</div>
The div formatting style is not applied in this line!
</body>

<span>
We can use <span> tag to apply styles to the text in the middle of other texts.
EG:
<body>
<p>
<h1>hai.
<span style=”color:red”>
This text should be in diff. line
</span>
This text is grouped.
</p>
<p>
<span style=”color:yellow”>
This text comes in different paragraph.
</span>
</p>
</body>

INDENTING QUOTATIONS:
<BLOCKQUOTE> - We don’t need to set margins on the web page. Use blockquote for multiline quotations and <Q> for shorter quotations like one-line quotations.

SCROLLING TEXTS:
<marquee> - helps in displaying scrolling text.
EG:
<body>
<marquee loop=”infinite” bgcolor=”yellow” width=”300”>
This is the default way
</marquee>
<marquee loop=”20” bgcolor=”red” width=”15” direction=”up”>
This is an example of text scrolling upwards.
</marquee>
</body>

WORKING WITH CHARACTER ENTITIES:
To display some special characters in web browser, character entities must be inserted in the HTML code.


Entity name
desc.
Result
entity number
&nbsp;
non-breaking space

&#160;
&lt
less than
< 
&#60;
&gt
greater than
> 
&#62;
&amp
ampersand
&
&#38;
&quot
quotation
&#34;

         
EG:
This &nbsp;  &nbsp;  is the &lt; (less than) sign
OUTPUT:
This         is the < (less than) sign

COMMENTS:
<!-- This is a comment -->

---------------------------------------------END OF PART - I-----------------------------------------------
CONTINUE WITH  PART - II  FOR THE NEXT CONCEPTS...

2 comments: