Basic HTML Commands

Basic HTML Commands
This section covers some basic HTML commands and explains the steps involved in preparing a document for viewing via the World Wide Web.
Basic steps: using tags

HTML uses tags to communicate to the client (browser) how to display text and images. Tags are contained in < > symbols. In most cases you start with the beginning tag, put in the word or words that will be affected by this tag, and at the end of the string of word(s), you place a closing tag. For example, to create a title for a document you would do the following:
<title>My First HTML Document</title>
The closing tag normally contains a "/" before the directive to indicate the termination of the action. HTML tags are not case-sensitive, although URLs generally are. In most cases (with the exception of preformatted text) HTML collapses many spaces to one space and does not read blank lines. However, when you write your text you should leave several blank lines between paragraphs to make editing your HTML source document easier.
The HTML tag

Although not currently required by all clients, the <html> tag signals the point where text should start being interpreted as HTML code. It's probably a good idea to include it in all your documents now, so you don't have to go back to your files and add it later. The <html> tag is usually placed on the first line of your document. At the end of your document you should close with the </html> tag.
The head tag

Just like the header of a memo, the head of an HTML document contains special information, like its title. The head of a document is demarcated by <head> and </head> respectively. For the purposes of this class, only the title tag, below, should be included in the document head. A typical head section might look like
<html> <head> <title>My First HTML Document</title> </head>
Titles
A title tag allows you to specify a Document Title in your browser window. When people make hotlists, this title is what they see in their list after they add your document. The format is:
<title>My First HTML Document</title>
Remember, the title usually doesn't appear in the document itself, but in a title box or bar at the top of the window.
The body tag

Like you might expect, the body tags <body> and </body> define the beginning and end of the bulk of your document. All your text, images, and links will be in the body of the document. The body should start after the head. A typical page might begin like
<html> <head> <title>My First HTML Document</title> </head> <body>
Headers
There are up to six levels of headers that can be used in your document, h1 through h6. Header 1 is the largest header and they get progressively smaller through header 6. Below are each of the six headers and how they usually appear in relation to one another.
<h1>This is a header 1 tag</h1>
This is a header 1 tag



Headers, as you notice, not only vary in size, they are also bold and have a blank line inserted before and after them. It's important to use headers only for headings, not just to make text bold (we cover the bold tag later).
Paragraphs
In HTML, a paragraph tag <p> should be put at the end of every paragraph of "normal" text (normal being defined as not already having a tag associated with it). <p> causes a line break and adds a trailing blank line <br> causes a line break with no trailing blank line As a convenience to yourself and others who might have to edit your HTML documents, it's a very good idea to put two or three blank lines between paragraphs to facilitate editing.
Preformatted text
The preformatted text tag allows you to include text in your document that normally remains in a fixed-width font and retains the spaces, lines, and tabs of your source document. In other words, it leaves your text as it appears initially or just as you typed it in. Most clients collapse multiple spaces into one space, even tabs are collapsed to one space. The only way to circumvent this is to use the preformatted tag. Visually, preformatted text looks like a courier font.
<pre>this is an example of a preformatted text tag</pre>
And this is how it displays:

this is an example of a preformatted text tag
Boldface and Italics

You can add emphasis to text by using the boldface and italic tags or the emphasis and strong tags. There is an underline tag as well, but most people don't use it since text that is linked is often underlined. The potential for confusion and the archaic nature of underlining in general make it a poor marker for emphasis. When using these tags, you usually cannot (and probably should not) have text that is both boldface and italics; the last tag encountered is usually the tag that is displayed. For example, if you had a boldface tag followed immediately by an italic tag, the tagged word would appear in italics. Physical tags This is a <b>boldface</b> tag. This is how boldfacing appears. This is an <i>italic</i> tag. This is how italics appear. Logical tags This is a <strong>strongly emphasized</strong> tag. This is a strongly emphasized tag. This is an <em>emphasized</em> tag. This is an emphasized tag. There is a subtle distinction between the above "physical" tags which merely change the displayed font, and "logical" styles which are used (or eventually will be) to make types of emphasis client specific (for instance, using the <em> tag would make text red). While either style is fine, be aware that differences in these two kinds of tags may be more apparent with advances in HTML.
Lists
There is an easy way in HTML to have numbered, unnumbered, and definition lists. In addition, you can nest lists within lists. When using lists, you have no control over the amount of space between the bullet or list number, HTML automatically does this for you. Neither (as yet) do you have control over what type of bullet will be used as each browser is different. Unnumbered lists Unnumbered lists are started with the <ul> tag, followed by the actual list items, which are marked with the <li> tag. The list is ended with the ending tag </ul>. For example, here is an unnumbered list with three items:
<ul> <li> list item 1 <li> list item 2 <li> list item 3 </ul>
Here is how that list would display:

list item 1 list item 2 list item 3
Numbered lists Here is the same list using a numbered list format:
<ol> <li> list item 1 <li> list item 2 <li> list item 3 </ol>
Here is how that list would display: 1. list item 1 2. list item 2 3. list item 3 Definition lists Definition lists allow you to indent without necessarily having to use bullets.
<dl> <dt> This is <dd> This is <dd> And yet <dt> Another <dd> Another </dl> a term a definition another definition term definition
And here is how this would be displayed This is a term This is a definition. And yet another definition. Another term Another definition Nested lists Finally, here is a nested list within an unnumbered list (we could just have easily had a nested list within a numbered list).
<ul> <li> list item 1 <ul> <li> nested item <li> nested item </ul> <li> list item 2 <ul> <li> nested item <li> nested item </ul> <li> list item 3 <ul> <li> nested item <li> nested item </ul> </ul>
1 2
1 2
1 2
Here is how that list would display:
list item 1
nested item 1 nested item 2 list item 2 o nested item 1 o nested item 2 list item 3 o nested item 1 o nested item 2
o o
Blockquote
The blockquote tag indents the text (both on the left and right) inside the tags. The blockquote tag looks like this:
<blockquote>...</blockquote>
and displays like this: Blockquoted text is often used for indenting big blocks of text such as quotations. The text will be indented until the ending tag is encountered. Again, note that the text here is indented on both the left and the right margins.
Center
You can center text, images, and headings with the center tag:
<center>This is a centered sentence</center>
This is a centered sentence. The center tag automatically inserts a line break after the closing center tag.
Horizontal Rule
To separate sections in a document, you can insert a horizontal rule tag <hr>. A horizontal rule is displayed as follows:
Addresses
The <address> tag normally appears at the end of a document and is used most frequently to mark information on contacting the author or institution that has supplied this information. Anything contained within the address tag appears in italics. The address tag is another example of a logical tag, and although it currently does nothing but make text appear in italics, this could change as HTML code advances. Here is an example of how an address might appear:
<address> Introduction to HTML / Pat Androget / Pat_Androget@ncsu.edu </address>
And it would appear as:
Introduction to HTML / Pat Androget / Pat_Androget@ncsu.edu
Comments
It is possible to include comments in a source HTML document that do not appear when seen through a browser. This is most useful for giving warnings and special instructions to future editors of your document. Comments take the form:

The comment can even break lines


Strike-through
Should you want it, there is a strike-through tag which displays text with a strike.
<strike>This is struck through text</strike>
displays as This is struck through text
Special Characters
Finally, if you often use the characters which make up HTML tags (such as < >, and &), or you use special characters not in the ascii standard, you will have to use special tags. Here are the codes:
á à ã é ð í ï ó ø " ú ü .... .... .... .... .... .... .... .... .... .... .... .... " â & ä ê ë î < ô õ ß û ý .... .... .... .... .... .... .... .... .... .... .... .... & < æ å ç è > ì ñ ò ö þ ù ÿ .... .... .... .... .... .... .... .... .... .... .... .... >
HTML Commands for Links

The real power of HTML is its ability to link to other documents and pieces of text, images, video or audio. Links are usually highlighted or underlined in a document so that you know of their existance. Clicking on the link opens up the document for viewing.
Linking to Other Documents

To link to a file on a Web server, your HTML tag would look like:
<a href="http://www.ncsu.edu/">Welcome to NCSU</a>
The text that appears between the beginning and ending tags ("Welcome to NCSU" in the above example) is the text that is the link the reader clicks on to go to that URL.
When you make a link, imagine you're creating two anchor points: one exists in your document (the text to click on), while the other is the document to which you're linking. You basically create a thread between two points. Here are what the parts mean:
<a href http://www.ncsu.edu/ Welcome to NCSU /a> -----starts the anchor stands for "hypertext reference" the URL of the other document the text that will appear and be clickable ends the anchor
As long as you know the URL for a file, you can create a link to it.
Linking To a Named Anchor

Anchors within the same document
To link to a specific section within the same document, you must define an anchor name inside the document and then link to it. For example, if you were linking from the top of a document titled "chapter2.html" to the fourth paragraph of this same document, you'd give the fourth paragraph a name (any name, you make it up), in this case "important," and you'd create a link to this name instead of a URL.
Continuing on with the above example. We are creating a link from the top of "chapter2.html" to the fourth paragraph; we are going to call this link "important". First, you would define the name "important" in the fourth paragraph with the name tag
<a name="important">First sentence in fourth paragraph</a>
Next, create the link to this "important" anchor (at the start of "chapter2.html"). It would look like:
<a href="#important">link to important stuff</a>
The pound sign in front of the anchor name tells the browser to look for the link inside the document already loaded instead of looking elsewhere in another file.
Note that anchor names are case sensitve, and that some kind of non-blank text must appear in the named anchor tag.
Named anchors within another document

There may be times when you not only want to link to a specific document, but more precisely, you want to link to a particular section of that other document. As an example, suppose you wish to set up a link from the document "Our first HTML document" to a particular section in a second document called "chapter2.html".
First, you set up a named anchor in the document you are linking to (chapter2.html). To do this, go to the section in your second document where you want the reader to begin and define a named anchor. Name this anchor "important". Insert the following tag in the appropriate place in the second document:
<a name="important">some text</a>
Now to create the link in your first document. In your first document you need to include not only the file name, but the name you defined for the anchor. This named anchor is separated from the file name by a pound sign (#). Place this tag where you want the link to show up (the highlighted text).
<a href="http://www.here.edu/chapter2.html#important">important part</a>
A user would see that the first document has the words "important part" highlighted. Clicking on this highlighted text would take them to the "important" section in the second document.
Absolute and Relative Linking

If a new neighbor you just met on the street asked you where you lived, you wouldn't give them your complete postal address. You'd say something like "two houses down on the left." Your postal address is your "absolute" address -- anyone can find you using the information it provides. The information you gave to your new neighbor is your "relative" address -- just enough information to locate your house from where you were standing.
The same concept works with URL addresses. When linking from one document to another in the same directory, only the second document name is necessary, not the entire URL. For example
<a href="second_doc.html">Go to next page</a>
You can also link across directories to a document by relative position. For example
<a href="../third_doc.html">Go to third page</a>
links to a document in one directory hierarchy higher than the current document.
Relative links are strongly encouraged as they are easier to type and allow you to move groups of files from one machine to another without editing the files at all. Naturally though, relative linking becomes more and more dangerous the more directories you traverse. With that in mind,
it's usually best to use relative linking only within files that are part of a single project (such as this HTML tutorial).
HTML Commands for Images

You'll notice that many documents you see have images that appear on the page. These images must be gif or xbm images. Other images can be included with a document, but require the browser to "spawn" an external viewer (which also means you must have that external viewer installed on your machine). The first thing you have to do to have an image on your page is to locate or create your gif image. There are thousands of public domain images available on the Internet, some of which are gif images, some are, say .bmp images that can be converted and then saved as gif images. You can also create your own image and save it as a gif file. As a reminder, be sure to use only those images which you create yourself or have permission to use.
Putting an image in your document

Images that appear on a Web page are called in-line images. When you have the image ready to be placed in your document, you must provide the path/location or complete URL of the image. The HTML tag is as follows
<img src="path or URL of image file"> For example, <img src="http://www.goiam.org/images/articles/homepage/homepage/2012glc_.png">
Where "img src" stands for image source followed in quotes by the URL of the image. In this particular example, it is an image called "new.gif" that is located on the Web server "www.ncsu.edu" in the directory "images". If the image happened to be in the same directory as the document you are working on, you would simply reference the name of the file without needing the complete URL. For example, if you have a gif called "mypicture.gif" in the same directory as the file, your reference would be
<img src="mypicture.gif">
Text and Image Alignment

Attributes of the image tag
Text can be "floated" to the right or left of an image. The align=left attribute will float text down and to the left of the image; align=right will float text down and to the right of the image. The tagging looks like this:
<img src="http://www.goiam.org/images/articles/homepage/homepage/2012glc_.png" align=right> This is an image of a bookshelf. With this new align=right tag, the text can be beside it instead of below it. It looks nice this way. <br clear=right> <img src="http://www.goiam.org/images/articles/homepage/homepage/2012glc_.png" align=left>This is an image of a bookshelf. With this new align=left tag, the text can be beside it instead of below it. It looks nice this way.<br clear=left>
It will appear like this on the Web page: This is an image of a bookshelf. With this new align=right tag, the text can be beside it instead of below it. It looks nice this way. This is an image of a bookshelf. With this new align=left tag, the text can be beside it instead of below it. It looks nice this way. Important note: If you are floating text beside an image and use the <p> tag, a blank line will be inserted and the following text will also appear beside the image. When you want your remaining text to be below the image, you must include a <br clear=> tag so that text will go down to the next clear margin, below the picture. Specify clear=left if you are using align=left and clear=right if you are using align=right. The clear attribute is Netscape-only.
Leaving space around an image

You can increase the space around an image by specifying a horizontal or vertical margin in pixels. For instance, adding the attribute hspace=20 will put a 20 pixel margin to the right and left of the image. The attribute vspace= adds space to the top and bottom of the image. The tagging looks like this:
<img src="http://www.goiam.org/images/articles/homepage/homepage/2012glc_.png" align=left hspace=20>This is an image of a bookshelf. The text is aligned to the left and there is a horizontal space of 20 pixels. It looks nice this way. It helps to add a horizontal space to the image so the text is not so close to the picture.<br clear=left>
It will appear like this on the Web page: This is an image of a bookshelf. The text is aligned to the left and there is a horizontal space of 20 pixels. It looks nice this way. It helps to add a horizontal space to the image so the text is not so close to the picture.
Alternative text
Just in case a gif can't be displayed for some reason (network troubles or a user is viewing your document with Lynx, a line-mode WWW browser), it's a good idea to use the alt modifier to specify what should be printed if your graphic can't be displayed. <img align=middle alt="Spiffy pic" src="http://www.goiam.org/images/testgif.gif">
Making an image into a link

Anything can be a link--text or images. To make an image into a link you simply put the image tag inside the tag for a link. For instance, we could make the belltower image into a link to the NC State homepage so that when the user clicked on the belltower the NC State homepage would appear. The tag would look like this
<a href="http://www.goiam.org/images/articles/homepage/homepage/2012glc_.png"><i mg src="http://www.goiam.org/images/articles/homepage/homepage/2012glc_.png"></a >
As you can see, the <img src> tag is inside the <a href></a> tag. When an image is a link it will have a blue box around it in some browsers. Because your user may be viewing your document with Lynx (and won't be able to access any images) it is a good idea to have text along with an image as a link.
Supported Image Formats

The latest release of almost every Web client now supports the "gif" and "jpeg" image formats. Both formats are ways of encoding image data, although the two are very distinct in the way they achieve this encoding. GIF = Graphics Interchange Format JPEG = Joint Photographic Experts Group PNG = Portable Network Graphics
What Is the HTML Object Tag

A lot of people insert medias in their web page with the non-standard <embed> tag. But there is a standard tag for this insertion kind, <object> . Effectively this is not immediate to use it manner cross-browsers, but we'll see that there are some techniques for that practically all the browsers be able to understand the code. The HTML 4.01 specification introduce the <object> element : ...HTML 4 introduces the OBJECT element, which offers an all-purpose solution to generic object inclusion. The OBJECT element allows HTML authors to specify everything required by an object for its presentation by a user agent: source code, initial values, and run-time data. In this specification, the term "object" is used to describe the things that people want to place in HTML documents; other commonly used terms for these things are: applets, plug-ins, media handlers, etc. This element is designed to include any sort of document. We specify which sort with the type attribute indicating the mime type, and the source of the document with the data attribute indicating his URI. If the browser, or one of his plugin, can interpret this document, it does it, otherwise the nested content of the object is displayed. Any HTML code can be inserted as a alternative content, for example a link to the document or an image instead an animation. It can be also another alternative object, we talk about "nested object". For a lot of type of document, that's all !
examples :
embed a HTML document

<object data="data/test.html" type="text/html" width="300" height="200"> alt : <a href="data/test.html">test.html</a> </object>
embed a pdf document

<object data="data/test.pdf" type="application/pdf" width="300" height="200"> alt : <a href="data/test.pdf">test.pdf</a> </object>
You can specify some parameters related to the document with the param tag. IE sometimes needs a src parameter to understand the location. embed a wav document
<object type="audio/x-wav" data="data/test.wav" width="200" height="20"> <param name="src" value="data/test.wav"> <param name="autoplay" value="false"> <param name="autoStart" value="0"> alt : <a href="data/test.wav">test.wav</a> </object>
The parameters autoplay is understandable by QuickTime, autoStart by Windows media Player and Real Audio.
More complicated cases

For some types, like QuickTime document, IE needs a non-standard value to the valid classid attribute, an identifier to load an associated activeX. an only IE insertion of a QuickTime document
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
width="320" height="240"> <param name="src" value="data/test.mov" > alt : <a href="data/test.mov">test.mov</a> </object>
We 're going to nest another object as an alternative content, for the other browsers that use the standard formulation : nested objects
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="320" height="240"> <param name="src" value="data/test.mov" > <param name="controller" value="true" > <param name="autoplay" value="false"> <object type="video/quicktime" data="data/test.mov" width="320" height="240"> <param name="controller" value="true" > <param name="autoplay" value="false"> alt : <a href="data/test.mov">test.mov</a> </object> </object>
It works, but unfortunately IE has a bug, it displays a blank zone for the second object. This bug is resolved in IE7, but for older versions, we must hide this second object. We have two techniques to do it, the IE specific conditional comments, or by CSS.
Hide the nested object with IE conditional comments IE5 introduce the conditional comments, that is very helpful to compensate IE bugs. This method isn't understandable by earlier versions of IE, but fortunately they are almost not used.
We can write two objects, one specially for IE, and another for the standards respectful browsers :
  <object type="video/quicktime" data="data/test.mov" width="320" height="240"> <param name="controller" value="true" > <param name="autoplay" value="false"> alt : <a href="data/test.mov">test.mov</a> </object> 
But as IE7 corrects this bug, I prefer to use them with nested objects :
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="320" height="240"> <param name="src" value="data/test.mov" > <param name="controller" value="true" > <param name="autoplay" value="false">  <object type="video/quicktime" data="data/test.mov" width="320" height="240"> <param name="controller" value="true" > <param name="autoplay" value="false"> alt : <a href="data/test.mov">test.mov</a> </object>   </object>
Hide the nested object with CSS The other solution is to use some CSS hacks to hide the nested object. We must use a hack to create rules applied only by IE to hide the object, then another to render visible it again by IE Mac. special class for IE (place it in a style tag on the head of the HTML document, or in a separate stylesheet)
/* hides the second object from all versions of IE */ * html object.hiddenObjectForIE { display: none; } /* display the second object only for IE5 Mac */ /* IE Mac \*//*/ * html object.hiddenObjectForIE { display: inline; } /**/
and apply this style to the nested object

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="320" height="240"> <param name="src" value="data/test.mov" > <param name="controller" value="true" > <param name="autoplay" value="false"> <object type="video/quicktime" data="data/test.mov" width="320" height="240" class="hiddenObjectForIE"> <param name="controller" value="true" > <param name="autoplay" value="false"> alt : <a href="data/test.mov">test.mov</a> </object> </object>
This technic have some annoyances with java (and perhaps some other), a security alert is displayed on loading, and the alternative content of the nested object is also displayed We can write two objects, one specially for IE, and another for the standards respectful browsers :
  <object type="video/quicktime" data="data/test.mov" width="320" height="240"> <param name="controller" value="true" > <param name="autoplay" value="false"> alt : <a href="data/test.mov">test.mov</a> </object> 
But as IE7 corrects this bug, I prefer to use them with nested objects :
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="320" height="240"> <param name="src" value="data/test.mov" > <param name="controller" value="true" > <param name="autoplay" value="false">  <object type="video/quicktime" data="data/test.mov" width="320" height="240"> <param name="controller" value="true" > <param name="autoplay" value="false"> alt : <a href="data/test.mov">test.mov</a> </object>   </object>
Hide the nested object with CSS The other solution is to use some CSS hacks to hide the nested object. We must use a hack to create rules applied only by IE to hide the object, then another to render visible it again by IE Mac. special class for IE (place it in a style tag on the head of the HTML document, or in a separate stylesheet)
/* hides the second object from all versions of IE */ * html object.hiddenObjectForIE { display: none; } /* display the second object only for IE5 Mac */ /* IE Mac \*//*/ * html object.hiddenObjectForIE { display: inline; } /**/
and apply this style to the nested object

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="320" height="240"> <param name="src" value="data/test.mov" > <param name="controller" value="true" > <param name="autoplay" value="false"> <object type="video/quicktime" data="data/test.mov" width="320" height="240" class="hiddenObjectForIE"> <param name="controller" value="true" > <param name="autoplay" value="false"> alt : <a href="data/test.mov">test.mov</a> </object> </object>
This technic have some annoyances with java (and perhaps some other), a security alert is displayed on loading, and the alternative content of the nested object is also displayed.
Embed Code Examples YouTube - Object Code <object width="560" height="315"><param name="movie" value="http://www.youtube.com/v/4oiwtNKVs9Q?version=3&hl=en_US&rel=0"></para m><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/4oiwtNKVs9Q?version=3&hl=en_US&rel=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object> YouTube - iFrame Code <iframe width="560" height="315" src="http://www.youtube.com/embed/4oiwtNKVs9Q?rel=0" frameborder="0" allowfullscreen></iframe> Embed PDF Code <object data="data/test.pdf" type="application/pdf" width="300" height="200"> alt : <a href="data/test.pdf">test.pdf</a> </object> Page

Basic HTML Commands

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Basic HTML Commands

Uploaded by

Copyright:

Available Formats

Basic HTML Commands

Basic steps: using tags

The HTML tag

The head tag

The body tag

This is a header 1 tag

This is a header 2 tag

This is a header 3 tag

<h4>This is a header 4 tag</h4>

This is a header 4 tag

<h5>This is a header 5 tag</h5>

This is a header 5 tag

<h6>This is a header 6 tag</h6>

And this is how it displays:

Boldface and Italics

Here is how that list would display:

list item 1 list item 2 list item 3

Here is how that list would display:

And it would appear as:

Introduction to HTML / Pat Androget / Pat_Androget@ncsu.edu

The comment can even break lines

displays as This is struck through text

HTML Commands for Links

Linking to Other Documents

Linking To a Named Anchor

Named anchors within another document

Absolute and Relative Linking

HTML Commands for Images

Putting an image in your document

Text and Image Alignment

Leaving space around an image

Making an image into a link

Supported Image Formats

What Is the HTML Object Tag

embed a HTML document

embed a pdf document

More complicated cases

and apply this style to the nested object

and apply this style to the nested object

You might also like