Creating Your First Website

In this tutorial you will learn to build a basic web page that has a linked style sheet and interactive javascript file.

Create a folder for the files we will create to be stored. Feel free to name it however you please, just remember where it is located because we will be saving files to it later.

Open your favorite text editor. In my case I will simply be using the built in notepad of Windows 10. Once you have a new file up type the following:

<h1 id="heading">This is my first web page, brought to you by an instructable!</h1>

This is what is known as an HTML tag. It stands for Heading 1. The text we put within this tag will show up as a heading on the page. It is opened and closed like this <h1></h1>. The text in between the two tags is what will display in your web browser. The portion that says id="heading" is giving that tag an attribute which we will reference in step x. Once that is done go ahead and save the file in the folder we made in step 1 as index.html.

Now that we have completed navigate to the file within the folder we created, right click the file and select the "open with" option and select the web browser that you use. In my case this is google chrome. Now view the labors of your hard work thus far!

As is, our website is pretty plain. We are going to add what is known as a cascading style sheet to spice things up a bit. Create a new text file and type the following:

h1{color: blue; text-align: center;}

What we are telling the browser here is to find any element in an h1 tag (which we learned about in step 2) and give it a color of blue and align it in the center of the page. Save this file in the folder we created in step 1 as style.css.

At this point we have two seperate files that don't know about each other. We need to tell our index.html file that we have a style.css file that we want it to refer to and grab some styling from. To do this we are going to open our index.html file in our text editor, and above our h1 tag we are going to add what is known as a link tag. The link tag does just as its namesake implies, it links to something. In our case a stylesheet. Go ahead and type <link rel="stylesheet" href="style.css">. The link tag is a self closing tag so an ending tag is not required. The rel stands for relation and href is telling the index file where our external file we are referencing is located. Now save that index.html file.

Revisit step 3 and reload your web page and take a look at how the changes reflect.

Reopen your index.html file in your text editor and type the following:

<button id="button">Click me!</button>

and save the file. This creates a button element on the page. Once saved, reopen the file as shown in step 3 and ensure the button is in the bottom left hand side of your page.

Lastly we are going create our javascript file. This is what will make our site interactive. Open a text editor and type the following:

document.querySelector("#button").addEventListener("click", function(){

document.querySelector("#heading").innerText = "Changing the heading on the fly"

})

What we are doing is asking the document to find us an element with the ID of button, and we are going to have the button respond to a click event by changing an elements text with the ID of heading to "Changing the heading on the fly". Save the file as button.js in the folder we created in Step 1.

As we did with the style.css file, we need to tell our index.html file about our javascript file. At the bottom underneath everything we have done so far type the following:

<script src="button.js"></script>

The script tag allows us to add a scripting language (in our case, javascript) to provide functionality to our page. We are telling it to look for a file called button.js and add all the code contained within it to our index file. Once you have that typed in, save the file and open the file again as shown in step 3.

Now go ahead and click the button and watch the heading change!

Congratulations!! You have now created your first interactive web page! I wonder how much further you could take it knowing what you know now??