COMPUTING
HTML & CSS
Introduction - Lets get started!
Firstly, create a folder called "WEB" save this in a suitable location (E.g. My Documents or Desktop).
Next, select the text editor you are going to use. You can use Notepad but there are other free and more intuitive options available (I have made a list of these and added links to them on the Wakelet support page). The examples I use throughout this task is Visual Studio Code - So mine may look a little different to yours, but don't worry about that.
Once you have opened your text editor of choice, save the document before anything else. Save it to the folder you have just created and make sure you save it as a .html file. I'm calling mine "index" so mine's going to be "index.html", I suggest you call your's that too.
If you are working with Notepad, its worth noting that it will save as a .txt file, so you have to be mindful to add the ".html" at the end of the file name. Alternatively if you are using Brackets, Notepad++ or VS Code (like me), the drop down file list allows you to select "html" - This is demonstrated in the images below.
Once you have completed these steps, we are ready to go!...
Example of file options in Notepad++ and VS Code
As you can see in the two images to the left. If you are using a text editor such as the aforementioned, it adds certain intuitive benefits to your experience.
Firstly, they can be used for many different coding languages. The syntax checker generally adapts to the type of file you save the document as. (E.g. - If you save the document as an HTML file, they will apply HTML syntax checking) which is SUPER handy if when you are starting to learn.
Secondly, it is work nothing that Brackets, Notepad++ and Visual Studio code are not classed as IDE's (Integrated Development Environments), that are classed as Text Editors, but I like to think of them as 'Intelligent Text Editors' as they come with a lot of handy features when writing source code, however, they lack the compiler and the debugger aspects that are indicative of an IDE such as Visual Studio and NetBeans.
NOTE: Do not get Visual Studio and Visual Studio Code confused. VS Code is a lightweight coding environment with no compiler, though, is still scalable.
Stage 1 - Right, now you have created a folder, opened up your text editor of choice, created a new document and saved it as a .html file. Lets gets to the goin'! Firsly, write the following text into your new html document:
Once you have done this, navigate to the folder you have saved your file to, right click on it and 'Open with' a web browser of your choice (E.g. - Chrome, Firefox, Edge, Safari, Opera, etc.) How does it look??...Pretty basic, right?
Stage 2 - Now we have added a basic structure to our HTML Document, let's add some markup to it! Look at the additions I have made in the following image and add them to your project!:
WORTH NOTING: You may have notices I have put the source information in a funny looking tag (I.e. - <!-- -->) By putting text in these tags it makes it a comment. Comments are really handy because it allows you to make notes about your code but the compiler (I.e. - The web browser) doesn't pick them up and thus, does not include them when your web page is rendered!
<!-- Pretty neat, huh? -->
Stage 3 - OK, so now we've added some basic markup tags to our project. Let's really punch this project to 88! Let's add a title and an image to really add a bit more va-va-voom! Please add the following code to your project:
The image can be found below. Please download this image and save it in the same folder you created and saved this html document in. This is really important that it is in the same location.
I called my folder "WEB EXAMPLE" but as you can see, I've saved my HTML file and the picture here. They must be in the same folder and the filename in the code must match exactly.
Please download and save this image as 'kings.jpg'
Stage 4 - We are now going to add some styles to this project with some embedded CSS. We do this by adding the following text into our project in between the <head></head> tags.
WORTH NOTING: Embedding CSS is not necessarily the best practice, but it is essential you start here to better understand its function. Should you be interested in learning more about CSS and the various ways of applying it to HTML, head over to the wakelet page and look through the materials.
Stage 5 - Now you have completed the tasks this far, it's time to flex your web building prowess! Create another web page about a band of your choosing. Make sure you create a link on that page that takes you to this one. Then create a link on this page to take you to your new page so you can click back and fourth between the pages.
You will need to undertake some research on creating links, though there is some material on the wakelet page you could check out. Remember to save your new webpage in the same file as you created earlier. Experiment with adding multiple images.
If you got this far, well done! that's a great effort! Maybe you can move onto the networking element now! Click on the button below to navigate to the other sections of the site.
