In this part of the course we will be making very simple webpages using only html. Bacuse we are only using html the web pages will look a bit dull, but the purpose is to get a good understanding of what html does. It is also necessary to understand HTML in order to use CSS.
Tools
First you will need a code editor to get started. A code editor is a program that lets you edit text files as pure text. On a windows machine the application notepad can be used as a code editor, but it lacks features so it is better to install a free code editor. You can use whatever code editor you want, but for the demonstrations in this class I will use Visual Studio Code and if you haven’t used any code editor before it might be easier to follow the classes using the same software. There are also plenty of other code editors to choose from and some worth mentioning are Sublime text, Atom, Brackets and Notepad++. Click on any of these links to download the software yourself.
The other main tool you need is a web browser. There are many browsers to choose from and when making web pages it is a good idea to have many browsers installed to test your web pages. Chrome is the biggest by a large margin so you must have that. It is also a good idea to install Firefox, If using a Mac Safari is probably installed and likewise with Edge on Windows. If you want to try something different you can also check out the Vivaldi browser made by the creators of Opera. For examples in class we will mostly be using chrome and sometimes Firefox or Edge.
Consider an extra screen for Zoom
Last years course was done entirely on Zoom. I mentioned in class that there was a significant increase (3x) in students having to redo assignments compared to earlier years. When discussing this with the students they said that it was difficult to follow instructions on zoom and writing the code on their own at the same time and on the same screen. It makes sense that it is harder to switch between zoom and a code editor on the same screen and I believe that is the most challenging aspect of doing this course over zoom. I believe having a second screen dedicated to zoom can help with this. In my opinion that should be a screen larger than a phone since you should be able to read code on it, so I reccommend tablet size or bigger. There are many cheap ways of getting a 2nd screen if you don’t have one available:
- You can use a hdmi cable from your laptop to your tv and run zoom on the TV
- If you have a 2nd monitor use it
- There are very cheap 2nd hand monitors available. Here are some ways to get one:
- Ok Data monitors – Some very cheap moitors (250 nok) here with DVI and VGA connections. This might require an adapter / special cable from your laptop which typically has hdmi or displayport connections. If you have a Mac you might need a dongle of some kind.
- FINN.no – Norways largest online 2nd hand marketplace
- Or just get a new monitor. Here is a link to a price comparison site, prisguiden.no, sorted on cheapest.
Having an extra monitor is also a productivity booster in general in my opinion.
Let’s make web pages!
First we need to sort out files and folders. When we make html pages they are just a pure text file but with formatting and naming that makes them recognisable as a web page. A web site typically consists of several files such as html documents, images and css files. We will deal with images and css files later. These files should be organized in folders in a consistent structure.
Start your code editor and make a blank new document. In Visual studio code (VS Code from now on) there is clickable text asking you what kind of document you are making. You can click on it and choose html if you are using VS Code. Then navigate to a folder (Not the desktop!) and save your file as an html file. It is important that you save it as an html document so the browser can recognize the file and you will also get a lot of help from VS Code (highlight, autocomplete, error detection etc..) as soon as the document type is set.
HTML describes the structure of a document – chaper 1 & 2
If you are completely new to HTML and CSS I reccomend picking up the book. It explains all the concepts in a level of detail that we don’t have time for in class.
HTML is short for Hyper Text Markup Language. The ‘hyper text’ part tof the name refers to how links allow us to navigate between documents. The markup part of the name refers to the structure. In HTML the structure is defined using tags, and created by nesting tags inside other tags. Let’s look at the basic structure of a document:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
First notice the angled brackets around each tag, then also notice that the tags in the examplke above come in pairs. The first html tag defines the start of the structure while the last html tag has a slash that means this is a closing tag. There are two other pairs of tags, head and body, and you can see that these also have opeing and closing tags with a slah in the closing tags. Not all html elements have double tags, some just have s single tag. The html elements that have opening and closing tags can also contain other elements within them. In the code above the head and body elements are placed inside the html element.
The html structure above exists in all correctly formatted web pages. All web pages should have a head and body element inside an html element. Everything the user will see in thebrowser window will exist inside the body tags in the html document. The head element is for other stuff such as title (visible in browser tab) and slo links to external scripts, css files and external fonts.
<!DOCTYPE html> tells the browser what version of html we are using. We will only use html5 and then the doctype should always be as in the example above.
Let’s remake this in the code editor. You blnk document should be saved as an html file before starting. This trigger autocomplete in the code editor and that is a huge help.
On the first line of the document make and angled bracket and then an exclamation mark, like this:
<!If you have saved your file VS Code will suggest <!DOCTYPE html> for you, click on it or press enter to confirm. This is auto complete helping you write code. Let’s keep going. On the next line type ‘<ht’ and choose html. Then make the closing angled bracket ‘>’. VS Code should now have made a closing tag as well so you now have this:
<!DOCTYPE html>
<html></html>Place your marker between the opening and closing tags and click Return a few times to get some space. This is only to make the code more readable to you, the browser doens’t care but it quickly becomes messy to keep everything on the same line.
<!DOCTYPE html>
<html>
</html>Now let’s add head and body. Again start typing <he and use autocomplete. Do the same with <bo and autocomplete. Click enter between the opening and closing elements to keep it tidy. You should now have something like this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>'
</body>
</html>Add some content
With the structure set it is time to add a title for the browser tab and some text. We will add some new elements to the page. First we will place a title element inside head. Between the head tags start typing <ti and the choose title. Now you can write your actual title bewtween the title tags. That title will be visible in the browser tab.
Now move the cursor so you are inside the body tags, start typing <h1 and make a h1 element. This is a large heading. Write your heading between the two h1 tags.
Finally lets add some paragraph text. This is done using the <p> element and this is the most common html text element on most pages. When making paragraph text for example pages or pages in development it is common to use dummy text to fill up the page and check how the layout is working. The most common dummy text is one simply know as Lorem Ipsum, you can read more about it on Wikipedia.
Visual Studio and other code editors have built in functionality for making dummy code quickly so lets try that. This will work for VS Code, so some googling if you are using some other editor.
Start typing <p and make a pair of paragraph tags. Between the p tags write lorem120 and click enter. VS Code has now generated 120 words of dummy text for you. This example was made with lorem40, so 40 words:
<!DOCTYPE html>
<html>
<head>
<title>My title</title>
</head>
<body>'
<h1>My heading</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque error culpa dolorem nam ipsa ducimus tempore officia, magnam exercitationem corrupti reprehenderit velit reiciendis aliquam dolores deleniti molestiae hic possimus officiis. Est eveniet dignissimos commodi hic corporis quasi harum illo ad!</p>
</body>
</html>We can now test this web page in the browser. Save your file in VS Code, then in you file browser (Called ‘Finder’ on Mac, ‘File explorer’ on Windows) navigate to the folder with the file. If it is saved as type html you should be able to double click on it to open it n a browser. Did that work?
Use the validator, your assignment depends on it!
For the assignment you have to make an html site with html code that validates, so make it a habit to check your code in the validator. Here is how to do it.
In VS Code highlight all your code (Win: Ctrl + A, Mac: Cmd + A). Then copy that code to the clipboard (Win: Ctrl + C, Mac: Cmd + C). Then go to the validator:
The validator is easy to fins with google. Start typing ‘w3c html validator’ and it will appear in search results before you get half way typing.
To use it with an unpublished site (that exists on your computer and not on a web server) simply click the ‘Direct input’ tab. Paste your code in and click validate. With the code above you should get a warning for a missing lang attribute. Warning should be fixed, but errors must be fixed. In order to make an error in the code above try removing DOCTYPE and validate again. That should result in a message saying:
Error: Start tag seen without seeing a doctype first. Expected .
From line 1, column 1; to line 1, column 6
In your assignment there should be no erros, so keep testing your code in the validator!