Getting Ready - Chapter 1
Getting Ready to Write HTML
(View the videos above and complete Exercise #1 yourself)
The good news is that you probably already have everything you will need to start learning. If you have a Mac computer or a Windows-based computer, you already have software on your computer that will allow you to write HTML.
HTML (Hypertext Markup Language), as we have mentioned, is the language in which the content for websites is written and it can be written in a simple text editor.
If you have a Mac computer, you have a program, called TextEdit, installed on your computer already and if you have a Windows-based computer, you should have a program called Notepad.
If you are on a Mac, you can access TextEdit by going to Launchpad, then clicking on Other and finally selecting TextEdit—an icon with a piece of paper and a pen on it.
To access Notepad on your Windows computer: click Start, then point to All Programs, then to Accessories, and then select Notepad.
Before we get started, let’s talk a little bit more about the language of HTML.
SYNTAX
Any language has a set of rules, or appropriate words or phrases (syntax), that make up that language. Programming languages are no different. In fact it’s even more important to use the appropriate syntax when writing programming languages because computers can’t understand what you mean if you don’t spell it out for them. For instance if you told your dog to fetch a stick, your dog could run right over to the stick and even bring it back to you (if he doesn’t decide to run off with the stick!).
Well a robot, if given the same task, would have to be (programmed or) told how to move over to get the stick; how to bend over; how to reach down; how to grab the stick; and so on. Everything that a computer does, it needs to be programmed to do. This is the beginning of thinking “programmatically.” When you have a task to do with a computer, you have to think about the way in which a computer would need to be told to do the task in order for that task to be completed. A computer needs to be given specific instructions.
ELEMENTS
HTML uses elements and tags to help structure a document or website.
An element consists of opening < > and closing </ > tags. If you wanted to write something in a paragraph you would write (color has been added to differentiate between the content and the tags):
<p> My name is Ms. Smith. </p>
This would show up on a website simply as:
My name is Ms. Smith.
Everything in HTML needs to be included within the right element in order for it to show up properly on a computer’s screen. Before we get into using some common elements, let’s talk about how your HTML document should be structured. When you start to write an HTML file, you will use the following elements:
<!DOCTYPE html> (Declares that this is an HTML document, with the latest standards/version of HTML).
<html> (Begins the document)
<head> (This information is not displayed on a computer’s screen, but it includes information like the description of the website, links to style sheets, the title —which will be shown in the top of the browser’s window, etc.)</head>
<body>(This section includes everything that will be shown on the webpage—the images, paragraphs, artwork, videos, etc.)</body>
</html> (Ends the document)
LET’S START LEARNING MORE
So now that you have an overview of the basic structure for an HTML file, let’s learn a few elements so that we can start to write them.
As we have mentioned, you start off every HTML document with:
<!DOCTYPE html>
Then:
<html>
The first place you will begin to write HTML will be in the <head> </head> section. The title of your website will go in this section:
<title> My First Website </title>
<title> My First Website </title>
This does not show up in the main window of the website, but rather in the top of the browser’s window— which we will see in a minute. The next two elements that we will learn about are headings and paragraphs.
Headings tell the browser about important information that’s coming up in your site.
<h1> This is my first website </h1> Headings range from h1, h2, h3, h4, h5, through h6—with h1 being the largest.
Paragraphs are written inside the <p> </p> element. For example:
<p> I would like to share some important points about making a website. </p>
So, in HTML, this is how you write these elements... elements usually come with an opening and closing tag:
<title> Title goes here </title>
<h1> Heading goes here </h1>
<p> Text or paragraph goes here </p>