Publish Your First Website

Your mission is to recreate this webpage in a plain-text editor, test it locally, and then publish it to a web server.

Mission Overview

In this activity, you will practice the complete web-publishing workflow. You will write HTML, save your work as an HTML file, open it in a browser, and upload it using an FTP client.

Important: Create your webpage using a plain-text editor. Do not use a word processor such as Microsoft Word.

Files You Will Create

Main webpage

Save your webpage as index.html. A web server commonly looks for this filename when someone visits a folder or domain.

Images folder

Create a folder named images and place the supplied image inside it. Your folder structure should look like this: 

your-folder/
├── index.html
└── images/
    └── web-publishing-workflow.svg

Steps to Complete the Lab

  1. Create a new folder for the project.
  2. Open a plain-text editor.
  3. Write the HTML needed to recreate this page.
  4. Save the file as index.html.
  5. Open the file locally in a web browser.
  6. Correct any errors you find.
  7. Connect to the web server with your FTP client.
  8. Upload index.html and the images folder.
  9. Visit your assigned web address and confirm that the page works online.

Required HTML Features

Web Publishing Vocabulary

HTML
The markup language used to structure the content of a webpage.
Web browser
Software that reads webpage files and displays them for a user.
Web server
A computer or service that stores website files and sends them to visitors.
FTP
A protocol used to transfer files between computers over a network.
Local file
A file stored on the computer you are currently using.
Remote file
A file stored on another computer, such as a web server.

The Publishing Workflow

Diagram showing a text editor sending an HTML file through FTP to a web server and then to a web browser

Notice that the image uses a relative path. The browser starts from the location of index.html, enters the images folder, and then loads the image file.

Local and Online Testing

Test What You Are Checking Common Problem
Local browser test Whether the HTML works on your computer The file was accidentally saved as index.html.txt
Image test Whether the browser can locate the image The path or filename is incorrect
Online browser test Whether the files were uploaded to the correct server folder The image folder was not uploaded

Helpful Resource

Visit the MDN guide to structuring web content for additional HTML examples.

Before You Submit

Confirm that each statement below is true: