Lab Project To Create A Simple Web Page You Will Need To Use

Html Lab Projectto Create A Simple Web Page You Will Need To Use A Tex

Html Lab Projectto Create A Simple Web Page You Will Need To Use A Text processor (Notepad) and HTML (hypertext markup language). Do NOT use Word which can create some problems by automatically formatting your work as a web page. The tags (items enclosed in < >) from HTML create the special effects that are seen on web pages when using a browser like Internet Explorer. Note: some tags require a starting and ending tag. For example: <h1>This is my home page </h1> Also if multiple tags are used to format a single item, ending tags must be written in reverse order from the starting tags.

Example: <h1><center> My First Home Page </center></h1> tag1 tag2 endtag2 endtag1 After completing the steps in the tutorial, you should be able to: create a Home Page using HTML, create headings, place text and graphics in an HTML document, use attributes such as font color with tags, and create links to other places or documents. The home page of a web site typically describes the purpose of the site and includes hyperlinks to other web sites or internal pages. When planning a home page, consider including a title, which appears on the browser’s title bar, and headings, where the first heading generally matches the page title. Headings can range from H1 to H6, with H1 being the largest.

To create a sample HTML page, start Notepad, and enter a basic structure such as:<br> <html> <head> <title>Your Name Home Page</title> </head> <body> <h1>Your Name Home Page</h1> </body> </html> and save with a filename like mysample_Lastname_Firstname.htm in All Files type. Then open it in your browser to view. You can add more content by editing the HTML source, including headings, text, images, colors, links, lists, and horizontal rules to organize your page effectively. Use tags like <p> <br> <b> <center> <hr> <a href> <ul> and <li> for different content types and formatting.

Adding images involves using the <img> tag with the src attribute pointing to your image file in the same folder. Colors can be specified using color names or hex codes, applied via the bgcolor attribute in <body> or text color through the text attribute. Horizontal lines can be customized with size, width, and color attributes. Hyperlinks are created with <a href="URL"> link text </a>. Lists are either ordered (<ol>) or unordered (<ul>) with list items (<li>). Each step involves saving your modifications and refreshing your browser to see the updates.

Paper For Above instruction

Creating a basic web page with HTML is foundational in web development. It allows users to understand document structure, content presentation, and navigation. The process begins with using simple text editors like Notepad, avoiding word processors such as Microsoft Word, which can insert unwanted formatting or meta-data that complicates HTML code interpretation.

HTML elements are marked by tags enclosed in angle brackets, each serving a specific purpose. Proper nesting and closing tags are essential to ensure the browser renders the page correctly. For example, headings are defined with <h1> to <h6> tags, with <h1> indicating the most prominent heading, typically used for titles, and remaining tags for subheadings of decreasing size. Combining tags with attributes enhances presentation control. The <center> tag, although deprecated in HTML5, can be used for centering content, or CSS styling can be applied for better practice.

Constructing a sample page involves initializing the document structure with <html>, <head>, and <body> tags. The title within the <head> section appears on the browser tab. Within the body, headings, text, images, links, and other elements are inserted. The <h1> heading serves as the main title, often centered for visibility. Content such as favorite foods, news headlines, and quotes can be added with proper tags like <h2> for secondary headings, <p> for paragraphs, and <br> for line breaks.

Inserting images requires storing image files (.gif or .jpg) in the same folder as the HTML document and referencing them with the <img src="filename.ext"> tag. To enhance visual appeal, background colors can be specified using hexadecimal color codes, such as "#00FF00" for green or "#0000FF" for blue. The <body> tag supports attributes like bgcolor and text to style your page's background and text colors.

Horizontal rules (<hr>) serve to segment content visually, with optional size, width, and color attributes to customize their appearance. Hyperlinks facilitate navigation both within and outside your site, created with <a href="URL"> link text </a>. Lists—ordered or unordered—organize information effectively and improve readability, especially when presenting multiple items or options.

Throughout the process, saving changes and refreshing the browser helps in verifying the correctness of each modification. By mastering these fundamental elements—structural tags, formatting tags, media insertion, colors, links, and lists—students develop a solid foundation for creating more complex and visually appealing web pages in future projects.

References

  • O'Reilly, D. (2012). HTML and CSS: Design and Build Websites. Wiley.
  • Duckett, J. (2014). HTML and CSS: Design and Build Websites. Wiley.
  • Shah, N. (2015). Learning Web Design: A Beginner's Guide. O'Reilly Media.
  • Heineman, G., & Fraina, A. (2018). HTML5, CSS3, and Responsive Web Design. Pearson.
  • Deitel, P., & Deitel, H. (2017). Internet & World Wide Web How to Program. Pearson.
  • W3Schools. (2023). HTML Tutorial. https://www.w3schools.com/html/
  • Mozilla Developer Network. (2023). HTML Elements Reference. https://developer.mozilla.org/en-US/docs/Web/HTML/Element
  • Vasan, N. (2016). Build Your First Website Using HTML & CSS. Tech Publications.
  • Bezan, M. (2020). Practical Web Design with HTML, CSS, & JavaScript. Packt Publishing.
  • Spencer, S. (2019). HTML & CSS: The Complete Reference. McGraw-Hill Education.