Build a static site, part 1 (HTML)¶
In this guide I'm going to provide resources and direction as you work to build a local, static HTML webpage.
Local and static?¶
Local. The site lives on your machine. You can view it in a web browser on your machine, but it isn't "on the internet" because no one else can access it through their web browser.
Static. The site does not rely on server-side scripting (as in dynamic sites). The content is often written in html and the site relies only on HTML, CSS, and Javascript.
Before you begin¶
-
If you don't have a text editor installed, check out this list of popular text editors or Mozilla's Installing basic software.
-
For a quick introduction to HTML, read Chapter 9: Introduction to HTML Basics in Open Technical Communication.
-
For a more expansive introduction, I highly recommend Mozilla's Getting started with the Web, particularly Dealing with files and HTML Basics.
-
For a more interactive tutorial, check out W3schools' HTML Tutorial. W3schools also has some pretty handy HTML reference documentation.
Set up folders on your desktop for a new site¶
Down the road, you can use a service to host your website, but for now we can set up the basic structure, add some content, and view the site locally.
Create a folder for your web projects to live in¶
I'll put mine on my desktop and call it "web-projects".
In that folder, create another folder to store your website.¶
I'll call mine "portfolio-site-draft.
Add subfolders to store images, styles, and scripts¶
In your website folder, create three subfolders called images, styles, and scripts. You won't use these right away, but it's good to get in the habit of creating them now.
Add and edit your homepage¶
Static websites generally contain one HTML file for each webpage.
Add a homepage¶
Open your text editor, create a new file, and save it in your website folder (Desktop>>web-projects>>test-site-folder if you've been using my names). By convention, the hompage file is typically named "index.html"
Check your work as you go!
Open the index.html file in your browser. You should see the filepath in the url bar and a blank webpage below it. To check your work as you go, you can refresh this page in your browser each time you save changes to your index.html in your text editor.
Add the common HTML elements to your homepage¶
Nearly all html files will begin with the following elements: <!DOCTYPE>, <html>, <head>, <meta>, <title>, and <body>.
If you are unsure what any of these elements does, Mozilla's HTML Basics has a great description of each.
Check your work as you go!
Save the index.html file and then refresh your browser. Does the content of your <title> element show up in the browser tab? Does the content of your <h1>appear on the page?
Add layout elements and content¶
At this point, you can add layout elements and start incorporating your content. Common layout elements include <header>, <nav>, <section>, <article>, <footer>.
Here are some additional resources on layout elements and semantic HTML:
You have the bones of a homepage-- now we just need to add some style with CSS!