Hypertext pages are interconnected by hyperlinks, when clicked on these links it takes you to a new webpage.
Markup language are tag based language; for example gml, sgml, html, xml, etc.
Features for HTML
Basics of HTML
HTML tags:
Some Html tags are given below:
Syntax:
<p> Paragraph tag </p>
<h2> Heading tag </h2>
<b>Bold Tag</b>
<u>Underline Tag</u>
<i>Italic Tag </i>
HTML elements:
<b>Enter in Bold text</b>
The HTML element begins with a start tag: <b>
The content of the HTML element is: Enter in bold text
The HTML element ends with an end tag: </b>
Basic HTML Tags: Tags that define headings, paragraphs and line breaks are the most important tags in HTML.
Tag |
Description |
<html> |
Defines an HTML document |
<body> |
Defines the document's body |
<h1> to <h6> |
Defines header 1 to header 6 |
<p> |
Defines a paragraph |
<br> |
Inserts a single line break |
<hr> |
Defines a horizontal rule |
<!--> |
Defines a comment |
Headings: These are defined with the <h1> to <h6> tags, where <h1> defines the largest heading while <h6> defines the smallest.
Paragraphs
<p align="left"> This is a paragraph aligned to the left side </p>
<p align="center"> This is another paragraph with center alignment</p>
Note: Each paragraph has to be enclosed within angle bracket, failing to do will become one large paragraph. HTML automatically adds an extra blank line before and after a paragraph.
Line Breaks
<p>This <br> is a para<br> graph with line breaks</p>
The below given lines show the output of the above syntax:
This
is a para
graph with line breaks
The <br> tag has no closing tag.
Backgrounds
Bgcolor
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
The lines that are given above – To set background-color black.
HTML Colors
HTML Lists
Unordered Lists:
This Code Would Display
<ul> |
|
<li>Coffee</li> |
· Coffee |
<li>Milk</li> |
· Milk |
</ul> |
Ordered Lists:
This Code Would Display
<ol> |
|
<li>Coffee</li> |
1. Coffee |
<li>Milk</li> |
2. Milk |
</ol> |
HTML Links – HTML uses the anchor tag to create a link to another document or web page.
Email Links – To create an email link, you will use mailto: plus your email address.
<a href="mailto:[email protected]">Email Help Desk</a>
To add a subject for the email message, you would add ?subject= after the email address.
For example:
<a href=" mailto:[email protected]?subject=Email Assistance">Email Help Desk</a>
HTML Images:
The syntax of defining an image:
Output display:
Tables:
<table>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Output display:
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
Cell Padding and Spacing
The <table> tag has two attributes known as cellspacing and cellpadding. These properties may be used separately or together.
Practice These Questions
Exercise 1:
Open your text editor and type the following text.
<html>
<head>
<title>Welcome to my Webpage</title>
</head>
<body>
<h1 align="center">My First Webpage</h1>
<p> I am happy to create my own HTML webpage. This is so easy and interesting</p>
<p>By learning html, I will be able to create web pages<br></p>
</body>
</html>
Save the page as mypage1.html.
Exercise 2:
It’s time to create your own page. Use your text editor to create a page which contains the following:
Recap
Hyper Text Markup Language is abbreviated as HTML, to design web pages.
Basic HTML
HTML tags
HTML elements
Headings
Paragraphs
Line Breaks
Backgrounds
Bgcolor
HTML Colors
HTML Lists
Unordered Lists
Ordered Lists
HTML Links
Email Links
HTML Images
Tables
Cell Padding
Cell Spacing
Q.1 |
which tag is used to emphasize the text? |
a) | <||| ||| empasize ||| |||><||| ||| /empasize ||| |||> |
b) | <||| ||| e ||| |||><||| ||| /e ||| |||> |
c) | <||| ||| emp ||| |||><||| ||| emp ||| |||> |
d) | <||| ||| em ||| |||><||| ||| /em ||| |||> |
Q.2 |
______ element used to override the current text direction? |
a) | <||| ||| bod ||| |||><||| ||| /bod ||| |||> |
b) | <||| ||| bd ||| |||><||| ||| /bd ||| |||> |
c) | <||| ||| bdo ||| |||><||| ||| /bdo ||| |||> |
d) | none of the above |
Q.3 |
The <||| ||| q ||| |||>…<||| ||| /q ||| |||> element is used to add d__________ within a sentence. |
a) | quotations |
b) | double quote |
c) | strong text |
d) | marked text |
Q.4 |
<||| ||| meta ||| |||> tags are placed inside _____tag? |
a) | <||| ||| body ||| |||> |
b) | <||| ||| head ||| |||> |
c) | <||| ||| form ||| |||> |
d) | <||| ||| div ||| |||> |
Q.5 |
___________ is used for http response message headers? |
a) | name |
b) | scheme |
c) | content |
d) | http-equiv |
Q.6 |
_____ tag are used to store cookies on client side? |
a) | <||| ||| meta ||| |||> |
b) | <||| ||| body ||| |||> |
c) | <||| ||| title ||| |||> |
d) | <||| ||| head ||| |||> |
Q.7 |
HTML comments are placed in between _______tags? |
a) | <||| ||| !--...-- ||| |||> |
b) | <||| ||| !--…--! ||| |||> |
c) | <||| ||| --…-- ||| |||> |
d) | none of the above |
Q.8 |
HTML tables are created using _____ tag? |
a) | <||| ||| t ||| |||> |
b) | <||| ||| tab ||| |||> |
c) | <||| ||| table ||| |||> |
d) | <||| ||| tt ||| |||> |
Q.9 |
<||| ||| TD ||| |||> … <||| ||| /TD ||| |||> tag is used for _______? |
a) | Table heading |
b) | Table Records |
c) | Table row |
d) | none of the above |
Q.10 |
<||| ||| SCRIPT ||| |||> … <||| ||| /SCRIPT ||| |||> tag can be placed within ________? |
a) | Header |
b) | Body |
c) | Both a and b |
d) | none of the above |
Your Score: 0/10