4
\$\begingroup\$

I'm completely new at programming and have started to study computer science this fall. Our first lab is going to require us to make a very simple web page like the picture LAB attached. I was wondering if I could get some good critique on my HTML code and learn some best practices while I'm at it. 

<!DOCTYPE html>
<html>

<title> EECS1012 – Lab 1 </title>

<body>

<h1> About Alen Harriet </h1>

<p> Passionate self-learner. Taking a CS Degree to learn more formal materials like Operating Systems and Computer Architecture, and to have strong fundamentals. My dream is to hopefully work for Google someday. </p>

<hr> 

<h2> My IP address: 192.XXX.XX.XX </h2>

<hr>

<h2> Courses I'm taking this semester. </h2>
  <ul>
    <li> EECS 1012 </li>
    <li> EECS 1001 </li>
    <li> FA VISA 2065 </li>
    <li> AP GEOG 2060</li>
  </ul>

<hr>

<h2> My weekly timetable </h2>

<table style ="width: 100%">
  <tr> 
    <th> Time </th>
    <th> Monday </th>
    <th> Tuesday </th>
    <th> Wednesday </th>
    <th> Thursday </th>
    <th> Friday </th>
  </tr>
  <tr>
    <td> 9am </td>
  </tr>
  <tr>
    <td> 10am </td>
  </tr>
  <tr>
    <td> 11am </td>
  </tr>
    <td> noon </td>
  <tr>
    <td> 1:30pm </td>
      <td>  LE EECS 1012 </td>
    <td> </td>
    <td> FA VISA 2065 </td>
  </tr>
  <tr>
    <td> 2:30pm </td>
    <td>  LE EECS 1012 </td>
    <td> </td>
    <td> FA VISA 2065 </td>
  </tr>
  <tr>
    <td> 3:30pm </td>
    <td>  LE EECS 1012 </td>
    <td> </td>
    <td> FA VISA 2065 </td>
  </tr>
  <tr>
    <td> 4:30pm </td>
    <td>  LE EECS 1012  LE EECS 1001 </td>
    <td> </td>
    <td> FA VISA 2065 </td>
  </tr>
  <tr> 
    <td> 5:30pm </td>
    <td>  LE EECS 1001  LE EECS 1012 </td>
    <td> </td>
    <td> </td>
    <td> AP GEOG 2060</td>
  </tr>
  <tr>
    <td> 6:30pm </td>
    <td>  LE EECS 1012 </td>
    <td> </td>
    <td> </td>
    <td> AP GEOG 2060</td>
  </tr>
  <tr>
    <td> 7:30pm </td>
    <td>  LE EECS 1012 </td>
    <td> </td>
    <td> </td>
    <td> AP GEOG 2060</td>
  </tr>
</table>

<hr>

<h2> My Two Favourite Foods - With Links </h2>
  <a href="https://en.wikipedia.org/wiki/Pizza"><img src=https://jimsplacepizza.com/wp-content/uploads/2014/05/image-1-1.jpeg height="300" width="300"></a>
  <a href="https://en.wikipedia.org/wiki/Buffalo_wing"><img src=C:\Users\Ali Haider\Pictures\buffalo-wings-640.jpg height="300" width="300"></a>

</body>

</html>
\$\endgroup\$
1
  • 2
    \$\begingroup\$ where is this "like the picture LAB attached"....? \$\endgroup\$
    – Sᴀᴍ Onᴇᴌᴀ ♦
    Commented Sep 15, 2017 at 22:25

3 Answers 3

Reset to default
3
\$\begingroup\$

It's good to validate HTML code on https://validator.w3.org/, it can spot interesting bugs, for example that <td> noon </td> is outside of a <tr></tr> here:

  <tr>
    <td> 11am </td>
  </tr>
    <td> noon </td>
  <tr>
    <td> 1:30pm </td>
      <td>  LE EECS 1012 </td>
    <td> </td>
    <td> FA VISA 2065 </td>
  </tr>

And that \ is not allowed as path separator in the src attribute of img tags, as it is here:

  <a href="https://en.wikipedia.org/wiki/Buffalo_wing"><img src=C:\Users\Ali Haider\Pictures\buffalo-wings-640.jpg height="300" width="300"></a>

The other warnings are interesting too, about the inconsistent number of columns in table rows.

\$\endgroup\$
2
\$\begingroup\$

Sometimes you might be surprised that your elements do not look the same when viewed in different browsers (eg. different line heights, weird box-sizing, etc.).

One neat trick to avoid this is to include small snippet of CSS called reset stylesheet.

Usual way to do that is to include it as a separate file - eg. <link rel="stylesheet" type="text/css" href="path/to/your/stylesheet.css"> or if it is small enough, to inline it - just wrap your code in style tags in your HTML document.

There are various reset stylesheets you can find online, but one of the best is normalize.css. I suggest you check it out.

\$\endgroup\$
0
\$\begingroup\$

janos♦ has a good points- using the validator is a good idea. In addition to the error that there are table cells outside of a row, there are also warnings that the table rows don't all have the same number of cells :

Warning: A table row was 1 columns wide, which is less than the column count established by the first row (6).

While many browsers should still display the table as expected, there may be some browsers that would displayed it in a strange fashion.

The unordered list usage (i.e. <ul>, <li>) seems fine, as there is a list of classes to display.

There are some handy browser tools for inspecting HTML. For instance, for Firefox there is the Web developer toolbar, which is also available for Chrome. In the screenshot below, I used the Outline table cells to show where the table cells are. Using that, it might be simple to find which rows have fewer cells than the maximum.

FF outline table cells

Most browsers won't show an error in that case but it could lead to unexpected results, depending on how the rendering engine decides to handle the code.

Many developers in today's age feel that HTML table tags are antiquated - especially if a responsive design is desired (e.g. for various platforms - desktop, mobile, tablet, etc.) , and that a better approach is to use other elements (e.g. <div> tags) and style them using CSS like table elements using display table styles. There are numerous resources - e.g. this one from Widsm Labs.

In the example below, the <table>, <tr>, <th> and <td> tags have all been converted to <div> tags with an equivalent class attribute.

.table {
  display: table;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
}
.header {
  font-weight: bold;
}
<h1> About Alen Harriet </h1>

<p> Passionate self-learner. Taking a CS Degree to learn more formal materials like Operating Systems and Computer Architecture, and to have strong fundamentals. My dream is to hopefully work for Google someday. </p>

<hr> 

<h2> My IP address: 192.XXX.XX.XX </h2>

<hr>

<h2> Courses I'm taking this semester. </h2>
  <ul>
    <li> EECS 1012 </li>
    <li> EECS 1001 </li>
    <li> FA VISA 2065 </li>
    <li> AP GEOG 2060</li>
  </ul>

<hr>

<h2> My weekly timetable </h2>

<div class="table">
  <div class="row"> 
    <div class="header cell"> Time </div>
    <div class="header cell"> Monday </div>
    <div class="header cell"> Tuesday </div>
    <div class="header cell"> Wednesday </div>
    <div class="header cell"> Thursday </div>
    <div class="header cell"> Friday </div>
  </div>
  <div class="row">
    <div class="cell"> 9am </div>
  </div>
  <div class="row">
    <div class="cell"> 10am </div>
  </div>
  <div class="row">
    <div class="cell"> 11am </div>
  </div>
  <div class="row">
    <div class="cell"> noon </div>
  </div>
  <div class="row">
    <div class="cell"> 1:30pm </div>
      <div class="cell">  LE EECS 1012 </div>
    <div class="cell"> </div>
    <div class="cell"> FA VISA 2065 </div>
  </div>
  <div class="row">
    <div class="cell"> 2:30pm </div>
    <div class="cell">  LE EECS 1012 </div>
    <div class="cell"> </div>
    <div class="cell"> FA VISA 2065 </div>
  </div>
  <div class="row">
    <div class="cell"> 3:30pm </div>
    <div class="cell">  LE EECS 1012 </div>
    <div class="cell"> </div>
    <div class="cell"> FA VISA 2065 </div>
  </div>
  <div class="row">
    <div class="cell"> 4:30pm </div>
    <div class="cell">  LE EECS 1012  LE EECS 1001 </div>
    <div class="cell"> </div>
    <div class="cell"> FA VISA 2065 </div>
  </div>
  <div class="row"> 
    <div class="cell"> 5:30pm </div>
    <div class="cell">  LE EECS 1001  LE EECS 1012 </div>
    <div class="cell"> </div>
    <div class="cell"> </div>
    <div class="cell"> AP GEOG 2060</div>
  </div>
  <div class="row">
    <div class="cell"> 6:30pm </div>
    <div class="cell">  LE EECS 1012 </div>
    <div class="cell"> </div>
    <div class="cell"> </div>
    <div class="cell"> AP GEOG 2060</div>
  </div>
  <div class="row">
    <div class="cell"> 7:30pm </div>
    <div class="cell">  LE EECS 1012 </div>
    <div class="cell"> </div>
    <div class="cell"> </div>
    <div class="cell"> AP GEOG 2060</div>
  </div>
</div>

<hr>

<h2> My Two Favourite Foods - With Links </h2>
  <a href="https://en.wikipedia.org/wiki/Pizza"><img src=https://jimsplacepizza.com/wp-content/uploads/2014/05/image-1-1.jpeg height="300" width="300"></a>
  <a href="https://en.wikipedia.org/wiki/Buffalo_wing"><img src=C:\Users\Ali Haider\Pictures\buffalo-wings-640.jpg height="300" width="300"></a>

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.