Module 5 – Introduction to HTML and Website
Development
1. Overview of the Internet and HTML
The Internet originated in the early 1970s and initially supported only plain text.
Early Internet usage required users to memorize complex commands, limiting usage
mainly to computer science researchers.
In 1989, Sir Tim Berners-Lee proposed a hyperlink-based information system,
enabling users to navigate by clicking links.
By 1993, the first version of HTML was specified, making information sharing
simple and intuitive.
Marc Andreessen and Eric Bina developed the Mosaic browser at NCSA,
introducing the <img> tag for images.
Mosaic became the first widely popular web browser and played a major role in
popularizing the World Wide Web.
Today, over 5 billion people use the Internet, largely due to the simplicity and power
of HTML and related technologies.
2. What is HTML?
HTML (HyperText Markup Language) is the standard markup language used to
create webpages and web applications.
A markup language applies layout and formatting rules to a text document.
HTML defines the structure and content of a webpage, including:
o Text
o Images
o Hyperlinks
HARSHITHA K U, DEPT OF ECE, KIT, TIPTUR 1
oTables
oForms
Browsers interpret HTML and render it visually for users.
HTML is an Internet standard since 1993 and is supported by all major browsers.
3. Hypertext
Hypertext means “text within text.”
In HTML, hypertext enables linking one webpage to another using hyperlinks.
This linking capability is the foundation of the World Wide Web.
HARSHITHA K U, DEPT OF ECE, KIT, TIPTUR 2
4. Structure of an HTML Page
All HTML documents follow a common structure:
1. DOCTYPE Declaration – Specifies the HTML version used.
2. <html> tag – Encloses the entire HTML document.
3. <head> section – Contains metadata, title, styles, and scripts.
4. <body> section – Contains all visible content of the webpage.
Description of Key Tags
DOCTYPE: Tells the browser what type of document to expect.
HTML tag: Marks the beginning and end of the document.
Head tag:
o Metadata (author, keywords)
o Page title (shown on browser tab)
o Stylesheets and scripts
Body tag:
o Visible content such as text, images, links, tables, and forms
5. Elements in HTML
HTML elements are defined using tags. Common elements include text, images, tables, lists,
and forms.
5.1 Paragraph Tag <p>
Used to define a paragraph of text.
Automatically adds spacing before and after the text.
HARSHITHA K U, DEPT OF ECE, KIT, TIPTUR 3
Example:
<p style="color:red;">This is a red paragraph.</p>
5.2 Heading Tags <h1> to <h6>
Used to define headings and subheadings.
<h1> is the main heading; <h6> is the smallest.
Best practice: do not skip heading levels.
5.3 Text Formatting Tags
<b> – Bold text
<u> – Underlined text
<del> / <strike> – Strikethrough text
<sub> – Subscript text
<sup> – Superscript text
HARSHITHA K U, DEPT OF ECE, KIT, TIPTUR 4
6. Adding Links
Hyperlinks are created using the <a> (anchor) tag.
The href attribute specifies the target URL.
Example:
<a href="[Link] New York Times</a>
7. Adding Images
Images are added using the <img> tag.
Required attribute: src (image source).
Optional attributes: width, height.
HARSHITHA K U, DEPT OF ECE, KIT, TIPTUR 5
8. Creating Lists
HTML supports two types of lists:
Unordered list – <ul> (bulleted)
Ordered list – <ol> (numbered)
List items are defined using <li>.
HARSHITHA K U, DEPT OF ECE, KIT, TIPTUR 6
9. Creating Tables
Tables are created using the <table> tag.
Rows are defined using <tr>.
Cells are defined using <td>.
Header cells use <th>.
10. Creating Forms
Forms allow users to input and submit data.
Forms are created using the <form> tag.
User inputs are collected using <input>, <textarea>, and <select> elements.
Form data is sent to a server using the action attribute.
HARSHITHA K U, DEPT OF ECE, KIT, TIPTUR 7
10.1 Input Types
Text input
Number input
File upload
Buttons
Date picker
10.2 Textarea
Used for multi-line text input.
Controlled using rows and cols attributes.
10.3 Dropdown Lists
Created using <select> and <option> tags.
HARSHITHA K U, DEPT OF ECE, KIT, TIPTUR 8
10.4 Radio Buttons
Allow selection of only one option from multiple choices.
Created using <input type="radio">.
10.5 Checkboxes
Allow selection of one or more options.
Created using <input type="checkbox">.
10.6 Date Input
HARSHITHA K U, DEPT OF ECE, KIT, TIPTUR 9
Allows users to select a date using a calendar.
Created using <input type="date">.
11. Summary
HTML is the foundational technology of the web.
It defines the structure, content, and interaction of webpages.
Using HTML tags, we can create rich webpages with text, images, links, tables, and
forms.
HTML is simple, powerful, and essential for all modern professionals.
Cascading Style Sheets (CSS)
HTML allows us to create functional webpages, but without styling they often look plain and
unattractive. Cascading Style Sheets (CSS) are used to enhance the visual appearance of
webpages by adding colors, layouts, fonts, and spacing. CSS defines how HTML elements
are displayed on screens, paper, mobile devices, tablets, and other media.
One of the key advantages of CSS is that it saves development time by allowing the styling of
multiple webpages to be controlled from a single place. Instead of defining styles repeatedly
inside each HTML file, developers can define them once and reuse them across the website.
Earlier, we specified properties such as height and width directly within HTML elements.
While this works for small examples, managing the appearance of every element across
multiple webpages becomes difficult and error-prone. Using presentation-related HTML tags
and attributes (such as font or color) makes the HTML code lengthy, messy, and inconsistent.
Additionally, if the design needs to be changed later, each individual element would have to
be updated manually.
To avoid these problems, best practice is to define all styling rules in CSS. This ensures
consistency across the website—for example, all buttons, headings, and text styles appear
uniform. If a design change is required, it can be done by updating a single CSS file.
HARSHITHA K U, DEPT OF ECE, KIT, TIPTUR 10
Internal CSS
CSS rules can be added directly within an HTML document using the <style> tag inside the
<head> section. This approach is useful for small examples and for learning how CSS works.
External CSS
HARSHITHA K U, DEPT OF ECE, KIT, TIPTUR 11
As webpages grow in complexity, it is more efficient to place CSS rules in a separate file and
link it to the HTML document. This improves maintainability and ensures consistency across
multiple webpages.
Website Design and Storyboarding
A website is a collection of interconnected webpages designed to serve a specific purpose,
such as providing information, enabling interaction, or offering services. Large websites rely
on multiple webpages working together to create a seamless user experience.
To ensure a website is coherent, easy to navigate, and effective, careful planning is required
before development begins. Just as buildings require blueprints, websites require design
planning.
Storyboards
Storyboards are visual representations that show how users interact with a website and how
pages flow from one to another. They help development teams understand user expectations
and overall site structure before implementation.
Wireframes
Wireframes are simplified visual layouts of webpages that focus on structure, content
placement, and functionality rather than design. They use basic shapes and placeholders
instead of colors or images.
Storyboards focus on the overall narrative and user journey, while wireframes concentrate on
user interface layout and interactions. For large projects, storyboarding is typically done first,
followed by wireframing.
HARSHITHA K U, DEPT OF ECE, KIT, TIPTUR 12
Structure of a Website
Once HTML, CSS, and design planning techniques are understood, a website can be
deployed so it is accessible on the internet. Websites are hosted on web servers and require an
organized file and folder structure.
The root folder is the starting point of a website. When a user visits a website without
specifying a page name, the server automatically loads a file called [Link] from the root
folder.
Organizing files into separate folders—for images, fonts, stylesheets, JavaScript files, and
libraries—makes the website easier to maintain and navigate.
HARSHITHA K U, DEPT OF ECE, KIT, TIPTUR 13
Websites can also be divided into functional sections, each with its own folder and
[Link] file. This structure allows menus and submenus on the website to map
directly to folders on the server.
HARSHITHA K U, DEPT OF ECE, KIT, TIPTUR 14