Fundamentals of HTML and Introduction to CSS

Build web pages and apply basic styles using HTML and introductory CSS.

Course Features:

Language: English
Track: Software Development
Duration: 60 hours
Level: Foundation
Learning Mode:
Jurisdiction: Maharashtra
Certificate of Completion

Eligibility

Learner should preferably a std. 10th Pass student (Not Compulsory)
It is desirable that Learner should have done MS-CIT Course (Not Compulsory)

List of ALCs

KLiC Certificate in Fundamentals of HTML and Introduction to CSS

Introduction

Internet and Networking: Understand internet basics, networking, and communication protocols.
Website Development: Learn website creation, hosting, and structuring techniques.
HTML Fundamentals: Master HTML structure, tags, attributes, and content formatting.
Multimedia and Images: Integrate multimedia and images effectively in web pages.
Links and Navigation: Create and manage links for navigation and file access.
Lists and Tables: Design lists and tables to organize and present data.
CSS Basics: Style HTML pages using CSS for formatting, positioning, and design.
Advanced HTML & CSS: Explore HTML5 features, forms, and advanced CSS properties.
Web Graphics: Utilize SVG and canvas for creating scalable web graphics.
Web Optimization: Optimize pages for search engines, responsiveness, and usability.

What you'll learn ?

Understanding Internet and Networking:
Gain a strong foundation in internet concepts, networking, and communication protocols.
Ability to explain and utilize internet domains, terminology, and applications.
Proficiency in Website Development:
Develop and publish structured and functional websites.
Demonstrate knowledge of web hosting processes and website categorization.
HTML Skills:
Create and structure HTML documents effectively.
Use various HTML tags, elements, and attributes to design web pages.
Multimedia Integration:
Incorporate multimedia elements like audio, video, and images into web pages.
Optimize and customize image properties, including clickable and lazy-loading images.
Link and Navigation Implementation:
Create functional links for navigation between and within web pages.
Differentiate and implement absolute and relative links for web design.
Data Organization Using Lists and Tables:
Utilize HTML lists and tables to present data in a structured and readable format.
Apply advanced table attributes like colspan, rowspan, and background properties.
Styling with CSS:
Apply CSS to enhance the visual appeal of HTML pages.
Utilize advanced CSS selectors, properties, and positioning techniques.
Advanced Web Design Techniques:
Use advanced HTML5 features for interactive and dynamic content.
Incorporate forms, block elements, and inline elements effectively.
Web Graphics Creation:
Design scalable graphics using SVG and canvas.
Apply effects like stroking, blurring, and layering to enhance visuals.
Optimized and Responsive Web Design:
Create search engine-friendly, responsive web pages that adapt to different devices.
Demonstrate the ability to use meta tags, viewports, and other optimization techniques.
Holistic Web Development:
Combine HTML, CSS, and JavaScript for interactive and user-friendly web solutions.
Deliver professional-quality web pages that meet modern web standards.

Syllabus

Networking
Application of internet
Internet domains and information files creation
Terminology used in internet

Communication of browser with server
Connection establishment
Connection termination and IP addresses
World Wide Web

what is a website
purpose of website
what are the categories of websites according to the information it contains

Creating the Web Site
Working on the web site
Creating web site structure
Creating Titles for web pages
Themes-Publishing websites.

Markup language
Types of Markup languages
Facts related to Markup languages

HTML its versions and use of HTML
Comments and commands in HTML
Static pages vs Dynamic pages
HTML editors- Atom, Sublime, Visual studio code
How to use VS code editor for creating HTML file
Assisted demo on creating and saving of HTML file using VS code

Sample HTML structure
Basic HTML program structure
Case sensitivity in HTML
Preview of basic HTML document

HTML tags and their categories
Paired and singular tags
Assisted demo on paired and singular tags

Text formatting in HTML

Types of HTML basic tags: bold, italic, underline
Types of HTML tags: superscript, subscript
Types of HTML tags: insert, delete, big, small
Assisted demo for Superscript, subscript, insert, delete, big, small
Assisted demo: bold, italic, underline, superscript, subscript
Types of HTML tags: abbreviation, pre, code tag
Assisted Demo for tags: abbreviation, Cite, pre-code tag, code, and blockquote tag
Assisted demo: delete, small, comment, center

Defining phrases in HTML
How phrases are written in HTML
Line, paragraph and phrases
Supported browsers for phrases

Phrase tags in HTML: definition, code, keyboard
Phrase tags in HTML: Acronym, Quoting, Abbreviation
text direction, short quotation, marked text, address tag
Assisted demo on: definition, code, keyboard

HTML elements, Valid and Invalid HTML
Example of HTML elements
HTML tag Vs HTML element
Use of HTML elements, nested HTML elements

HTML attributes
HTML tag Vs HTML attribute
Example of HTML attributes
Assisted demo on HTML elements and attributes

Understanding formatting
Why to do formatting
Formatted vs non-formatted HTML page

HTML page formatting
HTML formatting elements
HTML formatting using marked tag
HTML formatting using inserted tag
Assisted demo on: marked tag
Assisted demo on: inserted tag

HTML meta tag and its use
Attributes of meta tag
Values and description of meta tag attribute, favicon-definition, creation and insertion of favicon
Search engine, defining keyword for search engine

How to add description of web page
How to define author and making an auto refresh document
View port and its need in web page
How to set viewport- displaying images according to viewport size
Assisted demo of meta tag

How to put image in web page, how to set: border, height and width
figure tag-definition, usage its attributes
How to set image alignment

Using animated image in HTML
lazy loading- definition, usage, syntax and attribute value
Using of image as a link
Understanding image map, Image map vs image

Background image and cover image in HTML page
Properties of image tag, image map, background image and cover image

What are links in HTML, use of HTML links
What is absolute and relative link

Working of text link, tel- definition, usage syntax
Working of image link
Working of email link
Adding link for another web page, target attribute- definition, usages and attributes value
Adding link in same web page
Adding links for downloading a file
Assisted demo on adding links in HTML file

Understanding multimedia
Multimedia and embedded multimedia in HTML

video tag with attributes and their values
audio tag with attributes and their values
assisted demo on audio and video tag with their attributes

Embedded multimedia with iframes
Plug-ins
HTML multimedia format
Assisted demo on: HTML embedded multimedia

Lists in HTML, benefits of using list
How to make list in HTML, how to make bullet points

Types of lists: ordered list, unordered list
Types of lists: definition list, nested lists
How to make ordered and unordered list in HTML
Types of ordered list in HTML
Types of unordered list in HTML
Attributes of ordered and unordered list
Assisted demo on: ordered, unordered, definition and nested lists

Tables and its benefits in web page
Table structure: thead, tbody, tfoot, th, tr, td

Creating table and giving caption to a table
Attributes of table: width and border attribute
Cell spacing and cell padding attribute
background color property, colspan, colgroups and rowspan attribute
Cell with two row or two columns
Making data easier to read
Assisted demo on table and its attributes

Defining block element, inline element
Block level elements- Part 1
Block level elements- Part 2
Inline elements- Part 1
Inline elements- Part 2
Assisted demo on: block element
Assisted demo on: inline element

DIV and span tag in HTML, Use and attributes of div tag and span tag
Working with span tag, working with div tag

What are forms, when forms are used
Defining form syntax

Form controls on HTML5: input type=number, range, date/time controls
Assisted demo of basic form structure
Input elements of form, Attributes of form
Form controls on HTML5: input type=color, search, datelist
Assisted demo on: form controls in HTML5
new attributes in HTML5: required, disable, autofocus, max-min and steps
Assisted demo to show new attribute use

Frame, use of frames in web page
Disadvantages of frames

Understanding svg and its advantages
HTML canvas
Difference between svg and canvas
Comparison between SVG and canvas, why svg preferred over other formats

How to embed svg in HTML page
svg: rectangle, circle, ellipse, polygon, polyline, path
svg: stroking, blur effect, shadow effect
svg: text, linear, radial
Assisted demo SVG

Why linking of web pages is required?
What are benefits of linking web pages/websites

What are hyperlinks
How to link website to other websites
How to link different pages of same website within a website

Use of anchor and href
How to open a link in a new browser window/tab
What is absolute and relative link
Assisted demo in absolute and relative URL

Understanding HTML style sheet
Types of HTML style sheet

Limitations of HTML
Why to use CSS, HTML webpage with CSS in it demo
How to use HTML with CSS
HTML vs CSS

HTML vs JavaScript

CSS and JavaScript

Comparison between HTML and HTML with CSS

Introduction to HTML5, tags of HTML5
Advantages of HTML5
HTML vs HTML5
Defining attributes and data types
Attributes of HTML5
Data Types of HTML5
Placeholder and attributes of placeholder

Text: time, mark and presentational
conditional comments

what is CSS, why to learn CSS
history of CSS, need and use of CSS3
How to use CSS with your HTML document

Key modules of CSS3 - I
Key modules of CSS3 - II
Features of CSS3 - I
Features of CSS3 - II
CSS cheat sheet command and their description
CSS cheat sheet command and their description-II
CSS cheat sheet measurement scale with description
CSS color code with description
CSS3 cheat sheet user interface properties with description

how to load CSS in HTML document
internal CSS
external CSS
inline CSS
syntax of inline, internal and external CSS

understanding multiple style sheet
understanding cascading order
assisted demo on inline, internal and external CSS part 1
assisted demo on inline, internal and external CSS part 1

defining CSS selector
types of selectors: element, class and ID selector
element selector with syntax and its explanation
class selector with syntax and its explanation

CSS background color
CSS text color
assisted demo on background color, text color and background

footer in CSS: movable footer, fixed footer, fixed footer with button
hover in CSS: use and syntax
quotes in CSS, how do quotes work in CSS
CSS display property, parameters of CSS display property
how display property work in CSS
assisted demo on: footer, hover and quote

how to change background color, background size
how to change background image
Repeating background, fixing and scrolling of background (Part-1)
Repeating background, fixing and scrolling of background (Part-2)
Repeating background, fixing and scrolling of background (Part-3)
background position |
background position ||
CSS cursor
assisted demo on changing background color, background image,
assisted demo on: Repeating background, fixing and scrolling of background

CSS box Model
border Style Property
border Width
border Color
assisted demo for border
understanding margin

margin of individual slide or two/more slides
values in margin property of CSS
assisted demo for margin property

CSS Visibility
CSS Display
CSS Scrollbars, use of overflow
CSS Positioning
Static Positioning
Fixed Positioning, sticky position element
Relative Positioning
Absolute Positioning
CSS Layers with Z-Index

Certificate

MKCL provides certificate (for 30/60/90 hours courses) to the KLiC learner after his/her successful course completion.

Academic Approach

The Academic Approach of the course focuses on the “work centric” education i.e. begin with work (and not from a book !), derive knowledge from work and apply that knowledge to make the work more wholesome, useful and delightful. The ultimate objective is to empower the Learner to engage in socially useful and productive work. It aims at leading the learner to his/her rewarding career as well as development of the society.

Learning methodology

Learners are given an overview of the course and its connection to life and work.
Learners are then exposed to the specific tool(s) used in the course through the various real-life applications of the tool(s).
Learners are then acquainted with the careers and the hierarchy of roles they can perform at workplaces after attaining increasing levels of mastery over the tool(s).
Learners are then acquainted with the architecture of the tool or Tool Map so as to appreciate various parts of the tool, their functions and their inter-relations.
Learners are then exposed to simple application development methodology by using the tool at the beginner’s level
Learners then perform the differential skills related to the use of the tool to improve the given ready-made outputs.
Learners are then engaged in appreciation of real-life case studies developed by the experts.
Learners are then encouraged to proceed from appreciation to imitation of the experts.
After imitation experience, they are required to improve the expert’s outputs so that they proceed from mere imitation to emulation.
Finally, they develop the integral skills involving optimal methods and best practices to produce useful outputs right from scratch, publish them in their ePortfolio and thereby proceed from emulation to self-expression.

Evaluation Pattern

Evaluation Pattern of KLiC Courses consists of 4 Sections as per below table:

Section No.	Section Name	Total Marks	Minimum Passing Marks
1	Learning Progression	25	10
2	Internal Assessment	25	10
3	Final Online Examination	50	20
	Total	100	40
4	SUPWs (Socially Useful and Productive Work in form of Assignments)	5 Assignments	2 Assignments to be Completed & Uploaded

MKCL’s KLiC Certificate will be provided to the learner who will satisfy the below criteria:

Learners who have successfully completed above mentioned 3 Sections i.e. Section 1, Section 2 and Section 3
Additionally, learner should have completed Section 4 (i.e. Section 4 will comprise of SUPWs i.e. Socially Useful and Productive Work in form of Assignments)
- Learner has to complete and upload minimum 2 out of 5 Assignments

Courses Fee Structure from 01 July, 2025 Onwards

KLiC 60 hour course fee applicable from 01 July, 2025 all over Maharashtra

KLiC Course Duration	MFO: MKCL Share (Including 18% GST)	ALC Share (Service Charges to be collected by ALC)
60 hours	Rs. 500/-	Rs. 2,500/-

Important Points:
* Above mentioned fee is applicable for all Modes of KLiC Courses offered at Authorised Learning Center (ALC) and at Satellite Center
* Total fee is including of Course fees, Examination fees and Certification fees
* MKCL reserves the right to modify the Fee anytime without any prior notice

KLiC Courses Fee Structure upto 30 June, 2025

Region	Total Fee (Rupees)
MMRDA, PMRDA and Rest of Maharashtra	3000/-