Scribd
Upload
1 views

Unit 4th

Uploaded by

garoga9692
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
1 views

Unit 4th

Uploaded by

garoga9692
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

 Creating and Saving an HTML document

The following are the steps to create and save an HTML file with the help
of the Notepad text editor.

Step 1. Open Notepad

 On the start menu, search for Notepad in Windows.


 Click on the open option on the right side to open the Notepad editor.

Step 2. Write HTML Code

 After opening the Notepad, you can write any HTML code.
 An example is shown below.
Step 3. Save the HTML page

 Once the code is written, you can click on Files and then Save or
directly press Ctrl + S.

 Once you click on Save you will get an option to write the name of the
file with an extension.
 Write the name of the file followed by the .html extension and save the
file encoding as UTF-8.

 Your HTML file is now created and will be visible in the place where
you saved it.
 You can double-click on the saved HTML file to view it on your
browser.
 Fundamental of HTML:
HTML elements is fundamental to web development, as HTML (Hypertext
Markup Language) is the standard markup language used to create web
pages. HTML elements are the building blocks of a web page, and they
define the structure and content of the page.

1. Root Element:
 The root element of an HTML document is <html>.
 It encapsulates the entire content of the web page.
 It contains two main sections: <head> and <body>.
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <!-- Metadata and head content go here -->
 </head>
 <body>
 <!-- Main content of the web page goes here -->
 </body>
 </html>

2. Metadata Elements:
 Metadata elements provide information about the document.
 <head> is a container for metadata, including the document title,
character set, linked stylesheets, and other essential information.
 Examples of metadata elements include <title>, <meta>, <link>, and
<style>.
 <head>
 <title>Document Title</title>
 <meta charset="UTF-8">
 <meta name="description" content="A brief description of the
document">
 <link rel="stylesheet" href="styles.css">
 </head>

3. Section Elements:
 Section elements define the structure and outline of the document.
 Examples include <header>, <footer>, <nav>, <article>, <section>, and
<aside>.
 These elements help organize content into meaningful sections, making
it easier to understand the document's structure.

<header>: Represents a container for introductory content or a set of


navigational links.

<footer>: Defines a footer for a section or a page.

<nav>: Represents a navigation menu.


<body>
<header>
<h1>Website Title</h1>
</header>

<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>

<section>
<!-- Main content section -->
</section>

<footer>
<p>&copy; 2023 Your Website</p>
</footer>
</body>

4. Heading Elements:
 Heading elements define headings or subheadings in the document.
 They range from <h1> (the highest level) to <h6> (the lowest level).
 Proper use of heading elements contributes to the document's
semantic structure and accessibility.
 <body>
 <h1>Main Heading</h1>
 <h2>Subheading 1</h2>
 <h3>Subheading 2</h3>
 <!-- ... -->
 <h6>Subheading 6</h6>
 </body>

5. Flow Content Elements:


 Flow content elements represent the main content of the document.
 Common examples include <p> for paragraphs, <a> for links, <img> for
images, <ul> and <ol> for lists, and <div> for generic content grouping.
 These elements contribute to the flow of the document's content.

<p>: Represents a paragraph.

<a>: Represents a hyperlink.

<img>: Represents an image.


<p>This is a paragraph of text.</p>

<a href="https://www.example.com">Visit Example.com</a>

<img src="image.jpg" alt="Description of the image">

6. Phrasing Content Elements:


 Phrasing content elements contribute text or inline-level elements
within block-level elements.
 Examples include <span>, <strong> for strong importance, <em> for
emphasized text, <a> for hyperlinks, and <img> for images.
 Phrasing content is typically nested within flow content.

<span>: Represents a generic inline container.

<strong>: Represents strong importance.

<em>: Represents emphasized text.


<p>This is <em>emphasized</em> text.</p>

<p>This is <strong>strong</strong> text.</p>

<span>This is generic inline content.</span>

7. Embedded Content Elements:


 Embedded content elements allow the inclusion of external resources
within a document.
 Examples include <img> for images, <audio> and <video> for
multimedia, <iframe> for embedding external content, and <object> for
embedding external resources.

<img>: Embeds an image.

<audio>: Embeds audio content.

<video>: Embeds video content.

<iframe>: Embeds an external resource.


<img src="image.jpg" alt="Description of the image">

<audio controls>
<source src="audio.mp3" type="audio/mp3">
Your browser support the audio tag.
</audio>

<video width="320" height="240" controls>


<source src="video.mp4" type="video/mp4">
Your browser support the video tag.
</video>

<iframe src="https://www.CodieYs.com" width="600" height="400"></iframe>


8. Interactive Elements:
 Interactive elements enable user interaction with the web page.
 Examples include <a> for hyperlinks, <button> for clickable buttons,
<input> for various form controls, and <select> for dropdown lists.
 These elements enhance the user experience by providing interactive
features.

<a>: Creates a hyperlink.

<button>: Represents a clickable button.

<input>: Represents various form controls.

<select>: Represents a dropdown list.


<a href="https://www.CodieYs.com">Visit CodieYs.com</a>

<button onclick="myFunction()">Click me</button>

<form action="/submit" method="post">


<label for="username">Username:</label>
<input type="text" id="username" name="username">
<input type="submit" value="Submit">
</form>

<select>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>

Understanding the role and proper use of each type of HTML element is
crucial for creating well-structured, accessible, and maintainable web
pages. The correct combination and nesting of these elements contribute to
a clear and semantically meaningful HTML document.
 HTML File:
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="website icon" type="png" href="./cdlu logo.png">
<title>Admission Form</title>
</head>

<body>
<div class="container">
<img class="logo" src="./cdlu logo.png" alt="CDLU logo">

<div class="admission-container">
<h2 style="text-align: center;">DCSE Admission Form, CDLU Sirsa</h2>
<form class="form-container">
<label for="course">Select Course</label>
<select id="course" name="course" class="form-input">
<option value="" disabled selected>Select Course</option>
<option value="computer-science">Computer Science</option>
<option value="business-admin">Business Administration</option>
<option value="engineering">Engineering</option>

</select>

<div class="name-fields">
<input type="text" class="form-input" id="firstName" name="firstName"
placeholder="First Name">
<input type="text" class="form-input" id="lastName" name="lastName"
placeholder="Last Name">
<input type="text" class="form-input" id="middleName" name="middleName"
placeholder="Middle Name">
</div>

<label for="fatherName">Father Name</label>


<input type="text" class="form-input" id="fatherName" name="fatherName">

<label for="email">Email</label>
<input type="email" class="form-input" id="email" name="email">

<label for="address">Address</label>
<input type="text" class="form-input" id="address" name="address">

<label for="phone">Phone No.</label>


<input type="tel" class="form-input" id="phone" name="phone">

<label for="documents">Submit Documents</label>


<input type="file" class="form-input" id="documents" name="documents">

<div class="submit-container">
<input type="submit" class="submit-btn" value="Submit">
<input type="reset" class="reset-btn" value="Reset">
</div>
</form>
</div>
</div>
<div class="marquee-container">
<marquee behavior="scroll" direction="left" scrollamount="7">
<strong>Alert:</strong> Admission deadline is approaching. Apply now!
</marquee>
</div>

</body>

</html>

CSS File:
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
background: rgb(202, 255, 139);
background: linear-gradient(90deg, rgba(202, 255, 139, 1) 0%, rgba(54, 230, 80, 1) 50%,
rgba(95, 242, 201, 1) 100%);
}

.admission-container {
position: absolute;
top: 50%;
transform: translateY(-50%);
border-radius: 20px;
padding: 20px;
backdrop-filter: blur(7px);
box-shadow: inset 0px 10px 50px rgba(255, 255, 255, 0.5);
width: 400px;
margin-bottom: 20px;
border: 3px solid rgb(16, 0, 0);
margin: auto;
z-index: 2;
}

.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}

.logo {
width: 100%;
max-width: 300px;
z-index: 1;
}

.form-container {
display: flex;
flex-direction: column;
}

label {
margin-bottom: 5px;
font-weight: bold;
}

.form-input {
margin-bottom: 10px;
padding: 8px;
border: 1px solid #000000;
border-radius: 5px;
width: 96%;
}

#course {
width: 100%;
}

.name-fields {
display: flex;
gap: 10px;
width: 100%;
}

.submit-container {
display: flex;
justify-content: space-between;
align-items: center;
}

.submit-btn,
.reset-btn {
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
width: 48%;
}

.submit-btn {
background-color: #298c2d;
color: #fff;
border: 1px solid black;
}

.reset-btn {
background-color: #ef3b2e;
color: #fff;
border: 1px solid black;
}

.marquee-container {
overflow: hidden;
margin-top: 20px;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 1;
}
@media screen and (max-width: 600px) {

body {
padding: 10px;
}

.admission-container {
width: 340px;
}

.form-input {
width: 100%;
font-size: 14px;
}

.name-fields {
flex-direction: column;
gap: 5px;
}

.submit-btn,
.reset-btn {
width: 100%;
}

.marquee-container {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
}

marquee {
display: inline-block;
}

.logo {
max-width: 150px;
}

h2 {
font-size: 18px;
}

label {
font-size: 13px;
font-weight: bold;
}

}
Output:
Explanation of above tags used in making the
Admission form are as:-
1. <!DOCTYPE html>: Declares the document type and version of
HTML being used. In this case, it's HTML5.
2. <html lang="en">: The root element of the HTML document.
The lang attribute specifies the language of the document.
3. <head>: Contains meta-information about the HTML
document, such as character set, viewport settings, stylesheets,
and the document title.
4. <meta charset="UTF-8">: Sets the character encoding for the
document to UTF-8, which includes a wide range of characters
from various languages.
5. <meta name="viewport" content="width=device-width,
initial-scale=1.0">: Configures the viewport settings for
responsive web design, ensuring proper scaling on different
devices.
6. <link rel="stylesheet" href="style.css">: Links an external
CSS (Cascading Style Sheet) file to style the HTML document.
7. <link rel="website icon" type="png" href="./cdlu
logo.png">: Specifies the favicon for the website, which is the
small icon displayed in the browser tab. The type attribute
specifies the file type.
8. <title>Admission Form</title>: Sets the title of the HTML
document, which is displayed on the browser tab.
9. <body>: Contains the content of the HTML document,
including text, images, forms, etc.
10. <div class="container">: A container element with the
class "container" used for organizing and styling content.
11. <img class="logo" src="./cdlu logo.png" alt="CDLU
logo">: Inserts an image with the class "logo" and provides
alternative text for accessibility.
12. <div class="admission-container">: A container for the
admission form with the class "admission-container."
13. <h2 style="text-align: center;">DCSE Admission Form,
CDLU Sirsa</h2>: Defines a level 2 heading with centered
text.
14. <form class="form-container">: Creates a form with the
class "form-container" to collect user input.
15. <label>: Represents a label for an input element. Improves
accessibility and user experience.
16. <select>: Creates a dropdown list. In this case, it's used for
selecting a course.
17. <option>: Defines an option in a dropdown list. It can be
selected by the user.
18. <input>: Creates various types of input fields such as text,
email, tel, and file for user interaction.
19. <div class="name-fields">: A container for grouping and
styling the input fields related to the user's name.
20. <marquee>: Creates a scrolling text element. In this case,
it's used to display an alert about the admission deadline.
21. <@media>: Specifies styles for different screen sizes using
media queries. In this case, styles are adjusted for screens with
a maximum width of 600 pixels.
These tags and elements work together to structure and style the
admission form webpage.

You might also like