Website design Creating a simple web page using Notepad plus plus Sheffield Yorkshire

Website design Creating a simple web page using Notepad plus plus Sheffield Yorkshire

Click here to download Notepad + + Installation Files

The Website design Creating a simple web page using Notepad plus plus Sheffield Yorkshire video explains where and how to download notepad plus plus. The installation and setup of notepad plus plus is explained in detail.

Please check out the other free tutorials on how to use notepad plus plus to create web sites. I have used and taught classes on the use of some of the commercial website creation software, but always start the courses with hand coding so that the learners have an understanding of how a web page works. This is essential knowledge as sometimes the commercial software wont do what you want it to do and you need to fix this with hand coding. Notepad plus plus is my software of choice as it has unlimited capabilities for web designing.

I hope you enjoy the Website design Creating a simple web page using Notepad plus plus Sheffield Yorkshire video video and please do have a look at some of the other free tutorials on this site.

Creating a simple web page

Ok, I'm going to show you how to hand code a website. The reason I'm going to do this and I do this for any I mean face to face courses that I teach, you might say well i've got this software that does it all. Well, sometimes the software goes wrong or it doesn't do what you want it to do and you need to be able to get in there and actually fix it so you do have to have an understanding about the coding that's involved in websites. Years ago, you used text editor this was before the software for designing websites. Something like notepad you would hand code it in that. There's a far better one that you can use now and this is called notepad plus plus. So the two things we will need for these tutorials is one you will need a web browser, the one I use, this is Firefox. The reason I use it is you can get all sorts of useful add ons which is excellent for the web design on developer. So, you need your browser and you'll need obviously a text editor. Now the one that I'm going to show you here is called notepad plus plus. So if we do a search in Google or whatever search engine you use and we just type in notepad plus and this is where we want to go to notepad-plus-plus.org. So if we just go there and you want to download the latest version so if we just go to download and the latest version here is version 6.61. So we will take this one the notepad installer. Ok once you've saved it just click on it to run it. You get a warning and if you just click run, choose your language and this recommends closing all programs down. So this is just a basic, straight forward installation and you have to agree to it and say just where you want to actually install it. I would leave, unless you want it as a default html viewer, ill leave that one blank. These ones here, this is, you'll only tick that box if, you can actually get it as a portable app so you would only use that if it was a portable app. If you want a desktop shortcut I would probably just tick that one there and go ahead and install. Now I've already installed this so just cancel. And if we open it up we get this. So, this is what we will be suing to do our hand coding. So we want anew file and straight away we will save it. So just go file, save as and we want to put it in a folder where you're going to save all your website files. So if you just click on this icon here to create a new folder and we will call this my website. Right, by default it will come up as a normal text file. Now, just to show you some of the capabilities of notepad plus plus, you've got, you can save as various forms of html, java, java script, PHP, xml. So there's loads of different formats you can save it in. we don't have to choose the formats for this all we have to do is just type in, the first, usually the name of your first page will be called index and if we put the extension .html. Right, html stands for ***hypertext transfer mark-up language*** this is, so its going to be a webpage and that will save it in the correct format. So, if we click save, so we have saved it as html. So on an html page we have things called tags. Right, so if we put, these are using the less than sign and greater than sign. So put a less than sign type in, its html where using so we type in html and then there's, that's the opening tag. For every opening tag there will be a closing tag or a method of closing. Right so we need, once we've opened it as html we will need to close it as html. So that'll be once people have, we have finished with the page. So I press enter a few times and the way you do a closing tag that looks the same as the opening you have a forward slash before you type in html. So this is the opening of your webpage and this is the closing of your webpage, right, or the end of your webpage. So there's 2 parts, 2 main parts within a webpage and that's the head and the body. So if we just put in head, that's your opening tag. Ill pres enter a couple of times because ill put something else in there later and then we put a closing tag. Now the head area that's the only thing the user will see from the head area will be the title that we will put in later. The rest of it is to do with your search engines etc. so the next part of your html is the body now this is the part that the user sees. So we just type in body, press enter a couple of times then close body. Ok, so this is the basic framework for a webpage. So you open it with html and that's the end of the webpage with the closing tag. Within those tags you have an opening head and an opening body. Right so we will save that and what we will do we will have a look at it in a browser; it won't show us anything because there's nothing here. If we just do a file and open, go into your folder and we will open the index. So as I say there's your, the tab and this is where the title will be. So when we go to the title you will see your title will go here also the title will be up on this bar here. So there's nothing as I said nothing there because we haven't put anything into it. So lets give it a title so again inside the head area so that between the opening and closing tag put in title and then the closing tag for title which is just forward slash title. So in between these 2 tags here the opening and closing lets give it, we will call it homepage because that's your first page and then we will save that. So if we go back into our browser and do a refresh now, so watch this area here and at the top. So refresh, we've got homepage there, so your title comes up there and also at the top of the bar up here. So that all we need for the time being for the head. Within the body we need a heading, so, your heading tags are h1, 2, 3, 4, 5 and 6. So h1 been the biggest one so we will use the biggest one normally have an h1 at the top of your page. So an opening for the h1 and a closing for the h1. So if we put in there my first website and save it so back into your browser if you do a refresh there's your header my first website. Just to show you the difference between the next size down, so instead of h1 ill do an h2 and close in the h2 and save it, look in the browser, refresh and there's the next one down so you can start to use smaller sizes when looking at subheadings. So we don't need that one, so the next thing we need is some text in our body area. We will put a paragraph in there now a paragraph is just p. so opening tag p, closing tag p. and we will just type in welcome to my first website and a exclamation mark. So if we save that, open it up, do a refresh and there you go there's your paragraph, welcome to my first website. So, just looking back at the coding so you've got your open your webpage with html and you close it, the end of the page with the closing tag html. Within there you have 2 main areas, your head, opening and closing and the body opening and closing. Within the head we've put the title of webpage and within the body this is what, the main part the user sees. So we have a heading tag which is we used h1 and then we used the paragraph, p for paragraph.

Why not view some of our other free video tutorials?
Image Manipulation

Animations
Need a website developed?
1-5 page website from £300
Responsive design, CMS available
Click here to get a free quote