Practical File

Of
Internet and
Web Designing

Submitted To: Submitted By :

Mrs. Meenu verma soni Miss. Diksha Rattan
Class : BA 5th Sem
(Lect.In Comp. Sci.& IT.)
University Roll. No. : 10322238710

P.G. Department of computer Science and IT

A.S.S.M. College, Mukandpur

1|Page
Contents
1. Introduction to HTML ........................................................................................................................... 3
2. Basic Structure of HTML ....................................................................................................................... 4
3. Steps for Creating HTML Document................................................................................................ 5
4. Formatting Tags .................................................................................................................................. 7
5. HTML Presentational Elements ........................................................................................................ 9
6. HTML Phrase Elements ................................................................................................................... 11
7. HTML Comments:............................................................................................................................ 13
8. HTML Lists and Types: ................................................................................................................... 14
9. Hyperlinks and Types: ........................................................................................................................ 15
10. Adding Image to a webpage ......................................................................................................... 18
11. Adding marquee to a webpage ..................................................................................................... 19
12. Creating Table in HTML ............................................................................................................. 20
13. Show the use of ‘Colspan’ and rowspan in table : ........................................................................ 21
14. Crate a general from of student Admission ................................................................................ 22
15. Create a link between frames ....................................................................................................... 26

2|Page
 1. Introduction to HTML

Hypertext Markup Language is referred to as HTML. Actually, it's

merely a text file with codes in it that instruct the browser to display
the data. You can instruct the browser to centre the content on the page
or to display a given string of text as a header with bold type, for
instance. Instead of.doc,.txt, or.rtf, we use the file extension.html to
inform the browser that the text file contains HTML. Since an HTML
document is simply a text file, any text editor can be used to create
one. For authoring HTML code, you can use one of the operating
system's built-in text editors, such as notepad.
Figure
HTML1 Language
: HTML LANGUAGE
Pros and cons of HTML

Pros of using HTML include:

 It includes a wide number of resources available and is extensively adopted.

 Works on any browser natively.
 Is not too difficult to learn.
 Has a source code that is clear and consistent.
 Is open to use and open source.
 It is suitable with PHP and other backend programming languages.
A few cons to consider are:
• All components must be written independently even though they share identical
elements;
• All components must be designed individually but even though they share similar
elements;
•Unpredictable browser action is possible. For example, newer features may not even work
with older browsers.

3|Page
 2. Basic Structure of HTML
An HTML document is composed of following three section:
1. a line containing HTML version information,
2. a declarative header section (delimited by the HEAD element),
3. a body, which contains the document's actual content. The body may be implemented
by the BODY element.
White space (spaces, newlines, tabs, and comments) may appear before or after each section.
Sections 2 and 3 should be delimited by the HTML element.
HTML element: the elements tell the browser what to display, the attributes define how they
will behave.The tags mark the beginning and the end of an element. They may not be necessary
for some elements, especially the closing tags. Equally important, the attributes are only within
the opening tags.
HTML Attribute: In simple words, an HTML attribute is what modifies an HTML element.
It is usually in the form of unique words that one inserts inside the opening tag. They control
the behavior of the element that follows.

Every tag has two sections. The first one is usually the name of the attribute, while the other
one is its value. The two are usually separated by an equals sign (=). Attributes are inside the
start tag of that particular element that needs modification.

Here's an example of a simple HTML document:

Basic HTML Template

HTML Page in Browser

4|Page
 3. Steps for Creating HTML Document
Step 1—open Notepad
If using a Windows operating system select Start from the Task Bar (typically located in the lower left
corner of the screen).
Screenshot depicting the Windows Operating System icon

In the Search programs and files field, enter Notepad. The Notepad program should then be displayed, then
> select Notepad to open the program.

Screenshot depicting the Search feature of Windows

Step 2—create a template in Notepad
Type the following tags in Notepad exactly as they appear in the example below (please note that you
should enter your own title of the document in the Title section).
<html>
<head>
<title> Homepage</title>
</head>
<body>
<pre>
Welcome to My Homepage ……………..
</pre>
</body>
</html>
Your screen should look like this:

5|Page
Step 3—save the file as an HTML document
Select File > Save As.
In the File Name field, type the name of the file with an .html extension > select Save.

Please be sure the file name conforms to EDGAR’s file name standards:
File name must be 32 characters or less.
All characters must be lowercase.
File name must start with a letter.
File name cannot contain any spaces.
It may contain digits 0-9.
It may have up to one period (.), one hyphen (-), and one underscore character (_).
Screenshot depicting how to save a Word document as an HTML file in the Save As pop-up window of
Windows

The .html document is now ready to be attached to your filing for submission.
Step 4— Run HTML File in Web Browser
Open Your HTML file and double-click your html file.
The result would be look like this :

6|Page
 4. Formatting Tags
HTML Text is written in order to increase it appearance and experience. Users can format text
using HTML without applying CSS. In HTML, there are several formatting tags. Text can really
be highlighted in bold, underscored, or underlined using these tags.

In HTML the formatting tags are divided into two categories:

 Physical tag: These tags are used to provide the visual appearance to the text.
 Logical tag: These tags are used to add some logical or semantic value to the text.

NOTE: There are some physical and logical tags which may give same visual appearance,

But they will be different in semantics.

Semantics : A semantic element clearly describes its meaning to both the browser and the
developer. Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.
Examples of semantic elements: <form> , <table> , and <article> - Clearly defines its content.

Here, we are going to learn 14 HTML formatting tags. Following is the list of HTML formatting
text.

Element name Description

<b> The physical tag "b" is used to bold the text that is typed between it.
<strong> This is a logical tag, which tells the browser that the text is important.
<i> This is a physical tag which is used to make text italic.
<em> This is a logical tag which is used to display content in italic.
<mark> This tag is used to highlight text.
<u> This tag is used to underline text written between it.
<tt> This tag is used to appear a text in teletype. (not supported in HTML5)
<strike> This tag is used to draw a strikethrough on a section of text. (Not
supported in HTML5)
<sup> It displays the content slightly above the normal line.
<sub> It displays the content slightly below the normal line.
<del> This tag is used to display the deleted content.
<ins> This tag displays the content which is added
<big> This tag is used to increase the font size by one conventional unit.
<small> This tag is used to decrease the font size by one unit from base font
size.
Examples:
 <p> <b>Write Your First Paragraph in bold text.</b></p>
 <p><strong>This is an important content</strong>, and this is normal content</p>
 <p> <i>Write Your First Paragraph in italic text.</i></p>
 <p><em>This is an important content</em>, which displayed in italic font.</p>
 <h2> I want to put a <mark> Mark</mark> on your face</h2>
 <p> <u>Write Your First Paragraph in underlined text.</u></p>
 <p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>
 <p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>
 <p>Hello ^{Write Your First Paragraph in superscript.}</p>
 <p>Hello _{Write Your First Paragraph in subscript.}</p>
 <p>Hello <del>Delete your first paragraph.</del></p>
 <p> <del>Delete your first paragraph.</del><ins>Write another paragraph.</ins></p>
7|Page
  <p>Hello <big>Write the paragraph in larger font.</big></p>
 <p>Hello <small>Write the paragraph in smaller font.</small></p>

formatting elements in HTML

HTML formatting elements

8|Page
 5. HTML Presentational Elements
An HTML file is made of elements. These elements are responsible for creating web pages and define
content in that webpage. An element in HTML usually consist of a start tag <tag name>, close tag </tag
name> and content inserted between them. Technically, an element is a collection of start tag, attributes,
end tag, content between them.
Void element: All the elements in HTML do not require to have start tag and end tag, some elements does
not have content and end tag such elements are known as Void elements or empty elements. These elements
are also called as unpaired tag.
Some Void elements are <br> (represents a line break) , <hr>(represents a horizontal line), etc.
Nested HTML Elements: HTML can be nested, which means an element can contain another element.
Block-level and Inline HTML elements
For the default display and styling purpose in HTML, all the elements are divided into two categories:

▪ Block-level element
▪ Inline element

 Block-level element:These are the elements, which structure main part of web page, by dividing a
page into coherent blocks.A block-level element always start with new line and takes the full width
of web page, from left to right.These elements can contain block-level as well as inline elements.
Following are the block-level elements in HTML.
<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>,
<figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>,
<ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> and <video>.

 Inline elements:Inline elements are those elements, which differentiate the part of a given text and
provide it a particular function.These elements does not start with new line and take width as per
requirement.
The Inline elements are mostly used with other elements.
<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>,
<input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>,
<sub>, <sup>, <textarea>, <time>, <tt>, <var>.
Following is the list of the some main elements used in HTML:

Start tag Content End tag Description

<h1> ...... <h6> These are headings of </h1>??..</h6> These elements are used to
HTML provide the headings of page.
<p> This is the paragraph </p> This element is used to
display a content in form of
paragraph.
<div> This is div section </div> This element is used to
provide a section in web page.
<br> This element is used to
provide a line break. ( void
element)
<hr> This element is used to
provide a horizontal line.
(void element)

9|Page
10 | P a g e
 6. HTML Phrase Elements
HTML phrase elements are inline elements that define the meaning, structure, or semantics of small pieces
of text within a document. These elements are used to give specific meaning to certain words or phrases,
which can aid in understanding, accessibility, and search engine optimization (SEO).

<em> Emphasizes text, typically displayed <em>important</em> → important

in italics.
<strong> Strong emphasis, usually shown in <strong>strong</strong> → strong
bold.
<dfn> Marks a definition term. <dfn>HTML</dfn> → HTML (marked as a
defined term)
<cite> Represents a citation or reference. <cite>The Great Gatsby</cite> → The Great
Gatsby
<abbr> Abbreviation with a full form <abbr title="NASA">NASA</abbr> → NASA
available in title. (hover shows "National Aeronautics and
Space Administration")
<code> Displays code in a monospaced font. <code>print("Hello World")</code> →
print("Hello World")
<samp> Denotes sample output from a <samp>Hello World</samp> → Hello World
program or system.
<kbd> Represents keyboard input. <kbd>Ctrl</kbd> + <kbd>C</kbd> → Ctrl + C
<var> Represents a variable in <var>x</var> + <var>y</var> = <var>z</var> →
mathematical or programming x+y=z
contexts.

11 | P a g e
12 | P a g e
 7. HTML Comments:
HTML, comments are used to leave notes or explanations within the code that are ignored by the
browser. These comments are not visible on the webpage but are helpful for developers to
understand the structure, logic, or purpose of certain parts of the code.

Syntax of HTML Comments:

<!-- This is a comment -->

 The comment starts with <!-- and ends with -->.

 Any text or code inside the comment tags will not be rendered by the browser.

13 | P a g e
 8. HTML Lists and Types:
HTML, lists are used to group related items together, typically displayed in a structured manner. There
are three main types of lists in HTML:
1. Ordered List (<ol>)
An ordered list is used for items that are listed in a specific sequence or order. The items are typically
numbered (or lettered).
2. Unordered List (<ul>)
An unordered list is used when the order of items doesn't matter. The list items are typically marked with
bullet points. 3. Definition List (<dl>)
3. Definition List (<dl>)
A definition list is used to display a list of terms and their corresponding definitions. It consists of the
following elements:
<dt>: Defines the term.
<dd>: Defines the description or definition of the term.

14 | P a g e
 9. Hyperlinks and Types:
In HTML, hyperlinks are used to link from one page to another, whether within the same website or to
an external site. Hyperlinks are created using the <a> (anchor) tag, which stands for "anchor" because it
anchors the link to another location.

Syntax of a Basic Hyperlink:

<a href="URL">Link Text</a>

 href: The hyperlink reference or target URL (Uniform Resource Locator) to which the link
points.
 Link Text: The clickable text that the user sees on the webpage.

Types of Hyperlinks:

1. Absolute URL (External Link):

o Links that point to an external website or resource.
o Requires the full URL, including the protocol (http:// or https://).

Example:

<a href="https://www.google.com">Visit Google</a>

This link will take the user to Google's website.

2. Relative URL (Internal Link):

o Links that point to another page within the same website.
o Uses a relative path instead of the full URL.

Example:

<a href="about.html">About Us</a>

This link will take the user to the "about.html" page in the same directory.

o
You can also use paths to navigate directories:
 href="folder/page.html": Link to a file in a subfolder.
 href="../page.html": Link to a file in the parent folder.
3. Anchor Links (Internal Page Navigation):
o Links to a specific section within the same page.
o The target section must have an id attribute.

Example:

<a href="#section1">Go to Section 1</a>

<h2 id="section1">Section 1</h2>

This link will scroll the page to the section with id="section1".

4. Email Links:
o Links that open the user's email client to send an email.
o Use mailto: followed by the email address.

Example:

15 | P a g e
 <a href="mailto:[email protected]">Email Us</a>

This link will open the email client to send a message to "[email protected]".

5. Telephone Links:
o Links that prompt the user to dial a phone number (mainly used on mobile devices).
o Use tel: followed by the phone number.

Example:

<a href="tel:+1234567890">Call Us</a>

This link will prompt the device to dial the number +1234567890.

6. Download Links:
o Links that prompt the user to download a file.
o Use the download attribute to specify that the file should be downloaded.

Example:

<a href="file.pdf" download>Download PDF</a>

This link will download the "file.pdf" when clicked.

7. Target Attribute:

The target attribute is used to specify where the linked document will open:

 _self (default): Opens the link in the same tab/window.

 _blank: Opens the link in a new tab or window.

Example:

<a href="https://www.example.com" target="_blank">Open in new tab</a>

Summary of Hyperlink Types:

Type Description Example
External Link Links to an external website <a
using the full URL. href="https://www.google.com">Google</a>
Internal Link Links to another page on <a href="about.html">About Us</a>
the same website.
Anchor Link Links to a section within the <a href="#section1">Go to Section 1</a>
same page.
Email Link Opens the user's email <a
client to send an email. href="mailto:[email protected]">Email
Us</a>
Telephone Link Opens the phone dialer on <a href="tel:+1234567890">Call Us</a>
mobile devices.
Download Link Prompts the user to <a href="file.pdf" download>Download
download a file. PDF</a>

Hyperlinks are a fundamental part of the web, enabling easy navigation between resources across
different pages and sites.
16 | P a g e
17 | P a g e
 10. Adding Image to a webpage

To add an image to a webpage in HTML, you use the <img> tag. This tag is self-closing, meaning it does
not have a closing tag. It is used to embed images into a web page.
Basic Syntax:
<img src="image_url" alt="description" />
src (source): Specifies the path or URL of the image file.
alt (alternative text): Provides a description of the image, which is displayed if the image cannot be
loaded and is important for accessibility.
Common Attributes:
width and height: Set the width and height of the image (in pixels or percentages).
alt: Provides a text description for screen readers or if the image fails to load.
title: Displays a tooltip when you hover over the image.
Example with width, height, and title:
<img src="path_to_image.jpg" alt="A beautiful sunset" width="600" height="400" title="Hover text:
Sunset image" />
This example adds an image to the webpage, sets its size, and provides hover text for additional context.

18 | P a g e
 11. Adding marquee to a webpage
The <marquee> tag is used to create a scrolling text or image in HTML. However, it's important to note
that this tag is deprecated in HTML and is no longer recommended for use in modern web development
because it is not supported in HTML5. For modern usage, CSS animations should be used instead.
That said, here’s how the <marquee> tag works:
Basic Syntax of <marquee>:
<marquee>Scrolling text goes here</marquee>

19 | P a g e
 12. Creating Table in HTML
In HTML, tables are created using the <table> element along with several other tags to define the rows
and columns. Here's a breakdown of the basic structure for creating a table:
Basic Table Elements:
<table>: Defines the table.
<tr> (table row): Defines a row within the table.
<th> (table header): Defines a header cell within the table (usually bold and centered by default).
<td> (table data): Defines a regular cell within the table.

20 | P a g e
 13. Show the use of ‘Colspan’ and rowspan in table :

The colspan and rowspan attributes in HTML tables are used to merge cells horizontally and vertically,
respectively.
colspan:
The colspan attribute is used to make a cell span across multiple columns.
rowspan:
The rowspan attribute is used to make a cell span across multiple rows.
Here’s an example that demonstrates both colspan and rowspan in a table:

21 | P a g e
 14. Crate a general from of student Admission
<!DOCTYPE html>

<html lang="en">

<head>

<title>Admission Form</title>

</head>

<body>

<div class="container">

<h2>Student Admission Form</h2>

<form action="/submit" method="POST">

<!-- Personal Details -->

<div class="form-group">

<label for="firstName">First Name:</label>

<input type="text" id="firstName" name="firstName" required>

</div>

<div class="form-group">

<label for="middleName">Middle Name:</label>

<input type="text" id="middleName" name="middleName">

</div>

<div class="form-group">

<label for="lastName">Last Name:</label>

<input type="text" id="lastName" name="lastName" required>

</div>

<!-- Gender -->

<div class="form-group">

<label>Gender:</label>

<div class="gender-options">

<label><input type="radio" name="gender" value="male" required> Male</label>

<label><input type="radio" name="gender" value="female"> Female</label>

<label><input type="radio" name="gender" value="other"> Other</label>

</div>

</div>

22 | P a g e
 <!-- Phone Number -->

<div class="form-group">

<label for="phone">Phone Number:</label>

<div>

<select id="countryCode" name="countryCode" style="width: 100px;">

<option value="+91">+91 (India)</option>

<option value="+1">+1 (USA)</option>

<option value="+44">+44 (UK)</option>

<!-- Add more country codes as needed -->

</select>

<input type="tel" id="phone" name="phone" placeholder="Phone number" required

style="width: calc(100% - 110px); margin-left: 10px;">

</div>

</div>

<!-- Address -->

<div class="form-group">

<label for="address">Address:</label>

<input type="text" id="address" name="address" required>

</div>

<!-- Email -->

<div class="form-group">

<label for="email">Email:</label>

<input type="email" id="email" name="email" required>

</div>

<!-- Password -->

<div class="form-group">

<label for="password">Password:</label>

<input type="password" id="password" name="password" required>

</div>

<div class="form-group">
23 | P a g e
 <label for="confirmPassword">Re-type Password:</label>

<input type="password" id="confirmPassword" name="confirmPassword" required>

</div>

<!-- Category -->

<div class="form-group">

<label for="category">Category:</label>

<select id="category" name="category" required>

<option value="general">General</option>

<option value="sc">SC</option>

<option value="st">ST</option>

<option value="obc">OBC</option>

<option value="other">Other</option>

</select>

</div>

<!-- Courses -->

<div class="form-group">

<label for="course">Course:</label>

<select id="course" name="course" required>

<option value="bsc">B.Sc.</option>

<option value="ba">B.A.</option>

<option value="bcom">B.Com</option>

<option value="btech">B.Tech</option>

<option value="mba">MBA</option>

<option value="msc">M.Sc.</option>

<!-- Add more courses as needed -->

</select>

</div>

<!-- Submit Button -->

<div class="form-group">

24 | P a g e
 <button type="submit">Submit</button>

</div>

</form>

</div>

</body>

</html>

25 | P a g e
 15. Create a link between frames
Step 1: Crate a file ”NF1.html”with tis following code :

Step 2: Crate a file “Lf.html”with tis following code :

26 | P a g e