Foundations of HTML & Web Development
Build web pages using HTML5 with proper structure, formatting, and semantic elements.

Track
Software Development
Level
Foundation
Language
English
Duration
30 hours
Learning Mode
Learn at ALC or at Home
Introduction
- Define key internet terminologies and explain browser-server communication.
- Write HTML code incorporating basic page structure, comments, and standard tags like
,
.
- Apply HTML tags for bold, italic, underline, subscript, superscript, and semantic phrases like and
.
- Insert images with specified dimensions and alignments, and create clickable image links.
- Build ordered, unordered, definition, and nested lists, and design tables with captions, headers, and cell properties.
- Add meta tags for page description, keywords, author, and viewport configuration.
- Identify the difference between HTML tags and elements, and explain the purpose of common HTML attributes.
- Construct internal, external, image, and email links, and configure target attributes.
- Describe the steps for creating website structure and publishing web pages using HTML editors.
- Preview HTML documents and identify errors in basic HTML page rendering.
What you'll learn ?
- Comprehend the fundamental concepts of internet, networking, and website communication.
- Construct well-structured HTML documents using proper syntax and essential tags.
- Implement various text formatting and semantic phrase tags to enhance content presentation.
- Integrate images, links, and multimedia elements effectively into web pages.
- Organize data efficiently using HTML lists and tables.
- Utilize HTML attributes and meta tags for page configuration and search engine optimization.
- Differentiate between various HTML elements, tags, and their appropriate usage.
- Create interactive web pages by linking different content types.
- Employ basic web hosting concepts to publish simple websites.
- Debug fundamental HTML structuring and content display issues.
Syllabus
Introduction to Internet
- Networking
Communication over Internet
- Application of internet
- Internet domains and information files creation
- Terminology used in internet
- Communication of browser with server
Introduction to Website
- Connection establishment
- Connection termination and IP addresses
- World Wide Web
- what is a website
Web Hosting Process
- purpose of website
- what are the categories of websites according to the information it contains
- Creating the Web Site
Markup Language
- Working on the web site
- Creating web site structure
- Creating Titles for web pages
- Themes-Publishing websites.
- Markup language
Fundamentals of HTML
- Types of markup languages
- Facts related to markup languages
- HTML its versions and use of HTML
Basic HTML Page Structure
- 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
HTML Tags Basics
- Basic HTML program structure
- Case sensitivity in HTML
- Preview of basic HTML document
- HTML tags and their categories
Basic HTML Tags
- Paired and singular tags
- Assisted demo on paired and singular tags
- Text formatting in HTML
Types of HTML Tags
- Types of HTML basic tags: bold, italic, underline
HTML Phrases
- 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
Types of Phrase Tags
- How phrases are written in HTML
- Line, paragraph and phrases
- Supported browsers for phrases
- Phrase tags in HTML: definition, code, keyboard
HTML Elements
- 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
HTML Attributes
- Example of HTML elements
- HTML tag Vs HTML element
- Use of HTML elements, nested HTML elements
- HTML attributes
Introduction to Formating
- HTML tag Vs HTML attribute
- Example of HTML attributes
- Assisted demo on HTML elements and attributes
- Understanding formating
HTML Formatting
- Why to do formatting
- Formated vs non-formated HTML page
- HTML page formatting
Fundamental of Meta Tag
- 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
Working with Meta Tag
- 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
Image Tag
- How to define author and making a 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
Clickable Images
- figure tag-definition, usage its attributes
- How to set image alignment
- Using animated image in HTML
Images 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
Introduction to Links
- Properties of image tag, image map, background image and cover image
- What are links in HTML, use of HTML links
Working with HTML Links
- What is absolute and relative link
- Working of text link, tel- definition, usage syntax
Multimedia
- 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
Audio and Video in HTML
- Multimedia and embedded multimedia in HTML
- video tag with attributes and their values
More about Multimedia
- audio tag with attributes and their values
- assisted demo on audio and video tag with their attributes
- Embedded multimedia with iframes
Introduction to List
- Plug-ins
- HTML multimedia format
- Assisted demo on: HTML embedded multimedia
- Lists in HTML, benefits of using list
Types of Lists
- How to make list in HTML, how to make bullet points
- Types of lists: ordered list, unordered list
Table Fundamentals
- 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
Properties and Attributes of Table
- Table structure: thead, tbody, tfoot, th,tr,td
- Creating table and giving caption to a table
Work-Centric Approach
The academic approach of the course focuses on ‘work-centric’ education. With this hands-on approach, derive knowledge from and while working to make it more wholesome, delightful and useful. The ultimate objective is to empower learners to also engage in socially useful and productive work. It aims at bringing learners closer to their rewarding careers as well as to the development of the community.
- Step 1: Learners are given an overview of the course and its connection to life and work
- Step 2: Learners are exposed to the specific tool(s) used in the course through the various real-life applications of the tool(s).
- Step 3: Learners are acquainted with the careers and the hierarchy of roles they can perform at workplaces after attaining increasing levels of mastery over the tool(s).
- Step 4: Learners are acquainted with the architecture of the tool or tool map so as to appreciate various parts of the tool, their functions, utility and inter-relations.
- Step 5: Learners are exposed to simple application development methodology by using the tool at the beginner’s level.
- Step 6: Learners perform the differential skills related to the use of the tool to improve the given ready-made industry-standard outputs.
- Step 7: Learners are engaged in appreciation of real-life case studies developed by the experts.
- Step 8: Learners are encouraged to proceed from appreciation to imitation of the experts.
- Step 9: After the imitation experience, they are required to improve the expert’s outputs so that they proceed from mere imitation to emulation.
- Step 10: Emulation is taken a level further from working with differential skills towards the visualization and creation of a complete output according to the requirements provided. (Long Assignments)
- Step 11: Understanding the requirements, communicating one’s own thoughts and presenting are important skills required in facing an interview for securing a work order/job. For instilling these skills, learners are presented with various subject-specific technical as well as HR-oriented questions and encouraged to answer them.
- Step 12: 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, from self-expression to self-confidence and from self-confidence to self-reliance and self-esteem!