Web 1 - Lesson 1 - Basics

FIrst - what is HTML and why do we care?

HTML stands for Hypertext Markup Language. The hypertext just means text that creates a link, while markup language is the code we use to format web pages. All web pages are essentially plain text. We save them with an extension of .html or .htm - when a browser opens one of these files it knows to look for the HTML coding to display the page.

How do we write these web documents?

Any simple text editor will do. Not a word processing program (they put too many special characters) but text edit on a Mac, and notepad on a PC will work. There are also many text editors out there that are built to help you write code - they will use color coding for certain tags, and have built-in libraries for often used sections of code. There are also editors that let you build the site visually. These are called WYSISWYG (what you see is what you get) - some of these are visual only, while some also let you edit the code. We will be using either textedit or notepad to get started.

So, why should we learn to code?

True, you can use online sites to build pages for you - or use a WYSIWYG editor - and there are many that will accomplish this for you just fine. However, learning how to code can be a lot of fun, plus you will understand how web pages work. Learning HTML is not difficult, but like any programming work, it can be frustrating. A lot of time is spent "debugging" your code to see why it is not doing exactly what you would like to to do.

Getting Started

All HTML pages are split into two sections: HEAD & BODY

The HEAD section is the brain of the page - information in here is used to help create the page (titles, keywords, etc) - this information is called METADATA - it is actually Data ABOUT Data

The BODY section contains the text of the actual page itself.

Tags (or elements) are specific pieces of code that mean something to the browser. These are always surrounded by a pair of brackets <> - this is an example of a head tag: <html>
The backslash / is almost always added to indicate the end of a tag: </html>

When you write your code in the text editor - be careful the first time you save it as an .html file. Often an editor will try to save as a default of .txt which is NOT what you want. We will be using the .html extension.



We will go through this together in class - but these are the steps you will be completing.

Create a folder in the desktop computer and call it Web_1_lessons
- before leaving class you should also upload this folder to your Google Drive folder as a backup and also to keep a copy of your code in case you need to change computers - or, in an even worse case, the computer you are using decides to stop working...
-- I will also be looking at your Google Drive folder to see your work for now - eventually you will be uploading your work to your own website

Creating a new html file and saving it as lesson_1.html

Your first page will include the following:

  • a doctype of html and opening and closing html tags
  • a head section
  • a title tag
  • a body section
  • three paragraphs tags with text to display

* Note that when saving a file you should stay with lowercase letters and stay away from spaces and special characters
** Be sure to put this into the desktop folder you created for Web Design I

View in Browser

There are a few ways to do this
1. Go to your folder - right click on the file and choose open with... and find a browser -
2. While in your brower - choose File - Open - and direct it to your file