Web page using HTML all elements #3 Web development Course


<!DOCTYPE html>
<html lang="en">

    <meta charset="UTF-8">
    <meta name="author" content="webgapp">
    <meta name="description" content="This page contains all the things I am learning how to create as I learn HTML.">
    <title>My First Web Page</title>
    <link rel="icon" href="https://www.webgapp.com/wp-content/uploads/2023/04/webgapp-logo-edited.png" type="image/x-icon">
    <link rel="stylesheet" href="main.css" type="text/css">

    <h1>Hello World!</h1>


    <h2>I'm Ready to Learn HTML</h2>
    <p>This is my first web site page.</p>

    <h3>My Daily Schedule</h3>
    <p>Let me tell you how:
        <br>&nbsp;&nbsp;&nbsp;...I learn more about web development in webgapp.
        <br>&nbsp;&nbsp;&nbsp;...I plan out my schedule.
        <br>&nbsp;&nbsp;&nbsp;...I use resources from <abbr title="Mozilla Developer Network">MDN</abbr>.


    <h2>I Am Also Planning a Vacation</h2>
    <p>I've been working hard and <em>really need a getaway</em>.</p>
    <p>My office in <abbr title="Madurai">Mdu</abbr> so I want visit a Mahal.</p>

    <h3>Place I'd Like to Visit</h3>
    <p>I've heard good things about the Kodaikanal.</p>
    <p>I've heard good things about going here:</p>
        AJ Complex, Ellisnagar<br>
        Tamilnadu, Madurai -10

    <!-- TODO: Add more places -->
    <h3>Place I Want to Avoid</h3>
    <p>Anywhere cold. <strong>No way!</strong></p>

    &lt;&lt;&lt; &copy; WEBGAPP &gt;&gt;&gt;


This is an HTML code for a simple web page about all elements are using for create websites. Let’s go through each part of the code to understand its purpose and structure:

  1. <!DOCTYPE html>: This is the document type declaration and specifies that the page is written in HTML5.
  2. <html lang="en">: The opening tag for the HTML document. The lang attribute specifies the language of the document (English in this case).
  3. <head>: The head section of the HTML document contains meta-information about the page and external resources.
    • <meta charset="UTF-8">: Sets the character encoding of the document to UTF-8, which supports a wide range of characters.
    • <meta name="author" content="webgapp">: Specifies the author of the web page.
    • <meta name="description" content="...">: Provides a brief description of the web page.
    • <title>My First Web Page</title>: Sets the title of the web page, which is displayed in the browser’s title bar.
    • <link rel="icon" href="webgapp.com" type="image/x-icon">: Sets the favicon for the page, which is the small icon displayed in the browser’s tab.
    • <link rel="stylesheet" href="main.css" type="text/css">: Links an external CSS file named “main.css” to style the HTML elements.
  4. <body>: The body section contains the visible content of the web page.
    • <h1>Hello World!</h1>: A level 1 heading that displays the text “Hello World!”.
    • <hr>: Inserts a horizontal line to separate content sections.
    • <h2>I'm Ready to Learn HTML</h2>: A level 2 heading with the text “I’m Ready to Learn HTML”.
    • <p>This is my first web site page.</p>: A paragraph element with the text “This is my first web site page.”
    • <h3>My Daily Schedule</h3>: A level 3 heading with the text “My Daily Schedule”.
    • <p>Let me tell you how:</p>: A paragraph element with the text “Let me tell you how:”.
    • <br>&nbsp;&nbsp;&nbsp;...: Line breaks and non-breaking spaces used for indentation.
    • <abbr title="Mozilla Developer Network">MDN</abbr>: An abbreviation element with the full form “Mozilla Developer Network” and a title attribute providing additional information.
    • <h2>I Am Also Planning a Vacation</h2>: Another level 2 heading with the text “I Am Also Planning a Vacation”.
    • <p>I've been working hard and <em>really need a getaway</em>.</p>: A paragraph element with emphasis on the word “really” using the <em> element.
    • <p>My office in <abbr title="Madurai">Mdu</abbr> so I want visit a Mahal.</p>: A paragraph element with an abbreviation “Mdu” and a title attribute containing the full form “Madurai”.
    • <h3>Place I'd Like to Visit</h3>: A level 3 heading with the text “Place I’d Like to Visit”.
    • <p>I've heard good things about the Kodaikanal.</p>: A paragraph element with the text “I’ve heard good things about the Kodaikanal”.
    • <p>I've heard good things about going here:</p>: Another paragraph element with the text “I’ve heard good things about going here:”.
    • <address>...</address>: this tag available for address


html {
    font-size: 22px;

body {
    background-color: #333;
    color: whitesmoke;

Certainly! This code is used to change the appearance of a web page. Let’s break it down in an easy-to-understand way:

cssCopy codehtml {
    font-size: 22px;
  • html: This line refers to the entire web page.
  • font-size: 22px;: It sets the size of the text on the web page to 22 pixels.
cssCopy codebody {
    background-color: #333;
    color: whitesmoke;
  • body: This line refers to the main content area of the web page.
  • background-color: #333;: It changes the background color of the main content area to a dark gray color.
  • color: whitesmoke;: It changes the color of the text inside the main content area to a light gray color.

In simple terms, this code makes the text on the web page larger (font size: 22 pixels) and gives the main content area a dark gray background with light gray text color.

These content was really helpful for web development career prepared by Webgapp Learning – Internship in maduraiWeb Development Certification Training Course Madurai

Are you looking for a Web Development Certification Training Course and Internship in Madurai?

Join our team and gain valuable experience through our internship program designed specifically for computer science engineering students. Enhance your skills, expand your knowledge, and carve a successful career path in the dynamic world of web development. Take advantage of this opportunity in Madurai and visit our website today to learn more and embark on a journey towards professional growth and expertise.

For More Details

+91 97879 68375

-> You should bring your own laptop during the Course

60 Hrs Practical Learning

Who can enroll on this course?

  • Graduates or under-graduates.
  • Diploma holders with basic computer knowledge
  • Business Entrepreneurs

After the completion of the web design & development course here at Webgapp, you can become a professional in the IT sector and your job role could be any one of the following –

  • Front end web designer
  • Back end web developer
  • Web application Designer
  • Design and layout analyst
  • Web developer
  • Web Designer

The Web Designing Course in Madurai at Webgapp shows the right path to students and professionals who have an eye for learning the web designing course. 

  • Real-Time Experts as Trainers
  • LIVE Project
  • Certification
  • Affordable Fees