1

Introduction HTML stands for Hyper Text Markup Language which is the most widely used language to

develop web pages HTML was created by Berners-Lee in late 1991 but HTML 20 was the firststandard HTML specification which was published in 1995 HTML 401 was a major version of HTMLand it was published in late 1999 Though HTML 401 version is widely used but currently we arehaving HTML-5 version which is an extension to HTML 401 and this version was published in 2012

bull Hypertext refers to the way in which Web pages (HTML documents) are linked togetherThus the link available on a webpage is called Hypertext

bull As its name suggests HTML is a Markup Language which means you use HTML to simplymark-up a text document with tags that tell a Web browser how to structure it to display

Originally HTML was developed with the intent of defining the structure of documents like headingsparagraphs lists and so forth to facilitate the sharing of scientific information between researchersNow HTML is being widely used to format web pages with the help of different tags available inHTML languageBasic HTML DocumentIn its simplest form following is an example of an HTML document Live Demo

Welcome to HTML Basics This workshop leads you through the basics of Hyper Text MarkupLanguage (HTML) HTML is the building block for web pages You will learn to use HTML to authoran HTML page to display in a web browserObjectivesBy the end of this workshop you will be able to

bull Use a text editor to author an HTML documentbull Be able to use basic tags to denote paragraphs emphasis or special typebull Create hyperlinks to other documentsbull Create an email linkbull Add images to your documentbull Use a table for layoutbull Apply colors to your HTML document

Prerequisites You will need a text editor such as Notepad and an Internet browser such asInternet Explorer or Netscape

Q What is Notepad and where do I get itA Notepad is the default Windows text editor On most Windows systems click your Startbutton and choose Programs then Accessories It should be a little blue notebookMac Users SimpleText is the default text editor on the Mac In OSX use TextEdit and changethe following preferences Select (in the preferences window) Plain text instead of Rich textand then select Ignore rich text commands in HTML files This is very important because ifyou dont do this HTML codes probably wont work

One thing you should avoid using is a word processor (like Microsoft Word) for authoring your HTMLdocumentsWhat is an html FileHTML is a format that tells a computer how to display a web page The documents themselves areplain text files with special tags or codes that a web browser uses to interpret and displayinformation on your computer screen

bull HTML stands for Hyper Text Markup Languagebull An HTML file is a text file containing small markup tagsbull The markup tags tell the Web browser how to display the pagebull An HTML file must have an htm or html file extension

Open your text editor and type the following textlthtmlgtltheadgtlttitlegtMy First WebpagelttitlegtltheadgtltbodygtThis is my first homepage ltbgtThis text is boldltbgtltbodygtlthtmlgt

PDF Creator - PDF4Free v30 httpwwwpdf4freecom

2

Save the file as mypagehtml Start your Internet browser Select Open (or Open Page) in the Filemenu of your browser A dialog box will appear Select Browse (or Choose File) and locate the htmlfile you just created - mypagehtml - select it and click Open Now you should see an address in thedialog box for example CMyDocumentsmypagehtml Click OK and the browser will display thepage

How to View HTML SourceA good way to learn HTML is to look at how other people have coded their html pages To find outsimply click on the View option in your browsers toolbar and select Source or Page Source This willopen a window that shows you the actual HTML of the page Go ahead and view the source html forthis pageWhat are HTML tags

bull HTML tags are used to mark-up HTML elementsbull HTML tags are surrounded by the two characters lt and gtbull The surrounding characters are called angle bracketsbull HTML tags normally come in pairs like ltbgt and ltbgtbull The first tag in a pair is the start tag the second tag is the end tagbull The text between the start and end tags is the element contentbull HTML tags are not case sensitive ltbgt means the same as ltBgt

Logical vs Physical TagsIn HTML there are both logical tags and physical tags Logical tags are designed to describe (to thebrowser) the enclosed texts meaning An example of a logical tag is the ltstronggt ltstronggt tag Byplacing text in between these tags you are telling the browser that the text has some greaterimportance By default all browsers make the text appear bold when in between the ltstronggt andltstronggt tagsPhysical tags on the other hand provide specific instructions on how to display the text they encloseExamples of physical tags include

ltbgt Makes the text boldltbiggt Makes the text usually one size bigger than whats around itltigt Makes text italicPhysical tags were invented to add style to Html pages because style sheets were not around

through the original intention of HTML was to not have physical tags Rather than use physicaltags to style your HTML pages you should use style sheets

HTML ElementsRemember the HTML example from the previous pagelthtmlgtltheadgtlttitlegtMy First WebpagelttitlegtltheadgtltbodygtThis is my first homepage ltbgtThis text is boldltbgtltbodygtlthtmlgtNested TagsYou may have noticed in the example above the ltbodygt tag also contains other tags like the ltbgttab When you enclose an element in with multiple tags the last tag opened should be the first tagclosed For exampleltpgtltbgtltemgtThis is NOT the proper way to close nested tagsltpgtltemgtltbgtltpgtltbgtltemgtThis is the proper way to close nested tags ltemgtltbgtltpgtNote It doesnt matter which tag is first but they must be closed in the proper orderQuote Styles red or redAttribute values should always be enclosed in quotes Double style quotes are the most common butsingle style quotes are also allowed In some rare situations like when the attribute value itselfcontains quotes it is necessary to use single quotesname=George machine Gun Kelly

PDF Creator - PDF4Free v30 httpwwwpdf4freecom

3

ltDOCTYPE htmlgtlthtmlgt

ltheadgtlttitlegtThis is document titlelttitlegt

ltheadgt

ltbodygtlth1gtThis is a headinglth1gtltpgtDocument content goes hereltpgt

ltbodygt

lthtmlgt

HTML TagsAs told earlier HTML is a markup language and makes use of various tags to format the contentThese tags are enclosed within angle braces ltTag Namegt Except few tags most of the tags havetheir corresponding closing tags For example lthtmlgt has its closing tag lthtmlgt and ltbodygt taghas its closing tag ltbodygt tag etcAbove example of HTML document uses the following tags SrNo Tag amp Description

1 ltDOCTYPEgtThis tag defines the document type and HTML version

2 lthtmlgtThis tag encloses the complete HTML document and mainlycomprises of document header which is represented byltheadgtltheadgt and document body which is represented byltbodygtltbodygt tags

3 ltheadgt This tag represents the documents header which can keepother HTML tags like lttitlegt ltlinkgt etc

4 lttitlegt The lttitlegt tag is used inside the ltheadgt tag to mention thedocument title

5 ltbodygt This tag represents the documents body which keeps otherHTML tags like lth1gt ltdivgt ltpgt etc

6 lth1gt This tag represents the heading

7 ltpgt This tag represents a paragraph

A typical HTML document will have the following structure lthtmlgt

ltheadgtDocument header related tags

ltheadgt

ltbodygtDocument body related tags

ltbodygt

lthtmlgt

PDF Creator - PDF4Free v30 httpwwwpdf4freecom

4

Definition and Usage

The ltDOCTYPEgt declaration must be the very first thing in your HTML document before the lthtmlgttag The ltDOCTYPEgt declaration is not an HTML tag it is an instruction to the web browser aboutwhat version of HTML the page is written in

In HTML 401 the ltDOCTYPEgt declaration refers to a document type definition because HTML401 was based on Standard Generalized Markup Language The DTD specifies the rules for themarkup language so that the browsers render the content correctly

Head The ltheadgt element is a container for all the head elements

The ltheadgt element can include a title for the document scripts styles meta information and moreThe following elements can go inside the ltheadgt element

bull lttitlegt (this element is required in an HTML document)bull ltstylegt bull ltbasegtbull ltlinkgtbull ltmetagtbull ltscriptgtbull ltnoscriptgt

Title The lttitlegt tag is required in all HTML documents and it defines the title of the document Thelttitlegt element

bull defines a title in the browser toolbarbull provides a title for the page when it is added to favoritesbull displays a title for the page in search-engine results

Note You can NOT have more than one lttitlegt element in an HTML document

Body The ltbodygt tag defines the documents body The ltbodygt element contains all the contents ofan HTML document such as text hyperlinks images tables lists etc

Example

ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtTitle of the documentlttitlegtltheadgtltbodygtThe content of the documentltbodygtlthtmlgt

ltH1gtltH6gt The lth1gt to lth6gt tags are used to define HTML headings lth1gt defines the mostimportant heading lth6gt defines the least important heading

Paragraph Tag The ltpgt tag defines a paragraph Browsers automatically add some space (margin)before and after each ltpgt element The margins can be modified with CSS (with the marginproperties)

PDF Creator - PDF4Free v30 httpwwwpdf4freecom

5

Example ltDOCTYPE htmlgtlthtmlgtltheadgtltstylegth1

display blockfont-size 2emmargin-top 067emmargin-bottom 067emmargin-left 0margin-right 0font-weight bold

ltstylegtltheadgtltbodygtltpgtAn h1 element is displayed like thisltpgtlth1gtThis is heading 1lth1gtltpgtChange the default CSS settings to see the effectltpgtltbodygtlthtmlgt

Break The ltbrgt tag inserts a single line break The ltbrgt tag is an empty tag which means that it hasno end tag

You can also use the comment tag to hide scripts from browsers without support for scripts (so theydont show them as plain text)

ltscript type=textjavascriptgtlt--function displayMsg()

alert(Hello World)--gtltscriptgt

Horizontal RuleThe lthrgt element is used for horizontal rules that act as dividers between sections like this

lthtmlgtltheadgtlttitlegtMy First Webpagelttitlegtltheadgtltbodygtlth1 align=centergtMy First Webpagelth1gtlthr width=50 align=centergtltpgtWelcome to my first web page I am writing this page using a text editor and plain old htmlltpgtltpgtBy learning html Ill be able to create web pages like a proltbrgtwhich I am of courseltpgtltbodygtlthtmlgtFormatting Tags

Tag Description

ltabbrgt Defines an abbreviation or an acronym

ltaddressgt Defines contact information for the authorowner of a documentarticle

PDF Creator - PDF4Free v30 httpwwwpdf4freecom

6

ltbgt Defines bold text

ltfontgt Not supported in HTML5 Use CSS insteadDefines font color and size for text

ltpregt Defines preformatted text

ltsubgt Defines subscripted text

ltsupgt Defines superscripted text

lttimegt Defines a datetime

Bold Text Anything that appears within ltbgtltbgt element is displayed in bold as shownbelow

ltDOCTYPE htmlgtlthtmlgt

ltheadgtlttitlegtBold Text Examplelttitlegt

ltheadgtltbodygt

ltpgtThe following word uses a ltbgtboldltbgt typefaceltpgtltbodygt

lthtmlgtThis will produce the following result Italic TextAnything that appears within ltigtltigt element is displayed in italicized as shown below

ltDOCTYPE htmlgtlthtmlgt

ltheadgtlttitlegtItalic Text Examplelttitlegt

ltheadgt

ltbodygtltpgtThe following word uses an ltigtitalicizedltigt typefaceltpgt

ltbodygt

lthtmlgtThis will produce the following result Underlined Text Anything that appearswithin ltugtltugt element is displayed with underline as shown below

ltDOCTYPE htmlgtlthtmlgt

ltheadgtlttitlegtUnderlined Text Examplelttitlegt

ltheadgt

ltbodygtltpgtThe following word uses an ltugtunderlinedltugt typefaceltpgt

ltbodygt

lthtmlgtStrike Text Anything that appears within ltstrikegtltstrikegt element is displayed withstrikethrough which is a thin line through the text as shown below

PDF Creator - PDF4Free v30 httpwwwpdf4freecom

7

ltDOCTYPE htmlgtlthtmlgt

ltheadgtlttitlegtStrike Text Examplelttitlegt

ltheadgt

ltbodygtltpgtThe following word uses a ltstrikegtstrikethroughltstrikegt typefaceltpgt

ltbodygt

lthtmlgtMonospaced FontThe content of a ltttgtltttgt element is written in monospaced font Most of the fonts are known asvariable-width fonts because different letters are of differentwidths forexampletheletter m iswiderthantheletter i forexampletheletter m iswiderthantheletter i In amonospaced font however each letter has the same widthltDOCTYPE htmlgtlthtmlgt

ltheadgtlttitlegtMonospaced Font Examplelttitlegt

ltheadgt

ltbodygtltpgtThe following word uses a ltttgtmonospacedltttgt typefaceltpgt

ltbodygt

lthtmlgtSuperscript Text The content of a ltsupgtltsupgt element is written in superscript the fontsize used is the same size as the characters surrounding it but is displayed half a charactersheight above the other charactersltDOCTYPE htmlgtlthtmlgt

ltheadgtlttitlegtSuperscript Text Examplelttitlegt

ltheadgt

ltbodygtltpgtThe following word uses a ltsupgtsuperscriptltsupgt typefaceltpgt

ltbodygt

lthtmlgt

Subscript TextThe content of a ltsubgtltsubgt element is written in subscript the font size used is the same as thecharacters surrounding it but is displayed half a characters height beneath the other charactersltDOCTYPE htmlgtlthtmlgt

ltheadgtlttitlegtSubscript Text Examplelttitlegt

ltheadgt

ltbodygtltpgtThe following word uses a ltsubgtsubscriptltsubgt typefaceltpgt

PDF Creator - PDF4Free v30 httpwwwpdf4freecom

8

ltbodygt

lthtmlgtInserted TextAnything that appears within ltinsgtltinsgt element is displayed as inserted textltDOCTYPE htmlgtlthtmlgt

ltheadgtlttitlegtInserted Text Examplelttitlegt

ltheadgt

ltbodygtltpgtI want to drink ltdelgtcolaltdelgt ltinsgtwineltinsgtltpgt

ltbodygt

lthtmlgtLarger TextThe content of the ltbiggtltbiggt element is displayed one font size larger than the rest of the textsurrounding it as shown below ltDOCTYPE htmlgtlthtmlgt

ltheadgtlttitlegtLarger Text Examplelttitlegt

ltheadgt

ltbodygtltpgtThe following word uses a ltbiggtbigltbiggt typefaceltpgt

ltbodygt

lthtmlgtSmaller TextThe content of the ltsmallgtltsmallgt element is displayed one font size smaller than the rest of thetext surrounding it as shown below ltDOCTYPE htmlgtlthtmlgt

ltheadgtlttitlegtSmaller Text Examplelttitlegt

ltheadgt

ltbodygtltpgtThe following word uses a ltsmallgtsmallltsmallgt typefaceltpgt

ltbodygt

lthtmlgtGrouping ContentThe ltdivgt and ltspangt elements allow you to group together several elements to create sections orsubsections of a pageFor example you might want to put all of the footnotes on a page within a ltdivgt element to indicatethat all of the elements within that ltdivgt element relate to the footnotes You might then attach a styleto this ltdivgt element so that they appear using a special set of style rulesltDOCTYPE htmlgtlthtmlgt

ltheadgt

PDF Creator - PDF4Free v30 httpwwwpdf4freecom

9

lttitlegtDiv Tag Examplelttitlegtltheadgt

ltbodygtltdiv id = menu align = middle gt

lta href = indexhtmgtHOMEltagt |lta href = aboutcontact_ushtmgtCONTACTltagt |lta href = aboutindexhtmgtABOUTltagt

ltdivgt

ltdiv id = content align = left bgcolor = whitegtlth5gtContent Articleslth5gtltpgtActual content goes hereltpgt

ltdivgtltbodygt

lthtmlgtThis will produce the following result The ltspangt element on the other hand can be used to group inline elements only So if you have apart of a sentence or paragraph which you want to group together you could use the ltspangt elementas followsltDOCTYPE htmlgtlthtmlgt

ltheadgtlttitlegtSpan Tag Examplelttitlegt

ltheadgt

ltbodygtltpgtThis is the example of ltspan style = colorgreengtspan tagltspangt

and the ltspan style = colorredgtdiv tagltspangt alongwith CSSltpgtltbodygt

lthtmlgt

Forms and InputTag Description

ltformgt Defines an HTML form for user input

ltinputgt Defines an input control

lttextareagt Defines a multiline input control (text area)

ltbuttongt Defines a clickable button

ltselectgt Defines a drop-down list

ltoptgroupgt Defines a group of related options in a drop-down list

ltoptiongt Defines an option in a drop-down list

ltlabelgt Defines a label for an ltinputgt element

ltfieldsetgt Groups related elements in a form

PDF Creator - PDF4Free v30 httpwwwpdf4freecom

10

ltlegendgt Defines a caption for a ltfieldsetgt element

ltdatalistgt Specifies a list of pre-defined options for input controls

ltoutputgt Defines the result of a calculationImages

Tag Description

ltimggt Defines an image

ltmapgt Defines a client-side image-map

ltareagt Defines an area inside an image-map

ltcanvasgt Used to draw graphics on the fly via scripting (usually JavaScript)

ltpicturegt Defines a container for multiple image resourcesAudio Video

Tag Description

ltaudiogt Defines sound content

ltsourcegt Defines multiple media resources for media elements (ltvideogt ltaudiogt andltpicturegt)

lttrackgt Defines text tracks for media elements (ltvideogt and ltaudiogt)

ltvideogt Defines a video or movie

LinksTag Description

ltagt Defines a hyperlink

ltlinkgt Defines the relationship between a document and an external resource (mostused to link to style sheets)

ltnavgt Defines navigation links

ListsTag Description

ltulgt Defines an unordered list

ltolgt Defines an ordered list

ltligt Defines a list item

ltmenugt Defines a listmenu of commands

ltmenuitemgt Defines a commandmenu item that the user can invoke from a popup menu

TablesTag Description

lttablegt Defines a table

ltcaptiongt Defines a table caption

ltthgt Defines a header cell in a table

PDF Creator - PDF4Free v30 httpwwwpdf4freecom

11

lttrgt Defines a row in a table

lttdgt Defines a cell in a table

lttheadgt Groups the header content in a table

lttbodygt Groups the body content in a table

lttfootgt Groups the footer content in a table

ltcolgt Specifies column properties for each column within a ltcolgroupgt element

ltcolgroupgt Specifies a group of one or more columns in a table for formattingStyles and Semantics

Tag Description

ltstylegt Defines style information for a document

ltdivgt Defines a section in a document

ltspangt Defines a section in a document

ltheadergt Defines a header for a document or section

ltfootergt Defines a footer for a document or section

ltmaingt Specifies the main content of a document

ltsectiongt Defines a section in a documentMeta Info

Tag Description

ltheadgt Defines information about the document

ltmetagt Defines metadata about an HTML document

ltbasegt Specifies the base URLtarget for all relative URLs in a documentProgramming

Tag Description

ltscriptgt Defines a client-side script

ltappletgt Not supported in HTML5 Use ltembedgt or ltobjectgt insteadDefines an embedded applet

ltembedgt Defines a container for an external (non-HTML) application

ltobjectgt Defines an embedded object

ltparamgt Defines a parameter for an object

Form Tag The ltformgt tag is used to create an HTML form for user input The ltformgt element cancontain one or more of the following form elements

bull ltinputgtbull lttextareagtbull ltbuttongtbull ltselectgtbull ltoptiongt

PDF Creator - PDF4Free v30 httpwwwpdf4freecom

12

bull ltoptgroupgtbull ltfieldsetgtbull ltlabelgt

Example

ltDOCTYPE htmlgtlthtmlgtltbodygtltform action=action_pagephpgtFirst name ltinput type=text name=FirstName value=MickeygtltbrgtLast name ltinput type=text name=LastName value=Mousegtltbrgtltinput type=submit value=SubmitgtltformgtltpgtClick the Submit button and the form-data will be sent to a page on the server calledaction_pagephpltpgtltbodygtlthtmlgt

Input The ltinputgt tag specifies an input field where the user can enter dataltinputgt elements areused within a ltformgt element to declare input controls that allow users to input data An input fieldcan vary in many ways depending on the type attribute

Attribute Value Description

align leftrighttopmiddlebottom

Not supported in HTML5Specifies the alignment of an image input (only fortype=image)

autofocus autofocus Specifies that an ltinputgt element should automatically getfocus when the page loads

checked checked Specifies that an ltinputgt element should be pre-selectedwhen the page loads (for type=checkbox or type=radio)

dirname inputnamedir Specifies that the text direction will be submitted

disabled disabled Specifies that an ltinputgt element should be disabled

form form_id Specifies one or more forms the ltinputgt element belongs to

formaction URL Specifies the URL of the file that will process the inputcontrol when the form is submitted (for type=submit andtype=image)

height pixels Specifies the height of an ltinputgt element (only fortype=image)

list datalist_id Refers to a ltdatalistgt element that contains pre-definedoptions for an ltinputgt element

max numberdate

Specifies the maximum value for an ltinputgt element

maxlength number Specifies the maximum number of characters allowed in anltinputgt element

min number Specifies a minimum value for an ltinputgt element

PDF Creator - PDF4Free v30 httpwwwpdf4freecom

13

date

multiple multiple Specifies that a user can enter more than one value in anltinputgt element

name text Specifies the name of an ltinputgt element

readonly readonly Specifies that an input field is read-only

required required Specifies that an input field must be filled out beforesubmitting the form

size number Specifies the width in characters of an ltinputgt element

src URL Specifies the URL of the image to use as a submit button(only for type=image)

step number Specifies the legal number intervals for an input field

type buttoncheckboxcolordatedatetime-localemailfilehiddenimagemonthnumberpasswordradiorangeresetsearchsubmitteltexttimeurlweek

Specifies the type ltinputgt element to display

value text Specifies the value of an ltinputgt element

width pixels Specifies the width of an ltinputgt element (only fortype=image)

Textarea The lttextareagt tag defines a multi-line text input control A text area can hold an unlimitednumber of characters and the text renders in a fixed-width font (usually Courier) The size of a textarea can be specified by the cols and rows attributes or even better through CSS height and widthproperties

Button The ltbuttongt tag defines a clickable button Inside a ltbuttongt element you can put contentlike text or images This is the difference between this element and buttons created with the ltinputgtelement

Tip Always specify the type attribute for a ltbuttongt element Different browsers use different defaulttypes for the ltbuttongt element

PDF Creator - PDF4Free v30 httpwwwpdf4freecom

14

Note If you use the ltbuttongt element in an HTML form different browsers may submit differentvalues Use ltinputgtto create buttons in an HTML form

Attributes

Attribute Value Description

autofocus autofocus Specifies that a button should automatically getfocus when the page loads

disabled disabled Specifies that a button should be disabled

form form_id Specifies one or more forms the button belongs to

formaction URL Specifies where to send the form-data when a formis submitted Only for type=submit

formenctype applicationx-www-form-urlencodedmultipartform-datatextplain

Specifies how form-data should be encoded beforesending it to a server Only for type=submit

formmethod getpost

Specifies how to send the form-data (which HTTPmethod to use) Only for type=submit

formnovalidate formnovalidate Specifies that the form-data should not be validatedon submission Only for type=submit

formtarget _blank_self_parent_topframename

Specifies where to display the response aftersubmitting the form Only for type=submit

name name Specifies a name for the button

type buttonresetsubmit

Specifies the type of button

value text Specifies an initial value for the button

ExampleltDOCTYPE htmlgtlthtmlgtltbodygtltbutton type=button onclick=alert(Hello world)gtClick Meltbuttongtltbodygtlthtmlgt

Label The ltlabelgt tag defines a label for an ltinputgt element The ltlabelgt element does not renderas anything special for the user However it provides a usability improvement for mouse usersbecause if the user clicks on the text within the ltlabelgt element it toggles the control The forattribute of the ltlabelgt tag should be equal to the id attribute of the related element to bind themtogether

ltDOCTYPE htmlgt

PDF Creator - PDF4Free v30 httpwwwpdf4freecom

15

lthtmlgtltbodygtltpgtClick on one of the text labels to toggle the related controlltpgtltform action=action_pagephpgt

ltlabel for=malegtMaleltlabelgtltinput type=radio name=gender id=male value=malegtltbrgtltlabel for=femalegtFemaleltlabelgtltinput type=radio name=gender id=female value=femalegtltbrgtltlabel for=othergtOtherltlabelgtltinput type=radio name=gender id=other value=othergtltbrgtltbrgtltinput type=submit value=Submitgt

ltformgtltbodygtlthtmlgt

Selection The ltselectgt element is used to create a drop-down list The ltoptiongt tags inside theltselectgt element define the available options in the list

Tip The ltselectgt element is a form control and can be used in a form to collect user inputExampleltDOCTYPE htmlgtlthtmlgtltbodygt

ltselectgtltoption value=volvogtVolvoltoptiongtltoption value=saabgtSaabltoptiongtltoption value=opelgtOpelltoptiongtltoption value=audigtAudiltoptiongt

ltselectgtltbodygt

lthtmlgt

Option The ltoptiongt tag defines an option in a select list ltoptiongt elements go insidea ltselectgt or ltdatalistgt element

Example

ltDOCTYPE htmlgtlthtmlgtltbodygtltselectgt

ltoption value=volvogtVolvoltoptiongtltoption value=saabgtSaabltoptiongtltoption value=opelgtOpelltoptiongtltoption value=audigtAudiltoptiongt

ltselectgtltbodygtlthtmlgt

Option Group The ltoptgroupgt is used to group related options in a drop-down listIf you have a longlist of options groups of related options are easier to handle for a user

ExampleltDOCTYPE htmlgtlthtmlgtltbodygt

PDF Creator - PDF4Free v30 httpwwwpdf4freecom

16

ltselectgtltoptgroup label=Swedish Carsgt

ltoption value=volvogtVolvoltoptiongtltoption value=saabgtSaabltoptiongt

ltoptgroupgtltoptgroup label=German Carsgt

ltoption value=mercedesgtMercedesltoptiongtltoption value=audigtAudiltoptiongt

ltoptgroupgtltselectgtltbodygt

lthtmlgt

Label The ltlabelgt tag defines a label for an ltinputgt element The ltlabelgt element does not renderas anything special for the user However it provides a usability improvement for mouse usersbecause if the user clicks on the text within the ltlabelgt element it toggles the control The forattribute of the ltlabelgt tag should be equal to the id attribute of the related element to bind themtogether

ExampleltDOCTYPE htmlgtlthtmlgtltbodygtltpgtClick on one of the text labels to toggle the related controlltpgtltform action=action_pagephpgt

ltlabel for=malegtMaleltlabelgtltinput type=radio name=gender id=male value=malegtltbrgtltlabel for=femalegtFemaleltlabelgtltinput type=radio name=gender id=female value=femalegtltbrgtltlabel for=othergtOtherltlabelgtltinput type=radio name=gender id=other value=othergtltbrgtltbrgtltinput type=submit value=Submitgt

ltformgtltbodygtlthtmlgt

Filedset The ltfieldsetgt tag is used to group related elements in a form The ltfieldsetgt tag draws abox around the related elements

Example ltDOCTYPE htmlgt

lthtmlgtltbodygt

ltformgtltfieldsetgtltlegendgtPersonalialtlegendgtName ltinput type=textgtltbrgtEmail ltinput type=textgtltbrgtDate of birth ltinput type=textgt

ltfieldsetgtltformgtltbodygtlthtmlgt

Image The ltimggt tag defines an image in an HTML pageThe ltimggt tag has two required attributessrc and alt

PDF Creator - PDF4Free v30 httpwwwpdf4freecom

17

Note Images are not technically inserted into an HTML page images are linked to HTML pages Theltimggt tag creates a holding space for the referenced image

Tip To link an image to another document simply nest the ltimggt tag inside ltagt tags

ExampleltDOCTYPE htmlgtlthtmlgtltbodygtltimg src=smileygif alt=Smiley face width=42 height=42gtltbodygtlthtmlgt

Audio The ltaudiogt tag defines sound such as music or other audio streamsCurrently there are 3supported file formats for the ltaudiogt element MP3 Wav and Ogg

Source The ltsourcegt tag is used to specify multiple media resources for media elements such asltvideogt ltaudiogt and ltpicturegt The ltsourcegt tag allows you to specify alternativevideoaudioimage files which the browser may choose from based on its media type codec supportor media query

ltDOCTYPE htmlgtlthtmlgtltbodygtltaudio controlsgt

ltsource src=horseogg type=audioogggtltsource src=horsemp3 type=audiompeggtYour browser does not support the audio element

ltaudiogtltpgtltstronggtNoteltstronggt The audio tag is not supported in Internet Explorer 8 and earlierversionsltpgtltbodygtlthtmlgt

Video The ltvideogt tag specifies video such as a movie clip or other video streams Currently thereare 3 supported video formats for the ltvideogt element MP4 WebM and Ogg

ExampleltDOCTYPE htmlgtlthtmlgtltbodygtltvideo width=320 height=240 controlsgt

ltsource src=moviemp4 type=videomp4gtltsource src=movieogg type=videoogggtYour browser does not support the video tag

ltvideogtltpgtltstronggtNoteltstronggt The video tag is not supported in Internet Explorer 8 and earlierversionsltpgtltbodygtlthtmlgt

ltagt The ltagt tag defines a hyperlink which is used to link from one page to another The mostimportant attribute of the ltagt element is the href attribute which indicates the links destination Bydefault links will appear as follows in all browsers

PDF Creator - PDF4Free v30 httpwwwpdf4freecom

18

bull An unvisited link is underlined and bluebull A visited link is underlined and purplebull An active link is underlined and red

ExampleltDOCTYPE htmlgtlthtmlgtltbodygtlta href=httpswwww3schoolscomgtVisit W3Schoolscomltagtltbodygtlthtmlgt

Link The ltlinkgt tag defines a link between a document and an external resource The ltlinkgt tag isused to link to external style sheets

Example

ltDOCTYPE htmlgtlthtmlgtltheadgt

ltlink rel=stylesheet type=textcss href=stylescssgtltheadgtltbodygtlth1gtI am formatted with a linked style sheetlth1gtltpgtMe tooltpgtltbodygtlthtmlgt

Unorder List The ltulgt tag defines an unordered (bulleted) list Use the ltulgt tag together withthe ltligt tag to create unordered listsType Disc Suare Circle

Order List The ltolgt tag defines an ordered list An ordered list can be numerical or alphabetical

Attribute Value Description

compact compact Not supported in HTML5Specifies that the list should render smaller than normal

reversed reversed Specifies that the list order should be descending (987)

start number Specifies the start value of an ordered list

type 1AaIi Specifies the kind of marker to use in the list

Example ltDOCTYPE htmlgtlthtmlgtltbodygtlth4gtAn Unordered Listlth4gtltulgt

ltligtCoffeeltligtltligtTealtligtltligtMilkltligt

ltulgtltbodygtlthtmlgt

PDF Creator - PDF4Free v30 httpwwwpdf4freecom

19

Table lttablegt tag defines an HTML table An HTML table consists of the lttablegt element and oneor more lttrgt ltthgt and lttdgt elementsThe lttrgt element defines a table row the ltthgt elementdefines a table header and the lttdgt element defines a table cell A more complex HTML table mayalso include ltcaptiongt ltcolgt ltcolgroupgt lttheadgt lttfootgt and lttbodygt elements

The ltthgt tag defines a header cell in an HTML table An HTML table has two kinds of cells

bull Header cells - contains header information (created with the ltthgt element)bull Standard cells - contains data (created with the lttdgt element)

The text in ltthgt elements are bold and centered by default The text in lttdgt elements are regular andleft-aligned by default

The lttrgt tag defines a row in an HTML table A lttrgt element contains one ormore ltthgt or lttdgt elements

The lttdgt tag defines a standard cell in an HTML table An HTML table has two kinds of cells

bull Header cells - contains header information (created with the ltthgt element)bull Standard cells - contains data (created with the lttdgt element)

The text in ltthgt elements are bold and centered by default

The text in lttdgt elements are regular and left-aligned by default

AttributesAttribute Value Description

align leftcenterright

Specifies the alignment of a table according to surrounding text

bgcolor rgb(xxx)xxxxxxcolorname

Specifies the background color for a table

border 10

Specifies whether or not the table is being used for layout purposes

cellpadding Pixels Specifies the space between the cell wall and the cell content

cellspacing Pixels Specifies the space between cells

frame voidabovebelowhsideslhsrhsvsidesboxborder

Specifies which parts of the outside borders that should be visible

rules nonegroupsrowscolsall

Specifies which parts of the inside borders that should be visible

PDF Creator - PDF4Free v30 httpwwwpdf4freecom

20

summary Text Specifies a summary of the content of a table

width Pixels Specifies the width of a tableExample ltDOCTYPE htmlgtlthtmlgtltheadgtltstylegttable th td

border 1px solid blackltstylegtltheadgtltbodygtlttablegt

lttrgtltthgtNameltthgtltthgtImageltthgt

lttrgtlttrgt

lttdgtJohnylttdgtlttdgtltimage src=rdquojohnyjpgrdquo height=100 width=100gtlttdgt

lttrgtlttrgt

lttdgtGaneshlttdgtlttdgtltimage src=rsquoganeshjpgrdquo height=100 width=100gtlttdgt

lttrgtlttablegtltbodygtlthtmlgt

Frameset The ltframesetgt tag defines a frameset This element holds one or more ltframegtelements Each ltframegt element can hold a separate document The ltframesetgt element specifiesHOW MANY columns or rows there will be in the frameset and HOW MUCH percentage pixels ofspace will occupy each of them

The rows attribute of ltframesetgt tag defines horizontal frames and cols attribute definesverticalframes Each frame is indicated by ltframegt tag and it defines which HTML document shallopen into theframe

ExltDOCTYPE htmlgtlthtmlgtltframeset cols=255025gt

ltframe name=rdquoA1rdquo src=frame_ahtmgtltframeset rows=5050gt

ltframe name=bb1 src=testhtmlgtltframe name=bb2 src=testhtmlgt

ltframesetgtltframe name=rdquoC1rdquo src=frame_chtmgt

ltframesetgtlthtmlgt

Form The ltformgt tag is used to create an HTML form for user input The ltformgt element cancontain one or more of the following form elementsAttribute Value Description

action URL Specifies where to send the form-data when a form is submitted

PDF Creator - PDF4Free v30 httpwwwpdf4freecom

21

autocomplete On off Specifies whether a form should have autocomplete on or off

enctype application x-www-form-urlencodedmultipartform-datatextplain

Specifies how the form-data should be encoded when submittingit to the server (only for method=post)

method Get post Specifies the HTTP method to use when sending form-data

name Text Specifies the name of a form

ExampleltDOCTYPE htmlgtlthtmlgtltheadgtltstylegtform

display blockmargin-top 0em

ltstylegtltheadgtltbodygtltpgtA form element is displayed like thisltpgtltform action=action_pagephpgtFirst name ltinput type=text name=FirstName value=MickeygtltbrgtLast name ltinput type=text name=LastName value=Mousegtltbrgtltinput type=submit value=SubmitgtltformgtltpgtChange the default CSS settings to see the effectltpgtltbodygtlthtmlgt

PDF Creator - PDF4Free v30 httpwwwpdf4freecom