Scribd
Upload
5 views2 pages

HTML Programs

The document contains three HTML programs: the first is a simple web page with a green background and red text titled 'My First Web Page'; the second provides information about Albert Einstein, including an image and a table of his inventions; the third is an application form that includes fields for name and standard selection.

Uploaded by

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

HTML Programs

The document contains three HTML programs: the first is a simple web page with a green background and red text titled 'My First Web Page'; the second provides information about Albert Einstein, including an image and a table of his inventions; the third is an application form that includes fields for name and standard selection.

Uploaded by

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

HTML Programs

1. HTML Program with Given Specifications


<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
<style>
body {
background-color: green;
color: red;
text-align: center;
}
h1 {
font-size: 50px;
}
</style>
</head>
<body>
<h1>My First Web Page</h1>
<hr>
</body>
</html>

2. Web Page about a Scientist


<!DOCTYPE html>
<html>
<head>
<title>Scientist Information</title>
</head>
<body>
<h1>Albert Einstein</h1>
<img src="[Link]" alt="Albert Einstein" width="300">
<p>Albert Einstein was a theoretical physicist best known for developing the theory
of relativity.
He was awarded the Nobel Prize in Physics in 1921.</p>
<table border="1">
<tr>
<th>Invention</th>
<th>Year</th>
</tr>
<tr>
<td>Theory of Relativity</td>
<td>1905</td>
</tr>
<tr>
<td>Photoelectric Effect</td>
<td>1905</td>
</tr>
</table>
</body>
</html>

3. Application Form Web Page


<!DOCTYPE html>
<html>
<head>
<title>Application Form</title>
</head>
<body>
<h1 style="text-align: center;">Application Form</h1>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>

<label>Standard:</label>
<select name="standard">
<option value="11">11th</option>
<option value="12">12th</option>
</select><br><br>

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


</form>
</body>
</html>

Common questions

Powered by AI

Embedding CSS within the <style> tag in the <head> element allows for centralizing the styling rules at the beginning of the HTML document, which benefits separating content from presentation. This approach enhances maintainability by allowing styling adjustments without touching the HTML content structure itself. In Source 1, it specifically defines the background color, text color, text-alignment, and font size, ensuring these styles apply globally across the document.

Defining alternative text, or 'alt' text for images, as seen in 'alt="Albert Einstein"', serves crucial roles in both accessibility and search engine optimization. For accessibility, it provides a textual description for users who rely on screen readers, ensuring they comprehend image content. For SEO, well-defined alt text improves image search indexing and visibility, potentially increasing traffic to the page. Omitting alt text can lead to navigational challenges for visually impaired users and missed SEO opportunities.

The 'for' attribute in the <label> tag specifies the id of the associated input field, establishing a clear relationship between the label and the input control. This connection improves accessibility, as it enhances the interaction for screen reader users by linking the label text to the input element, facilitating form navigation and usage. When the label is clicked, it also programmatically focuses on the input, improving the usability and accessibility.

The use of tables to present Albert Einstein's achievements provides a structured and organized format that enhances readability and clarity. It allows the distinct achievements to be easily separated and visually discerned, with each invention paired with its respective year in the rows and columns. This method of presentation allows the viewer to quickly comprehend the key points, thereby improving the user's experience by conveying critical historical information succinctly.

The Application Form in the web page ensures basic validation by using HTML attributes like 'required' and through controlled input types. The 'required' attribute on the 'Name' input field ensures the user must provide a value before submitting the form, preventing incomplete form submissions. This built-in HTML feature helps streamline user input validation without needing client-side scripting like JavaScript, although for more complex validation scenarios, additional scripting would be necessary.

Specifying image dimensions directly in HTML, such as width='300', helps browsers allocate space for the image before it fully loads, improving layout stability by preventing content reflow during loading. This attribute signals the browser to reserve the corresponding space, which can contribute to faster rendering and a smoother user experience without layout shifts, enhancing both performance and aesthetics. This practice is especially beneficial when images are fetched from external resources.

The styling of the <h1> elements, such as setting the font size to 50px, aims to draw immediate attention to the page's main header, enhancing the user's initial interaction with the content. Larger font sizes ensure prominence and readability from a distance but should be balanced with sufficient space and complementing elements to avoid overwhelming the viewer. Design considerations include ensuring text accessibility and adjusting design for responsiveness on smaller screens.

The <!DOCTYPE html> declaration is used to ensure that the HTML documents are rendered using the standards mode in web browsers. It helps establish that the document is written in HTML5, which is essential for consistency in how different browsers interpret the HTML content. Without this declaration, browsers might switch to quirks mode, potentially altering the way the page is displayed by applying browser-specific rules rather than following the standard HTML specifications.

In the web pages, 'text-align: center;' centers the text within its containing element, providing a neat and balanced appearance especially useful for headings and elements that benefit from alignment symmetry. However, this property only affects inline-level elements and the content inside block-level elements, not the block elements themselves. Its limitation is that it does not apply to items like floated elements or flex and grid containers, where more sophisticated layout techniques are necessary.

The provided HTML examples demonstrate limited semantic tagging, chiefly through structurally essential elements like <p> for paragraphs and <h1> for headers. While these tags contribute to defining the document's structure, the broader use of semantic tags like <article>, <section>, or <aside> is not evident. Semantic tags are vital as they improve code readability, provide meaning to the web structure, enhance accessibility, and assist search engines in understanding the content context, leading to better indexing and user engagement.

You might also like