100% found this document useful (1 vote)
296 views3 pages

Class 10 HTML Coding Examples

The document provides 10 short and impressive HTML code examples suitable for Class 10 students. Each example demonstrates different HTML features, including styled headers, lists, tables, forms, images, videos, audio, hyperlinks, background colors, and navigation menus. These codes serve as practical exercises for learning HTML basics.
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
100% found this document useful (1 vote)
296 views3 pages

Class 10 HTML Coding Examples

The document provides 10 short and impressive HTML code examples suitable for Class 10 students. Each example demonstrates different HTML features, including styled headers, lists, tables, forms, images, videos, audio, hyperlinks, background colors, and navigation menus. These codes serve as practical exercises for learning HTML basics.
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

10 Short & Impressive HTML Codes - Class 10 NCERT

1. Attractive Page Header with Style


<!DOCTYPE html>
<html>
<head>
<style>
h1 { color: green; text-align: center; font-family: sans-serif; }
</style>
</head>
<body>
<h1>My HTML Project - Class 10</h1>
</body>
</html>

2. Stylish Ordered and Unordered List


<!DOCTYPE html>
<html>
<head>
<style>
ul { color: green; }
ol { color: blue; }
</style>
</head>
<body>
<h3>My Hobbies</h3>
<ul><li>Reading</li><li>Drawing</li></ul>
<h3>Daily Routine</h3>
<ol><li>Wake up</li><li>Study</li><li>Play</li></ol>
</body>
</html>

3. Table with Style and Borders


<!DOCTYPE html>
<html>
<head>
<style>
table { border: 2px solid black; border-collapse: collapse; }
td, th { padding: 8px; border: 1px solid black; }
</style>
</head>
<body>
<table>
<tr><th>Day</th><th>Subject</th></tr>
<tr><td>Monday</td><td>Science</td></tr>
<tr><td>Tuesday</td><td>Math</td></tr>
</table>
</body>
</html>

4. Simple Form with Labels


<!DOCTYPE html>
<html>
<body>
<form>
<label>Name:</label><input type="text"><br><br>
<label>Email:</label><input type="email"><br><br>
<input type="submit" value="Send">
</form>
</body>
</html>

5. Inserting an Image with Border


<!DOCTYPE html>
<html>
<head>
<style>
img { border: 3px solid black; }
</style>
</head>
<body>
<img src="[Link]" width="200" alt="Tree Image">
</body>
</html>

6. Embedding a Video
<!DOCTYPE html>
<html>
<body>
<video width="300" controls>
<source src="sample.mp4" type="video/mp4">
Video not supported.
</video>
</body>
</html>

7. Playing Audio with Controls


<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="music.mp3" type="audio/mpeg">
Audio not supported.
</audio>
</body>
</html>

8. Hyperlink with Target Blank


<!DOCTYPE html>
<html>
<body>
<a href="[Link] target="_blank">Visit CBSE Website</a>
</body>
</html>
9. Page with Background Color and Font
<!DOCTYPE html>
<html>
<head>
<style>
body { background-color: #ffe6e6; font-family: Verdana; }
</style>
</head>
<body>
<h2>Welcome to Class 10 Computer Page</h2>
</body>
</html>

10. Navigation Menu with Internal Links


<!DOCTYPE html>
<html>
<body>
<a href="#about">About</a> | <a href="#contact">Contact</a>
<hr>
<h2 id="about">About Me</h2>
<p>I am a student of Class 10</p>
<h2 id="contact">Contact</h2>
<p>Email: example@[Link]</p>
</body>
</html>

Common questions

Powered by AI

Styling unordered and ordered lists impacts accessibility and user engagement by enhancing readability and visual differentiation. Styled lists, using different colors for unordered (green) and ordered (blue) lists, aid users in swiftly distinguishing between list types and understanding the content structure . For accessibility, such stylistic cues, paired with semantic HTML, support screen readers in conveying the list hierarchy and importance. These enhancements in readability and accessibility foster better user engagement and content interaction rates .

A navigation menu with internal links improves a website's usability by facilitating easy navigation to different sections of a page without scrolling, enhancing user experience. For instance, links like 'About' and 'Contact' rapidly guide users to relevant sections . This increases efficiency in finding information, reducing user frustration and time spent locating content on a long page . Additionally, such menus help maintain user focus by providing quick access paths to important content areas.

CSS styling for text and element borders enhances visual hierarchy by differentiating content sections and emphasizing key information. Borders around elements like images or tables define boundaries and improve structure, making information easier to read . Meanwhile, using styles such as different font sizes, colors, and alignments for text creates a hierarchy, guiding users' attention to elements of varying importance—headers typically draw attention first due to size and styling differences . This structured approach aids in directing user focus and improving overall navigation and comprehension.

Embedding audio and video with controls in educational websites is advantageous when teaching complex concepts that benefit from multimedia explanations. Audio controls allow for play, pause, and volume adjustment, catering to different learning paces and environments . Video elements enable the demonstration of dynamic processes, such as scientific experiments or detailed tutorials, where visual representation of steps offers better comprehension compared to text . Controls empower users to interact with content flexibly, enhancing learning effectiveness by accommodating diverse learning styles.

Styling in HTML, using CSS, significantly improves the appearance and readability of web pages. For example, headers can be styled with specific colors, alignments, and font families to make them stand out and be more visually appealing, as seen with the green, centered header 'My HTML Project - Class 10' . Similarly, lists can be styled by changing their text color, such as green for unordered lists and blue for ordered lists, making them distinct and enhancing the user's ability to quickly differentiate between different types of content .

Embedding multimedia such as images, videos, and audio in web pages enhances user interaction by providing engaging, interactive content. Images with borders draw visual interest and can contextualize text content or visually break up information to maintain user attention . Videos and audio elements offer dynamic interaction potential, allowing users to watch and listen, which can make learning more accessible and engaging by catering to multiple sensory preferences . Multimedia aids in retaining user interest on the page, potentially increasing the time a user spends interacting with the content.

Using styles and borders with tables in HTML benefits data presentation by enhancing clarity and structure. Borders delineate table cells clearly, making data easier to follow across rows and columns, essential for readability in tables containing multiple data points . Padding within cells ensures text appears neatly and is readable, improving the overall presentation of data such as a schedule or a comparison chart . These styling techniques help maintain a professional appearance and ensure users can extract information efficiently.

Forms with labels improve usability and accessibility by clearly associating text with input fields, helping users understand the required information, thus reducing errors. Labels, such as 'Name:' and 'Email:' in a form, ensure that users understand what value is expected in each field . This improves accessibility for users who rely on screen readers, as the labels are read aloud, providing necessary context for the form fields they interact with . Overall, labeled forms provide a more standardized and user-friendly experience.

Using the 'target="_blank"' attribute in hyperlinks impacts website navigation by opening linked documents in a new tab or window, allowing users to maintain their place on the original page while exploring new content . This can enhance user experience by enabling multitasking and preventing the loss of a user's place or data on the original page. However, it can also potentially overwhelm users with too many open tabs, which may disrupt navigation if not managed carefully .

Background color in webpage design influences user experience by affecting mood and readability. A properly chosen background color like #ffe6e6 provides a gentle contrast to text, enhancing readability without causing eye strain . It can also set an emotional tone or theme for the webpage, supporting branding or providing a calming influence. The right background color helps tie together visual elements, ensuring a cohesive and pleasant user experience .

You might also like