André Restivo

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 &copy; 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 &copy; 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 &copy; 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>&lt;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>&gt;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="">&mdash;</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>