User Tools

Site Tools


html_cheat_sheet

# HTML Cheat Sheet

There are hundreds of html tags. Even most web designers don't memorize them all. That's what we have reference sites and helper software!

For basic web pages, however, you can go a long way with the use of simple elements. Add some CSS styles, and it can look quite slick.

Tip: with few exceptions, nearly all tags come in pairs. <open> Something in the middle </open>

# Head

Heading information is not visible on the page but sets up the page. You can past this on the top of each page, adding your own title.

<html>
<head>
<title> The title of this web page.
</title>
</head>

# Body

<body>

The body is where page content comes in. It usually consists of paragraphs, such as this one.

<p>

A paragraph is tagged with <p> at the beginning and closed with a </p> at the end.

## Headings <h1>Headings</h1> or <h2></h2>

Headings are used to give structure or hierarchy. They can have six levels. <h1> is the most important. <h6> is least. A page will usually have only one top level heading; but it may have three or more 2nd and 3rd level headings. Headings make web pages easier to read. The word or phrase between the tags is emphasized.

## Lists

There are two common kinds of lists. Numbered and bulleted. In html, we call these ordered and unordered lists. Each list has an open and closing tag; inside the list, each item is marked as a list item>

<ol>
<li> One. </li>
<li> This is another item.</li>
<li> THis is a final item. Notice that it can be a word, a phrase, 
or even a whole paragraph, so long as it ends with the closing tag </li>
</ol>

The unordered or bullet list is the same, only you begin and end it with <ul> and </ul> tags.

## Links

Obviously, if we're building a web, we need to be able to link pages. The syntax for a link can look complicated at first. But you get used to it.

<a href=" __DESTINATION__  "> linked word </a>

## Local (relative) links

If you want to link between two pages that are in the same folder (or directory), this is simple; you can just refer to the filename itself.

<a href="Filename02.html"> Click here for File 02 </a>

## External (absolute) links

Often we want to link to a specific file that's somewhere else, perhaps on another website altogether. For that, we need the complete website address (or URL) including the initial letters. For example, to link to the IUP Admissions homepage we would write.

<a href="https://www.iup.edu/admissions/">IUP Admissions</a>

## Images

Images work in a fashion similar to links. We don't actually paste an image into an html file like you might if you were adding a picture to a Powerpoint. Instead, you make a special kind of link. And once again, we need the address. If the file is local, we can make a relative or local link. If it is somewhere else, we make an absolute link.

## Local images

<img src=“image01.jpg”>

For accessibility purposes, you should consider including a simple verbal description.

<img src="image01.jpg alt="Smiley face image" >

## External image

<img src="https://www.iup.edu/images/iup-artmark.png" alt="IUP Logo" >

Note, some websites block so-called hotlinking to their images. This is even sometimes regarded as bad manners or theft of bandwidth. Some sites don't mind at all. Bear in mind that if you hotlink to an image and that website goes down, so does your image.

When you upload an image to your website, you may need to use the absolute address. Let's say you created an /images folder. A link might look something like this:

<img src="https://MyPersonalDomain.com/images/portrait.jpg" alt="Ken's Portrait" >

## Further Reading

W3Schools.com is a free, reliable reference and tutorial resource. When you forget the syntax of a tag or want to learn how to do something you've seen on another site, check them out. https://www.w3schools.com/html/default.asp

html_cheat_sheet.txt · Last modified: 2020/05/19 03:31 by admin