Index 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.">
<title>My First Web Page</title>
<link rel="icon" href="html5.png" type="image/x-icon">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<header>
<h1>My Goals for the Year</h1>
<nav aria-label="primary-navigation">
<ul>
<li>
<a href="#html">Learning HTML</a>
</li>
<li>
<a href="#vacation">Planning a Vacation</a>
</li>
</ul>
</nav>
</header>
<hr>
<main>
<article id="html">
<h2>I'm Ready to Learn HTML</h2>
<p>This is my first web page.</p>
<section>
<h3>HTML5</h3>
<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>
</section>
<section>
<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>
<aside>
<details>
<summary>Guess the <mark>number of hours</mark> I code per day</summary>
<p>I start at <time datetime="08:00">8 am</time> and I write code for <time datetime="PT3H">3
hours</time> every morning.</p>
</details>
</aside>
</section>
</article>
<hr>
<article 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>
<section>
<h3>Places 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>
<li>
<p>I've heard good things about going here:</p>
<address>
Thepakkulam<br>
Madurai Meenakshi Amman Temple<br>
Ave Mary Church
</address>
<figure>
<img src="img/vacation.jpg" alt="Cancun Vacation" title="It's 5 o'Clock Somewhere!"
width="400" height="267" loading="lazy">
<figcaption>
A Caribbean Vacation Image
</figcaption>
</figure>
</li>
</ul>
</section>
<!-- TODO: Add more places -->
<section>
<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>
</article>
</main>
<hr>
<footer>
<p>
<<< © <a href="about.html">Webgapp About</a> >>>
</p>
<p>
<a href="#">Back to Top</a>
</p>
</footer>
</body>
</html>What are Semantic Elements?
A semantic element clearly describes its meaning to both the browser and the developer.
Examples of non-semantic elements: <div> and <span> – Tells nothing about its content.
Examples of semantic elements: <form>, <table>, and <article> – Clearly defines its content.
The provided code is an HTML document that represents a simple web page. It incorporates semantic HTML, which means using HTML elements to convey the meaning and structure of the content. Here’s an explanation of the semantic HTML elements and their usage in the code:
<header>: Represents the header section of the web page containing the page title and navigation.<nav>: Represents a section that contains navigation links.<ul>: Represents an unordered list of items.<li>: Represents a list item within an unordered or ordered list.<article>: Represents a self-contained composition or article that can be independently distributed or syndicated.<section>: Represents a thematic grouping of content within an article.<h1>,<h2>,<h3>: Represents headings of different levels, where<h1>is the highest level and<h3>is the lowest level.<img>: Represents an image and includes attributes such assrc,alt,title,width, andheightto provide information about the image.<figure>: Represents a figure, typically containing an image and its caption.<figcaption>: Represents the caption or description of a<figure>element.<p>: Represents a paragraph of text.<code>: Represents a fragment of computer code.<ol>: Represents an ordered list of items.<em>: Represents emphasized or important text.<abbr>: Represents an abbreviation or acronym and includes thetitleattribute to provide the full form of the abbreviation.<aside>: Represents a section of the page content that is indirectly related to the main content.<details>: Represents a disclosure widget from which the user can obtain additional information or controls.<summary>: Represents a summary or a caption for the content of a<details>element.<time>: Represents a specific time or a range of time.<hr>: Represents a thematic break or horizontal rule.<footer>: Represents the footer section of the web page.
By using these semantic elements, the code provides clear and meaningful structure to the content, making it more accessible and understandable for both humans and search engines.
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;
}These content was really helpful for web development career prepared by Webgapp Learning – Internship in madurai – Web Development Certification Training Course Madurai
