HOW TO MAKE A WEBSITE

INTRODUCTION

Back before social media sites llke Facebook took over the web, back before such things even existed, many people learned to build their own websites. They built these websites to share information about their hobbies and interests, show off their personal projects, as photo albums for their families, and to connect with others and find out about their interests, hobbies, and life. And these sites would be filled with photographs and pictures, poetry and stories, animated GIF's, music files called midi's or wav's that would play when you opened a page, and links to other websites they liked or that were about similar things. Your website was literally your "home on the web", and some of the front pages of these sites would have animated gif's of doors opening and little mailboxes that you could click on to send the website owner email. A website owner/creator was called the "Webmaster" (some women liked "Webmistress"). Each of these websites was like a unique, little universe, and there were MANY of these to explore. It was a neat time when people would actually "surf the web" . . . and often get lost far from the place they had come in.


I started learning web programming back in the Spring of 2014 because I wanted to be part of the Old Web. Most of these types of personal websites were made back in the mid 90's until the mid 2000's. I didn't have access to a computer fulltime until around 2004 so I missed out on being able to make one back in the early days - but I loved surfing them! You could literally spend years learning all the ins and outs and little tricks of web programming - there is so much you can do with it - but the basics are pretty easy to learn in a very short time. In the sections below, I'll outline all the things you'll need to have and to know in order to start making your own site. I'll explain a little about each of the tools and languages and link to some good HTML/CSS tutorials on Youtube and elsewhere to get you started. Most of these tutorials are broken down into 5-10 minute segments/videos, so they're easy to follow and you don't have to do them all at once. Just take your time and enjoy discovering a new world. :)


NOTE: Read this whole page through before beginning anything. It's kind of an overview of things you'll need to know.

NOTEPAD++

Notepad++ is a simple text editor that you will write your program files in. It's what I'm writing this on right now. This is a link you can download it from -> Click Me. It takes just a few seconds to download and install, just follow the directions. Make sure to check the box that asks if you want a desktop icon. It'll make it easy to find when you need it. I don't know if you have any experience with downloading and installing things so if you have any questions just send me a PM on Facebook. It should be easy though. If it has any boxes checked for adding a Yahoo toolbar, Macafee AntiVirus software, or other things that don't sound like stuff having to do with Notepadd++, UNCHECK those boxes during the install, it's just unnecessary spamware. It shouldn't have that but some places do.


When you open up Notepadd++ after it's installed, you'll see your basic white screen with tabs at the top labeled things like 'File', 'Edit', 'Search', etc. There will also be a tab below that that says "new". That's telling you that Notepad++ has a new, empty file already opened for you and you can just start typing. If the "new" tab isn't there, you can just click on "File" and then on "New" to start a new file. If you already had one saved that you wanted to edit, you can ignore it and just click on "File", then "Open". This will take you to your computer files so you can find the one you want and open it in Notepad++. When you go to save a file on your computer for the first time, click on "File" then "Save As" and give it a name. HTML files will need to have a .htm or .html suffix attached and CSS files will need the CSS suffix(Cascading Style Sheets). When you go to save it the first time, there will be an arrow on the right side of where you name your file which, when you click on it, will let you scroll down to find the correct suffix type for your file. You'll see what I mean when you do it. After the first time you have saved the file, it is already named so do not use "Save As" anymore for that file. If you need to open it again in Notepadd++ to edit it, you can, and then just click "File" and then "SAVE" to save it.


The first HTML file you create - the one that will be your Homepage - you will want to call that "index" because when you eventually upload your website files to a web host like Neocities, that's how its server will know where your website starts. With it's html suffix it will look like "index.html". The rest of your pages you can name whatever you want. When you make and save CSS pages to go with your HTML pages, it's helpful to name them something similar to the HTML page they are linked to, so the CSS page that goes with your index.html page might be called something like "indexcss.css".


Up at the top of the page is also a label called "Run". When you save a webpage, and still have it opened up in Notepad, you can click on "Run" and then scroll down to which browser you want to see it run in. This way you can see how it will appear online when you upload it to your webhost. You'll use this feature A LOT while you're editing your pages. It will, however, only allow you to run the web page on browsers you actually have installed on your computer. I have Firefox(this is the one I use all the time when I'm online), Google Chrome, and Internet Explorer 11. My website works well in all of these because I designed it to. Back a few years ago, each browser rendered the page a little bit (or a lot) differently from every other browser for various reasons, so you had to check several browsers to make sure it would run right for most people. Nowadays, many browsers run on the same engines - or forks thereof - so they should all render about the same. . .usually. There are still occasional differences - and special code for those differences - which you will no doubt find as you go along. I'd recommend making sure it runs well on Firefox, Chrome, and Edge, as that covers the majority of computer users on the Net.


NOTE: The HTML5/CSS3 tutorials in the Tutorials Section by Bucky of thenewboston and Quentin Watt show how to download and use Notepad++. Bucky also shows how to save files and add the .html and .css extensions when you save them.

HTML

HTML (current version is HTML5) is a "markup language" and is what you'll be writing your website pages in so that they can be displayed in your browser. HTML gives the structure to your webpage and uses "tags" represented by <> brackets to organize and display your words, images, audio, links, and any other information that appears on the page. When you are are on a website (like mine for instance), you can right-click your mouse button which will open up a small window on the screen. If you click "view source" in that window, you'll be able to see the HTML code that makes up the page you are on. If there is a CSS style sheet or Javascript file asociated with the page, it should be listed as a link at the top of the HTML page in the "head" of the document. Clicking on either of those will further open up the CSS or JS files allowing you to see that source code as well. You can try it with this page if you want to. HTML and CSS are learned together almost as if they were one thing, since both are necessary together to create a nice webpage.

CSS

CSS - Cascading Style Sheets - is what you use to give style to your HTML page, otherwise it's just a white page with black letters, blue underlined links, and images/videos running in a straight line from top to bottom all the way down the left side of the page. Very booooring. With CSS, you can do things like change the style, look, and color of your text font. This page has a font-size of 20px(pixels) and its font-family - the way the letters look -is Comic Sans MS. You can arrange your divs - the sections of HTML content - around in different ways, for example, I've moved the section containing my "kitchen-y" images to be on the right side of my KITCHEN psge. The latest iteration of CSS is called CSS3 and there are some additional cool things you can do with it. Watch the Bela Lugosi vampire image for a little bit and it will begin to fade in and out. . .slowly. The moving words along the bottom of the image are an HTML tag called a marquee. Also, CSS3 has keyframe animations that can be used to do something like make the evening sky fall and the spaceships appear at certain time intervals like I did on this page. That last one took me a little while to figure out how to do, but making something apear and disappear is pretty easy - just playing with the "opacity" of an object. ( Opacity is an attribute that all HTML objects have which can be manipulated with CSS.) It used to be that anything "active" that was done on a page was programmed with Javascript, but CSS3 has incorporated SOME of those abilities over the last few years.

JAVASCRIPT

The last thing you will need to know is Javascript. Javascript is the "language of the web browser". It is not a markup language or a style sheet, but an actual programming language with variables, arrays, for loops, functions, and objects. It is used whenever you want to make your page dynamic or interactive. For example, whenever you are changing the state of the webpage, like inputing and saving information into Amazon, that is Javascript. Games that you play in your browser are programmed in Javascript and run on the HTML Canvas. It's a really neat object-oriented language to learn and, for such a "small" language, it's incredibly versatile and powerful. I highly recommend learning it at some point but it is a bit more complicated than learning HTML5/CSS3. For our purposes, we only use JS occasionally to punch up our webpage with small scripts that do things. I use a Javascript function to make the red LED's flash in my Workshop, and the lightbulbs to blink around the Arcade border. I also use a script to change the color and background image in the Unicorn Grove. Click on the word "Unicorn". And in the Wizard's Study, click on the chess rook (it may take a few seconds to work). A lot of these kinds of thing can be found just by Googling something like "How do I change my background image with Javascript". You can also go to a page where I have a script, right click on the mouse and then left click on "View Source". Often times I've written the script functions right at the top of the page in the "head" section. I'll put a JS tutorial link down in the links section so you can watch it just to get a basic understanding of how the language works, but it isn't really necessary at the beginning to know JS, just HTML5/CSS3.

NEOCITIES

At some point, once you have a few pages of your website written and saved to files in a folder on your computer, you'll want to upload them to a web host so that everyone on the Internet can see them. I use NEOCITIES It's free, Kyle, the creator, gives you tons of space, and there are no ads put on your pages to collect revenue like most webhosts do. HERE you can see all the most followed sites on Neocities. (I'm about halfway down the first page). If you click on the website image or the website name in red letters, it will take you directly to the site. If you click on the black lettered name just underneath next to the little person image, it will take you to their profile and you can also access their website from that place. Whenever you're ready to do that, let me know and I'll walk you through it. It's very easy to do.

HTML5/CSS3 TUTORIALS

Okay, here will be some of the tutorials I went through when I was first learning web programming. You will want to create a lesson folder on your computer where you can store the HTML/CSS files you write while watching the video lessons. i still have a whole folder of them because they are useful as a handy reference for how to do things if I forget - although I usually use my website as a reference these days since there are so many different things on it. :)


The first place I want to take you is called the littlewebhut. Now, some of these videos may go a bit fast because there is so much information in them - especially when he gets to the CSS videos. I had to watch them several times to really grok what was going on. So don't worry about having to stop and replay stuff 100 times. It will take a little while before you really get the hang of the terminology and how all of these elements interact. I watched several tutorials and kept copious notes over several months before I even began making my website. That's just me. I like to get all the information I think is necessary before jumping into something. You may do it differently. There is a nice little video on centering images in the CSS lessons that I found to be very useful, FYI. The video lessons are also written out so you can read what he was talking about. HERE is the set of HTML5 videos and HERE is the set of CSS videos.


The next place is my favorite to learn programming from because Bucky Roberts of thenewboston is just a fun guy to listen to. He has Youtube tutorials on all kinds of things and his HTML5/CSS3 tutorials are very good. There are a couple of things to know though. Many of these tutorials on the web were written a few years back, before HTML5 and CSS3 were fully developed and solidified, so, here and there, you will find outdated information. Here are a few examples: 1) You dont to define how DIV names like "main", "section", "aside", etc operate in your CSS file. That was only necessary at the time before browsers were updated to understand these CSS keywords. 2)You do not need to write http:equiv ="content-type... in the head of the HTML document when linking to CSS or Javascript files. This was a convention from a time when CSS and JS were not the default standards for styling and scripting HTML pages. 3) CSS3 has added something called "Flexbox" which makes it easier to create certain arrangements with your HTML DIV's. It's something that Bucky will talk about in his videos. I would recommend watching the videos about it just to get an idea of what it is and how it's used, but the keywords have changed since the videos were made and so using them will not work on modern browsers. The Flexbox Method isn't used as a default anyway, it's only useful for special cases. Still, this is a great set of videos and when you're interested in learning Javascript, he's got videos for that too.


HERE is another set of Youtube videos on HTML5/CSS3 by Quentin Watt, a guy living in South Africa. These lessons are also very good and I like listening to him. They cover much of the same ground as Bucky's, with a few new things. I would recommend watching both these and Bucky's videos all the way through, because different perspectives are always helpful when learning new things. . .and it's fun. He also describes how to download and install Notepad++.

OTHER RESOURCES

I will add to this list as I think of things, but here are a few places that will be useful for finding information or images, fonts, and other things related to making your website. The W3C (World Wide Web Consortium) is responsible for deciding the standards of HTML/CSS/JS and how all the elements should be written and operate in the browser, so they have literally tons of useful information online. HERE is a complete listing of all of the HTML tags and how they work. HERE is a list of all of the CSS keywords and what they do. And HERE is a Javascript tutorial from the W3C that's very useful. Moving away from the W3C are some other resources. The little Webby Corner in my Library has a lot of links to places to find animated gifs, blinkies, and graphics to use, different fonts for your text that you can download and use, and other things which may become useful over time. The Programming Book in the library has links to tutorials on different types of programming and programming resources. All of my HTML, CSS, and JAVASCRIPT tutorials are linked from here. I almost forgot to add a link to a page of CSS COLORS

FOOTNOTES

Well, that's all I can think of at the moment. I imagine you will have a million questions as you go along, so don't hesitate to ask. If I can't answer them I will probably have a good idea of where to look to find the answer. My Google-Fu is pretty good and I've been doing this for a few years now. Here is the LINK to the original homepage I made for your future website a few years back. You don't have to use it, lol, I was just having fun. But you might want to save the moon, star, or heart gif's from it for use on your own site. I created the glittery name of the site with a glitter text website that no longer exists. :( But there are other places online to create glittery text. :) Let me know if you need anything else. I love you always and forever.