Scribd
Upload
9 views11 pages

MSc Class Timetable HTML Example

The document contains multiple HTML code examples demonstrating various elements such as a class timetable, text formatting tags, image tags, hyperlink tags, frame tags, and a student details form with JavaScript validation. Each section illustrates the use of specific HTML tags and attributes. The examples are structured to show practical applications of HTML in web development.

Uploaded by

shalinikshalu6
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views11 pages

MSc Class Timetable HTML Example

The document contains multiple HTML code examples demonstrating various elements such as a class timetable, text formatting tags, image tags, hyperlink tags, frame tags, and a student details form with JavaScript validation. Each section illustrates the use of specific HTML tags and attributes. The examples are structured to show practical applications of HTML in web development.

Uploaded by

shalinikshalu6
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

5. Create a class timetable using table tag.

<html>

<head>

<title>Time Table</title>

</head>

<body>

<center>

<h1>Third Semester MSc Class Time Table</h1>

<table cellpadding="15" border="4" >

<tr>

<th>Day</th>

<th>10.10-11.00 </th>

<th>11.00-11.50 </th>

<th>11.50-12.40 </th>

<th>12.40-01.30 </th>

<th align="center" rowspan="7">

B<br>R<br>E<br>A<br>K<br></th>

<th>01.40-02.30 </th>

<th>02.30-03.20 </th>

<th>03.20-04.10 </th>

<th>04.10-05.00 </th>

</tr>

<tr>
<th>Monday</th>

<td align=”center”>Sub1</td>

<td align=”center”>Sub2</td>

<td align=”center”>Sub3</td>

<td align=”center”>Sub4</td>

<td colspan=”4” align=”center”>Sub5</td>

</tr>

<tr>

<th>Tuesday</th>

<td align=”center”>Sub2</td>

<td align=”center”>Sub1</td>

<td align=”center”>Sub3</td>

<td align=”center”>Sub4</td>
<td colspan=”4” align=”center”>Sub5</td>

</tr>

<tr>

<th>Wednesday</th>

<td align=”center”>Sub1</td>

<td align=”center”>Sub2</td>

<td align=”center”>Sub 3</td>

<td align=”center”>Sub4</td>

<td colspan=”4” align=”center”>WT Lab</td>

</tr>

<tr>

<th>Thursday</th>

<td colspan=”4” align=”center”>WT Lab</td>

<td align=”center”>Sub1</td>
<td align=”center”>Sub2</td>

<td align=”center”>Sub3</td>

<td align=”center”>Sub4</td>

</tr>

<tr>

<th>Friday</th>

<td colspan=”4” align=”center”>Lab</td>

<td align=”center”>sub1</td>

<td align=”center”>sub2</td>

<td align=”center”>sub3</td>

<td align=”center”>sub5</td>

</tr>

<tr>
<th>Saturday</th>

<td align=”center”>sub1</td>

<td align=”center”>sub3</td>

<td align=”center”>sub3</td>

<td align=”center”>C/BT</td>

</tr>

</table>

</center>

</body>

</html>

/////////////////////////////////

<!DOCTYPE html>

<html>

<head>

<title>Text Formatting Tags</title>

</head>

<body>
<h1>Text Formatting Tags</h1>

<h2>Heading Tags</h2>

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

<h2>Text Formatting Tags</h2>

<p>This is <b>bold</b> text.</p>

<p>This is <i>italic</i> text.</p>

<p>This is <u>underlined</u> text.</p>

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

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

<p>This is <mark>marked</mark> text.</p>

<p>This is <del>deleted</del> text.</p>

<p>This is <ins>inserted</ins> text.</p>

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

<p>This is <sup>superscripted</sup> text.</p>

<p>This is <sub>subscripted</sub> text.</p>

<h2>Text Color and Font Tags</h2>

<p><font color=”red”>This text is red.</font></p>

<p><font face=”Arial”>This text is in Arial font.</font></p>


<h2>Text Alignment</h2>

<p align=”center”>This text is centered.</p>

<p align=”right”>This text is right-aligned.</p>

<h2>Text Decoration</h2>

<p>This text has <strike>strikethrough</strike>.</p>

</body>

</html>

///////////////////

Write a HTML code to illustrate Img tag

<!DOCTYPE html>

<html>

<head>

<title>Image Tag Example</title>

</head>

<body>

<h1>Image Tag Example</h1>

<p>Here’s an image of a cat:</p>

<img src=”[Link]” alt=”A cute cat”>

<p>This image has an alternative text description.</p>

<img src=”missing_image.jpg” alt=”Image not found”>

<p>This image is resized:</p>

<img src=”[Link]” width=”300” height=”200” alt=”Landscape”>


<p>This image is resized proportionally:</p>

<img src=”[Link]” width=”200” alt=”Portrait”>

</body>

</html>

//////////////

<!DOCTYPE html>

<html>

<head>

<title>Hyperlink Tag Example</title>

</head>

<body>

<h1>Hyperlink Tag Example</h1>

<p>This is a simple hyperlink to Google:</p>

<a href=[Link]

<p>This is a hyperlink with a title attribute:</p>

<a href=[Link] title=”Search Engine”>Google


Search</a>

<p>This is a hyperlink to an email address:</p>

<a href=[Link] Email</a>

<p>This is a hyperlink to a specific location within this page:</p>

<a href=”#section2”>Go to Section 2</a>


<h2 id=”section2”>Section 2</h2>

<p>This is the content of Section 2.</p>

</body>

</html>

/////////////

<!DOCTYPE html>

<html>

<head>

<title>Frame Tag Example</title>

</head>

<body>

<frameset cols=”25%,75%”>

<frame src=”[Link]” name=”leftFrame”>

<frame src=”[Link]” name=”rightFrame”>

</frameset>

</body>

</html>

\\\\\\\\\\\\\\\\\\

Write a HTML code to create a form to accept student details. When the form
runs in the Browser fill the textboxes with data. Write JavaScript code that
verifies that all textboxes has been filled. If a textboxes has been left empty,
popup an alert indicating which textbox has been left empty.

<!DOCTYPE html>

<html>

<head>
<title>Student Details Form</title>

<script src=”[Link]”></script> </head>

<body>

<h1>Student Details Form</h1>

<form id=”studentForm” onsubmit=”return validateForm()”>

<label for=”name”>Name:</label>

<input type=”text” id=”name” name=”name” value=”John Doe”>

<label for=”rollNo”>Roll No:</label>

<input type=”text” id=”rollNo” name=”rollNo” value=”12345”>

<label for=”email”>Email:</label>

<input type=”email” id=”email” name=”email”


value=johndoe@[Link]>

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

<input type=”tel” id=”phone” name=”phone” value=”123-456-7890”>

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

</form>

</body>

</html>

JavaScript file

Function validateForm() {

Let name = [Link](“name”).value;

Let rollNo = [Link](“rollNo”).value;

Let email = [Link](“email”).value;


Let phone = [Link](“phone”).value;

If (name === “”) {

Alert(“Please enter your name.”);

Return false;

} else if (rollNo === “”) {

Alert(“Please enter your roll number.”);

Return false;

} else if (email === “”) {

Alert(“Please enter your email address.”);

Return false;

} else if (phone === “”) {

Alert(“Please enter your phone number.”);

Return false;

Return true;

Common questions

Powered by AI

The document illustrates hyperlink creation using the <a> tag with an 'href' attribute pointing to a URL. It demonstrates hyperlinks to websites, email addresses, and specific page sections. Attributes like 'title' can provide additional description. Examples include a link to Google with both direct URL and with a title attribute, and a mail link using 'mailto:' .

Day-specific classes within the HTML class timetable are designated using <td> tags nested within <tr> tags under each day heading. A consistent pattern is observed where classes for Monday through Saturday are organized into slots with a 'BREAK' row for each day except Saturday. Some days have labs assigned as a single block using colspan .

Images in an HTML document are displayed using the <img> tag, which specifies the image source with the 'src' attribute. Alternative text is provided with the 'alt' attribute for accessibility. The images can be manipulated through attributes like 'width' and 'height' to resize the dimensions, and they can be rescaled to ensure proportional changes based on the specified attributes .

The HTML student details form integrates interactivity via labeled input fields for name, roll number, email, and phone. Pre-filled values guide users by indicating expected input formats. JavaScript enhances interactivity by executing the validateForm() function, prompting alerts for any unfilled fields upon submission, ensuring completeness and user compliance with required fields .

The HTML and JavaScript interaction exemplifies key principles of web form design and usability: clear labelling, user-friendly layout with prefilled defaults, efficient feedback through real-time validation, and quick error identification. User guidance reduces input errors and enhances experience by preventing incomplete data submission .

JavaScript in the HTML code is tasked with validating form data to ensure all fields are filled out. The validateForm() function is executed upon form submission to check for emptiness of input fields like 'name', 'rollNo', 'email', and 'phone'. If any are empty, an alert notifies the user which specific field needs input, returning false to prevent form submission; otherwise, it returns true to allow submission .

The HTML code creates a class timetable using the table tag by defining a table with cellpadding and border attributes. It utilizes <th> elements for table headers specifying days and time slots, and <tr> elements for each row representing specific days. The timetable includes classes assigned within <td> elements for each time slot, and a break is indicated using a rowspan attribute for the 'BREAK' column .

Different HTML tags for text decoration modify text appearance for emphasis or style. The <strike> tag adds a strikethrough, often used to indicate obsolescence or correction. Visual emphasis can highlight important text or distinguish particular phrases. Each tag serves to visually clarify or stylize content within pages, enhancing readability and user experience .

The HTML document implements frames using the <frameset> element with 'cols' attributes specifying the division of the window into sections by percentage. The <frame> elements are used within the frameset to define source files ('left.html' and 'right.html') for each frame section, allowing content from multiple web pages to be displayed simultaneously within a single browser window .

The HTML document uses a variety of text formatting tags to apply different styles to text. These include: <b> for bold text, <i> for italic text, <u> for underlined text, <strong> for strong text, <em> for emphasized text, <mark> for marked text, <del> for deleted text, <ins> for inserted text, <small> for small text, <sup> for superscripted text, and <sub> for subscripted text .

You might also like