Difference between revisions of "In progress"

From IPRE Wiki
Jump to: navigation, search
 
Line 1: Line 1:
Introduction to HTML
 
  
HTML stands for Hyper Text Markup Language. HTML is not a programming language; it is a software language that is used to create World Wide Web pages.
 
 
The table below shows an example of the HTML coding and its results:
 
 
<html>
 
<head>
 
<title>Title of page</title>
 
</head>
 
<body>
 
This is my first robot page.
 
<b>This text is bold</b>
 
</body>
 
</html> This is my first robot page. This text is bold
 
 
Any HTML document is written between the following tags:
 
<html> …. </html>
 
All tags end with a slash following the tag name. Text between the <head> tags
 
Any amount of spacing in the coding does not affect line breaks, new lines, paragraphs or extra spacing in the results. To add these, there are tags that can be written in and these are described below:
 
 
Text Formatting:
 
 
<p> This is used to define a paragraph
 
<br> This is used for a line break
 
<h1> to <h6> These tags are used for headings. <h1> defines a big heading and <h6> defines a small one.
 
<! “comment”> Starting a tag with an exclamation mark and then adding text makes that a comment, therefore it is ignored by the browser.
 
<hr> Inserts a horizontal rule
 
<b> Makes the text bold
 
<i> Italicizes the text
 
<sub> Used for subscript
 
<sup> Used for superscript
 
<pre> This is used for preformatted text. To display text that is indented or has extra spaces, this tag can be used.
 
 
Links and Images:
 
 
To add a link to your browser, the following tag is used:
 
<a href="url">Text to be displayed</a>
 
To insert an image, the following tag is used: <img src="url">
 
 
Background and text colors:
 
There is a list of colors that can be used to color the backgrounds and text.
 
 
<body bgcolor="white">
 
 
Using the tag shown above, you can change the color of your background. To change the color of the text, you can add text = “colorname” in the same tag. This is shown below:
 
 
<body bgcolor="white" text="yellow">
 
 
Instead of using color names, you can also use alpha-numeric values that have been defined for the colors. You can find a list of color names and values here: http://www.w3schools.com/html/html_colornames.asp
 
 
Lists:
 
Lists can be ordered or unordered. The following table shows a few examples:
 
 
HTML Coding Results Notes
 
<html>
 
<body>
 
<h5>This is an example of an Unordered List:</h5>
 
<h4>My Favorite Fruits:</h4>
 
<ul>
 
      <li>Mango</li>
 
      <li>Melon</li>
 
      <li>Litchi</li>
 
<li>Grapes</li>
 
</ul>
 
 
</body>
 
</html> This is an example of an Unordered List:
 
My Favorite Fruits:
 
• Mango
 
• Melon
 
• Litchi
 
• Grapes - An unordered list can be made using the tag <ul>.
 
 
- Every list entry stay between the tags <li> and </li>.
 
 
- Note that indentation does not make a difference in the displayed results.
 
 
- Note the difference between the sizes of the headings.
 
<html>
 
<body>
 
 
<h5>This is an example of an Ordered List:</h5>
 
<h4>My Favorite Fruits:</h4>
 
<ol>
 
  <li>Mango</li>
 
  <li>Melon</li>
 
  <li>Litchi</li>
 
<li>Grapes</li>
 
</ol>
 
 
</body>
 
</html> This is an example of an Ordered List:
 
My Favorite Fruits:
 
1. Mango
 
2. Melon
 
3. Litchi
 
4. Grapes - An ordered list can be made by using the tag <ol>.
 
A nested list can be made by creating a list inside a list, sort of like a nested loop in python, but, the indentation does not make a difference, of course.
 

Revision as of 21:10, 25 July 2007