<!DOCTYPE html>
<html lang="en">
<head>
<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">
</head>
<body>
<h1>Hello World!</h1>
<hr>
<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> ...I learn more about web development in webgapp.
<br> ...I plan out my schedule.
<br> ...I use resources from <abbr title="Mozilla Developer Network">MDN</abbr>.
</p>
<hr>
<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>
<address>
Webgapp<br>
AJ Complex, Ellisnagar<br>
Tamilnadu, Madurai -10
</address>
<!-- TODO: Add more places -->
<h3>Place I Want to Avoid</h3>
<p>Anywhere cold. <strong>No way!</strong></p>
<hr>
<<< © WEBGAPP >>>
</body>
</html>
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:
<!DOCTYPE html>: This is the document type declaration and specifies that the page is written in HTML5.<html lang="en">: The opening tag for the HTML document. The lang attribute specifies the language of the document (English in this case).<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.
<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> ...: 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
CSS CODE
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 madurai –
Web Development Certification Training Course Madurai
