<html>
Introduction to HTML
HyperText Markup Language
First Year Polytechnic | Web Technology
HTML5 Web Basics Tags & Elements Structure
</html>
What We Will Learn Today
Course Roadmap
What is HTML? Attributes
01 04
Origin, history and purpose of HTML How to add properties to HTML elements
HTML Structure Tables & Forms
02 05
DOCTYPE, html, head, body tags Organizing data and collecting input
Common Tags Hands-on Practice
03 06
Headings, paragraphs, links, images, lists Write your first HTML web page
Introduction to HTML | First Year Polytechnic
What is HTML?
The Building Block of Every Website
Structure
HTML
Defines the skeleton of a webpage with tags
HyperText Markup Language
Content
▸ Created by Tim Berners-Lee in 1991
Tells browser what each element means
▸ Current version: HTML5 (2014)
▸ Not a programming language
▸ Uses tags to structure content Links
▸ Interpreted by web browsers Connects pages together to form websites
Introduction to HTML | First Year Polytechnic
HTML Document Structure
Anatomy of an HTML Page
[Link]
DOCTYPE Tells browser this is HTML5 document
<!DOCTYPE html>
<html> Root element — wraps entire page
<html>
<head> Contains meta info, title, styles (not visible)
<head>
<title> Title shown in browser tab
<title>My First Page</title>
</head>
<body> All visible page content goes here
<body>
<h1> Main heading of the page
<h1>Hello World!</h1>
<p> Paragraph of text
<p>My first webpage.</p>
</body>
</html>
Introduction to HTML | First Year Polytechnic
Common HTML Tags
The Most Frequently Used Elements
H Headings P Paragraph Hyperlink
<h1>–<h6> <p> <a>
<h1>Main Heading</h1> <p>Some text here.</p> <a href="url">Click</a>
Image ≡ Lists □ Container
<img> <ul>/<ol> <div>
<img src="[Link]"/> <li>List Item</li> <div>Group items</div>
Introduction to HTML | First Year Polytechnic
HTML Attributes
Adding Properties to HTML Elements
<a href="[Link] target="_blank"> Click
Here </a>
Opening Tag Attribute Name Attribute Value Content Closing Tag
Key Attributes You Must Know
href Specifies URL for links id Unique identifier for element
src Source path for images/scripts class CSS class name for styling
alt Alt text for images (accessibility) style Inline CSS styles
Introduction to HTML | First Year Polytechnic
Lists and Tables in HTML
Organizing Content Effectively
HTML Lists HTML Tables
<ul> <table>
<li>Mango</li> <tr>
<li>Banana</li> <th>Name</th>
<li>Apple</li> <th>Marks</th>
</ul> </tr>
<tr>
<ol> <td>Ramesh</td>
<li>Wake up</li> <td>85</td>
<li>Brush teeth</li> </tr>
<li>Study HTML</li> <tr>
</ol> <td>Suresh</td>
<td>90</td>
</tr>
</table>
Introduction to HTML | First Year Polytechnic
HTML Forms
Collecting Input from Users
<form action="[Link]" method="post"> <input type='text'> Single-line text box
<label>Name:</label>
<input type="text" name="name" /> <input type='email'> Email address field
<label>Email:</label>
<input type="email" name="email" /> <input type='password'> Hides typed characters
<label>Gender:</label>
<input type="radio" name="gender" value="male"> Male <input type='radio'> Select one from a group
<input type="radio" name="gender" value="female"> Female
<label>Course:</label> <input type='checkbox'> Select multiple options
<select name="course">
<option>Computer Science</option>
<option>Electronics</option> <textarea> Multi-line text area
</select>
<button type="submit">Submit</button> <select> Dropdown list
</form>
<button> Clickable submit button
Introduction to HTML | First Year Polytechnic
HTML5 – New Features
What's New in the Latest Version
Semantic Elements Audio & Video
<header>, <footer>, <nav>, <article>, <section>, <aside> <audio> and <video> tags — embed media without Flash
— give meaning to layout plugins
Canvas Drawing Local Storage
<canvas> element — draw shapes, animations using Store data in the browser — no server needed for small
JavaScript data
Geolocation New Form Types
Access user's location with permission — used in maps,
date, range, color, search, tel input types added in HTML5
delivery apps
Introduction to HTML | First Year Polytechnic
Key Takeaways
01 HTML is the standard language for creating web pages 04 Most tags have an opening and closing tag pair
02 Every HTML document has DOCTYPE, html, head and 05 Attributes provide extra information about elements
body tags
03 06 HTML5 introduced semantic elements, audio, video
Tags are keywords enclosed in < > angle brackets
support
Now It's Your Turn!
Hands-on Practice Exercise
<!DOCTYPE html> Your Tasks:
<html>
<head>
<title>My Profile</title> 1
Create [Link] with any text editor
</head>
<body>
<h1>Your Name Here</h1> 2
Add your name as an <h1> heading
<p>Branch: Computer Science</p>
<p>Year: First Year</p>
<ul> 3
Write 3 facts about yourself in <p> tags
<li>Hobby 1</li>
<li>Hobby 2</li>
</ul> 4
<a href="[Link] Me</a> Create a list of your hobbies using <ul>
</body>
</html> 5
Open the file in a browser and see the result!
Happy Coding!