<!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