School Student HTML Project
Uploaded by
SUJOY DEBNATHSchool Student HTML Project
Uploaded by
SUJOY DEBNATH_______________________________________________________________________________________________
HTML p & head Tag
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Webpage</h1>
<p>This is my first paragraph of text!</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JS Example</title>
</head>
<body>
<h2>Welcome to My Webpage</h2>
<p>This structure is built using HTML, styled with CSS, and made interactive with JS.</p>
<button onclick="showMessage()">Click Me</button>
</body>
</html>
Styling Paragraphs with CSS
<!DOCTYPE html>
<html lang="en">
<head>
<style>
p{
color: green;
font-size: 30px;
font-weight: 700;
}
</style>
</head>
<body>
<p>This is paragraph element</p>
</body>
</html>
_______________________________________________________________________________________________
_
Aligning Paragraph
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="text-align: center;">This is paragraph element</p>
</body>
</html>
_______________________________________________________________________________________________
_
HTML a Tag
<!DOCTYPE html>
<html>
<body>
<a href="[Link] target="_blank">
HTML Tutorial
</a>
</body>
</html>
Syntax:
<a href = "link"> Link Name </a>
_______________________________________________________________________________________________
_
HTML Div Tag
The <div> tag, used in over 90% of web pages, divides content into sections and serves as a flexible container for
text, images, and links. Easily styled with CSS and customized using classes or IDs, it often uses percentage-based
widths like 50% or 33.33% for responsive layouts, making it key to web page structure.
Syntax:
<div>
<!-- Content goes here -->
</div>
<html>
<head>
<style>
/* Basic styling for better readability */
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f4f4f4;
}
/* Styling for the div blocks */
div {
color: white;
background-color: #009900;
/* Fixed the color */
margin: 10px 0;
padding: 10px;
font-size: 20px;
border-radius: 5px;
/* Optional: Adds rounded corners */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
/* Optional: Adds subtle shadow */
}
/* Headings for clarity */
h1 {
font-size: 28px;
color: #333;
}
/* Styling for the section and article */
section {
margin-top: 30px;
}
/* Responsive styling */
@media (max-width: 600px) {
div {
font-size: 18px;
padding: 8px;
}
h1 {
font-size: 24px;
}
}
</style>
</head>
<body>
<article>
<h1>Understanding the <code>div</code> Tag in HTML</h1>
<section>
<p>The <code>div</code> tag is a container element used to group content together.
It's a commonly used tag for styling sections of a page.</p>
<div>First div tag with some content</div>
<div>Second div tag, providing another example</div>
<div>Third div tag demonstrating further usage</div>
<div>Fourth div tag showing how to style multiple blocks</div>
</section>
</article>
</body>
</html>
_____________________________________________________________________________________________
Apply Font Properties with div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font Properties Example</title>
<style>
.text-style {
font-family: 'Arial', sans-serif; /* Font type */
font-size: 24px; /* Font size */
font-weight: bold; /* Makes text bold */
}
</style>
</head>
<body>
<div class="text-style">
This is a simple example of applying font properties to a div element.
</div>
</body>
</html>
_____________________________________________________________________________________________
Apply Color with the Div Tag
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font Properties Example</title>
<style>
.text-style {
font-family: 'Arial', sans-serif;
font-size: 24px;
font-weight: bold;
color: blue;
}
</style>
</head>
<body>
<div class="text-style">
This is a example of applying font properties to a div element.
</div>
</body>
</html>
_______________________________________________________________________________________________
Create a Shadow Effect with the Div Tag
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shadow Effect with div</title>
<style>
.shadow-effect {
width: 300px;
height: 200px;
background-color: lightblue;
margin: 50px auto;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
padding: 20px;
font-size: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="shadow-effect">
This div has a shadow effect.
</div>
</body>
</html>
_______________________________________________________________________________________________
HTML <span> Tag
The HTML <span> tag is an inline container that is used to group and apply styles or scripts to
specific parts of text or elements within a document.
The <span> tag is inline, meaning it doesn't create a new line. It stays within the same line as
the text around it.
The <span> tag doesn’t change how the content looks on its own. It's used to apply styles or to
control parts of content through JavaScript.
Syntax
<span class="">Some Text</span>
<!DOCTYPE html>
<html>
<head>
<title>GeeksforGeeks span tag</title>
<!-- style for span tag -->
<style>
span {
color: green;
text-decoration: underline;
font-style: italic;
font-weight: bold;
font-size: 26px;
}
</style>
</head>
<body>
<span> GeeksforGeeks </span><br />
<span> GeeksforGeeks </span><br />
<span> GeeksforGeeks </span><br />
</body>
</html>
_______________________________________________________________________________________________
_
<!DOCTYPE html>
<html>
<head>
<title>GeeksforGeeks span tag</title>
</head>
<body>
<!-- span tags with inline style/css -->
<span style="background-color:powderblue;">
GfG
</span>
<span style="background-color: lightgray;">
-Contribute-
</span>
<span style="background-color: yellow;">
Article
</span>
<span style="background-color: lightgreen;">
GCET
</span>
</body>
</html>
_______________________________________________________________________________________________
<span> vs <div> tag
Both <span> and <div> are used as containers in HTML, there are key differences between them:
<span> <div>
Inline element Block-level element
For styling or grouping inline content For grouping block-level content
Starts on a new line and takes up full
Does not break the flow of text
width
Styling or scripting small portions of
Structuring larger sections of content
text
_______________________________________________________________________________________________
HTML <header> tag Example
In this example, the <header> tag is used inside the <article> element to define introductory
content for that article.
<!DOCTYPE html>
<html>
<body style="font-size: 25px;">
<h1 style="color: green;">GeeksforGeeks</h1>
<h3>HTML Header Tag</h3>
<hr>
<article>
<header>
<h3 style="color: green;">
GeeksforGeeks Learning
</h3>
<p>Posted by GFG</p>
<p>
A Computer Science portal for geeks.
It contains well written, well thought <br>
and well explained computer science and
programming articles.
</p>
</header>
</article>
</body>
</html>
______________________________________________________________________________________________
<!DOCTYPE html>
<html>
<body>
<h1>GeeksforGeeks</h1>
<h3>HTML Header Tag</h3>
<!--HTML header tag starts here-->
<header>
<h1>This is the heading.</h1>
<h4>This is the sub-heading.</h4>
<p>This is the metadata.</p>
</header>
<!--HTML header tag ends here-->
</body>
</html>
______________________________________________________________________________________________
<!DOCTYPE html>
<html>
<body>
<h1>GeeksforGeeks</h1>
<h3>HTML Header Tag</h3>
<!--HTML header tag starts here-->
<header>
<a href=
"[Link]
Algo</a> |
<a href=
"[Link]
DS</a> |
<a href=
"[Link]
Languages</a> |
<a href=
"[Link]
Interview</a> |
<a href=
"[Link]
Students</a> |
<a href=
"[Link]
Gate</a> |
<a href=
"[Link]
CS Subjects</a> |
<a href=
"[Link]
Quizzes</a>
<div class="search-bar">
<input type="text" placeholder="Search products...">
<button>Search</button>
</div>
</header>
<!--HTML header tag ends here-->
</body>
</html>
_______________________________________________________________________________________________
HTML footer Tag
The <footer> tag in HTML is used to define the footer section of an HTML document.
The footer section typically contains information such as contact information, sitemap, back-
to-top links, related documents, copyright, etc.
The footer tag is a semantic tag included in HTML (in 2014) along with other tags like
article, nav, header, etc.
It is not mandatory, but adds to clear structure to the document and useful for SEO
<!DOCTYPE html>
<html>
<body>
<footer>
<a href="[Link]
About Us
</a>|
<a href="[Link]
Privacy Policy
</a>|
<a href="[Link]
%[Link]%3Fisload%3Dtrue&hide_secure=true">
Careers
</a>
<p>@geeksforgeeks, Some rights reserved</p>
</footer>
</body>
</html>
_______________________________________________________________________________________________
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
}
footer {
display: flex;
justify-content: space-around;
background-color: #333;
color: #fff;
padding: 20px;
}
column {
width: 27%;
}
p{
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin-bottom: 5px;
}
</style>
</head>
<body>
<footer>
<div class="column">
<p>Company</p>
<ul>
<li>About Us</li>
<li>Careers</li>
<li>Privacy Policy</li>
<li>Contact Us</li>
</ul>
</div>
<div class="column">
<p>Learn</p>
<ul>
<li>Algorithms</li>
<li>Data Structures</li>
<li>Languages</li>
<li>CS Subjects</li>
<li>Video Tutorials</li>
</ul>
</div>
<div class="column">
<p>Practice</p>
<ul>
<li>Company-wise</li>
<li>Topic-wise</li>
<li>Contests</li>
<li>Subjective Questions</li>
</ul>
</div>
</footer>
</body>
</html>
_______________________________________________________________________________________________
HTML br Tag
The <br> tag in HTML is used to create a line break in the text, causing the content that follows
it to appear on a new line.
Note: It is a self-closing tag, meaning it does not need a separate closing tag.
<!DOCTYPE html>
<html>
<body>
<p>Dear Reader, <br>This is printed after a line break.</p>
</body>
</html>
_______________________________________________________________________________________________
<!DOCTYPE html>
<html>
<body>
<p>
Hello, welcome to GeeksforGeeks<br>
We hope you enjoy browsing.<br>
Feel free to reach out with any questions.<br>
Have a great day!
</p>
</body>
</html>
_______________________________________________________________________________________________
HTML <nav> Tag
The <nav> tag in HTML is used to define navigation sections on a webpage. It typically contains
links to key parts of the site, such as the main menu, table of contents, or index. These links are
usually organized using unordered lists (<ul>) or displayed as standalone links.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>HTML nav Tag</title>
</head>
<body>
<h2> HTML nav Tag</h2>
<!-- nav tag starts -->
<nav>
<a href="#">Home</a> |
<a href="#">Interview</a> |
<a href="#">Languages</a> |
<a href="#">Data Structure</a> |
<a href="#">Algorithm</a>
</nav>
<!-- nav tag ends -->
</body>
</html>
_______________________________________________________________________________________________
HTML Images
The HTML <img> tag is used to embed an image in web pages by linking them. It creates a
placeholder for the image, defined by attributes like src, width, height, and alt, and does not
require a closing tag.
There are two ways to insert the images into a webpage:
By providing a full path or address (URL) to access an internet file.
By providing the file path relative to the location of the current web page file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML</title>
</head>
<body>
<img src=
"[Link]
alt="GFG image" />
</body>
</html>
______________________________________________________________________________________________
Set Image Size - Width and Height Attribute
The width and height attributes are used to specify the width and height of an image. The
attribute values are specified in pixels by default. The width and height attributes are always
declared in pixels.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML</title>
</head>
<body>
<img src=
"[Link]
alt="GeeksforGeeks logo"
width="300"
height="300" />
</body>
</html>
_______________________________________________________________________________________________
HTML Tables
HTML tables help organize data into rows and columns, making information easy to read and
compare. They are useful for displaying schedules, price lists, product details, and more.
Can include text, images, links, and other elements
Built using tags like <table>, <tr>, <th>, and <td>
Allow clear presentation of data for comparison
Can be styled with CSS for better design and readability
<!-- [Link] -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML</title>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>
</html>
_______________________________________________________________________________________________
Example of a Border Spacing HTML Table:
<!-- [Link] -->
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<th>Book Name</th>
<th>Author Name</th>
<th>Genre</th>
</tr>
<tr>
<td>The Book Thief</td>
<td>Markus Zusak</td>
<td>Historical Fiction</td>
</tr>
<tr>
<td>The Cruel Prince</td>
<td>Holly Black</td>
<td>Fantasy</td>
</tr>
<tr>
<td>The Silent Patient</td>
<td> Alex Michaelides</td>
<td>Psychological Fiction</td>
</tr>
</table>
</body>
</html>
______________________________________________________________________________________________
Styling HTML Tables - Adding CSS
we use CSS (Cascading Style Sheets) to add styles such as borders, background colors, text
alignments, and much more. Here are some basic styles to make your table look neater and more
professional:
Syntax:
table, th, td {
border: 1px solid black;
}
<!-- [Link] -->
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>
</html>
_______________________________________________________________________________________________
Adding Collapsed Borders in an HTML Table
Syntax:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
<!-- [Link] -->
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>
</html>
_______________________________________________________________________________________________
_
Adding Cell Padding in an HTML Table
Syntax:
th, td {
padding: 20px;
}
<!-- [Link] -->
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 20px;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>
</html>
_______________________________________________________________________________________________
Adding Border Spacing in an HTML Table
<!-- [Link] -->
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
}
table {
border-spacing: 5px;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>
</html>
_______________________________________________________________________________________________
Adding Cells that Span Many Columns in HTML Tables
To make a cell span more than one column, we must use the colspan attribute.
<!-- [Link] -->
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Vikas Rawat</td>
<td>9125577854</td>
<td>8565557785</td>
</tr>
</table>
</body>
</html>
_______________________________________________________________________________________
More Example for HTML caption Tag
<html>
<body>
<table>
<caption>Employee Details</caption>
<tr>
<th>Employee Name</th>
<th>Position</th>
</tr>
<tr>
<td>John</td>
<td>Manager</td>
</tr>
<tr>
<td>Emma</td>
<td>Developer</td>
</tr>
</table>
</body>
</html>
______________________________________________________________________________________
HTML Lists
An HTML List allows you to organize data on web pages into an ordered or unordered format to
make the information easier to read and visually appealing. HTML Lists are very helpful for
creating structured, accessible content in web development.
HTML lists organize content using tags like <ul>, <ol> & <li>.
They improve readability by presenting data in a structured format.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML</title>
</head>
<body>
<h2>Welcome To GeeksforGeeks Learning</h2>
<h5>List of available courses</h5>
<ul>
<li>Data Structures & Algorithm</li>
<li>Web Technology</li>
<li>Aptitude & Logical Reasoning</li>
<li>Programming Languages</li>
</ul>
<h5>Data Structures topics</h5>
<ol>
<li>Array</li>
<li>Linked List</li>
<li>Stacks</li>
<li>Queues</li>
<li>Trees</li>
<li>Graphs</li>
</ol>
</body>
</html>
_______________________________________________________________________________________
<!DOCTYPE html>
<html>
<head>Unordered List</head>
<body>
<h2>Grocery list</h2>
<ul>
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ul>
</body>
</html>
_______________________________________________________________________________________
HTML Ordered List
Ordered lists are used when the items need to follow a specific sequence.
In an ordered list, all list items are marked with numbers by default. An ordered list starts with
the <ol> tag, and each list item begins with the <li> tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML</title>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<h3>HTML ol tag</h3>
<p>reversed attribute</p>
<ol reversed>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
<p>start attribute</p>
<ol start="5">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
<p>type attribute</p>
<ol type="i">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
</body>
</html>
_______________________________________________________________________________________
HTML Description List
A description list is a list of terms, with a description of each term. Description lists are less
common but very useful for definitions, glossaries, or any other key-value pairs of items.
The <dl> tag defines the description list, the <dt> tag defines the term name, and the <dd>
tag describes each term.
Here, <dt> (description term) is used for the term being defined, and <dd> (description
details) is used for the description.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML</title>
</head>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- 500 gms</dd>
<dt>Milk</dt>
<dd>- 1 ltr Tetra Pack</dd>
</dl>
</body>
</html>
_______________________________________________________________________________________
HTML <sub> Tag
The <sub> tag in HTML is used to define subscript text, which appears smaller and slightly
below the normal text baseline. It is commonly used for mathematical expressions, chemical
formulas, and footnotes, like in H₂O (water) or E=mc² (Einstein’s equation).
Syntax
<sub> Contents. . . </sub>
<!DOCTYPE html>
<html>
<head>
<title>HTML sub tag</title>
</head>
<body style="text-align: center;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>Chemical Formula of Water</h2>
<h2>H<sub>2</sub>O</h2>
</body>
</html>
_______________________________________________________________________________________
<!DOCTYPE html>
<html>
<head>
<table>
HTML sub tag
</table>
</head>
<body style="text-align: center;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>Mathematical Formula</h2>
<h2>x<sub>n</sub> + y<sub>n</sub></h2>
</body>
</html>
_______________________________________________________________________________________
HTML <mark> Tag
The <mark> tag in HTML is used to define the marked text. It is used to highlight the part of
the text in a paragraph. The <mark> tag is new in HTML 5.
Syntax:
<mark> Contents... </mark>
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<h2>HTML mark Tag</h2>
<p>
<mark>GeeksforGeeks:</mark> It is a
<mark>computer science</mark> portal for geeks
</p>
</body>
</html>
_______________________________________________________________________________________
<!DOCTYPE html>
<html>
<body>
<h1>GeeksforGeeks</h1>
<h2> HTML mark Tag</h2>
<p>
<mark>GeeksforGeeks:</mark> It is a
<mark style="background-color: green; color: white;">
computer science
</mark> portal for geeks
</p>
</body>
</html>
_______________________________________________________________________________________
HTML sup Tag
The <sup> tag in HTML describes the text as a superscript text. Here the text is above the
baseline of the text and that text appears in a smaller font.
Syntax:
<sup> Content... </sup>
_______________________________________________________________________________________
HTML form Tag
The <form> tag is used to create an HTML form for user input. It serves as a container for
various input elements like text fields, checkboxes, and buttons, enabling the collection of data
for submission to a server or processing via client-side scripts.
<html>
<body>
<form action="/submit" method="POST">
<h2>User Information</h2>
<label for="fname">
First Name
</label>
<input id="fname" name="fname" placeholder="Enter your first name" required="" type="text"/>
<br/>
<br/>
<label for="lname">
Last Name
</label>
<input id="lname" name="lname" placeholder="Enter your last name" required="" type="text"/>
<br/>
<br/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
_______________________________________________________________________________________
HTML input Tag
The HTML <input> tag is used to create interactive form controls that allow users to enter data in
a webpage. It supports multiple input types such as text, password, email, number, and more for
collecting user information.
<html>
<body>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
</form>
</body>
</html>
_______________________________________________________________________________________
HTML select Tag
The HTML <select> tag is used to create a drop-down list for user input, containing <option>
tags to display the available choices. It provides functionality for selecting one or multiple
options from a list.
Syntax
<select>
<option>
</option>
...
</select>
<html>
<body>
<form>
<label for="fruits">Choose a fruit:</label>
<select id="fruits" name="fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="cherry">Cherry</option>
</select>
</form>
</body>
</html>
_______________________________________________________________________________________
HTML <marquee> Tag
The <marquee> tag in HTML creates a scrolling text or image effect within a webpage. It
allows content to move horizontally or vertically across the screen, providing a simple way to
add dynamic movement to elements. Although this tag is deprecated in HTML5, it is still
useful to understand its functionality for legacy projects.
Syntax
<marquee>
<!-- contents -->
</marquee>
The different attributes of <marquee> tag are:
Attribute Description
width provides the width or breadth of a marquee. For example width="10" or width="20%"
height provides the height or length of a marquee. For example height="20" or height="30%"
direction provides the direction or way in which your marquee will allow you to scroll. The value of this
attribute can be: left, right, up, or down
scrolldelay provides a feature whose value will be used for delaying each jump.
scrollamount provides value for speeding the marquee feature
behavior provides the scrolling type in a marquee. That scrolling can be like sliding, scrolling, or alternate
loop provides how many times the marquee will loop
bgcolor provides a background color where the value will be either the name of the color or the
hexadecimal color code.
vspace provides a vertical space, and its value can be like vspace="20" or vspace="30%"
hspace provides a horizontal space, and its value can be like hspace="20" or hspace="30%"
Scroll Up
<marquee width="60%" direction="up" height="100px">
This is a sample scrolling text that has scrolls in the upper direction.
</marquee>
___________________________________________________________________________
Scroll Up
<marquee width="60%" direction="down" height="100px">
This is a sample scrolling text that has scrolls texts to down.
</marquee>
___________________________________________________________________________
Scroll Left to Right
<marquee width="60%" direction="right" height="100px">
This is a sample scrolling text that has scrolls texts to the right.
</marquee>
___________________________________________________________________________
Scroll Right to Left
<marquee width="60%" direction="left" height="100px">
This is a sample scrolling text that has scrolls texts to the left.
</marquee>
___________________________________________________________________________
Scrolling Speed
<marquee behavior="scroll" direction="up" scrollamount="1">Slow Scrolling</marquee>
<marquee behavior="scroll" direction="right" scrollamount="12">Little Fast
Scrolling</marquee>
<marquee behavior="scroll" direction="left" scrollamount="20">Fast Scrolling</marquee>
<marquee behavior="scroll" direction="right" scrollamount="50">Very Fast
Scrolling</marquee>
___________________________________________________________________________
Blinking text within Marquee
<!DOCTYPE html>
<html>
<head>
<title>Example of a blinking text using CSS within a marquee</title>
<style>
.blink {
animation: blinker 1.5s linear infinite;
color: red;
font-family: sans-serif;
}
@keyframes blinker {
50% {
opacity: 0;
}
}
</style>
</head>
<body>
<marquee class="blink">This is an example of blinking text using CSS within a
marquee.</marquee>
</body>
</html>
___________________________________________________________________________
Design an Event Webpage using HTML and CSS
<html>
<head></head>
<body>
<header>
<h1>Welcome to GeeksforGeeks TechCon 2025</h1>
<p>The Ultimate Technology and Programming Conference</p>
</header>
<nav>
<a href="#about">About</a>
<a href="#schedule">Schedule</a>
<a href="#speakers">Speakers</a>
<a href="#contact">Contact</a>
</nav>
<section id="about">
<h2>About the Event</h2>
<p>GeeksforGeeks TechCon 2025 brings together leading minds in programming,
tech, and innovation. Join us for a day of insightful talks, hands-on workshops,
and an opportunity to network with fellow geeks and professionals from all around the world.</p>
</section>
<section id="schedule">
<h2>Event Schedule</h2>
<table>
<thead>
<tr>
<th>Time</th>
<th>Session</th>
<th>Contest</th>
</tr>
</thead>
<tbody>
<tr>
<td>9:00 AM</td>
<td>Opening Keynote</td>
<td>GeeksforGeeks Coding Plateform</td>
</tr>
<tr>
<td>10:30 AM</td>
<td>Understanding AI and Machine Learning</td>
<td>Mr. Arvind Kumar</td>
</tr>
<tr>
<td>1:00 PM</td>
<td>Lunch Break</td>
<td>-</td>
</tr>
<tr>
<td>2:00 PM</td>
<td>Exploring the Future of Cloud Computing</td>
<td>Ms. Neha Gupta</td>
</tr>
</tbody>
</table>
</section>
<section id="speakers">
<h2>Meet the Speakers</h2>
<ul>
<li><strong>Dr. Radhika Sharma:</strong> AI Expert and Researcher</li>
<li><strong>Mr. Arvind Kumar:</strong> Senior Data Scientist at TechWave</li>
<li><strong>Ms. Neha Gupta:</strong> Cloud Computing Specialist at CloudTech</li>
<li><strong>Mr. Sandeep Reddy:</strong> Full Stack Developer and Open-Source Contributor</li>
</ul>
</section>
<section id="contact">
<h2>Contact Us</h2>
<form>
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4"></textarea><br><br>
<button type="submit">Send</button>
</form>
</section>
</body>
</html>
_______________________________________________________________________________________
Event Webpage - Including CSS
<html>
<head>
<title>GeeksforGeeks TechCon 2025</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f6f9;
color: #444;
}
header {
background-color: #4CAF50;
color: white;
padding: 25px 0;
text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
header h1 {
margin: 0;
font-size: 2.5rem;
}
nav {
background-color: #343a40;
/* Dark Gray */
text-align: center;
padding: 12px 0;
}
nav a {
color: #ffffff;
text-decoration: none;
margin: 0 20px;
font-weight: 600;
font-size: 1.1rem;
letter-spacing: 0.5px;
}
nav a:hover {
color: #ff6347;
/* Tomato */
text-decoration: underline;
}
section {
padding: 25px;
margin: 20px auto;
max-width: 900px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease;
}
section:hover {
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}
section h2 {
color: #007bff;
/* Bright Blue */
font-size: 1.8rem;
margin-bottom: 15px;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 15px;
}
table th,
table td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
table th {
background-color: #f1f1f1;
font-weight: 600;
color: #333;
}
table tr:nth-child(even) {
background-color: #f9f9f9;
}
ul {
list-style: none;
padding: 0;
}
ul li {
margin: 12px 0;
font-size: 1.2rem;
}
ul li strong {
color: #007bff;
}
form {
max-width: 650px;
margin: 25px auto;
}
form label {
display: block;
margin-bottom: 8px;
font-weight: 600;
}
form input,
form textarea,
form button {
width: 100%;
padding: 14px;
margin-bottom: 18px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 1rem;
}
form input:focus,
form textarea:focus {
border-color: #007bff;
outline: none;
}
form button {
background-color: #007bff;
color: white;
font-size: 1.1rem;
font-weight: 600;
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
}
form button:hover {
background-color: #0056b3;
}
form button:active {
background-color: #004085;
}
</style>
</head>
<body>
<header>
<h1>Welcome to GeeksforGeeks TechCon 2025</h1>
<p>The Ultimate Technology and Programming Conference</p>
</header>
<nav>
<a href="#about">About</a> |
<a href="#schedule">Schedule</a> |
<a href="#speakers">Speakers</a> |
<a href="#contact">Contact</a>
</nav>
<section id="about">
<h2>About the Event</h2>
<p>GeeksforGeeks TechCon 2025 brings together leading minds in programming,
tech, and innovation. Join us for a
day of insightful talks, hands-on workshops, and an opportunity
to network with fellow geeks and
professionals from all around the world.</p>
</section>
<section id="schedule">
<h2>Event Schedule</h2>
<table>
<thead>
<tr>
<th>Time</th>
<th>Session</th>
<th>Contest</th>
</tr>
</thead>
<tbody>
<tr>
<td>9:00 AM</td>
<td>Opening Keynote</td>
<td>GeeksforGeeks Coding Platform</td>
</tr>
<tr>
<td>10:30 AM</td>
<td>Understanding AI and Machine Learning</td>
<td>Mr. Arvind Kumar</td>
</tr>
<tr>
<td>1:00 PM</td>
<td>Lunch Break</td>
<td>-</td>
</tr>
<tr>
<td>2:00 PM</td>
<td>Exploring the Future of Cloud Computing</td>
<td>Ms. Neha Gupta</td>
</tr>
</tbody>
</table>
</section>
<section id="speakers">
<h2>Meet the Speakers</h2>
<ul>
<li><strong>Dr. Radhika Sharma:</strong> AI Expert and Researcher</li>
<li><strong>Mr. Arvind Kumar:</strong> Senior Data Scientist at TechWave</li>
<li><strong>Ms. Neha Gupta:</strong> Cloud Computing Specialist at CloudTech</li>
<li><strong>Mr. Sandeep Reddy:</strong> Full Stack Developer and Open-Source Contributor</li>
</ul>
</section>
<section id="contact">
<h2>Contact Us</h2>
<form>
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4"></textarea><br><br>
<button type="submit">Send</button>
</form>
</section>
</body>
</html>
You might also like
- Understanding WordprocessingML StructureNo ratings yetUnderstanding WordprocessingML Structure4 pages
- Understanding HTML Elements and AttributesNo ratings yetUnderstanding HTML Elements and Attributes4 pages
- Taylor & Francis LaTeX Article TemplateNo ratings yetTaylor & Francis LaTeX Article Template15 pages
- Hotel Management System Project OverviewNo ratings yetHotel Management System Project Overview29 pages
- HTML Elements, Tags, and Attributes GuideNo ratings yetHTML Elements, Tags, and Attributes Guide21 pages
- Understanding manifest.json for ExtensionsNo ratings yetUnderstanding manifest.json for Extensions1 page
- Criminals Academe User Interface DesignNo ratings yetCriminals Academe User Interface Design27 pages
- Understanding Malware: Viruses, Worms, TrojansNo ratings yetUnderstanding Malware: Viruses, Worms, Trojans16 pages
- Functions in General Mathematics ModuleNo ratings yetFunctions in General Mathematics Module24 pages
- Indefinite Integration Techniques ExplainedNo ratings yetIndefinite Integration Techniques Explained2 pages
- Computer Architecture Overview and InsightsNo ratings yetComputer Architecture Overview and Insights45 pages
- Work-Based Training Overview and ObjectivesNo ratings yetWork-Based Training Overview and Objectives4 pages
- Bản sao của SOP Guide for Gigabit Passive Optical Network ZyXEL Technology PDFNo ratings yetBản sao của SOP Guide for Gigabit Passive Optical Network ZyXEL Technology PDF315 pages
- Riffraff Diesel 7.3L ICP/IPR Setup GuideNo ratings yetRiffraff Diesel 7.3L ICP/IPR Setup Guide3 pages
- Play! Pokémon Tournament Rules HandbookNo ratings yetPlay! Pokémon Tournament Rules Handbook60 pages
- Sentinels Esports: Strategies & WellnessNo ratings yetSentinels Esports: Strategies & Wellness3 pages
- Functional Safety Manual: ISM0071-13 D1000 Series Manual For Safety Related System SIL ApplicationsNo ratings yetFunctional Safety Manual: ISM0071-13 D1000 Series Manual For Safety Related System SIL Applications46 pages
- pH Measurement in Water Quality StandardsNo ratings yetpH Measurement in Water Quality Standards3 pages
- Statistical Analysis of Hypothesis TestsNo ratings yetStatistical Analysis of Hypothesis Tests8 pages
- Groundwater Quality and Saltwater IntrusionNo ratings yetGroundwater Quality and Saltwater Intrusion12 pages