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>
<br>
<table>
<tr>
<th></th>
<th>Time</th>
<th>Activity</th>
</tr>
<tr>
<th>Morning</th>
<td>8am - 11am</td>
<td>Write Code</td>
</tr>
<tr>
<th>Break</th>
<td>11am - 12pm</td>
<td>Eat Lunch</td>
</tr>
<tr>
<th>Afternoon</th>
<td>12pm - 5pm</td>
<td>Study for Other Courses</td>
</tr>
<tr>
<th>Evening</th>
<td rowspan="2">All Other Times</td>
<td>Free Time</td>
</tr>
<tr>
<th>Night</th>
<td>Sleep</td>
</tr>
<tr>
<td colspan="3">And that's what I do every day, 5 days a week. Just eat, sleep, code ..and recharge!</td>
</tr>
</table>
</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>The code begins with the <table> tag, which is used to create an HTML table. Inside the table, we have a series of table rows denoted by the <tr> tags. Each row represents a row in the table.
Within each row, we have table cells denoted by the <th> and <td> tags. The <th> tags are used to define table headers, which are typically used for the first row or column of the table. In this case, the first row contains the table headers “Time” and “Activity”.
The remaining rows contain the actual data for each row of the table. The <td> tags are used to define table cells, which hold the data. For example, the row with “Morning” in the first column, “8am – 11am” in the second column, and “Write Code” in the third column represents the schedule for the morning period.
The rowspan attribute is used in the “Evening” row to indicate that the cell in the first column should span two rows. This is done with the value rowspan="2", allowing the “Evening” label to span across the “Evening” and “Night” rows.
Finally, the <td colspan="3"> tag is used in the last row to create a cell that spans across all three columns. This is achieved with the colspan attribute and is used to provide a description of the daily schedule.
Overall, this code structure creates a basic table with rows, columns, headers, and data, representing a daily schedule.
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;
}
table, tr, th, td, caption {
border: 1px solid #eee;
font-family: 'Courier New', Courier, monospace;
border-collapse: collapse;
padding: 0.5rem;
}table, tr, th, td, caption selectors style various elements within the table structure. They set a 1-pixel solid border color to #eee, which is a light gray color. This creates visible borders around the table, rows, headers, cells, and the caption. The font-family property sets the font to 'Courier New', Courier, monospace, which is a monospaced font often used for code or tabular data. The border-collapse property is set to collapse, which ensures that the borders between adjacent cells collapse into a single border. Finally, the padding property adds a 0.5 rem (relative em) of padding around the table elements, providing some spacing between the content and the borders.
These content was really helpful for web development career prepared by Webgapp Learning – Internship in madurai – Web Development Certification Training Course Madurai
