Assalamualaikum dear friends, we meet again! :D
For this entry, we are going to introduce to you a HyperText Markup Language, or more commonly known as HTML.
HTML is the standard
markup language used to create
web pages. We will show you how to do HTML. Follow us and you can try it for yourself! :)
Lesson 1: A simple HTML document
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
- The text between <html> and </html> describes the web document
- The text between <body> and </body> describes the visible page content
- The text between <h1> and </h1> describes a heading
- The text between <p> and </p> describes paragraph
Using the description, a web browser can display a document with a heading and a paragraph.
HTML tags are keywords (tag names) surrounded by angle brackets:
<tagname>content</tagname>
- HTML tags normally come in pairs like <p> and </p>
- The first tag in a pair is the start tag, the second tag is the end tag
- The end tag is written like the start tag, but with a slash before the tag name- The start tag is often called the opening tag. The end tag is often called the closing tag.
By using a
WordPad, you can type the document above and then click "save as" and type down "document.txt". Do it once more but this time type "document.html" and save in the same folder.
Double click the "document.html" and you will get a web browser that will show like this:
The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML documents and display them.
Lesson 2: HTML List-making
2.1: Unordered HTML list
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles).
Do the same as per in Lesson 1 to save the document in .txt and .html form. You will get like this:
| Unordered HTML List |
Ordered HTML List |
HTML Description List |
- The first item
- The second item
- The third item
- The fourth item
|
- The first item
- The second item
- The third item
- The fourth item
|
The first item
Description of item
The second item
Description of item |
Lesson 2.2: Ordered HTML Lists
<ol>
<li>BLACK</li>
<li>RED</li>
<li>WHITE</li>
<li>BLUE</li>
</ol>
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers.
Do the same as per in Lesson 1 to save the document in .txt and .html form. You will get like this:
Lesson 2.3: HTML Description Lists
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
A description list, is a list of terms, with a description of each term.
The <dl> tag defines a description list.
The <dt> tag defines the term (name), and the <dd> tag defines the data (description).
Do the same as per in Lesson 1 to save the document in .txt and .html form. You will get like this:
Nested HTML Lists
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
List can be nested (lists inside lists). It gives:
Lesson 3: HTML Link
<html>
<body>
Welcome to our blog!
<a href="http://www.lemiracleus.blogspot.com/">Visit our blog to see HTML tutorial</a>
</body>
</html>
HTML links are hyperlinks.
A hyperlink is an element, a text, or an image that you can click on, and jump to another document.
In HTML, links are defined with the <a> tag.
Do the same as per in Lesson 1 to save the document in .txt and .html form. You will get like this:
Lesson 4: HTML Images
<html>
<body>
<h2>Smile face</h2>
<img src="http://www.worldpeace-uk.org/wp-content/uploads/2013/07/smiley-face.jpg" alt="Smiley" style="width:128px;height:128px">
<h2>GIF image</h2>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ72_ah2hajFr60FJY5iKGGk1P-1Ar4L6LM3uR3wGYKYfBavSMO" alt="Computer man" style="width:128px;height:128px">
</body>
</html>
In HTML, images are defined with the <img> tag.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The src attribute defines the url (web address) of the image.
Do the same as per in Lesson 1 to save the document in .txt and .html form. You will get like this:
Lesson 5: HTML Table
<table border="1" style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Tables are defined with the <table> tag.
Tables are divided into table rows with the <tr> tag.
Table rows are divided into table data with the <td> tag.
A table row can also be divided into table headings with the <th> tag.
If you do not specify a border for the table, it will be displayed without borders.
A border can be added using the border attribute <table border> tag.
Do the same as per in Lesson 1 to save the document in .txt and .html form. You will get like this:
So, thats the end of our lessons! Try it for yourself and you might be able to do it like anybody else.
Until next time! Salam :)
