HTML Solutions
1. Online Newspaper
You can also download the complete solution.
Main Page:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Online Newspaper</title>
<meta charset="utf-8">
</head>
<body>
<header>
<h1><a href="all.html">Online Newspaper</a></h1>
<a href="all.html"><img class="logo" src="logo.png" alt="ON Logo"></a>
</header>
<nav>
<ul>
<li><a href="section.html">Local</a></li>
<li><a href="section.html">Politics</a></li>
<li><a href="section.html">Sports</a></li>
<li><a href="section.html">Business</a></li>
</ul>
</nav>
<main>
<article class="news">
<h2>Diam Volutpat</h2>
<img src="https://picsum.photos/300/200?a" alt="A beautiful random image">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Odio pellentesque diam
volutpat commodo sed.</p>
<p>At volutpat diam ut venenatis tellus in metus. Egestas diam in arcu cursus
euismod quis viverra nibh cras. Elit pellentesque habitant morbi tristique
senectus et.</p>
<footer>
<span class="author">John Doe</span>
<time datetime="2022-01-10T10:00">10th January 2022, 10:00</time>
<a href="article.html">Read More</a>
</footer>
</article>
<article class="news">
<h2>Cursus Risus</h2>
<img src="https://picsum.photos/300/200?b" alt="A beautiful random image">
<p>Gravida arcu ac tortor dignissim convallis. Id faucibus nisl tincidunt eget
nullam non nisi est. Vitae congue eu consequat ac felis donec et odio
pellentesque.</p>
<p>Eget mi proin sed libero enim sed faucibus turpis in. Aliquam id diam
maecenas ultricies mi eget mauris pharetra.</p>
<footer>
<span class="author">Jane Doe</span>
<time datetime="2022-01-10T09:00">9th January 2022, 9:00</time>
<a href="article.html">Read More</a>
</footer>
</article>
<article class="news">
<h2>Fringilla Ut</h2>
<img src="https://picsum.photos/300/200?c" alt="A beautiful random image">
<p>Convallis convallis tellus id interdum. Massa sapien faucibus et molestie
ac feugiat sed. Lobortis elementum nibh tellus molestie nunc non blandit.
Mattis molestie a iaculis at erat pellentesque adipiscing.</p>
<p>Viverra mauris in aliquam sem fringilla ut morbi tincidunt. Malesuada fames
ac turpis egestas sed. Ac odio tempor orci dapibus ultrices in iaculis.</p>
<footer>
<span class="author">John Doe</span>
<time datetime="2022-01-09T08:00">9th January 2022, 8:00</time>
<a href="article.html">Read More</a>
</footer>
</article>
</main>
<footer>
<p>Copyright © Fake News, 2022</p>
</footer>
</body>
</html>
Section Page:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Online Newspaper</title>
<meta charset="utf-8">
</head>
<body>
<header>
<h1><a href="all.html">Online Newspaper</a></h1>
<h2><a href="all.html">Sports</a></h2>
<a href="all.html"><img class="logo" src="logo.png" alt="ON Logo"></a>
</header>
<nav>
<ul>
<li><a href="section.html">Local</a></li>
<li><a href="section.html">Politics</a></li>
<li><a href="section.html">Sports</a></li>
<li><a href="section.html">Business</a></li>
</ul>
</nav>
<main>
<article class="news">
<h2>Diam Volutpat</h2>
<img src="https://picsum.photos/300/200?a" alt="A beautiful random image">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Odio pellentesque diam
volutpat commodo sed.</p>
<p>At volutpat diam ut venenatis tellus in metus. Egestas diam in arcu cursus
euismod quis viverra nibh cras. Elit pellentesque habitant morbi tristique
senectus et.</p>
<footer>
<span class="author">John Doe</span>
<time datetime="2022-01-10T10:00">10th January 2022, 10:00</time>
<a href="article.html">Read More</a>
</footer>
</article>
<article class="news">
<h2>Cursus Risus</h2>
<img src="https://picsum.photos/300/200?b" alt="A beautiful random image">
<p>Gravida arcu ac tortor dignissim convallis. Id faucibus nisl tincidunt eget
nullam non nisi est. Vitae congue eu consequat ac felis donec et odio
pellentesque.</p>
<p>Eget mi proin sed libero enim sed faucibus turpis in. Aliquam id diam
maecenas ultricies mi eget mauris pharetra.</p>
<footer>
<span class="author">Jane Doe</span>
<time datetime="2022-01-10T09:00">9th January 2022, 9:00</time>
<a href="article.html">Read More</a>
</footer>
</article>
<article class="news">
<h2>Fringilla Ut</h2>
<img src="https://picsum.photos/300/200?c" alt="A beautiful random image">
<p>Convallis convallis tellus id interdum. Massa sapien faucibus et molestie
ac feugiat sed. Lobortis elementum nibh tellus molestie nunc non blandit.
Mattis molestie a iaculis at erat pellentesque adipiscing.</p>
<p>Viverra mauris in aliquam sem fringilla ut morbi tincidunt. Malesuada fames
ac turpis egestas sed. Ac odio tempor orci dapibus ultrices in iaculis.</p>
<footer>
<span class="author">John Doe</span>
<time datetime="2022-01-09T08:00">9th January 2022, 8:00</time>
<a href="article.html">Read More</a>
</footer>
</article>
</main>
<footer>
<p>Copyright © Fake News, 2022</p>
</footer>
</body>
</html>
Article Page:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Online Newspaper</title>
<meta charset="utf-8">
</head>
<body>
<header>
<h1><a href="all.html">Online Newspaper</a></h1>
<a href="all.html"><img class="logo" src="logo.png" alt="ON Logo"></a>
</header>
<nav>
<ul>
<li><a href="section.html">Local</a></li>
<li><a href="section.html">Politics</a></li>
<li><a href="section.html">Sports</a></li>
<li><a href="section.html">Business</a></li>
</ul>
</nav>
<main>
<article class="news">
<h2>Diam Volutpat</h2>
<img src="https://picsum.photos/300/200?a" alt="A beautiful random image">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Odio pellentesque
diam volutpat commodo sed.</p>
<p>At volutpat diam ut venenatis tellus in metus. Egestas diam in arcu cursus
euismod quis viverra nibh cras. Elit pellentesque habitant morbi tristique
senectus et.</p>
<p>Gravida arcu ac tortor dignissim convallis. Id faucibus nisl tincidunt
eget nullam non nisi est. Vitae congue eu consequat ac felis donec et
odio pellentesque.</p>
<p>Eget mi proin sed libero enim sed faucibus turpis in. Aliquam id diam
maecenas ultricies mi eget mauris pharetra.</p>
<p>Convallis convallis tellus id interdum. Massa sapien faucibus et molestie
ac feugiat sed. Lobortis elementum nibh tellus molestie nunc non blandit.
Mattis molestie a iaculis at erat pellentesque adipiscing.</p>
<p>Viverra mauris in aliquam sem fringilla ut morbi tincidunt. Malesuada fames
ac turpis egestas sed. Ac odio tempor orci dapibus ultrices in iaculis.</p>
<footer>
<span class="author">John Doe</span>
<time datetime="2022-01-10T10:00">10th January 2022, 10:00</time>
<a href="article.html">Read More</a>
</footer>
<section id="comments">
<h3>Comments</h3>
<article class="comment">
<h4>Aliquam Etiam</h4>
<p>Aliquam etiam erat velit scelerisque in. Eget gravida cum sociis natoque
penatibus et magnis dis parturient.</p>
<p>Accumsan tortor posuere ac ut consequat semper. Pellentesque elit eget
gravida cum sociis natoque.</p>
<footer>
<span class="user">@marydoe</span>
<time datetime="2022-01-10T10:11">10th January 2022, 10:11</time>
</footer>
</article>
<article class="comment">
<h4>Habitant Morbi</h4>
<p>Habitant morbi tristique senectus et netus et. Ultrices mi tempus imperdiet
nulla malesuada pellentesque.</p>
<p>Quam vulputate dignissim suspendisse in est ante in. Netus et malesuada
fames ac turpis. Ac feugiat sed lectus vestibulum mattis. Ornare massa eget
egestas purus viverra. Lobortis feugiat vivamus at augue.</p>
<footer>
<span class="user">@carldoe</span>
<time datetime="2022-01-10T10:07">10th January 2022, 10:07</time>
</footer>
</article>
<form>
<h3>Your Voice</h3>
<label>
Title:
<input type="text">
</label>
<label>
Comment:
<textarea name="comment" rows="6" cols="60"></textarea>
</label>
<label>
Username:
<input type="text">
</label>
<button type="submit">Send</button>
</form>
</section>
</article>
</main>
<footer>
<p>Copyright © Fake News, 2022</p>
</footer>
</body>
</html>
2. Table
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Table</title>
<meta charset="utf-8">
<style>
table {
border-collapse: collapse;
}
th, td {
border:1px solid;
padding: 0.5em;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="2" rowspan="2">Student</th>
<th colspan="4">Exam</th>
<th colspan="4">2nd Exam</th>
<th colspan="2" rowspan="2">Final Grade</th>
</tr>
<tr>
<th>Q1</th>
<th>Q2</th>
<th>Q3</th>
<th rowspan="2">Grade</th>
<th>Q1</th>
<th>Q2</th>
<th>Q3</th>
<th rowspan="2">Grade</th>
</tr>
<tr>
<th>Code</th>
<th>Name</th>
<td>8</td>
<td>7</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<th>NR</th>
<th>R</th>
</tr>
<tr>
<td>80549061</td>
<td>John</td>
<td>70%</td>
<td>100%</td>
<td>100%</td>
<td>17.6</td>
<td colspan="4"></td>
<td>17.6</td>
<td>18</td>
</tr>
<tr>
<td>80549062</td>
<td>Mary</td>
<td>10%</td>
<td>50%</td>
<td>50%</td>
<td>6.8</td>
<td>100%</td>
<td>100%</td>
<td>50%</td>
<td>16.5</td>
<td>16.5</td>
<td>17</td>
</tr>
<tr>
<td>80549063</td>
<td>Claire</td>
<td colspan="4"></td>
<td>50%</td>
<td>50%</td>
<td>50%</td>
<td>10.0</td>
<td>10.0</td>
<td>10</td>
</tr>
</table>
</body>
</html>
3. Form
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Form</title>
<meta charset="utf-8">
</head>
<body>
<form>
<label>Name:
<input type="text" name="name" required>
</label>
<fieldset>
<legend>Age</legend>
<label><18 <input name="age" type="radio" value="-18"></label>
<label>19-35 <input name="age" type="radio" value="19-35"></label>
<label>36-48 <input name="age" type="radio" value="36-48"></label>
<label>>49 <input name="age" type="radio" value="49-"></label>
</fieldset>
<label>Profession:
<input name="profession" list="professions">
<datalist id="professions">
<option>Engineer</option>
<option>Doctor</option>
<option>Teacher</option>
</datalist>
</label>
<label>Country:
<select name="country" required>
<option value="">—</option>
<option value="pt">Portugal</option>
<option value="br">Brazil</option>
<option value="dk">Denmark</option>
</select>
</label>
<fieldset>
<legend>Interests</legend>
<label>Sports<input type="checkbox" name="interest" value="sports"></label>
<label>Books<input type="checkbox" name="interest" value="books"></label>
<label>Cinema<input type="checkbox" name="interest" value="cinema"></label>
<label>Music<input type="checkbox" name="interest" value="music"></label>
</fieldset>
<label>How did you find about this site?<textarea name="how"></textarea></label>
<button type="submit">Send</button>
</form>
</body>
</html>