Unit 5 - Elements
First, what is in this unit and what I refer to as "elements" isn't the real definition of a HTML element. I simply am going to refer to these commonly used HTML tags and structures as elements to keep things easy. Don't worry, there aren't too many, but these are very common on websites. Be aware that this unit is a jump in difficulty and I cannot explain every single aspect of how to create these elements. I will explain the basic idea and help label parts of the coding. Figuring out what certain lines of code creates or changes certain parts of the outcome is up to you. My suggestion is to copy the code and play around with one attribute at a time to slowly learn what each does. Learning coding is very self-driven!

Let's start with something many people want on a more complex website: tabs. It allows for multiple pages of content without forcing people to scroll and can add complexity.

I will show you 3 ways you can make tabs. All three can act in similar ways but are different and can be more useful in different situations. I will go over what method is most practical in Unit 6.

First we have a method that I'll call HREF Tabs. Basically, you have all your content on one page but using the <a> and <div> tag you can have a box with text inside link you to a certain DIV section. In the code below, I have labeled each aspect with HTML comments to help explain.

1. <!--Tabs-->
2. <a style="text-decoration:none;display:inline-block;width:165px;margin:5px 0;background:#4c4c4c;color:#fff;text-align: center;" href="#one">Page 1</a>
3. <a style="text-decoration:none;display:inline-block;width:115px;margin:5px 0;background:#4c4c4c;color:#fff;text-align: center;" href="#two">Page 2</a>

4. <!--Main DIV Container-->
5. <div style="height:210px;width:900px;background-color:grey;overflow:hidden;text-align:justify;">

6. <!--Page 1 DIV Container-->
7. <div><a name="one"></a><div style="padding:10px;"><div style="height:180px;width:100%;overflow:auto; margin-top: 10px;">
8.<hr>
9. Page 1 <br>
10. Page 1 <br>
11. Page 1 <br>
12. Page 1 <br>
13. Page 1 <br>
14. Page 1 <br>
15. Page 1 <br>
16. Page 1 <br>
17. Page 1 <br>
18. Page 1 <br>
19. Page 1 <br>
20. Page 1 <br>
22. Page 1 <br>
23. Page 1 <br>

22. <!--End Page 1 DIV Container-->
23. </div></div></div>

24. <!--Page 2 DIV Container-->
25. <div><a name="two"></a><div style="padding:10px;"><div style="height:180px;width:100%;overflow:auto; margin-top: 10px;">
26. <hr>
27. Page 2
28. <!--End Page 2 DIV Container-->
29. </div></div></div>

30. <!--End Main DIV Container-->
31. </div>


Outcome:

Page 1 Page 2
Page 1
Page 1
Page 1
Page 1
Page 1
Page 1
Page 1
Page 1
Page 1
Page 1
Page 1
Page 1
Page 1
Page 1
Page 2


The next method you could use is what I call Javascript Tabs which as the name implies, uses Javascript to open certain DIVS. For this we'll also need to insert Javascript into the HTML file. I'm going to assume when you use this method that you're going to use the <style> for the CSS. Similar to the <style> which holds CSS within its start and end tag, the <script> tag holds Javascript within the HTML file. Also similar to CSS, Javascript can be linked by an outside Javascript file.

1. <!--CSS-->
2. <style>
3. body {font-family: "Lato", sans-serif;}

4. ul.tab {
5.  list-style-type: none;
6.  margin: 0;
7.  padding: 0;
8.  overflow: auto;
9.  border: 2px solid #4c4c4c;
10.  background-color: #4c4c4c;
11.  width: 900px;
12. }

13. ul.tab li {float: left;}

14. ul.tab li a {
15.  display: block;
16.  color: white;
17.  text-align: center;
18.  padding: 14px 51px;
19.  text-decoration: none;
20.  transition: 0.3s;
21.  font-size: 17px;
22. }

23. ul.tab li a:hover {
24.  background-color: #3f3f3f;
25. }

26. ul.tab li a:focus, .active {
27.  background-color: #3f3f3f;
28. }

29. .tabcontent {
30.  display: none;
31.  padding: 6px 14px;
32.  -webkit-animation: fadeEffect 1s;
33.  animation: fadeEffect 1s;
34. }

35. @-webkit-keyframes fadeEffect {
36.  from {opacity: 0;}
37.  to {opacity: 1;}
38. }

39. @keyframes fadeEffect {
 from {opacity: 0;}
 to {opacity: 1;}
40. }
41. </style>

42. <!--Tabs-->
43. <ul class="tab">
44.  <li><a href="#" class="tablinks" onclick="openCity(event, 'pageone')" id="defaultOpen">Page 1</a></li>
45.  <li><a href="#" class="tablinks" onclick="openCity(event, 'pagetwo')">Page 2</a></li>
46. </ul>

47. <!--Main Container-->
48. <div class="second-box" style="border-radius: 2 px;border: 2px solid #0b080d;overflow: auto;overflow-x: hidden; height: 210px; width: 900px; background-color: grey;">

49. <!--Page 1-->
50. <div id="pageone" class="tabcontent">
51.  <div class="cities">
52. <hr>
53. </div>
54. <div style="text-align:center;font-family: Tw Cen MT;color:#dbdbdb;letter-spacing:1px;font-size:15px;">
55. Page 1<br><br><br><br><br><br><br><br><br><br><br><br><br>
56. <!--End Page 2-->
57. </div></div>

58. <!--Page 2-->
59. <div id="pagetwo" class="tabcontent">
60.  <div class="cities">
61. <hr>
62. </div>
63. <div style="text-align:center;font-family: Tw Cen MT;color:#dbdbdb;letter-spacing:1px;font-size:15px">
64. Page 2
65. <!--End Page 2-->
66. </div></div>

67. <!--End Main Container-->
68. </div>

69. <!--Javascript-->
70. <script>
71. function openCity(evt, cityName) {
72.  var i, tabcontent, tablinks;
73.  tabcontent = document.getElementsByClassName("tabcontent");
74.  for (i = 0; i < tabcontent.length; i++) {
75.    tabcontent[i].style.display = "none";
76.  }
77.  tablinks = document.getElementsByClassName("tablinks");
78.  for (i = 0; i < tablinks.length; i++) {
79.    tablinks[i].className = tablinks[i].className.replace(" active", "");
80.  }
81.  document.getElementById(cityName).style.display = "block";
82.  evt.currentTarget.className += " active";
83. }
84. document.getElementById("defaultOpen").click();
85. </script>

Page 1













Page 2


The last method to get tabs is the most common method for a complete website site as this one. To put it simply, the tabs are set up similar to the Javascript Tabs but instead of the tab linking to another DIV on the same file, the link directs you to another HTML file. This means that for this site, my welcome page would be named "welcome.html", and my Unit 1 page would be named "unit1.html". On the welcome page's tabs, I would put <a href="unit1.html"> so that from the welcome page, I would be directed to the Unit 1 HTML file aka the Unit 1 page. This is exactly how this site runs and most other sites run. This does mean that the header, tabs, and footer must be copied onto each different HTML file that you make for each different page. This also means that if you make a change to one file's footer and want to keep it consistant, you must change all of the HTML file's footer. In PHP, which I only know a very basic amount of, you can create a "header.php" and "footer.php" file which you can then put within the header and footer of a PHP page to call in the header. This allows for the header and footer to be seperate and you only have to change one file if you want to change the header.

Below are two tabs from this website:

<a class="dropdown-item bg-dark" style="color:white;" href="unit1.html">Unit 1 - HTML Structure & Syntax</a>
<a class="dropdown-item bg-dark" style="color:white;" href="unit2.html">Unit 2 - Basic Text Formatting</a>


Please also note that "dropdown-item" is part of BootStrap coding. I will explain what BootStrap does in Unit 6.

Another common element are buttons. In fact, buttons can be used as tab links. Buttons themselves are the <button> tag and like DIVs can be stylized with in-line CSS or outside CSS. In this example I will use in-line CSS. Buttons are also used to submit forms but that topic begins to dive into back-end coding such as PHP and MySQL.

<button style="background-color: lightblue; color: black; text-align: center; padding: 5px 20px; border: 1px solid darkblue;">Button</button>


Outcome:



The first number on the padding is height and the second is width since doing padding-left, padding-right, padding-top, and padding-bottom wouldn't be as efficient.

To link the button, simply but the <a> tag around the button tags.

Listing items can be made simplier by using the list tag, <ul>. <ul> contains the list while <li> is the list item.

<ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
</ul>


Outcome:

  • Item 1
  • Item 2
  • Item 3


To change a list's bullet point style, you cannot use in-line CSS. For this example I will use the style tag for CSS.

<style>
.dash-style-list {
 list-style: "- "
}
</style>

<ul class="dash-style-list">
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
</ul>


Outcome:

  • Item 1
  • Item 2
  • Item 3


Tables are the last common element on this list. For this example, I will actually use the same table you saw in Unit 2 and Unit 3. There is a bit more coding on my tables that I added to make things fancier.

Within my CSS file:

/* Tables */
.table {
overflow-wrap: break-word;
text-align: left;
padding-top: 10px;
}

.table td {
font-size: 15px;
font-weight: bold;
border-bottom: 2px solid black;
padding-left: 5px;
padding-right: 5px;
padding-top: 7px;
padding-bottom: 7px;
min-width: 100%;
background-color: #427ea3;
}

.table th {
border-bottom: 1px solid black;
font-size: 13px;
font-weight: normal;
border-bottom: 1px solid rgb(114, 114, 114);
padding-left: 5px;
padding-top: 15px;
padding-bottom: 15px;
text-align: left;
min-width: 100%;
}

.table tr:nth-child(odd) {
background: #e0e0e0;
}

.table tr:nth-child(even) {
background: #eee;
}

.table tr:nth-child(odd):hover {
background-color: #cecece;
}

.table tr:nth-child(even):hover {
background: #d1d1d1;
}


Within my HTML file:

<table class="table" style="width: 75%">
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>

<tr>
<th>Row 1, Col 1</th>
<th>Row 1, Col 2</th>
<th>Row 1, Col 3</th>
</tr>

<tr>
<th>Row 2, Col 1</th>
<th>Row 2, Col 2</th>
<th>Row 2, Col 3</th>
</tr>

<tr>
<th>Row 3, Col 1</th>
<th>Row 3, Col 2</th>
<th>Row 3, Col 3</th>
</tr>

</table>


Outcome:

Column 1 Column 2 Column 3
Row 1, Col 1 Row 1, Col 2 Row 1, Col 3
Row 2, Col 1 Row 2, Col 2 Row 2, Col 3
Row 3, Col 1 Row 3, Col 2 Row 3, Col 3


The <tr> tag begins a new row, and the <th> tag begins a new column on that row. If in row three there aren't enough columns, the missing rows won't show up on the table. If you put one more row than the first header row, it will still show but it will look like it's outside of the table.