Software Development Course Labs
A Simple Static Websites
Websites are written in a language called HTML (HyperText Markup Language). Real sites will have a mixture of other technologies too, but you can use plain HTML to produce a static website. That’s a site with fixed content, where everyone who browses to it sees the same thing.
In this lab you’ll see how to write some HTML code for a web page and open that page in your browser. You don’t need any special tools installed for this.
Reference
-
Overview of HTML - Free Code Camp
-
HTML tutorial - W3 Schools
-
HTML Fundamentals - Pluralsight
Write some code!
Open a text editor and create a new file:
- use Notepad on Windows
- or TextEdit on Mac - click New Document and then in the menu bar click Format…Make Plain Text
Copy and paste this into it:
<!DOCTYPE html>
<body>
<h1>Heading</h1>
<p>paragraph</p>
</body>
This is HTML, the language of websites. It’s not a full programming language but it still has a strict syntax and it needs something to turn the code (the HTML) into the application (the website).
Save the file in your Documents folder and call it “index.html”
-
if you’re using Notepad, click File then Save As. In the window click the dropdown Save as type and choose All Files (*.*)
-
if you’re using TextEdit it will ask you to confirm you want to use the extension .html - you do :)
Browse to the website
Find the file using Windows Explorer or the Mac Finder:
- open your Documents folder
- find the index.html file
- right click and choose Open With
- then select your web browser.
You should see something like this:
Lab
Developers don’t just copy-and-paste code (although they do that a lot…) You can have really good knowledge of a language, and still need to research when you want to do something you haven’t done before.
Give that a try - open your index.html file in the text editor again and make some changes:
- add some more text
- make it bold or italic
- add a link to https://dev.courselabs.co
- what happens if you make a syntax mistake?
Save any changes you make and refresh your browser to see how they look.
The reference section at the top will give you some ideas where to look.