HTML 101
Any time you teach, you have to make some assumptions about your students. These are my assumptions about you; I assume that you:- Know how to surf the net,
- Have no prior experience with HTML,
- Are not a computer programmer,
- Know how to create, edit, and save files.
There are two subjects you need to learn, no three, no four—yes, four subjects you need to learn in order to make attractive web pages:
- HTML - HyperText Markup Language, the language of the web;
- CSS - Cascading Style Sheets, provides the “look and feel” of web pages;
- JavaScript - This isn’t absolutely necessary, but knowing a little programming can help you make your web pages more interactive and interesting;
- It helps if you know a little about creating graphics and editing photos. Again, not absolutely necessary, but knowing how to work with images will make your web pages more attractive.
Let’s begin at the beginning.
HTML stands for HyperText Markup LHTML uses tags and attributes to define the structure of a document.
HTML documents are interpreted by a web browser such as Internet Explorer, Firefox, Safari, or Microsoft’s newest browser, Edge.
HyperText refers to the links that connect a web page to another page on the same site or somewhere else on the web.
Markup refers to the tags that are used to define a web page’s structure.
HTML is based on XML, eXtended Markup Language, and shares many characteristics with it. (But you don’t need to learn XML in order to use HTML!)
What do you need to have in order to create web pages?
- A computer with an Internet connection.
- A text editor of some kind. Notepad.exe on Windows, TextEdit on a Mac, or Vim on Linux are all good. You can use any editor that saves files as plain text.
- A web browser so you can see what your pages look like.
Enough talk. Let’s create a web page!
There are a few things that you need to include in every web page you create. Create a new file in your editor of choice and type the following text:<!DOCTYPE html>
<html lang=”en”>
<head>
<title>My first web page</title>
</head>
<body>
<p>This is where the content goes!</p>
</body>
</html>
Save your work to a place where you can find it. In the beginning, it doesn’t much matter where. I suggest that you create a folder for the lessons in this class (name it "HTMLessons") and keep all of your files inside of it. I suggest that you call this file “MyFirst.html” but you can call it whatever you like.
Now run your web browser and open the file. In most cases, Ctrl+O (Command+O on a Mac) will allow you to browse to a file on your local computer and open it.
What you should see is a mostly blank page with the sentence “This is where the content goes.”
What does it all mean?
Let’s go through the contents of your first HTML page bit by bit. The first line tells the browser that this document will be using HTML 5. Earlier versions of HTML required a more complicated DOCTYPE statement but we don’t have to worry about that. By including this line, we tell the browser that it doesn’t have to try to work around the quirks that were part of earlier versions of the markup.The second and last line of the document work together to define a container for the rest of the page. <html lang=”en”> is the opening tag. The part that follows “html” tells the browser that the language for this page is English. Other possibilities include: fr (French), de (German), it (Italian), and es (Spanish). If you want to know more about the lang attribute, you can check out the definition on the w3c website, Specifying the language of content: the lang attribute (https://www.w3.org/TR/html5/dom.html#attr-lang).
Next, in lines 3 to 5, we define the head section of the document. The head section contains metadata (data about the page, as opposed to data that will be displayed in the browser) for the current page. In our example, I have included the only required child tag for a web page, the title. The text between <title> and </title> will usually be displayed either in the title or the tab of the page.
The next section, the body, is where all of the visible content of the page is placed. In the case of our sample document, the only content is a single paragraph. The text between <p> and </p> is the text that you saw in the browser.
With the tags I have shown you so far, you could actually create a web page. It would look boring, but it would be a page that people could read. Let’s add a little bit of interest. I’m going to give you a couple of other tags to play with. And that is exactly what you should do, by the way, PLAY!
Headings
First let’s talk about headings. HTML defines headings with levels from one to six. You use the heading tags instead of the paragraph tag. The heading tags look like this:<h1>This is heading level 1</h1>
<h2>This is heading level 2</h2>
<h3>This is heading level 3</h3>
<h4>This is heading level 4</h4>
<h5>This is heading level 5</h5>
<h6>This is heading level 6</h6>
To tell the truth, I’ve seldom gone any further than heading level three, but all six of them are there for your use.
Text formats
Here are some tags you can use to control the look of your text. These tags are used on sections of textwithin a paragraph or other container. So far, you’ve seen the heading tags and paragraph tags; we’ll talk about other containers in the next lesson.
Here are the text tags:
<em> - The em tag defines text that should be emphasized in some way. You might use it to set off a technical term, for example. Most browsers will render text between the <em> and </em> tags using italics.
<strong> - The strong tag indicates text that should stand out. In most cases the text marked as strong will be display in boldface type, but this isn’t necessarily so because you can define other formatting for this tag. All of the text between the opening <strong> and the closing </strong> tags will be formatted so that it stands out.
<small> - Text formatted with the small tag is rendered in a smaller font than the surrounding text. It can be useful for a subtitle, or for information that is less important than the surrounding text.
There are more, but I don't want to overwhelm you when you're just starting out. We'll talk about more of them in future lessons.
In the next lesson, we’ll talk about using pictures and links in your web page.
Let’s finish by creating a slightly more interesting web page. This one will be about you! Start a new document in your editor and enter the following text. Once you’re done, don't forget to save it. The name “aboutme.html” is a good choice for this one.
NOTE: Don’t forget to replace my placeholder text with your own information! I’ve set off the text you need to change with curly braces { and }.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>About {Your Name}</title>
</head>
<body>
<h1>All About {Your Name} <small>(123) 456-7890</small></h1>
<p>Hi, my name is <strong>{Your first name}</strong>, and I have created this website to show my skills with HTML. I am a {your job title} and am learning HTML in order to expand my skills.</p>
<h2>My Family</h2>
<p>{Tell us about your family here.}</p>
<h2>My Job</h2>
<p>{Put stuff about your job here.}</p>
<h2>More stuff about me!</h2>
<p>{Feel free to add anything you like. Try out all of the tags I showed you and, above all, have fun!}</p>
</body>
</html>
If you have trouble with the page, feel free to leave a question in the comments for this post. I’ll answer them as quickly as I can.
Comments
Post a Comment