0% found this document useful (0 votes)
4 views3 pages

HTML Web Page Design Experiment

The document outlines an experiment aimed at studying HTML coding and designing a web page. It explains the structure of HTML, including tags, attributes, and provides a sample HTML code for a web page dedicated to 2nd semester students. The code includes various elements such as headings, images, links, and student commitments.

Uploaded by

fakeamit22
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
0% found this document useful (0 votes)
4 views3 pages

HTML Web Page Design Experiment

The document outlines an experiment aimed at studying HTML coding and designing a web page. It explains the structure of HTML, including tags, attributes, and provides a sample HTML code for a web page dedicated to 2nd semester students. The code includes various elements such as headings, images, links, and student commitments.

Uploaded by

fakeamit22
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

Experiment no 8

Aim : To study HTML coding and design a web page


HTML Coding
HTML is the standard markup language for creating Web pages. Hypertext Markup Language, a
standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on
World Wide Web pages.

Tags and Attributes:


HTML tags are element names surrounded by angle brackets. Most HTML elements have an
opening tag and a closing tag. The only difference between opening and closing tags is the forward
slash after the opening bracket of a closing tag.

A tag may have some attributes. Attribute is a name-value pair separated by an equals (=) sign.
Attributes offer a variety of options for the contained text. They are the properties of a command of
a tag.

HTML Page Structure

Experiment Code:

<html>

<head>

<title> my first webpage</title>

</head>
<body background="C:\Users\ADMIN\Desktop\vinni html\[Link]">

<center>

<h1><b><i><font face="Arial" size="10" color="blue"> 2nd semester students

</b></i></h1></font>

<img src="C:\Users\ADMIN\Desktop\vinni html\[Link]" alt="Welcome

to web page designing"/ >

<p><font face="Arial" size="8" color="red"> Webpage for 2nd sem students

</p></font>

<h2> <font face="arial" size="8" color="blue">web page

designing </font></h2>

<hr color="blue">

<a href="[Link] <font face="Arial" size="8" color=

"violet"> BIT website Link </font> </a>

<br>

<a href="[Link] <font face="Arial" size="8" color=

"violet"> CSVTU website LINK </font> </a>

<br>

<p> <hr color="blue"> <font face="Arial" size="7" color="red">

<br> STUDENT COMMITMENT <br>

Shall be in time to the institution.<br>

Shall wear the ID card .<br>

Shall be regular and punctual to the classes and maintain 75% attendance

to be able to appear for final examination.<br>

Follow the instructions of the teacher carefully in the classrooms.<br>

Meet all deadlines of assignments, submission of projects and

lab records.<br>

Abide by the rules of various laboratories and not damaging the

equipment’s.<br>

Not to be in the canteen during working hours of the institute.<br> </font>

</p>

<h1>PDF Example</h1>
<p>Open a PDF file </p>

<a href="C:\Users\ADMIN\Desktop\vinni html\syllabus [Link]">

CLICK FOR FOC SYLLABUS </a>

</center>

</body>

</html>

Common questions

Powered by AI

The <center> tag in HTML is used to align text or other elements to the center of their containing element. Its usage impacts web design by providing a straightforward method for horizontally centering content, which can be crucial in creating balanced and visually pleasing layouts. However, it is considered outdated in HTML5, with CSS text-align properties recommended for centering more complex layouts .

Attributes in HTML tags provide additional information about elements and enhance the control developers have over website design. They are essentially name-value pairs that modify the properties of HTML elements, allowing customization such as defining the dimensions of an element, adjusting visual presentation (e.g., color, font size), or specifying the source for images and links. This flexibility enables developers to create visually appealing and functionally effective web pages. For example, the 'background' attribute in the <body> tag allows setting an image as the page's background, enhancing the user's visual experience .

Hardcoding file paths in HTML for images and documents can limit webpage portability and complicate maintenance. It ties the web page's functionality to specific file locations, posing challenges when files are moved or when the webpage is transferred to a different server or directory. This practice can lead to broken links or missing resources if the specified file paths are missing or incorrect on the new host. Using relative paths or dynamically generated links can mitigate such issues, enhancing portability and easing maintenance .

Improperly closed HTML tags can severely impact both the functionality and aesthetic of web pages. Such errors may cause elements to not display as intended or disrupt the visual layout, leading to an unappealing and potentially unusable interface. Missing or improperly closed tags can propagate errors across a web document, affecting element alignment, text formatting, and the execution of scripts or styles, thus degrading the overall user experience and potentially harming accessibility and usability .

HTML opening and closing tags are differentiated by the forward slash included in the closing tag placed after the opening bracket. The significance of these tags lies in their ability to define the start and end of an HTML element, thus indicating how the enclosed content should be displayed or interpreted by the web browser. The correct pairing of opening and closing tags ensures the proper structure of HTML documents, preventing errors in how content is displayed on web pages .

Incorporating images enhances the visual appeal and can convey information quickly and effectively, often aiding in user retention and engagement. Hyperlinks facilitate navigation by providing quick access to related resources. Together, they improve upon the user's interaction with a web page by not only making the page more visually attractive but also enabling users to efficiently find additional information and related content, thus improving the overall user experience. For example, images and links to external sites are used on the webpage design to direct users to the BIT and CSVTU websites .

HTML tags like <h1>, <p>, and <a> contribute to semantic web development by providing intrinsic meaning to content elements on a web page. The <h1> tag denotes a level-one heading, indicating a significant section heading which helps in content hierarchy. The <p> tag indicates a paragraph, marking the start and end of a text block. The <a> tag creates hyperlinks, crucial for connectivity within the web. Semantically meaningful tags enhance SEO and accessibility, allowing user agents to better interpret content and improve discoverability .

The <head> tag in an HTML document contains metadata and information about the document that is not directly displayed on the web page. It can include the document's title, stylesheets, scripts, and meta tags which are crucial for search engines to understand and index the page's content. Metadata inclusion in the <head> section assists in defining document relationships, setting character sets, and providing page descriptions, keywords, and author details, all of which enhance SEO and the web page's accessibility and functionality .

The use of <h1> and <h2> tags impacts webpage readability by defining a clear content hierarchy, making it easier for users to identify the main and subtopics. The <h1> tag typically represents the main title or heading of a page, and <h2> acts as a subheading. For SEO, these tags are crucial because search engines prioritize them when indexing content, helping to understand the page's structure and relevance to search queries. Proper use of these heading tags enhances both user experience and search-engine discoverability .

The <font> tag in HTML was used to set font size, face, and color, thus influencing the text's appearance directly within the HTML file. However, it has fallen out of favor in modern web design with the rise of CSS, which offers greater flexibility and control over styling while maintaining separation between content and presentation. The <font> tag is now considered deprecated as CSS provides a better practice for styling by enabling easier maintenance and cleaner code .

You might also like