Scribd
Upload
13 views

HTML-CSS

The document contains an HTML structure for a personal web page created by Dave Gray, showcasing his goals for the year, including learning HTML and planning a vacation. It features sections for a daily schedule, places he wants to visit, and a contact form for visitors to reach out. The accompanying CSS styles the page with a dark background and light text, enhancing readability.

Uploaded by

harsha31d
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
13 views

HTML-CSS

The document contains an HTML structure for a personal web page created by Dave Gray, showcasing his goals for the year, including learning HTML and planning a vacation. It features sections for a daily schedule, places he wants to visit, and a contact form for visitors to reach out. The accompanying CSS styles the page with a dark background and light text, enhancing readability.

Uploaded by

harsha31d
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 24

8.

Index.html:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="author" content="Dave Gray">

<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="html.jpg" 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="html.jpg" alt="HTML5 Logo" title="I am learning HTML5" width="300"

height="300">

<figure>

<figcaption>An Example of HTML5 code</figcaption>

<p>

<code>&lt;h1&gt;Hello World!&lt;/h1&gt;</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="Mozilla Developer Network">

<a href="https://developer.mozilla.org/">MDN</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>

<caption>My Daily Schedule</caption>

<thead>

<tr>

<th>&nbsp;</th>

<th scope="col">Time</th>

<th scope="col">Activity</th>

</tr>

</thead>

<tbody>

<tr>

<th scope="row">Morning</th>

<td>

<time datetime="08:00">8am</time>-<time datetime="11:00">11am</time>

</td>

<td>Write Code</td>

</tr>

<tr>

<th scope="row">Break</th>

<td>

<time datetime="11:00">11am</time>-<time datetime="12:00">12pm</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 Times</td>

<td>Free Time</td>

</tr>

<tr>

<th scope="row">Night</th>

<td>Sleep</td>

</tr>

</tbody>

<tfoot>

<tr>

<td colspan="3">And that's what I do every day, 5 days a week. Just eat, sleep,
code ..and

recharge!</td>

</tr>

</tfoot>

</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="Kansas">KS</abbr> so I want visit a beach.</p>

<section>

<h3>Places I'd Like to Visit</h3>

<ul>

<li>

<p>I've heard good things about the Caribbean.</p>

<figure>

<img src="img/caribbean.jpg" alt="Caribbean Beach"

title="I want to visit a Caribbean beach." width="400" height="225" loading="lazy">

<figcaption>

Caribbean Beach Getaway

</figcaption>

</figure>

</li>

<li>

<p>I've heard good things about going here:</p>

<address>

Margaritaville Island Reserve Riviera Cancún<br>

Bahia Petempich Puerto Morelos, Mexico<br>

Colonia Morelos, México 77580

</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 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>

</article>

</main>

<hr>

<footer>

<p>
&lt;&lt;&lt; &copy; <a href="about.html">Dave Gray</a> &gt;&gt;&gt;

</p>

<p>

<a href="#">Back to Top</a>

</p>

</footer>

</body>

</html>

About.html:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="author" content="Dave Gray">

<meta name="description" content="Hi, I'm Dave Gray. This page is about me.">

<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>Hi, I'm Dave Gray</h1>

<hr>

<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium, laborum. Eum iure, ea,
corporis odit

excepturi accusamus fugit blanditiis non ipsa, quae asperiores enim esse maiores ipsum illum?
Incidunt, ducimus!

</p>

<hr>

<ul>

<li>

Download an <a href="html5.png" download>HTML5 favicon</a>

</li>

<li>

Contact me at <a href="mailto:[email protected]">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>

&lt;&lt;&lt; &copy; <a href="about.html">Dave Gray</a> &gt;&gt;&gt;

<p>

<a href="/">Back to Home</a>

</p>

</body>
</html>

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;
}

Output:

9.

Index.html:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="author" content="Dave Gray">

<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="html.jpg" alt="HTML5 Logo" title="I am learning HTML5" width="300"

height="300">

<figure>

<figcaption>An Example of HTML5 code</figcaption>

<p>

<code>&lt;h1&gt;Hello World!&lt;/h1&gt;</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="Mozilla Developer Network">

<a href="https://developer.mozilla.org/">MDN</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>

<caption>My Daily Schedule</caption>

<thead>

<tr>

<th>&nbsp;</th>

<th scope="col">Time</th>

<th scope="col">Activity</th>
</tr>

</thead>

<tbody>

<tr>

<th scope="row">Morning</th>

<td>

<time datetime="08:00">8am</time>-<time datetime="11:00">11am</time>

</td>

<td>Write Code</td>

</tr>

<tr>

<th scope="row">Break</th>

<td>

<time datetime="11:00">11am</time>-<time datetime="12:00">12pm</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 Times</td>

<td>Free Time</td>

</tr>
<tr>

<th scope="row">Night</th>

<td>Sleep</td>

</tr>

</tbody>

<tfoot>

<tr>

<td colspan="3">And that's what I do every day, 5 days a week. Just eat, sleep,
code ..and

recharge!</td>

</tr>

</tfoot>

</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="Kansas">KS</abbr> so I want visit a beach.</p>

<section>

<h3>Places I'd Like to Visit</h3>

<ul>

<li>

<p>I've heard good things about the Caribbean.</p>

<figure>
<img src="img/caribbean.jpg" alt="Caribbean Beach"

title="I want to visit a Caribbean beach." width="400" height="225" loading="lazy">

<figcaption>

Caribbean Beach Getaway

</figcaption>

</figure>

</li>

<li>

<p>I've heard good things about going here:</p>

<address>

Margaritaville Island Reserve Riviera Cancún<br>

Bahia Petempich Puerto Morelos, Mexico<br>

Colonia Morelos, México 77580

</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 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>

</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="decade">Favorite Decade:</label>

<input type="number" name="decade" id="decade" min="1950" max="2020" step="10"


value="1980">

</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="Espresso Drinks">

<option value="latte" selected>Latte</option>

<option value="cappuccino">Cappuccino</option>

<option value="cortado">Cortado</option>

<option value="americano">Americano</option>
</optgroup>

<option value="other">Other</option>

</select>

</p>

<!-- <p>

<label for="coffee">Favorite Coffee:</label>

<input type="text" name="coffee" id="coffee" list="coffee-list">

<datalist id="coffee-list">

<option value="coffee">

<option value="latte">

<option value="espresso">

<option value="cortado">

<option value="americano">

<option value="other">

</datalist>

</p> -->

</fieldset>

<br>

<fieldset>

<legend>What is your favorite food?</legend>

<p>

<input type="radio" name="food" id="tacos" value="tacos">

<label for="tacos">Tacos</label>

</p>

<p>

<input type="radio" name="food" id="pizza" value="pizza">

<label for="pizza">Pizza</label>

</p>

<p>
<input type="radio" name="food" id="other" value="other">

<label for="other">Other</label>

</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>

&lt;&lt;&lt; &copy; <a href="about.html">Dave Gray</a> &gt;&gt;&gt;

</p>

<p>

<a href="#">Back to Top</a>

</p>

</footer>

</body>

</html>

About.html:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">
<meta name="author" content="Dave Gray">

<meta name="description" content="Hi, I'm Dave Gray. This page is about me.">

<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>Hi, I'm Dave Gray</h1>

<hr>

<p>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium, laborum. Eum iure, ea,
corporis odit

excepturi accusamus fugit blanditiis non ipsa, quae asperiores enim esse maiores ipsum illum?
Incidunt, ducimus!

</p>

<hr>

<ul>

<li>

Download an <a href="html5.png" download>HTML5 favicon</a>

</li>

<li>

Contact me at <a href="mailto:[email protected]">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>

&lt;&lt;&lt; &copy; <a href="about.html">Dave Gray</a> &gt;&gt;&gt;

<p>

<a href="/">Back to Home</a>

</p>

</body>

</html>

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;

Output:

You might also like