Day 4

 Finally, I made a website!!!!

So today I got to learn about HTML documents how to make them and what I need to put into them for browsers to display them properly and how I want them to look, the boilerplate stuff, and I even made some lists and links and a second page as well!!!

Basically, the boilerplate bits tell the web browser that the file it's reading is a webpage, <!DOCTYPE html>, because web browsers can open so many files now, images, pdf and others we need to tell it "Hey just to let you know this is a website alright" then you get to use a load of tags such as <html> <head> <meta> <body> <title> and then you have to close them with </html> </head> </body> </title> otherwise the stupid old browser just thinks the <head> or <body> will just be open until the end of the document, although the meta tag doesn't need one the HTML 5 is smart enough to know this is a self-contained tag you don't need a / at the end.

Secondly, I got to make lists with <ul>, <ol> or <dl> for unordered, ordered and descriptive. Then <li> for the list items, apart from <dl> uses <dt> and <dd> respectively. I had to make a few little lists as practice and had some fun with using these different types and nesting them within each other as well! and headers <h1> <h2> ... <h6> , <h7> and any bigger do not exist> to show the importance and show the distinction between sections, also <strong> and <em> for bold and italics that also give emphasis to screen readers as well, <b> and <i> work visually, but we gotta look out for everyone here!

Additionally, a small head nod to <p> and </p> tags give paragraphs as browsers will compress any line breaks or extra spaces you try to enter into your text within the body tags. Web pages could be so hard to read without these! Also <!-- --> this lets you leave nice little notes and messages for any coders who are looking at the HTML file or inspect your webpage in the browser. 

I also used image tags <img> again another self-contained one that doesn't need to be closed, it has to have its 'src=""' inside the tag to tell it where to find the image, this may be a relative link to an image you have on your machine or an absolute link if you are pulling an image from somewhere else on the internet, hopefully, your not stealing or they don't move your image your using! And also you need your 'alt=""' as well this helps people using screen readers get a description of your image to know what you've put on the page and it also shows up if the image cannot load for any reason as well!

Lastly, I got to use links, these are using <a> as anchor tags that do need to be closed or your entire website might be made a link! using 'href=""'  I made links to external websites, Absolute links, I also link to second pages I had also made on my local machine, relative links, I had to make sure that the href="" was also pointing to the correct directory for my additional pages as I had made an additional directory called pages to keep it all organised and to link back to my homepage, named index.html for fancy server reasons, I had it not work initially as it was looking for the index page in the pages directory rather than the parent directory, nothing a good old ../ couldn't fix.

And yer that's about it my 2 hours of learning today took me to 41% completion of the foundations and next time I should get to move onto CSS which helps makes webpages and sites look all fancy and do some semi-fancy tricks to the actual content on the page so I'm looking forward to that!