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>
<li>
<a href="#contact">Contact Me</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>
<hr>
<article id="contact">
<h2>Contact Me</h2>
<p>I'd really like to hear from you!</p>
<form action="https://httpbin.org/get" method="get">
<fieldset>
<legend>Personal Info</legend>
<p>
<label for="firstName">First Name:</label>
<input type="text" name="firstName" id="firstName" placeholder="Jane" autocomplete="on" required
autofocus>
</p>
<p>
<label for="lastName">Last Name:</label>
<input type="text" name="lastName" id="lastName" placeholder="Doe" autocomplete="on" required>
</p>
<p>
<label for="password">Password:</label>
<input type="password" name="password" id="password" placeholder="your secret" required>
</p>
<p>
<label for="phone">Phone:</label>
<input type="tel" name="phone" id="phone" placeholder="5555555555"
pattern="[0-9]{3}[0-9]{3}[0-9]{4}" required>
</p>
<p>
<label for="coffee">Favorite Coffee:</label>
<select name="coffee" id="coffee" multiple size="5">
<optgroup label="Coffees">
<option value="regular coffee">Regular Coffee</option>
<option value="iced coffee">Iced Coffee</option>
</optgroup>
<optgroup label="Cool Drinks">
<option value="Apple" selected>Apple</option>
<option value="Orange">Orange</option>
<option value="strawberry">Strawberry</option>
<option value="pineapple">Pineapple</option>
</optgroup>
<option value="other">Other</option>
</select>
</p>
<!-- <p>
<label for="items">Favorite Food Item:</label>
<input type="text" name="food" id="food" list="food-list">
<datalist id="food-list">
<option value="Mutton Briyani">
<option value="Chicken Briyani">
<option value="Lemon Rice">
<option value="Curd Rice">
<option value="Meals">
<option value="other">
</datalist>
</p> -->
</fieldset>
<br>
<fieldset>
<legend>Do you have pets?</legend>
<p>
<input type="checkbox" name="pets" id="dog" value="dog">
<label for="dog">Dog</label>
</p>
<p>
<input type="checkbox" name="pets" id="cat" value="cat">
<label for="cat">Cat</label>
</p>
<p>
<input type="checkbox" name="pets" id="fish" value="fish">
<label for="fish">Fish</label>
</p>
<p>
<input type="checkbox" name="pets" id="otherPet" value="otherPet">
<label for="otherPet">Other</label>
</p>
</fieldset>
<br>
<fieldset>
<legend>Send Me A Note</legend>
<label for="message">Your Message:</label>
<br>
<textarea name="message" id="message" cols="30" rows="10"
placeholder="Type your message here"></textarea>
</fieldset>
<br>
<button type="submit">Submit</button>
<button type="submit" formaction="https://httpbin.org/post" formmethod="post">Post</button>
<button type="reset">Reset</button>
</form>
</article>
</main>
<hr>
<footer>
<p>
<<< © <a href="about.html">Webgapp About</a> >>>
</p>
<p>
<a href="#">Back to Top</a>
</p>
</footer>
</body>
</html>HTML Input Types
Here are the different input types you can use in HTML:
<input type="button"><input type="checkbox"><input type="color"><input type="date"><input type="datetime-local"><input type="email"><input type="file"><input type="hidden"><input type="image"><input type="month"><input type="number"><input type="password"><input type="radio"><input type="range"><input type="reset"><input type="search"><input type="submit"><input type="tel"><input type="text"><input type="time"><input type="url"><input type="week">
Tip: The default value of the type attribute is “text”.
The provided code is an HTML form written in the markup language. It allows users to input various information and submit the form. Let’s go through the code section by section to understand its functionality:
htmlCopy code<form action="https://httpbin.org/get" method="get">
This line starts the HTML form and specifies the action attribute as “https://httpbin.org/get“, which means the form data will be sent to this URL. The method attribute is set to “get”, indicating that the form data will be appended to the URL as query parameters.
htmlCopy code<fieldset>
<legend>Personal Info</legend>
...
</fieldset>
The <fieldset> tag groups related form elements together and provides a visual grouping with a legend. In this case, it represents the section for personal information.
htmlCopy code<p>
<label for="firstName">First Name:</label>
<input type="text" name="firstName" id="firstName" placeholder="Jane" autocomplete="on" required autofocus>
</p>
This code snippet represents a single form field for the first name. The <label> tag provides a text label for the input field, and the for attribute associates the label with the corresponding input field using the id attribute. The <input> tag is used to create the input field itself, with various attributes such as type, name, id, placeholder, autocomplete, required, and autofocus.
Similar blocks of code exist for the last name, password, phone, favorite decade, favorite coffee, favorite food, and pets. Each <input> field has different attributes and types based on the desired input, such as text, password, number, radio buttons, or checkboxes.
htmlCopy code<fieldset>
<legend>Send Me A Note</legend>
<label for="message">Your Message:</label>
<br>
<textarea name="message" id="message" cols="30" rows="10" placeholder="Type your message here"></textarea>
</fieldset>
This section includes a <textarea> element where users can enter a longer text message. The cols and rows attributes specify the visible size of the textarea box.
htmlCopy code<button type="submit">Submit</button>
<button type="submit" formaction="https://httpbin.org/post" formmethod="post">Post</button>
<button type="reset">Reset</button>
These buttons determine the behavior when clicked. The first button will submit the form to the specified action URL using the GET method. The second button will submit the form to a different URL (“https://httpbin.org/post“) using the POST method. The third button resets all form fields to their default values.
Overall, this form allows users to enter personal information, select preferences, and write a message. The form data can be sent to a server for processing or utilized in other ways based on the specific implementation on the server side.
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
