----------------
This write-up will only be going over the technical aspects of building this website. New information will be posted at the bottom. You can view the page source to follow along in the code.
Bottom----------------
The Foundation (HTML)
----------------
Websites today seem to get very complicated very quick. The purpose of this one is to publish information, so I will only be using HTML, CSS, and a sprinkle of PHP to make my life easier. HTML provides the actual content and CSS makes it look nice.
Each page in the site will be its own .html file. There will be one .css file.
The first step was to make the home page (index.html). This will contain the header section and a list of projects. In the header, there will be navigation links, while the list will have links to project write-ups. Before starting, we need to go over a few basics of HTML.
HTML is made up of tags. Each "<>"" is a tag and most of them have a closing tag "</>". The letter inside indicates the type of tag. You can have tags inside tags as well as "attributes" inside the opening tag which further specify how you want that element to behave. The homepage started off as this:
<!DOCTYPE html> <head> </head> <body> </body>
The DOCTYPE is for telling the browser that it is looking at HTML. The head tag contains information about the file, such as the title and links to other files this page needs (like .css files). Finally, the body tag contains everything you actually see.
Looking at the source code of this page, you will see "<!-- Top Bar -->". This is a comment. The browser or whatever application is reading this code ignores the text in between the 2 arrows. This lets programmers leave comments about what a piece of code is supposed to do or how it works without affecting the behavior of the code.
To start putting things on the website, I used a few different tags:
<a> </a> - Anything inside is a link <p> </p> - Paragraphs <ul> </ul> - Lists, used with the next tag <li> </li> - List item <div> </div> - Used to divide stuff <span> </span> - Used for single lines of text that needs to behave a certain way <br> - line break (starts a new line)
The main body of the home page is just a list (ul and li tags) where each item is also a link to the appropriate page. Simply putting the <a> tag around an element makes it a link. The items are two <span> elements. The first one is a tag and the second is the title. Using the span tag lets me specify that the tags are part of the "tag" class. This is so latter I can make them behave differently from the title. You could also just have the li and a tags for each item in the list.
You will notice some attributes for pretty much every tag. href="" is used for links, class="" is used to put that element in a certain class which can contain any number of elements. id="" is used to assign an element a unique id that only it belongs too. The <div> tags are used to group different elements together into classes for styling later (with css).
For other pages, I copied the code from the homepage and just changed what is in the content section. Using <div> I can put text into the "code" class to put it in a box like above.
----------------
The Foundation (CSS)
----------------
You should be able to find my .css file from the link in the source code for any page. I have no idea what the standard is for spacing so it probably looks horrible, but it still works ok. In CSS, you first declare what you want the style to apply to. You can use a tag typ, class, or id. HTML is kind of a tag, so you can also apply some formatting to the entire page. I use this to set the font and background color. The format is as follows:
target {attribute: values; attribute: values;}
If the target is a tag type, you simply put the type, if its a class, a "." is placed in front of it, and for ids, a "#" is used.
I put each attribute on a separate line to make it more readable, but this is not necessary. There are tons of attributes, but the main ones I use are color, margin, font-weight, and font-size. Color sets the color, margin sets margins for the element(s), and font-weight/font-size adjust how text looks.
Color values are given in hex format and margin/font-size things are given in pixels. CSS is not too difficult, but requires experimentation to find the right combination of attributes that give you what you want. You can start by finding simple websites and looking at their source code to get ideas.
----------------
Adding Images
----------------
Images are added with a single tag:
This tag does not require a closing tag. There are also other attributes you can give the image like height and width. For the source, if the file is in the same folder, you can simply put the filename. If it is in a different folder, you need to provide the path. I store my images in the "images" folder, so the path is "./images/filename.jpg". The ./ at the beginning refers to "this" folder, wherever that may be.
----------------
PHP Additions
----------------
After realizing I needed to adjust the navigation bar at the top, I realized I didn't want to have to go through every .html file just to change 1 link. Also, making sure very top bar section is the exact same on every single page would be a nightmare. I began looking for a way to have a single location for the top bar code that every page can reference and import, similar to #include in C/C++. Enter PHP.
<?php include("top_bar.html"); ?>
This single line acts as an #include statement. The contents of "top_bar.html" is placed in the HTML file, replacing the PHP line. With this, I can make changes in a single location and have every page reflect them. The only other things that need to be changed are the file extensions for any page that includes this. (.html -> .html) I also did this with the header, which references the .css file and sets the title of the page (text that appears in the tab).
PHP is a scripting language that runs on the server. This means that you can't just throw a .html file into a browser and have it work. A proper server (like Apache) is required. I went with XAMPP, a Windows program that runs an Apache server with PHP, along with a few other things like an FTP server. Windows also has a built in local server that can install PHP.
----------------
Videos
----------------
Adding videos to a page was much easier than expected. All that is needed is a <video> tag and a source.
<video width="500" controls> <source src="path/to/video.mp4" type="video/mp4> Put an error message here. </video>
The two file types I was looking at were mp4 and webm. mp4 is compatible with more browsers, but webm files are much smaller. The mp4 version of the Teensy Single Pedal was ~135MB while the webm is 38MB. This means less server disk space used, less data towards a data cap (if your ISP/host service has one), and faster loading times. One way to get around the compatibility issue is to host both file types. In the <video> tag, just add a second source. The browser will attempt to load the top one first, then move to the 2nd if that fails. I chose not to do this since that would mean taking up significantly more disk space than the other options. Only hosting the webm version means iPhone users cant see the video which, in the US, means a majority of the population can't view the video on my website.
