<!
DOCTYPE html>
<html lang="en">
<head>
<title>my first web page</title>
</head>
<body>
<h1>HELLO WORLD!! </h1>
<hr>
<nav aria-label="primary-navigation">
<h2 id="primary-navigation">Primary-navigation</h2>
<ul>
<li>
<a href="#html">Learning HTML </a>
</li>
<li>
<a href="#Vacation">Planning a Vacation</a>
</li>
<li>
<a href="#Contact">ContactMe</a>
</li>
</ul>
</nav>
<hr>
<main>
<section id="html">
<h2>This is my web page </h2>
<img src="img anime .png" alt="img tag" title="I Am Learning HTML" width="300"
height="300">
<figure>
<figcaption>
An example of html5 code
<p>
<h1>hello world!</h1>
</p>
</figcaption>
</figure>
<h3>html5 </h3>
</section>
<article>
<h3>MY DAILY SCHEDULE</h3>
<P> LET ME TELL YOU HOW I ... </p>
<ol>
<li>...I learn more about web dev.</li>
<li>...I plan out my schedule.</li>
<li>...I use resources from <abbr TITLE="MOZILLA DEVELOPER NETWORK">
<a href="[Link] </a>
</abbr></li>
</ol>
<aside>
<detail>
<summary>Guess the ,<mark>no. of hours i code per day</mark></summary>
<p>I Start At <time datetime="08:00">8AM </time>and I write code for
<time datetime="PT3H">3 HOURS</time>Every Morning.</p>
</detail>
</aside>
<br>
<table>
<caption>MY DAILY SCHEDULE</caption>
<THEAD>
<details>
<tr>
<th> </th>
<th scope="col">TIME</th>
<th scope="col">Activity</th>
</tr>
</details>
</THEAD>
<tbody>
<tr>
<th scope="row">Morning</th>
<td>
<time datetime="08:00">8 AM</time>-<time
datetime="11:00">11AM</td></time>
</td>
<td> Write Code</td>
</tr>
<tr>
<th>Break</th>
<td>
<time datetime="11:00">11AM</time>-<time datetime="12:00">12AM</time>
</td>
<td> Eat Lunch</td>
</tr>
<tr>
<th scope="row">Afternoon</th>
<td>
<time datetime="12:00">12PM</time>-<time datetime="17:00">5PM</time>
</td>
<td> Study For Other Courses</td>
</tr>
<tr>
<th scope="row">Evening</th>
<td ROWSPAN="2">All Other Time</td>
<td>Free Time</td>
</tr>
<tr>
<th scope="row">Night</th>
<td>Sleep</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">That's what i do everyday, just eat-sleep-code
& recharge!</td>
</td>
</tr>
</tfoot>
</table>
</section>
</article>
</body>
<hr>
<article id="Vacation">
<H2>I Am planning for the vacations </H2>
<p>i've been workking hard and <em>really need a getaway</em>.</p>
<p>I live in <abbr title="kansas"></abbr>KS so i want visit a beach </p>
<h3>Place I'd Like To Visit </h3>
<ul>
<li><p>I've heard good things about the Caribbean</p>
<figure>
<img src="img (2).[Link]" ALT="CARAIBBEAN BEACH" title="I want to
visit caribbean beach."
width="450" height="300" loading="lazy">
<figcaption>
caribbean beach gateaway.
</figcaption>
</figure>
<p>I've heard good things about going here:</p>
<address>
Margaritaville Island Reserve Riviera Cancun <br>
Bahia Petempitch Puerto Morelos,
Mexico <br>
Colonia Morelos, Mexico 77580
</address>
<figure>
<img src="[Link] Island [Link]" alt="Cancun Vacation" title="It's
5 o'clock Somewhere!" loading="lazy">
<figcaption> A Caribbean Vacation Image</figcaption>
</figure>
</li>
</ul>
</section>
<!--TODO: Add more places -->
<div>
<span></span>
</div>
<section>
<h3>Place I Want To Avoid</h3>
<dl>
<dt>North Pole </dt>
<dd>I Hear This Is <strong>cold</strong></dd>
<dt>South Pole</dt>
<dd>This is also cold.</dd>
<dt>Mountain Tops</dt>
<dd>These are also cold.</dd>
</dl>
</section>
</aricle>
<hr>
<article od="Contact"><h2>CONTACT ME</h2>
<P>I'd really like to hear from to you!</P>
<form action="[Link]
method="get">
<fieldset>
<legend>Personal info</legend>
<p>
<label for="firstname">firstname</label>
<input type="text" name="firstname"
id="firstname" placeholder="James" autocomplete="on"
required autofocus></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]{3}"
required >
</p>
<p>
<label for="decade">Favorite decade:</label>
<input type="number" name="decade"
id="decade" min="1950" max="2020" step="10"
value="1980">
</p>
<P>
<label for="coffee">Favourite 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>
<option value="Latte" selected>Latte</option>
</optgroup>
<optgroup label="Espresso Drinks">
<option value="capechino"></option>capechino</option>
<option value="Cortado">Cortado</option>
<option value="Americano">Americano</option>
<option value="other">other</option>
</optgroup>
</select>
</p>
<!--
<p>
<label for="coffee">Favourite coffee:</label>
<input type="text" name="coffee" id="Coffee" list="coffee-list">
<datalist id="Coffee-list">
<option value="Regular coffee">
<option value="Iced coffee">
<option value="Latte">
<option value="Espresso Drinks">
<option value="capechino">
<option value="Cortado">
<option value="Americano">
<option value="other">other</option>
</datalist>
</p> -->
</fieldset>
<br>
<fieldset>
<legend>What is your favourite food?</legend>
<p>
<input type="radio" name="food" id="tacos">
<label for="tacos">TACOS</label>
</p>
<p>
<input type="radio" name="food" id="pizza">
<label for="pizza">PIZZA</label>
</p>
<p>
<input type="radio" name="food" id="other">
<label for="other">OTHER</label>
</p>
</fieldset>
<br>
<fieldset>
<legend>Do You Have Pets?</legend>
<p>
<input type="checkbox" name="pets" id="dog">
<label for="dog">DOG
</label>
</p>
<p>
<input type="checkbox" name="pets" id="cat">
<label for="cat">CAT</label>
</p>
<p>
<input type="checkbox" name="pets" id="snake">
<label for="snake">SNAKE</label>
</p>
<p>
<input type="checkbox" name="pets" id="parrot">
<label for="parrot">PARROT</label>
</p>
<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="reset">Reset</button>
<button type="submit" formaction="[Link]
formmethod="post">Post</button>
</form>
</article>
</article>
</main>
<hr>
<p>Anywhere cold. <strong>No Way!</strong></p>
<hr>
<ul>
<li>Download an <a href="[Link]"
download="#">HTML5 favicon</a></li>
<li>Contact me at <a
href="[Link] email</a>.
</li>
<li>
Dial <a hraf="telephone:+1234567890">my phone number</a>
</li>
<li>
<a href="[Link] in a new tab.
</li>
</ul>
<STYLE>
html {
font-size: 22px
}
body {
background-color: #000;
color: royalblue;
}
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;
}
</STYLE>
<hr>
<footer>
<<< © <a href="[Link]">Dave Gray</a>>>>
<p>
<a href="#">Back to top </a>
</p>
<P>
<a href="/">Back to Home</a>
</P>
</footer>
</body>
</html>