<!DOCTYPE html>
How to save html file?
Note: Essentially, HTML is comprised of tags, and these tags are opened and then closed with content or text placed between them. While all HTML tags are not necessarily paired with closing tags, there are two main types of tags in HTML:
<p>Content goes here</p>
. The opening tag <p> signifies the
beginning of the paragraph, and the closing tag </p> marks the end.
<!DOCTYPE html>
<html>
<head><title>...</title></head>
<body>
<img src="path of image" alt="alternate text" width="400px" height="500px" />
<img src="path of image" alt="alternate text" width="350px" height="350px" />
</body>
</html>
Attributes of HTML img Tag:
<!DOCTYPE html>
<html>
<head>
<title>web page title</title>
</head>
<body>
<h1>Hyperlink</h1>
<a href="url of another page" target="_blank">click me</a>
<a href="https://www.example.com" target="_self">Visit Example Website</a>
</body>
</html>
target="_blank"
opens the linked resource in a new browser tab or window.target="_self"
opens the linked resource in the same tab or window.target="_parent"
opens the linked resource in the parent frame. If the link is inside an iframe, it will open in the parent document.target="_top"
opens the linked resource in the full body of the window, removing all frames.<a href="#section1">Link to Section 1</a>
(navigating to a specific section on the same page).Ordered list: An ordered list is used to create a list of items that are sequentially numbered. The items are typically displayed with numbers or letters.
Example code:
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
output:
Unordered list: An unordered list is used to create a list of items that do not have a specific order. The items are typically displayed with bullet points.
Example code:
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
Output:
Definition List: A definition list is used to create a list of terms and their corresponding definitions. It is commonly used for glossaries or descriptions.
Example code:
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
<dt>JavaScript</dt>
<dd>A programming language for web development</dd>
</dl>
Output:
rowspan
) in a
table.
movie data |
Movie name | Movie cast | IMDB Rating | |
---|---|---|---|---|
Ephemeral Echoes | James Anderson | Emily Thompson | 8.2 | |
Whispers in the Mist | Daniel Rodriguez | Olivia Harris | 7.9 | |
Serenade of Shadows | Michael Turne | Sophia Walker | 8.5 |
<!-- Table Code -->
<table border="1px" cellspacing="2" cellpadding="10">
<tr>
<th rowspan="4">movie <br> data</th>
<th>Movie name</th>
<th colspan="2">Movie cast</th>
<th>IMDB Rating</th>
</tr>
<tr>
<td>Ephemeral Echoes</td>
<td>James Anderson</td>
<td>Emily Thompson</td>
<td>8.2</td>
</tr>
<tr>
<td>Whispers in the Mist</td>
<td>Daniel Rodriguez</td>
<td>Olivia Harris</td>
<td>7.9</td>
</tr>
<tr>
<td>Serenade of Shadows</td>
<td>Michael Turner</td>
<td>Sophia Walker</td>
<td>8.5</td>
</tr>
</table>
<form action="#" method="get">
<label>Username :</label>
<input type="text" name="uname" required>
<br>
<label>Password :</label>
<input type="password" name="pass" placeholder="Enter password" required>
<br>
<button type="submit">Login</button>
<input type="reset" value="Reset">
<input type="checkbox" checked="checked">Remember me
</form>
Understanding the Above Code:
<form action="#" method="post" class="formdiv">
<label>First name :</label>
<input type="text" name="fname" required>
<br>
<label>Last name :</label>
<input type="text" name="lname" required>
<br>
<label>Course :</label>
<select name="course">
<option value="bca">BCA</option>
<option value="mca">MCA</option>
</select>
<br>
<label>Gender :</label>
<br>
<input type="radio" name="gen" value="male">Male <br>
<input type="radio" name="gen" value="female">Female <br>
<label>Address :</label><br>
<textarea name="address" cols="30" rows="10">Jilla - Nainital</textarea>
<br>
<label>Email :</label>
<input type="email" name="email" required>
<br>
<label>Password :</label>
<input type="password" name="pass" required>
<br>
<label>Retype Password :</label>
<input type="password" name="repass">
<br>
<input type="button" value="Submit">
</form>
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<frameset rows="30%, 40%, 30%">
<frame name="frame1" src="./page1.html"> <!-- These are separate html file located in the same location -->
<frame name="frame2" src="./page2.html">
<frame name="frame3" src="./page3.html">
<noframes>
<body>
<h1>Your browser does not support frames</h1>
</body>
</noframes>
</frameset>
</html>
Inline and Internal CSS are contained within a single HTML file, while External CSS utilizes two separate files: one HTML file and another dedicated CSS file. To link these files, the HTML document includes a link tag in the head section, specifying the path to the external CSS file. This separation of concerns enhances code modularity and simplifies the process of making consistent style changes across multiple pages.
class="language-html"
<!DOCTYPE html>
<html>
<head><title>Inline CSS</title></head>
<body>
<h1 style="color: red; margin-left: 40px;"> Heading </h1>
<p>Paragraph Content</p>
</body>
</html>
<tagname style="property: value;">Content</tagname>
<p style="color: red;">This is a red paragraph.</p>
class="language-html"
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
h1 {
color: blue;
margin-left: 40px;
}
p {
font-size: 16px;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p>Paragraph Content</p>
</body>
</html>
/* styles.css */
h1 {
color: green;
margin-left: 40px;
}
p {
font-size: 18px;
}
class="language-html"
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>External CSS</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Heading</h1>
<p>Paragraph Content</p>
</body>
</html>
Note: There is a priority rule among inline, internal, and external CSS. This rule dictates that styles applied inline within HTML elements take precedence over styles defined internally in the document (via `<style>` tags) and externally linked CSS files. In other words, if a tag has styles applied inline, those styles cannot be overridden by internal or external stylesheets. Similarly, if styles are defined internally, they will not be affected by external CSS rules.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
/* Applying styles to all <p> elements */
p {
font-size: 16px;
color: #333;
line-height: 1.5;
/* Additional styles can be added here */
}
</style>
</head>
<body>
<p>This is a paragraph tag and styles are being applied to this using element selector</p>
</body>
</html>
Example:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
/* Applying styles to the element with ID "unique-id" */
#unique-id {
font-weight: bold;
color: #ff0000;
/* Additional styles can be added here */
}
</style>
</head>
<body>
<div id="unique-id">This is a div with a unique ID and styles are being applied using the ID selector</div>
</body>
</html>
Example:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
/* Applying styles to all elements with class "example-class" */
.example-class {
font-style: italic;
color: #007bff;
/* Additional styles can be added here */
}
</style>
</head>
<body>
<p class="example-class">This is a paragraph with the class "example-class" and styles are being applied using the class selector</p>
<div class="example-class">This is a div with the class "example-class" and styles are being applied using the class selector</div>
</body>
</html>
Example:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
/* Applying global styles to all elements */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
/* Additional styles can be added here */
}
</style>
</head>
<body>
<h1>This is a heading and styles are being applied using the Universal Selector</h1>
<p>This is a paragraph and styles are being applied using the Universal Selector</p>
<div>This is a div and styles are being applied using the Universal Selector</div>
</body>
</html>
Example:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
/* Applying the same styles to multiple selectors */
h1, h2, h3 {
font-family: Arial, sans-serif;
color: #333;
/* Additional styles can be added here */
}
</style>
</head>
<body>
<h1>This is a heading and styles are being applied using the Group Selector</h1>
<h2>This is another heading and styles are being applied using the Group Selector</h2>
<h3>This is yet another heading and styles are being applied using the Group Selector</h3>
</body>
</html>
The CSS Box Model is a fundamental concept in web design that describes how elements are structured and spaced within a webpage. It consists of several key components that define the dimensions and layout of an element.
Key components of the CSS Box Model:
The box model in CSS allows developers to control the dimensions and spacing of elements on a webpage. This is achieved through properties like padding, margin, and border.
div {
padding-left: 10px;
padding-right: 20px;
padding-top: 30px;
padding-bottom: 40px;
margin-left: 10px;
margin-right: 20px;
margin-top: 30px;
margin-bottom: 40px;
border: 2px solid red;
}
/* We can also use the following shortcut syntax */
p {
padding: 30px 20px 40px 10px; /* top, right, bottom, left */
margin: 30px 20px 40px 10px; /* top, right, bottom, left */
}
In the CSS code above:
div
and
p elements.
div
and p elements.
Syntax:
selector:pseudo-class {
property: value;
}
Examples of pseudo-classes:
button:hover {
background-color: yellow;
color: black;
}
button:active {
background-color: green;
color: white;
}
a:link {
color: blue;
}
a:visited {
color: purple;
}
ul li:last-child {
font-weight: bold;
}