HTML

9.
<html>
<head>
<title> Exercise 1 Set A Q5</title>
</head>
<body bgcolor="red">
<center>
<font color="green" size="9"<center> Warning </font>
</center>
<marquee>Read the message</marquee>
</body>
</html>
Output :
7. !DOCTYPE html>
<html>
<head>
<title>Frameset Example</title>
</head>
<frameset cols=”25%, 75%” border=”1” bordercolor=”#000000”>
<frame src=”menu.html” name=”menu”>
<frame src=”content.html” name=”content”>
</frameset>
</html>
```
In the above example, we have created a webpage that uses the \<frame\> tag to divide the page into
two frames with a border. The frameset is defined using the \<frameset\> tag, which includes two \
<frame\> tags, one for the menu and one for the content.
The attributes for the \<frameset\> tag include:
- “cols”: This attribute specifies the width of the frames. In this example, the first frame will be 25% of
the total width and the second frame will be 75%.
- “border”: This attribute sets the thickness of the border surrounding each frame.
- “bordercolor”: This attribute sets the color of the border surrounding each frame.
The \<frame\> tags each specify a “src” attribute that specifies the URL of the webpage to be displayed
in that frame. Additionally, each frame is given a “name” attribute, which can be used to target that
frame when linking or manipulating elements on the page.
You can save the frameset code in a file with “.html” extension and then create two separate HTML files,
named “menu.html” and “content.html”, which will be loaded into each of the two frames. The
menu.html will be displayed in the first frame and content.html will be displayed in the second frame.
5.
OCTYPE html>
<html>
<head>
<title>Employee Registration Form</title>
</head>
<body>
<h1>Employee Registration Form</h1>
<form action=”submit.php” method=”post”>
<label for=”first_name”>First Name:</label>
<input type=”text” id=”first_name” name=”first_name” required><br>

<label for=”last_name”>Last Name:</label>
<input type=”text” id=”last_name” name=”last_name” required><br>
<label for=”email”>Email:</label>
<input type=”email” id=”email” name=”email” required><br>
<label for=”phone”>Phone Number:</label>
<input type=”tel” id=”phone” name=”phone” required><br>
<label for=”position”>Position:</label>
<select id=”position” name=”position” required>
<option value=””>--Select--</option>
<option value=”Manager”>Manager</option>
<option value=”Supervisor”>Supervisor</option>
<option value=”IT Support”>IT Support</option>
<option value=”Marketing”>Marketing</option>
</select><br>
<label for=”salary”>Expected Salary:</label>
<input type=”number” id=”salary” name=”salary” required><br>
<input type=”submit” value=”Submit”>
</form>
</body>
</html>
```
In this example, we have created a simple employee registration form that collects the following
information:
- First name
- Last name
- Email address
- Phone number
- Position (selected from a drop-down list of available options)
- Expected salary
Each input is created using an \<input\> tag with a unique “id” and a corresponding “name” attribute.
We also use labels to give users clear information about what each input is for. The “required” attribute
is added to each input to ensure none of the required fields are left blank.
Finally, the \<form\> tag is used to wrap around all of the inputs, with an “action” attribute that specifies
the URL of the script that will process the submitted data. In this case, that script is “submit.php”. The
“method” attribute is set to “post” to ensure the submitted data is not visible in the URL. Lastly, a
submit button is included to allow users to submit their data.
4.
!DOCTYPE html>
<html>
<head>
<title>Multimedia Tags Example</title>
</head>
<body>
<h1>Multimedia Tags Example</h1>
<h2>Video Tag</h2>
<video width=”640” height=”360” controls>
<source src=”example.mp4” type=”video/mp4”>
<source src=”example.webm” type=”video/webm”>
<source src=”example.ogg” type=”video/ogg”>

Your browser does not support the video tag.
</video>
<p><strong>Syntax:</strong> <video width=”…” height=”…” controls><br>
    <source src=”…” type=”…”><br>
    Fallback text here…<br>
</video></p>
<h2>Audio Tag</h2>
<audio controls>
<source src=”example.mp3” type=”audio/mp3”>
<source src=”example.ogg” type=”audio/ogg”>
Your browser does not support the audio element.
</audio>
<p><strong>Syntax:</strong> <audio controls><br>
    <source src=”…” type=”…”><br>
    Fallback text here…<br>
</audio></p>
<h2>Image Tag</h2>
<img src=”example.jpg” alt=”Example Image” width=”640” height=”360”>
<p><strong>Syntax:</strong> <img src=”…” alt=”…” width=”…” height=”…”></p>
<h2>Figure and Figcaption Tags</h2>
<figure>
<img src=”example.jpg” alt=”Example Image” width=”640” height=”360”>
<figcaption>Example Image</figcaption>
</figure>
<p><strong>Syntax:</strong> <figure><br>
    <img src=”…” alt=”…” width=”…” height=”…”><br>

    <figcaption>Caption text here…</figcaption><br>
</figure></p>
<h2>Embedded Content</h2>
<object width=”640” height=”360” data=”example.swf”></object>
<p><strong>Syntax:</strong> <object width=”…” height=”…”

data=”…”></object></p>
<h2>Iframe Tag</h2>
<iframe src=”example.html” width=”640” height=”360”></iframe>
<p><strong>Syntax:</strong> <iframe src=”…” width=”…” height=”…”></iframe></p>
</body>
</html>
In this example, we use the following multimedia tags:
- \<video\>: Used to embed video content on a webpage. The “width” and “height” attributes are used
to specify the dimensions of the video element, while the “controls” attribute adds a control bar to the
video player. Multiple \<source\> tags can be used to specify different video formats for different
browsers. The fallback content is displayed if the browser does not support the video tag.
- \<audio\>: Similar to \<video\>, but used for embedding audio content. The “controls” attribute adds a
control bar to the audio player. Again, multiple \<source\> tags can be used to specify different audio
formats for different browsers.
- \<img\>: Used to embed images on a webpage. The “src” attribute specifies the image file, while the
“alt” attribute is used to provide alternative text for screen readers and when the image cannot be
displayed. The “width” and “height” attributes can be used to specify the dimensions of the image.
- \<figure\> and \<figcaption\>: Used to associate an image with a caption. The \<figure\> tag wraps
around the \<img\> tag, while the caption text is placed inside the \<figcaption\> tag.
- \<object\>: Used to embed external content, such as Flash animations. The “data” attribute specifies
the location of the external file.
- \<iframe\>: Used to embed an entire webpage within another webpage. The “src” attribute specifies
the location of the embedded page, while the “width” and “height” attributes control the dimensions of
the embedded content.
2.
!DOCTYPE html>
<html>
<head>
<title>Resume</title>
<style>
Body {
Font-family: monospace;
Font-size: 14px;
H1 {
Font-size: 24px;
Text-align: center;
H2 {
Font-size: 20px;
Margin-top: 30px;
Margin-bottom: 10px;
Ul {
Margin-top: 0px;
P{
Margin-top: 0px;
Sup {
Font-size: 10px;
Vertical-align: top;
Line-height: 0;
Margin-left: 2px;
Sub {
Font-size: 10px;
Vertical-align: bottom;
Line-height: 0;
Margin-left: 2px;
</style>
</head>
<body>
<h1>John Doe</h1>
<h2>Personal Information</h2>
<ul>
<li><strong>Name:</strong> John Doe</li>
<li><strong>Date of Birth:</strong> January 1<sup>st</sup>, 1985</li>
<li><strong>Address:</strong> 123 Main St.<br> Anytown, USA</li>
<li><strong>Email:</strong> john.doe@email.com</li>
<li><strong>Phone:</strong> 555-555-5555</li>
</ul>
<h2>Summary</h2>
<p>Experienced web developer with over 5 years of experience. Skilled in HTML, CSS, JavaScript,
and PHP. Highly motivated and passionate about creating innovative and user-friendly web
applications.</p>
<h2>Education</h2>
<p><strong>Bachelor of Science in Computer Science</strong>, XYZ University, Anytown, USA,

May 2007</p>
<h2>Work Experience</h2>
<p><strong>Web Developer</strong>, ABC Company, Anytown, USA, March 2010 – Present</p>
<ul>
<li>Designed and developed responsive web applications using HTML, CSS, and
JavaScript</li>
<li>Developed and maintained backend systems using PHP and MySQL</li>
<li>Managed project timelines and communicated with stakeholders</li>
</ul>
<p><strong>Assistant Web Developer</strong>, DEF Company, Anytown, USA, May 2007 –

March 2010</p>
<ul>
<li>Assisted in the development of web applications using HTML, CSS, and

JavaScript</li>
<li>Implemented new features and fixed bugs in existing applications</li>
<li>Collaborated with senior developers to ensure code quality and maintainability</li>
</ul>
</body>
</html>
1.
<!DOCTYPE html>
<html>
<head>
<title>Text Formatting Tags</title>
</head>
<body>
<h1>Text Formatting Tags</h1>
<h2>Heading Tags</h2>
<p>The following tags are used to create headings:</p>

<ul>
<li><code><h1></code> (largest heading)</li>
<li><code><h2></code></li>
<li><code><h6></code> (smallest heading)</li>
</ul>
<h2>Paragraphs</h2>
<p>The <code><p></code> tag is used to create paragraphs:</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor semper ex in
malesuada.</p>
<h2>Formatting Text</h2>
<p>The following tags are used to format text:</p>
<ul>
<li><code><b></code> (bold)</li>
<li><code><i></code> (italic)</li>
<li><code><u></code> (underline)</li>
<li><code><strike></code> (strike through)</li>
<li><code><sup></code> (superscript)</li>
<li><code><sub></code> (subscript)</li>
</ul>
<p><b>Bold Text</b>, <i>Italic Text</i>, <u>Underlined Text</u>, <strike>Strike Through

Text</strike>, H<sub>2</sub>O, CO<sup>2</sup></p>
<h2>Horizontal Line</h2>
<p>The <code><hr></code> tag is used to create a horizontal line:</p>
<hr>
<h2>Quotations</h2>
<p>The following tags are used to create quotations:</p>

<ul>
<li><code><blockquote></code></li>
<li><code><q></code></li>
</ul>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor semper ex in
malesuada.</p>
</blockquote>
<p><q>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</q> - John Doe</p>
<h2>Lists</h2>
<p>The following tags are used to create lists:</p>
<ul>
<li><code><ul></code> (unordered list)</li>
<li><code><ol></code> (ordered list)</li>
<li><code><li></code> (list item)</li>
</ul>
<h3>Unordered List</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h3>Ordered List</h3>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
</body>
</html>

HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML

Uploaded by

Copyright:

Available Formats

9.

<title> Exercise 1 Set A Q5</title>

<font color="green" size="9"<center> Warning </font>

<marquee>Read the message</marquee>

<frameset cols=”25%, 75%” border=”1” bordercolor=”#000000”>

<frame src=”menu.html” name=”menu”>

<frame src=”content.html” name=”content”>

The attributes for the \<frameset\> tag include:

<title>Employee Registration Form</title>

<h1>Employee Registration Form</h1>

<form action=”submit.php” method=”post”>

<label for=”first_name”>First Name:</label>

<input type=”text” id=”first_name” name=”first_name” required><br>

<input type=”text” id=”last_name” name=”last_name” required><br>

<input type=”email” id=”email” name=”email” required><br>

<label for=”phone”>Phone Number:</label>

<input type=”tel” id=”phone” name=”phone” required><br>

<select id=”position” name=”position” required>

<option value=”IT Support”>IT Support</option>

<label for=”salary”>Expected Salary:</label>

<input type=”number” id=”salary” name=”salary” required><br>

<input type=”submit” value=”Submit”>

- Position (selected from a drop-down list of available options)

<title>Multimedia Tags Example</title>

<h1>Multimedia Tags Example</h1>

<video width=”640” height=”360” controls>

<source src=”example.mp4” type=”video/mp4”>

<source src=”example.webm” type=”video/webm”>

<source src=”example.ogg” type=”video/ogg”>

<p><strong>Syntax:</strong> &lt;video width=”…” height=”…” controls&gt;<br>

&nbsp;&nbsp;&nbsp;&nbsp;&lt;source src=”…” type=”…”&gt;<br>

&nbsp;&nbsp;&nbsp;&nbsp;Fallback text here…<br>

<source src=”example.mp3” type=”audio/mp3”>

<source src=”example.ogg” type=”audio/ogg”>

Your browser does not support the audio element.

<p><strong>Syntax:</strong> &lt;audio controls&gt;<br>

&nbsp;&nbsp;&nbsp;&nbsp;&lt;source src=”…” type=”…”&gt;<br>

&nbsp;&nbsp;&nbsp;&nbsp;Fallback text here…<br>

<img src=”example.jpg” alt=”Example Image” width=”640” height=”360”>

<p><strong>Syntax:</strong> &lt;img src=”…” alt=”…” width=”…” height=”…”&gt;</p>

<h2>Figure and Figcaption Tags</h2>

<img src=”example.jpg” alt=”Example Image” width=”640” height=”360”>

&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=”…” alt=”…” width=”…” height=”…”&gt;<br>

<object width=”640” height=”360” data=”example.swf”></object>

<p><strong>Syntax:</strong> &lt;object width=”…” height=”…”

<iframe src=”example.html” width=”640” height=”360”></iframe>

<p><strong>Syntax:</strong> &lt;iframe src=”…” width=”…” height=”…”&gt;&lt;/iframe&gt;</p>

In this example, we use the following multimedia tags:

<li><strong>Name:</strong> John Doe</li>

<li><strong>Date of Birth:</strong> January 1<sup>st</sup>, 1985</li>

<li><strong>Address:</strong> 123 Main St.<br> Anytown, USA</li>

<p><strong>Bachelor of Science in Computer Science</strong>, XYZ University, Anytown, USA,

<p><strong>Web Developer</strong>, ABC Company, Anytown, USA, March 2010 – Present</p>

<li>Developed and maintained backend systems using PHP and MySQL</li>

<li>Managed project timelines and communicated with stakeholders</li>

<p><strong>Assistant Web Developer</strong>, DEF Company, Anytown, USA, May 2007 –

<li>Assisted in the development of web applications using HTML, CSS, and

<li>Implemented new features and fixed bugs in existing applications</li>

<li>Collaborated with senior developers to ensure code quality and maintainability</li>

<title>Text Formatting Tags</title>

<h1>Text Formatting Tags</h1>

<p>The following tags are used to create headings:</p>

<li><code>&lt;h1&gt;</code> (largest heading)</li>

<li><code>&lt;h6&gt;</code> (smallest heading)</li>

<p><strong>Syntax:</strong> <video width=”…” height=”…” controls><br>

<source src=”…” type=”…”><br>

Fallback text here…<br>

<p><strong>Syntax:</strong> <audio controls><br>

<source src=”…” type=”…”><br>

Fallback text here…<br>

<p><strong>Syntax:</strong> <img src=”…” alt=”…” width=”…” height=”…”></p>

<img src=”…” alt=”…” width=”…” height=”…”><br>

<p><strong>Syntax:</strong> <object width=”…” height=”…”

<p><strong>Syntax:</strong> <iframe src=”…” width=”…” height=”…”></iframe></p>

<li><code><h1></code> (largest heading)</li>

<li><code><h6></code> (smallest heading)</li>

<p>The <code><p></code> tag is used to create paragraphs:</p>

<li><code><strike></code> (strike through)</li>

<p>The <code><hr></code> tag is used to create a horizontal line:</p>

<li><code><ul></code> (unordered list)</li>

<li><code><ol></code> (ordered list)</li>

<li><code><li></code> (list item)</li>