During the month of May and June, I have been developing my teacher appreciation website on and off about Mr. King, my previous social studies teacher. To start the teacher appreciation website, I first opened up Dreamweaver/Atom.io and created 5 new files/pages/documents. I wrote the basic html code for the documents. I wrote <!doctype html>, <html lang="en">, <head> tags, <meta> tags with the meta information of the website, <title> tags with the title specific for that page, <body> tags, and <html> tags. I wrote <link rel> tags to link my favicon and CSS style sheet onto all 5 documents. For the first page, I named the file index.html and the title, "homepage". Inside the <body> tags, I first typed in <div> tags with the class name of "page-container". Inside the page-container <div> tags, I typed in another <div> tags with the class name of "content-wrap". Inside the content-wrap <div> tags, I typed in <nav> tags to set up for a navigation bar. Next I typed in <div> tags with the class name of "navbar". Inside the navbar <div> tags, I wrote <div> tags with the class name of "dropdown". Inside the dropdown <div> tags, I typed in <button> tags for a hamburger menu. After that, I typed div tags with the class name of "dropdown-content" and id name of "myDropdown". After that, I linked all the pages inside the hamburger menu inside the dropdown-content <div> tags using <a> tags. Afterwards, I typed in <div> tags with the class name of "sideBtn" below the dropdown-content <div> tags. I linked all the webpages again. The sideBtn <div> tags are the buttons next to the hamburger menu. With that, the navigation bar is done. The navigation bar is present in all pages of the teacher appreciation website. After the <nav> tags, I placed a <br> tag to make a line break for the content. Then, I placed <section> tags after the <br> tag and placed in <center> tags. I typed in <div> tags inside the <center> tags. Inside the <div> tags I typed in <table> tags. Inside the <table> tags, I typed in <tr> tags. Inside the <tr> tags, I typed two <th> tags. Inside the first <th> tags, I typed in <div> tags with the class name of "mainContent". Inside the mainContent <div> tags, I typed in <h1> tags, <h6> tags, <p> tags, <img> tags, and <br> tags describing the specific topic at hand. For the second <div> which has a class name of "sideInfo", the inside content has <h1> tags and <p> tags iterating a history fact. Now I created the main content of the page. Secondly, I created a footer to represent the copyright. I did this by first making <section> tags and inside those <section> tags, I typed in <center> tags. Inside the <center> tags, I typed in <footer> tags to make the footer with the id name of "ft". Next I used <p> tags, <a> tags, and <br> tags inside the <footer> tags to make the content inside the footer and cite copyright. At the end of the <body> tags, I wrote JavaScript for all 5 pages for the navigation bar. I typed in <script> tags and inserted the following code:
/*Credits to www.w3schools.com for the javascript code necessary for the dropdown menu.*/
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var myDropdown = document.getElementById("myDropdown");
if (myDropdown.classList.contains('show')) {
myDropdown.classList.remove('show');
}
}
}
Now the first page of the teacher Appreciation website is complete and parts of the other pages are completed as well. For the second, third, and fourth page, I pretty much typed in the same code from the first page. I tweaked the content for the second page for the topic of Mr. King's Biography. The title was Biography and the file name was Page_1.html. For the third page, I typed in Page_2.html for the file name and Subject as the title. I tweaked the content as well. For the fourth page, I typed in more <p> tags and <img> tags to showcase trivia and data about Mr. King. The title was named Trivia and the file name was called Page_3.html. For the fifth page, I had the navigation bar and footer already created. Inside the <body> tags I typed in <p> tags, <a> tags, <h1-h6> tags, and <br> tags to credit and cite all sources and copyright. Now the entire website is completed. The website will be uploaded in the near future. I did this website because it was a project from my computer science teacher, Ms. Ramirez. I learned that I still need to improve my skills as a web developer. I envision that I will create better websites with the new tags I learned like <section> tags and <nav> tags. One advice I will give is to organize your code better because jumbled up code might confuse you when programming.
No comments:
Post a Comment