What is HTML?

  • HyperText Markup Language
  • Hypertext
  • Markup

Author Notes

HTML stands for HyperText Markup Language and is the language that powers the web. You can break what HTML means into two parts. First is HyperText and then the markup language. Let’s talk about those two things.

HyperText is a document that can be linked to other related documents. Since documents are linked to each other, it creates a web of links that we know as the world wide web.

HTML is called the Markup Language. Markup is special syntax for annotating a document. Think of markup as what your english teacher would do to a document when they correct it. They would ‘mark it up’ with corrections that need to be done.

Semantic HTML

Author Notes

HTML is one of the big three core languages needed to build ANY web page. They are HTML, CSS and JavaScript. HTML is easily the most important of the three and is in chrage of defining the structure of a page. CSS controls how a page looks and JavaScript controls how users can interact with a website. Without proper HTML, the other two languages won’t work.

One of the most important jobs for HTML is to focus on the semantics of your document. Semantic means adding meaning to the content of your page.

Every HTML page has three different parts to it. First, is the structure of the document, which is defined by the markup that you use to add meaning to your page. That’s what we’re talking about today. The second is the styles or CSS that can add the look and feel of the document and the last is the JavaScript that adds interactivity to your pages.

It’s critical that you let each component or part handle the job it’s designed for. So it’s crucial that you NOT add anything that is not markup to HTML. Certain html markup will make certain things look at certain way, but what’s really important is that you focus on adding meaning, not looks to your document using HTML.

HTML is the most critical of the three components. If you mess up the structure of the HTML, then neither the styles will work or the interactivity.

Tag Structure

1
<element [attribute[='value']...>content[</element>]
  • element name
  • 0-∞ attributes
  • No order in attributes

Author Notes

You start HTML tags using the less than and greater than signs with an element name inside. You can use a number of elements inside the greater and less than signs. There are hundredths of elements and the best place to find them is to look online on this MDN website.

Inside the first part of the element you can add none or an infinite number of attributes. These attributes will provide additional information to the browser about the tags you’re using. For example, to create an image, you use the <img> tag, but it doesn’t make sense to add an <img> tag without telling the browser the location of the image, you do that with a src attribute.

Standalone vs Container

  • Inserts vs wraps

Author Notes

Standalone tags like the <img> tag are simply there to insert some element like an image into your page.

Container tags are designed to wrap some other text or elements, so they change the meaning of what you place in there.

Heading Elements

Author Notes

The heading elements are pretty important in HTML, they help you create headings for your document.

There are six heading elements and they are containers, so they need beginning and ending versions of the tags. The number denotes importance, so a H1 is more important than an H2 and so on.

You should use these to define the level of importance of the headlines in your content. Think of it like a book, the H1 would be the title and the H2 could maybe be chapter titles.

Compound Tags

Author Notes

Some tags like the list tags are considered compound tags because they require two sets of tags. One that defines the type of list and another that identifies the different elements within the list.

In the case of lists an OL means that the order of the list items denotes some sort of order like in military ranks. An unordered list means that the list elements are in no particular order like when you make a list of groceries.

Block Level Elements

Major Sections: <h1>, <p>

Author Notes

A block-level element occupies the entire space of its parent element (container), thereby creating a “block.”

Are usually formatted in a new line before and after the tags by browsers

Think of it as a stack of boxes or big containers.

Inline Elements

Inline Elements: <a>, <em>

Author Notes

Inline elements occupy the space that are bound by the parent or container tag, they don’t break the flow of content. They are often placed inside block level elements.

Basic Page

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>UPDATE TITLE</title>
</head>
<body>

<!-- content goes here -->
<h1>Headline</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores vel vitae temporibus aliquid deleniti id culpa soluta natus, corrupti eaque neque et ratione. Laudantium earum assumenda beatae aspernatur id est.</p>
<!-- content goes here -->

</body>
</html>

Author Notes

Every page needs to have a basic page structure using these elements.

The <DOCTYPE> element defines the version of HTML that you’re using.

The <html> element is the container for your entire document.

The <head> element has content that you want the browser to load first and is for information that you want your browser to know about, but not necessarily be displayed to the user.

The <meta> element is a generic tag that you can use to pass certain information about your page to your browser. in this case we’re passing along the charset, which is the types of characters used on this page. In this case it’s roman letters with accent marks, but you can use a different charset for japanese or other alphabets. The viewport meta tag tells the browser that this page has been designed with mobile devices in mind.

The <title> element displays the title on the window menu of the current page in most browsers. It’s also important for search engines.

The <body> element is where all of the content you want your user to be able to see goes.

Resources

  • Saving: index.html
  • Validator: Checks for errors
  • Atom Packages: emmet, linter, atom-live-server, linter-htmlhint, html-entities, linter-csslint, emmets-snippets-compatibility
  • Sample Resume

Author Notes

When saving HTML documents you need to use the .html or .htm exension. You can save yourself and your visitors some time by using a special name for your main html document. If a document is named index.html, then the browser will assume it’s the default document for that folder.

So, for example, if you’ve placed a document called resume.html in a folder called htmlresume in your projects folder…and your site is called mysite.com, then the URL to this document would be: http://mysite.com/projects/htmlresume/resume.html, however, if you name your document index.html, then you can leave the last part out. So your document would be acessible at: http://mysite.com/projects/htmlresume. It’s a bit shorter and easier to remember.

The validator is a way to check that there are no errors in your document structure. ALL HTML PROJECTS MUST VALIDATE

To make your life easier, you can install a few Atom packages, they are like extensions to Atom that can provide some extra features.

Here’s a sample resume text so that I can practice creating the sample assignment with you in class.

Slide Pages

Assignments

Class Links

Code Editors

Online Resources

Lynda.com Tutorials