- 1 Introduction to HTML
- 2 Text Formatting:
- 3 This is a heading using number 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> <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: …. All tags end with a slash following the tag name. HTML is not case sensitive. 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:
|This is used to define a paragraph.|
|This is used for a line break|
<h1> to <h6>
|These tags are used for headings. Using the number 1 will create a large-sized heading and the size depreciates as the numbers go up to 6. Examples: |
This is a heading using number 1.
This is a heading using number 6.
|Inserts a horizontal rule.|
|Makes the text bold|
|Italicizes the text.|
|Used for subsrcipt|
|Used for superscript|
|This is used for preformatted text. To display text as it is and not be changed according to HTML language, this tag can be used. This tag is extremely helpful when less than/greater than signs, or indented text or extra spaces need to be displayed.|
More on text formatting here: http://www.w3schools.com/html/html_formatting.asp
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:
Background and text colors:
There is a list of colors that can be used to color the backgrounds and text.
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 can be ordered or unordered. The following table shows a few examples:
<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:
- 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:
- An ordered list can be made by using the tag <ol>.
More on Lists: http://www.w3schools.com/html/html_lists.asp
Tables:A table can be created in HTML using the tag table between the less and greater than signs. This tag draws a table without any borders, to add borders, an attribute can be added to the tag specifying the border with you desire, in the following manner:
<table border=“1”>. Once you have created the table, data can be entered in the table by rows. An example is show below along with the resulting table:
<table border="1"> <tr> <td>First Name</td> First Name Last Name Larry King <td>Last Name</td> </tr> <tr> <td>Larry</td> <td>King</td> </tr> </table>
This will result in:
|First Name||Last Name|
<tr> begins a new row and each <td> is a new data entry which makes up the columns. If you wanted this table to have five columns, then an extra three <td> tags can be added between each of the <tr> tags.
More on tables: http://www.w3schools.com/html/html_tables.asp
You can create frames in your robot rage by using the following coding:
<iframe src ="url">
By using this, you will be creating a little window in your robot page. You can alter the width and height of this window frame by adding an attribute. The width and height are measured in pixels% and a 100% of width and height should cover your page. An example of this is given below:
<iframe src ="url" width = 100% height = 100%>
More on Frames: http://www.w3schools.com/tags/tag_iframe.asp