[Nasyr]

Introduction to HTML and CSS.
Creating a simple website.

Table of Contents

• Introduction
  • Hello
    
  
  
  • Required Programs
    
  
  
  
  


• Getting Started
  • Structure
    • Folder Structure
      
    
    
    • File Structure
      
    
    
    
    
  
  
  • Images
    
  
  
  
  


• Coding
  • Starting HTML Document
    
  
  
  • Starting CSS Document
    
  
  
  • Coding
    • Head
      
    
    
    • Body - Banner
      
    
    
    • Body - Navigation
      
    
    
    • Body - Content
      
    
    
    • Body - Footer
      
    
    
    
    
  
  
  • HTML Changes
    • Background
      
    
    
    • Spacing
      
    
    
    • Center
      
    
    
    
    
  
  
  • CSS Coding
    
  
  
  
  


• Previewing
  


• Credits
  • Nasyr
    
  
  
  • GitHub
    
  
  
  
  

Introduction
-- Hello

• Hello Hack Forums,
  It has been some time since I created a tutorial or guide but I'm working on a few things at present. Last night I decided I was going to make a quick and simple to follow tutorial using HTML and CSS. This is for beginners wanting to get to know some basics along with making a small and simple website. I spent at most 35 minutes creating the full website. I think maybe 15 minutes coding it all out and 20 minutes making some quick and simple graphics. Anyways In this tutorial, I'll provide all of the resources and the code as well, explaining each part as we progress along. So I say that it's time we get right into creating this website, don't you?

-- Required Programs

• When doing design there are specific programs we can use, these are free and paid, I personally use Notepad++, however, there are others like Brackets and Dreamweaver but it all comes down to personal preference. You might even want to use just plain old notepad. I highly recommend using Notepad++ though as it can be used for coding in several different languages, it's free and also gets constant updates from the developers with new patches coming out weekly at this stage.

Getting Started
-- Structure

• Folder Structure
  So as we're making this project directly on our desktop it would be the best idea to construct a working area. This will allow us to keep everything clean and in order. This is good practice for if you are doing a web design for someone as they can just upload your folder structure straight to their host. It's always the best way to design and it means your desktop is not totally clustered at the same time.
  
  So on your desktop create a new folder and call it f13tut. Inside this folder create two more folders called css and images and it should look like this;
  Folder Structure (Click to View)
  
  Now open the images folder and create two more folders called img and nav so it will look like this;
  Folder Structure - Images (Click to View)
  
  
  File Structure
  Alright, so we have our folders all set up correctly now. We need to make the files correctly so that everything we've done this far links correctly. The purpose as mentioned before allows us to keep a clean order of how the files would be set out on a web server if we were fully releasing this to the web. So progressing we want to make two new files which will be our index that the members see and an external CSS style sheet for keeping our styling separate and the index looking cleaner.
  
  Inside the root folder (f13tut) we want to have one file created which would be index.html. I used Notepad++ for this and you can too;
  Spoiler (Click to View)
  Saving HTML File (Click to View) You can choose to save it as .html as such here; https://nbb.rocks/i/Olm55.png
  
  
  Inside the css folder you want to save a file called global.css as such;
  Spoiler (Click to View)
  Saving CSS File (Click to View)
  You can choose to save it as .css as such here; https://nbb.rocks/i/U0slE.png
  
  

-- Images

• Now you have your folders and such in place, please download and save the following images. These images are going to be your base for all of your website and will populate a lot of it otherwise you'll have broken images all over the place. Add these to the images folder.
  
  Download link: click me to download

Coding
-- Starting HTML Document

• Moving on into the coding we want to have our index.html file open with the basic information for any website, you can copy and paste the following code into your file document. I'll cover all the basics shown in this document you are about to create. You can do further research online if you wish but as this is just an introduction it will be dry.
  
  HTML Document (Click to View)
  
  HTML Tag - This is where all the code for the entire website has to go otherwise it won't be used.
  Head Tag - In the head tag we will have all our external links and general small website related stuff.
  Body Tag - Inside the body tag is where we will see all the work come together and show when you visit your website.

-- Starting CSS Document

• To be honest at this stage if you have created your CSS document there isn't much more we can do with it until we begin the coding aspect of things and have to fill it with styles and such. So, for the time being, I shall just move on to the next part of the tutorial, however, we will come back to that CSS document as we will need it.

-- Coding

• Head
  To begin with, we will need to add some things to the head tags at the top of our document to help us progress along the lines. What we want to add is the following;
  
  Title: We want to give our home page a title that will appear at the top of the page like such: Spoiler (Click to View)
  Favicon: Besides our title we want to add a nice little icon, this will allow us to do that; Spoiler (Click to View)
  Google Font: This will allow us to introduce a Google Font, later on, I have already selected one, to find out more just check Google Fonts online.
  CSS Link: Remember we made an external CSS page? Well, now we're going to link it here.
  
  Head Code Added (Click to View)

• Body - Banner
  Perfect we are fairly getting there at this point, now we need a logo or a banner to present at the top of our website. If you've added the files I gave you before then you are onto a good start. I premade these last night and will be of great use to making this quick website.
  
  So moving into our body tag we want to make a table, this will allow us to add our banner there too. I manually coded the website to all match the same size and be in the centre but we shall get to that stage when we do.
  
  Table Code (Click to View)
  
  Now that we have our table code we want to add the banner as an image and make it a clickable link. Here is how we make it an image and also a link;
  
  So as you can see the a href make's it a link and the img is where we link the image. images/banner.png is where we have selected to pull the image from.
  At this stage we just need to bring it all together so that the table looks like this;
  Banner Table (Click to View)

• Body - Navigation
  Congratulations on the banner, that step was easy and will be used in three of the four main steps to creating this website believe it or not! We're pretty much going to use that same code again but with some minor adjustments to it so we can have 4 images alongside each other which have no problems with the size we set out.
  
  Nav Code (Click to View)
  As you can see in the code above we've replicated the same line 4 times, the only difference at the moment is the image path it changes as per the image we want to call to be placed in a specific order. Now we want to add this code just after our banner code, I'd suggest leaving a blank line to make it easier to control. At present your full code should look like this;
  Nav Code (Click to View)

• Body - Content
  At this stage, we're now going to add two more sections here right under our navigation. We will add a slogan from the movies to the website and then a simple content showing an image on the left and some text on the right. This is fairly easy as we will still be using tables but we will be mixing things up a little with the slogan using classes. These will link to the CSS later on.
  
  Slogan
  Okay as I had said we will be adding a slogan from one of the movies, here is the code for it first of all;
  Spoiler (Click to View)
  As you can see we have a class added in there called slogan, that will appear in our CSS later on.
  
  Content
  Again we will make a new table with some content added in there now, here is the code, it's very similar to our banner and navigation;
  Spoiler (Click to View)
  Again we now have two new classes, index1 which is linked to our image and index1text which is linked to our text.
  
  Full code this far (Click to View)

• Body - Footer
  Well, we are just about done making the main design to the website in which all we need to add is a footer. This is one I made for my GitHub project but it'll do for this tutorial as well.
  
  So to begin we want to add the following code below our last table;
  Spoiler (Click to View)
  
  Congratulations we now have the full website in effect at this stage!

-- HTML Changes

• Change 1 - Adding Background
  We want to add a background to our website but we'll do this internal.
  Locate the body tag and replace it with the following;
  
  Change 2 - Clear Space
  We want to add some space after the slogan and before the content.
  We also want to do this after the content but before the footer.
  
  Change 3 - Center
  At this stage we want to centre the website, it'll make it look a lot cleaner.
  Add the following tag after the body tag.
  
  Add the following tag before the closing body tag.
  
  
  Your final website code should now reflect this;
  Spoiler (Click to View)

-- CSS Coding

• Remember those classes and the Google Font we added earlier? Now it's time to open that CSS file up and we shall get all that good stuff sorted out.
  
  So here the full code we're going to be using in the document;
  Spoiler (Click to View)
  
  .slogan - This is the slogan we made earlier, it chooses the text size, font and colour.
  .index1 - This will resize the height of the image we see on the left.
  .index1text - This changes the colour of the text on the right of the image.

Previewing

• We have come to the end of our tutorial. To preview the work you have done double click the index.html file and it will load in your web browser. It should look something like the following image;
  
  Spoiler (Click to View)

Credits

• Hack Forums Profile: Nasyr
  GitHub Project - https://github.com/Admixing/F13-Website-Template
  Follow me on GitHub: https://github.com/Admixing
  Follow me on Twitter: https://twitter.com/Admixing

[Verilog]

Really nice tutorial :)
Good work Nasyr

[newQuery]

Very nice thread!
This will help more than one!

[Dr. Gonzo]

great tutorial and very detailed. Dawn represent!

[ComputerJi]

Bookmarked.

Such an HQ thread right here. Thanks.

[PamPam]

nice thread it will help
try js and php too

[Lukas]

Pretty nice introduction to the subject. Being a MyBB dev, do you plan on creating an introduction to that, or a beginner guide on creating a custom theme for the platform? Would be interesting to see.

[Bαker]

Overall great tutorial Nashry, only issue is the fact you used px for width instead of making it mobile responsive c;

[Nasyr]

Pretty nice introduction to the subject. Being a MyBB dev, do you plan on creating an introduction to that, or a beginner guide on creating a custom theme for the platform? Would be interesting to see.

Yes currently creating a thread regarding that.

[icmp]

- Perhaps adopt modern standards for navigation? So instead of using ancient tables, use unordered lists and style them.
- Maybe specify background in the actual CSS just to clean the HTML up.
- Overall, just use div's to group content together to abide by best HTML 5 practices and where possible avoid inline styling.

[Nasyr]

- Perhaps adopt modern standards for navigation? So instead of using ancient tables, use unordered lists and style them.
- Maybe specify background in the actual CSS just to clean the HTML up.
- Overall, just use div's to group content together to abide by best HTML 5 practices and where possible avoid inline styling.

Amazing, an introduction thread is about starting small and then progressing onto making different changes etc down the line. The internal CSS is to show how it's done. Trust me I've been making websites for years this is the very basics and a good starting point to keep it simple and understandable to someone new.

[Cain_]

Great tutorials mate, Thanks a lot for taking the time to share it with us!

[TheChiеf]

Amazing effort. Will read it through in a bit.

[icmp]

Amazing, an introduction thread is about starting small and then progressing onto making different changes etc down the line. The internal CSS is to show how it's done. Trust me I've been making websites for years this is the very basics and a good starting point to keep it simple and understandable to someone new.

I disagree. Tables should be used for tables, not to define layout. I prefer teaching beginners the standards first so instead of demonstrating bad practice, and then later have to correct it, just teach best practice first and avoid the 'overhead' so to speak.

As a fellow senior web developer, I disagree. However, I and others appreciate your efforts and time writing this thread.

[Nasyr]

I disagree. Tables should be used for tables, not to define layout. I prefer teaching beginners the standards first so instead of demonstrating bad practice, and then later have to correct it, just teach best practice first and avoid the 'overhead' so to speak.

As a fellow senior web developer, I disagree. However, I and others appreciate your efforts and time writing this thread.

The plan for this is to work as a class. Now that the tablet version is here I'll start working on the conversion side of things in another thread soon. In other words, I showed a very simple basic way to make a website using tables, we'll convert it to divs with more classes in CSS. Afterwards, we'll begin looking at going for the change to having a responsive layout. As mentioned several times before this is for newbies, it's supposed to be easy enough to show a verity of things such as;

• A website can be easily made with no skills.
  


• Simple internal and external CSS.
  


• General understanding of how the page should display.
  

This is by no means a massive effort as stated in the original post, 20-35 minutes tops creating it and sorting the GitHub project. This is a learning stream for people who have an interest but want it broken into small simple steps. Anyways I appreciate your comments and if you seem to think that I've made a disaster of this then so be it but you aren't aware of the future steps I have/had for this small project. Perhaps in the future you should look at it from a point of view of someone having no skills or previous experience just wanting to mess around and test some stuff out.