Basic HTML Quick Reference Guide

Size: px

Start display at page:

Download "Basic HTML Quick Reference Guide"

Stuart Golden
7 years ago
Views:

1 Basic HTML Quick Reference Guide What is HTML? HTML is not a programming language. So, if you have a voice in your head saying I can t learn this, it s scary programming for nerds, squash it. You only need to learn a few basic concepts to start using HTML. HTML stands for Hypertext Markup Language. As weird as that sounds, all it means is that HTML tags tell an HTML reader how to display text and graphics. Your web browser (Internet Explorer, Netscape, etc.) or your client (such as Outlook) are two examples of HTML readers. When you use HTML, you start out with a page of text and then you mark it up with a bunch of tags that tell the HTML reader how you want the text displayed. For example, if I want a word to display bolded, I can use the tag like this: word The tags above tell the HTML reader to display the text in between them in bold font like this: Word HTML tag elements are always contained in brackets (like this: <element>) and, outside of a few exceptions, have an opening tag and an ending tag (please note the ending tag always has a backward slash like you see in the bolded word example above). The tags are read by the HTML reader and do not display, but affect how the text in between them are displayed. Capitalization of the tag itself doesn t matter, so use all caps or lowercase or a mix of the two. If your HTML doesn t come out looking the way you want, the first thing to check is that all your opening tags have closing tags. We mentioned that there are a few exceptions where tags do not require both an opening and an ending tag. For the purpose of this guide, we will cover two of these exceptions: the linebreak tag ( ) and the image tag (<img src= URL >). The use of these tags is explained in the HTML Tag Guide that follows. The good news is that you don t even have to memorize these tag elements (the language ) because you can simply refer to a guide that tells you which tag elements do what. You can even go on Google and search for HTML tags to find and learn new tags. Now that you know what HTML tags are, you are well on your way to learning how to use HTML! Tag Attributes Now that you understand tag elements, we want to introduce one more concept. Tag elements can have attributes which further instruct the HTML reader how to display the text. An attribute is always in the opening tag (within the brackets) and immediately to the right of the tag

2 element. Attributes are separated by a single space and are followed by an equal = sign and a value in quotes. For example: Word Here P is the tag element and align= center is the attribute. is the paragraph tag, which tells the HTML reader that the following text will start a new paragraph. The align= center attribute tells the HTML reader that the text or graphics in this paragraph are to be centered. You can also use multiple attributes in a tag, which are separated by a single space and can go in any order. For instance: The above tag has two attributes (size and color). This is the font tag and in this case is instructing the HTML reader to display the word at size 5 and orange. Don t worry, you don t need to memorize these attributes either. Our quick guide below can be referenced to review the attributes available for the given tag elements and help you remember what each attribute does. Tags in Combination You can use tags in combination with other tags. For instance, if you want to create a paragraph with centered text and you want one of the words in that paragraph to be bolded, you would use the following HTML: This is a bolded word. The above would display in my HTML reader (browser) like this: Or you could bold the entire paragraph like this: This is a bolded word. this is a bolded word. This is a bolded word. By convention, the tag that is opened first is closed last. So above you can see that the first opening tag was the paragraph tag, so the last closing tag is also the paragraph tag. You now know enough about the basics of using HTML to get started. Below is a guide for some basic HTML tags and how they re used.

3 Common HTML tags and how to use them Linebreak The tag creates a linebreak (pushes text to the next line). Two tags in a row will create a space between lines. You can use as many tags in a row as you need to create space. (NOTE: This tag is one of the few exceptions that does not use a closing tag) Here are examples: This is another sentence. This is a sentence. Link (opens in same browser window) <a href= URL >Click Here</a> Link (opens in a new browser window) <a href= URL target= _blank >Click Here</a> The link tag allows you to insert a link to another page within your text. URL in the above tag refers to the web address you want the link to point to. The web address must be the complete address ( and be surrounded by quotation marks. The word(s) between the tags ( Click Here in this case) will be the only thing that appears and will be clickable. Bold The strong tag will bold your text. Underline The underline tag will underline your text. Italic The italic tag will make your text italicized.

4 Font This tag allows you to specify different attributes for how your text will appear. Some attributes and what they do are listed in the table below. (size can be 1-7) text (will accept most common colors) text text Paragraph The paragraph tag creates a space above and below your text (or a double line break) and allows you to specify if you want the text left justified, centered, or right justified. These attributes are demonstrated below. This is a This is a This is a This is a sentence. This is text. These are words. This is a This is text. These are words. This is a sentence. List <ol> The list tag allows you to create a list. This is actually a sequence of tags that go together. You can include as many things in the list as you like, just by adding more <li> tags between the <ol> and tags. You can also specify the type of list you want using the attributes seen below. <ol type="1"> <ol type="a"> <ol type="disc"> a. b. <ol type="circle"> o

5 <ol type="circle"> o Image <img src= path_to_file > The image tag allows you to display an image on the page. Where you see path_to_file in the tag above, you will need to insert the address where the image is located. This means you must first upload the image to a server and then get the URL that points to the image on that server. You can either make sure the image is the exact size you want before uploading it to the server, or you can use attributes to resize the image on the page. An example of this is below. (NOTE: This is an example of a tag that does not have a closing tag) <img src=" /images/2/car.jpg"> <img src=" /images/2/car.jpg" height="110" width="150"> (height and width here is in pixels) <img src=" /images/2/car.jpg"> (utilize the paragraph tag as above to align your image left, right, or centered)

CREATING WEB PAGES USING HTML INTRODUCTION

CREATING WEB PAGES USING HTML INTRODUCTION Web Page Creation Using HTML: Introduction 1. Getting Ready What Software is Needed FourSteps to Follow 2. What Will Be On a Page Technical, Content, & Visual