HTML 4.01 & XHTML 1.1

7/31/2019 HTML 4.01 & XHTML 1.1

1/100

1

7/31/2019 HTML 4.01 & XHTML 1.1

2/100

Table of Contents

Chapter 1: Introduction........................................................................................ 2

Chapter 2: HTML Basics...................................................................................... 7

Chapter 3: Basic HTML Page Structure............................................................. 14Chapter 4: Displaying Text................................................................................... 24

Chapter 5: Formatting Text................................................................................. 27

Chapter 6: Creating Lists..................................................................................... 35

Chapter 7: Hyperlinks.......................................................................................... 38

Chapter 8: Tables.................................................................................................. 40

Chapter 9: Page Layout........................................................................................ 45

Chapter 10: Multimedia....................................................................................... 48

Chapter 11: Input Forms...................................................................................... 51

Chapter 12: Frames.............................................................................................. 63

Chapter 13: Creating scripts................................................................................ 64

Chapter 14: Advanced HTML Features.............................................................. 68

Chapter 15: Writing Secure HTML.................................................................... 73

Reference................................................................................................................ 75

Creative Commons License (CC-BY-NC-ND).................................................... 96

1

7/31/2019 HTML 4.01 & XHTML 1.1

3/100

Chapter 1: Introduction

What is HTML?

HTML stands forHypertext Markup Language. Hypertext means being able to be accessedthrough the internet. Markup language means codes that allow the author to decide how

information is supposed to appear in the web browser. HTML is the main markup language forweb pages. HTML consists of HTML elements which are the basic building-blocks of webpages. When you use a web browser, your web browser downloads the HTML document fromthe web server and renders those HTML elements into a visible page. HTML elements providethe structure to a web page such as headings, paragraphs, lists, links, quotes and so on. Otherlanguages such as Cascading Style Sheets (CSS) allow the web page to be styled. You canalso use HTML to embed scripts into the web page which allow the web page to becomeinteractive. Each language provides a specific function. HTML is for structure, CSS is forpresentation and JavaScript is for advanced interaction.

In summary, HTML gives author's the means to:

Publish online documents with headings, text, tables, lists, photos, etc.Retrieve online information via hypertext links, at the click of a button.

2

Illustration 1: A basic diagram of how an HTML file is converted

into a visible page on the user's computer

7/31/2019 HTML 4.01 & XHTML 1.1

4/100

Design forms for conducting transactions with remote services, for use in searching forinformation, making reservations, ordering products, etc.Include spread-sheets, video clips, sound clips, and other applications directly in theirdocuments.

What is the Difference between HTML, HTML 4.01 and XHTML?

When HTML was first created it was only being developed with basic functionality such as theability to create hyperlinks, show text and perform other basic abilities. Over time, HTML wasupdated to include new features such as file uploading and frames. The Latest standard iscalled HTML 4.01 and includes all the important features of the previous versions. XHTML isanother markup language that is taught in this course. The X in XHTML stands for extendedand allows for adding additional functionality to HTML pages. There is also HTML 5 whichincludes even more capabilities but these capabilities are generally more advanced than theintended scope of this course. We will be devoting an entire course to HTML 5 so all thefeatures can be learned completely and thoroughly. All of this material will be covered in detailin further chapters. At this time its simply important to know that HTML started with the first

version of HTML and over time more features were added to the language. HTML 4.01 is thefinal standard in HTML. Going forward the new standards are being added to HTML 5. Beforeyou can learn HTML 5 you must first understand basic HTML which is HTML 4.01 and XHTML1.1.

There are some important differences between HTML 4.01 and XHTML 1.1 that we will becovering in later chapters.

Getting Started

As we just learned, HTML simply consists of information with HTML elements. These HTMLelements are used to markup that information. With that being said, you don't need anycomplex software to get started writing your first web pages. You only need a way to write yourHTML elements in plain text (.txt extension). If you are using the Windows operating systemthen we will be using notepad. It's already installed on your computer and should be located at:start button -> programs -> accessories -> notepad. Find that program and open it up. Ifyou are using a different operating system then use any text editor that can save in plain textwith a .txt extension.

3

7/31/2019 HTML 4.01 & XHTML 1.1

5/100

We will be writing all of our HTML code into these text editors then saving them with a .txtextension. When that is accomplished we will change the extension to .html or .htm. The iconfor the file should change to your default web browser. When you open a file with a .htm or.html extension your web browser will use the HTML tags to create the web page. These HTMLdocuments can also be uploaded to a web server and accessed by anyone with a webbrowser.

What is covered in this course?

This course consists of 15 chapters and 15 lectures. The 15 chapters are similar to a standardtextbook you would read in a classroom setting and covers all the information you need toknow in order to successfully use HTML in a professional setting. The 15 lectures covereverything in the textbook with hands on demonstrations and examples that you can follow.The lectures are also interactive and adaptive. What this means is that periodically you will beasked to answer a multiple choice question or solve a problem. Based on your results the videolecture course adapts to your needs. If you answer many questions wrong then you will berequired to listen to additional information and solve additional problems until mastery of theconcept is achieved. With that being said, there is no homework for this course as all the workwill be required to be finished during the lectures. If you wish to obtain a certificate of

4

Illustration 2: The Microsoft version of Notepad

7/31/2019 HTML 4.01 & XHTML 1.1

6/100

completion then you will need to complete all 15 lectures, the midterm and the final exam witha 90% or better.

Chapter DescriptionChapter 1: Introduction A brief review of what HTML is and what this course covers

Chapter 2: HTML Basics Covers HTML elements and attributes.

Chapter 3: Basic HTML Page Structure Build your first basic HTML page.

Chapter 4: Displaying Text Creating basic text and marking it up.

Chapter 5: Formatting Text Adding additional formatting to text.

Chapter 6: Creating Lists Covers creating lists of all varieties.

Chapter 7: Hyperlinks Covers how to create links to other web sites.

Chapter 8: Tables Covers how to create tables to organize data.

Chapter 9: Page Layout Covers how to add styling to a page.

Chapter 10: Multimedia How to add multimedia such as images.

Chapter 11: Input Forms How to create input forms to collect data from visitors.

Chapter 12: Frames How to implement frames.

Chapter 13: Creating scripts How to implement external scripts such as JavaScript.

Chapter 14: Advanced HTML Features Advanced HTML features such as meta tags.

Chapter 15: Writing Secure HTML Demonstrates how to make sure your HTML is secure and best practices.

Using Software to Build Websites VS Hand Coding

A good question many people ask is on the basis of using a software program to help build thewebsite or building the website by writing line by line (referred to as hand coding). This courseteaches you how to write HTML by hand coding. The main reason for teaching HTML this wayis because you need to see how a website is designed from the ground up. Once you havemastered hand coding then you can quickly utilize a software program to build your websites. Asoftware program will help you write the type of website you want more quickly but the softwareprogram may not build the website exactly the way you see it in your head. When youunderstand hand coding, you can easily look at the website HTML and modify it to look pictureperfect. This is why I recommend learning hand coding first and then learning the HTML editorsecond. When you begin building websites you should use an HTML editor and then use handcoding to make minor adjustments. Another reason to learn hand coding is so you can study allthe HTML elements and tags in detail. By doing this you will understand and learn thefull functionally of HTML and XHTML. When you understand all the tags you can utilize thetechnology to its fullest potential. Many web development companies require their webdevelopers to learn HTML hand coding for this very reason.

W3C Standards

W3C stands for World Wide Web Consortium. This organization is the main internationalstandard setting organization for the world wide web. They make sure to design standards forHTML and CSS (among others) which allow websites to be designed so they can be read bydifferent web browsers and appear essentially the same. If the W3C did not exist then eachweb browser could read HTML differently and display the website in an entirely different

5

7/31/2019 HTML 4.01 & XHTML 1.1

7/100

fashion. With that being said it is very important to follow these web standards when writingyour HTML. This course teaches HTML based on W3C standards. The official standards canbe located at the following links:

HTML 4.01 (http://www.w3.org/TR/html401/ )

XHTML 1.1 (http://www.w3.org/TR/xhtml11/ )

6
http://www.w3.org/TR/html401/http://www.w3.org/TR/html401/http://www.w3.org/TR/xhtml11/http://www.w3.org/TR/xhtml11/http://www.w3.org/TR/html401/http://www.w3.org/TR/xhtml11/http://www.w3.org/TR/xhtml11/http://www.w3.org/TR/html401/

7/31/2019 HTML 4.01 & XHTML 1.1

8/100

Chapter 2: HTML Basics

HTML Elements

HTML consists of elements which are used to markup various portions of the web page. Abasic example of an HTML element is the bold tag which is used to make text appear bold. The

text that is to appear bold is surrounded by the bold tags. Here is an example of the bold tagbeing used:

bold text

When your browser reads the html tags it converts the text to appear as bold, such asthis: bold text

Each HTML element generally consists of two HTML tags. All html tags are enclosed ininequality signs: < and >. In total there are 75 different HTML tags and we will be learning how

to use all 75 tags. These 75 tags are used to create a variety of HTML elements. Once youknow how to use all 75 tags and their functionality correctly then youhave successfully mastered HTML.

When writing HTML code you must always use a closing tag or end the tag with a slash atthe end of the tag. The closing tag tells the browser when to stop marking up that specificpiece of text. For XHTML this is a requirement. The opening and closing tag makes up theentire HTML element. The closing tag is bolded below:

bold text

Some html tags only consist of one tag such as the line break tag below:

This code inserts a line break into the page and must be closed by using the / symbol.

The line break tag above is a good example of the differences between HTML 4.01 and XHTML1.1. In HTML 4.01 you don't need to include the / symbol to close the tag. The html tag cansimply be written as
. However, in XHTML 1.1 you must include the / in order for the tag tobe displayed correctly. In the scope of this course the XHTML 1.1 standards will takeprecedence over HTML 4.01 standards.

NOTE: Every tag must be in lowercase. This is a requirement of XHTML. If you are usingHTML then you may use lowercase. One of the main differences between HTML and XHTML isthat XHTML is more strict about how you should write the syntax.

7

7/31/2019 HTML 4.01 & XHTML 1.1

9/100

Example list of All 75 HTML/XHTML Tags

7/31/2019 HTML 4.01 & XHTML 1.1

10/100

fonttext

Take note that all the values of the attributes are surrounded by quotes. This is a requirement inXHTML. Here is how the text appears now: font text.

Note: Every tag attribute must be defined. For example, in the above example you must definethe attribute as: size="12" instead of size="". This is another requirement of XHTML.

Note: Each HTML tag has different attributes that can be defined. We will be covering eachHTML tag in this course and explaining the usage of each HTML tag's unique attributes.

Note: The font tag has been made obsolete due to the introduction of CSS, this HTML tag will

not be discussed in this course. In the CSS course, you will learn how to style your web pages.

Standard HTML Tag Attributes

Standard tag attributes means these are attributes which can be applied to most HTML tags.There are three types of standard attributes: core, language and keyboard. In total there arefour core standard attributes. These attributes are the following:

Class: Specifies a class name for the HTML tag so it can be styled by CSS. (discussed indetail in other courses).

ID: Assigns a unique name to an HTML tag so it can be used by JavaScript or other scriptinglanguages. Each ID must be unique within the document.

Style: Style the tag by using inline CSS. (to be covered in the CSS course).

9

Illustration 3: Diagram of an HTML element

7/31/2019 HTML 4.01 & XHTML 1.1

11/100

Title: Displays extra information to the user via a tool tip (the little box that pops up when youhover your mouse over something). Here is an example: Hover your mouse over this text.

The core standard tag attributes can be applied to all HTML tags except the following: ,, , , , , , and .

At this point in the course its only important to learn the title standard attribute as the other

three attributes are primarily used in more advanced courses. Here is an example of the titlecore standard attribute being used:

Tooltip text

In total there are three language standard attributes. They can be applied to all tags except thefollowing: , , , , , ,
, and . Hereare the three language standard attributes:

Dir: Specifies the text direction. Defined as either ltr (left to right) or rtf (right to left).

Lang: Assigns the document's language using the iso 639-1 language code. These are twoletter codes such as en for english. You can also use more specific languages codes such asen-us (United States) or en-uk (United Kingdom). (see the reference section for a list of thelanguage codes).

XML:lang: This is the same as the attribute above except its for XHTML documents. Its definedthe same way as the above attribute.

Here is an example of all three language attributes being used:

Language StandardAttributes

The final two standard attributes are the keyboard attributes, which are the following:

Accesskey: Creates a key combination to gain focus on the element. For example you canuse this attribute to gain focus of an element by pressing one key on your keyboard.

Tabindex: Defines the order in which you can navigate through a web page using the tabbutton with 1 being the first place you go when you press tab.

Unlike the other standard attributes these attributes are only definable by seven tags which arethe following: , , , , , and . Here is an exampleof these attributes being used:

10

7/31/2019 HTML 4.01 & XHTML 1.1

12/100

Click here

Types of HTML Elements

The opening and closing HTML tags make up an html element. In total there are three types ofHTML elements: void elements, raw text elements and normal elements.

Void elements don't have an ending tag. They simply consist of the opening tag whichcontains all the attributes. A good example of this is the link element displayed below:

In XHTML these elements must be closed properly with />.

Raw text elements contain text in between the start and end tag.

The start tag always contains the HTML element's attributes. The text in the middle may also contain other HTML elements. The end tag must be designated with a / before the tag's name. For example:

An example is the font tag which changes the font of text.

fonttext

Note: These elements are closed with a full closing tag such as: .

Normal elements contain a start and end tag. Similar to a raw text element they have thefollowing characteristics. This element is different from the raw text element in the sense that itdoes not need to perform a function for text.

The start tag contains the HTML element's attributes. The text in the middle may also contain other HTML elements. The end tag must be designated with a / before the tag's name. For example:

An example of a normal element is the start and end HTML tags:

Note: These elements are closed with a full closing tag such as: .

Semantic HTML

11

7/31/2019 HTML 4.01 & XHTML 1.1

13/100

Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of theinformation in web pages rather than merely to define its presentation (look). When usingsemantic HTML it is important to delegate all presentational function to cascading style sheets(CSS). HTML should only be used for building structure and adding additional meaning to thatstructure. When writing your documents it's important to always use the most specific tag thatcan be applied to the text or document structure. Key aspects of semantic HTML are thefollowing:

Elements for marking up textElements used for user interactivityElements which are invisible to the userElements which include external documents (such as javascript code or CSS style sheet)Elements which are used to link to external documentsElements used for building document text structure (such as headings, paragraphs etc.)Elements used for quotes and referencesElements used for contact informationElements used for document infrastructureElements used for supporting international audiencesElements used to create formsElements used to display programming informationElements used to create tablesElements used for definitionsElements used to create menusElements used for multimediaElements used in the creation of listsElements used for generic purposes

As you can see from the above, semantic HTML is all about the meaning of the text and themeaning of the usage of the HTML elements. The ultimate goal of semantic HTML is to provideas much meaning to the usage of the text you are marking up. Semantic HTML doesn't just

relate to the usage of the elements. Additional semantic meaning can be provided throughspecific usage of attributes. This book has been written to explain, in detail, how to effectivelyuse semantic HTML.

Using CSS

CSS stands forCascading Style Sheets. CSS style sheets are used to quickly style awebsite. To be an amazing web developer it is a good idea to always use CSS to style yourpages instead of using the styling features in HTML. When you take the CSS course youshould only use CSS to style your pages. At this point, don't worry about making your pages

stylish. You simply need to worry about building good HTML pages that follow W3C standards.

Deprecated Elements and Attributes

A deprecated element or attribute means the functionality has become obsolete due tobrowsers no longer supporting its use or a different method has been created which made the

12

7/31/2019 HTML 4.01 & XHTML 1.1

14/100

tag obsolete. Often times a better method gets created for performing that specific HTMLfunction. A good example is with CSS and HTML. CSS is used for styling a document and thisis the recommended method for doing so. However, before CSS was created HTML tags werecreated for styling the page. Once CSS was created many of these tags were deprecated.

Obsolete Elements and Attributes

Certain elements and attributes were made obsolete with the introduction of HTML 5standards. Obsolete/deprecated elements and attributes have been removed from this course.This is because you will be taking the HTML 5 + CSS course after and will eventually know thecomplete working knowledge of HTML/HTML5/CSS. The following chart lists the HTML tagsthat were deprecated by HTML 4.01. It also lists the tags that were made obsolete by HTML 5.

Deprecated sinceHTML 4.01

Obsolete sinceHTML 5

(obsolete)

(obsolete)

13

7/31/2019 HTML 4.01 & XHTML 1.1

15/100

Chapter 3: Basic HTML Structure

Basic HTML Page Structure

The overall structure of an html document consists of three HTML elements:

...

The root element of an HTML document. All other HTML elements are contained within thesetags.

The HTML element marks the beginning and the end of an HTML document.

...

Container for processing information and metadata about an HTML document.

It contains head elements. Head elements are elements which can only be placed in betweenthe head tags.

...

Container for the displayable content of an HTML document.

Here is an example of this being demonstrated:

14

7/31/2019 HTML 4.01 & XHTML 1.1

16/100

Document Type Declaration

The document type declaration (DTD) is used to tell the web browser what type of HTMLversion you will be writing in. HTML 4.01 has three different DTDs and XHTML 1.1 has one.

The HTML 4.01 StrictDTD includes all elements and attributes that have not been deprecatedor do not appear in frameset documents. For documents that use this DTD, use this document

type declaration:

The HTML 4.01 Transitional DTD includes everything in the strict DTD plus deprecatedelements and attributes (most of which concern visual presentation). For documents that usethis DTD, use this document type declaration:

The HTML 4.01 Frameset DTD includes everything in the transitional DTD plus frames as well.For documents that use this DTD, use this document type declaration:

and forXHTML 1.1:

When writing your doctype make sure to use uppercase as well as the exclamation mark.When the web browser processes the doctype the browser runs in one of twomodes: standards mode orquirks mode. When a doctype is present it operates in standardsmode and if no doctype is present then it runs in quirks mode. If no doctype is present thenthere might be issues with processing the page. For XHTML, the doctype is required. Thereason doctype is good to declare is because certain HTML tags are only available in certainDTDs. If you declare the wrong doctype those HTML tags might not be rendered by thebrowser. Also the doctype must be written before the beginning tag. Here is a chart ofthe HTML/XHTML DTDs.

15

7/31/2019 HTML 4.01 & XHTML 1.1

17/100

HTML TagHTML 4.01 / XHTML 1.0 DTDs

XHTML 1.1Transitional Strict Frameset

Yes Yes Yes Yes

Yes Yes Yes Yes

Yes Yes Yes Yes

Yes Yes Yes Yes

Yes No Yes No

Yes Yes Yes No

Yes Yes Yes Yes

Yes Yes Yes Yes

Yes No Yes No

Yes Yes Yes No

Yes Yes Yes Yes

Yes Yes Yes Yes

Yes Yes Yes Yes

Yes Yes Yes Yes

Yes Yes Yes Yes

Yes Yes Yes Yes

Yes No Yes No

Yes Yes Yes Yes

Yes Yes Yes Yes

Yes Yes Yes No

Yes Yes Yes No

Yes Yes Yes Yes Yes Yes Yes No

Yes Yes Yes Yes

Yes No Yes No

Yes Yes Yes Yes

Yes Yes Yes Yes

Yes Yes Yes Yes

Yes Yes Yes Yes

Yes Yes Yes Yes

Yes No Yes No

Yes Yes Yes Yes

No No Yes No

No No Yes No

16

7/31/2019 HTML 4.01 & XHTML 1.1

18/100

to Yes Yes Yes Yes

Yes Yes Yes Yes

Yes Yes Yes Yes

Yes Yes Yes Yes

Yes Yes Yes Yes

Yes No Yes No

Yes Yes Yes Yes Yes Yes Yes Yes

Yes Yes Yes No

Yes No Yes No

Yes Yes Yes Yes

Yes Yes Yes Yes

Yes Yes Yes Yes

Yes Yes Yes Yes

Yes Yes Yes Yes

Yes Yes Yes No

Yes No Yes No

Yes Yes Yes Yes

Yes No Yes No

Yes Yes Yes Yes

Yes Yes Yes Yes

Yes Yes Yes Yes

Yes Yes Yes Yes

Yes Yes Yes Yes

Yes Yes Yes Yes

Yes Yes Yes Yes

Yes Yes Yes Yes

Yes Yes Yes Yes

Yes No Yes No

Yes Yes Yes Yes

Yes Yes Yes Yes

Yes Yes Yes Yes

Yes Yes Yes Yes Yes Yes Yes Yes

Yes No Yes No

Yes Yes Yes Yes

17

7/31/2019 HTML 4.01 & XHTML 1.1

19/100

Yes Yes Yes Yes

Yes Yes Yes Yes

Yes Yes Yes Yes

Yes Yes Yes Yes

Yes Yes Yes No

Yes Yes Yes Yes

Yes Yes Yes Yes Yes Yes Yes No

Yes Yes Yes Yes

Yes Yes Yes No

Yes Yes Yes Yes

Yes Yes Yes Yes

Yes Yes Yes Yes

Yes No Yes No

Yes Yes Yes Yes

Yes Yes Yes Yes

HTML Tag

The HTML tags define the beginning and end of your HTML code. To define your HTML tagsuse the following:

As a rule of thumb, you should never place HTML tags outside of the tags. There arethree attributes that you can define for the HTML tag:dir, lang and xmlns. These attributesshould sound familiar as two of them are standard core attributes and can be used by manyelements. Let's cover them in more detail.

The lang attribute tells the browser and search engines what language the document is in.

Defining the HTML document as English:

In order to define other languages you have to use the correct two letter language code. Thelanguage code follows ISO 639-1 (see reference section for other language codes). You can

18

7/31/2019 HTML 4.01 & XHTML 1.1

20/100

also use the xml:lang attribute when using XHTML. It is defined in the same way as the langattribute. For example you would replace lang="en" with xml:lang="en".

Using the dir attribute, you can define what direction the text in the document should bedisplayed.

Defining the document's text direction as either left to right (LTR) or right to left (RTL):

The last attribute is the xmlns attribute. This attribute stands for XML namespace. XMLnamespaces are used for providing uniquely named elements and attributes in an XMLdocument. In XHTML this attribute should always be defined as: http://www.w3.org/1999/xhtml.This is important to know because it tells the browser that you are using XHTML elements andtags. Without the XML namespace being defined you risk having errors with your web page.Remember, the web browser can read a variety of different markup languages, scriptinglanguages and other web technologies. Often times each language has the same tag names

as other languages. By using the xmlns this issue is resolved. Here is an example of xmlnsbeing defined as an xhtml document:

Head Tags

Head tags are used to define head elements. Head elements include scripts, meta information,page title, and cascading style sheets (CSS). To define the beginning of your head section use

the following tags:

In total there are seven tags which can be placed in the headtag: ,,,,, and . These tages must beplaced in between the head tags.

Title Tags

When discussing the head tag it is important to mention the title tag. The title tag defines thetitle of the page and is a required tag in the head section. To define your page title use thefollowing tags.

19

7/31/2019 HTML 4.01 & XHTML 1.1

21/100

PAGE TITLE GOES HERE

The document title will show up in the browser toolbar, the page name if bookmarked and insearch results pages. Make sure to name your documents accurately.

Base Tag

The base tag is used to define the base URL for all relative URLs (ie. /help) in the document.For example, using the base tag you can set the base URL as your primary domain URL (ie.http://www.tabletuniversity.com). Once you have accomplished that all further URLs can be setwithout the domain name URL. For example instead of typing"http://www.tabletuniversity.com/help" you can instead simply write /help instead. There are twoattributes for the base tag:

Href: This is the base URL to use for all relative URLs in the document. It must be placedbefore any relative URLs.

Target - Defines how the link will be opened. There are five possible options listed below forthis attribute:

1._blank: Opens the document in a new window.2._self: Opens the link in the same windows at the current page (default value).3._parent: Opens the document in the parent frame.4._top: Opens the in the body of the window.5.framename: Opens the document in a specific frame by name.

Link Tags

The link tag is used for including CSS style sheets into your documents. In total there are fivepossible attributes for this tag:

Href: The URL of the document you are including.

Hreflang: The language the the linked document is in. Use the two letter language codes (ie.

"en" for english). This is not a required attribute.

Media: Defines the type of device which the linked document applies to. You can have differentstylesheets for different devices (print, screen, braille, aural etc.).

20

7/31/2019 HTML 4.01 & XHTML 1.1

22/100

Rel: The relationship of the linked document to the current document. If the href is a CSSstylesheet then this could be set to: rel="stylesheet".

Type: This attribute is used to define the type of document you linked to. If the href is a CSSstyle then this should be set to: type="text/css".

Script Tag

The script tag is used for embedding external or internal script files/code to be included in thedocument. This tag will be explained in Chapter 13: scripts.

Noscript Tags

The noscript tag is used for displaying content to the user when the included script is notsupported or scripting is disabled by the browser. This tag will be explained in Chapter 13:scripts.

Style Tags

Style tags are used for including CSS code directly into your document. This tag will beexplained in Chapter 9: Page Layout.

Meta Tags

Meta tags contain meta information. Meta information literally means data about data. InHTML, meta information is available to search engines through the use of meta tags. Metainformation contains various data which we call metadata. The metadata can containinformation such as: description, keywords, author etc. Since metadata is only available tosearch engines it is displayed in the head section of the web page. The meta information isplaced in the head section of the document between the tags. Meta tags are extremely

powerful in what they can accomplish. These tags will be explained in detail in chapter 14:Advanced HTML Features & Publishing HTML Pages.

21

7/31/2019 HTML 4.01 & XHTML 1.1

23/100

Body Tags

The body tags define the content of the web page such as text, hyperlinks, tables, images,movies so on so forth. To define your html body use the following tags:

Adding Comments

Every now and then you may want to add extra information about the document withoutanyone seeing it. You are able to do this by adding a comment in the HTML code. Thesecomments will only show up to people who are viewing the page code. It is a good habit toexplain what your code is doing by using comments. This habit is good for when you need toupdate the page's code.

To use a comment start it with this tag:

Your comment will be placed in between those tags, for example:

Due to the nature of comments, avoid using multiple hyphens inside a comment.

Putting it all together

So far we have discussed doctype, html tags, head tags, title tags, body tags and comments.Now its time to put it all together and write our very first html document. Using all of the aboveinformation, here is what we get:

1. 2.

22

7/31/2019 HTML 4.01 & XHTML 1.1

24/100

3. 4. My First HTML Page5. 6. 7.

7/31/2019 HTML 4.01 & XHTML 1.1

25/100

Chapter 4 - Displaying Text

Paragraphs

In order to write paragraphs of text you need to place your text in the body section of your page

which is designated by the beginning and ending body tags. When starting your paragraphsyou need to use the following code to designate that the following text is a paragraph:

This is some text.

The paragraph tags will place one blank white space between your paragraphs (depending onthe CSS stylesheet). If you wish to not have the white line then you need to use the line breaktag.

Line Break

The line break tags are used to start on the next line without a white space being placed belowthe above text. A good example of where the line break tag is useful is when you are writing anaddress. To declare a line break use the following tag:

In HTML there is no end tag for the line break tag because its a void element. In XHTML the

line break tag must be closed. Use the following tag for line breaks in XHTML.

Headings

Headings help to provide structure to a page. For example, most pages will have the page titleand subsections. Headings allow you to separate pieces of text so they are easier for thereader. There are six levels of heading tags and as you go up in heading number the text

gets progressively smaller. The H1 tag is used for the most important titles and the remainingtags are used for titles that are less important (such as subsections). Here are the six headingtags that can be used.

heading 1heading 2

24

7/31/2019 HTML 4.01 & XHTML 1.1

26/100

heading 3heading 4heading 5heading 6

Here is how each heading tag looks like in your browser:

Take note that headings 5 and 6 are smaller than standard body text. Heading styles can alsobe modified using Cascading Style Sheets (CSS).

Inserting Horizontal Line

A horizontal line is a great way to divide the page. If you need to add a horizontal line simplyadd this code:

It is similar to the line break tag in the sense that there is only one tag.

and here is how a horizontal line looks:

25

7/31/2019 HTML 4.01 & XHTML 1.1

27/100

Changing Text Direction

If you wish to change the direction of text then you can do so by using the bdo tag whichstands for bidirectional override. There are two settings for the bdo tag which are right to left(rtl), left to right (ltf) and auto (browser decides) which are defined using the dir attribute. Thistag will override the existing text direction.

Example text of right to left:

Right to Left Text!!

Example text of left to right:

Left to Right Text!!

and here they are being used in your browser:

26

7/31/2019 HTML 4.01 & XHTML 1.1

28/100

Chapter 5 - Formatting Text

Bold Formatting

Bold formatting is used to make text appear bold, so it stands out to the reader. Like this. To

make text bold, use the following tags:

This is some text that is bold.

Another way to make text appear bold is by using the strong tag. The strong tag is used tomake text appear important. Most browsers these days simply convert strong tags to the samefunctionality as the bold tags. To use the strong tags use the following:

This is some text that is strong, it also looksbold

Italic Formatting

Italic formatting is another way of bringing attention to specific text. Like this. To useitalic formatting use the following:

This is some text that is italic

Just like the bold formatting, Italic formatting also has a separate tag with a similar functionalityand that tag is the emphasis tag.

This is some emphasis text that appears italic

Subscript Formatting

Subscript formatting is used for making subscript text, which is usually used in representingchemical equations and other scientific data like this: H2O.

To begin subscript formatting, use the following tags:

This is subscript formatting

27

7/31/2019 HTML 4.01 & XHTML 1.1

29/100

Superscript Formatting

Just like subscript format, superscript is also used to represent scientific data. Like this: 55.

To begin superscript formatting, use the following tags:

This is superscript formatting.

Small Formatting

Just like big formatting. Small formatting also changes the font size of the text. In this case, itmakes it smaller, like this: small.

To begin small formatting, use the following tags:

This is small formatting

Inserted Text Formatting

Lets say you have written an article and posted it at a specific date. Later on, you find that youwant to insert some text after the fact and let the readers know you inserted that text at a laterdate. The insert text formatting allows you to do that and makes it look like this: inserted text.

To begin insert formatting, use the following tags:

Inserted text

There are two optional attributes for this tag:

Cite: URL that explains the change.

Datetime: The date and time the change was made. (ie. 2012-12-13 00:00)

28

7/31/2019 HTML 4.01 & XHTML 1.1

30/100

Deleted Text Formatting

Just like inserted text formatting, the deleted text formatting allows you to delete text after youhave published the article and let readers know you deleted that piece of text. It makes the textlook like this: deleted.

To begin delete formatting, use the following tag:

Deleted text

This tag has two optional attributes:

Cite: A URL to explain the reason for the deletion.

Datetime: A valid date and time for the change. (ie. 2012-12-13 00:00)

Other Text Formatting Tags

The above HTML tags are probably the ones which you will use most often. However, there arestill many more to cover and we will be covering all of them. The next set of text formatting tagsincludes quotations, acronyms, citations and more.

Abbreviations

Abbreviations allow you to add additional information about some text. Unlike traditional HTMLtags the abbreviation tag is slightly different. When using the abbreviation tag you have todefine what the abbreviation text will consist of. To do this we have to add some additionalinformation to the tag, mainly the title attribute.

To begin abbreviation formatting, use the following beginning tag:

abbreviation

The text that you want to abbreviate goes in between the begging tag and the ending tag, likethis:

The abbreviatedtext

29

7/31/2019 HTML 4.01 & XHTML 1.1

31/100

Here is how abbreviated text looks in your browser:

Addresses

The address tag is used to place contact information for the author or owner of the webpage/document.

To begin address formatting, use the following beginning tag:

Its also important to mention that you have to use line break tags (
) to separate each lineof the address. Here is an example of the address tags used correctly:

Jason Smith
12543 Chesire St.
New Haven, Connecticut 92393
Tel: (232)234-2343
Email:Jason.smith (at) email.com

and here is how that will look in your browser:

Jason Smith

12543 Chesire St.New Haven, Connecticut 92393Tel: (232)234-2343Email:Jason.smith (at) email.com

Block Quotations

The block quotation tag is used to quote large sections of text. Here is how to use it:

To begin block quote formatting, use the following tags:

Here is an example of a block quote from wikipedia:

30

7/31/2019 HTML 4.01 & XHTML 1.1

32/100

In 1980, physicist Tim Berners-Lee, who was acontractor at CERN, proposed and prototyped ENQUIRE, a system forCERN researchers to use and share documents. In 1989, Berners-Leewrote a memo proposing an Internet-based hypertextsystem.

and how it is displayed in your browser:

In 1980, physicist Tim Berners-Lee, who was a contractor at CERN, proposed andprototyped ENQUIRE, a system for CERN researchers to use and sharedocuments. In 1989, Berners-Lee wrote a memo proposing an Internet-basedhypertext system.

When quoting anything it is very important to cite the source for the quote. To do this we usethe cite attribute, as follows:

In 1980,physicist Tim Berners-Lee, who was a contractor at CERN, proposedand prototyped ENQUIRE, a system for CERN researchers to use andshare documents. In 1989, Berners-Lee wrote a memo proposing anInternet-based hypertext system.

and lets see how that displays in your browser:

In 1980, physicist Tim Berners-Lee, who was a contractor at CERN, proposed andprototyped ENQUIRE, a system for CERN researchers to use and share

documents. In 1989, Berners-Lee wrote a memo proposing an Internet-basedhypertext system.

As you can see, there is no change from the blockquote without cite being used. The reason forthis is because most major browsers in use do not support the cite attribute. In the future, thecite attribute may be supported by browsers so its a good habit to use the cite attribute.

Single Quotations

Single quotations are very similar to block quotes.

To begin single quote formatting, use the following tags:

31

7/31/2019 HTML 4.01 & XHTML 1.1

33/100

Similar to block quotes you can also use cite to place a citation.

QUOTED TEXT HERE

Citations

The cite HTML tag is used to reference another work. It does not have to be a reference to awebsite.

To begin citation formatting, use the following tags:

Here is how a citation will look with citation tags:

Report of the Nation, Susan Watson, 1998

Definitions

The definition tag is used to indicate a definition of a word.

To begin definition formatting, use the following tags:

hat: A shapred covering for the head.

and here is how it shows up:

Hat: A shaped covering for the head.

Computer Code Text Formatting

There are also six tags for computer text formatting. It's important to note that most of these

tags don't do much in terms of changing the appearance of the text. The appearance of the textshould be modified by using CSS.

32

7/31/2019 HTML 4.01 & XHTML 1.1

34/100

Code

The code tag is used to represent computer code that would be used in a program.

To begin code formatting, use the following tags:

Here is how code formatting looks:

Winwait for $y =134 Unless $y>2 endif

Keyboard Text

Keyboard text is used to indicate text that should be typed on the keyboard, for example into acomputer program prompt.

To begin keyboard text formatting, use the following tags:

Here is how the keyboard formatting looks:

When the box pops up, type: Apples.

Sample Computer Code

If you are writing computer code you can use the sample computer code tags to present it. Youcan also use the sample computer code tag to bring extra emphasis to some special text.

To begin sample computer code formatting, use the following tags:

Here is how the sample computer code tags look:

This is sample computer code.

33

7/31/2019 HTML 4.01 & XHTML 1.1

35/100

Variable Text

Variable text is used to indicate a variable or parameter that would be used in a computerprogram.

To begin variable text formatting, use the following tags:

Here is how variable text format looks:

The variable to enter is 500.

Preformatted Text

The preformatted text tag is used to display text exactly as you typed it. All spaces and returnsare presented exactly as you typed them. The preformatted text tag does not make the browserignore HTML tags that are typed inside the preformatted text tags. So you can still use bold,italic and any other HTML tags you wish and they will be processed correctly.

To begin preformatted text formatting, use the following tags:

Here is how preformatted text format looks:

34

7/31/2019 HTML 4.01 & XHTML 1.1

36/100

and here is how the above text looks in HTML code:

Guests Cost per person1 $102 $93 $84+ $7

35

7/31/2019 HTML 4.01 & XHTML 1.1

37/100

Chapter 6 - Creating Lists

There are many tags which are used to create lists in HTML. The first thing we need tounderstand is the three different types of lists that can be created in HTML. They areunordered, ordered and definition. Here are the differences between each type:

Unordered - Creates a list with bullet points.

Ordered - Creates a list that is numbered or alphabetical.

Definition - A list for terms and their definitions.

Unordered lists

There are two tags used to created unordered lists: and . The UL tag is used to definethe beginning and end of a list and the li tag is used to create each bulleted item in the list.Here is an example of a basic unordered list.

Unordered listOrdered listDefinition list

and how it is displayed:

Unordered listOrdered listDefinition list

Ordered Lists

Ordered lists are used to create lists that are numbered or alphabetical. Just like unorderedlists you also use the tag for each line item in the list.

Here is an example of an ordered list:unordered listordered listdefinitions list

36

7/31/2019 HTML 4.01 & XHTML 1.1

38/100

and how it shows up:

1.unordered list2.ordered list3.definitions list

Definitions List

The definitions list tag is used to define terms and their definition. The tag is used to beginand end the definitions list. is used for the definition term and is used for thedefinition description. Here is an example of a definitions list:

HTMLHypertext Markup LanguageCSS

Cascading Style Sheets

and here is how it shows up:

HTMLHypertext Markup Language

CSSCascading Style Sheets

37

7/31/2019 HTML 4.01 & XHTML 1.1

39/100

Chapter 7 - Hyperlinks

Before we begin discussing hyperlinks you must first understand what a Universal ResourceLocator (URL) is. A URL is basically the way the internet figures out where to access data onthe internet. For example how would you get to the Google search engine by using a webbrowser? To accomplish this task you would use Google's URL which

is: http://www.google.com. Each website has a unique URL. Information after the .com is usedto go to a specific section of the website. For example if you type http://www.google.com/help itwill take you to google's customer support page. A URL may also be called a UniversalResource Indicator (URI).

Anchor Tag

The anchor tag is used to link to other pages or to create a shortcut to a specific point in thedocument. Most browsers have default display options for anchor tags. Unvisited links are

underlined and blue. Visited links are underlined and purple. Active links are underlined andred. The basic anchor tags is the following:

The most basic anchor tag usage is to create a hyperlink to another page. To do this you usethe hrefattribute to define the URL and you also place some text after the beginning tag todefine the text which will be shown to the user. Like this:

Tablet University

Here is how it will show up: Tablet University

You can also use the anchor tag to create a link inside the web page. An example of this woulda table of contents with links that direct you to a specific point in the document. To use ananchor you must first create it using the name attribute. Such as the following:

First, you have to create the anchor and place it in the location of the web page where youwant the user to be directed. To call an anchor you use the href tag, such as the following:

Click here to go to the bottom of the page.

38
http://tabletuniversity.com/http://tabletuniversity.com/

7/31/2019 HTML 4.01 & XHTML 1.1

40/100

Likewise, you can link to a specific anchor even from a hyperlink located on a different page byincluding the anchor behind the URL. For example:http://www.tabletuniversity.com/content.html#bottom.

There are some additional attributes which can be defined for the anchor tag. Lets cover thembriefly:

Type - Specifies the MIME media type for the link target.

Hreflang - This attribute is used to define the language of the linked document.

Rel - This attribute is used to define the relationship between the current document and thedocument you are linking to. Most browsers do not use this attribute, however, google doeshave a special use for this. If you use rel="nofollow" then this tells the google search engine tonot follow the link. What this means is the link will not provide any benefit to the page you arelinking to. It was designed to discourage people from placing unwanted links on your website.

Target - Defines how the link will be opened. There are five possible options listed below forthis attribute:

1._blank: Opens the document in a new window.2._self: Opens the link in the same windows at the current page (default value).3._parent: Opens the document in the parent frame.4._top: Opens the in the body of the window.5.framename: Opens the document in a specific frame by name.

39

7/31/2019 HTML 4.01 & XHTML 1.1

41/100

Chapter 8 - Tables

Table Element

The table element is used for creating tables. Before I can explain all the specific attributes for

the table element, we must first learn how to create a basic table with some information in it.These tags are used to create a basic table:

- Creates a row in the table

- Creates a header

- Creates a cell for data

Here is an example of a basic table:

Age

18

19

Example of basic table:

Age

18

19

Attributes

The element is used to create header cells. There are a few attributes which can be usedwith the element:

Colspan: Indicates how many columns the header extends over. Can only be non negativeintegers from 0 to 1000.

40

7/31/2019 HTML 4.01 & XHTML 1.1

42/100

Rowspan: Indicates how many rows the header extends over. Can only be non negativeintegers from 0 to 65534.

Headers: Indicates the ID attribute of the elements which correspond to this element.

Scope: This attribute defines the cells that the header defined in this element relates to. Ithas the following values:

1.row - The header relates to all cells in the row that this element belongs to;2.col - The header relates to all cells in the column that this element belongs to;3.rowgroup - The header relates to all remaining cells in the row that this elementbelongs to. The remaining cells are either those to the right of this element, or to his leftdepending of the value of dir attribute defined on the element;4.colgroup - The header relates to all remaining cells in the column that this elementbelongs to;5.auto

Attributes

The element is used to create table data.

Colspan: Indicates how many columns the header extends over. Can only be non negativeintegers from 0 to 1000.

Rowspan: Indicates how many rows the header extends over. Can only be non negativeintegers from 0 to 65534.

element

This element allows you to specify the title for the table. This element must be specificallyplaced after the table beginning tag. Only one caption per table is allowed.

Age of Guests

Age

18

19

41

7/31/2019 HTML 4.01 & XHTML 1.1

43/100

how the table shows up:

Age of Guests

Age

18

19

, , and elements

These three elements are used for grouping content together in your table.

- Used for grouping header content.

- Used for grouping body content.

- Used for grouping footer content.

When using these elements, ordering is important. You have to set thead first then tfoot andfinally tbody. This is to allow your table to be displayed properly.

Age

source:....

18

19

Here is how it is displayed:

42

7/31/2019 HTML 4.01 & XHTML 1.1

44/100

Age

18

19

source:....

ElementThe col tag is used for setting attributes for an entire column in the table. Normally you wouldhave to set the attributes for each cell of the table but with the col tag you can set theattributes for the entire column. There are several attributes that can be defined using the coltag, which are:

Span - Sets the number of columns the column should span.

Age

18.........

19.........


Age

18...........

19.............

Element

The colgroup element is used to format groups of columns all at once. This tag can be replaced

by using CSS to style instead. Here are the possible attributes for colgroup element.

Span - Sets how many columns the colgroup element will span.

43

7/31/2019 HTML 4.01 & XHTML 1.1

45/100

Courses

Cost

Time

HTML

$1010:00

CSS

$10

11:00


Courses Cost Time

HTML $10 10:00

CSS $10 11:00

44

7/31/2019 HTML 4.01 & XHTML 1.1

46/100

Chapter 9 - Page Layout

Element

The style element is used for establishing how HTML elements will be displayed. For example,

you may want all your H3 tags to be size 32 and blue. Instead of applying the formatting toeach H3 tag, you can use styles to apply it quickly. The style element must always be placed inthe head section of the HTML document. You can also use Cascading Style Sheets (CSS) tomake a separate file which apply the styling uniformly across every HTML page where the CSSfile is included in the header. CSS is covered in a separate course.

h3 {color:blue size:32;}

b {color:red size:12;}

Take note of the type attribute. This attribute must always be defined as, "text/css". There isalso an optional attribute of media. The media attribute allows you to set a specific style forspecific tasks. There are 9 possible settings:

Screen - Computer screens (default)

Tty - Teletype screens.

Tv - Television screens.

Projection - Projectors.

Handheld - Mobile phones, tablet computers etc.

Print - Printed pages.

Braille - Braille devices.

Aural - Speech synthesis.

All - All devices

45

7/31/2019 HTML 4.01 & XHTML 1.1

47/100

The tag also has three additional attributes:

Scoped: If this attribute is present then the stylesheet only applies to the parent element. If it isabsent then it applies to the entire document.

Title: Specifies alternate stylesheets.

Disabled: Disables the stylesheet from applying to the document.

As stated before you can use CSS to quickly add styling to a page. To do this you must use thelink attribute as follows (placed in head section of document):

Element

The div tag is an important element to understand because it allows you to group togethersections of the document. For example, using the div element you can create a menu and usecss to style the menu. You can also use JavaScript to interact with specific div elements whichallows you to create very dynamic and user friendly websites. These concepts will be explainedin the respective course. At this time its important to understand that the div element is used togroup together sections of the document. Here is an example of the div element being used.

Page title

Note: The above div tag has the standard attribute of ID being defined. This is used by CSSand JavaScript to identify which div tag is being called. You may have multiple div tags in apage so its important to identity each div tag with a unique ID.

Element

The span element is similar to the div element in the sense that both are used to groupsections of the document in order to be modified by CSS or JavaScript. Span is used for

46

7/31/2019 HTML 4.01 & XHTML 1.1

48/100

grouping together inline content. For example, you may only want to modify a specific piece oftext in the document. You use the span element to accomplish this task. There are no attributesfor the span element other than the standard attributes. Just like the div element you mustidentify each span tag with a unique ID.

Page title

This is some text that I want to modify using

javascript or CSS.

47

7/31/2019 HTML 4.01 & XHTML 1.1

49/100

Chapter 10 - Multimedia

Img tag

The image tag is used to display images. In HTML 4.01 the img tag does not need to be

closed. However in XHTML the image does needs to be closed with a /> ending tag. The imagetag works by fetching the appropriate image from the source location when the page loads. Thesource image should not be moved once it is used in an img tag. Never link to an image that isnot hosted on your server. If a 3rd party finds out then they could potentially change the imageto whatever they like. There are two required attributes for the image tag, which are:

Alt - Sets alternate text for the image if the image does not load or if images are disabled in thebrowser.

Src - Sets the URL where the image is located.

Width: Width of the image in pixels or percentage.

Height: Height of the image in pixels or percentage.

7/31/2019 HTML 4.01 & XHTML 1.1

50/100

tag we first have to set the usemap attribute for the img tag. Setting this attribute will connectthe image to the image map. Here is how that is done:

7/31/2019 HTML 4.01 & XHTML 1.1

51/100

Rect - Coords is defined as (x1,y1, x2,y2). x1, y1 is the top left corner and x2,y2 is the bottom

right corner. Example: (50,50,60,60)

Poly - Coords is defined as (x1,y2,x2,y2,x3,y3 etc.) where x1,y1 is the first point then x2,y2 is the

second point so on so forth.

Default - The entire region of the image is selected.

Here is an example of a complete image map:

50

7/31/2019 HTML 4.01 & XHTML 1.1

52/100

7/31/2019 HTML 4.01 & XHTML 1.1

53/100

1.application/x-www-form-urlencoded: The default value used if the attribute is notdefined.2.multipart/form-data: Use this attribute if the tag has the type attribute of,"file."3.text/plain: HTML 5

Name: The name of the form, but ID attribute should be used instead.

Target: Where the response should be displayed after submitting the form. You can list theelement ID or you can use four predefined locations:

1._self: Load the response into the same frame as the form element.2._blank: Load the response into a new frame.3._parent: Load the response into the existing frame.4._top: Load the response into the top level element.

If you were to type the beginning and end form tags into your HTML web page then nothingwould show up because we need to define many more elements for the form such as, whattype of input box, what type of data to accept and where to send the data. At this time you

maybe wondering where the data is saved when a user submits the form? The answer is nowhere at the moment. HTML has no functionality to save information to a database (such asmySQL). This is because HTML is a client-side markup language and not a server-sideprogramming language. In order to save information to a database, you need to use a server-side programming language like PHP. At the moment, we are only learning how to build thebasic structure of forms. How to utilize the submitted form data will be discussed in theJavascript course and PHP course.

Input Tags

The input tags are designed to define form elements that can be placed inside the form tags.Some input type include: text boxes, buttons, submit buttons and radio buttons.

To declare the beginning of your input element, use the following beginning tag:

Note that there is no end tag for an input tag, only the />.

Input Element Type

There are ten types of input element types that can be defined, they are: button, checkbox, file,hidden, image, password, radio, reset, submit and text.

52

7/31/2019 HTML 4.01 & XHTML 1.1

54/100

7/31/2019 HTML 4.01 & XHTML 1.1

55/100

7/31/2019 HTML 4.01 & XHTML 1.1

56/100

The radio input element type is used for allowing the user to select a choice or not. Similar tothe check box input element, the radio input element also has the checked attribute. If set to,"checked" then the radio button will be checked when the page loads. The value attribute mustbe defined with the data that will be stored in the radio button. You can create a group of radiobuttons by setting the name attribute the same. When this is done, only one radio button canbe selected in the group.

This is how you declare a radio input button.

It shows up in HTML like this:

The reset input element type is used to reset all input fields to their default values. This inputtype only works for the input fields that are included in the tags. If you havemultiple forms then it doesn't affect the other forms.

This is how you declare a reset button.


The submit input element type is used to send input field data to a server which is processedby a server side script such as PHP, ASP etc. When using a submit button you must also definethe form action attribute and the method attribute. The action attribute is the server side scriptwhich will process the form data and the method attribute is the method used to send the data(either POST or GET). POST and GET will be explained when learning a server side scripting

language.

This is how you declare a submit button.

55

7/31/2019 HTML 4.01 & XHTML 1.1

57/100


Also here is an example of a complete form element with a text box and a submit button in aform.

Name:

Here is how it shows up:

The text input element type is used to display a one line box where text/numbers can beentered. Similar to the password input element type, the text input element type can also usethe maxlength attribute.

This is how you declare a text box.

Here is how it shows up:

There are some additional input element type attributes that can be applied to all input elementtypes.

Disabled attribute - The disabled attribute allows an input element type to be disabled whenthe page loads. When an input element is disabled it is unclickable and not useable. Disabledinput elements can still be used but you have to use JavaScript to enable the element. Oftentimes the disabled element attribute is used to disable an input element until some condition is

met (ie. a check box is check or a file is uploaded).

Name attribute - This attribute assigns a name to the input element. All input elements should

56

7/31/2019 HTML 4.01 & XHTML 1.1

58/100

be assigned a name because the name is used to pass the data on to other scripts (ie.JavaScript/php etc.) when the form is submitted. It is a good habit to assign all your inputelements a name that correlates to the data it is storing. How to access input data viaJavaScript or php will be covered in those respective courses.

Size attribute - This attribute sets the width of the input field. The value of this attribute is set inpixels. For the input element types of passwords and text the size attribute sets how manycharacters are visible.

Read only attribute - Makes the element so the value cannot be modified by the user.

Size attribute - The size of the input element in pixels. For the text or password this attribute isdefined in a number of characters.

Value attribute - The value attribute defines what value the input field holds. This attribute isspecific to each input field type.

1. Button, reset and submit - The value attribute defines the text of the button.2. Text, password and hidden - The value attribute defines the default value of the input

field.3. Check box, radio and image - The value attribute defines the value that is connected

with the field.

The check box and radio input types require the value attribute to be defined. The file input

type does not use the value attribute. When a form is submitted these values are passed to theassociated script.

Do you accept the terms and conditions?

Agree

Disagree

Example of the value attributes being used:

57

7/31/2019 HTML 4.01 & XHTML 1.1

59/100

TextArea Tag

The textarea tag is used to define a multi-line text input box. Textarea boxes are unique in thefact that they can hold a virtually unlimited number of characters. There are two requiredattributes for the textarea tag - cols and rows. The cols attribute defines the width of the textarea and the rows attribute defines the height of the textarea. The text area can be edited bythe user.

Default text goes here, and it can be edited by the user, try it

out for yourself!

Example of the code above:

The textarea field also has three optional attributes:

Disabled - Disables the text area using the disabled value.

Name - Specifies the name for the text area.

Readonly - Sets the text area to read only using the readonly value.

Button Tag

The button tag is used to create a simple push button. Unlike a button created with the tags the button tag allows you to place additional content in the button, such as images or text.Make sure to always define the button type. The possible attributes for the button tag are thefollowing:

Disabled - Sets the button to disabled using the disabled value.

Name - Specifies the name of the button

Type - Specifies the type of the button. Three possible values:

1. Button - A clickable button2. Submit - A submit button

58

7/31/2019 HTML 4.01 & XHTML 1.1

60/100

3. Reset - Clears form data

Value - The value of the button.

Reset Button!

Here is how it looks:

Select Tag

The select tag is used to create drop down lists. To define the possible options to select youmust use the options tag with the values defined. When using the options tags each option tagmust have a value assigned to it.

Here is an example of a drop-down select menu:

Cat

Dog

Fish

Bird

How the drop-down select menu looks:

Additional attributes can be defined for the select tag and options tags. For the select tag hereare the additional attributes that can be defined:

Disabled - If set to disabled, the drop down menu is disabled.

Multiple - If set to multiple, then multiple options can be selected.

Name - Sets the name for the drop down menu.

Size - Sets the number of visible options in the drop down menu.

59

7/31/2019 HTML 4.01 & XHTML 1.1

61/100

Example of some additional attributes being defined:

Cat

Dog

Fish

Bird

How it shows up in your browser:

Here are the additional attributes for the options tag:

Disabled - If set to disabled then the option is disabled.Label - Sets the option to a shorter word if too long.

Selected - If set to selected then the option is selected by default.

Value - Sets the value to be sent when the form is submitted.

Here is a drop down list with some additional attributes defined:

Cat

Dog

Fish

Bird

and here is how it looks:

60

7/31/2019 HTML 4.01 & XHTML 1.1

62/100

Optgroup tag

The optgroup tag is used within the select tag. If you use the optgroup tag it allows foradditional grouping in your drop down lists which makes it easier for the user to read. It isprimarily used for drop down menus with lots of options. The required attribute for the optgrouptag is the label attribute. It defines the text for the label. An additional attribute that can bedefined is the disabled attribute. If it is set to disabled then the entire group of options in the

group is disabled.

Cat

Dog

Fish

Bird

and here is what it looks like:

Label Tag

The Label tag is used to define a label for an input element. The label tag should be the sameas the Id attribute for the element. You use the forattribute to assign the label to the inputelement.

Here is an example of the label tag being used:

Cat

Dog

61

7/31/2019 HTML 4.01 & XHTML 1.1

63/100

7/31/2019 HTML 4.01 & XHTML 1.1

64/100

Chapter 12 - Frames

Frames allow you to embed additional HTML inside of an HTML document. Each HTML pageacts independently of the other.

Iframe Tag

The iframe tag is used for displaying an inline frame that contains another web page. Somebrowsers do not support iframes so it is best practice to include some text telling the user iftheir browser does not support iframes. Many additional attributes can be defined for theiframe. They are as follows:

Height - Sets the height of the frame in pixels (ie. 100px) or percent.

Name - Specifies the name of the iframe.

Src - Specifies the URL of the document to display.

Width - Specifies the width of the iframe in pixels or percent.

Sorry! The browser does not support Ifrmes!

63

7/31/2019 HTML 4.01 & XHTML 1.1

65/100

Chapter 13: Scripts

Javascript and the Script Tag

JavaScript is a scripting language used to add advanced functionality to a website. It allows the

website to be more interactive and dynamic for the user. JavaScript is a complete scriptinglanguage and requires a lot of training in order to use. If you have JavaScript and wish to utilizethe script then you need to add the JavaScript to the HTML page, as the following exampleshows:

Javascript code is placed here

As you can see, one of the attributes being used is the type attribute which we learned about inprevious chapters. This time the type attribute is being used to declare that the following text isJavaScript as indicated by, "text/javascript." In the above example the JavaScript code can beplaced directly in between the script tags. If you have an external JavaScript file you can stilluse the file but you have to link to it. To accomplish this you need to use the src attribute. Thecode below displays how to use the src attribute:

Another attribute you can use with the script tag is the defer attribute. The defer attribute isused to delay the execution of an external JavaScript file until the entire page has loaded. Thisis done to make sure the page functions properly. The delay attribute is being shown below:

Event AttributesHTML tags can contain event attributes. Event attributes allow JavaScript code to be executedwhen a specific event occurs. For example, this could be a mouse click, when a key is pressed,or when the page loads so on so forth. Here is a list of event attributes:

64

7/31/2019 HTML 4.01 & XHTML 1.1

66/100

onblur- When the element loses focus.

onchange - When the value of the element is changed.

onclick - When there is a mouse click on the element.

ondblclick - When there is a double mouse click on the element.

onfocus - When the element comes into focus.

onkeydown - When a key is pressed and held down on the element.

onkeypress - When a key is pressed on the element.

onkeyup - When a key is released on the element.

onload - When the page loads.

onmousedown - When the mouse cursor is over the element and pressed down.

onmousemove - When a mouse cursor moves over the element.

onmouseout - When the mouse cursor leaves the element.

onmouseover- When the mouse cursor is over the element.

onmouseup - When the mouse cursor is released over the element.

onreset - When the form's reset button is pressed.

onselect - When the user selects or highlights text in the element.

onsubmit - When the form's select button is pressed.

onunload - When the page is unloaded.

Here is an example of the onmouseover and onmouseout events. Note: this example containsJavaScript code that you might not be familiar with. JavaScript and events will be explained ingreater detail in the JavaScript course.

65

7/31/2019 HTML 4.01 & XHTML 1.1

67/100

Noscript Tags

On most browsers the user can decide to either enable JavaScript or disable it. This can causeproblems for the user if your website uses a lot of JavaScript. In order to tell the user that yourwebsite requires JavaScript to be enable for certain features you can use the tags.Below is the noscript tag being used.

JavaScript has been disabled for your browser. Please

enable it in the settings tab and refresh the page.

The text in between the noscript tags will only be displayed if JavaScript is disabled.

Object Tag

The object tag is used to embed multimedia elements such as video, audio, PDFs, flash, otherwebsites and many other types of data. There are many optional attributes that can be defined:

Data - The URL of the object to be embedded.

Height - The height of the object in pixels.

Name - Sets the name of the object.

Type - Sets the MIME type of the object.

Usemap - Sets the client side image map to be used for the object.

Width - Sets the width of the object in pixels.

66

7/31/2019 HTML 4.01 & XHTML 1.1

68/100

Param Tag

The param tag is used to define settings for the object tag. These settings will be sent to theembedded multimedia. The parameters you will be able to send varies based on themultimedia type. If the embedded object cannot understand the parameter you pass to it thenthat parameter will have no functionality. There are several optional attributes:

Name - This is the name of the parameter.

Value - This is the value of that parameter.

67

7/31/2019 HTML 4.01 & XHTML 1.1

69/100

7/31/2019 HTML 4.01 & XHTML 1.1

70/100

5. Keywords: A list of applicable keywords for the page. (Completely useless due toabuse)6. Robots: Used to tell search engine crawlers how to utilize the page. Possible optionsas follows:

Index: Allows to index the page. Noindex: Not allowed to index the page. Follow: Allows the crawler to follow URLs listed on the page.

Noodp: Prevents usage of the open directory project description. Noarchive: Search engine cannot archive the page. Nosnippet: No description is to be displayed on the search engine results page. Noimageindex: Prevents the page as showing up as a referral in an indexedimage. Noydir: Prevents the usage of the Yahoo Directory description in the searchengine results page. Nocahce: Caching of the page is not allowed.

Content: This attribute gives the value to the http-equiv or name attributes.

Here are some examples of the meta tag being utilized for advanced functionality:

Defining the HTML charset to be used:

Redirect the page after 5 seconds.

Refresh the page after 5 seconds.

Selecting the default stylesheet:

69

7/31/2019 HTML 4.01 & XHTML 1.1

71/100

Removing Large Sections of HTML via CDATA Section

When you are writing HTML you will often find yourself writing code and removing other code.Some of the code you will not want to delete. Instead you'll want to archive it for future use or

just in case. To do this you use a CDATA structure. Here is an example of the CDATA structurein use:

The good thing about CDATA is that it can be used to remove multiple lines of code veryquickly and easily.

Character Encodings

Character encoding is how character symbols are created in the web browser. Without thecharacter encoding you would not be able to see any letters, numbers or symbols. In HTMLthere are two commonly used types of character encodings: ISO-8859 and UTF-8.

ISO-8859 is separated into 16 different encoding parts. You use the encoding that is specific toyour language. If you are in a western country then your encoding would be ISO-8859-1. Referto the following chart to select the proper encoding. If you do not select the proper ISO-8859encoding then certain characters may not be visible to your visitors.

ISO-

8859-

1

Latin-1Western

European

Perhaps the most widely used part of ISO-8859, covering most Western Europeanlanguages: Danish (partial), Dutch (partial), English,Faeroese, Finnish(partial), French(partial), German, Icelandic, Irish, Italian, Norwegian, Portuguese, Rhaeto-Romanic,

Scottish Gaelic, Spanish,Catalan, and Swedish. Languages from other parts of theworld are also covered, including: Eastern European Albanian, SoutheastAsian Indonesian, as well as the African languages Afrikaans and Swahili. Themissing euro sign and capital are in the revised version ISO-8859-15 (seebelow). The corresponding character set ISO-8859-1 is the default encoding fordocuments received via HTTP when the document's media type is "text" (as in

70

7/31/2019 HTML 4.01 & XHTML 1.1

72/100

7/31/2019 HTML 4.01 & XHTML 1.1

73/100

14

ISO-

8859-

15

Latin-9A revision of 8859-1 that removes some little-used symbols, replacing them withthe euro sign and the letters , , , , , , and , which completes the coverageof French, Finnish and Estonian.

ISO-

8859-

16

Latin-10

South-

EasternEuropean

Intended for Albanian, Croatian, Hungarian, Italian, Polish, Romanian and Slovene,but also Finnish, French, German and Irish Gaelic (new orthography). The focus lies

more on letters than symbols. The currency sign is replaced with the euro sign.

Remembering the above chart may be complex. To make things easier, the unicode encodingsystem was created. The most commonly used format is the UTF-8 character encoding.

UTF-8 contains virtually all symbols in the world's written languages. That's a repertoire ofmore than 110,000 symbols! Virtually all web browsers and operating systems support thisstandard.

HTML Validation

Now that we have learned all the HTML 4.01 and XHTML 1.1 elements. We can now move onto error checking and making sure your code is compliant with w3c specifications. It is a goodhabit to always make sure to validate your code using the official W3C HTML validator.

This tool will check your code and provide you with possible suggestions to correct your code.

72
http://validator.w3.org/http://validator.w3.org/http://validator.w3.org/

7/31/2019 HTML 4.01 & XHTML 1.1

74/100

Chapter 15: Writing Secure HTML

When writing your HTML it is very important to make sure you follow specific guidelines for thesecurity of your web pages. The following chapter explains all the potential security hazardsyou might face when writing your HTML. Be sure to study and follow this chapter very closely!!

Always Host Scripts or Images on Your Server

When using the img tag, including CSS stylesheets, JavaScript or other eternal files make sureit's hosted on your own server or a very trusted source. The reason behind this is you want tomake sure no one changes the script or image. If you are linking to an image or file that is nothosted on your server then the file you are linking to could be modified and cause securityissues for the people visiting your web site.

To make it simple: Don't load resources from untrusted sources.

Only Use Trusted Pages When using an Iframe

If you are displaying a web site from an external source make sure it is only from a trustedsource. The owner of the web site you are linking to could always change the page or modify it.This could cause issues for your users and put them at risk.

Make Sure to Check your Web Site Often

When you are a web developer its important to check the status of your web site to make sure

nothing inappropriate is going on. Be sure to run virus scans on your web hosting accountperiodically and make sure to always backup your website. Every now and then you may havea technical issue and its good to have the backup just in case.

In terms of security for HTML, there is very little to cover other than the above. Most of thesecurity vulnerabilities are related to user submitted content. This issue has more to do withother programming languages that are responsible for processing user submitted data. Whenyou first started this course you learned that HTML was for structure. With that being said, theHTML pages you write are not processed by your web server, rather they are sent directly tothe user's web browser which translates those HTML tags into a visible page. This is whyHTML is a very secure markup language.

As a web developer its very important to always be assessing the security vulnerabilities ofyour web site.

73

7/31/2019 HTML 4.01 & XHTML 1.1

75/100

At this time I would like to congratulate you for finishing the reading section of this course. Thenext step is to pass the final examination with a score of 90% or better. You may need to reviewbefore taking the exam. I wish you the best of luck!

74

7/31/2019 HTML 4.01 & XHTML 1.1

76/100

Reference

HTML Elements

HTML SYNTAX

BasicHTML: orXHTML: or

With an Attribute

HTML: XHTML:

BASIC PAGE STRUCTURE

Page containing visible html code

Page header information Starts beginning and end of HTML page

Sets page name in the title bar

Declares a comment

Creates sections in the page

Creates a section in the page

HYPERLINKS

link to anchor in current document

link to another document link to anchor in another document

email link

Sets the base url for all relative URLs on the page

TEXT FORMATTING AND STRUCTURE

line break

source code listing

Formats structure or block of text or italic text

... page headings from largest to smallest

Horizontal line

75

7/31/2019 HTML 4.01 & XHTML 1.1

77/100

paragraph

preformatted text

or bold text

subscript text

superscript text

Inline formatting Defines an abbreviation formatting

Defines an acronym formatting

Defines an address formatting

Defines preformatted text (disables HTML tags)

Centers text

Defines the base font, color, or size for all font in thedocument

Defines the direction of the text

Defines big text formatting

Defines block quote formatting

Defines deleted text formatting

Defines font text formatting

Defines inserted text formatting

Defines keyboard text formatting

Defines underlined text formatting

Defines teletype text formatting

or Defines strikethrough text formatting

Defines preformatted text formatting

Defines a single line quote

Defines preformatted text formatting

Defines small text formatting

Defines sample computer text formatting

FRAMES

defines a single frame frame document

inline frame

defines alternate content for browsers that don't support

76

7/31/2019 HTML 4.01 & XHTML 1.1

78/100

frames

HEADER AND SCRIPTS

external CSS link

embedded javascript

meta information

defines alternate content for browser thatdon't support scripts

TABLES

table caption

defines a table

body section of the table

table cell

number of columns cell spans

number of rows cell should spans

footer section of the table

table header cells

number of columns table header cell spans

the header section of the table

table row

creates a citation

defines attributes for one of more columns in a table

defines attributes for one or more columns in a group

LISTS

definition

definition list

definition term

item in a list ordered list

unordered list

definition term

77

7/31/2019 HTML 4.01 & XHTML 1.1

79/100

directory list

menu list

FORMS

defines a form

group of related form items

Creates a caption for the fieldset element form element input control

menu item in a select box

drop-down list

multi-row text area

clickable button

creates a label for an input element

creates an embeddable object

creates a group of related options in a drop-down list

78

7/31/2019 HTML 4.01 & XHTML 1.1

80/100

HTML Language Codes

These are the ISO 639-1 language codes. They are two letter codes used to represent alanguage. These codes are used for the tag to define what language the document is in usingthe lang attribute. See Chapter 3of the textbook for more information on how to use thesecodes.

Language ISO

(Afan) Oromo om

Abkhazian ab

Afar aa

Afrikaans af

Albanian sq

Amharic am

Arabic ar

Armenian hyAssamese as

Aymara ay

Azerbaijani az

Bashkir ba

Basque eu

Bengali bn

Bhutani dz

Bihari bh

Bislama biBreton br

Bulgarian bg

Burmese my

Byelorussian be

Cambodian km

Catalan ca

Chinese zh

Corsican co

Croatian hr

Czech cs

Danish da

Dutch nl

Language ISO

Samoan sm

Sangro sg

Sanskrit sa

Scots Gaelic gd

Serbian sr

Serb

Documents

HTML 4.01 & XHTML 1.1