Scribd
Upload
14 views20 pages

Ch-2 HTML

Chapter 2 of 'Fundamental of Internet Programming' focuses on HTML, the standard markup language for creating web pages. It covers essential HTML elements, tags, and their structure, including headings, paragraphs, links, images, lists, and tables. Additionally, it discusses HTML comments, frames, and the use of attributes to enhance web content presentation.

Uploaded by

derejesolomon363
Copyright
© © All Rights Reserved
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
14 views20 pages

Ch-2 HTML

Chapter 2 of 'Fundamental of Internet Programming' focuses on HTML, the standard markup language for creating web pages. It covers essential HTML elements, tags, and their structure, including headings, paragraphs, links, images, lists, and tables. Additionally, it discusses HTML comments, frames, and the use of attributes to enhance web content presentation.

Uploaded by

derejesolomon363
Copyright
© © All Rights Reserved
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
You are on page 1/ 20

Fundamental of Internet Programming

Chapter 2
HTML
What is Markup language?
 A markup language is a programming language that is used to make text more interactive
and dynamic. It can turn a text into images, tables, links etc.
What is Hyper Text Markup Language (HTML)?
 It is the standard markup language for creating Web pages.
 It is a language for describing web pages.
 HTML documents contain HTML tags and plain text
 HTML documents are also called web pages
 It consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements are represented by tags
 HTML tags label pieces of content such as heading, paragraph, table, and so on
 Browsers do not display the HTML tags, but use them to render the content of the page
What is HTML Tag?
 HTML tags are element names surrounded by angle brackets:
<tagname> content goes here...</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 forward slash inserted before the tag
name
The structure of an HTML element

Compiled by Getahun G. Page 10


Fundamental of Internet Programming

The minimal structure of HTML documents:


1. Identifies the document as written in HTML.
2. The head provides information about the document.
3. A descriptive title is required.
4. The body contains the content that displays in the browser.
HTML Element
 The <!DOCTYPE html> declaration defines this document to be HTML version 5
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the document
 The <title> element specifies a title for the document
 The <body> element contains the visible page content
 The <h1> element defines a large heading
 The <p> element defines a paragraph
Heading Tags
 Any document starts with a heading. You can use different sizes for your headings.
 HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>,
<h5>, and <h6>. While displaying any heading, browser adds one line before and one
line after that heading.
Example
<!DOCTYPE html>
<html>
<head> <title>Heading Example</title> </head>
<body>
<h1>this is heading 1</h1>
<h2>this is heading 2</h2>
<h3>this is heading 3</h3>
<h4>this is heading 4</h4>
<h5>this is heading 5</h5>
<h6>this is heading 6</h6>
</body>
</html>

Compiled by Getahun G. Page 11


Fundamental of Internet Programming

Paragraph Tag
 The <p> tag offers a way to structure your text into different paragraphs. Each paragraph
of text should go in between an opening <p> and a closing </p> tag as shown below in
the example:
<!DOCTYPE html>
<html>
<head> <title>Paragraph Example</title> </head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>
Line Break Tag
 Whenever you use the <br /> element, anything following it starts from the next line.
This tag is an example of an empty element, where you do not need opening and closing
tags, as there is nothing to go in between them. The <br /> tag has a space between the
characters br and the forward slash. If you omit this space, older browsers will have
trouble rendering the line break.
Example <!DOCTYPE html>
<html>
<head> <title>Line Break Example</title> </head>
<body>
<p>Hello<br />
You delivered your assignment on time. <br />
Thanks<br />
Mahnaz</p>
</body>
</html>

Compiled by Getahun G. Page 12


Fundamental of Internet Programming

Centering Content
 You can use <center> tag to put any content in the center of the page or any table cell.
<!DOCTYPE html>
<html>
<head>
<title>Centring Content Example</title> </head>
<body> <p>This text is not in the center.</p>
<center> <p>This text is in the center.</p> </center>
</body>
</html>
Horizontal Lines
 Horizontal lines are used to visually break-up sections of a document.
 The <hr> tag creates a line from the current position in the document to the right margin
and breaks the line accordingly. For example, you may want to give a line between two
paragraphs as in the given example below:
<!DOCTYPE html>
<html>
<head> <title>Horizontal Line Example</title> </head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>
 Again <hr /> tag is an example of the empty element, where you do not need opening
and closing tags, as there is nothing to go in between them. The <hr /> element has a
space between the characters hr and the forward slash. If you omit this space, older
browsers will have trouble rendering the horizontal line.
Nonbreaking Spaces
 In cases, where you do not want the client browser to break text, you should use a
nonbreaking space entity &nbsp; instead of a normal space.

Compiled by Getahun G. Page 13


Fundamental of Internet Programming

 For example, when coding the "12 Angry Men" in a paragraph, you should use something
similar to the following code:
<!DOCTYPE html>
<html>
<head> <title>Nonbreaking Spaces Example</title> </head>
<body>
<p>An example of this technique appears in the movie
"12&nbsp;Angry&nbsp;Men."</p>
</body>
</html>
HTML Links
 HTML links are defined with the <a> tag: <a href="url">link text</a>. The link's
destination is specified in the href attribute. Attributes are used to provide additional
information about HTML elements.
Example: -<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
HTML image
 HTML images are defined with the <img> tag.
 The source file (src), alternative text (alt), width, and height are provided as attributes.
Example: -<img src="smiley.gif" alt="Smiley face" height="42" width="42">
HTML Lists
 HTML lists are defined with the <ul> (unordered/bullet list) or the <ol>
(ordered/numbered list) tag, followed by <li> tags (list items):
Example
<!DOCTYPE html>
<html>
<head> <title>HTML list Tag</title> </head>
<body>
<h1>this is first group</h1>
<p>Following is a list of vegetables</p>
<ol>
<li>Beetroot</li>

Compiled by Getahun G. Page 14


Fundamental of Internet Programming

<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
<h2>this is second group</h2>
<p >Following is a list of fruits</p>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>Strawberry</li>
</ul>
</body>
</html>
HTML Comments
 Comment is a piece of code which is ignored by any web browser. It is a good practice to
add comments into your HTML code, especially in complex documents, to indicate
sections of a document, and any other notes to anyone looking at the code. Comments
help you and others understand your code and increases code readability.
 HTML comments are placed in between <!-- ... --> tags. So, any content placed with-in
<!-- ... --> tags will be treated as comment and will be completely ignored by the
browser. In HTML there are three types of comments those are described as follows:
1. Single comment
Example
<!DOCTYPE html>
<html>
<head> <!-- Document Header Starts --> <title>This is document title</title>
</head> <!-- Document Header Ends -->
<body>
<p>Document content goes here .....</p>
</body>

Compiled by Getahun G. Page 15


Fundamental of Internet Programming

</html>
2. Multiline Comments
 So far we have seen single line comments, but HTML supports multi-line comments as
well. You can comment multiple lines by the special beginning tag <!-- and ending tag --
> placed before the first line and end of the last line as shown in the given example
below. Example
<!DOCTYPE html>
<html>
<head> <title>Multiline Comments</title> </head>
<body>
<!--
This is a multiline comment and it can
span through as many as lines you like.
-->
<p>Document content goes here </p>
</body> </html>
3. Conditional Comments
 Conditional comments only work in Internet Explorer (IE) on Windows but they are
ignored by other browsers. They are supported from Explorer 5 onwards, and you can use
them to give conditional instructions to different versions of IE. Example
<!DOCTYPE html>
<html>
<head> <title>Conditional Comments</title>
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->
</head>
<body>
<p>Document content goes here .....</p>
</body>
</html>

Compiled by Getahun G. Page 16


Fundamental of Internet Programming

HTML Frames
 HTML frames are used to divide your browser window into multiple sections where each
section can load a separate HTML document. A collection of frames in the browser
window is known as a frameset. The window is divided into frames in a similar way the
tables are organized: into rows and columns.
Disadvantages of Frames
 There are few drawbacks with using frames, so it's never recommended to use frames in
your webpages. Some smaller devices cannot cope with frames often because their screen
is not big enough to be divided up. Sometimes your page will be displayed differently on
different computers due to different screen resolution.
 The browser's back button might not work as the user hopes. There are still few browsers
that do not support frame technology.
Creating Frames
 To use frames on a page we use <frameset> tag instead of <body> tag.
 The <frameset> tag defines how to divide the window into frames.
 The rows attribute of <frameset> tag defines horizontal frames and cols attribute defines
vertical frames.
 Each frame is indicated by <frame> tag and it defines which HTML document shall open
into the frame.
Following is the example to create three horizontal frames:
<!DOCTYPE html>
<html>
<head> <title>HTML Frames</title> </head>
<frameset rows = "10%,80%,10%">
<frame name = "top" src = "/html/top_frame.htm" />
<frame name = "main" src = "/html/main_frame.htm" />
<frame name = "bottom" src = "/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>

Compiled by Getahun G. Page 17


Fundamental of Internet Programming

</html>
Let's put the above example as follows, here we replaced rows attribute by cols and changed
their width. This will create all the three frames vertically:
<!DOCTYPE html>
<html>
<head> <title>HTML Frames</title> </head>
<frameset cols = "25%, 50%, 25 %">
<frame name = "left" src = "/html/top_frame.htm" />
<frame name = "center" src = "/html/main_frame.htm" />
<frame name = "right" src = "/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>
HTML Tables
 HTML Tables is used to preset data in rows and columns format. A Table is the
collection of rows and rows is the collection of columns. <tr> stands for table rows. To
add a row in a table <table row> tags are used. <td> or <th> is used to put the column
inside the row. Whereas <td> means table data and <th> means table head.
Syntax: <table>
<tr>
<td>row1col1</td>
<td>row1col2</td>
</tr>
</table>
Example
<table border="1">
<tr>
<th>Name</th>
<th>Email</th>

Compiled by Getahun G. Page 18


Fundamental of Internet Programming

</tr>
<tr>
<td>phptpoint</td>
<td>[email protected]</td>
</tr>
<tr>
<td>phptpoint blog</td>
<td>[email protected]</td>
</tr>
</table>
 In the above example a table is created have 3 rows and 6 columns where each row
contains 2 column. <tr> tag is used to create a row while <td> or <th> is used to create
column. <tr> comes in between <table> tag while <td> or <th> comes in between <tr>.
How to merge table column
 When you want to merge 2 or more than 2 column (cell), use colspan property of <td
colspan="2″> or <th colspan=”2″>. Example
<table border="1">
<tr>
<th colspan="2"> User Details</th>
</tr>
<tr>
<th>Name</th>
<th>Email</th>
</tr>
<tr>
<td>phptpoint</td>
<td>[email protected]</td>
</tr>
<tr>
<td>phptpoint blog</td>
<td>[email protected]</td>

Compiled by Getahun G. Page 19


Fundamental of Internet Programming

</tr> </table>
How to merge table rows
 When you want to merge 2 or more than 2 rows in a single row, use rowspan property of
<td rowspan=”2″> or <th rowspan=”2″>
 Example
<table border="1">
<tr>
<td rowspan="2">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>
Nested Table
 Nested table means how to use table inside a table. Multiple times you need to use table
inside a table. When you want to use a table inside a table write the syntax of table in
between your cell i.e either <td> or <th>.
 Example
<html>
<body>
<table border="1" bgcolor="gray" width="200" height="200">
<tr>
<th>
<table align="center" border="1" bgcolor="#F8F8F8" width="100"
height="100">
<tr>
<th>Inner Table</th>
</tr>
</table>
</th>

Compiled by Getahun G. Page 20


Fundamental of Internet Programming

</tr>
</table>
</body>
</html>
Definition and Usage
 The <table> tag defines an HTML table. An HTML table consists of the <table> element
and one or more <tr>, <th>, and <td> elements.
 The <tr> element defines a table row, the <th> element defines a table header, and the
<td> element defines a table cell. A more complex HTML table may also include
<caption>, <col>, <colgroup>, <thead>, <tfoot>, and <tbody> elements.
HTML Buttons
 HTML buttons are defined with the <button> tag. The <button> tag defines a clickable
button. Inside a <button> element you can put content, like text or images. This is the
difference between this element and buttons created with the <input> element.
 Example: -Two button elements that act as one submit button and one reset button (in a
form):

HTML Forms
<form action="/action_page.php" method="get">
First name: <input type="text" name="fname"><br> Last name: <input
type="text" name="lname"><br>
<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>
</form>
 HTML Forms are required, when you want to collect some data from the site visitor.
 For example, during user registration you would like to collect information such as name,
email address, credit card, etc.
 A form will take input from the site visitor and then will post it to a back-end application
such as CGI, ASP Script or PHP script etc.
 The back-end application will perform required processing on the passed data based on
defined business logic inside the application.

Compiled by Getahun G. Page 21


Fundamental of Internet Programming

 There are various form elements available like text fields, text-area fields, drop-down
menus, radio buttons, checkboxes, etc.
 The HTML <form> tag is used to create an HTML form and it has following syntax:
<form action = "Script URL" method = "GET|POST">
form elements like input, textarea etc.
</form>
Form Attributes
 Apart from common attributes, following is a list of the most frequently used form
attributes
S.No Attribute Description
1 Action Backend script ready to process your passed data.
2 Method Method to be used to upload data. The most frequently used are
GET and POST methods.
3 Target Specify the target window or frame where the result of the script
will be displayed. It takes values like _blank, _self, _parent etc.
4 Enctype You can use the enctype attribute to specify how the browser
encodes the data before it sends it to the server. Possible values
are:
 application/x-www-form-urlencoded − This is the standard
method most forms use in simple scenarios.
 mutlipart/form-data − This is used when you want to
upload binary data in the form of files like image, word file
etc.
HTML Form Controls
 There are different types of form controls that you can use to collect data using HTML
form:
1. Text Input Controls
 There are three types of text input used on forms:
A. Single-line text input controls: is used for items that require only one line of user input,
such as search boxes or names. They are created using HTML <input> tag. Here is a
basic example of a single-line text input used to take first name and last name

Compiled by Getahun G. Page 22


Fundamental of Internet Programming

<!DOCTYPE html>
<html>
<head> <title>Text Input Control</title> </head>
<body>
<form >
First name: <input type = "text" name = "first_name" /> <br>
Last name: <input type = "text" name = "last_name" /
</form>
</body>
</html>
Attributes: -Following is the list of attributes for <input> tag for creating text field.

S.No Attribute Description


1 Type Indicates the type of input control and for text input control it will
be set to text.
2 Name Used to give a name to the control which is sent to the server to be
recognized and get the value.
3 Value This can be used to provide an initial value inside the control.
4 Size Allows specifying the width of the text-input control in terms of
characters.
5 maxlength Allows specifying the maximum number of characters a user can
enter into the text box.
B. Password input controls: This is also a single-line text input but it masks the character as
soon as a user enters it. They are also created using HTML <input> tag. Here is a basic
example of a single-line password input used to take user password:
<!DOCTYPE html>
<html>
<head> <title>Password Input Control</title> </head>
<body>
<form >
User ID : <input type = "text" name = "user_id" /> <br>
Password: <input type = "password" name = "password" />

Compiled by Getahun G. Page 23


Fundamental of Internet Programming

</form>
</body>
</html>
Attributes: -Following is the list of attributes for <input> tag for creating password
field.
S.No Attribute Description
1 Type Indicates the type of input control and for password input
control it will be set to password.
2 Name Used to give a name to the control which is sent to the server
to be recognized and get the value.
3 Value This can be used to provide an initial value inside the
control.
4 Size Allows specifying the width of the text-input control in terms
of characters.
5 maxlength Allows specifying the maximum number of characters a user
can enter into the text box.
C. Multi-line text input controls: This is used when the user is required to give details that
may be longer than a single sentence. They are created using HTML <textarea> tag. Here
is a basic example of a multi-line text input used to take item description:
<!DOCTYPE html>
<html>
<head> <title>Multiple-Line Input Control</title> </head>
<body>
<form>
Description : <br />
<textarea rows = "5" cols = "50" name = "description">
Enter description here...
</textarea>
</form>
</body>
</html>

Compiled by Getahun G. Page 24


Fundamental of Internet Programming

Attributes: -Following is the list of attributes for <textarea> tag.

S.No Attribute Description


1 Name Used to give a name to the control which is sent to the
server to be recognized and get the value.
2 Rows Indicates the number of rows of text area box.
3 Cols Indicates the number of columns of text area box
2. Checkbox Control
 Checkboxes are used when more than one option is required to be selected. They are also
created using HTML <input> tag but type attribute is set to checkbox.Here is an example
HTML code for a form with two checkboxes:
<!DOCTYPE html>
<html>
<head> <title>Checkbox Control</title> </head>
<body>
<form>
<input type = "checkbox" name = "maths" value = "on"> Maths
<input type = "checkbox" name = "physics" value = "on"> Physics
</form>
</body>
</html>

Attributes: -Following is the list of attributes for <checkbox> tag.

S.No Attribute Description


1 Type Indicates the type of input control and for checkbox input
control it will be set to checkbox.
2 Name Used to give a name to the control which is sent to the server
to be recognized and get the value.
3 Value The value that will be used if the checkbox is selected.
4 Checked Set to checked if you want to select it by default.
3. Radio Button Control

Compiled by Getahun G. Page 25


Fundamental of Internet Programming

 Radio buttons are used when out of many options; just one option is required to be
selected. They are also created using HTML <input> tag but type attribute is set to
radio. Here is example HTML code for a form with two radio buttons
<!DOCTYPE html>
<html>
<head> <title>Radio Box Control</title> </head>
<body>
<form>
<input type = "radio" name = "subject" value = "maths"> Maths
<input type = "radio" name = "subject" value = "physics"> Physics
</form>
</body>
</html>
Attributes: -Following is the list of attributes for radio button.

S.No Attribute Description


1 Type Indicates the type of input control and for checkbox input
control it will be set to radio.
2 Name Used to give a name to the control which is sent to the server
to be recognized and get the value.
3 Value The value that will be used if the radio box is selected.
4 Checked Set to checked if you want to select it by default.
4. Select Box Control
 A select box, also called drop down box which provides option to list down various
options in the form of drop down list, from where a user can select one or more options.
Here is example HTML code for a form with one drop down box
<!DOCTYPE html>
<html>
<head> <title>Select Box Control</title> </head>
<body>
<form>
<select name = "dropdown">

Compiled by Getahun G. Page 26


Fundamental of Internet Programming

<option value = "Maths" selected>Maths</option>


<option value = "Physics">Physics</option>
</select>
</form>
</body>
</html>
Attributes: -Following is the list of important attributes of <select> tag

S.No Attribute Description


1 Name Used to give a name to the control which is sent to the server
to be recognized and get the value.
2 Size This can be used to present a scrolling list box.
3 Multiple If set to "multiple" then allows a user to select multiple items
from the menu.
 Following is the list of important attributes of <option> tag

S.No Attribute Description


1 Value The value that will be used if an option in the select box box
is selected.
2 Selected Specifies that this option should be the initially selected value
when the page loads.
3 Label An alternative way of labeling options
5. File Upload Box
 If you want to allow a user to upload a file to your web site, you will need to use a file
upload box, also known as a file select box. This is also created using the <input>
element but type attribute is set to file. Here is example HTML code for a form with one
file upload box
<!DOCTYPE html>
<html>
<head><title>File Upload Box</title></head>
<body>
<form>
<input type = "file" name = "file upload" accept = "image/*" />
Compiled by Getahun G. Page 27
Fundamental of Internet Programming

</form>
</body>
</html>
Attributes: -Following is the list of important attributes of file upload box

S.No Attribute Description


1 Name Used to give a name to the control which is sent to the server
to be recognized and get the value.
2 Accept Specifies the types of files that the server accepts.
6. Button Controls
 There are various ways in HTML to create clickable buttons. You can also create a
clickable button using <input>tag by setting its type attribute to button. The type
attribute can take the following values
S.No Attribute Description
1 Submit This creates a button that automatically submits a form.
2 Reset This creates a button that automatically resets form
controls to their initial values.
3 Button This creates a button that is used to trigger a client-side
script when the user clicks that button.
4 Image This creates a clickable button but we can use an image as
background of the button.
Here is example HTML code for a form with three types of buttons
<!DOCTYPE html>
<html>
<head> <title>File Upload Box</title> </head>
<body>
<form>
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
<input type = "button" name = "ok" value = "OK" />
<input type = "image" name = "imagebutton" src = "/html/images/logo.png" />
</form>
Compiled by Getahun G. Page 28
Fundamental of Internet Programming

</body>
</html>
7. Hidden Form Controls
 Hidden form controls are used to hide data inside the page which later on can be pushed
to the server. This control hides inside the code and does not appear on the actual page.
For example, following hidden form is being used to keep current page number. When a
user will click next page then the value of hidden control will be sent to the web server
and there it will decide which page will be displayed next based on the passed current
page. Here is example HTML code to show the usage of hidden control
<!DOCTYPE html>
<html>
<head> <title>File Upload Box</title> </head>
<body>
<form>
<p>This is page 10</p>
<input type = "hidden" name = "pagename" value = "10" />
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset” value = "Reset" />
</form>
</body>
</html>

Compiled by Getahun G. Page 29

You might also like