Basic HTML/CSS Web Page Part 1 - HTML

Introduction: This tutorial is going to be the first of two basic parts on how to create a basic web page with the essential components using pure HTML and CSS. The Structure: Our web page is going to consist of a header covering the full width of content at the top of the page, a body section covering most of the wide from header to fairly far down the page, a side bar containing widgets on the right hand side of the page - next to the main body section of the page, and a foot covering the same width (and probably height) as the header section; underneath our body and side bar sections. This Part: This part is going to be on the HTML (Hypertext Markup Language), the second part is going to be on styling the components in CSS (Cascade Style Sheets). Main HTML File: First we want to define a basic HTML file, it needs the doctype, html and body tags... Head: For those of you who have not used HTML before, the head tags are used to contain things like imports, requires and external references, while the body section of tags is used to hold the display and graphics information such as the headers, footers, images, etc. For this page we are going to be using a CSS file in the next part so we'll first include that file (it's not yet created though but still shouldn't give us any major, website breaking errors)... We reference a file named 'style.css' within the same directory as the file the code is contained in (index.html). We'll create this in the next part. Next we are going to give our page a title, this will show up in the tab/window frame of the webpage... Body: Next we are going to want to create the main body section of the page. We are going to use divs as the type of content holder tags for separating our sections out. Divs - or Divisions - are used to hold fair amounts of data, split them up in to easily readable and usable sections, as well as being able to hold other HTML tags within them. The other thing you will need to know about are classes and IDs. Classes and IDs are used in CSS to pair the styling given with where the styling should be applied to within the given HTML/Jade/PHP files. Any HTML tag can have a CSS ID or Class. Classes are supposed to be used for styling that is used more than once and for important components within files while IDs are supposed to be used for singular items that only exist once within a file - such as an article with a specific title, the id could be the title because it wouldn't come up again whereas the class could be 'article' because articles would be used multiple times and they would have to use the same styling. So first we move in to our body section, between the opening and closing body tags and type two new divs, one for a wrapper and the other for our header. We give them the appropriate class names... Next, underneath the header we want to create a body section, I've named the class 'content'... Now we create a side bar section, the class name is set to 'side'... And finally, we create a footer section with a class name of 'footer'... We encase all of our sections in the wrapper div because we are going to use the wrapper div to set the boundaries on-screen for the rest of the components of the webpage. Class and ID names can be set to whatever is easiest for you, the developer but must be remembered or easily found/related to when using them later on to style the elements. Next Tutorial: Next tutorial we are going to be styling these elements using our style.css file which we will create within that tutorial.