Your First Webpage - HTML for Absolute Beginners

Last updated January 14, 2022 by Jacob Paris

Create a new page.html file in a text editor (TextEdit on Mac, Notepad on Windows, or whichever you prefer) and open it in your browser. Every time you update the file and save, you can see the changes by refreshing your browser.

htmlpage.html
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>Cheeto</title>
5 </head>
6
7 <body>
8 <h1>Cheeto</h1>
9 </body>
10</html>
11

The line <!DOCTYPE html> tells the browser this is a modern HTML document and that's how it should be read. There are other doc types for XML or older versions of HTML, but this is the only one you'll need to know now.

It always goes on the first line before the <html> tag.

Changing the font

Inside the <head>, add a <style> tag to change the font.

htmlpage.html
<head>
<title>Cheeto</title>
<style>
html {
font-family: sans-serif;
}
</style>
</head>

The <style> tag is for including CSS (Cascading Style Sheets) in your website.

CSS is a different language from HTML and makes up one of the three pillars of web development (along with Javascript). With CSS you can set rules for how your site should look.

A CSS rule is written this way

tag {
property: value;
}

The CSS we wrote above can be read as "The <html> tag should choose its font-family from the default sans-serif font."

You can be more specific.

html {
font-family: Helvetica, Arial, sans-serif;
}

This rule will choose Helvetica if it's available, otherwise Arial, and falling back to the default sans-serif otherwise.

Page 2 Page 4