Introduction to HTML & Website Development
Module 5 – Chapter 1
Introduction to HTML & Website Development
What is HTML?
• HTML (Hypertext Markup Language) is the standard language used to create
webpages and web applications.
• A markup language is used to structure and format text documents using tags.
• HTML defines the structure and content of a webpage, such as text, images, links,
tables, and media.
• HTML makes webpages interactive by allowing links (hypertext) that connect one
page to another.
• Hypertext means “text within text” and refers to clickable text that links to another
webpage.
• When you visit a website (e.g., Google), the browser receives an HTML file and
displays it as a webpage.
• Web browsers (Chrome, Firefox, Safari, etc.) understand HTML and render it visually
for users.
Viewing HTML Code
The HTML code of any webpage can be viewed by right-clicking and selecting “View
Page Source.”
Prepared by Anusha A N., AIML., GMIT., Davangere 1
Introduction to HTML & Website Development
• HTML has been an Internet standard since 1993 and is supported by all major
browsers.
• The same HTML page looks almost the same across different browsers, with only
minor differences.
• HTML uses tags to define elements, and attributes to provide additional details
about those elements.
• HTML is designed for machines but is simple and readable for humans as well.
• HTML is the foundation of all webpages and is essential for accessing online
services like email, banking, and education.
• Since almost all information is presented through webpages, HTML is useful for
all modern professionals.
STRUCTURE OF AN HTML PAGE
• HTML works by enclosing text inside tags that tell the browser how to display the
content.
• HTML Tags Example
➢ <b> makes text bold
The browser will render<b> this is bold text</b> as this is bold text.
➢ <i> makes text italic
<i>this is italicized text</i> will be rendered as this is italicized text.
• An HTML page can be created using a simple text editor like Notepad and saved
with a .html extension.
• Common Structure of All HTML Pages
Every HTML page follows the same basic structure:
➢ DOCTYPE declaration
➢ HTML tag
➢ HEAD section
➢ BODY section
The basic structure of an HTML page:
<! DOCTYPE html>
<html>
<head>
<title> Page Title </title>
</head>
<body>
<h1> This is heading. </h1>
<p> This is paragraph. </p>
</body>
</html>
Prepared by Anusha A N., AIML., GMIT., Davangere 2
Introduction to HTML & Website Development
Main Parts of an HTML Page
1. DOCTYPE Declaration
• It is the first line of an HTML file.
• It tells the browser which version of HTML is being used.
2. HTML Tag (<html>)
• All code in HTML is declared using tags.
• A tag is a special keyword that is enclosed by < >.
• The HTML tag defines the start and end of an HTML document.
• Everything in the HTML document is nested within the opening and closing
HTML tags, i.e., between <html> & </html>.
• Tags are closed with the “/” symbol in the tag.
• Thus, </html> indicates the end of the section that began with the <html>
tag.
3. Head tag
• The head tag contains information about the HTML document that is mostly
not displayed to the user.
• This section includes the title of the page.
• Information about the page such as author information and version history
(this is often called meta information).
• The only content within the head that is displayed to the user is information
within the title tag, which is displayed as the title of your browser tab.
4. Body tag
• The body tag contains all the content that is displayed to the user.
• This includes text, images, links, and other HTML elements.
Elements in HTML
1. Paragraph tag:
• It is used to define a block of text as a paragraph.
• The text within the tag is displayed as a separate paragraph, with a line break
before and after it.
• The text within the paragraph tag can include any type of content, such as text,
images, links, or other HTML elements.
• When creating a paragraph, you could use attributes to further specify the kind
of paragraph you want.
• To create a paragraph with text in red color.
<p style=“color: red;”>This is a red paragraph</p>
Prepared by Anusha A N., AIML., GMIT., Davangere 3
Introduction to HTML & Website Development
2. Heading tags
• Headings are the essential mechanism to create structure within pages. HTML
supports headings with six levels of headings, ranging from <h1> to <h6>.
• The <h1> tag represents the main heading on a page and is typically used for
the page title, while the other headings <h2> to <h6> are used for
subheadings.
Prepared by Anusha A N., AIML., GMIT., Davangere 4
Introduction to HTML & Website Development
• Bold <b> tag is used to bold text.
• The underline <u> tag is used to underline text.
• The delete <del> or <strike> tag is used to visually strikethrough text.
• The subscript <sub> and superscript <sup> tags are used to display text as subscript
or superscript.
Adding Links
• Hyperlinks are the unique distinguishing feature of HTML.
• Hyperlinks allow you to click on a link on a page and immediately navigate to
another page that could be hosted anywhere in the world.
Prepared by Anusha A N., AIML., GMIT., Davangere 5
Introduction to HTML & Website Development
• The <a> tag stands for “anchor” and allows you to add hyperlinks to an HTML page.
• The <a> tag has a required attribute to specify the target page.
• The target page is specified using the href attribute, giving the URL of the page or
the resource you want to link.
Adding Images
• You can add images to your HTML page with an <img> tag.
• Like the <a> tag, the <img> tag also has a required attribute, that specified the image
file to be displayed.
• You need to have the source (src) attribute to give the location of the image, so the
browser can get the image and display it on the webpage.
• Optionally, you can also have other attributes like width and height parameters to tell the
browser how large the image should be on the page.
• Images draw the attention of visitors. So, not surprisingly, company logos, background
images, and advertisements are carefully and tastefully designed to draw the attention of
visitors and convey the right message about the site to them.
Prepared by Anusha A N., AIML., GMIT., Davangere 6
Introduction to HTML & Website Development
Creating Lists
• To create lists in HTML, such as a list of things to buy, places to visit, or people to
invite, HTML offers two options—bulleted lists and numbered lists.
• You have the <ul> tag for unordered (bulleted) lists
• the <ol> tag for ordered (numbered) lists.
• You can indicate the list items with the <li> tag and nest lists within lists.
Prepared by Anusha A N., AIML., GMIT., Davangere 7
Introduction to HTML & Website Development
Creating Tables
• To display structured data, such as price lists, club memberships, class enrollments
etc., HTML supports tables.
• Tables are created using the <table>.
• Tables have some additional necessary elements to specify rows and cells.
• The <tr> and <td> tags define the rows and cells of the table, respectively.
• The <th> tag is used to define table headers, which are typically bolded and centered.
• Each <tr> tag in turn encloses many <td> tags, indicating the cells within the row.
• The <td> tag represents a cell and encloses the contents of the cell.
Ex:
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Example</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 8px;
text-align: left;
table {
width: 100%;
}
</style>
</head>
<body>
<h2>People Data</h2>
<table>
<thead>
Prepared by Anusha A N., AIML., GMIT., Davangere 8
Introduction to HTML & Website Development
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr> </thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</tbody>
</table>
</body>
</html>
Prepared by Anusha A N., AIML., GMIT., Davangere 9
Introduction to HTML & Website Development
Creating Forms
• Forms are the principal mechanism to get user inputs on webpages.
• Creating forms on webpages is exciting because it allows your users to interact with
the webpage and submit information for processing.
• Almost all your favourite webpages have forms where data can be entered.
• Through forms, users can enter text, numbers, dates, and upload files.
• Users can also press buttons, tick checkboxes, and choose radio buttons.
• The [Link] homepage, probably the most famous webpage in the world, is just a
simple form with an input field where you can enter your search query.
• The page is essentially a form with a text input element and two buttons.
• When a user submits a form on an HTML page, the data is sent to a server for
processing or storage in a database.
• Every form also has multiple tags to specify the kind of input you want from the user.
These elements can be text, number, file, or image.
• Each of these can be specified by choosing the right value for the “type” attribute of
the tag.
• The data collected in a form is sent to the server for processing using the action
attribute of the form tag.
Prepared by Anusha A N., AIML., GMIT., Davangere 10
Introduction to HTML & Website Development
• To create a multi-line input element, use the tag “textarea.”
• You can also specify how wide and tall this text box should be using “rows” and
“cols” attributes.
Dropdown Element
To create a dropdown that allows users to select from a list of things, you can use the select
tag.
Prepared by Anusha A N., AIML., GMIT., Davangere 11
Introduction to HTML & Website Development
Radio Button
• A radio button is a great choice if you want to give users multiple choices, but you want
them to pick only one option.
• You could only select one button at a time.
• If you pressed another button, then the previously pressed button would pop out
automatically, such selectors are called radio buttons.
• So, even though you may see many options, selecting a new option will deselect your
previous choice.
Prepared by Anusha A N., AIML., GMIT., Davangere 12
Introduction to HTML & Website Development
Checkbox
• The “Checkbox” element in HTML derives its name from paper forms with checkboxes.
• You can select one or many checkboxes.
• Similarly, creating a “Checkbox” element in HTML will allow your users to select one
or more choices.
Date
• If you want users to enter a date, you may want to use the “Date” element.
• Your browser will recognize this element and display a calendar.
• Once a date is selected, the browser updates the field with the selected date.
Prepared by Anusha A N., AIML., GMIT., Davangere 13
Introduction to HTML & Website Development
CASCADING STYLE SHEETS (CSS)
• CSS is the standard language used to add color, layout, and design to webpages.
• CSS defines how HTML elements are displayed on different media such as screens,
paper, mobiles, tablets, etc.
• It helps webpages look attractive, consistent, and professional.
• CSS saves developer time by allowing the styling of multiple webpages from a single
place.
• Without CSS, developers would need to use HTML tags like <font> and color attributes
repeatedly.
• Using styling inside HTML makes pages:
➢ Hard to maintain
➢ Inconsistent in appearance
➢ Large and messy
Prepared by Anusha A N., AIML., GMIT., Davangere 14
Introduction to HTML & Website Development
• Changing design (colors, fonts, sizes) directly in HTML would require editing every
element manually.
• Best practice is to define all styles in a CSS file and link it to HTML.
• A single CSS file ensures:
➢ All buttons have the same size and color.
➢ All headings use the same font and style.
• CSS can be written:
➢ Inside a <style> tag in HTML (for small examples)
➢ In a separate .css file (recommended for real websites)
• Linking an external CSS file improves:
➢ Reusability
➢ Maintainability
➢ Productivity
• Resources like W3Schools help in learning and experimenting with CSS features.
• Using external CSS is the next step toward professional web development.
Fig: CSS written inside a <style> tag
Prepared by Anusha A N., AIML., GMIT., Davangere 15
Introduction to HTML & Website Development
WEBSITE DESIGN AND STORYBOARDING
• A website is a collection of related webpages designed to achieve a specific purpose.
• Examples include school or district websites that provide information and services for
students and parents.
• Websites are hosted on servers managed by service providers.
• When a user visits a website, the server responds by delivering the required webpages.
• Websites contain multiple interconnected webpages linked using hyperlinks.
• Weblinks allow users to navigate seamlessly from one page to another.
• For example, Google uses many webpages and applications to manage searches, ads,
and results.
• A good website should be:
➢ Coherent
➢ Easy to navigate
➢ Purpose-driven
• Website development is resource-intensive and requires proper planning.
• Just like building a house, a website should not be built without a plan.
• Before building a website, developers should understand HTML and CSS basics.
Prepared by Anusha A N., AIML., GMIT., Davangere 16
Introduction to HTML & Website Development
• The first planning step is creating storyboards.
• Storyboards are visual representations showing:
➢ Users of the website
➢ Expected user interactions
➢ Overall flow of webpages
• Storyboards help teams agree on the user experience and navigation flow.
• After storyboarding, developers create wireframes.
• Wireframes are simple illustrations of webpages focusing on:
➢ Layout
➢ Space allocation
➢ Element behavior
• Wireframes do not include colors, images, or styling.
• Storyboards focus on visual storytelling, while wireframes focus on user interface
structure.
• For large projects, storyboarding should be done before wireframing.
• Wireframes help identify design and usability issues early.
• Wireframes use boxes and lines to represent:
➢ Headers
➢ Navigation menus
➢ Content areas
➢ Call-to-action elements
• Balsamiq is a popular wireframing tool with drag-and-drop templates.
• Wireframes can be shared with teams and users for feedback before development.
• Wireframes can be created for:
➢ Websites
➢ Mobile apps (iOS and Android)
• Wireframing is a low-cost, low-effort way to test application ideas.
• Figma is another popular tool that supports:
Prepared by Anusha A N., AIML., GMIT., Davangere 17
Introduction to HTML & Website Development
➢ Wireframing
➢ Collaboration
➢ Automatic conversion of designs into HTML
• Figma enables faster transition from design to deployment.
STRUCTURE OF A WEBSITE
Elements of a Working Website
• After learning HTML, storyboarding, and wireframing, you can publish your website
for global access.
• A working website requires a web server (e.g., Apache) to host the site.
• The web server stores and delivers your website files to users.
• Website files must be saved in a well-organized folder structure on the server.
• Understanding the basic structure of a website helps integrate all components
correctly.
• Including the folder structure in wireframes helps visualize site organization early.
Prepared by Anusha A N., AIML., GMIT., Davangere 18
Introduction to HTML & Website Development
• A website consists of folders that correspond to different sections of the site.
• Maintaining a consistent file organization within folders improves maintainability.
• The main starting directory of a website is called the Root folder.
• The file [Link] is the default page loaded when no filename is specified.
• Common folders in a website include:
➢ Images
➢ Fonts
➢ JavaScript files
➢ Stylesheets (CSS)
➢ Common libraries
• Proper folder organization makes the site:
➢ Easier to manage
➢ Easier to update
➢ Easier to navigate for users and search engines
Prepared by Anusha A N., AIML., GMIT., Davangere 19
Introduction to HTML & Website Development
• Many websites use a Content Management System (CMS) to manage files and
content visually.
• HTML pages can be stored:
➢ In a single folder
➢ Or separated into folders based on functionality or topics
• Website menus and submenus usually map to corresponding folders on the server.
• When a user visits the home page:
➢ The root-level [Link] is displayed.
• When a user clicks a submenu:
➢ The [Link] inside that submenu’s folder is displayed.
• This structure ensures logical navigation and efficient content delivery across the
website.
Prepared by Anusha A N., AIML., GMIT., Davangere 20