HTML – The Know-How

I guess I should have covered this earlier on but I’ve been pretty busy with homework and assignments and you know, life in general. Oh Well.

Anyhow, It seems logical to cover the basics of HTML.

HTML, also known as Hypertext Markup Language is the language used that build websites from scratch. It is the absolute first thing you would ever know when creating websites. Before anything else is added you would build a website through HTML – with that in mind there are other ways to build websites (I’m looking at you PHP) but in the end you are still using HTML to make it happen.

html5-720x1280

HTML has been around since the start of the web and since then has gone through a number of changes – 4 major ones actually (if you don’t count the initial release. The latest release is now known as HTML5 which included a number of improvements, most notably including approximately 29 new HTML tags and more browser compatibility.

To suffice a bare bones HTML Document looks like the following:

html-1

Essentially, this will give you a blank document on your page, but an HTML document nonetheless.

The first tag, DOCTYPE, defines what kind of document you are creating to let the browser know in order not to confuse it with say and CSS or Javascript file (which we’ll cover later). Followed by that is the HTML tag – this is where all of your content is contained in the file including meta information, at the end of your document you will include a closing tag that is almost the same thing except that it has a forward slash in front of it, indicating that it is closing. Lang=”en” is pretty self explanatory, just stating to the browser what language your document is in.

Next up is the HEAD tag. This is where you include all your meta information such as Page Title, Meta tags and files that link to your page that require it to run properly such as CSS and Javascript. In this case I’ve included a Meta tag that defines what character set this document is optimized for, which makes it able to include all the characters and keys on your keyboard inside of your document so that no unknown keys are included in your document. This is very important to have so your website does not crap out in any way or shape because of the incorrect character set.

After the HEAD tag you have the BODY tag. This is where all your content actually goes that you see on your browser.

For example, a Body may contain content such as the following:

Screen-Shot-2017-06-02-at-4.46.40-PM

In a nutshell, this basically is HTML5 that includes a Header section, a Main Section and Footer Section.

Within the HEADER tag you have a Navigation Bar with a UL tag which is an Unordered List that contains 2 lists elements (LI tags) within it. Within those are A tags which as known as Anchor tags that link to other parts of the website and in other cases outside of the website. Href stands for Hypertext Reference, which is ‘referring’ you to any part in the website or beyond.

Normally you’ll put your actual content in the Main tag. Stuff like articles, Welcome messages, image galleries and etc. are included here. Of course there’s no right or wrong answer here but as a Web designer or Developer it’s in your best interest to have an easy to navigate website that is clear and concise.

Lastly comes the Footer which is normally where you’d put in contact information, links to your social media and sometimes a search bar. In this case I’ve included a DIV tag (which stands for Divider tag) with an ID of “contact-here”.

What is an ID in HTML?

Well stick around, and I’ll have more for you next time.

For now, here’s a quick reference on HTML:

https://www.w3schools.com/html/

Have a good weekend!

– Mike

Advertisements