HTML popo
HTML Each HTML document begins with a <HTML> and ends with </HTML> tags. Each document consists of a HEAD section surrounded by <HEAD> and </HEAD> tags and a BODY section with <BODY> and </BODY>. HTML tags come in pairs (usually) with the ending tag containing an additional "/". Some Tags can surround other tags. This is called Nesting. <TITLE> tags are nested in the <HEAD>-</HEAD>tags. Text inside <TITLE> tags is displayed on the browser Title Bar. The text between the <BODY> tags is displayed inside the browser window. popo
HTML The <HR> tag without any attributes, draws a full length (100%) rule across the page. To decrease its length to half its value, you should specify "50%" value to the WIDTH attribute. Thus, with <HR width="50%">, we get a shorter horizontal rule: popo
HTML Tags usually surround some text. This text is displayed based on the instructions contained in the tag and its attributes. A simple example is the Bold (<B> and </B>) tag. When these tags are placed surrounding some text, it becomes bold as: (<B>This is bold text</B>) popo
HTML Headings help in defining the format and structure of the document. There are six levels of headings in HTML specified by <H1>, <H2>, <H3>, <H4>, <H5> and <H6> tags. <H1>I am heading 1</H1> gives: I am heading 1 popo
HTML popo <HTML> <HEAD> <TITLE>My fist HTML </TITLE> </HEAD> <BODY> <H1>I am heading 1</H1> <H2>I am heading 2</H2> <H3>I am heading 3</H3> <H4>I am heading 4</H4> <H5>I am heading 5</H5> <H6>I am heading 6</H6> </BODY> </HTML> popo
HTML What are HTML Tag attributes Attributes change the properties of tags and are placed ONLY inside the starting tag. Each attribute usually has a value associated. <TAG ATTRIBUTE="VALUE">some text ... </TAG> popo
HTML popo The attribute-value pair is placed INSIDE the starting tag An "equal to" sign separates the attribute from its value. All heading tags <H1> to <H6> have attributes. The important one are 'ALIGN’ The 'ALIGN' attribute takes one of the four values: LEFT, RIGHT, CENTER, or JUSTIFY. <H3 align="left">I am aligned to the left</H3 <H3 align="right">I am aligned to the right</H3> <H3 align="center">I am centrally aligned</H3> popo
HTML The <BR> tag has no end tag because it doesn't need too. Just the presence of <BR> adds a line break. The opposite of the <BR> tag is the <NOBR> tag. It has an ending </NOBR> tag. Text placed between these tags will be displayed in a single line, which might result in horizontal scrolling if the text too is long. Try this out with the following code. popo
HTML popo <HTML> <HEAD> <TITLE>Testing the BR tag</TITLE> </HEAD> <BODY> <NOBR> This is a long piece of text consisting of three sentences and shows you the functions of the NOBR tag. This tag is causes the text between it to be displayed in a single line and will result in horizontal scrolling in the browser if the text is too long and continues and continues and continues and continues and continues and continues and continues and finally ends here. </NOBR> </BODY> </HTML> popo
HTML popo Physical Tags There are 10 physical tags each requiring a closing tag: <I> Italics: I am in italics <B> Bold: I am in bold <U> Underline: I am underlined <STRIKE> Strikethrough: I am struck! <SUP> Superscript: My superscript <SUB> Subscript: My subscript <TT> Typewriter: I am in typewriter form <BIG> Bigger font: I am bigger <SMALL> Smaller font: I am smaller <S> Strikethrough alternative: I am also struck! popo
HTML popo <HTML> <HEAD> <HTML> <HEAD> <TITLE>Physical Tags</TITLE> </HEAD> <BODY> <I>Text in Italics</I> <BR><BR> <B>Text in Bold</B> <U>Underlined Text</U> <STRIKE>Text Struck-through</STRIKE> Text with <SUP>Superscript</SUP> Text with <SUB>Subscript</SUB> <TT>Typewriter Text</TT> <BIG>Bigger text</BIG> <SMALL>Smaller text</SMALL> <S>Text Struck-through</S> <U><B>Bold and Underlined</B></U> <I><U><B>Bold, Underlined and in Italics</B></U></I> </BODY> </HTML> popo
HTML popo There are 9 logical tags each requiring a closing tag: <STRONG> Strong: I am strong <EM> Emphasis: I am emphasized <ABBR> Abbreviation: I am abbreviated <CITE> Citation: Citation <CODE> Code: I am programming code <DFN> Definition: Definition <KBD> Keyboard: Quite like keyboard strokes <SAMP> Sample: Sample <VAR> Programming Variable: Programming Variable popo
HTML popo <HTML> <HEAD> <TITLE>Logical Tags</TITLE> </HEAD> <BODY> <STRONG>Strong</STRONG> <BR><BR> <EM>Emphasis</EM> <ABBR>Abbreviation</ABBR> <CITE>Citation</CITE> <CODE>Code</CODE> <DFN>Definition</DFN> <KBD>Keyboard</KBD> <SAMP>Sample</SAMP> <VAR>Programming Variable</VAR> </BODY> </HTML> popo
HTML To separate blocks of text in a document you can use the simple but useful <HR> tag, which puts a straight line across the page. There is no ending tag for the horizontal rule. The very inclusion of <HR> introduces the separating line. popo
HTML You can change the length, width, size, color and alignment of the horizontal rule using various attributes. WIDTH Attribute This attribute defines the length of the rule. A value is required for this attribute. This value can be expressed in pixel numbers or percentage. <HR width="50"> presents a rule which is 50 pixels in length <HR width="70%"> specifies that the length of the rule should be 70% of the page's width as: popo
HTML SIZE Attribute The SIZE defines the thickness of the horizontal rule. You can change the thickness by specifying the number of pixels with the value. <HR SIZE="1">: 1 pixel thick. <HR SIZE="8">: 8 pixels thick. <HR SIZE="30">: 30 pixels thick. popo
HTML ALIGN Attribute can align horizontal rules using one of the three values for ALIGN attribute, "CENTER", "LEFT", or "RIGHT". The default value for this attribute is "CENTER". <HR align="center" width="50”> <HR align="left" width="50%">: <HR align="right" width="50%">: popo
HTML COLOR Attribute <HR COLOR="RED" SIZE="10" width="50%“ >: Red colored rule, 10 pixels in thickness. popo
HTML popo <HTML> <HEAD> <TITLE>Horizontal Rules</TITLE> </HEAD> <BODY> Modify the attributes of these horizontal rules. <BR><BR> <HR WIDTH="50"> <HR SIZE="3"> <HR ALIGN="RIGHT" WIDTH="50%"> <HR ALIGN="LEFT" COLOR="GREEN" WIDTH="80%"> <HR WIDTH="50%“ SIZE="5"> <HR COLOR="RED" SIZE="10" WIDTH="50%"> </BODY> </HTML> popo
HTML popo Paragraph tag <P> Blocks of text in HTML should be placed in paragraphs. Browsers typically insert a blank line before and after a paragraph of text. The paragraph tag is <P>. You should always end the paragraph with </P> even though it is not required. The important Attribute of this tag is ALIGN which can take one of the four values; "LEFT", "RIGHT", "CENTER", "JUSTIFY". LEFT is the default value. <P> is aligned to the left.</P> <P align="right"> is aligned to the right.</P> <P align="center"> is centrally aligned.</P> popo
HTML <DIV> tag HTML elements inside <DIV> and </DIV> tags divides the document into sections. <DIV align="left"> aligns elements inside it, to the left.</DIV> <DIV align="right"> aligns elements inside it, to the right.</DIV> <DIV align="center"> aligns elements inside it, to the center.</DIV> popo
HTML <CENTER> tag <CENTER>Centrally aligns this text</CENTER> popo
HTML popo <MARQUEE> The <MARQUEE> tag provides some animated text to the page. An easy way to put some colorful animated text on your page. It has many attributes: BEHAVIOUR = ALTERNATE, SCROLL OR SLIDE BGCOLOR = "Blue", "Green" etc. DIRECTION = DOWN, LEFT, RIGHT OR UP HEIGHT = in pixels or percentage LOOP = number or INFINITE SCROLLDELAY = in milliseconds TITLE = some text TRANSPARENCY = 0 to 100 (number) WIDTH = in pixels or percentage popo
HTML <HTML> <HEAD> <TITLE>Text Controlling </TITLE> </HEAD> <BODY> <MARQUEE DIRECTION="LEFT" BGCOLOR="BLUE" INFINITE WIDTH="400">Scrolling POPO</MARQUEE> </BODY> </HTML> popo
HTML popo Font FACE attribute Face attribute takes the name of the font you want to use. <FONT FACE="Times New Roman">This should be displayed in Times New Roman</FONT> <FONT FACE="Arial">This should be displayed in Arial</FONT> <FONT FACE="Verdana">This should be displayed in Verdana</FONT> <FONT FACE="Comic Sans MS">This should be displayed in Comic Sans MS</FONT> IMPORTANT: If you do not have the font installed in your system, the text will be displayed in the default font of your browser. popo
HTML Font COLOR attribute The attribute takes either the hexadecimal color value or just the color name. Some common color names are Blue, Green, Red, Yellow, White, Black, Cyan, Magenta, Pink etc. <FONT COLOR="RED">Red Text</FONT> <FONT COLOR="BLUE">Blue Text</FONT> <FONT COLOR="GREEN">Green Text</FONT> popo
HTML Font SIZE attribute The size attribute takes a number from 1 to 7 <FONT SIZE="1">Some Text</FONT> <FONT SIZE="2">Some Text</FONT> <FONT SIZE="3">Some Text</FONT> <FONT SIZE="4">Some Text</FONT> <FONT SIZE="5">Some Text</FONT> popo
HTML popo <HTML> <HEAD> <TITLE>Text </TITLE> <BODY> <FONT FACE="Arial">Text in Arial</FONT> <FONT FACE="Times New Roman">Text in Times New Roman</FONT> <FONT SIZE="4">Size 4 text</FONT> <FONT SIZE="2" COLOR="BLUE">Size 2, blue colored text</FONT> </BODY> </HTML> popo
HTML popo LIST HTML Ordered List If the ranking of items is desired, we employ ordered lists. To place individual list items, you use the <LI> tag as <OL> <LI>Item One <LI>Item Two <LI>Item Three <LI>Item Four </OL> popo
HTML Numbers are the default bullets in ordered lists but you can change this using the TYPE attribute of <OL> tag. This attribute takes one of the five values: TYPE="a": Lowercase alphabet TYPE="A": Uppercase Alphabet TYPE="i": Lowercase Roman Numerals TYPE="I": Uppercase Roman Numerals TYPE="1": Regular number (default) Thus, <OL TYPE="A"> <LI>Item One <LI>Item Two <LI>Item Three </OL> popo
HTML popo HTML Unordered List <UL> - </UL> are the starting and ending tags of Unordered lists. List items are included using the <LI> tag. Unordered lists also support the TYPE attribute that takes disc, circle or square as its value. <UL> <LI>Item One <LI>Item Two <LI>Item Three <LI>Item Four </UL> Using TYPE="square" popo
HTML Linking Anchor tags have a starting (<A>) and an (</A>) ending tag. The HREF attribute is required and takes the URL address of the destination page as value. Without this attribute-value, no links will be created. Some text is enclosed between the anchor tags. This text serves as the hot spot. When a visitor clicks on this 'hot spot', he or she will be transported to the target page. <a href= "popo.html" >click to popo page</a> popo
HTML Load image <IMG> tag. The required attribute of this tag is SRC, which takes the value of the image file's URL. <IMG SRC="ash.jpg"> Three kinds of images files .gif, .jpg and .png are used on the Internet. The <IMG> tag has many attributes WIDTH: used for specifying the width of the image HEIGHT: specifies height BORDER: displays a border around the image <IMG SRC="hat.gif" width="150" height="100"> popo
HTML popo Tables Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc. <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </table> popo
HTML popo Headings in a Table Headings in a table are defined with the <th> tag. <table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </table> popo
HTML HTML Anchor Tag The HTML anchor element is used to create a link to a resource (another web page, a file, etc.) or to a specific place within a web page. The anchor tag is written like this: <a> The HREF Attribute <a href=http://www.poposir.orgfree.com>popo page</a> popo
HTML For example, suppose you want to link to a page you've saved with the name of MyPage.html. You'd code it like this: <a href="MyPage.html">My Page</a> The NAME Attribute The name attribute allows an anchor tag to be used to point to a specific place on a web page. You might link from the bottom of a long page to the top of the page The syntax for using the name attribute is like this: <a name="top"></a> or... <a name="top">Some text</a> You can leave out the text between the "a" tags or use them to surround some text. popo
HTML to link to that named anchor <a href="#top">go top</a> As you can see, it's simply a hash mark (#) in front of the actual anchor name. The hash mark tells the browser the link is on the current page. You can also link to a named anchor on another page. The syntax for that is: <a href="AnotherPage.html#name">Link Text</a> popo
HTML The TARGET Attribute The target attribute allows you to determine where the link will open. With a framed site, it allows you to target a link to a specific frame. <a href="http://www.site.com" target="_blank">Link Text</a> popo
HTML HTML Comments Comments can be hidden in your HTML source code. You can also hide a whole block of code or content by marking it out using an HTML comment. A comment is written like this: <!-- This is a comment. --> popo