HTML CODE
<!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 using list section tags.">
<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>My Goals for the Year</h1>
<hr>
<nav>
<ul>
<li>
<a href="#html">Learning HTML</a>
</li>
<li>
<a href="#vacation">Planning a Vacation</a>
</li>
</ul>
</nav>
<hr>
<section id="html">
<h2>I'm Ready to Learn Web designing</h2>
<p>This is my first web page.</p>
<img src="img/html_logo_300x300.png" alt="HTML5 Logo" title="I am learning Web designing course" width="300" height="300">
<figure>
<figcaption>An Example of HTML5 code</figcaption>
<p>
<code><h1>Hello World!</h1></code>
</p>
</figure>
<h3>My Daily Schedule</h3>
<p>Let me tell you how:</p>
<ol>
<li>...I learn more about web dev.</li>
<li>...I plan out my schedule.</li>
<li>...I use resources from <abbr title="webgapp learning">
<a href="https://www.webgapp.com/category/web-designing-course/">Webgapp</a>
</abbr>.</li>
</ol>
</section>
<hr>
<section id="vacation">
<h2>I Am Also Planning a Vacation</h2>
<p>I've been working hard and <em>really need a getaway</em>.</p>
<p>I live in <abbr title="Madurai">Mdu</abbr> so I want visit a Mahal.</p>
<h3>Place I'd Like to Visit</h3>
<ul>
<li>
<p>I've heard good things about the Mahal.</p>
</li> <figure>
<img src="img/mahal.jpg" alt="Mahal" title="I want to visit a Mahal."
width="400" height="225" loading="lazy">
<figcaption>
Mahal
</figcaption>
</figure>
<li>
<p>I've heard good things about going here:</p>
<address>
Thepakkulam<br>
Madurai Meenakshi Amman Temple<br>
Ave Mary Church
</address>
</li>
</ul>
<!-- TODO: Add more places -->
<h3>Places I Want to Avoid</h3>
<dl>
<dt>North India Trip</dt>
<dd>I hear this is <strong>Hot</strong>!</dd>
<dt>Rajastan</dt>
<dd>This is also Hot.</dd>
<dt>Bihar</dt>
<dd>These are also Hot.</dd>
</dl>
</section>
<hr>
<<< © <a href="about.html">WEBGAPP ABOUT</a> >>>
<p>
<a href="#">Back to Top</a>
</p>
</body>
</html>
- The
<h1>element displays the heading “My Goals for the Year”. - The
<nav>element contains an unordered list (<ul>) with two list items (<li>). Each list item is a link (<a>) that navigates to a specific section on the page. - The page is divided into two sections (
<section>): “Learning HTML” and “Planning a Vacation”. Each section has an associated ID (id) that is used in the navigation links to scroll to the respective section. - Within the “Learning HTML” section, there is an image (
<img>) displaying the HTML5 logo, and a<figure>element with a caption and an example HTML code. - There is an ordered list (
<ol>) listing three items related to the daily schedule of learning web development. - Within the “Planning a Vacation” section, there is an unordered list (
<ul>) with two items. The first item includes a paragraph (<p>) about a Mahal, and an image (<img>) of the Mahal. The second item includes an address (<address>) of a location to visit. - There is a definition list (
<dl>) with three sets of terms (<dt>) and definitions (<dd>) under the “Places I Want to Avoid” section. - The page includes a link to an “About” page and a “Back to Top” link for easy navigation.
- The page also includes horizontal rules (
<hr>) to separate different sections of content. - The final line displays a copyright symbol and a link to the “About” page.
About.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Webgapp">
<meta name="description" content="Hi, Webgapp. This page is about our company.">
<title>About Me</title>
<link rel="icon" href="html5.png" type="image/x-icon">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<h1>Webgapp</h1>
<hr>
<p>
Our passion for technology meets your business needs. We are a team of experienced IT professionals committed to empowering your digital transformation. Our goal is to provide innovative IT solutions that drive growth and improve operational efficiency for your business.
Whether you're looking for Web development, Mobile App Development, or any other IT service, we have the expertise to deliver. Our commitment to customer satisfaction and cutting-edge technology sets us apart. Let us partner with you to take your business to the next level. Contact us today to learn more."
</p>
<hr>
<ul>
<li>
Download an <a href="https://www.webgapp.com/wp-content/uploads/2023/04/webgapp-logo-edited.png" download>HTML5 favicon</a>
</li>
<li>
Contact me at <a href="mailto:random@email.com">my email address</a>.
</li>
<li>
Dial <a href="tel:+1234567890">my phone number</a>.
</li>
<li>
Open <a href="https://www.google.com/" target="_blank">Google</a> in a new tab.
</li>
</ul>
<hr>
<<< © <a href="about.html">Webgapp</a> >>>
<p>
<a href="/">Back to Home</a>
</p>
</body>
</html>CSS Code main.css
html {
font-size: 22px;
}
body {
background-color: #333;
color: whitesmoke;
}
a {
color: aliceblue;
}
a:visited {
color: lightgray;
}
a:hover, a:active {
color: #eee;
}cssCopy codehtml {
font-size: 22px;
}
html: This selector targets the<html>element.font-size: 22px;: It sets the font size of all text within the<html>element to 22 pixels.
cssCopy codebody {
background-color: #333;
color: whitesmoke;
}
body: This selector targets the<body>element.background-color: #333;: It sets the background color of the<body>element to a dark gray color represented by the hex code #333.color: whitesmoke;: It sets the text color within the<body>element to a light gray color called whitesmoke.
cssCopy codea {
color: aliceblue;
}
a: This selector targets all<a>(anchor) elements, which represent hyperlinks.color: aliceblue;: It sets the text color of all anchor elements to a color called aliceblue.
cssCopy codea:visited {
color: lightgray;
}
a:visited: This selector targets visited<a>elements.color: lightgray;: It sets the text color of visited anchor elements to a light gray color.
cssCopy codea:hover, a:active {
color: #eee;
}
a:hover, a:active: This selector targets<a>elements when they are hovered over or in the active state (when being clicked).color: #eee;: It sets the text color of hovered or active anchor elements to a lighter shade of gray represented by the hex code #eee.
In summary, this CSS code sets the font size for the entire HTML document, defines the background and text colors for the body, and styles the anchor elements with specific colors for normal, visited, hovered, and active states.
These content was really helpful for web development career prepared by Webgapp Learning – Internship in madurai – Web Development Certification Training Course Madurai
