menu

ICC565

HTML

1.1 Intro to HTML

Contents

Overview

If you know HTML, or hypertext markup language, you know how to create the basic building blocks for the web. HTML is the standard markup language for Web pages. Meaning, it provides the instructions to your browser for how to display the content. With HTML you can create your own website.

In this overview lecture you will learn:

  1. The difference between the web and the internet
  2. The three things that comprise a webpage
  3. What HTML is and who creates the standards

Project Set Up

  1. Create a folder for this course somewhere on your computer (or external hard drive). Call it "ICC565."
  2. Within that course folder, you will create a series of project folders (you will see this in future videos).
  3. Consider using the Google Drive or Dropbox desktop applications so you always have a backup.

Text Editors

A simple text editor is all you need to write HTML and create a web page. A text editor is an application that you can use to edit and create plain text files. Applications like Microsoft Word or Google Docs are NOT text editors. They are word processors and allow you to have formatted text like: fonts, indentation, as well as font decoration like boldness. This pre-formatted text doesn't translate well to HTML.

On a Mac you can use the already-installed Text Edit and on a PC you can use Notepad. We will use Sublime Text. This text editor has many features and shortcuts that are ideal for writing code such as syntax highlighting, a customizable appearance, and extensibility.

Creating a Page

  1. First, create a sub-folder called "demo1" within your course folder. Keep folder names lowercase and do not use spaces.
  2. Then open up your text editor and type this simple syntax into a new file:
    3. 

<p>Hello World!</p>
  3. Go to the File menu and then Save As
  4. Save your file with a ".html" file extension and be sure it is in the new sub-folder you created in step 1.
  5. Navigate to your project sub-folder and double click the html file you just created to open it in the browser. If that method of opening does not work for you, then you can a) drag and drop your file into the web browser or b) inside the browser go to the File menu and then Open File (and navigate to your file and click open).

To make changes to your file:

  1. Go back to your text editor and make a change to the text
  2. Save the file (note: you only need to go to Save under the File menu this time
  3. Go back to your browser and hit reload