Scribd Logo
Upload

Welcome to Scribd!

  • 74 views

    ISAAC 2002, October: HTML Notes

    Uploaded by

    Hanish Sarang
    This document provides an overview of basic HTML tags and formatting. It discusses common tags like <b>, <i>, <center>, <font>, <img>, and <a> and how they are used to bold, italicize, center, and format text. It also covers inserting images, links, and tables. The document provides examples of how to use each tag and its attributes to control things like font, size, color, alignment, and spacing.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    ISAAC 2002, October: HTML Notes

    Uploaded by

    Hanish Sarang
    74 views15 pages
    This document provides an overview of basic HTML tags and formatting. It discusses common tags like <b>, <i>, <center>, <font>, <img>, and <a> and how they are used to bold, italicize, center, and format text. It also covers inserting images, links, and tables. The document provides examples of how to use each tag and its attributes to control things like font, size, color, alignment, and spacing.

    Original Title

    HTML Basics

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document provides an overview of basic HTML tags and formatting. It discusses common tags like <b>, <i>, <center>, <font>, <img>, and <a> and how they are used to bold, italicize, center, and format text. It also covers inserting images, links, and tables. The document provides examples of how to use each tag and its attributes to control things like font, size, color, alignment, and spacing.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    74 views15 pages

    ISAAC 2002, October: HTML Notes

    Uploaded by

    Hanish Sarang
    This document provides an overview of basic HTML tags and formatting. It discusses common tags like <b>, <i>, <center>, <font>, <img>, and <a> and how they are used to bold, italicize, center, and format text. It also covers inserting images, links, and tables. The document provides examples of how to use each tag and its attributes to control things like font, size, color, alignment, and spacing.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    You are on page 1of 15

    HTML NOTES

    ISAAC 2002, October


    BASICS All HTML tags (commands) are enclosed with < > brackets, it is these brackets that make the tag invisible when your page is viewed. Your web browser reads the command in the tags and renders that to your web page until that tag is closed. The opening tag is the one that generates a command for the browser to read. For example, all the text following this tag <b>would appear bold, until a closing tag is entered into the coding. The closing tab is made by placing a / in the tag </b>. Note: not all HTML tags require closing tags </>. They are very few, but they will be pointed out as we proceed.

    HTML tags are NOT case sensitive

    THE FORMAT
    Example:: The format is accomplished with four sets of tags, they are:

    <html> and </html> <head> and </head> <title> and </title> <body> and </body>
    The <html> tag tells your browser the page is an HTML document. The <html> tag should be the very first tag in your HTML document. The </html> tag is the last tag in your HTML document. The <head> tags contain the page title tags, META tags which are the tags a search engine uses to index your page. The <title> tags are placed inside the <head> tags, and contain the title of the page as it appears in the status bar at the lower left-hand corner of the screen. This title does not appear on your web page. This title should be descriptive of your page, but not more than 64 characters in length.

    The <body> tags are where you place all the content (text, images, and links) that you want to appear on your page. The opening body tag is where you also specify the background color, text color, link and vlink colors.

    BASIC TAGS
    Center Tag: The <center> tag is used to center text, images, and tables (or any combination of them) on your web page. The center tag requires a closing tag, </center>.

    Bold Tag: The <b> tag is used to give text a bold look. This tag requires a closing tag, </b>. Example::<center><b>Centered bold text</b><center> Italics Tag: The <i> tag caused text to appear italicized, and requires a closing tag, </i>.

    Example::<center><b><i>Centered bold italic text </i></b><center> Underline Tag: The <u> tag underlines text, and requires a closing tag, </u>.

    Example::<center><b><i><u>Centered bold italic underlined text </u></i></b><center> Line Breaks: HTML does not recognize line breaks or paragraphs like computer word processors or e-mail programs do. You have insert HTML commands for these functions. The tag is the <br> tag. This tag will start a new line, and does not require a closing tag. Example::<center><b><i><u><br>Centered bold italic underlined text<br> </u></i></b><center>

    Paragraph Tag: The <p> tag skips a line and starts a new paragraph, no closing tag is required. The default alignment for this tag is to the left. But adding the following attributes, align="right" or align="center", to the tag you can change the default setting.

    Horizontal Rule Tag: The <hr> tag will make a fine shaded line like the one below, and does not require a closing tag. You can control the width, size, alignment, and color with the attributes below.Width is expressed either in pixels (a number) or in percent (%) of screen width. Example:: <hr width="50"> <hr width="50%">

    Size is the thickness expressed in number of pixels. Example::<hr width="50%" size="5">

    FONTS
    The text used on your web page is controlled by the font tag, and requires a closing tag </font>. The three font attributes are face="font name" size="number" color="name or Hex number" NOTE: How the text (font face and color) looks to someone depends entirely on their computer and the browser they are using. The default font on a computer is Times New Roman, and the default color is black. So if you specify a font and that font is not loaded on the computer,page will be viewed with the text displayed in the default font. The same holds true for the font color. Not all colors are viewed the same by all browsers. So it is best to use one of the browser safe colors, they are viewed the same by all browsers.

    Font Face This line shows the default font face, size, and color.

    Example::
    This line shows face="Verdana" size="2" color="blue"

    This line shows face="Helvetica" size="4" color="red"

    <font face="Verdana" size="2" color="blue">Your Text</font> You can also add alternate fonts to the face attribute by separating the font names with a comma. Example:: <font face="Verdana,Helvetica,arial">Your Text</font> Now the browser will display the first font face loaded on that computer.

    Font Size There are seven font sizes, and are specified using any number from 1 through 7. The font size="number" default is 3. Here are the seven sizes, font size="1" font size="2" font size="3" (default size) font size="4" font size="5" font size="6" font size="7" You can also specify a relative font size. This is based on using a minus (-) or plus (+) sign and a number either side of the default font size. Example:: font size="-2" font size="-1" Default font size="3" font size="+1" font size="+2" font size="+3" font size="+4"

    Font Color Font color can be specified by using either a color name or the hexadecimal code for the color.
    Red ~ #990033 Green ~ #008000 Blue ~ #3333ff Black ~ #000000

    Example:: <font color="red"> <font size="+4"><b>O</font>kay</b>..!</font> Now <b><i>we</i></b> are going to <font size="-1">see how</font> the font tag and it's attributes can be combined, <font face="Verdana">or used individually</font>, to <font color="#800000"><b><i>format</font> the text</i></b> on your web page. We will also use some of the <b><u>basic tags</u></b> from the previous page. <font face="Helvetica" size="4" color="#008000"><b><u> You most certainly don't</u></b> want your page</font> to <i>look like this</i>, but it is the <font face="Comic Sans" color="#9370db">quickest <font size="-2">and</font> easiest</font> way to show the effects of each tag and the attributes. Then following this section of text we will view the HTML coding used to create it. <p><font size="+3"><b>T</b></font>his section of text between the <hr>lines is set to show up using the <u>default</u> for font face, <font size="5">s</font><font size="-1"><b>iz</b></font><font size="4">e</font>, and <font size="4"><b><font color="red">c</font><font color="blue">o</font><font color="#ffff00" size="2">l</font><font color="brown">o</font><font color="#800000">r</font></b></font>. So as we add our different <font face="arial">tags and attributes</font> the changes will be <br><center><font face="arial" size="4" color="purple"><b><i><u>quite obvious</i>, and some <i>quite ugly</i>.....!</u></b></font></center> Image Tag: There are many attributes that can be used with the image tag, but here here is what a basic image tag should look like. <img src=http://your domain name/sub-directory/imagename.gif" width="??" height="??" alt="name or description of image"> The image tag does not require a closing tag..

    Image Alignment:

    When you place an image on your web page the default alignment is to the left. You can change the location by either using the <center></center> tags to center it on the page, or adding the align= attribute to the image tag itself. this image shows the default alignment to the left. Here is the image tag used to place it on the page, <img src="button.gif" width="16" height="16"> Example:: Image centered on page <center><img src="button.gif" width="16" height="16"></center> Image aligned to the right. <img src="button.gif" width="16" height="16" align="right"> Aligning Images with Text: When you have text and images combined on the same line notice how the text aligns at the bottom of the image, this is the default alignment. You can change this location by using the align= attribute and the locations of top, middle, or bottom.

    ALL THE VERY IMPORTANT LINKS

    Links (hyper-links) are used to take your visitors from one page on your site to another, or to a page on another completely different site. The link tag is made up of 3 different parts. The <a href=""> tag contains the URL of the page and tells the browser where you want to go to. The anchor tag is the trigger, and may be either text or an image. The </a> closing tag.

    TABLES
    Tables can be one of the most useful codes you use to layout your web page.A table is basically a box containing rows and columns that contain data cells. Very similar to the tables you create in a Word document program, only here you have to write the code to create the table. Like your HTML page a basic table code has a structure that should followed, and each section of that code has it' s own set of attr ibutes. Each table starts with a <table> tag, and ends with a closing tag, </table>.

    <tr> tag designates a table row within the table, it contains the table data cells, and requires a closing tag </tr>. A table row can contain one or many table data
    cells.

    <td> tag designates a table data cell which is contained within the table row, and it requires a closing tag </td>. It is within these cells that you place your
    data. Example:: <table align="center" border="3"> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td>Cell 4</td> <td>Cell 5</td> <td>Cell 6</td> </tr> </table> ATTRIBUTES UNDER TABLES Cellpadding, this attribute is added to the <table> and creates additional space between the cell data and the walls of the cell. The amount of cellpadding is expressed in pixels, in the example we added a 8 pixel padding around the data.. Example:: <table align="center" border="3" cellpadding="8"> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td>Cell 4</td> <td>Cell 5</td> <td>Cell 6</td> </tr> </table> Cellspacing, this attribute is used to increase, decrease, or totally remove the space between the table data cells,

    and is also expressed in pixels. The default spacing is 2 pixels, in this example we have increased it to 5 pixels. If you specified cellspacing="0" the spacing would be totally removed.

    Example:: <table align="center" border="3" cellpadding="8" cellspacing="5"> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td>Cell 4</td> <td>Cell 5</td> <td>Cell 6</td> </tr> </table> Table Width and Height As of right now our table is only as wide as the data plus the cellpadding, cellspacing, and the border. The width and height of the table can be altered by adding the width= and height= attributes to the <table> tag. The width can be expressed as % of page width, or in pixels. Height is expressed in pixels. Example:: <table border="3" width="90%" cellpadding="8" cellspacing="5"> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td>Cell 4</td> <td>Cell 5</td> <td>Cell 6</td> </tr> </table>

    Now with the table wider you can see that the default alignment for the <td> cells is to the left. Also the cells

    are equal in width, 33% of the table width. If you had 4 cells each would be 25% of the table width. Example:: To change the alignment of the cell data and the width of the cells. <table align="center" border="3" width="90%" cellpadding="8" cellspacing="5"> <tr align="center"> <td width="25%">Cell 1</td> <td width="50%">Cell 2</td> <td width="25%">Cell 3</td> </tr> <tr> <td>Cell 4</td> <td align="right">Cell 5</td> <td align="center">Cell 6</td> </tr> </table> Table Data Width: We made the left and right hand data cells 25% of the table width, and the center cell 50% of the table width. You need only specify this for the data cells in the first row, the width setting will carry over to all data cells in the following rows. The width can be specified in either pixels, or percent (%) of table width. Note: our table width is only 90% of our screen width, but the total width of our data cells equals 100%. The width attribute used inside a table are applicable only to the table, and have nothing to do with page width. If our table was only 50% of the page width, the sum of the data cells width should still equal 100%.

    Aligning Table Data: Aligning table data is done with the align="" attribute for horizontal alignment, and valign="" for vertical alignment. The default settings are "left" for horizontal, and to the "middle" of the cell for vertical alignment. The commands for the align="" attribute are left, center, and right. The commands for the valign="" attribute are top, middle, and bottom. These attributes can be placed either in the <tr> tag, or the individual <td> tags. Placing the attributes in the <tr> tag applies the alignment to all cells in that row, as we did in the first row above. The <tr> setting can be over ridden by adding an attribute to any individual cell. In row 2 above we placed the attributes in the individual cells.

    Colspan Attribute: In a basic table each row has the same number of data cells. The colspan="n" attribute, where "n" equals the number of cells you want to span, allows you to change the number of cells in a row. Example:: <table align="center" border="3" width="90%" cellpadding="8" cellspacing="5"> <tr align="center"> <td width="25%">Cell 1</td> <td width="50%">Cell 2</td> <td width="25%">Cell 3</td> </tr> <tr> <td colspan="2" align="right">Cell 4</td> <td align="center">Cell </td> </tr> </table> Using colspan="" we have changed the number of cells in the second row. Cell 4 now spans cells 1 and 2 in the row above. Row Span Attribute: The rowspan="" attribute is the vertical version of colspan.

    Example:: <table align="center" border="3" width="90%" cellpadding="8" cellspacing="5"> <tr align="center"> <td rowspan="2" valign="top" width="25%">Cell 1</td> <td width="50%">Cell 2</td> <td width="25%">Cell 3</td> </tr> <tr> <td align="right">Cell 4</td> <td align="center">Cell </td> </tr> </table>

    To add a background color to the table we use the bgcolor="#color" attribute. This attribute can be used in the <table> tag, the <tr> tag, and the <td> tag. When added to the <table> tag the whole table will take on the specified color. You can then change (over-ride) the table bgcolor for individual rows or cells by adding it to the appropriate opening tag. Using Images as a Background: Internet Explorer and Netscape 4.0 both support the use of an image as a background in a table. Just add the attribute backgound="URLofImage" to the <table> tag. This will also work for table rows and table data cells, but is not supported by all browsers. Replace the URLofImage with the actual url of the image. FRAMES Frames is one of the newer features oF HTML THE FRAME HELPS window to be divided into multiple sections, each with an independent HTML page loaded inside it, and these HTML pages can interact with each other. Each page loaded within each section of the frames window is a separate HTML document. Example:: <html> <head><title>testing frames...</title></head> <frameset cols="25%,75%"> <frameset> <frame src="test.html" name="indexbar"> </frameset> <frameset> <frame src="main.html" name="main"> </frameset> </frameset> </html> View This Frames Page The frames page itself in most cases does not actually contain any content, all content is placed on the separate HTML pages loaded within each frame (section). Instead, the frames page acts as a guide,defining which page to be loaded into each frame, and tshe frame attributes themselves. A frames page

    closely resembles a normal HTML page, except that the body is replaced with frameset, and an additional noframes tag is added.

    Lists
    Un-ordered List: this is an indented list that begins with the <ul> tag, and requires a closing tag </ul>. If you use the <li> in front of each line it will produce a small dot in front of the item. If you do not want the dot leave out the <li> tag, but then each line must be followed by a <br> tag.

    Using <li> Tag


    Un-ordered List Ordered List Definition List

    <ul> <li>Un-ordered List <li>Ordered List <li>Definition List </ul>

    Without <li> Tag <ul> Un-ordered List<br> Ordered List<br> Definition List </ul>

    Un-ordered List Ordered List Definition List

    By inserting additional <ul> tags into the Un-ordered list you can make what is known as a "Nested List".

    Un-ordered List o Ordered List Definition List

    <ul><li>Un-ordered List <ul><li>Ordered List <ul><li>Definition List </ul></ul></ul>


    Ordered List: this is an indented, numbered list that begins with the <ol> tag, and requires a closing tag </ol>. Adding the <li> tag in front of each line it will produce sequential numbers.

    1. Un-ordered List 2. Ordered List 3. Definition List

    <ol> <li>Un-ordered List <li>Ordered List <li>Definition List </ol>

    Definition List: this list can be used to give indented definitions of words or terms. It begins with the <dl> tag, and requires a closing tag </dl>. The other two tags are <dt> which gives the word or term to be defined, and the <dd> tag which gives the definition.

    FORMS
    Forms can be used for a variety of things on your website...of course, forms are mainly used to gather information from your visitors. Gathering information necessary to accept a payment online is a very common use of a form. Forms are also used just for demographic purposes. An HTML Form is part of a web page that includes boxes where readers can enter information to be sent to you via e-mail. In order to have a form that will work on your website, you must first make sure that your webhosting service supports forms. Every form starts with the <form> tag. This tag can be located anywhere in your HTML document. The form tag has two very important attributes....Method and Action. So, form would start like this: <form method="post" action="the address that will process your form...get this info from the webmaster"> Example:: This form is used to collect payment information. <form method=POST action="email id "> <tr ><td align=center rowspan=2>First Name:</td><td align=center rowspan=2><input type="text" name="fname" size=20></td></tr> <tr><td align=center rowspan=2>Last Name:</td><td align=center rowspan=2><input type="text" name="lname" size=20></td></tr>

    <tr><td align=center rowspan=2>Middle Name(optional):</td><td align=center rowspan=2><input type="text" name="mname" size=20></td></tr> <tr><td align=center rowspan=2>Password:</td><td align=center rowspan=2><input type="password" name="pass1" size=20></td></tr> <tr><td align=center rowspan=2>Confirm Password:</td><td align=center rowspan=2><input type="password" name="pass2" size=20></td></tr> <tr><td align=center rowspan=2>Address:</td><td align=center rowspan=2><textarea name="add" rows=5 cols=30></textarea></td></tr> <tr><td align=center rowspan=2>Gender:</td><td align=center rowspan=2><input type="radio" name="r1" value="yes">Female<input type="radio" name="r1" >Male</td></tr> <tr><td align=center rowspan=2>Marital Status:</td><td align=center rowspan=2><input type="radio" name="r2" value="yes">Unmarried<input type="radio" name="r2" >Married</td></tr> <tr><td align=center rowspan=2>Age:</td><td align=center rowspan=2><select name="age"> <option value="low">Below 20 <option value="m1">20-30 <option value="m2">30-40 <option value="m3">40-50 <option value="m4">50-60 <option value="high">Above 60 </select></td></tr> <tr><td align=center rowspan=2>Educational Qualification:</td><td align=center rowspan=2><select name="edu"> <option value="under">Student <option value="e1">Housewife <option value="e2">Engineer <option value="e3">Doctor <option value="e4">Chartered Accountant <option value="e5">M.B.A <option value="e6">Finance <option value="e7">Others </select></td></tr> <tr><td align=center rowspan=2>Monthly Salary(optional):</td><td align=center rowspan=2><input type="text" name="sal" size=10></td></tr> </table>

    <center> <input type="submit" name="sub" value="submit"> <input type="reset" name="res" value="reset"> </center> </form>

    You might also like