Download Visual Studio Code
Step 1: Create a Folder
Open Visual Studio Code.
Click on File → Open Folder…
Choose or create a new folder (for example: Edusystem).
Click Select Folder.
Create a Webpage Example Index.html
Press The Enter Button
Press Shift + 1 “Enter”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html><!DOCTYPE html>→ Tells browser this is HTML5.<html>→ Main container of the page.<head>→ Page settings (title, meta).<title>→ Name shown in browser tab.<body>→ Visible content of the webpage.- Head = Settings
- Body = Content
<head>
<link rel=”icon” href=”logo.jpg”>
</head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EduSystem</title>
</head>
<body>
<p>Welcome to EduSystem!</p>
</body>
</html>Welcome to EduSystem!
Task
align="Left"
align="Right"Heading Paragraph h1 to h6
<h1>EduSystem</h1>
<h2>EduSystem</h2>
<h3>EduSystem</h3>
<h4>EduSystem</h4>
<h5>EduSystem</h5>
<h6>EduSystem</h6>HTML Text Tags Task
<br> – Line break
Example: Hello<br>World
<b> – Bold text
Example: <b>Bold</b>
<strong> – Important bold text
Example: <strong>Important</strong>
<i> – Italic text
Example: <i>Italic</i>
<em> – Emphasized text
Example: <em>Italic</em>
<u> – Underline text
Example: <u>Underline</u>
<big> – Bigger text
Example: <big>Big</big>
<small> – Smaller text
Example: <small>Small</small>
<mark> – Highlight text
Example: <mark>Highlight</mark>
<sub> – Subscript
Example: H<sub>2</sub>O
<sup> – Superscript
Example: x<sup>2</sup>
<body>
<img src="logo.png" alt="EduSystem Logo">
</body>Ordered HTML List
<ol type=“A”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
OUTPUT
- Coffee
- Tea
- Milk
Task
type=”1″, type=”A” , type=”a”, type=”I” , type=”i”
Unordered HTML List
<ul type="none" >
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>Task
types
- disc Sets the list item marker to a bullet (default)
- circle Sets the list item marker to a circle
- square Sets the list item marker to a square
- none The list items will not be marked
<table style="width:100%">
<tr>
<th>Reg No</th>
<th>Name</th>
<th>Department</th>
</tr>
<tr>
<td>23-SE-085</td>
<td>Ghulam Nabi</td>
<td>SE</td>
</tr>
</table> | Reg No | Name | Department |
|---|---|---|
| 001 | Ghulam Nabi | SE |
HTML Links - Solution
<p><a href="#C4">Jump to Chapter 4</a></p>
<h2>Chapter 1</h2>
<p>This chapter explains HTML</p>
<h2>Chapter 2</h2>
<p>This chapter explains CSS</p>
<h2>Chapter 3</h2>
<p>This chapter explains JAVASCRIPT</p>
<h2 id="C4">Chapter 4</h2>
<p>This chapter explains PHP</p>HTML Iframe Attribute
<iframe src="https:edusystem.pk" height="200" width="300" title
="Iframe Example"></iframe>HTML Color Examples
1. Inline Text Color using style="color"
- Example:
<p style="color:red;">This text is red</p>
2. Background Color using style="background-color"
- Example:
<p style="background-color:yellow;">Yellow background</p>