0% found this document useful (0 votes)

38 views48 pages

Full Lecture Note On HTML by Fraol

Chapter 2 of the Internet Programming course focuses on the basics of HTML, explaining its structure, tags, and attributes. It covers how to create a simple web page, the use of various HTML tags for formatting text, creating lists, and defining tables. Additionally, it discusses the importance of using lowercase tags and provides examples for practical understanding.

Uploaded by

zelalemzerihun437

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

38 views48 pages

Full Lecture Note On HTML by Fraol

Uploaded by

zelalemzerihun437

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

Ambo university

INTERNET PROGRAMMING - CHAPTER 2

PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

Fundamentals of Internet Programming 1

Chapter 2

Basics of HTML
By Firaol K. (Msc.)

April 2025

By Firaol K.- (fraNeH) 1 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

Basics of HTML

 HTML stands for Hyper Text Markup Language. An HTML file is a text file
containing markup tags.
 The markup tags tell the Web browser how to display the page. An HTML file must
have an ‘htm’ or ‘html’ file extension. An HTML file can be created using a simple
text editor. The rule-making body of the Web is World Wide Web Consortium
(W3C). W3C puts together specifications for Web standards. The most essential
Web standards are HTML, CSS and XML. The latest HTML standard is XHTML 1.0.

Example: Creating a simple web page

1. Start Notepad.
2. Type in the following text

<html>
<head>
<title>Title of page</title>
</head>
<body>
This is a very basic webpage. This text will be displayed in bold
</body>
</html>

3. Save the file as "[Link]".

4. Double click the saved file the browser will display the page.

Example Explained:

The first tag in your HTML document is <html>. This tag tells your browser that this is
the start of an HTML document. The last tag in your document is </html>. This tag tells
your browser that this is the end of the HTML document.

By Firaol K.- (fraNeH) 2 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

The text between the <head> tag and the </head> tag is header information. Header
information is not displayed in the browser window.

The text between the <title> tags is the title of your document. The title is displayed in
your browser's caption.

The text between the <body> tags is the text that will be displayed in your browser.

The text between the and tags will be displayed in a bold font.

HTM or HTML Extension?

When you save an HTML file, you can use either the .htm or the .html extension. We
have used .html in our example.

HTML Tags

1. HTML tags are used to mark-up HTML elements

2. HTML tags are surrounded by the two characters < and >
3. The surrounding characters are called angle brackets
4. HTML tags normally come in pairs like and 
5. The first tag in a pair is the start tag, the second tag is the end tag
6. The text between the start and end tags is the element content
7. HTML tags are not case sensitive, means the same as

Use Lowercase Tags?

We have just said that HTML tags are not case sensitive: means the same as . It
is recommended to always use because

If you want to prepare yourself for the next generations of HTML, you should start
using lowercase tags. The World Wide Web Consortium recommends lowercase
tags in their HTML 4 recommendation, and XHTML (the next generation HTML)
demands lowercase tags.

By Firaol K.- (fraNeH) 3 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

Tags can have attributes. Attributes can provide additional information about the HTML
elements on your page.

This tag defines the body element of your HTML page: <body>. With an added bgcolor
attribute, you can tell the browser that the background color of your page should be red,
like this: <body bgcolor="red">.

Attributes always come in name/value pairs like this: name="value".

Attributes are always added to the start tag of an HTML element.

Quote Styles, "red" or 'red'?

Attribute values should always be enclosed in quotes. Double style quotes are the most
common, but single style quotes are also allowed. In some rare situations, like when the
attribute value itself contains quotes, it is necessary to use single quotes:

Headings

Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading.
<h6> defines the smallest heading.

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>

HTML automatically adds an extra blank line before and after a heading.

By Firaol K.- (fraNeH) 4 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

Paragraphs

Paragraphs are defined with the tag.

This is a paragraph

This is another paragraph

HTML automatically adds an extra blank line before and after a paragraph.

Line Breaks

The tag is used when you want to end a line, but don't want to start a new
paragraph. The tag forces a line break wherever you place it.

This is a para graph with line breaks

The tag is an empty tag. It has no closing tag.

Comments in HTML

The comment tag is used to insert a comment in the HTML source code. A comment will
be ignored by the browser. You can use comments to explain your code, which can help
you when you edit the source code at a later date.

Note: that you need an exclamation point after the opening bracket, but not before the
closing bracket.

By Firaol K.- (fraNeH) 5 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

Text Formatting Tags

Tag Description

Defines bold text

<big> Defines big text

Defines emphasized text

Defines italic text

Defines small text

Defines strong text

Defines subscripted text

Defines superscripted text

<ins> Defines inserted text

<del> Defines deleted text

The Anchor Tag and the Href Attribute

HTML uses the <a> (anchor) tag to create a link to another document.

An anchor can point to any resource on the Web: an HTML page, an image, a sound file,
a movie, etc.

The syntax of creating an anchor:

<a href="url">Text to be displayed</a>

The <a> tag is used to create an anchor to link, the href attribute is used to address the
document to link to, and the words between the open and close of the anchor tag will be
displayed as a hyperlink.

This anchor defines a link to EEE 111 webpage:

<a href="[Link] EEE 111</a>

By Firaol K.- (fraNeH) 6 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

The line above will look like this in a browser:

Visit EEE 111

The Target Attribute

With the target attribute, you can define where the linked document will be opened.

The line below will open the document in a new browser window:

<a href="[Link] target="_blank"> Visit EEE 111</a>

The Anchor Tag and the Name Attribute

The name attribute is used to create a named anchor. When using named anchors we
can create links that can jump directly into a specific section on a page, instead of letting
the user scroll around to find what he/she is looking for.

Below is the syntax of a named anchor:

<a name="label">Text to be displayed</a>

The name attribute is used to create a named anchor. The name of the anchor can be
any text you care to use.

The line below defines a named anchor:

<a href="#down">Bottom of the page</a>

You should notice that a named anchor is not displayed in a special way.

To link directly to the "down" section, add a # sign and the name of the anchor to the
end of a URL, like this:

<a href="[Link] to down section</a>

By Firaol K.- (fraNeH) 7 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

A hyperlink to the Useful Tips Section from WITHIN the file "[Link]" will look
like this:

<a name="down">Down is here</a>.

Tables

Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag),
and each row is divided into data cells (with the <td> tag). The letters td stands for
"table data," which is the content of a data cell. A data cell can contain text, images, lists,
paragraphs, forms, horizontal rules, tables, etc.

How it looks in a browser:

row 1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2

Tables and the Border Attribute

If you do not specify a border attribute the table will be displayed without any borders.
Sometimes this can be useful, but most of the time, you want the borders to show.

To display a table with borders, you will have to use the border attribute:

By Firaol K.- (fraNeH) 8 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

Headings in a Table

How it looks in a browser:

Heading Another Heading

row 1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2

Table Tags

By Firaol K.- (fraNeH) 9 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

Tag Description

<table> Defines a table

<th> Defines a table header

<tr> Defines a table row

<td> Defines a table cell

HTML supports ordered, unordered and definition lists

Unordered Lists

An unordered list is a list of items. The list items are marked with bullets (typically
small black circles).

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

Here is how it looks in a browser:

 Coffee
 Milk

Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

Ordered Lists

An ordered list is also a list of items. The list items are marked with numbers.

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

<ol>

By Firaol K.- (fraNeH) 10 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

<li>Coffee</li>
<li>Milk</li>
</ol>

Here is how it looks in a browser:

1. Coffee
2. Milk

Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

Definition Lists

A definition list is not a list of items. This is a list of terms and explanation of the terms.

A definition list starts with the <dl> tag. Each definition-list term starts with the <dt>
tag. Each definition-list definition starts with the <dd> tag.

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

Here is how it looks in a browser:

Coffee
Black hot drink
Milk
White cold drink

Inside a definition-list definition (the <dd> tag) you can put paragraphs, line breaks,
images, links, other lists, etc.

By Firaol K.- (fraNeH) 11 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

List Tags

Tag Description

<ol> Defines an ordered list

<ul> Defines an unordered list

<li> Defines a list item

<dl> Defines a definition list

<dt> Defines a definition term

<dd> Defines a definition description

Formatting the text

The following are the tags for bold, underline, italic
 for bold
 for underline
 for italic

Let us look at an example

<html>
<head>
<title>Welcome to my Home Page</title>
</head>
<body>
My name is Harshit Kumar. 
I am at University of Suwon. 
My major is computer science
</body>
</html>

The output will be

By Firaol K.- (fraNeH) 12 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

My name is Harshit Kumar.

I am at University of Suwon.
My major is Information technology.

Q) What is the output of the following code?

html>
<head>
<title>Welcome to my Home Page</title>
</head>
<body>
My name is Harshit Kumar.
</body>
</html>

Q) What is the default background color of webpage?

A) White.

Q) How can I change the background color of a web page?

A) We can change the background color of a web page by using bgcolor attribute of
<body> tag.
an example to understand this
Write the code below and save as an .html file.

<html>
<head>
<title>Welcome to my Home Page</title>
</head>
<body bgcolor="blue">
My name is Harshit Kumar

By Firaol K.- (fraNeH) 13 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

</body>
</html>
The output is

The text color can also be changed, i.e. we can change the background color and text
color.
Write the code below and save as an .html file.
<html>
<head>
<title>Welcome to my Home Page</title>
</head>
<body bgcolor="red" text="yellow">
My name is Harshit Kumar

</body>
</html>
The output is
If you put <body bgcolor=”black”> or
<body bgcolor=”#FFE4C4”>, then you will get the same effect on the page color, i.e.
background color will be black. The # tells the browser that the number is hexadecimal.

bgcolor="red" bgcolor="#FF0000"

Similarly, by using the colour name or the code shown in the following table, you will
get the same colour results;

aliceblue antiquewhite Aqua aquamarine

Code=#F0F8FF #FAEBD7 #00FFFF #7FFFD4

azure beige bisque black

#F0FFFF #F5F5DC #FFE4C4 #FFE4C4

By Firaol K.- (fraNeH) 14 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

blanchedalmond blue blueviolet brown

#FFEBCD #0000FF #8A2BE2 #A52A2A

burlywood cadetblue chartreuse chocolate

#DEB887 #5F9EA0 #7FFF00 #D2691E

coral cornflowerblue cornsilk crimson

#FF7F50 #6495ED #FFF8DC #DC143C

cyan darkblue darkcyan darkgoldenrod

#00FFFF #00008B #008B8B #B8860B

darkgray darkgray darkkhaki darkmagenta

#A9A9A9 #A9A9A9 #BDB76B #8B008B

darkolivegreen darkorange darkorchid darkred

#556B2F #FF8C00 #9932CC #8B0000

darksalmon darkseagreen darkslateblue darkslategray

#E9967A #8FBC8F #483D8B #2F4F4F

darkturquoise darkviolet deeppink deepskyblue

#00CED1 #9400D3 #FF1493 #00BFFF

dimgray dodgerblue firebrick floralwhite

#696969 #1E90FF #B22222 #FFFAF0

forestgreen fuchsia gainsboro ghostwhite

#228B22 #FF00FF #DCDCDC #F8F8FF

gold goldenrod Gray green

#FFD700 #DAA520 #808080 #008000

greenyellow honeydew hotpink indianred

#ADFF2F #F0FFF0 #FF69B4 #CD5C5C

indigo ivory khaki lavender

#4B0082 #FFFFF0 #F0E68C #E6E6FA

lavenderblush lawngreen lemonchiffon lightblue

#FFF0F5 #7CFC00 #FFFACD #ADD8E6

By Firaol K.- (fraNeH) 15 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

lightgoldenrodyello
lightcoral lightcyan lightgreen
w
#F08080 #E0FFFF #90EE90
#FAFAD2

lightgrey lightpink lightsalmon lightseagreen

#D3D3D3 #FFB6C1 #FFA07A #20B2AA

lightskyblue lightslategray lightsteelblue lightyellow

#87CEFA #778899 #B0C4DE #FFFFE0

lime limegreen Linen magenta

#00FF00 #32CD32 #FAF0E6 #FF00FF

mediumaquamarin
maroon mediumblue mediumorchid
e
#800000 #0000CD #BA55D3
#66CDAA

mediumspringgree
mediumpurple mediumseagreen mediumslateblue
n
#9370DB #3CB371 #7B68EE
#00FA9A

mediumturquois
mediumvioletred midnightblue mintcream
e
#C71585 #191970 #F5FFFA
#48D1CC

mistyrose moccasin navajowhite navy

#FFE4E1 #FFE4B5 #FFDEAD #000080

oldlace olive olivedrab orange

#FDF5E6 #808000 #6B8E23 #FFA500

orangered orchid palegoldenrod palegreen

#FF4500 #DA70D6 #EEE8AA #98FB98

paleturquoise palevioletred papayawhip peachpuff

#AFEEEE #DB7093 #FFEFD5 #FFDAB9

peru pink Plum powderblue

#CD853F #FFC0CB #DDA0DD #B0E0E6

By Firaol K.- (fraNeH) 16 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

purple red rosybrown royalblue

#800080 #FF0000 #BC8F8F #4169E1

saddlebrown salmon sandybrown seagreen

#8B4513 #FA8072 #F4A460 #2E8B57

seashell sienna silver skyblue

#FFF5EE #A0522D #C0C0C0 #87CEEB

slateblue slategray Snow springgreen

#6A5ACD #6A5ACD #FFFAFA #00FF7F

steelblue tan teal thistle

#4682B4 #D2B48C #008080 #D8BFD8

tomato turquoise violet wheat

#FF6347 #40E0D0 #EE82EE #F5DEB3

white yellow yellowgreen

#FFFFFF #FFFF00 #9ACD32

 Using the Font tag

 Align the text

Font means a specific size and style of the text. Size means the width of the text, and
style means whether the text is Arial, Times New Roman, etc.

Type the following code in notepad and save the file as .html.
<html>
<head>
<title>
Using the Font tag
</title>
</head>
<body>

By Firaol K.- (fraNeH) 17 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

The output will be

Here is normal text without any font tag.
This is a text with font type Arial and font size 4

Q) Try the above code with font Batang, and print the output?

You can also specify the color with the font tag. i.e. color is another attribute of the font
tag. For example
Type the following code in notepad and save the file as .html.
<html>
<head>
<title>
Using the Font tag
</title>

By Firaol K.- (fraNeH) 18 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

</head>
<body>
Here is normal text without any font tag. 
<html>
<head>
<title>
Using the Font tag
</title>
</head>
<body>
Here is normal text without any font tag. 
 This is a text with font type Arial and
font size 4
</body>
</html>
</body>
</html>

The output will be

Here is normal text without any font tag.
This is a text with font type Arial and font size 4

Align the text

To align the text means whether the text will appear on the left of the page or
right of the page or center of the page.

Type the following code in notepad and save as .html file.

By Firaol K.- (fraNeH) 19 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

Using the Align tag

</title>
</head>
<body>
My name is Harshit Kumar
I am a student of University of Suwon
</body>
</html>

The output will be

My name is Harshit Kumar

I am a student of University of Suwon

If there was no tag, then two statements “My name is Harshit Kumar” and “I am a
student of University of Suwon” would come one after the other on the same line.
Whereas tag inserted a new line between the two statements, doing some what the
same as tag.

If you notice the output very carefully there is some difference between tag and
 tag.

Q) What is the difference between the tag and tag?

A) The difference is tag inserts a double new line between two statements whereas
 tag inserts single new line between two statements. Actually tag means
paragraph tag, and tag indicates the browser to start a new paragraph

By Firaol K.- (fraNeH) 20 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

Type the following code and save as .html file.

<html>

<head>

<title>

Using the Align tag

</title>

</head>

<body>My name is Harshit Kumar

I am a student of University of Suwon</body>

</html>The output is

My name is Harshit Kumar

I am a student of University of Suwon

So, You can see that the second statement is aligned towards the right. Similarly the
align attribute of tag can be used as ‘left’ or ‘center’.

Q) Try the above code with and also with ? Show
what the output is?

 Create a Link to new pages using <a href=””>.

 Writing the text as a List of Items using <UL>, <LI>, <OL>.

Creating a link to a new page mean that you make one web page which contains a link to
another page and when you click on the link, another page opens. For example

By Firaol K.- (fraNeH) 21 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

Now what you will see in the output is, an underline below ‘Click here’ and the color will
be blue. This is a link, which links to a new page, and all the links appear as blue color i.e.
The output will be

My name is Harshit Kumar.

I am teaching at Suwon University
To know about my hobbies click here

Now you can type the code below and save as [Link], remember that [Link]
should be saved in the same directory which contains [Link].
<html>
<head>
<title>This is my hobby page</title>
</head>
<body>
My hobbies are 
Football
Listening Music

By Firaol K.- (fraNeH) 22 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

Reading
</body></html>

After clicking on the ‘click here’, a new page [Link] will open, and the output will be

My hobbies are

Football

Listening Music

Reading

The <a href=””> is also called as anchor tag.

Q) What will happen if the <a> tag is used as follows, and use click on “click here”
<a href=””> click here </a> ?
A) The same page will be refreshed again.

I listed above my hobbies; there is a tag which helps in listing. The name of the tag is
<UL> tag. <UL> tag is also known as Un-ordered List tag.

Write the code below which does not use <UL> tag, and save as [Link].
<html>
<head>
<title>This is my hobby page</title>
</head>
<body>
My hobbies are 
Football
Listening Music 
Reading
</body></html>

By Firaol K.- (fraNeH) 23 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

After clicking on the ‘click here’, a new page [Link] will open, and the output will be
My hobbies are

Football

Listening Music

Reading

So, there is not proper indentation. The hobbies football, listening music, reading
should appear towards the right.

</body></html>

And, now the output is

My hobbies are

Football

Listening Music

By Firaol K.- (fraNeH) 24 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

Reading

So, now the hobbies football, Listening music, Reading are indented towards the right.

I can further improve upon the hobbies listing.

Q) How can I have a bullet (dark solid circle) before each hobby?
A) There is different tag called as <LI> which is used with the <UL> tag.

</body>
</html>
So, the output is
My hobbies are

 Football
 Listening Music
 Reading

What I have done, I have replaced the tag with the <li> tag, still keeping the <ul> tag.

By Firaol K.- (fraNeH) 25 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

Q) What if I want numbers instead of bullets?

A) For that, I have to replace <UL> with <OL>.

</body>
</html>

The output will be

My hobbies are

1. Football
2. Listening Music
3. Reading

Nested Lists

Write the following code and save as .html file

By Firaol K.- (fraNeH) 26 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

<html>
<head>
<title>Country visit</title>
</head>
<body>
The countries and cities that I have visited are 
<UL>
<li>Oman</li>
<UL>
<li>Muscat</li>
<li>Salalah</li>
<li>Nizwa</li>
</UL>
<li>South korea</li>
<ul>
<li>Seoul</li>
<li>Suwon</li>
<li>incheon</li>
</Ul>

</UL>

</body>
</html>

The output will be

The countries and cities that I have visited are

 Oman
o Muscat

By Firaol K.- (fraNeH) 27 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

o Salalah
o Nizwa
 South korea
o Seoul
o Suwon
o incheon

Oman and South Korea are countries. Muscat, Salalah, Nizwa are cities in Oman whereas
Seoul, Suwon, Incheon are cities in South Korea.

 Create an Email link and External link.

 Insert graphics.
 Link to specific section in another document.

Create an Email link

When you visit a web site, generally at the bottom you see a link for mail to the
creator of the website. The subject of today’s lecture is how to create such link. Such a
link which on clicking opens an email client is called as email link.

Please type the following code in notepad and save as .html file.
<html>
<head>
<title>mail</title>
</head>
<body>
My name is Firaol. 
I am studying at University of Ambo 
To mail me, Please <a href="[Link] here</a>
</body>

By Firaol K.- (fraNeH) 28 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

</html>

The output will be

My name is Firaol.
I am studying at University of Ambo
To mail me, Please Click here

When you will click on “Click here”, mail client will open, through which you can send
email.
Create an External Link
When you visit a web site, you find links to other websites. When you click on the
link, another web site opens. Such a link which on clicking opens another website is
called as external link

Please type the following code in notepad and save as .html file.
<html>
<head>
<title>mail</title>
</head>
<body>
My name is Firaol. 
I am studying at University of Ambo

The sites I visit for fun are

<ol>
<li><a href="[Link]
<li><a href="[Link]
</ol>
To mail me, Please <a href="[Link] here</a>
</body>

By Firaol K.- (fraNeH) 29 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

</html>

The output will be

My name is Firaol.
I am studying at University of Ambo
The sites I visit for fun are

1. Yahoo
2. Hotmail

To mail me, Please Click here

So, when you will click on “Yahoo”, yahoo website will open, and if you will click on
“Hotmail”, Hotmail website will open.

Insert Graphics
Most of the websites that you visit contain graphics along with text. So graphics
need to be inserted in a web page.

To understand this, you need an image file, please download an image file from the
internet or locate for an image file on your computer. I have got an image file by the
name of “[Link]”.

<html>
<head>
<title>mail</title>
</head>
<body>
My name is Firaol. 
I am studying at University of Ambo 
Below is the map of Asia

By Firaol K.- (fraNeH) 30 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

<img src="[Link]" alt="map of asia">

</body>
</html>

And the output is

My name is Firaol.
I am studying at University of Ambo
Below is the map of Asia

Link to specific section in another document

We discussed how to make a link from one document to another document. Now
we will learn about how to make a link to specific part inside a document.

Let’s take the previous example

By Firaol K.- (fraNeH) 31 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

</body>
</html>

By Firaol K.- (fraNeH) 32 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

<li>Aerosmith</li>
<li>Savage Garden</li>
<li>Celin Deon</li>
<li>Guns & Roses</li>
<li>Britny Spears</li>
<li>50 Cents</li>
<li>Richard Marx</li>
<li>Elton John</li>
<li>Bryan Adams</li>
<li>All Saints</li>
<li>Backstreet Boys</li>
<li>Bon Jovi </li>
<li>Eminem</li>
<li>Enrique Iglesias</li>
<li>Eric Clapton</li>
<li>George Michael</li>
<li>Faithless</li>
<li>Queeb</li>
<li>Cher</li>
<li>Janet Jackson</li>
<li>Jennifer Lopez</li>
<li>Jewel</li>
<li>Kylie Minogue</li>

</ul>

<a name="read"> Reading </a>
My favorites are 
<ul>
<li>Computer Books</li>

By Firaol K.- (fraNeH) 33 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

<li>Fiction</li>
<li>Non-fiction</li>
<li>Science</li>
<li>Newspaper</li>
</ul>

<a name="soccer">Soccer</a>

<ul>
My favorite players are
<li>David Batty, Leeds United </li>
<li>Marcus Bent, Ipswich Town </li>
<li>Craig Burley, Derby County </li>
<li>Mike Salmon, Ipswich Town </li>
<li>David Seaman, Arsenal </li>
<li>Craig Short, Blackburn Rovers </li>
<li>Dean Windass, Middlesbrough</li>

</ul>
</body></html>

Now when you will click on “soccer”, [Link] will open and scroll down, so that
you can see the details about soccer. Similarly, when you click on “music” , [Link]
will open and if required, page will scroll down, so that you can see the details about
music.

Links to Specific Sections within the Same Document

The above concept can also be used for linking a specific section with in the same
document. For example.

By Firaol K.- (fraNeH) 34 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

<title>This is my hobby page</title>

</head>
<body>
My hobbies are 
<a href="#music">Listening Music</a> 
<a href="#read">Reading</a> 
<a href="#soccer">Soccer</a>

<a name="music">Listenin Music</a>

I like listening to music a lot. 
I like rock, instrumental music. 
My favorites are 
<ul>
<li>Michael Jackson</li>
<li>Aerosmith</li>
<li>Savage Garden</li>
<li>Celin Deon</li>
<li>Guns & Roses</li>
<li>Britny Spears</li>
<li>50 Cents</li>
<li>Richard Marx</li>
<li>Elton John</li>
<li>Bryan Adams</li>
<li>All Saints</li>
<li>Backstreet Boys</li>
<li>Bon Jovi </li>
<li>Eminem</li>
<li>Enrique Iglesias</li>
<li>Eric Clapton</li>
<li>George Michael</li>

By Firaol K.- (fraNeH) 35 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

<li>Faithless</li>
<li>Queeb</li>
<li>Cher</li>
<li>Janet Jackson</li>
<li>Jennifer Lopez</li>
<li>Jewel</li>
<li>Kylie Minogue</li>

</ul>

<a name="read"> Reading </a>
My favorites are 
<ul>
<li>Computer Books</li>
<li>Fiction</li>
<li>Non-fiction</li>
<li>Science</li>
<li>Newspaper</li>
</ul>

<a name="soccer">Soccer</a>

By Firaol K.- (fraNeH) 36 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

</ul>
</body></html>
we will learn about
 Using an Image as a Link
 Aligning Images

Using an Image as a Link

I am using three images, for my hobby page. Type the following code and save
as .html file.
<html>
<head>
<title> First Page</title>
</head>
</body>
My name is Firaol. 
I am teaching at Ambo University 
My hobbies are 
<a href="[Link]#soccer"><img src="[Link]" alt=soccer></a> 
<a href="[Link]#music"><img src="[Link]" alt=music></a> 
<a href="[Link]#read"><img src="[Link]" alt=book></a> 
</body>
</html>

The above code is similar to the previous code, but the only difference is instead of text,
now there are images. Earlier clicking on text opens a new page, but now clicking on
link will open a new page.
Aligning Images

With the <img src= > tag, you can specify the width and height of the image i.e.
<img src=” “ width=” “ height=” “>

By Firaol K.- (fraNeH) 37 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

<html>
<head>
<title> First Page</title>
</head>
</body>
My name is Fraol. 
I am teaching at Ambo University 
My hobbies are 
<a href="[Link]#soccer"><img src="[Link]" alt=soccer width=100
height=100></a> 
<a href="[Link]#music"><img src="[Link]" alt=music width=100
height=100></a> 
<a href="[Link]#read"><img src="[Link]" alt=book width=100
height=100></a> 
</body>
</html>
The above code will reduce the size of the image, and make the web page look more
sensible.

You have some flexibility when displaying images. You can have images separated from
text and aligned to the left or right or centered. Or you can have an image aligned with
text. Try several possibilities to see how your information looks best.

You can align images to the top or center of a paragraph using the ALIGN= attributes
TOP and MIDDLE. i.e.

<img src=”” align=”top/middle”>

Let us take an example, and see how image and text look without align attribute and
with align attribute. First take an example of how image and text look without align
attribute.

By Firaol K.- (fraNeH) 38 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

<html>
<head>
<title> First Page</title>
</head>
</body>
My name is Firaol. 
I am teaching at Ambo University 
My hobbies are 
<a href="[Link]#soccer"><img src="[Link]" alt=soccer width=100
height=100></a>Soccer 
<a href="[Link]#music"><img src="[Link]" alt=music width=100
height=100> </a>Music 
<a href="[Link]#read"><img src="[Link]" alt=book width=100
height=100></a>Book 
</body>
</html>

By Firaol K.- (fraNeH) 39 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

So, the output is

My name is Firaol.
I am teaching at Ambo University
My hobbies are

Soccer

MusicMusic

Book

The output shows that, the text is at the bottom of the image, whereas it looks better to
be text in the middle of the image or at the top of the image.

Let us take another example, and see how text and image text and image look with align
attribute. We have used align=middle.

<html>
<head>
<title> First Page</title>
</head>
</body>
My name is Harshit Kumar.

By Firaol K.- (fraNeH) 40 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

I am teaching at Suwon University

My hobbies are 
<a href="[Link]#soccer"><img src="[Link]" alt=soccer width=100
height=100

align=middle></a>Soccer 
<a href="[Link]#music"><img src="[Link]" alt=music width=100
height=100 align=middle></a>Music 
<a href="[Link]#read"><img src="[Link]" alt=book width=100
height=100 align=middle></a>Book 
</body>
</html>
The output can be seen on the browser.

we will learn about

- How to create Table

- Escape Sequences: Special Characters

Tables are very useful while creating HTML pages; especially tables solve the alignment
problem. A table tag has headings where you explain what the columns/rows include,
rows for information, and cells for each item. In the following table, the first two rows
contain the heading information, each detail row explains an HTML table tag, and each
cell contains a paired tag or an explanation of the tag's function.

By Firaol K.- (fraNeH) 41 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

Table Elements

Element Description

<TABLE> ... defines a table in HTML. If the BORDER attribute is present, your
</TABLE> browser displays the table with a border.

<CAPTION> ... defines the caption for the title of the table. The default position of
</CAPTION> the title is centered at the top of the table. The attribute
ALIGN=BOTTOM can be used to position the caption below the table.
NOTE: Any kind of markup tag can be used in the caption.

<TR> ... </TR> specifies a table row within a table. You may define default attributes
for the entire row: ALIGN (LEFT, CENTER, RIGHT) and/or VALIGN
(TOP, MIDDLE, BOTTOM).

<TH> ... </TH> defines a table header cell. By default the text in this cell is bold and
centered. Table header cells may contain other attributes to
determine the characteristics of the cell and/or its contents.

<TD> ... </TD> defines a table data cell. By default the text in this cell is aligned left
and centered vertically. Table data cells may contain other attributes
to determine the characteristics of the cell and/or its contents.

Here is the single cell table, the simplest table possible.

<tr>

<td>here is a single-celled table!</td>

By Firaol K.- (fraNeH) 42 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

</tr>
</table>
</CENTER>
The output on the browser is

here is a single-celled table!

<html>
<head>
<title> Using Table Tag</title>
</head>

<body>
<table border=1>
<caption> Time Table for October-November 2023</caption>
<tr>
<th></th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thrusday</th>
<th>Friday</th>
</tr>

By Firaol K.- (fraNeH) 43 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

</tr>

By Firaol K.- (fraNeH) 44 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

By Firaol K.- (fraNeH) 45 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

Time Table for October-November 2023

Monday Tuesday Wednesday Thrusday Friday

9:30-10:20 - - - - 109

10:30-11:20 - - - - 109

11:30-12:20 - - - - 109

12:30-1:20 - - 312 - -

1:30-2:20 - 306 - - -

2:30-3:20 - 306 - 309 -

3:30-4:20 - - - 309 -

4:30-5:20 - - - 309 -

Escape Sequences: Special Characters (a.k.a. Character Entities)

Special characters are composed of short sequence of characters that are translated by
the browser and displayed as a single character.
Special characters begin with an ampersand(&) and end with a semicolon (;), for
example &nbsp, which is used for giving spaces between words or characters

To understand   type the following code in notepad

<html>
<head>
<title>Using nbsp </title>

By Firaol K.- (fraNeH) 46 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

</head>

<body>
My name is Harshit Kumar.
</body>
</html>

The output is
My name is Harshit Kumar.

Although I gave so many spaces between “Harshit” and “Kumar”, still the output shows
only one space.

This means that browser shrink the spaces, so to insert spaces, we need  .

Type the following code in notepad

<html>
<head>
<title>Using nbsp </title>
</head>

<body>
My name is Harshit       Kumar.
</body>
</html>

The output is
My name is Harshit Kumar.

Remember: Find Forms in html from the slide

By Firaol K.- (fraNeH) 47 [Link]@[Link]

Ambo university
INTERNET PROGRAMMING - CHAPTER 2
PREPARED AND COMPILED BY FIRAOL K. - FRAN-eH (Msc.)

Thank you!
By Firaol

For Any quires email me:

[Link]@[Link]
firanhoney@[Link]

By Firaol K.- (fraNeH) 48 [Link]@[Link]

Basic HTML Tutorial
No ratings yet
Basic HTML Tutorial
13 pages
FSD Unit I
No ratings yet
FSD Unit I
56 pages
HTML Notes For Beginners
100% (2)
HTML Notes For Beginners
10 pages
Internet Programming Chapter 2. HTML.
No ratings yet
Internet Programming Chapter 2. HTML.
45 pages
Complete HTML XML JS CSS WT-Course-Material
No ratings yet
Complete HTML XML JS CSS WT-Course-Material
174 pages
Understanding HTML Files and Tags
No ratings yet
Understanding HTML Files and Tags
5 pages
HTML Note Imp HTML
No ratings yet
HTML Note Imp HTML
165 pages
IPchapter 2
No ratings yet
IPchapter 2
41 pages
WT Course Material
No ratings yet
WT Course Material
88 pages
One Unit-1-15
No ratings yet
One Unit-1-15
15 pages
HTML Basics: Common Tags and Elements
No ratings yet
HTML Basics: Common Tags and Elements
164 pages
UNIT 2 NOTES E-Comm
No ratings yet
UNIT 2 NOTES E-Comm
26 pages
HTML Tutorial
No ratings yet
HTML Tutorial
31 pages
HTML
No ratings yet
HTML
68 pages
HTML Basics for Web Tech Students
No ratings yet
HTML Basics for Web Tech Students
80 pages
Introduction To HTML
No ratings yet
Introduction To HTML
58 pages
Notes Grade+7
No ratings yet
Notes Grade+7
34 pages
Basics To Master HTML
No ratings yet
Basics To Master HTML
51 pages
Web - Technologies PPT New
No ratings yet
Web - Technologies PPT New
336 pages
Dos & HTML: Project Report
No ratings yet
Dos & HTML: Project Report
17 pages
Introduction To HTML
No ratings yet
Introduction To HTML
5 pages
Project Report On e Commerce Website
No ratings yet
Project Report On e Commerce Website
48 pages
Unit 2 Notes
No ratings yet
Unit 2 Notes
19 pages
What Is An HTML File
No ratings yet
What Is An HTML File
45 pages
Unit 1
No ratings yet
Unit 1
38 pages
44 - Chapter 1 - HTML-4 Handouts - Zeeshan
No ratings yet
44 - Chapter 1 - HTML-4 Handouts - Zeeshan
26 pages
Basic Introduction With HTML: By-Assis - Professor-Ajeet Achal
No ratings yet
Basic Introduction With HTML: By-Assis - Professor-Ajeet Achal
21 pages
HTML
No ratings yet
HTML
110 pages
Presentation 1
No ratings yet
Presentation 1
75 pages
What Is An HTML File?
No ratings yet
What Is An HTML File?
32 pages
WT Unit Ii (HTML&XML)
No ratings yet
WT Unit Ii (HTML&XML)
41 pages
Lab-8-HTML Basics
No ratings yet
Lab-8-HTML Basics
14 pages
Web LAB
No ratings yet
Web LAB
6 pages
HTML Elements
No ratings yet
HTML Elements
24 pages
Chapter Two
No ratings yet
Chapter Two
20 pages
WT Lab Manual
No ratings yet
WT Lab Manual
79 pages
What Is HTML?
No ratings yet
What Is HTML?
19 pages
ITaS Lect01
No ratings yet
ITaS Lect01
75 pages
HTML 1
No ratings yet
HTML 1
39 pages
HTML Notes PDF
100% (1)
HTML Notes PDF
55 pages
Understanding HTML Basics and Tags
No ratings yet
Understanding HTML Basics and Tags
8 pages
Unit 2 WT
No ratings yet
Unit 2 WT
22 pages
Introduction To HTML CSC 221
No ratings yet
Introduction To HTML CSC 221
23 pages
Formatting Tags: ............. Tag Contains Information About The Document
No ratings yet
Formatting Tags: ............. Tag Contains Information About The Document
9 pages
What Is An HTML File?
No ratings yet
What Is An HTML File?
42 pages
CH 2
No ratings yet
CH 2
29 pages
HTML Example
No ratings yet
HTML Example
75 pages
Intro HTML
No ratings yet
Intro HTML
75 pages
Introduction To HTML
No ratings yet
Introduction To HTML
26 pages
HTML Chapter 1 4 Credit by SK
No ratings yet
HTML Chapter 1 4 Credit by SK
111 pages
HTML & CSS Basics for Beginners
No ratings yet
HTML & CSS Basics for Beginners
326 pages
HTML Basics: Structure and Tags Guide
No ratings yet
HTML Basics: Structure and Tags Guide
181 pages
CLASS 7 Working With HTML 1
100% (1)
CLASS 7 Working With HTML 1
23 pages
HTML Basics and Structure Guide
No ratings yet
HTML Basics and Structure Guide
18 pages
Internet Programming (IP) Unit 03
No ratings yet
Internet Programming (IP) Unit 03
46 pages
Hyper Text Markup Language
No ratings yet
Hyper Text Markup Language
21 pages
Ilmuguru - Org - Soal USBN Bhs Inggris Lintas Minat SMA K-13 (IPA-IPS)
No ratings yet
Ilmuguru - Org - Soal USBN Bhs Inggris Lintas Minat SMA K-13 (IPA-IPS)
28 pages
HTML Func
No ratings yet
HTML Func
31 pages
Command Prompt Guide & Usage Tips
No ratings yet
Command Prompt Guide & Usage Tips
7 pages
Property Database (Market Value Finder)
No ratings yet
Property Database (Market Value Finder)
4 pages
Report Dip
No ratings yet
Report Dip
16 pages
Cashflow 7000
No ratings yet
Cashflow 7000
7 pages
Practical 15
No ratings yet
Practical 15
5 pages
Boot Time Slides
No ratings yet
Boot Time Slides
131 pages
Honeywell Slate PDF
No ratings yet
Honeywell Slate PDF
136 pages
DBMS Lab Manual
No ratings yet
DBMS Lab Manual
155 pages
Infosys Pseudocode Practice Questions
No ratings yet
Infosys Pseudocode Practice Questions
12 pages
Mini Project 33
No ratings yet
Mini Project 33
6 pages
UX/UI Designer Portfolio & Projects
No ratings yet
UX/UI Designer Portfolio & Projects
1 page
R Programming First Unit
100% (1)
R Programming First Unit
34 pages
1 Esp32 2021
No ratings yet
1 Esp32 2021
6 pages
PowerShell Commands & Features Guide
No ratings yet
PowerShell Commands & Features Guide
4 pages
IOS Developer JD 2
No ratings yet
IOS Developer JD 2
3 pages
OOP ASsignment
No ratings yet
OOP ASsignment
22 pages
Welcome To IST 380 !: Data Science Programming
No ratings yet
Welcome To IST 380 !: Data Science Programming
73 pages
6.4.1.3 Packet Tracer - Configure Initial Router Settings
No ratings yet
6.4.1.3 Packet Tracer - Configure Initial Router Settings
4 pages
T-Mobile Scam
No ratings yet
T-Mobile Scam
8 pages
Difference Between FC and FB in Siemens PLC
No ratings yet
Difference Between FC and FB in Siemens PLC
10 pages
Unit 2 Software Engineering
No ratings yet
Unit 2 Software Engineering
38 pages
GoodAccess Troubleshooting
No ratings yet
GoodAccess Troubleshooting
3 pages
Client Server Computing Model & Data Warehousing
No ratings yet
Client Server Computing Model & Data Warehousing
2 pages
Cse Programming For Problem Solving Laborator Syllabus
No ratings yet
Cse Programming For Problem Solving Laborator Syllabus
5 pages
E TR 7 V HGCsy Cbei A2 RP 5 H A9
No ratings yet
E TR 7 V HGCsy Cbei A2 RP 5 H A9
49 pages
Nameless Sprite Editor Guide
No ratings yet
Nameless Sprite Editor Guide
4 pages
Aerissecurityv 721663682410091
No ratings yet
Aerissecurityv 721663682410091
6 pages
25 Bar Truss Matlab Code
No ratings yet
25 Bar Truss Matlab Code
5 pages