Introduction to HTML. Topics HTML –What is HTML –Parts of an HTML Document –HTML Tags.
HTML Seminar Doc
-
Upload
kishore-kick -
Category
Documents
-
view
124 -
download
1
Transcript of HTML Seminar Doc
1
Introduction to HTML
HTML stands for Hypertext Markup Language and is used to create Web pages
After Vinegar Bush first proposed the basics of hypertext in 1945 it laid the foundation for Tim Berners-Lee and others to invent the World Wide Web HTML (hypertext markup language) HTTP (Hypertext Transfer Protocol) and URLs (Universal Resource Locators) in 1990
Tim Berners-Lee amp HTML
Tim Berners-Lee was the primary author of html assisted by his colleagues at CERN an international scientific organization based in Geneva Switzerland Tim Berners-Lee is currently the Director of the World Wide Web Consortium the group that sets technical standards for the Web
Definitions And Background
Definition of HTML
HTML stands for Hypertext Markup Language it is the authoring language used to create documents on the World Wide Web HTML is used to define the structure and layout of a Web page how a page looks and any special functions HTML does this by using what are called tags that have attributes
HTML stands for hypertext markup language A markup language is a set of commands that tell a computer how to format your document HTML tags tell a browser such as Netscape Firefox or Internet Explorer how to structure your Web page
We can create two types of documents(pages) using html
1) Static2) Dynamic
Static means constant--never changing Dynamic is changing You can make dynamic changes to a database without having to shutdown the instance and restart for the changes to take effect However if you do not update the control file when you shutdown and startup the dynamic change is gone--it wasnt permanent Static sites are meant for those sites that canrsquot be changed or updates regularly And Dynamic sites are those sites that changes or update regularly
2
IMPORTANT POINTS
1048746 HTML tags are not case-sensitive People sometimes type the tags in capital letters to make them easier to distinguish from the surrounding text but it is best to use lower case for your tags ndash as it is required by XML
1048746 although the tags and attributes themselves are not case-sensitive certain values such as a Uniform Resource Locator (URL) in an anchor tag or a link are case-sensitive
1048746 All file names you create should be lower-case
The href attribute specifies the links destination
lta href=httpkumca2010xtgemcomgtkumca2010ltagt
The href or the name attribute must be present in the ltagt tag
Common HTML Tags to Know and Understand
(Remember ndash you will need to ldquoCloserdquo each of these tags An example is provided for the first tag)
lthtmlgt beginning of an HTML document (lthtmlgt to close)
ltheadgt beginning of the head of the document
lttitlegt beginning of the title in the head of the document
ltbodygt beginning of the body (main part) of the document
lth1gt the headline or main heading of your page
lth2gt the subheading of your page
lth3gt the sub-sub heading [Note There are a total of 6 levels of headers lth1gt - lth6gt available]
ltpgt begin new paragraph
ltulgt unordered list (bulleted list)
ltolgt ordered list (numbered list)
ltligt list item (used in conjunction with ltulgt or ltolgt)
3
ltagt anchor (used for a hyperlink) ndash such as lta href=ldquohttpwwwlibumdedurdquogtUM Librariesltagt
ltstronggt strong emphasis usually displays as boldface [Note Use this tag instead of ltbgt (bold)]
ltemgt emphasis [Note Use this tag instead of ltigt (italics)]
lttablegt begin a table
lttrgt begin a table row
ltthgt table header (information in the cells of the top row of a table)
lttdgt table data (information in an individual cell)
The following tags are not used in pairs only a beginning tag is used
ltbrgt line break
ltimggt image (used in conjunction with the SRC attribute -- ltIMG SRC=rdquohelliprdquogt)
When you are coding your web page keep in mind that HTML elements cannot overlap each other So the following is invalid
ltstronggtltemgtIncorrect nestingltstronggtltemgt
Why In this example the strong element is intended to contain an em element To be truly contained within the strong element the em elements end tag must occur before the strong elements end tag To correct this problem you would need to change the coding to
ltstronggtltemgtCorrect nestingltemgtltstronggt
Creating a Web Page-The Basics
Follow the instructions that appear below to create a simple Web page on any topic that interests you Type all the HTML tags exactly as shown they are displayed here in bold type The directions in italics will give you a general idea of your own text to type In this example the head of your Web page will contain only a title
The body of your Web page will contain headings a short paragraph an unordered (bulleted) list an ordered (numbered) list bold and italic type and a link to the University of Maryland Libraries home page
4
Launch Notepad on your computer by going to Start ProgramsAccessories Notepad To make your efforts at coding a bit easier go to ldquoFormatrdquo and be sure ldquoWord Wraprdquo is checked
VERY IMPORTANT NOTE Although it is possible to create a web page using Microsoft WORD do NOT use WORD or WordPad to create files (These programs generate non-standard HTML)
Type the following
lthtmlgt
ltheadgt
lttitlegt
Type the title of your web page here For example My First Web Page
lttitlegt [Remember Always close your tags]
ltheadgt
ltbodygt
lth1gtType the title or main heading you want to be seen at the top of your Web page For Example My First
Web Page lth1gt
ltpgtType todays date here ltpgt
lth2gtType a title for a list For Example My Grocery Listlth2gt
ltpgtType a short introduction about the topic ltpgt
ltulgt
5
ltligtType your first list item For example Cakeltligt
ltligtType your second list item For example Popcornltligt
ltligtType your third list item For example Dove Barsltligt
ltligtType your fourth list item For example Tumsltligtltulgt
lth2gtType a title for a numbered list For example My Vacation Priorities lth2gt
ltpgtType a second short introduction ltpgt
ltolgt
ltligtType your first list item For example Disneyworldltligt
ltIigtType your second list item For example Hollywood ltligt
ltligtType your third list item For example Universal Studios ltligt
ltligtType your fourth list item For example Home ltligtltolgt
ltpgtType ldquoAuthored byrdquo and your name ltpgt
Now we will use the anchor tag ltagt to add a link to your sample Web page Links are also called hyperlinks hypertext or hot links You may link within a single document as well as linking to other ldquooutsiderdquo documents
You may want to add links within a page if your document becomes lengthy To do this you will use the anchor tag in two places
First add the following to the top of your page before the lth1gt tag lta name=ldquotoprdquogtltagt [Note Do not forget the quotation marks]
Then add the following to your page after the final ltpgt (the ldquoauthored byrdquo statement)
ltpgtGo to the lta href=ldquotoprdquogttopltagt of the pageltpgt
Whenever you put a URL inside an anchor tag you must enclose it within quotation marks Also donrsquot forget that the URL is case-sensitive
Insert the following sentence into your sample page below the numbered list (after the
6
ltolgt) to make a link to the visitorrsquos page on the University of Maryland Libraries website (You can use another site if you know the URL)
ltpgtMore information can be found in the University of Maryland Libraries
lta href=httpwwwlibumdeduvisitorshtmlgtInformation For Visitorsltagt web
pageltpgt
You are almost ready to view your new page in a web browser First be sure to include these important ending tags at the bottom of your page Type these tags before you try to display your page in Mozilla Firefox
ltbodygt
lthtmlgt
To save your file go to ldquofilerdquo and ldquosaverdquo in Notepad and save the file to your floppy disk [A] (or flash drive) Enter a filename being sure it is all lowercase without spaces and ends in html and choose ldquosave as typerdquo ndashAll files ()
Now we can add a link to your e-mail address Choose the line that reads
ltpgtType ldquoAuthored byrdquo and your name ltpgt and change the coding as follows
ltpgtAuthored by lta href=mailto[insert your e-mail addressumdedu here]gt your nameltagt ltpgt
Be sure to save your changes and view your creation in Firefox
Congratulations You now have a basic web page
Creating a Web Page Understanding and using Images
Now that you have created a basic web page it is helpful to understand how to incorporate images Here is an example of an image used on the University Libraries home page
7
This image is named ldquocataloggifrdquo Sample HTML code for this image could read
ltimg src=imageshomecataloggif alt=Catalog border=0 width=127 height=18gt
An image used on a Web page is a separate file on the Librariesrsquo server All information about the image is put inside the ltimggt tag The ltimggt tag stands alone it is not used in a pair An important thing to remember is that you have to include enough information within the ltimggt tag to enable the Web server to find your image
Where is the image located If the image is located in a different folder from your HTML file you will need to include that information in the URL In the above example the image is housed in the ldquohomerdquo subfolder of the ldquoimagesrdquo folder In the above example there will be no border around the image when it appears on a web page The ldquoALTrdquo text is what appears when you ldquohoverrdquo over the image with your mouse in Internet Explorer and also provides important information for people with disabilities who use software designed to help them access the Web It is also what is displayed when you have a broken link to an image or if you are using a text-only browser The text that goes with the alt attribute must be enclosed in quotation marks Think of your users when you are creating these alt attributes and choose descriptive words or phrases
A Word About Images
The IMG tag may be used to link to a number of different types of images Two common types of images you might add to your web page are
GIF = A frequently-used graphics format with small files which can be downloaded quickly
JPG or JPEG = Designed for compressing either full-color or gray-scale images of natural real-world scenes JPEGs work well on photographs naturalistic artwork and similar material not so well on lettering simple cartoons or line drawings
Now that we have the image saved on disk with our HTML document you can also align it in various places on your page Add another copy of the image aligned to the center of your page To do this insert this coding after the first graphic
ltpgtltcentergtltimg src=kickjpg border=ldquo0rdquo height=ldquo119rdquo width=ldquo121rdquo alt=ldquoKRISHNA
8
UNIVERSITYrdquogtltcentergtltpgt
Save your file and view it in Firefox
In addition to making text ldquohyperlinkrdquo to other documents you can also add a hypertext link to graphics on your pages which will allow you to ldquojumprdquo to another page or to another location within the same page To do this select one of the two graphics you inserted into your page Then revise the coding so that it reads as follows
lta href=httpkumca2010xtgemcomgtltimg src=kickjpg border=ldquo0rdquo
height=ldquo119rdquo width=ldquo121rdquo alt=ldquoKrishna universityrdquogtltagt
Once again save your file and view it in Firefox
Adding a Simple Table
Tables may look complicated at first but they will be easier to understand if you remember that a table in HTML is created row by row Type the tags as shown and follow the directions in italic type Use any spacing or indentation that makes sense to you but do not change the order of any of the tags Be sure to insert this table before the closing body and html tags on your page
lttablegt
lttrgt
ltthgt Heading for 1st column For example Nameltthgt ltthgt Heading for 2nd column For example Phone
Numberltthgtlttrgt
lttrgt
lttdgt Words in the first row first column For example kishorelttdgtlttdgt Words in the first row
second column For example X4-7096 lttdgtlttrgt
lttrgt
lttdgt Words in the second row first column For example vedalttdgt lttdgt Words in the
second row second column For example X4-7029lttdgt
9
lttrgt
lttablegt
Save your document and preview it in Firefox
Next well spread out the table by adding space in the cells This is done by specifying a number which the browser interprets as a number of pixels between the text and the cell border The HTML command for this is cellpadding Edit your table to read
lttable cellpadding=5gt
You can also change the amount of space between table cells ndash which is called cellspacing in HTML Both cellpadding and cellspacing commands can be used at the same time
lttable cellspacing=5 cellpadding=5gt
Once you have made this change save your file and preview it in Firefox
Congratulations You have now created a simple web page with graphics links and a table
Font Size
The ltfontgtltfontgt tag introduced by Netscape may be used to set the size of the font from 1 (smallest) to 7 (largest) with a size of 3 being the normal text size
Font Size = 1Font Size = 2Font Size = 3-- normal size text
Font Size = 4
Font Size = 5
Font Size = 6
Font Size = 7Remember that the actual size will depend on the computer font the user has selected for their web browser -- you are adjusting the size relative to the default font they have chosen
The format for the font size tag is
10
ltfont size=Ngtblah blah blahltfontgt where N=1 to 7
Document Structure
An HTML document is a tree of elements including a head and body headings paragraphs lists etc Form elements are discussed in section Forms
Document Element HTML
The HTML document element consists of a head and a body much like a memo or a mail message The head contains the title and optional elements The body is a text flow consisting of paragraphs lists and other elements
Head HEAD
The head of an HTML document is an unordered collection of information about the document For example
ltDOCTYPE HTML PUBLIC -IETFDTD HTML 20ENgt
ltHEADgt
ltTITLEgtIntroduction to HTMLltTITLEgt
ltHEADgt
Title TITLE
Every HTML document must contain a TITLE element
The title should identify the contents of the document in a global context A short title such as Introduction may be meaningless out of context A title such as Introduction to HTML Elements is more appropriate
A user agent may display the title of a document in a history list or as a label for the window displaying the document This differs from headings (section Headings H1 H6) which are typically displayed within the body text flow
Base Address BASE
11
The optional BASE element provides a base address for interpreting relative URLs when the document is read out of context (see section Hyperlinks) The value of the HREF attribute must be an absolute URI
Keyword Index ISINDEX
The ISINDEX element indicates that the user agent should allow the user to search an index by giving keywords See section Queries and Indexes for details
Link LINK
The LINK element represents a hyperlink (see section Hyperlinks) Any number of LINK elements may occur in the HEAD element of an HTML document It has the same attributes as the A element (see section Anchor A)
The LINK element is typically used to indicate authorship related indexes and glossaries older or more recent versions document hierarchy associated resources such as style sheets etc
Associated Meta-information META
The META element is an extensible container for use in identifying specialized document meta-information Meta-information has two main functions
to provide a means to discover that the data set exists and how it might be obtained or accessed and
to document the content quality and features of a data set indicating its fitness for use
Each META element specifies a namevalue pair If multiple META elements are provided with the same name their combined contents--concatenated as a comma-separated list--is the value associated with that name
HTTP servers may read the content of the document HEAD to generate header fields corresponding to any elements defining a value for the attribute HTTP-EQUIV (14)
Attributes of the META element
HTTP-EQUIV
Binds the element to an HTTP header field An HTTP server may use this information to process the document In particular it may include a header field in the responses to requests for this document the header name is taken from the HTTP-EQUIV attribute value
12
and the header value is taken from the value of the CONTENT attribute HTTP header names are not case sensitive
NAME Specifies the name of the namevalue pair If not present HTTP-EQUIV gives the name
CONTENT specifies the value of the namevalue pair
Examples
If the document contains
ltMETA HTTP-EQUIV=Expires
CONTENT=Tue 04 Dec 1993 212902 GMTgt
ltmeta http-equiv=Keywords CONTENT=Fredgt
ltMETA HTTP-EQUIV=Reply-to
content=fieldingicsuciedu (Roy Fielding)gt
ltMeta Http-equiv=Keywords CONTENT=Barneygt
then the server may include the following header fields
Expires Tue 04 Dec 1993 212902 GMT
Keywords Fred Barney
Reply-to fieldingicsuciedu (Roy Fielding)
as part of the HTTP response to a `GET or `HEAD request for that document
An HTTP server must not use the META element to form an HTTP response header unless the HTTP-EQUIV attribute is present
An HTTP server may disregard any META elements that specify information controlled by the HTTP server for example `Server `Date and `Last-modified
Next Id NEXTID
The NEXTID element is included for historical reasons only HTML documents should not contain NEXTID elements
13
The NEXTID element gives a hint for the name to use for a new A element when editing an HTML document It should be distinct from all NAME attribute values on A elements For example
ltNEXTID N=Z27gt
Body BODY
The BODY element contains the text flow of the document including headings paragraphs lists etc
For example
ltBODYgt
lth1gtImportant Stufflth1gt
ltpgtExplanation about important stuff
ltBODYgt
Headings H1 H6
The six heading elements H1 through H6 denote section headings Although the order and occurrence of headings is not constrained by the HTML DTD documents should not skip levels (for example from H1 to H3) as converting such documents to other representations is often problematic
Example of use
ltH1gtThis is a headingltH1gt
Here is some text
ltH2gtSecond level headingltH2gt
Here is some more text
Typical renderings are
H1
Bold very-large font centered One or two blank lines above and below
H2
14
Bold large font flush-left One or two blank lines above and below
H3
Italic large font slightly indented from the left margin One or two blank lines above and below
H4
Bold normal font indented more than H3 One blank line above and below
H5
Italic normal font indented as H4 One blank line above
H6
Bold indented same as normal text more than H5 One blank line above
Block Structuring Elements
Block structuring elements include paragraphs lists and block quotes They must not contain heading elements but they may contain phrase markup and in some cases they may be nested
Paragraph P
The P element indicates a paragraph The exact indentation leading space etc of a paragraph is not specified and may be a function of other tags style sheets etcTypically paragraphs are surrounded by a vertical space of one line or half a line The first line in a paragraph is indented in some cases
Example of use
ltH1gtThis Heading Precedes the ParagraphltH1gt
ltPgtThis is the text of the first paragraph
ltPgtThis is the text of the second paragraph Although you do not need to start paragraphs on new lines maintaining this convention facilitates document maintenanceltPgt
ltPgtThis is the text of a third paragraphltPgt
Preformatted Text PRE
15
The PRE element represents a character cell block of text and is suitable for text that has been formatted for a monospaced font
The PRE tag may be used with the optional WIDTH attribute The WIDTH attribute specifies the maximum number of characters for a line and allows the HTML user agent to select a suitable font and indentation
Within preformatted text
Line breaks within the text are rendered as a move to the beginning of the next line (15)
Anchor elements and phrase markup may be used (16)
Elements that define paragraph formatting (headings address etc) must not be used (17)
The horizontal tab character (code position 9 in the HTML document character set) must be interpreted as the smallest positive nonzero number of spaces which will leave the number of characters so far on the line as a multiple of 8 Documents should not contain tab characters as they are not supported consistently
Example of use
ltPREgt
Line 1
Line 2 is to the right of line 1 lta href=abcgtabcltagt
Line 3 aligns with line 2 lta href=defgtdefltagt
ltPREgt
Example and Listing XMP LISTING
The XMP and LISTING elements are similar to the PRE element but they have a different syntax Their content is declared as CDATA which means that no markup except the end-tag open delimiter-in-context is recognized (see 96 Delimiter Recognition of [SGML])
Since CDATA declared content has a number of unfortunate interactions with processing techniques and tends to be used and implemented inconsistently HTML documents should not contain XMP nor LISTING elements -- the PRE tag is more expressive and more consistently supported
16
The LISTING element should be rendered so that at least 132 characters fit on a line The XMP element should be rendered so that at least 80 characters fit on a line but is otherwise identical to the LISTING element
Address ADDRESS
The ADDRESS element contains such information as address signature and authorship often at the beginning or end of the body of a document
Typically the ADDRESS element is rendered in an italic typeface and may be indented
Example of use
ltADDRESSgt
Kishore TechnologiesltBRgt
Beside TCSltBRgt
BangloreltBRgt
Mobile 7842634463
ltADDRESSgt
Block Quote BLOCKQUOTE
The BLOCKQUOTE element contains text quoted from another source
A typical rendering might be a slight extra left and right indent andor italic font The BLOCKQUOTE typically provides space above and below the quote
Single-font rendition may reflect the quotation style of Internet mail by putting a vertical line of graphic characters such as the greater than symbol (gt) in the left margin
Example of use
I think the play ends
ltBLOCKQUOTEgt
ltPgtSoft you now the fair Ophelia Nymph in thy orisons be all
my sins remembered
17
ltBLOCKQUOTEgt
but I am not sure
List Elements
HTML includes a number of list elements They may be used in combination for example a OL may be nested in an LI element of a UL
The COMPACT attribute suggests that a compact rendering be used
Unordered List UL LI
The UL represents a list of items -- typically rendered as a bulleted list
The content of a UL element is a sequence of LI elements For example
ltULgt
ltLIgtFirst list item
ltLIgtSecond list item
ltpgtsecond paragraph of second item
ltLIgtThird list item
ltULgt
Ordered List OL
The OL element represents an ordered list of items sorted by sequence or order of importance It is typically rendered as a numbered list
The content of a OL element is a sequence of LI elements For example
ltOLgt
ltLIgtClick the Web button to open URI window
ltLIgtEnter the URI number in the text field of the Open URI
window The Web document you specified is displayed
ltolgt
18
ltligtsubstep 1
ltligtsubstep 2
ltolgt
ltLIgtClick highlighted text to move from one link to another
ltOLgt
Directory List DIR
The DIR element is similar to the UL element It represents a list of short items typically up to 20 characters each Items in a directory list may be arranged in columns typically 24 characters wide
The content of a DIR element is a sequence of LI elements Nested block elements are not allowed in the content of DIR elements For example
ltDIRgt
ltLIgtA-HltLIgtI-M
ltLIgtM-RltLIgtS-Z
ltDIRgt
Menu List MENU
The MENU element is a list of items with typically one line per item The menu list style is typically more compact than the style of an unordered list
The content of a MENU element is a sequence of LI elements Nested block elements are not allowed in the content of MENU elements For example
ltMENUgt
ltLIgtFirst item in the list
ltLIgtSecond item in the list
ltLIgtThird item in the list
19
ltMENUgt
Definition List DL DT DD
A definition list is a list of terms and corresponding definitions Definition lists are typically formatted with the term flush-left and the definition formatted paragraph style indented after the term
The content of a DL element is a sequence of DT elements andor DD elements usually in pairs Multiple DT may be paired with a single DD element Documents should not contain multiple consecutive DD elements
Example of use
ltDLgt
ltDTgtTermltDDgtThis is the definition of the first term
ltDTgtTermltDDgtThis is the definition of the second term
ltDLgt
If the DT term does not fit in the DT column (typically one third of the display area) it may be extended across the page with the DD section moved to the next line or it may be wrapped onto successive lines of the left hand column
The optional COMPACT attribute suggests that a compact rendering be used because the list items are small andor the entire list is large
Unless the COMPACT attribute is present an HTML user agent may leave white space between successive DT DD pairs The COMPACT attribute may also reduce the width of the left-hand (DT) column
ltDL COMPACTgt
ltDTgtTermltDDgtThis is the first definition in compact format
ltDTgtTermltDDgtThis is the second definition in compact format
ltDLgt
Phrase Markup
Phrases may be marked up according to idiomatic usage typographic appearance or for use as hyperlink anchors
20
User agents must render highlighted phrases distinctly from plain text Additionally EM content must be rendered as distinct from STRONG content and B content must rendered as distinct from I content
Phrase elements may be nested within the content of other phrase elements however HTML user agents may render nested phrase elements indistinctly from non-nested elements
plain ltBgtbold ltIgtitalicltIgtltBgt may be rendered
the same as plain ltBgtbold ltBgtltIgtitalicltIgt
Idiomatic Elements
Phrases may be marked up to indicate certain idioms
Citation CITE
The CITE element is used to indicate the title of a book or other citation It is typically rendered as italics For example
He just couldnt get enough of ltcitegtThe Grapes of Wrathltcitegt
Code CODE
The CODE element indicates an example of code typically rendered in a mono-spaced font The CODE element is intended for short words or phrases of code the PRE block structuring element (section Preformatted Text PRE) is more appropriate for multiple-line listings For example
The expression ltcodegtx += 1ltcodegt
is short for ltcodegtx = x + 1ltcodegt
Emphasis EM
The EM element indicates an emphasized phrase typically rendered as italics For example
A singular subject ltemgtalwaysltemgt takes a singular verb
Keyboard KBD
The KBD element indicates text typed by a user typically rendered in a mono-spaced font This is commonly used in instruction manuals For example
21
Enter ltkbdgtFIND ITltkbdgt to search the database
Sample SAMP
The SAMP element indicates a sequence of literal characters typically rendered in a mono-spaced font For example
The only word containing the letters ltsampgtmtltsampgt is dreamt
Strong Emphasis STRONG
The STRONG element indicates strong emphasis typically rendered in bold For example
ltstronggtSTOPltstronggt or Ill say ltstronggtSTOPltstronggt again
Variable VAR
The VAR element indicates a placeholder variable typically rendered as italic For example
Type ltSAMPgthtml-check ltVARgtfileltVARgt | moreltSAMPgt
to check ltVARgtfileltVARgt for markup errors
Typographic Elements
Typographic elements are used to specify the format of marked text
Typical renderings for idiomatic elements may vary between user agents If a specific rendering is necessary -- for example when referring to a specific text attribute as in The italic parts are mandatory -- a typographic element can be used to ensure that the intended typography is used where possible
Bold B
The B element indicates bold text Where bold typography is unavailable an alternative representation may be used
Italic I
The I element indicates italic text Where italic typography is unavailable an alternative representation may be used
Teletype TT
22
The TT element indicates teletype (monospaced )text Where a teletype font is unavailable an alternative representation may be used
Anchor A
The A element indicates a hyperlink anchor (see section Hyperlinks) At least one of the NAME and HREF attributes should be present Attributes of the A element
HREF
gives the URI of the head anchor of a hyperlink
NAME
gives the name of the anchor and makes it available as a head of a hyperlink
TITLE
suggests a title for the destination resource --- advisory only The TITLE attribute may be used
for display prior to accessing the destination resource for example as a margin note or on a small box while the mouse is over the anchor or while the document is being loaded
for resources that do not include a title such as graphics plain text and Gopher menus for use as a window title
REL
The REL attribute gives the relationship(s) described by the hyperlink The value is a whitespace separated list of relationship names The semantics of link relationships are not specified in this document
REV
Same as the REL attribute but the semantics of the relationship are in the reverse direction A link from A to B with REL=X expresses the same relationship as a link from B to A with REV=X An anchor may have both REL and REV attributes
URN
specifies a preferred more persistent identifier for the head anchor of the hyperlink The syntax and semantics of the URN attribute are not yet specified
METHODS
23
specifies methods to be used in accessing the destination as a whitespace-separated list of names The set of applicable names is a function of the scheme of the URI in the HREF attribute For similar reasons as for the TITLE attribute it may be useful to include the information in advance in the link For example the HTML user agent may chose a different rendering as a function of the methods allowed for example something that is searchable may get a different icon
Line Break BR
The BR element specifies a line break between words (see section Characters Words and Paragraphs) For example
ltPgt Pease porridge hotltBRgt
Pease porridge coldltBRgt
Pease porridge in the potltBRgt
Nine days old
Horizontal Rule HR
The HR element is a divider between sections of text typically a full width horizontal rule or equivalent graphic For example
ltHRgt
ltADDRESSgtFebruary 8 1995 CERNltADDRESSgt
ltBODYgt
Image IMG
The IMG element refers to an image or icon via a hyperlink (see section Simultaneous Presentation of Image Resources)
HTML user agents may process the value of the ALT attribute as an alternative to processing the image resource indicated by the SRC attribute (22)
Attributes of the IMG element
ALIGN
Alignment of the image with respect to the text baseline
`TOP specifies that the top of the image aligns with the tallest item on the line containing the image
24
`MIDDLE specifies that the center of the image aligns with the baseline of the line containing the image
`BOTTOM specifies that the bottom of the image aligns with the baseline of the line containing the image
ALT
Text to use in place of the referenced image resource for example due to processing constraints or user preference
ISMAP
indicates an image map (see section Image Maps)
SRC
Specifies the URI of the image resource (23)
Examples of use
ltIMG SRC=trianglexbm ALT=Warninggt Be sure to read these instructions
lta href=httpmachinehtbinimagemapsamplegt
ltIMG SRC=samplexbm ISMAPgt
ltagt
Advantages
Easy to use Loose syntax (although being too flexible will not comply with standards) Supported on almost every browser if not all browsers Widely used established on almost every website if not all websites Very similar to XML syntax which is increasingly used for data storage Free - You need not buy any software Easy to learn amp code even for novice programmers
Disadvantages
It cannot produce dynamic output alone since it is a static language Sometimes the structuring of HTML documents is hard to grasp You have to keep up with deprecated tags and make sure not to use them Deprecated tags appear because another language that works with HTML has
replaced the original work of the tag thus the other language needs to be learned (most of the time it is CSS)
25
Security features offered by HTML are limited
Conclusion
HTML is used to build web sites and HTML5 improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements and how to recover from errors
Some of the new features in HTML5 are functions for embedding audio video graphics client-side data storage and interactive documents HTML5 also contains new elements like ltnavgt ltheadergt ltfootergt and ltfiguregt
References
httpenwikipediaorgwikiHTML httpwwww3schoolscomhtmldefaultasp httpwwwanswerscomtopichtml
- Definition of HTML
-
2
IMPORTANT POINTS
1048746 HTML tags are not case-sensitive People sometimes type the tags in capital letters to make them easier to distinguish from the surrounding text but it is best to use lower case for your tags ndash as it is required by XML
1048746 although the tags and attributes themselves are not case-sensitive certain values such as a Uniform Resource Locator (URL) in an anchor tag or a link are case-sensitive
1048746 All file names you create should be lower-case
The href attribute specifies the links destination
lta href=httpkumca2010xtgemcomgtkumca2010ltagt
The href or the name attribute must be present in the ltagt tag
Common HTML Tags to Know and Understand
(Remember ndash you will need to ldquoCloserdquo each of these tags An example is provided for the first tag)
lthtmlgt beginning of an HTML document (lthtmlgt to close)
ltheadgt beginning of the head of the document
lttitlegt beginning of the title in the head of the document
ltbodygt beginning of the body (main part) of the document
lth1gt the headline or main heading of your page
lth2gt the subheading of your page
lth3gt the sub-sub heading [Note There are a total of 6 levels of headers lth1gt - lth6gt available]
ltpgt begin new paragraph
ltulgt unordered list (bulleted list)
ltolgt ordered list (numbered list)
ltligt list item (used in conjunction with ltulgt or ltolgt)
3
ltagt anchor (used for a hyperlink) ndash such as lta href=ldquohttpwwwlibumdedurdquogtUM Librariesltagt
ltstronggt strong emphasis usually displays as boldface [Note Use this tag instead of ltbgt (bold)]
ltemgt emphasis [Note Use this tag instead of ltigt (italics)]
lttablegt begin a table
lttrgt begin a table row
ltthgt table header (information in the cells of the top row of a table)
lttdgt table data (information in an individual cell)
The following tags are not used in pairs only a beginning tag is used
ltbrgt line break
ltimggt image (used in conjunction with the SRC attribute -- ltIMG SRC=rdquohelliprdquogt)
When you are coding your web page keep in mind that HTML elements cannot overlap each other So the following is invalid
ltstronggtltemgtIncorrect nestingltstronggtltemgt
Why In this example the strong element is intended to contain an em element To be truly contained within the strong element the em elements end tag must occur before the strong elements end tag To correct this problem you would need to change the coding to
ltstronggtltemgtCorrect nestingltemgtltstronggt
Creating a Web Page-The Basics
Follow the instructions that appear below to create a simple Web page on any topic that interests you Type all the HTML tags exactly as shown they are displayed here in bold type The directions in italics will give you a general idea of your own text to type In this example the head of your Web page will contain only a title
The body of your Web page will contain headings a short paragraph an unordered (bulleted) list an ordered (numbered) list bold and italic type and a link to the University of Maryland Libraries home page
4
Launch Notepad on your computer by going to Start ProgramsAccessories Notepad To make your efforts at coding a bit easier go to ldquoFormatrdquo and be sure ldquoWord Wraprdquo is checked
VERY IMPORTANT NOTE Although it is possible to create a web page using Microsoft WORD do NOT use WORD or WordPad to create files (These programs generate non-standard HTML)
Type the following
lthtmlgt
ltheadgt
lttitlegt
Type the title of your web page here For example My First Web Page
lttitlegt [Remember Always close your tags]
ltheadgt
ltbodygt
lth1gtType the title or main heading you want to be seen at the top of your Web page For Example My First
Web Page lth1gt
ltpgtType todays date here ltpgt
lth2gtType a title for a list For Example My Grocery Listlth2gt
ltpgtType a short introduction about the topic ltpgt
ltulgt
5
ltligtType your first list item For example Cakeltligt
ltligtType your second list item For example Popcornltligt
ltligtType your third list item For example Dove Barsltligt
ltligtType your fourth list item For example Tumsltligtltulgt
lth2gtType a title for a numbered list For example My Vacation Priorities lth2gt
ltpgtType a second short introduction ltpgt
ltolgt
ltligtType your first list item For example Disneyworldltligt
ltIigtType your second list item For example Hollywood ltligt
ltligtType your third list item For example Universal Studios ltligt
ltligtType your fourth list item For example Home ltligtltolgt
ltpgtType ldquoAuthored byrdquo and your name ltpgt
Now we will use the anchor tag ltagt to add a link to your sample Web page Links are also called hyperlinks hypertext or hot links You may link within a single document as well as linking to other ldquooutsiderdquo documents
You may want to add links within a page if your document becomes lengthy To do this you will use the anchor tag in two places
First add the following to the top of your page before the lth1gt tag lta name=ldquotoprdquogtltagt [Note Do not forget the quotation marks]
Then add the following to your page after the final ltpgt (the ldquoauthored byrdquo statement)
ltpgtGo to the lta href=ldquotoprdquogttopltagt of the pageltpgt
Whenever you put a URL inside an anchor tag you must enclose it within quotation marks Also donrsquot forget that the URL is case-sensitive
Insert the following sentence into your sample page below the numbered list (after the
6
ltolgt) to make a link to the visitorrsquos page on the University of Maryland Libraries website (You can use another site if you know the URL)
ltpgtMore information can be found in the University of Maryland Libraries
lta href=httpwwwlibumdeduvisitorshtmlgtInformation For Visitorsltagt web
pageltpgt
You are almost ready to view your new page in a web browser First be sure to include these important ending tags at the bottom of your page Type these tags before you try to display your page in Mozilla Firefox
ltbodygt
lthtmlgt
To save your file go to ldquofilerdquo and ldquosaverdquo in Notepad and save the file to your floppy disk [A] (or flash drive) Enter a filename being sure it is all lowercase without spaces and ends in html and choose ldquosave as typerdquo ndashAll files ()
Now we can add a link to your e-mail address Choose the line that reads
ltpgtType ldquoAuthored byrdquo and your name ltpgt and change the coding as follows
ltpgtAuthored by lta href=mailto[insert your e-mail addressumdedu here]gt your nameltagt ltpgt
Be sure to save your changes and view your creation in Firefox
Congratulations You now have a basic web page
Creating a Web Page Understanding and using Images
Now that you have created a basic web page it is helpful to understand how to incorporate images Here is an example of an image used on the University Libraries home page
7
This image is named ldquocataloggifrdquo Sample HTML code for this image could read
ltimg src=imageshomecataloggif alt=Catalog border=0 width=127 height=18gt
An image used on a Web page is a separate file on the Librariesrsquo server All information about the image is put inside the ltimggt tag The ltimggt tag stands alone it is not used in a pair An important thing to remember is that you have to include enough information within the ltimggt tag to enable the Web server to find your image
Where is the image located If the image is located in a different folder from your HTML file you will need to include that information in the URL In the above example the image is housed in the ldquohomerdquo subfolder of the ldquoimagesrdquo folder In the above example there will be no border around the image when it appears on a web page The ldquoALTrdquo text is what appears when you ldquohoverrdquo over the image with your mouse in Internet Explorer and also provides important information for people with disabilities who use software designed to help them access the Web It is also what is displayed when you have a broken link to an image or if you are using a text-only browser The text that goes with the alt attribute must be enclosed in quotation marks Think of your users when you are creating these alt attributes and choose descriptive words or phrases
A Word About Images
The IMG tag may be used to link to a number of different types of images Two common types of images you might add to your web page are
GIF = A frequently-used graphics format with small files which can be downloaded quickly
JPG or JPEG = Designed for compressing either full-color or gray-scale images of natural real-world scenes JPEGs work well on photographs naturalistic artwork and similar material not so well on lettering simple cartoons or line drawings
Now that we have the image saved on disk with our HTML document you can also align it in various places on your page Add another copy of the image aligned to the center of your page To do this insert this coding after the first graphic
ltpgtltcentergtltimg src=kickjpg border=ldquo0rdquo height=ldquo119rdquo width=ldquo121rdquo alt=ldquoKRISHNA
8
UNIVERSITYrdquogtltcentergtltpgt
Save your file and view it in Firefox
In addition to making text ldquohyperlinkrdquo to other documents you can also add a hypertext link to graphics on your pages which will allow you to ldquojumprdquo to another page or to another location within the same page To do this select one of the two graphics you inserted into your page Then revise the coding so that it reads as follows
lta href=httpkumca2010xtgemcomgtltimg src=kickjpg border=ldquo0rdquo
height=ldquo119rdquo width=ldquo121rdquo alt=ldquoKrishna universityrdquogtltagt
Once again save your file and view it in Firefox
Adding a Simple Table
Tables may look complicated at first but they will be easier to understand if you remember that a table in HTML is created row by row Type the tags as shown and follow the directions in italic type Use any spacing or indentation that makes sense to you but do not change the order of any of the tags Be sure to insert this table before the closing body and html tags on your page
lttablegt
lttrgt
ltthgt Heading for 1st column For example Nameltthgt ltthgt Heading for 2nd column For example Phone
Numberltthgtlttrgt
lttrgt
lttdgt Words in the first row first column For example kishorelttdgtlttdgt Words in the first row
second column For example X4-7096 lttdgtlttrgt
lttrgt
lttdgt Words in the second row first column For example vedalttdgt lttdgt Words in the
second row second column For example X4-7029lttdgt
9
lttrgt
lttablegt
Save your document and preview it in Firefox
Next well spread out the table by adding space in the cells This is done by specifying a number which the browser interprets as a number of pixels between the text and the cell border The HTML command for this is cellpadding Edit your table to read
lttable cellpadding=5gt
You can also change the amount of space between table cells ndash which is called cellspacing in HTML Both cellpadding and cellspacing commands can be used at the same time
lttable cellspacing=5 cellpadding=5gt
Once you have made this change save your file and preview it in Firefox
Congratulations You have now created a simple web page with graphics links and a table
Font Size
The ltfontgtltfontgt tag introduced by Netscape may be used to set the size of the font from 1 (smallest) to 7 (largest) with a size of 3 being the normal text size
Font Size = 1Font Size = 2Font Size = 3-- normal size text
Font Size = 4
Font Size = 5
Font Size = 6
Font Size = 7Remember that the actual size will depend on the computer font the user has selected for their web browser -- you are adjusting the size relative to the default font they have chosen
The format for the font size tag is
10
ltfont size=Ngtblah blah blahltfontgt where N=1 to 7
Document Structure
An HTML document is a tree of elements including a head and body headings paragraphs lists etc Form elements are discussed in section Forms
Document Element HTML
The HTML document element consists of a head and a body much like a memo or a mail message The head contains the title and optional elements The body is a text flow consisting of paragraphs lists and other elements
Head HEAD
The head of an HTML document is an unordered collection of information about the document For example
ltDOCTYPE HTML PUBLIC -IETFDTD HTML 20ENgt
ltHEADgt
ltTITLEgtIntroduction to HTMLltTITLEgt
ltHEADgt
Title TITLE
Every HTML document must contain a TITLE element
The title should identify the contents of the document in a global context A short title such as Introduction may be meaningless out of context A title such as Introduction to HTML Elements is more appropriate
A user agent may display the title of a document in a history list or as a label for the window displaying the document This differs from headings (section Headings H1 H6) which are typically displayed within the body text flow
Base Address BASE
11
The optional BASE element provides a base address for interpreting relative URLs when the document is read out of context (see section Hyperlinks) The value of the HREF attribute must be an absolute URI
Keyword Index ISINDEX
The ISINDEX element indicates that the user agent should allow the user to search an index by giving keywords See section Queries and Indexes for details
Link LINK
The LINK element represents a hyperlink (see section Hyperlinks) Any number of LINK elements may occur in the HEAD element of an HTML document It has the same attributes as the A element (see section Anchor A)
The LINK element is typically used to indicate authorship related indexes and glossaries older or more recent versions document hierarchy associated resources such as style sheets etc
Associated Meta-information META
The META element is an extensible container for use in identifying specialized document meta-information Meta-information has two main functions
to provide a means to discover that the data set exists and how it might be obtained or accessed and
to document the content quality and features of a data set indicating its fitness for use
Each META element specifies a namevalue pair If multiple META elements are provided with the same name their combined contents--concatenated as a comma-separated list--is the value associated with that name
HTTP servers may read the content of the document HEAD to generate header fields corresponding to any elements defining a value for the attribute HTTP-EQUIV (14)
Attributes of the META element
HTTP-EQUIV
Binds the element to an HTTP header field An HTTP server may use this information to process the document In particular it may include a header field in the responses to requests for this document the header name is taken from the HTTP-EQUIV attribute value
12
and the header value is taken from the value of the CONTENT attribute HTTP header names are not case sensitive
NAME Specifies the name of the namevalue pair If not present HTTP-EQUIV gives the name
CONTENT specifies the value of the namevalue pair
Examples
If the document contains
ltMETA HTTP-EQUIV=Expires
CONTENT=Tue 04 Dec 1993 212902 GMTgt
ltmeta http-equiv=Keywords CONTENT=Fredgt
ltMETA HTTP-EQUIV=Reply-to
content=fieldingicsuciedu (Roy Fielding)gt
ltMeta Http-equiv=Keywords CONTENT=Barneygt
then the server may include the following header fields
Expires Tue 04 Dec 1993 212902 GMT
Keywords Fred Barney
Reply-to fieldingicsuciedu (Roy Fielding)
as part of the HTTP response to a `GET or `HEAD request for that document
An HTTP server must not use the META element to form an HTTP response header unless the HTTP-EQUIV attribute is present
An HTTP server may disregard any META elements that specify information controlled by the HTTP server for example `Server `Date and `Last-modified
Next Id NEXTID
The NEXTID element is included for historical reasons only HTML documents should not contain NEXTID elements
13
The NEXTID element gives a hint for the name to use for a new A element when editing an HTML document It should be distinct from all NAME attribute values on A elements For example
ltNEXTID N=Z27gt
Body BODY
The BODY element contains the text flow of the document including headings paragraphs lists etc
For example
ltBODYgt
lth1gtImportant Stufflth1gt
ltpgtExplanation about important stuff
ltBODYgt
Headings H1 H6
The six heading elements H1 through H6 denote section headings Although the order and occurrence of headings is not constrained by the HTML DTD documents should not skip levels (for example from H1 to H3) as converting such documents to other representations is often problematic
Example of use
ltH1gtThis is a headingltH1gt
Here is some text
ltH2gtSecond level headingltH2gt
Here is some more text
Typical renderings are
H1
Bold very-large font centered One or two blank lines above and below
H2
14
Bold large font flush-left One or two blank lines above and below
H3
Italic large font slightly indented from the left margin One or two blank lines above and below
H4
Bold normal font indented more than H3 One blank line above and below
H5
Italic normal font indented as H4 One blank line above
H6
Bold indented same as normal text more than H5 One blank line above
Block Structuring Elements
Block structuring elements include paragraphs lists and block quotes They must not contain heading elements but they may contain phrase markup and in some cases they may be nested
Paragraph P
The P element indicates a paragraph The exact indentation leading space etc of a paragraph is not specified and may be a function of other tags style sheets etcTypically paragraphs are surrounded by a vertical space of one line or half a line The first line in a paragraph is indented in some cases
Example of use
ltH1gtThis Heading Precedes the ParagraphltH1gt
ltPgtThis is the text of the first paragraph
ltPgtThis is the text of the second paragraph Although you do not need to start paragraphs on new lines maintaining this convention facilitates document maintenanceltPgt
ltPgtThis is the text of a third paragraphltPgt
Preformatted Text PRE
15
The PRE element represents a character cell block of text and is suitable for text that has been formatted for a monospaced font
The PRE tag may be used with the optional WIDTH attribute The WIDTH attribute specifies the maximum number of characters for a line and allows the HTML user agent to select a suitable font and indentation
Within preformatted text
Line breaks within the text are rendered as a move to the beginning of the next line (15)
Anchor elements and phrase markup may be used (16)
Elements that define paragraph formatting (headings address etc) must not be used (17)
The horizontal tab character (code position 9 in the HTML document character set) must be interpreted as the smallest positive nonzero number of spaces which will leave the number of characters so far on the line as a multiple of 8 Documents should not contain tab characters as they are not supported consistently
Example of use
ltPREgt
Line 1
Line 2 is to the right of line 1 lta href=abcgtabcltagt
Line 3 aligns with line 2 lta href=defgtdefltagt
ltPREgt
Example and Listing XMP LISTING
The XMP and LISTING elements are similar to the PRE element but they have a different syntax Their content is declared as CDATA which means that no markup except the end-tag open delimiter-in-context is recognized (see 96 Delimiter Recognition of [SGML])
Since CDATA declared content has a number of unfortunate interactions with processing techniques and tends to be used and implemented inconsistently HTML documents should not contain XMP nor LISTING elements -- the PRE tag is more expressive and more consistently supported
16
The LISTING element should be rendered so that at least 132 characters fit on a line The XMP element should be rendered so that at least 80 characters fit on a line but is otherwise identical to the LISTING element
Address ADDRESS
The ADDRESS element contains such information as address signature and authorship often at the beginning or end of the body of a document
Typically the ADDRESS element is rendered in an italic typeface and may be indented
Example of use
ltADDRESSgt
Kishore TechnologiesltBRgt
Beside TCSltBRgt
BangloreltBRgt
Mobile 7842634463
ltADDRESSgt
Block Quote BLOCKQUOTE
The BLOCKQUOTE element contains text quoted from another source
A typical rendering might be a slight extra left and right indent andor italic font The BLOCKQUOTE typically provides space above and below the quote
Single-font rendition may reflect the quotation style of Internet mail by putting a vertical line of graphic characters such as the greater than symbol (gt) in the left margin
Example of use
I think the play ends
ltBLOCKQUOTEgt
ltPgtSoft you now the fair Ophelia Nymph in thy orisons be all
my sins remembered
17
ltBLOCKQUOTEgt
but I am not sure
List Elements
HTML includes a number of list elements They may be used in combination for example a OL may be nested in an LI element of a UL
The COMPACT attribute suggests that a compact rendering be used
Unordered List UL LI
The UL represents a list of items -- typically rendered as a bulleted list
The content of a UL element is a sequence of LI elements For example
ltULgt
ltLIgtFirst list item
ltLIgtSecond list item
ltpgtsecond paragraph of second item
ltLIgtThird list item
ltULgt
Ordered List OL
The OL element represents an ordered list of items sorted by sequence or order of importance It is typically rendered as a numbered list
The content of a OL element is a sequence of LI elements For example
ltOLgt
ltLIgtClick the Web button to open URI window
ltLIgtEnter the URI number in the text field of the Open URI
window The Web document you specified is displayed
ltolgt
18
ltligtsubstep 1
ltligtsubstep 2
ltolgt
ltLIgtClick highlighted text to move from one link to another
ltOLgt
Directory List DIR
The DIR element is similar to the UL element It represents a list of short items typically up to 20 characters each Items in a directory list may be arranged in columns typically 24 characters wide
The content of a DIR element is a sequence of LI elements Nested block elements are not allowed in the content of DIR elements For example
ltDIRgt
ltLIgtA-HltLIgtI-M
ltLIgtM-RltLIgtS-Z
ltDIRgt
Menu List MENU
The MENU element is a list of items with typically one line per item The menu list style is typically more compact than the style of an unordered list
The content of a MENU element is a sequence of LI elements Nested block elements are not allowed in the content of MENU elements For example
ltMENUgt
ltLIgtFirst item in the list
ltLIgtSecond item in the list
ltLIgtThird item in the list
19
ltMENUgt
Definition List DL DT DD
A definition list is a list of terms and corresponding definitions Definition lists are typically formatted with the term flush-left and the definition formatted paragraph style indented after the term
The content of a DL element is a sequence of DT elements andor DD elements usually in pairs Multiple DT may be paired with a single DD element Documents should not contain multiple consecutive DD elements
Example of use
ltDLgt
ltDTgtTermltDDgtThis is the definition of the first term
ltDTgtTermltDDgtThis is the definition of the second term
ltDLgt
If the DT term does not fit in the DT column (typically one third of the display area) it may be extended across the page with the DD section moved to the next line or it may be wrapped onto successive lines of the left hand column
The optional COMPACT attribute suggests that a compact rendering be used because the list items are small andor the entire list is large
Unless the COMPACT attribute is present an HTML user agent may leave white space between successive DT DD pairs The COMPACT attribute may also reduce the width of the left-hand (DT) column
ltDL COMPACTgt
ltDTgtTermltDDgtThis is the first definition in compact format
ltDTgtTermltDDgtThis is the second definition in compact format
ltDLgt
Phrase Markup
Phrases may be marked up according to idiomatic usage typographic appearance or for use as hyperlink anchors
20
User agents must render highlighted phrases distinctly from plain text Additionally EM content must be rendered as distinct from STRONG content and B content must rendered as distinct from I content
Phrase elements may be nested within the content of other phrase elements however HTML user agents may render nested phrase elements indistinctly from non-nested elements
plain ltBgtbold ltIgtitalicltIgtltBgt may be rendered
the same as plain ltBgtbold ltBgtltIgtitalicltIgt
Idiomatic Elements
Phrases may be marked up to indicate certain idioms
Citation CITE
The CITE element is used to indicate the title of a book or other citation It is typically rendered as italics For example
He just couldnt get enough of ltcitegtThe Grapes of Wrathltcitegt
Code CODE
The CODE element indicates an example of code typically rendered in a mono-spaced font The CODE element is intended for short words or phrases of code the PRE block structuring element (section Preformatted Text PRE) is more appropriate for multiple-line listings For example
The expression ltcodegtx += 1ltcodegt
is short for ltcodegtx = x + 1ltcodegt
Emphasis EM
The EM element indicates an emphasized phrase typically rendered as italics For example
A singular subject ltemgtalwaysltemgt takes a singular verb
Keyboard KBD
The KBD element indicates text typed by a user typically rendered in a mono-spaced font This is commonly used in instruction manuals For example
21
Enter ltkbdgtFIND ITltkbdgt to search the database
Sample SAMP
The SAMP element indicates a sequence of literal characters typically rendered in a mono-spaced font For example
The only word containing the letters ltsampgtmtltsampgt is dreamt
Strong Emphasis STRONG
The STRONG element indicates strong emphasis typically rendered in bold For example
ltstronggtSTOPltstronggt or Ill say ltstronggtSTOPltstronggt again
Variable VAR
The VAR element indicates a placeholder variable typically rendered as italic For example
Type ltSAMPgthtml-check ltVARgtfileltVARgt | moreltSAMPgt
to check ltVARgtfileltVARgt for markup errors
Typographic Elements
Typographic elements are used to specify the format of marked text
Typical renderings for idiomatic elements may vary between user agents If a specific rendering is necessary -- for example when referring to a specific text attribute as in The italic parts are mandatory -- a typographic element can be used to ensure that the intended typography is used where possible
Bold B
The B element indicates bold text Where bold typography is unavailable an alternative representation may be used
Italic I
The I element indicates italic text Where italic typography is unavailable an alternative representation may be used
Teletype TT
22
The TT element indicates teletype (monospaced )text Where a teletype font is unavailable an alternative representation may be used
Anchor A
The A element indicates a hyperlink anchor (see section Hyperlinks) At least one of the NAME and HREF attributes should be present Attributes of the A element
HREF
gives the URI of the head anchor of a hyperlink
NAME
gives the name of the anchor and makes it available as a head of a hyperlink
TITLE
suggests a title for the destination resource --- advisory only The TITLE attribute may be used
for display prior to accessing the destination resource for example as a margin note or on a small box while the mouse is over the anchor or while the document is being loaded
for resources that do not include a title such as graphics plain text and Gopher menus for use as a window title
REL
The REL attribute gives the relationship(s) described by the hyperlink The value is a whitespace separated list of relationship names The semantics of link relationships are not specified in this document
REV
Same as the REL attribute but the semantics of the relationship are in the reverse direction A link from A to B with REL=X expresses the same relationship as a link from B to A with REV=X An anchor may have both REL and REV attributes
URN
specifies a preferred more persistent identifier for the head anchor of the hyperlink The syntax and semantics of the URN attribute are not yet specified
METHODS
23
specifies methods to be used in accessing the destination as a whitespace-separated list of names The set of applicable names is a function of the scheme of the URI in the HREF attribute For similar reasons as for the TITLE attribute it may be useful to include the information in advance in the link For example the HTML user agent may chose a different rendering as a function of the methods allowed for example something that is searchable may get a different icon
Line Break BR
The BR element specifies a line break between words (see section Characters Words and Paragraphs) For example
ltPgt Pease porridge hotltBRgt
Pease porridge coldltBRgt
Pease porridge in the potltBRgt
Nine days old
Horizontal Rule HR
The HR element is a divider between sections of text typically a full width horizontal rule or equivalent graphic For example
ltHRgt
ltADDRESSgtFebruary 8 1995 CERNltADDRESSgt
ltBODYgt
Image IMG
The IMG element refers to an image or icon via a hyperlink (see section Simultaneous Presentation of Image Resources)
HTML user agents may process the value of the ALT attribute as an alternative to processing the image resource indicated by the SRC attribute (22)
Attributes of the IMG element
ALIGN
Alignment of the image with respect to the text baseline
`TOP specifies that the top of the image aligns with the tallest item on the line containing the image
24
`MIDDLE specifies that the center of the image aligns with the baseline of the line containing the image
`BOTTOM specifies that the bottom of the image aligns with the baseline of the line containing the image
ALT
Text to use in place of the referenced image resource for example due to processing constraints or user preference
ISMAP
indicates an image map (see section Image Maps)
SRC
Specifies the URI of the image resource (23)
Examples of use
ltIMG SRC=trianglexbm ALT=Warninggt Be sure to read these instructions
lta href=httpmachinehtbinimagemapsamplegt
ltIMG SRC=samplexbm ISMAPgt
ltagt
Advantages
Easy to use Loose syntax (although being too flexible will not comply with standards) Supported on almost every browser if not all browsers Widely used established on almost every website if not all websites Very similar to XML syntax which is increasingly used for data storage Free - You need not buy any software Easy to learn amp code even for novice programmers
Disadvantages
It cannot produce dynamic output alone since it is a static language Sometimes the structuring of HTML documents is hard to grasp You have to keep up with deprecated tags and make sure not to use them Deprecated tags appear because another language that works with HTML has
replaced the original work of the tag thus the other language needs to be learned (most of the time it is CSS)
25
Security features offered by HTML are limited
Conclusion
HTML is used to build web sites and HTML5 improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements and how to recover from errors
Some of the new features in HTML5 are functions for embedding audio video graphics client-side data storage and interactive documents HTML5 also contains new elements like ltnavgt ltheadergt ltfootergt and ltfiguregt
References
httpenwikipediaorgwikiHTML httpwwww3schoolscomhtmldefaultasp httpwwwanswerscomtopichtml
- Definition of HTML
-
3
ltagt anchor (used for a hyperlink) ndash such as lta href=ldquohttpwwwlibumdedurdquogtUM Librariesltagt
ltstronggt strong emphasis usually displays as boldface [Note Use this tag instead of ltbgt (bold)]
ltemgt emphasis [Note Use this tag instead of ltigt (italics)]
lttablegt begin a table
lttrgt begin a table row
ltthgt table header (information in the cells of the top row of a table)
lttdgt table data (information in an individual cell)
The following tags are not used in pairs only a beginning tag is used
ltbrgt line break
ltimggt image (used in conjunction with the SRC attribute -- ltIMG SRC=rdquohelliprdquogt)
When you are coding your web page keep in mind that HTML elements cannot overlap each other So the following is invalid
ltstronggtltemgtIncorrect nestingltstronggtltemgt
Why In this example the strong element is intended to contain an em element To be truly contained within the strong element the em elements end tag must occur before the strong elements end tag To correct this problem you would need to change the coding to
ltstronggtltemgtCorrect nestingltemgtltstronggt
Creating a Web Page-The Basics
Follow the instructions that appear below to create a simple Web page on any topic that interests you Type all the HTML tags exactly as shown they are displayed here in bold type The directions in italics will give you a general idea of your own text to type In this example the head of your Web page will contain only a title
The body of your Web page will contain headings a short paragraph an unordered (bulleted) list an ordered (numbered) list bold and italic type and a link to the University of Maryland Libraries home page
4
Launch Notepad on your computer by going to Start ProgramsAccessories Notepad To make your efforts at coding a bit easier go to ldquoFormatrdquo and be sure ldquoWord Wraprdquo is checked
VERY IMPORTANT NOTE Although it is possible to create a web page using Microsoft WORD do NOT use WORD or WordPad to create files (These programs generate non-standard HTML)
Type the following
lthtmlgt
ltheadgt
lttitlegt
Type the title of your web page here For example My First Web Page
lttitlegt [Remember Always close your tags]
ltheadgt
ltbodygt
lth1gtType the title or main heading you want to be seen at the top of your Web page For Example My First
Web Page lth1gt
ltpgtType todays date here ltpgt
lth2gtType a title for a list For Example My Grocery Listlth2gt
ltpgtType a short introduction about the topic ltpgt
ltulgt
5
ltligtType your first list item For example Cakeltligt
ltligtType your second list item For example Popcornltligt
ltligtType your third list item For example Dove Barsltligt
ltligtType your fourth list item For example Tumsltligtltulgt
lth2gtType a title for a numbered list For example My Vacation Priorities lth2gt
ltpgtType a second short introduction ltpgt
ltolgt
ltligtType your first list item For example Disneyworldltligt
ltIigtType your second list item For example Hollywood ltligt
ltligtType your third list item For example Universal Studios ltligt
ltligtType your fourth list item For example Home ltligtltolgt
ltpgtType ldquoAuthored byrdquo and your name ltpgt
Now we will use the anchor tag ltagt to add a link to your sample Web page Links are also called hyperlinks hypertext or hot links You may link within a single document as well as linking to other ldquooutsiderdquo documents
You may want to add links within a page if your document becomes lengthy To do this you will use the anchor tag in two places
First add the following to the top of your page before the lth1gt tag lta name=ldquotoprdquogtltagt [Note Do not forget the quotation marks]
Then add the following to your page after the final ltpgt (the ldquoauthored byrdquo statement)
ltpgtGo to the lta href=ldquotoprdquogttopltagt of the pageltpgt
Whenever you put a URL inside an anchor tag you must enclose it within quotation marks Also donrsquot forget that the URL is case-sensitive
Insert the following sentence into your sample page below the numbered list (after the
6
ltolgt) to make a link to the visitorrsquos page on the University of Maryland Libraries website (You can use another site if you know the URL)
ltpgtMore information can be found in the University of Maryland Libraries
lta href=httpwwwlibumdeduvisitorshtmlgtInformation For Visitorsltagt web
pageltpgt
You are almost ready to view your new page in a web browser First be sure to include these important ending tags at the bottom of your page Type these tags before you try to display your page in Mozilla Firefox
ltbodygt
lthtmlgt
To save your file go to ldquofilerdquo and ldquosaverdquo in Notepad and save the file to your floppy disk [A] (or flash drive) Enter a filename being sure it is all lowercase without spaces and ends in html and choose ldquosave as typerdquo ndashAll files ()
Now we can add a link to your e-mail address Choose the line that reads
ltpgtType ldquoAuthored byrdquo and your name ltpgt and change the coding as follows
ltpgtAuthored by lta href=mailto[insert your e-mail addressumdedu here]gt your nameltagt ltpgt
Be sure to save your changes and view your creation in Firefox
Congratulations You now have a basic web page
Creating a Web Page Understanding and using Images
Now that you have created a basic web page it is helpful to understand how to incorporate images Here is an example of an image used on the University Libraries home page
7
This image is named ldquocataloggifrdquo Sample HTML code for this image could read
ltimg src=imageshomecataloggif alt=Catalog border=0 width=127 height=18gt
An image used on a Web page is a separate file on the Librariesrsquo server All information about the image is put inside the ltimggt tag The ltimggt tag stands alone it is not used in a pair An important thing to remember is that you have to include enough information within the ltimggt tag to enable the Web server to find your image
Where is the image located If the image is located in a different folder from your HTML file you will need to include that information in the URL In the above example the image is housed in the ldquohomerdquo subfolder of the ldquoimagesrdquo folder In the above example there will be no border around the image when it appears on a web page The ldquoALTrdquo text is what appears when you ldquohoverrdquo over the image with your mouse in Internet Explorer and also provides important information for people with disabilities who use software designed to help them access the Web It is also what is displayed when you have a broken link to an image or if you are using a text-only browser The text that goes with the alt attribute must be enclosed in quotation marks Think of your users when you are creating these alt attributes and choose descriptive words or phrases
A Word About Images
The IMG tag may be used to link to a number of different types of images Two common types of images you might add to your web page are
GIF = A frequently-used graphics format with small files which can be downloaded quickly
JPG or JPEG = Designed for compressing either full-color or gray-scale images of natural real-world scenes JPEGs work well on photographs naturalistic artwork and similar material not so well on lettering simple cartoons or line drawings
Now that we have the image saved on disk with our HTML document you can also align it in various places on your page Add another copy of the image aligned to the center of your page To do this insert this coding after the first graphic
ltpgtltcentergtltimg src=kickjpg border=ldquo0rdquo height=ldquo119rdquo width=ldquo121rdquo alt=ldquoKRISHNA
8
UNIVERSITYrdquogtltcentergtltpgt
Save your file and view it in Firefox
In addition to making text ldquohyperlinkrdquo to other documents you can also add a hypertext link to graphics on your pages which will allow you to ldquojumprdquo to another page or to another location within the same page To do this select one of the two graphics you inserted into your page Then revise the coding so that it reads as follows
lta href=httpkumca2010xtgemcomgtltimg src=kickjpg border=ldquo0rdquo
height=ldquo119rdquo width=ldquo121rdquo alt=ldquoKrishna universityrdquogtltagt
Once again save your file and view it in Firefox
Adding a Simple Table
Tables may look complicated at first but they will be easier to understand if you remember that a table in HTML is created row by row Type the tags as shown and follow the directions in italic type Use any spacing or indentation that makes sense to you but do not change the order of any of the tags Be sure to insert this table before the closing body and html tags on your page
lttablegt
lttrgt
ltthgt Heading for 1st column For example Nameltthgt ltthgt Heading for 2nd column For example Phone
Numberltthgtlttrgt
lttrgt
lttdgt Words in the first row first column For example kishorelttdgtlttdgt Words in the first row
second column For example X4-7096 lttdgtlttrgt
lttrgt
lttdgt Words in the second row first column For example vedalttdgt lttdgt Words in the
second row second column For example X4-7029lttdgt
9
lttrgt
lttablegt
Save your document and preview it in Firefox
Next well spread out the table by adding space in the cells This is done by specifying a number which the browser interprets as a number of pixels between the text and the cell border The HTML command for this is cellpadding Edit your table to read
lttable cellpadding=5gt
You can also change the amount of space between table cells ndash which is called cellspacing in HTML Both cellpadding and cellspacing commands can be used at the same time
lttable cellspacing=5 cellpadding=5gt
Once you have made this change save your file and preview it in Firefox
Congratulations You have now created a simple web page with graphics links and a table
Font Size
The ltfontgtltfontgt tag introduced by Netscape may be used to set the size of the font from 1 (smallest) to 7 (largest) with a size of 3 being the normal text size
Font Size = 1Font Size = 2Font Size = 3-- normal size text
Font Size = 4
Font Size = 5
Font Size = 6
Font Size = 7Remember that the actual size will depend on the computer font the user has selected for their web browser -- you are adjusting the size relative to the default font they have chosen
The format for the font size tag is
10
ltfont size=Ngtblah blah blahltfontgt where N=1 to 7
Document Structure
An HTML document is a tree of elements including a head and body headings paragraphs lists etc Form elements are discussed in section Forms
Document Element HTML
The HTML document element consists of a head and a body much like a memo or a mail message The head contains the title and optional elements The body is a text flow consisting of paragraphs lists and other elements
Head HEAD
The head of an HTML document is an unordered collection of information about the document For example
ltDOCTYPE HTML PUBLIC -IETFDTD HTML 20ENgt
ltHEADgt
ltTITLEgtIntroduction to HTMLltTITLEgt
ltHEADgt
Title TITLE
Every HTML document must contain a TITLE element
The title should identify the contents of the document in a global context A short title such as Introduction may be meaningless out of context A title such as Introduction to HTML Elements is more appropriate
A user agent may display the title of a document in a history list or as a label for the window displaying the document This differs from headings (section Headings H1 H6) which are typically displayed within the body text flow
Base Address BASE
11
The optional BASE element provides a base address for interpreting relative URLs when the document is read out of context (see section Hyperlinks) The value of the HREF attribute must be an absolute URI
Keyword Index ISINDEX
The ISINDEX element indicates that the user agent should allow the user to search an index by giving keywords See section Queries and Indexes for details
Link LINK
The LINK element represents a hyperlink (see section Hyperlinks) Any number of LINK elements may occur in the HEAD element of an HTML document It has the same attributes as the A element (see section Anchor A)
The LINK element is typically used to indicate authorship related indexes and glossaries older or more recent versions document hierarchy associated resources such as style sheets etc
Associated Meta-information META
The META element is an extensible container for use in identifying specialized document meta-information Meta-information has two main functions
to provide a means to discover that the data set exists and how it might be obtained or accessed and
to document the content quality and features of a data set indicating its fitness for use
Each META element specifies a namevalue pair If multiple META elements are provided with the same name their combined contents--concatenated as a comma-separated list--is the value associated with that name
HTTP servers may read the content of the document HEAD to generate header fields corresponding to any elements defining a value for the attribute HTTP-EQUIV (14)
Attributes of the META element
HTTP-EQUIV
Binds the element to an HTTP header field An HTTP server may use this information to process the document In particular it may include a header field in the responses to requests for this document the header name is taken from the HTTP-EQUIV attribute value
12
and the header value is taken from the value of the CONTENT attribute HTTP header names are not case sensitive
NAME Specifies the name of the namevalue pair If not present HTTP-EQUIV gives the name
CONTENT specifies the value of the namevalue pair
Examples
If the document contains
ltMETA HTTP-EQUIV=Expires
CONTENT=Tue 04 Dec 1993 212902 GMTgt
ltmeta http-equiv=Keywords CONTENT=Fredgt
ltMETA HTTP-EQUIV=Reply-to
content=fieldingicsuciedu (Roy Fielding)gt
ltMeta Http-equiv=Keywords CONTENT=Barneygt
then the server may include the following header fields
Expires Tue 04 Dec 1993 212902 GMT
Keywords Fred Barney
Reply-to fieldingicsuciedu (Roy Fielding)
as part of the HTTP response to a `GET or `HEAD request for that document
An HTTP server must not use the META element to form an HTTP response header unless the HTTP-EQUIV attribute is present
An HTTP server may disregard any META elements that specify information controlled by the HTTP server for example `Server `Date and `Last-modified
Next Id NEXTID
The NEXTID element is included for historical reasons only HTML documents should not contain NEXTID elements
13
The NEXTID element gives a hint for the name to use for a new A element when editing an HTML document It should be distinct from all NAME attribute values on A elements For example
ltNEXTID N=Z27gt
Body BODY
The BODY element contains the text flow of the document including headings paragraphs lists etc
For example
ltBODYgt
lth1gtImportant Stufflth1gt
ltpgtExplanation about important stuff
ltBODYgt
Headings H1 H6
The six heading elements H1 through H6 denote section headings Although the order and occurrence of headings is not constrained by the HTML DTD documents should not skip levels (for example from H1 to H3) as converting such documents to other representations is often problematic
Example of use
ltH1gtThis is a headingltH1gt
Here is some text
ltH2gtSecond level headingltH2gt
Here is some more text
Typical renderings are
H1
Bold very-large font centered One or two blank lines above and below
H2
14
Bold large font flush-left One or two blank lines above and below
H3
Italic large font slightly indented from the left margin One or two blank lines above and below
H4
Bold normal font indented more than H3 One blank line above and below
H5
Italic normal font indented as H4 One blank line above
H6
Bold indented same as normal text more than H5 One blank line above
Block Structuring Elements
Block structuring elements include paragraphs lists and block quotes They must not contain heading elements but they may contain phrase markup and in some cases they may be nested
Paragraph P
The P element indicates a paragraph The exact indentation leading space etc of a paragraph is not specified and may be a function of other tags style sheets etcTypically paragraphs are surrounded by a vertical space of one line or half a line The first line in a paragraph is indented in some cases
Example of use
ltH1gtThis Heading Precedes the ParagraphltH1gt
ltPgtThis is the text of the first paragraph
ltPgtThis is the text of the second paragraph Although you do not need to start paragraphs on new lines maintaining this convention facilitates document maintenanceltPgt
ltPgtThis is the text of a third paragraphltPgt
Preformatted Text PRE
15
The PRE element represents a character cell block of text and is suitable for text that has been formatted for a monospaced font
The PRE tag may be used with the optional WIDTH attribute The WIDTH attribute specifies the maximum number of characters for a line and allows the HTML user agent to select a suitable font and indentation
Within preformatted text
Line breaks within the text are rendered as a move to the beginning of the next line (15)
Anchor elements and phrase markup may be used (16)
Elements that define paragraph formatting (headings address etc) must not be used (17)
The horizontal tab character (code position 9 in the HTML document character set) must be interpreted as the smallest positive nonzero number of spaces which will leave the number of characters so far on the line as a multiple of 8 Documents should not contain tab characters as they are not supported consistently
Example of use
ltPREgt
Line 1
Line 2 is to the right of line 1 lta href=abcgtabcltagt
Line 3 aligns with line 2 lta href=defgtdefltagt
ltPREgt
Example and Listing XMP LISTING
The XMP and LISTING elements are similar to the PRE element but they have a different syntax Their content is declared as CDATA which means that no markup except the end-tag open delimiter-in-context is recognized (see 96 Delimiter Recognition of [SGML])
Since CDATA declared content has a number of unfortunate interactions with processing techniques and tends to be used and implemented inconsistently HTML documents should not contain XMP nor LISTING elements -- the PRE tag is more expressive and more consistently supported
16
The LISTING element should be rendered so that at least 132 characters fit on a line The XMP element should be rendered so that at least 80 characters fit on a line but is otherwise identical to the LISTING element
Address ADDRESS
The ADDRESS element contains such information as address signature and authorship often at the beginning or end of the body of a document
Typically the ADDRESS element is rendered in an italic typeface and may be indented
Example of use
ltADDRESSgt
Kishore TechnologiesltBRgt
Beside TCSltBRgt
BangloreltBRgt
Mobile 7842634463
ltADDRESSgt
Block Quote BLOCKQUOTE
The BLOCKQUOTE element contains text quoted from another source
A typical rendering might be a slight extra left and right indent andor italic font The BLOCKQUOTE typically provides space above and below the quote
Single-font rendition may reflect the quotation style of Internet mail by putting a vertical line of graphic characters such as the greater than symbol (gt) in the left margin
Example of use
I think the play ends
ltBLOCKQUOTEgt
ltPgtSoft you now the fair Ophelia Nymph in thy orisons be all
my sins remembered
17
ltBLOCKQUOTEgt
but I am not sure
List Elements
HTML includes a number of list elements They may be used in combination for example a OL may be nested in an LI element of a UL
The COMPACT attribute suggests that a compact rendering be used
Unordered List UL LI
The UL represents a list of items -- typically rendered as a bulleted list
The content of a UL element is a sequence of LI elements For example
ltULgt
ltLIgtFirst list item
ltLIgtSecond list item
ltpgtsecond paragraph of second item
ltLIgtThird list item
ltULgt
Ordered List OL
The OL element represents an ordered list of items sorted by sequence or order of importance It is typically rendered as a numbered list
The content of a OL element is a sequence of LI elements For example
ltOLgt
ltLIgtClick the Web button to open URI window
ltLIgtEnter the URI number in the text field of the Open URI
window The Web document you specified is displayed
ltolgt
18
ltligtsubstep 1
ltligtsubstep 2
ltolgt
ltLIgtClick highlighted text to move from one link to another
ltOLgt
Directory List DIR
The DIR element is similar to the UL element It represents a list of short items typically up to 20 characters each Items in a directory list may be arranged in columns typically 24 characters wide
The content of a DIR element is a sequence of LI elements Nested block elements are not allowed in the content of DIR elements For example
ltDIRgt
ltLIgtA-HltLIgtI-M
ltLIgtM-RltLIgtS-Z
ltDIRgt
Menu List MENU
The MENU element is a list of items with typically one line per item The menu list style is typically more compact than the style of an unordered list
The content of a MENU element is a sequence of LI elements Nested block elements are not allowed in the content of MENU elements For example
ltMENUgt
ltLIgtFirst item in the list
ltLIgtSecond item in the list
ltLIgtThird item in the list
19
ltMENUgt
Definition List DL DT DD
A definition list is a list of terms and corresponding definitions Definition lists are typically formatted with the term flush-left and the definition formatted paragraph style indented after the term
The content of a DL element is a sequence of DT elements andor DD elements usually in pairs Multiple DT may be paired with a single DD element Documents should not contain multiple consecutive DD elements
Example of use
ltDLgt
ltDTgtTermltDDgtThis is the definition of the first term
ltDTgtTermltDDgtThis is the definition of the second term
ltDLgt
If the DT term does not fit in the DT column (typically one third of the display area) it may be extended across the page with the DD section moved to the next line or it may be wrapped onto successive lines of the left hand column
The optional COMPACT attribute suggests that a compact rendering be used because the list items are small andor the entire list is large
Unless the COMPACT attribute is present an HTML user agent may leave white space between successive DT DD pairs The COMPACT attribute may also reduce the width of the left-hand (DT) column
ltDL COMPACTgt
ltDTgtTermltDDgtThis is the first definition in compact format
ltDTgtTermltDDgtThis is the second definition in compact format
ltDLgt
Phrase Markup
Phrases may be marked up according to idiomatic usage typographic appearance or for use as hyperlink anchors
20
User agents must render highlighted phrases distinctly from plain text Additionally EM content must be rendered as distinct from STRONG content and B content must rendered as distinct from I content
Phrase elements may be nested within the content of other phrase elements however HTML user agents may render nested phrase elements indistinctly from non-nested elements
plain ltBgtbold ltIgtitalicltIgtltBgt may be rendered
the same as plain ltBgtbold ltBgtltIgtitalicltIgt
Idiomatic Elements
Phrases may be marked up to indicate certain idioms
Citation CITE
The CITE element is used to indicate the title of a book or other citation It is typically rendered as italics For example
He just couldnt get enough of ltcitegtThe Grapes of Wrathltcitegt
Code CODE
The CODE element indicates an example of code typically rendered in a mono-spaced font The CODE element is intended for short words or phrases of code the PRE block structuring element (section Preformatted Text PRE) is more appropriate for multiple-line listings For example
The expression ltcodegtx += 1ltcodegt
is short for ltcodegtx = x + 1ltcodegt
Emphasis EM
The EM element indicates an emphasized phrase typically rendered as italics For example
A singular subject ltemgtalwaysltemgt takes a singular verb
Keyboard KBD
The KBD element indicates text typed by a user typically rendered in a mono-spaced font This is commonly used in instruction manuals For example
21
Enter ltkbdgtFIND ITltkbdgt to search the database
Sample SAMP
The SAMP element indicates a sequence of literal characters typically rendered in a mono-spaced font For example
The only word containing the letters ltsampgtmtltsampgt is dreamt
Strong Emphasis STRONG
The STRONG element indicates strong emphasis typically rendered in bold For example
ltstronggtSTOPltstronggt or Ill say ltstronggtSTOPltstronggt again
Variable VAR
The VAR element indicates a placeholder variable typically rendered as italic For example
Type ltSAMPgthtml-check ltVARgtfileltVARgt | moreltSAMPgt
to check ltVARgtfileltVARgt for markup errors
Typographic Elements
Typographic elements are used to specify the format of marked text
Typical renderings for idiomatic elements may vary between user agents If a specific rendering is necessary -- for example when referring to a specific text attribute as in The italic parts are mandatory -- a typographic element can be used to ensure that the intended typography is used where possible
Bold B
The B element indicates bold text Where bold typography is unavailable an alternative representation may be used
Italic I
The I element indicates italic text Where italic typography is unavailable an alternative representation may be used
Teletype TT
22
The TT element indicates teletype (monospaced )text Where a teletype font is unavailable an alternative representation may be used
Anchor A
The A element indicates a hyperlink anchor (see section Hyperlinks) At least one of the NAME and HREF attributes should be present Attributes of the A element
HREF
gives the URI of the head anchor of a hyperlink
NAME
gives the name of the anchor and makes it available as a head of a hyperlink
TITLE
suggests a title for the destination resource --- advisory only The TITLE attribute may be used
for display prior to accessing the destination resource for example as a margin note or on a small box while the mouse is over the anchor or while the document is being loaded
for resources that do not include a title such as graphics plain text and Gopher menus for use as a window title
REL
The REL attribute gives the relationship(s) described by the hyperlink The value is a whitespace separated list of relationship names The semantics of link relationships are not specified in this document
REV
Same as the REL attribute but the semantics of the relationship are in the reverse direction A link from A to B with REL=X expresses the same relationship as a link from B to A with REV=X An anchor may have both REL and REV attributes
URN
specifies a preferred more persistent identifier for the head anchor of the hyperlink The syntax and semantics of the URN attribute are not yet specified
METHODS
23
specifies methods to be used in accessing the destination as a whitespace-separated list of names The set of applicable names is a function of the scheme of the URI in the HREF attribute For similar reasons as for the TITLE attribute it may be useful to include the information in advance in the link For example the HTML user agent may chose a different rendering as a function of the methods allowed for example something that is searchable may get a different icon
Line Break BR
The BR element specifies a line break between words (see section Characters Words and Paragraphs) For example
ltPgt Pease porridge hotltBRgt
Pease porridge coldltBRgt
Pease porridge in the potltBRgt
Nine days old
Horizontal Rule HR
The HR element is a divider between sections of text typically a full width horizontal rule or equivalent graphic For example
ltHRgt
ltADDRESSgtFebruary 8 1995 CERNltADDRESSgt
ltBODYgt
Image IMG
The IMG element refers to an image or icon via a hyperlink (see section Simultaneous Presentation of Image Resources)
HTML user agents may process the value of the ALT attribute as an alternative to processing the image resource indicated by the SRC attribute (22)
Attributes of the IMG element
ALIGN
Alignment of the image with respect to the text baseline
`TOP specifies that the top of the image aligns with the tallest item on the line containing the image
24
`MIDDLE specifies that the center of the image aligns with the baseline of the line containing the image
`BOTTOM specifies that the bottom of the image aligns with the baseline of the line containing the image
ALT
Text to use in place of the referenced image resource for example due to processing constraints or user preference
ISMAP
indicates an image map (see section Image Maps)
SRC
Specifies the URI of the image resource (23)
Examples of use
ltIMG SRC=trianglexbm ALT=Warninggt Be sure to read these instructions
lta href=httpmachinehtbinimagemapsamplegt
ltIMG SRC=samplexbm ISMAPgt
ltagt
Advantages
Easy to use Loose syntax (although being too flexible will not comply with standards) Supported on almost every browser if not all browsers Widely used established on almost every website if not all websites Very similar to XML syntax which is increasingly used for data storage Free - You need not buy any software Easy to learn amp code even for novice programmers
Disadvantages
It cannot produce dynamic output alone since it is a static language Sometimes the structuring of HTML documents is hard to grasp You have to keep up with deprecated tags and make sure not to use them Deprecated tags appear because another language that works with HTML has
replaced the original work of the tag thus the other language needs to be learned (most of the time it is CSS)
25
Security features offered by HTML are limited
Conclusion
HTML is used to build web sites and HTML5 improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements and how to recover from errors
Some of the new features in HTML5 are functions for embedding audio video graphics client-side data storage and interactive documents HTML5 also contains new elements like ltnavgt ltheadergt ltfootergt and ltfiguregt
References
httpenwikipediaorgwikiHTML httpwwww3schoolscomhtmldefaultasp httpwwwanswerscomtopichtml
- Definition of HTML
-
4
Launch Notepad on your computer by going to Start ProgramsAccessories Notepad To make your efforts at coding a bit easier go to ldquoFormatrdquo and be sure ldquoWord Wraprdquo is checked
VERY IMPORTANT NOTE Although it is possible to create a web page using Microsoft WORD do NOT use WORD or WordPad to create files (These programs generate non-standard HTML)
Type the following
lthtmlgt
ltheadgt
lttitlegt
Type the title of your web page here For example My First Web Page
lttitlegt [Remember Always close your tags]
ltheadgt
ltbodygt
lth1gtType the title or main heading you want to be seen at the top of your Web page For Example My First
Web Page lth1gt
ltpgtType todays date here ltpgt
lth2gtType a title for a list For Example My Grocery Listlth2gt
ltpgtType a short introduction about the topic ltpgt
ltulgt
5
ltligtType your first list item For example Cakeltligt
ltligtType your second list item For example Popcornltligt
ltligtType your third list item For example Dove Barsltligt
ltligtType your fourth list item For example Tumsltligtltulgt
lth2gtType a title for a numbered list For example My Vacation Priorities lth2gt
ltpgtType a second short introduction ltpgt
ltolgt
ltligtType your first list item For example Disneyworldltligt
ltIigtType your second list item For example Hollywood ltligt
ltligtType your third list item For example Universal Studios ltligt
ltligtType your fourth list item For example Home ltligtltolgt
ltpgtType ldquoAuthored byrdquo and your name ltpgt
Now we will use the anchor tag ltagt to add a link to your sample Web page Links are also called hyperlinks hypertext or hot links You may link within a single document as well as linking to other ldquooutsiderdquo documents
You may want to add links within a page if your document becomes lengthy To do this you will use the anchor tag in two places
First add the following to the top of your page before the lth1gt tag lta name=ldquotoprdquogtltagt [Note Do not forget the quotation marks]
Then add the following to your page after the final ltpgt (the ldquoauthored byrdquo statement)
ltpgtGo to the lta href=ldquotoprdquogttopltagt of the pageltpgt
Whenever you put a URL inside an anchor tag you must enclose it within quotation marks Also donrsquot forget that the URL is case-sensitive
Insert the following sentence into your sample page below the numbered list (after the
6
ltolgt) to make a link to the visitorrsquos page on the University of Maryland Libraries website (You can use another site if you know the URL)
ltpgtMore information can be found in the University of Maryland Libraries
lta href=httpwwwlibumdeduvisitorshtmlgtInformation For Visitorsltagt web
pageltpgt
You are almost ready to view your new page in a web browser First be sure to include these important ending tags at the bottom of your page Type these tags before you try to display your page in Mozilla Firefox
ltbodygt
lthtmlgt
To save your file go to ldquofilerdquo and ldquosaverdquo in Notepad and save the file to your floppy disk [A] (or flash drive) Enter a filename being sure it is all lowercase without spaces and ends in html and choose ldquosave as typerdquo ndashAll files ()
Now we can add a link to your e-mail address Choose the line that reads
ltpgtType ldquoAuthored byrdquo and your name ltpgt and change the coding as follows
ltpgtAuthored by lta href=mailto[insert your e-mail addressumdedu here]gt your nameltagt ltpgt
Be sure to save your changes and view your creation in Firefox
Congratulations You now have a basic web page
Creating a Web Page Understanding and using Images
Now that you have created a basic web page it is helpful to understand how to incorporate images Here is an example of an image used on the University Libraries home page
7
This image is named ldquocataloggifrdquo Sample HTML code for this image could read
ltimg src=imageshomecataloggif alt=Catalog border=0 width=127 height=18gt
An image used on a Web page is a separate file on the Librariesrsquo server All information about the image is put inside the ltimggt tag The ltimggt tag stands alone it is not used in a pair An important thing to remember is that you have to include enough information within the ltimggt tag to enable the Web server to find your image
Where is the image located If the image is located in a different folder from your HTML file you will need to include that information in the URL In the above example the image is housed in the ldquohomerdquo subfolder of the ldquoimagesrdquo folder In the above example there will be no border around the image when it appears on a web page The ldquoALTrdquo text is what appears when you ldquohoverrdquo over the image with your mouse in Internet Explorer and also provides important information for people with disabilities who use software designed to help them access the Web It is also what is displayed when you have a broken link to an image or if you are using a text-only browser The text that goes with the alt attribute must be enclosed in quotation marks Think of your users when you are creating these alt attributes and choose descriptive words or phrases
A Word About Images
The IMG tag may be used to link to a number of different types of images Two common types of images you might add to your web page are
GIF = A frequently-used graphics format with small files which can be downloaded quickly
JPG or JPEG = Designed for compressing either full-color or gray-scale images of natural real-world scenes JPEGs work well on photographs naturalistic artwork and similar material not so well on lettering simple cartoons or line drawings
Now that we have the image saved on disk with our HTML document you can also align it in various places on your page Add another copy of the image aligned to the center of your page To do this insert this coding after the first graphic
ltpgtltcentergtltimg src=kickjpg border=ldquo0rdquo height=ldquo119rdquo width=ldquo121rdquo alt=ldquoKRISHNA
8
UNIVERSITYrdquogtltcentergtltpgt
Save your file and view it in Firefox
In addition to making text ldquohyperlinkrdquo to other documents you can also add a hypertext link to graphics on your pages which will allow you to ldquojumprdquo to another page or to another location within the same page To do this select one of the two graphics you inserted into your page Then revise the coding so that it reads as follows
lta href=httpkumca2010xtgemcomgtltimg src=kickjpg border=ldquo0rdquo
height=ldquo119rdquo width=ldquo121rdquo alt=ldquoKrishna universityrdquogtltagt
Once again save your file and view it in Firefox
Adding a Simple Table
Tables may look complicated at first but they will be easier to understand if you remember that a table in HTML is created row by row Type the tags as shown and follow the directions in italic type Use any spacing or indentation that makes sense to you but do not change the order of any of the tags Be sure to insert this table before the closing body and html tags on your page
lttablegt
lttrgt
ltthgt Heading for 1st column For example Nameltthgt ltthgt Heading for 2nd column For example Phone
Numberltthgtlttrgt
lttrgt
lttdgt Words in the first row first column For example kishorelttdgtlttdgt Words in the first row
second column For example X4-7096 lttdgtlttrgt
lttrgt
lttdgt Words in the second row first column For example vedalttdgt lttdgt Words in the
second row second column For example X4-7029lttdgt
9
lttrgt
lttablegt
Save your document and preview it in Firefox
Next well spread out the table by adding space in the cells This is done by specifying a number which the browser interprets as a number of pixels between the text and the cell border The HTML command for this is cellpadding Edit your table to read
lttable cellpadding=5gt
You can also change the amount of space between table cells ndash which is called cellspacing in HTML Both cellpadding and cellspacing commands can be used at the same time
lttable cellspacing=5 cellpadding=5gt
Once you have made this change save your file and preview it in Firefox
Congratulations You have now created a simple web page with graphics links and a table
Font Size
The ltfontgtltfontgt tag introduced by Netscape may be used to set the size of the font from 1 (smallest) to 7 (largest) with a size of 3 being the normal text size
Font Size = 1Font Size = 2Font Size = 3-- normal size text
Font Size = 4
Font Size = 5
Font Size = 6
Font Size = 7Remember that the actual size will depend on the computer font the user has selected for their web browser -- you are adjusting the size relative to the default font they have chosen
The format for the font size tag is
10
ltfont size=Ngtblah blah blahltfontgt where N=1 to 7
Document Structure
An HTML document is a tree of elements including a head and body headings paragraphs lists etc Form elements are discussed in section Forms
Document Element HTML
The HTML document element consists of a head and a body much like a memo or a mail message The head contains the title and optional elements The body is a text flow consisting of paragraphs lists and other elements
Head HEAD
The head of an HTML document is an unordered collection of information about the document For example
ltDOCTYPE HTML PUBLIC -IETFDTD HTML 20ENgt
ltHEADgt
ltTITLEgtIntroduction to HTMLltTITLEgt
ltHEADgt
Title TITLE
Every HTML document must contain a TITLE element
The title should identify the contents of the document in a global context A short title such as Introduction may be meaningless out of context A title such as Introduction to HTML Elements is more appropriate
A user agent may display the title of a document in a history list or as a label for the window displaying the document This differs from headings (section Headings H1 H6) which are typically displayed within the body text flow
Base Address BASE
11
The optional BASE element provides a base address for interpreting relative URLs when the document is read out of context (see section Hyperlinks) The value of the HREF attribute must be an absolute URI
Keyword Index ISINDEX
The ISINDEX element indicates that the user agent should allow the user to search an index by giving keywords See section Queries and Indexes for details
Link LINK
The LINK element represents a hyperlink (see section Hyperlinks) Any number of LINK elements may occur in the HEAD element of an HTML document It has the same attributes as the A element (see section Anchor A)
The LINK element is typically used to indicate authorship related indexes and glossaries older or more recent versions document hierarchy associated resources such as style sheets etc
Associated Meta-information META
The META element is an extensible container for use in identifying specialized document meta-information Meta-information has two main functions
to provide a means to discover that the data set exists and how it might be obtained or accessed and
to document the content quality and features of a data set indicating its fitness for use
Each META element specifies a namevalue pair If multiple META elements are provided with the same name their combined contents--concatenated as a comma-separated list--is the value associated with that name
HTTP servers may read the content of the document HEAD to generate header fields corresponding to any elements defining a value for the attribute HTTP-EQUIV (14)
Attributes of the META element
HTTP-EQUIV
Binds the element to an HTTP header field An HTTP server may use this information to process the document In particular it may include a header field in the responses to requests for this document the header name is taken from the HTTP-EQUIV attribute value
12
and the header value is taken from the value of the CONTENT attribute HTTP header names are not case sensitive
NAME Specifies the name of the namevalue pair If not present HTTP-EQUIV gives the name
CONTENT specifies the value of the namevalue pair
Examples
If the document contains
ltMETA HTTP-EQUIV=Expires
CONTENT=Tue 04 Dec 1993 212902 GMTgt
ltmeta http-equiv=Keywords CONTENT=Fredgt
ltMETA HTTP-EQUIV=Reply-to
content=fieldingicsuciedu (Roy Fielding)gt
ltMeta Http-equiv=Keywords CONTENT=Barneygt
then the server may include the following header fields
Expires Tue 04 Dec 1993 212902 GMT
Keywords Fred Barney
Reply-to fieldingicsuciedu (Roy Fielding)
as part of the HTTP response to a `GET or `HEAD request for that document
An HTTP server must not use the META element to form an HTTP response header unless the HTTP-EQUIV attribute is present
An HTTP server may disregard any META elements that specify information controlled by the HTTP server for example `Server `Date and `Last-modified
Next Id NEXTID
The NEXTID element is included for historical reasons only HTML documents should not contain NEXTID elements
13
The NEXTID element gives a hint for the name to use for a new A element when editing an HTML document It should be distinct from all NAME attribute values on A elements For example
ltNEXTID N=Z27gt
Body BODY
The BODY element contains the text flow of the document including headings paragraphs lists etc
For example
ltBODYgt
lth1gtImportant Stufflth1gt
ltpgtExplanation about important stuff
ltBODYgt
Headings H1 H6
The six heading elements H1 through H6 denote section headings Although the order and occurrence of headings is not constrained by the HTML DTD documents should not skip levels (for example from H1 to H3) as converting such documents to other representations is often problematic
Example of use
ltH1gtThis is a headingltH1gt
Here is some text
ltH2gtSecond level headingltH2gt
Here is some more text
Typical renderings are
H1
Bold very-large font centered One or two blank lines above and below
H2
14
Bold large font flush-left One or two blank lines above and below
H3
Italic large font slightly indented from the left margin One or two blank lines above and below
H4
Bold normal font indented more than H3 One blank line above and below
H5
Italic normal font indented as H4 One blank line above
H6
Bold indented same as normal text more than H5 One blank line above
Block Structuring Elements
Block structuring elements include paragraphs lists and block quotes They must not contain heading elements but they may contain phrase markup and in some cases they may be nested
Paragraph P
The P element indicates a paragraph The exact indentation leading space etc of a paragraph is not specified and may be a function of other tags style sheets etcTypically paragraphs are surrounded by a vertical space of one line or half a line The first line in a paragraph is indented in some cases
Example of use
ltH1gtThis Heading Precedes the ParagraphltH1gt
ltPgtThis is the text of the first paragraph
ltPgtThis is the text of the second paragraph Although you do not need to start paragraphs on new lines maintaining this convention facilitates document maintenanceltPgt
ltPgtThis is the text of a third paragraphltPgt
Preformatted Text PRE
15
The PRE element represents a character cell block of text and is suitable for text that has been formatted for a monospaced font
The PRE tag may be used with the optional WIDTH attribute The WIDTH attribute specifies the maximum number of characters for a line and allows the HTML user agent to select a suitable font and indentation
Within preformatted text
Line breaks within the text are rendered as a move to the beginning of the next line (15)
Anchor elements and phrase markup may be used (16)
Elements that define paragraph formatting (headings address etc) must not be used (17)
The horizontal tab character (code position 9 in the HTML document character set) must be interpreted as the smallest positive nonzero number of spaces which will leave the number of characters so far on the line as a multiple of 8 Documents should not contain tab characters as they are not supported consistently
Example of use
ltPREgt
Line 1
Line 2 is to the right of line 1 lta href=abcgtabcltagt
Line 3 aligns with line 2 lta href=defgtdefltagt
ltPREgt
Example and Listing XMP LISTING
The XMP and LISTING elements are similar to the PRE element but they have a different syntax Their content is declared as CDATA which means that no markup except the end-tag open delimiter-in-context is recognized (see 96 Delimiter Recognition of [SGML])
Since CDATA declared content has a number of unfortunate interactions with processing techniques and tends to be used and implemented inconsistently HTML documents should not contain XMP nor LISTING elements -- the PRE tag is more expressive and more consistently supported
16
The LISTING element should be rendered so that at least 132 characters fit on a line The XMP element should be rendered so that at least 80 characters fit on a line but is otherwise identical to the LISTING element
Address ADDRESS
The ADDRESS element contains such information as address signature and authorship often at the beginning or end of the body of a document
Typically the ADDRESS element is rendered in an italic typeface and may be indented
Example of use
ltADDRESSgt
Kishore TechnologiesltBRgt
Beside TCSltBRgt
BangloreltBRgt
Mobile 7842634463
ltADDRESSgt
Block Quote BLOCKQUOTE
The BLOCKQUOTE element contains text quoted from another source
A typical rendering might be a slight extra left and right indent andor italic font The BLOCKQUOTE typically provides space above and below the quote
Single-font rendition may reflect the quotation style of Internet mail by putting a vertical line of graphic characters such as the greater than symbol (gt) in the left margin
Example of use
I think the play ends
ltBLOCKQUOTEgt
ltPgtSoft you now the fair Ophelia Nymph in thy orisons be all
my sins remembered
17
ltBLOCKQUOTEgt
but I am not sure
List Elements
HTML includes a number of list elements They may be used in combination for example a OL may be nested in an LI element of a UL
The COMPACT attribute suggests that a compact rendering be used
Unordered List UL LI
The UL represents a list of items -- typically rendered as a bulleted list
The content of a UL element is a sequence of LI elements For example
ltULgt
ltLIgtFirst list item
ltLIgtSecond list item
ltpgtsecond paragraph of second item
ltLIgtThird list item
ltULgt
Ordered List OL
The OL element represents an ordered list of items sorted by sequence or order of importance It is typically rendered as a numbered list
The content of a OL element is a sequence of LI elements For example
ltOLgt
ltLIgtClick the Web button to open URI window
ltLIgtEnter the URI number in the text field of the Open URI
window The Web document you specified is displayed
ltolgt
18
ltligtsubstep 1
ltligtsubstep 2
ltolgt
ltLIgtClick highlighted text to move from one link to another
ltOLgt
Directory List DIR
The DIR element is similar to the UL element It represents a list of short items typically up to 20 characters each Items in a directory list may be arranged in columns typically 24 characters wide
The content of a DIR element is a sequence of LI elements Nested block elements are not allowed in the content of DIR elements For example
ltDIRgt
ltLIgtA-HltLIgtI-M
ltLIgtM-RltLIgtS-Z
ltDIRgt
Menu List MENU
The MENU element is a list of items with typically one line per item The menu list style is typically more compact than the style of an unordered list
The content of a MENU element is a sequence of LI elements Nested block elements are not allowed in the content of MENU elements For example
ltMENUgt
ltLIgtFirst item in the list
ltLIgtSecond item in the list
ltLIgtThird item in the list
19
ltMENUgt
Definition List DL DT DD
A definition list is a list of terms and corresponding definitions Definition lists are typically formatted with the term flush-left and the definition formatted paragraph style indented after the term
The content of a DL element is a sequence of DT elements andor DD elements usually in pairs Multiple DT may be paired with a single DD element Documents should not contain multiple consecutive DD elements
Example of use
ltDLgt
ltDTgtTermltDDgtThis is the definition of the first term
ltDTgtTermltDDgtThis is the definition of the second term
ltDLgt
If the DT term does not fit in the DT column (typically one third of the display area) it may be extended across the page with the DD section moved to the next line or it may be wrapped onto successive lines of the left hand column
The optional COMPACT attribute suggests that a compact rendering be used because the list items are small andor the entire list is large
Unless the COMPACT attribute is present an HTML user agent may leave white space between successive DT DD pairs The COMPACT attribute may also reduce the width of the left-hand (DT) column
ltDL COMPACTgt
ltDTgtTermltDDgtThis is the first definition in compact format
ltDTgtTermltDDgtThis is the second definition in compact format
ltDLgt
Phrase Markup
Phrases may be marked up according to idiomatic usage typographic appearance or for use as hyperlink anchors
20
User agents must render highlighted phrases distinctly from plain text Additionally EM content must be rendered as distinct from STRONG content and B content must rendered as distinct from I content
Phrase elements may be nested within the content of other phrase elements however HTML user agents may render nested phrase elements indistinctly from non-nested elements
plain ltBgtbold ltIgtitalicltIgtltBgt may be rendered
the same as plain ltBgtbold ltBgtltIgtitalicltIgt
Idiomatic Elements
Phrases may be marked up to indicate certain idioms
Citation CITE
The CITE element is used to indicate the title of a book or other citation It is typically rendered as italics For example
He just couldnt get enough of ltcitegtThe Grapes of Wrathltcitegt
Code CODE
The CODE element indicates an example of code typically rendered in a mono-spaced font The CODE element is intended for short words or phrases of code the PRE block structuring element (section Preformatted Text PRE) is more appropriate for multiple-line listings For example
The expression ltcodegtx += 1ltcodegt
is short for ltcodegtx = x + 1ltcodegt
Emphasis EM
The EM element indicates an emphasized phrase typically rendered as italics For example
A singular subject ltemgtalwaysltemgt takes a singular verb
Keyboard KBD
The KBD element indicates text typed by a user typically rendered in a mono-spaced font This is commonly used in instruction manuals For example
21
Enter ltkbdgtFIND ITltkbdgt to search the database
Sample SAMP
The SAMP element indicates a sequence of literal characters typically rendered in a mono-spaced font For example
The only word containing the letters ltsampgtmtltsampgt is dreamt
Strong Emphasis STRONG
The STRONG element indicates strong emphasis typically rendered in bold For example
ltstronggtSTOPltstronggt or Ill say ltstronggtSTOPltstronggt again
Variable VAR
The VAR element indicates a placeholder variable typically rendered as italic For example
Type ltSAMPgthtml-check ltVARgtfileltVARgt | moreltSAMPgt
to check ltVARgtfileltVARgt for markup errors
Typographic Elements
Typographic elements are used to specify the format of marked text
Typical renderings for idiomatic elements may vary between user agents If a specific rendering is necessary -- for example when referring to a specific text attribute as in The italic parts are mandatory -- a typographic element can be used to ensure that the intended typography is used where possible
Bold B
The B element indicates bold text Where bold typography is unavailable an alternative representation may be used
Italic I
The I element indicates italic text Where italic typography is unavailable an alternative representation may be used
Teletype TT
22
The TT element indicates teletype (monospaced )text Where a teletype font is unavailable an alternative representation may be used
Anchor A
The A element indicates a hyperlink anchor (see section Hyperlinks) At least one of the NAME and HREF attributes should be present Attributes of the A element
HREF
gives the URI of the head anchor of a hyperlink
NAME
gives the name of the anchor and makes it available as a head of a hyperlink
TITLE
suggests a title for the destination resource --- advisory only The TITLE attribute may be used
for display prior to accessing the destination resource for example as a margin note or on a small box while the mouse is over the anchor or while the document is being loaded
for resources that do not include a title such as graphics plain text and Gopher menus for use as a window title
REL
The REL attribute gives the relationship(s) described by the hyperlink The value is a whitespace separated list of relationship names The semantics of link relationships are not specified in this document
REV
Same as the REL attribute but the semantics of the relationship are in the reverse direction A link from A to B with REL=X expresses the same relationship as a link from B to A with REV=X An anchor may have both REL and REV attributes
URN
specifies a preferred more persistent identifier for the head anchor of the hyperlink The syntax and semantics of the URN attribute are not yet specified
METHODS
23
specifies methods to be used in accessing the destination as a whitespace-separated list of names The set of applicable names is a function of the scheme of the URI in the HREF attribute For similar reasons as for the TITLE attribute it may be useful to include the information in advance in the link For example the HTML user agent may chose a different rendering as a function of the methods allowed for example something that is searchable may get a different icon
Line Break BR
The BR element specifies a line break between words (see section Characters Words and Paragraphs) For example
ltPgt Pease porridge hotltBRgt
Pease porridge coldltBRgt
Pease porridge in the potltBRgt
Nine days old
Horizontal Rule HR
The HR element is a divider between sections of text typically a full width horizontal rule or equivalent graphic For example
ltHRgt
ltADDRESSgtFebruary 8 1995 CERNltADDRESSgt
ltBODYgt
Image IMG
The IMG element refers to an image or icon via a hyperlink (see section Simultaneous Presentation of Image Resources)
HTML user agents may process the value of the ALT attribute as an alternative to processing the image resource indicated by the SRC attribute (22)
Attributes of the IMG element
ALIGN
Alignment of the image with respect to the text baseline
`TOP specifies that the top of the image aligns with the tallest item on the line containing the image
24
`MIDDLE specifies that the center of the image aligns with the baseline of the line containing the image
`BOTTOM specifies that the bottom of the image aligns with the baseline of the line containing the image
ALT
Text to use in place of the referenced image resource for example due to processing constraints or user preference
ISMAP
indicates an image map (see section Image Maps)
SRC
Specifies the URI of the image resource (23)
Examples of use
ltIMG SRC=trianglexbm ALT=Warninggt Be sure to read these instructions
lta href=httpmachinehtbinimagemapsamplegt
ltIMG SRC=samplexbm ISMAPgt
ltagt
Advantages
Easy to use Loose syntax (although being too flexible will not comply with standards) Supported on almost every browser if not all browsers Widely used established on almost every website if not all websites Very similar to XML syntax which is increasingly used for data storage Free - You need not buy any software Easy to learn amp code even for novice programmers
Disadvantages
It cannot produce dynamic output alone since it is a static language Sometimes the structuring of HTML documents is hard to grasp You have to keep up with deprecated tags and make sure not to use them Deprecated tags appear because another language that works with HTML has
replaced the original work of the tag thus the other language needs to be learned (most of the time it is CSS)
25
Security features offered by HTML are limited
Conclusion
HTML is used to build web sites and HTML5 improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements and how to recover from errors
Some of the new features in HTML5 are functions for embedding audio video graphics client-side data storage and interactive documents HTML5 also contains new elements like ltnavgt ltheadergt ltfootergt and ltfiguregt
References
httpenwikipediaorgwikiHTML httpwwww3schoolscomhtmldefaultasp httpwwwanswerscomtopichtml
- Definition of HTML
-
5
ltligtType your first list item For example Cakeltligt
ltligtType your second list item For example Popcornltligt
ltligtType your third list item For example Dove Barsltligt
ltligtType your fourth list item For example Tumsltligtltulgt
lth2gtType a title for a numbered list For example My Vacation Priorities lth2gt
ltpgtType a second short introduction ltpgt
ltolgt
ltligtType your first list item For example Disneyworldltligt
ltIigtType your second list item For example Hollywood ltligt
ltligtType your third list item For example Universal Studios ltligt
ltligtType your fourth list item For example Home ltligtltolgt
ltpgtType ldquoAuthored byrdquo and your name ltpgt
Now we will use the anchor tag ltagt to add a link to your sample Web page Links are also called hyperlinks hypertext or hot links You may link within a single document as well as linking to other ldquooutsiderdquo documents
You may want to add links within a page if your document becomes lengthy To do this you will use the anchor tag in two places
First add the following to the top of your page before the lth1gt tag lta name=ldquotoprdquogtltagt [Note Do not forget the quotation marks]
Then add the following to your page after the final ltpgt (the ldquoauthored byrdquo statement)
ltpgtGo to the lta href=ldquotoprdquogttopltagt of the pageltpgt
Whenever you put a URL inside an anchor tag you must enclose it within quotation marks Also donrsquot forget that the URL is case-sensitive
Insert the following sentence into your sample page below the numbered list (after the
6
ltolgt) to make a link to the visitorrsquos page on the University of Maryland Libraries website (You can use another site if you know the URL)
ltpgtMore information can be found in the University of Maryland Libraries
lta href=httpwwwlibumdeduvisitorshtmlgtInformation For Visitorsltagt web
pageltpgt
You are almost ready to view your new page in a web browser First be sure to include these important ending tags at the bottom of your page Type these tags before you try to display your page in Mozilla Firefox
ltbodygt
lthtmlgt
To save your file go to ldquofilerdquo and ldquosaverdquo in Notepad and save the file to your floppy disk [A] (or flash drive) Enter a filename being sure it is all lowercase without spaces and ends in html and choose ldquosave as typerdquo ndashAll files ()
Now we can add a link to your e-mail address Choose the line that reads
ltpgtType ldquoAuthored byrdquo and your name ltpgt and change the coding as follows
ltpgtAuthored by lta href=mailto[insert your e-mail addressumdedu here]gt your nameltagt ltpgt
Be sure to save your changes and view your creation in Firefox
Congratulations You now have a basic web page
Creating a Web Page Understanding and using Images
Now that you have created a basic web page it is helpful to understand how to incorporate images Here is an example of an image used on the University Libraries home page
7
This image is named ldquocataloggifrdquo Sample HTML code for this image could read
ltimg src=imageshomecataloggif alt=Catalog border=0 width=127 height=18gt
An image used on a Web page is a separate file on the Librariesrsquo server All information about the image is put inside the ltimggt tag The ltimggt tag stands alone it is not used in a pair An important thing to remember is that you have to include enough information within the ltimggt tag to enable the Web server to find your image
Where is the image located If the image is located in a different folder from your HTML file you will need to include that information in the URL In the above example the image is housed in the ldquohomerdquo subfolder of the ldquoimagesrdquo folder In the above example there will be no border around the image when it appears on a web page The ldquoALTrdquo text is what appears when you ldquohoverrdquo over the image with your mouse in Internet Explorer and also provides important information for people with disabilities who use software designed to help them access the Web It is also what is displayed when you have a broken link to an image or if you are using a text-only browser The text that goes with the alt attribute must be enclosed in quotation marks Think of your users when you are creating these alt attributes and choose descriptive words or phrases
A Word About Images
The IMG tag may be used to link to a number of different types of images Two common types of images you might add to your web page are
GIF = A frequently-used graphics format with small files which can be downloaded quickly
JPG or JPEG = Designed for compressing either full-color or gray-scale images of natural real-world scenes JPEGs work well on photographs naturalistic artwork and similar material not so well on lettering simple cartoons or line drawings
Now that we have the image saved on disk with our HTML document you can also align it in various places on your page Add another copy of the image aligned to the center of your page To do this insert this coding after the first graphic
ltpgtltcentergtltimg src=kickjpg border=ldquo0rdquo height=ldquo119rdquo width=ldquo121rdquo alt=ldquoKRISHNA
8
UNIVERSITYrdquogtltcentergtltpgt
Save your file and view it in Firefox
In addition to making text ldquohyperlinkrdquo to other documents you can also add a hypertext link to graphics on your pages which will allow you to ldquojumprdquo to another page or to another location within the same page To do this select one of the two graphics you inserted into your page Then revise the coding so that it reads as follows
lta href=httpkumca2010xtgemcomgtltimg src=kickjpg border=ldquo0rdquo
height=ldquo119rdquo width=ldquo121rdquo alt=ldquoKrishna universityrdquogtltagt
Once again save your file and view it in Firefox
Adding a Simple Table
Tables may look complicated at first but they will be easier to understand if you remember that a table in HTML is created row by row Type the tags as shown and follow the directions in italic type Use any spacing or indentation that makes sense to you but do not change the order of any of the tags Be sure to insert this table before the closing body and html tags on your page
lttablegt
lttrgt
ltthgt Heading for 1st column For example Nameltthgt ltthgt Heading for 2nd column For example Phone
Numberltthgtlttrgt
lttrgt
lttdgt Words in the first row first column For example kishorelttdgtlttdgt Words in the first row
second column For example X4-7096 lttdgtlttrgt
lttrgt
lttdgt Words in the second row first column For example vedalttdgt lttdgt Words in the
second row second column For example X4-7029lttdgt
9
lttrgt
lttablegt
Save your document and preview it in Firefox
Next well spread out the table by adding space in the cells This is done by specifying a number which the browser interprets as a number of pixels between the text and the cell border The HTML command for this is cellpadding Edit your table to read
lttable cellpadding=5gt
You can also change the amount of space between table cells ndash which is called cellspacing in HTML Both cellpadding and cellspacing commands can be used at the same time
lttable cellspacing=5 cellpadding=5gt
Once you have made this change save your file and preview it in Firefox
Congratulations You have now created a simple web page with graphics links and a table
Font Size
The ltfontgtltfontgt tag introduced by Netscape may be used to set the size of the font from 1 (smallest) to 7 (largest) with a size of 3 being the normal text size
Font Size = 1Font Size = 2Font Size = 3-- normal size text
Font Size = 4
Font Size = 5
Font Size = 6
Font Size = 7Remember that the actual size will depend on the computer font the user has selected for their web browser -- you are adjusting the size relative to the default font they have chosen
The format for the font size tag is
10
ltfont size=Ngtblah blah blahltfontgt where N=1 to 7
Document Structure
An HTML document is a tree of elements including a head and body headings paragraphs lists etc Form elements are discussed in section Forms
Document Element HTML
The HTML document element consists of a head and a body much like a memo or a mail message The head contains the title and optional elements The body is a text flow consisting of paragraphs lists and other elements
Head HEAD
The head of an HTML document is an unordered collection of information about the document For example
ltDOCTYPE HTML PUBLIC -IETFDTD HTML 20ENgt
ltHEADgt
ltTITLEgtIntroduction to HTMLltTITLEgt
ltHEADgt
Title TITLE
Every HTML document must contain a TITLE element
The title should identify the contents of the document in a global context A short title such as Introduction may be meaningless out of context A title such as Introduction to HTML Elements is more appropriate
A user agent may display the title of a document in a history list or as a label for the window displaying the document This differs from headings (section Headings H1 H6) which are typically displayed within the body text flow
Base Address BASE
11
The optional BASE element provides a base address for interpreting relative URLs when the document is read out of context (see section Hyperlinks) The value of the HREF attribute must be an absolute URI
Keyword Index ISINDEX
The ISINDEX element indicates that the user agent should allow the user to search an index by giving keywords See section Queries and Indexes for details
Link LINK
The LINK element represents a hyperlink (see section Hyperlinks) Any number of LINK elements may occur in the HEAD element of an HTML document It has the same attributes as the A element (see section Anchor A)
The LINK element is typically used to indicate authorship related indexes and glossaries older or more recent versions document hierarchy associated resources such as style sheets etc
Associated Meta-information META
The META element is an extensible container for use in identifying specialized document meta-information Meta-information has two main functions
to provide a means to discover that the data set exists and how it might be obtained or accessed and
to document the content quality and features of a data set indicating its fitness for use
Each META element specifies a namevalue pair If multiple META elements are provided with the same name their combined contents--concatenated as a comma-separated list--is the value associated with that name
HTTP servers may read the content of the document HEAD to generate header fields corresponding to any elements defining a value for the attribute HTTP-EQUIV (14)
Attributes of the META element
HTTP-EQUIV
Binds the element to an HTTP header field An HTTP server may use this information to process the document In particular it may include a header field in the responses to requests for this document the header name is taken from the HTTP-EQUIV attribute value
12
and the header value is taken from the value of the CONTENT attribute HTTP header names are not case sensitive
NAME Specifies the name of the namevalue pair If not present HTTP-EQUIV gives the name
CONTENT specifies the value of the namevalue pair
Examples
If the document contains
ltMETA HTTP-EQUIV=Expires
CONTENT=Tue 04 Dec 1993 212902 GMTgt
ltmeta http-equiv=Keywords CONTENT=Fredgt
ltMETA HTTP-EQUIV=Reply-to
content=fieldingicsuciedu (Roy Fielding)gt
ltMeta Http-equiv=Keywords CONTENT=Barneygt
then the server may include the following header fields
Expires Tue 04 Dec 1993 212902 GMT
Keywords Fred Barney
Reply-to fieldingicsuciedu (Roy Fielding)
as part of the HTTP response to a `GET or `HEAD request for that document
An HTTP server must not use the META element to form an HTTP response header unless the HTTP-EQUIV attribute is present
An HTTP server may disregard any META elements that specify information controlled by the HTTP server for example `Server `Date and `Last-modified
Next Id NEXTID
The NEXTID element is included for historical reasons only HTML documents should not contain NEXTID elements
13
The NEXTID element gives a hint for the name to use for a new A element when editing an HTML document It should be distinct from all NAME attribute values on A elements For example
ltNEXTID N=Z27gt
Body BODY
The BODY element contains the text flow of the document including headings paragraphs lists etc
For example
ltBODYgt
lth1gtImportant Stufflth1gt
ltpgtExplanation about important stuff
ltBODYgt
Headings H1 H6
The six heading elements H1 through H6 denote section headings Although the order and occurrence of headings is not constrained by the HTML DTD documents should not skip levels (for example from H1 to H3) as converting such documents to other representations is often problematic
Example of use
ltH1gtThis is a headingltH1gt
Here is some text
ltH2gtSecond level headingltH2gt
Here is some more text
Typical renderings are
H1
Bold very-large font centered One or two blank lines above and below
H2
14
Bold large font flush-left One or two blank lines above and below
H3
Italic large font slightly indented from the left margin One or two blank lines above and below
H4
Bold normal font indented more than H3 One blank line above and below
H5
Italic normal font indented as H4 One blank line above
H6
Bold indented same as normal text more than H5 One blank line above
Block Structuring Elements
Block structuring elements include paragraphs lists and block quotes They must not contain heading elements but they may contain phrase markup and in some cases they may be nested
Paragraph P
The P element indicates a paragraph The exact indentation leading space etc of a paragraph is not specified and may be a function of other tags style sheets etcTypically paragraphs are surrounded by a vertical space of one line or half a line The first line in a paragraph is indented in some cases
Example of use
ltH1gtThis Heading Precedes the ParagraphltH1gt
ltPgtThis is the text of the first paragraph
ltPgtThis is the text of the second paragraph Although you do not need to start paragraphs on new lines maintaining this convention facilitates document maintenanceltPgt
ltPgtThis is the text of a third paragraphltPgt
Preformatted Text PRE
15
The PRE element represents a character cell block of text and is suitable for text that has been formatted for a monospaced font
The PRE tag may be used with the optional WIDTH attribute The WIDTH attribute specifies the maximum number of characters for a line and allows the HTML user agent to select a suitable font and indentation
Within preformatted text
Line breaks within the text are rendered as a move to the beginning of the next line (15)
Anchor elements and phrase markup may be used (16)
Elements that define paragraph formatting (headings address etc) must not be used (17)
The horizontal tab character (code position 9 in the HTML document character set) must be interpreted as the smallest positive nonzero number of spaces which will leave the number of characters so far on the line as a multiple of 8 Documents should not contain tab characters as they are not supported consistently
Example of use
ltPREgt
Line 1
Line 2 is to the right of line 1 lta href=abcgtabcltagt
Line 3 aligns with line 2 lta href=defgtdefltagt
ltPREgt
Example and Listing XMP LISTING
The XMP and LISTING elements are similar to the PRE element but they have a different syntax Their content is declared as CDATA which means that no markup except the end-tag open delimiter-in-context is recognized (see 96 Delimiter Recognition of [SGML])
Since CDATA declared content has a number of unfortunate interactions with processing techniques and tends to be used and implemented inconsistently HTML documents should not contain XMP nor LISTING elements -- the PRE tag is more expressive and more consistently supported
16
The LISTING element should be rendered so that at least 132 characters fit on a line The XMP element should be rendered so that at least 80 characters fit on a line but is otherwise identical to the LISTING element
Address ADDRESS
The ADDRESS element contains such information as address signature and authorship often at the beginning or end of the body of a document
Typically the ADDRESS element is rendered in an italic typeface and may be indented
Example of use
ltADDRESSgt
Kishore TechnologiesltBRgt
Beside TCSltBRgt
BangloreltBRgt
Mobile 7842634463
ltADDRESSgt
Block Quote BLOCKQUOTE
The BLOCKQUOTE element contains text quoted from another source
A typical rendering might be a slight extra left and right indent andor italic font The BLOCKQUOTE typically provides space above and below the quote
Single-font rendition may reflect the quotation style of Internet mail by putting a vertical line of graphic characters such as the greater than symbol (gt) in the left margin
Example of use
I think the play ends
ltBLOCKQUOTEgt
ltPgtSoft you now the fair Ophelia Nymph in thy orisons be all
my sins remembered
17
ltBLOCKQUOTEgt
but I am not sure
List Elements
HTML includes a number of list elements They may be used in combination for example a OL may be nested in an LI element of a UL
The COMPACT attribute suggests that a compact rendering be used
Unordered List UL LI
The UL represents a list of items -- typically rendered as a bulleted list
The content of a UL element is a sequence of LI elements For example
ltULgt
ltLIgtFirst list item
ltLIgtSecond list item
ltpgtsecond paragraph of second item
ltLIgtThird list item
ltULgt
Ordered List OL
The OL element represents an ordered list of items sorted by sequence or order of importance It is typically rendered as a numbered list
The content of a OL element is a sequence of LI elements For example
ltOLgt
ltLIgtClick the Web button to open URI window
ltLIgtEnter the URI number in the text field of the Open URI
window The Web document you specified is displayed
ltolgt
18
ltligtsubstep 1
ltligtsubstep 2
ltolgt
ltLIgtClick highlighted text to move from one link to another
ltOLgt
Directory List DIR
The DIR element is similar to the UL element It represents a list of short items typically up to 20 characters each Items in a directory list may be arranged in columns typically 24 characters wide
The content of a DIR element is a sequence of LI elements Nested block elements are not allowed in the content of DIR elements For example
ltDIRgt
ltLIgtA-HltLIgtI-M
ltLIgtM-RltLIgtS-Z
ltDIRgt
Menu List MENU
The MENU element is a list of items with typically one line per item The menu list style is typically more compact than the style of an unordered list
The content of a MENU element is a sequence of LI elements Nested block elements are not allowed in the content of MENU elements For example
ltMENUgt
ltLIgtFirst item in the list
ltLIgtSecond item in the list
ltLIgtThird item in the list
19
ltMENUgt
Definition List DL DT DD
A definition list is a list of terms and corresponding definitions Definition lists are typically formatted with the term flush-left and the definition formatted paragraph style indented after the term
The content of a DL element is a sequence of DT elements andor DD elements usually in pairs Multiple DT may be paired with a single DD element Documents should not contain multiple consecutive DD elements
Example of use
ltDLgt
ltDTgtTermltDDgtThis is the definition of the first term
ltDTgtTermltDDgtThis is the definition of the second term
ltDLgt
If the DT term does not fit in the DT column (typically one third of the display area) it may be extended across the page with the DD section moved to the next line or it may be wrapped onto successive lines of the left hand column
The optional COMPACT attribute suggests that a compact rendering be used because the list items are small andor the entire list is large
Unless the COMPACT attribute is present an HTML user agent may leave white space between successive DT DD pairs The COMPACT attribute may also reduce the width of the left-hand (DT) column
ltDL COMPACTgt
ltDTgtTermltDDgtThis is the first definition in compact format
ltDTgtTermltDDgtThis is the second definition in compact format
ltDLgt
Phrase Markup
Phrases may be marked up according to idiomatic usage typographic appearance or for use as hyperlink anchors
20
User agents must render highlighted phrases distinctly from plain text Additionally EM content must be rendered as distinct from STRONG content and B content must rendered as distinct from I content
Phrase elements may be nested within the content of other phrase elements however HTML user agents may render nested phrase elements indistinctly from non-nested elements
plain ltBgtbold ltIgtitalicltIgtltBgt may be rendered
the same as plain ltBgtbold ltBgtltIgtitalicltIgt
Idiomatic Elements
Phrases may be marked up to indicate certain idioms
Citation CITE
The CITE element is used to indicate the title of a book or other citation It is typically rendered as italics For example
He just couldnt get enough of ltcitegtThe Grapes of Wrathltcitegt
Code CODE
The CODE element indicates an example of code typically rendered in a mono-spaced font The CODE element is intended for short words or phrases of code the PRE block structuring element (section Preformatted Text PRE) is more appropriate for multiple-line listings For example
The expression ltcodegtx += 1ltcodegt
is short for ltcodegtx = x + 1ltcodegt
Emphasis EM
The EM element indicates an emphasized phrase typically rendered as italics For example
A singular subject ltemgtalwaysltemgt takes a singular verb
Keyboard KBD
The KBD element indicates text typed by a user typically rendered in a mono-spaced font This is commonly used in instruction manuals For example
21
Enter ltkbdgtFIND ITltkbdgt to search the database
Sample SAMP
The SAMP element indicates a sequence of literal characters typically rendered in a mono-spaced font For example
The only word containing the letters ltsampgtmtltsampgt is dreamt
Strong Emphasis STRONG
The STRONG element indicates strong emphasis typically rendered in bold For example
ltstronggtSTOPltstronggt or Ill say ltstronggtSTOPltstronggt again
Variable VAR
The VAR element indicates a placeholder variable typically rendered as italic For example
Type ltSAMPgthtml-check ltVARgtfileltVARgt | moreltSAMPgt
to check ltVARgtfileltVARgt for markup errors
Typographic Elements
Typographic elements are used to specify the format of marked text
Typical renderings for idiomatic elements may vary between user agents If a specific rendering is necessary -- for example when referring to a specific text attribute as in The italic parts are mandatory -- a typographic element can be used to ensure that the intended typography is used where possible
Bold B
The B element indicates bold text Where bold typography is unavailable an alternative representation may be used
Italic I
The I element indicates italic text Where italic typography is unavailable an alternative representation may be used
Teletype TT
22
The TT element indicates teletype (monospaced )text Where a teletype font is unavailable an alternative representation may be used
Anchor A
The A element indicates a hyperlink anchor (see section Hyperlinks) At least one of the NAME and HREF attributes should be present Attributes of the A element
HREF
gives the URI of the head anchor of a hyperlink
NAME
gives the name of the anchor and makes it available as a head of a hyperlink
TITLE
suggests a title for the destination resource --- advisory only The TITLE attribute may be used
for display prior to accessing the destination resource for example as a margin note or on a small box while the mouse is over the anchor or while the document is being loaded
for resources that do not include a title such as graphics plain text and Gopher menus for use as a window title
REL
The REL attribute gives the relationship(s) described by the hyperlink The value is a whitespace separated list of relationship names The semantics of link relationships are not specified in this document
REV
Same as the REL attribute but the semantics of the relationship are in the reverse direction A link from A to B with REL=X expresses the same relationship as a link from B to A with REV=X An anchor may have both REL and REV attributes
URN
specifies a preferred more persistent identifier for the head anchor of the hyperlink The syntax and semantics of the URN attribute are not yet specified
METHODS
23
specifies methods to be used in accessing the destination as a whitespace-separated list of names The set of applicable names is a function of the scheme of the URI in the HREF attribute For similar reasons as for the TITLE attribute it may be useful to include the information in advance in the link For example the HTML user agent may chose a different rendering as a function of the methods allowed for example something that is searchable may get a different icon
Line Break BR
The BR element specifies a line break between words (see section Characters Words and Paragraphs) For example
ltPgt Pease porridge hotltBRgt
Pease porridge coldltBRgt
Pease porridge in the potltBRgt
Nine days old
Horizontal Rule HR
The HR element is a divider between sections of text typically a full width horizontal rule or equivalent graphic For example
ltHRgt
ltADDRESSgtFebruary 8 1995 CERNltADDRESSgt
ltBODYgt
Image IMG
The IMG element refers to an image or icon via a hyperlink (see section Simultaneous Presentation of Image Resources)
HTML user agents may process the value of the ALT attribute as an alternative to processing the image resource indicated by the SRC attribute (22)
Attributes of the IMG element
ALIGN
Alignment of the image with respect to the text baseline
`TOP specifies that the top of the image aligns with the tallest item on the line containing the image
24
`MIDDLE specifies that the center of the image aligns with the baseline of the line containing the image
`BOTTOM specifies that the bottom of the image aligns with the baseline of the line containing the image
ALT
Text to use in place of the referenced image resource for example due to processing constraints or user preference
ISMAP
indicates an image map (see section Image Maps)
SRC
Specifies the URI of the image resource (23)
Examples of use
ltIMG SRC=trianglexbm ALT=Warninggt Be sure to read these instructions
lta href=httpmachinehtbinimagemapsamplegt
ltIMG SRC=samplexbm ISMAPgt
ltagt
Advantages
Easy to use Loose syntax (although being too flexible will not comply with standards) Supported on almost every browser if not all browsers Widely used established on almost every website if not all websites Very similar to XML syntax which is increasingly used for data storage Free - You need not buy any software Easy to learn amp code even for novice programmers
Disadvantages
It cannot produce dynamic output alone since it is a static language Sometimes the structuring of HTML documents is hard to grasp You have to keep up with deprecated tags and make sure not to use them Deprecated tags appear because another language that works with HTML has
replaced the original work of the tag thus the other language needs to be learned (most of the time it is CSS)
25
Security features offered by HTML are limited
Conclusion
HTML is used to build web sites and HTML5 improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements and how to recover from errors
Some of the new features in HTML5 are functions for embedding audio video graphics client-side data storage and interactive documents HTML5 also contains new elements like ltnavgt ltheadergt ltfootergt and ltfiguregt
References
httpenwikipediaorgwikiHTML httpwwww3schoolscomhtmldefaultasp httpwwwanswerscomtopichtml
- Definition of HTML
-
6
ltolgt) to make a link to the visitorrsquos page on the University of Maryland Libraries website (You can use another site if you know the URL)
ltpgtMore information can be found in the University of Maryland Libraries
lta href=httpwwwlibumdeduvisitorshtmlgtInformation For Visitorsltagt web
pageltpgt
You are almost ready to view your new page in a web browser First be sure to include these important ending tags at the bottom of your page Type these tags before you try to display your page in Mozilla Firefox
ltbodygt
lthtmlgt
To save your file go to ldquofilerdquo and ldquosaverdquo in Notepad and save the file to your floppy disk [A] (or flash drive) Enter a filename being sure it is all lowercase without spaces and ends in html and choose ldquosave as typerdquo ndashAll files ()
Now we can add a link to your e-mail address Choose the line that reads
ltpgtType ldquoAuthored byrdquo and your name ltpgt and change the coding as follows
ltpgtAuthored by lta href=mailto[insert your e-mail addressumdedu here]gt your nameltagt ltpgt
Be sure to save your changes and view your creation in Firefox
Congratulations You now have a basic web page
Creating a Web Page Understanding and using Images
Now that you have created a basic web page it is helpful to understand how to incorporate images Here is an example of an image used on the University Libraries home page
7
This image is named ldquocataloggifrdquo Sample HTML code for this image could read
ltimg src=imageshomecataloggif alt=Catalog border=0 width=127 height=18gt
An image used on a Web page is a separate file on the Librariesrsquo server All information about the image is put inside the ltimggt tag The ltimggt tag stands alone it is not used in a pair An important thing to remember is that you have to include enough information within the ltimggt tag to enable the Web server to find your image
Where is the image located If the image is located in a different folder from your HTML file you will need to include that information in the URL In the above example the image is housed in the ldquohomerdquo subfolder of the ldquoimagesrdquo folder In the above example there will be no border around the image when it appears on a web page The ldquoALTrdquo text is what appears when you ldquohoverrdquo over the image with your mouse in Internet Explorer and also provides important information for people with disabilities who use software designed to help them access the Web It is also what is displayed when you have a broken link to an image or if you are using a text-only browser The text that goes with the alt attribute must be enclosed in quotation marks Think of your users when you are creating these alt attributes and choose descriptive words or phrases
A Word About Images
The IMG tag may be used to link to a number of different types of images Two common types of images you might add to your web page are
GIF = A frequently-used graphics format with small files which can be downloaded quickly
JPG or JPEG = Designed for compressing either full-color or gray-scale images of natural real-world scenes JPEGs work well on photographs naturalistic artwork and similar material not so well on lettering simple cartoons or line drawings
Now that we have the image saved on disk with our HTML document you can also align it in various places on your page Add another copy of the image aligned to the center of your page To do this insert this coding after the first graphic
ltpgtltcentergtltimg src=kickjpg border=ldquo0rdquo height=ldquo119rdquo width=ldquo121rdquo alt=ldquoKRISHNA
8
UNIVERSITYrdquogtltcentergtltpgt
Save your file and view it in Firefox
In addition to making text ldquohyperlinkrdquo to other documents you can also add a hypertext link to graphics on your pages which will allow you to ldquojumprdquo to another page or to another location within the same page To do this select one of the two graphics you inserted into your page Then revise the coding so that it reads as follows
lta href=httpkumca2010xtgemcomgtltimg src=kickjpg border=ldquo0rdquo
height=ldquo119rdquo width=ldquo121rdquo alt=ldquoKrishna universityrdquogtltagt
Once again save your file and view it in Firefox
Adding a Simple Table
Tables may look complicated at first but they will be easier to understand if you remember that a table in HTML is created row by row Type the tags as shown and follow the directions in italic type Use any spacing or indentation that makes sense to you but do not change the order of any of the tags Be sure to insert this table before the closing body and html tags on your page
lttablegt
lttrgt
ltthgt Heading for 1st column For example Nameltthgt ltthgt Heading for 2nd column For example Phone
Numberltthgtlttrgt
lttrgt
lttdgt Words in the first row first column For example kishorelttdgtlttdgt Words in the first row
second column For example X4-7096 lttdgtlttrgt
lttrgt
lttdgt Words in the second row first column For example vedalttdgt lttdgt Words in the
second row second column For example X4-7029lttdgt
9
lttrgt
lttablegt
Save your document and preview it in Firefox
Next well spread out the table by adding space in the cells This is done by specifying a number which the browser interprets as a number of pixels between the text and the cell border The HTML command for this is cellpadding Edit your table to read
lttable cellpadding=5gt
You can also change the amount of space between table cells ndash which is called cellspacing in HTML Both cellpadding and cellspacing commands can be used at the same time
lttable cellspacing=5 cellpadding=5gt
Once you have made this change save your file and preview it in Firefox
Congratulations You have now created a simple web page with graphics links and a table
Font Size
The ltfontgtltfontgt tag introduced by Netscape may be used to set the size of the font from 1 (smallest) to 7 (largest) with a size of 3 being the normal text size
Font Size = 1Font Size = 2Font Size = 3-- normal size text
Font Size = 4
Font Size = 5
Font Size = 6
Font Size = 7Remember that the actual size will depend on the computer font the user has selected for their web browser -- you are adjusting the size relative to the default font they have chosen
The format for the font size tag is
10
ltfont size=Ngtblah blah blahltfontgt where N=1 to 7
Document Structure
An HTML document is a tree of elements including a head and body headings paragraphs lists etc Form elements are discussed in section Forms
Document Element HTML
The HTML document element consists of a head and a body much like a memo or a mail message The head contains the title and optional elements The body is a text flow consisting of paragraphs lists and other elements
Head HEAD
The head of an HTML document is an unordered collection of information about the document For example
ltDOCTYPE HTML PUBLIC -IETFDTD HTML 20ENgt
ltHEADgt
ltTITLEgtIntroduction to HTMLltTITLEgt
ltHEADgt
Title TITLE
Every HTML document must contain a TITLE element
The title should identify the contents of the document in a global context A short title such as Introduction may be meaningless out of context A title such as Introduction to HTML Elements is more appropriate
A user agent may display the title of a document in a history list or as a label for the window displaying the document This differs from headings (section Headings H1 H6) which are typically displayed within the body text flow
Base Address BASE
11
The optional BASE element provides a base address for interpreting relative URLs when the document is read out of context (see section Hyperlinks) The value of the HREF attribute must be an absolute URI
Keyword Index ISINDEX
The ISINDEX element indicates that the user agent should allow the user to search an index by giving keywords See section Queries and Indexes for details
Link LINK
The LINK element represents a hyperlink (see section Hyperlinks) Any number of LINK elements may occur in the HEAD element of an HTML document It has the same attributes as the A element (see section Anchor A)
The LINK element is typically used to indicate authorship related indexes and glossaries older or more recent versions document hierarchy associated resources such as style sheets etc
Associated Meta-information META
The META element is an extensible container for use in identifying specialized document meta-information Meta-information has two main functions
to provide a means to discover that the data set exists and how it might be obtained or accessed and
to document the content quality and features of a data set indicating its fitness for use
Each META element specifies a namevalue pair If multiple META elements are provided with the same name their combined contents--concatenated as a comma-separated list--is the value associated with that name
HTTP servers may read the content of the document HEAD to generate header fields corresponding to any elements defining a value for the attribute HTTP-EQUIV (14)
Attributes of the META element
HTTP-EQUIV
Binds the element to an HTTP header field An HTTP server may use this information to process the document In particular it may include a header field in the responses to requests for this document the header name is taken from the HTTP-EQUIV attribute value
12
and the header value is taken from the value of the CONTENT attribute HTTP header names are not case sensitive
NAME Specifies the name of the namevalue pair If not present HTTP-EQUIV gives the name
CONTENT specifies the value of the namevalue pair
Examples
If the document contains
ltMETA HTTP-EQUIV=Expires
CONTENT=Tue 04 Dec 1993 212902 GMTgt
ltmeta http-equiv=Keywords CONTENT=Fredgt
ltMETA HTTP-EQUIV=Reply-to
content=fieldingicsuciedu (Roy Fielding)gt
ltMeta Http-equiv=Keywords CONTENT=Barneygt
then the server may include the following header fields
Expires Tue 04 Dec 1993 212902 GMT
Keywords Fred Barney
Reply-to fieldingicsuciedu (Roy Fielding)
as part of the HTTP response to a `GET or `HEAD request for that document
An HTTP server must not use the META element to form an HTTP response header unless the HTTP-EQUIV attribute is present
An HTTP server may disregard any META elements that specify information controlled by the HTTP server for example `Server `Date and `Last-modified
Next Id NEXTID
The NEXTID element is included for historical reasons only HTML documents should not contain NEXTID elements
13
The NEXTID element gives a hint for the name to use for a new A element when editing an HTML document It should be distinct from all NAME attribute values on A elements For example
ltNEXTID N=Z27gt
Body BODY
The BODY element contains the text flow of the document including headings paragraphs lists etc
For example
ltBODYgt
lth1gtImportant Stufflth1gt
ltpgtExplanation about important stuff
ltBODYgt
Headings H1 H6
The six heading elements H1 through H6 denote section headings Although the order and occurrence of headings is not constrained by the HTML DTD documents should not skip levels (for example from H1 to H3) as converting such documents to other representations is often problematic
Example of use
ltH1gtThis is a headingltH1gt
Here is some text
ltH2gtSecond level headingltH2gt
Here is some more text
Typical renderings are
H1
Bold very-large font centered One or two blank lines above and below
H2
14
Bold large font flush-left One or two blank lines above and below
H3
Italic large font slightly indented from the left margin One or two blank lines above and below
H4
Bold normal font indented more than H3 One blank line above and below
H5
Italic normal font indented as H4 One blank line above
H6
Bold indented same as normal text more than H5 One blank line above
Block Structuring Elements
Block structuring elements include paragraphs lists and block quotes They must not contain heading elements but they may contain phrase markup and in some cases they may be nested
Paragraph P
The P element indicates a paragraph The exact indentation leading space etc of a paragraph is not specified and may be a function of other tags style sheets etcTypically paragraphs are surrounded by a vertical space of one line or half a line The first line in a paragraph is indented in some cases
Example of use
ltH1gtThis Heading Precedes the ParagraphltH1gt
ltPgtThis is the text of the first paragraph
ltPgtThis is the text of the second paragraph Although you do not need to start paragraphs on new lines maintaining this convention facilitates document maintenanceltPgt
ltPgtThis is the text of a third paragraphltPgt
Preformatted Text PRE
15
The PRE element represents a character cell block of text and is suitable for text that has been formatted for a monospaced font
The PRE tag may be used with the optional WIDTH attribute The WIDTH attribute specifies the maximum number of characters for a line and allows the HTML user agent to select a suitable font and indentation
Within preformatted text
Line breaks within the text are rendered as a move to the beginning of the next line (15)
Anchor elements and phrase markup may be used (16)
Elements that define paragraph formatting (headings address etc) must not be used (17)
The horizontal tab character (code position 9 in the HTML document character set) must be interpreted as the smallest positive nonzero number of spaces which will leave the number of characters so far on the line as a multiple of 8 Documents should not contain tab characters as they are not supported consistently
Example of use
ltPREgt
Line 1
Line 2 is to the right of line 1 lta href=abcgtabcltagt
Line 3 aligns with line 2 lta href=defgtdefltagt
ltPREgt
Example and Listing XMP LISTING
The XMP and LISTING elements are similar to the PRE element but they have a different syntax Their content is declared as CDATA which means that no markup except the end-tag open delimiter-in-context is recognized (see 96 Delimiter Recognition of [SGML])
Since CDATA declared content has a number of unfortunate interactions with processing techniques and tends to be used and implemented inconsistently HTML documents should not contain XMP nor LISTING elements -- the PRE tag is more expressive and more consistently supported
16
The LISTING element should be rendered so that at least 132 characters fit on a line The XMP element should be rendered so that at least 80 characters fit on a line but is otherwise identical to the LISTING element
Address ADDRESS
The ADDRESS element contains such information as address signature and authorship often at the beginning or end of the body of a document
Typically the ADDRESS element is rendered in an italic typeface and may be indented
Example of use
ltADDRESSgt
Kishore TechnologiesltBRgt
Beside TCSltBRgt
BangloreltBRgt
Mobile 7842634463
ltADDRESSgt
Block Quote BLOCKQUOTE
The BLOCKQUOTE element contains text quoted from another source
A typical rendering might be a slight extra left and right indent andor italic font The BLOCKQUOTE typically provides space above and below the quote
Single-font rendition may reflect the quotation style of Internet mail by putting a vertical line of graphic characters such as the greater than symbol (gt) in the left margin
Example of use
I think the play ends
ltBLOCKQUOTEgt
ltPgtSoft you now the fair Ophelia Nymph in thy orisons be all
my sins remembered
17
ltBLOCKQUOTEgt
but I am not sure
List Elements
HTML includes a number of list elements They may be used in combination for example a OL may be nested in an LI element of a UL
The COMPACT attribute suggests that a compact rendering be used
Unordered List UL LI
The UL represents a list of items -- typically rendered as a bulleted list
The content of a UL element is a sequence of LI elements For example
ltULgt
ltLIgtFirst list item
ltLIgtSecond list item
ltpgtsecond paragraph of second item
ltLIgtThird list item
ltULgt
Ordered List OL
The OL element represents an ordered list of items sorted by sequence or order of importance It is typically rendered as a numbered list
The content of a OL element is a sequence of LI elements For example
ltOLgt
ltLIgtClick the Web button to open URI window
ltLIgtEnter the URI number in the text field of the Open URI
window The Web document you specified is displayed
ltolgt
18
ltligtsubstep 1
ltligtsubstep 2
ltolgt
ltLIgtClick highlighted text to move from one link to another
ltOLgt
Directory List DIR
The DIR element is similar to the UL element It represents a list of short items typically up to 20 characters each Items in a directory list may be arranged in columns typically 24 characters wide
The content of a DIR element is a sequence of LI elements Nested block elements are not allowed in the content of DIR elements For example
ltDIRgt
ltLIgtA-HltLIgtI-M
ltLIgtM-RltLIgtS-Z
ltDIRgt
Menu List MENU
The MENU element is a list of items with typically one line per item The menu list style is typically more compact than the style of an unordered list
The content of a MENU element is a sequence of LI elements Nested block elements are not allowed in the content of MENU elements For example
ltMENUgt
ltLIgtFirst item in the list
ltLIgtSecond item in the list
ltLIgtThird item in the list
19
ltMENUgt
Definition List DL DT DD
A definition list is a list of terms and corresponding definitions Definition lists are typically formatted with the term flush-left and the definition formatted paragraph style indented after the term
The content of a DL element is a sequence of DT elements andor DD elements usually in pairs Multiple DT may be paired with a single DD element Documents should not contain multiple consecutive DD elements
Example of use
ltDLgt
ltDTgtTermltDDgtThis is the definition of the first term
ltDTgtTermltDDgtThis is the definition of the second term
ltDLgt
If the DT term does not fit in the DT column (typically one third of the display area) it may be extended across the page with the DD section moved to the next line or it may be wrapped onto successive lines of the left hand column
The optional COMPACT attribute suggests that a compact rendering be used because the list items are small andor the entire list is large
Unless the COMPACT attribute is present an HTML user agent may leave white space between successive DT DD pairs The COMPACT attribute may also reduce the width of the left-hand (DT) column
ltDL COMPACTgt
ltDTgtTermltDDgtThis is the first definition in compact format
ltDTgtTermltDDgtThis is the second definition in compact format
ltDLgt
Phrase Markup
Phrases may be marked up according to idiomatic usage typographic appearance or for use as hyperlink anchors
20
User agents must render highlighted phrases distinctly from plain text Additionally EM content must be rendered as distinct from STRONG content and B content must rendered as distinct from I content
Phrase elements may be nested within the content of other phrase elements however HTML user agents may render nested phrase elements indistinctly from non-nested elements
plain ltBgtbold ltIgtitalicltIgtltBgt may be rendered
the same as plain ltBgtbold ltBgtltIgtitalicltIgt
Idiomatic Elements
Phrases may be marked up to indicate certain idioms
Citation CITE
The CITE element is used to indicate the title of a book or other citation It is typically rendered as italics For example
He just couldnt get enough of ltcitegtThe Grapes of Wrathltcitegt
Code CODE
The CODE element indicates an example of code typically rendered in a mono-spaced font The CODE element is intended for short words or phrases of code the PRE block structuring element (section Preformatted Text PRE) is more appropriate for multiple-line listings For example
The expression ltcodegtx += 1ltcodegt
is short for ltcodegtx = x + 1ltcodegt
Emphasis EM
The EM element indicates an emphasized phrase typically rendered as italics For example
A singular subject ltemgtalwaysltemgt takes a singular verb
Keyboard KBD
The KBD element indicates text typed by a user typically rendered in a mono-spaced font This is commonly used in instruction manuals For example
21
Enter ltkbdgtFIND ITltkbdgt to search the database
Sample SAMP
The SAMP element indicates a sequence of literal characters typically rendered in a mono-spaced font For example
The only word containing the letters ltsampgtmtltsampgt is dreamt
Strong Emphasis STRONG
The STRONG element indicates strong emphasis typically rendered in bold For example
ltstronggtSTOPltstronggt or Ill say ltstronggtSTOPltstronggt again
Variable VAR
The VAR element indicates a placeholder variable typically rendered as italic For example
Type ltSAMPgthtml-check ltVARgtfileltVARgt | moreltSAMPgt
to check ltVARgtfileltVARgt for markup errors
Typographic Elements
Typographic elements are used to specify the format of marked text
Typical renderings for idiomatic elements may vary between user agents If a specific rendering is necessary -- for example when referring to a specific text attribute as in The italic parts are mandatory -- a typographic element can be used to ensure that the intended typography is used where possible
Bold B
The B element indicates bold text Where bold typography is unavailable an alternative representation may be used
Italic I
The I element indicates italic text Where italic typography is unavailable an alternative representation may be used
Teletype TT
22
The TT element indicates teletype (monospaced )text Where a teletype font is unavailable an alternative representation may be used
Anchor A
The A element indicates a hyperlink anchor (see section Hyperlinks) At least one of the NAME and HREF attributes should be present Attributes of the A element
HREF
gives the URI of the head anchor of a hyperlink
NAME
gives the name of the anchor and makes it available as a head of a hyperlink
TITLE
suggests a title for the destination resource --- advisory only The TITLE attribute may be used
for display prior to accessing the destination resource for example as a margin note or on a small box while the mouse is over the anchor or while the document is being loaded
for resources that do not include a title such as graphics plain text and Gopher menus for use as a window title
REL
The REL attribute gives the relationship(s) described by the hyperlink The value is a whitespace separated list of relationship names The semantics of link relationships are not specified in this document
REV
Same as the REL attribute but the semantics of the relationship are in the reverse direction A link from A to B with REL=X expresses the same relationship as a link from B to A with REV=X An anchor may have both REL and REV attributes
URN
specifies a preferred more persistent identifier for the head anchor of the hyperlink The syntax and semantics of the URN attribute are not yet specified
METHODS
23
specifies methods to be used in accessing the destination as a whitespace-separated list of names The set of applicable names is a function of the scheme of the URI in the HREF attribute For similar reasons as for the TITLE attribute it may be useful to include the information in advance in the link For example the HTML user agent may chose a different rendering as a function of the methods allowed for example something that is searchable may get a different icon
Line Break BR
The BR element specifies a line break between words (see section Characters Words and Paragraphs) For example
ltPgt Pease porridge hotltBRgt
Pease porridge coldltBRgt
Pease porridge in the potltBRgt
Nine days old
Horizontal Rule HR
The HR element is a divider between sections of text typically a full width horizontal rule or equivalent graphic For example
ltHRgt
ltADDRESSgtFebruary 8 1995 CERNltADDRESSgt
ltBODYgt
Image IMG
The IMG element refers to an image or icon via a hyperlink (see section Simultaneous Presentation of Image Resources)
HTML user agents may process the value of the ALT attribute as an alternative to processing the image resource indicated by the SRC attribute (22)
Attributes of the IMG element
ALIGN
Alignment of the image with respect to the text baseline
`TOP specifies that the top of the image aligns with the tallest item on the line containing the image
24
`MIDDLE specifies that the center of the image aligns with the baseline of the line containing the image
`BOTTOM specifies that the bottom of the image aligns with the baseline of the line containing the image
ALT
Text to use in place of the referenced image resource for example due to processing constraints or user preference
ISMAP
indicates an image map (see section Image Maps)
SRC
Specifies the URI of the image resource (23)
Examples of use
ltIMG SRC=trianglexbm ALT=Warninggt Be sure to read these instructions
lta href=httpmachinehtbinimagemapsamplegt
ltIMG SRC=samplexbm ISMAPgt
ltagt
Advantages
Easy to use Loose syntax (although being too flexible will not comply with standards) Supported on almost every browser if not all browsers Widely used established on almost every website if not all websites Very similar to XML syntax which is increasingly used for data storage Free - You need not buy any software Easy to learn amp code even for novice programmers
Disadvantages
It cannot produce dynamic output alone since it is a static language Sometimes the structuring of HTML documents is hard to grasp You have to keep up with deprecated tags and make sure not to use them Deprecated tags appear because another language that works with HTML has
replaced the original work of the tag thus the other language needs to be learned (most of the time it is CSS)
25
Security features offered by HTML are limited
Conclusion
HTML is used to build web sites and HTML5 improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements and how to recover from errors
Some of the new features in HTML5 are functions for embedding audio video graphics client-side data storage and interactive documents HTML5 also contains new elements like ltnavgt ltheadergt ltfootergt and ltfiguregt
References
httpenwikipediaorgwikiHTML httpwwww3schoolscomhtmldefaultasp httpwwwanswerscomtopichtml
- Definition of HTML
-
7
This image is named ldquocataloggifrdquo Sample HTML code for this image could read
ltimg src=imageshomecataloggif alt=Catalog border=0 width=127 height=18gt
An image used on a Web page is a separate file on the Librariesrsquo server All information about the image is put inside the ltimggt tag The ltimggt tag stands alone it is not used in a pair An important thing to remember is that you have to include enough information within the ltimggt tag to enable the Web server to find your image
Where is the image located If the image is located in a different folder from your HTML file you will need to include that information in the URL In the above example the image is housed in the ldquohomerdquo subfolder of the ldquoimagesrdquo folder In the above example there will be no border around the image when it appears on a web page The ldquoALTrdquo text is what appears when you ldquohoverrdquo over the image with your mouse in Internet Explorer and also provides important information for people with disabilities who use software designed to help them access the Web It is also what is displayed when you have a broken link to an image or if you are using a text-only browser The text that goes with the alt attribute must be enclosed in quotation marks Think of your users when you are creating these alt attributes and choose descriptive words or phrases
A Word About Images
The IMG tag may be used to link to a number of different types of images Two common types of images you might add to your web page are
GIF = A frequently-used graphics format with small files which can be downloaded quickly
JPG or JPEG = Designed for compressing either full-color or gray-scale images of natural real-world scenes JPEGs work well on photographs naturalistic artwork and similar material not so well on lettering simple cartoons or line drawings
Now that we have the image saved on disk with our HTML document you can also align it in various places on your page Add another copy of the image aligned to the center of your page To do this insert this coding after the first graphic
ltpgtltcentergtltimg src=kickjpg border=ldquo0rdquo height=ldquo119rdquo width=ldquo121rdquo alt=ldquoKRISHNA
8
UNIVERSITYrdquogtltcentergtltpgt
Save your file and view it in Firefox
In addition to making text ldquohyperlinkrdquo to other documents you can also add a hypertext link to graphics on your pages which will allow you to ldquojumprdquo to another page or to another location within the same page To do this select one of the two graphics you inserted into your page Then revise the coding so that it reads as follows
lta href=httpkumca2010xtgemcomgtltimg src=kickjpg border=ldquo0rdquo
height=ldquo119rdquo width=ldquo121rdquo alt=ldquoKrishna universityrdquogtltagt
Once again save your file and view it in Firefox
Adding a Simple Table
Tables may look complicated at first but they will be easier to understand if you remember that a table in HTML is created row by row Type the tags as shown and follow the directions in italic type Use any spacing or indentation that makes sense to you but do not change the order of any of the tags Be sure to insert this table before the closing body and html tags on your page
lttablegt
lttrgt
ltthgt Heading for 1st column For example Nameltthgt ltthgt Heading for 2nd column For example Phone
Numberltthgtlttrgt
lttrgt
lttdgt Words in the first row first column For example kishorelttdgtlttdgt Words in the first row
second column For example X4-7096 lttdgtlttrgt
lttrgt
lttdgt Words in the second row first column For example vedalttdgt lttdgt Words in the
second row second column For example X4-7029lttdgt
9
lttrgt
lttablegt
Save your document and preview it in Firefox
Next well spread out the table by adding space in the cells This is done by specifying a number which the browser interprets as a number of pixels between the text and the cell border The HTML command for this is cellpadding Edit your table to read
lttable cellpadding=5gt
You can also change the amount of space between table cells ndash which is called cellspacing in HTML Both cellpadding and cellspacing commands can be used at the same time
lttable cellspacing=5 cellpadding=5gt
Once you have made this change save your file and preview it in Firefox
Congratulations You have now created a simple web page with graphics links and a table
Font Size
The ltfontgtltfontgt tag introduced by Netscape may be used to set the size of the font from 1 (smallest) to 7 (largest) with a size of 3 being the normal text size
Font Size = 1Font Size = 2Font Size = 3-- normal size text
Font Size = 4
Font Size = 5
Font Size = 6
Font Size = 7Remember that the actual size will depend on the computer font the user has selected for their web browser -- you are adjusting the size relative to the default font they have chosen
The format for the font size tag is
10
ltfont size=Ngtblah blah blahltfontgt where N=1 to 7
Document Structure
An HTML document is a tree of elements including a head and body headings paragraphs lists etc Form elements are discussed in section Forms
Document Element HTML
The HTML document element consists of a head and a body much like a memo or a mail message The head contains the title and optional elements The body is a text flow consisting of paragraphs lists and other elements
Head HEAD
The head of an HTML document is an unordered collection of information about the document For example
ltDOCTYPE HTML PUBLIC -IETFDTD HTML 20ENgt
ltHEADgt
ltTITLEgtIntroduction to HTMLltTITLEgt
ltHEADgt
Title TITLE
Every HTML document must contain a TITLE element
The title should identify the contents of the document in a global context A short title such as Introduction may be meaningless out of context A title such as Introduction to HTML Elements is more appropriate
A user agent may display the title of a document in a history list or as a label for the window displaying the document This differs from headings (section Headings H1 H6) which are typically displayed within the body text flow
Base Address BASE
11
The optional BASE element provides a base address for interpreting relative URLs when the document is read out of context (see section Hyperlinks) The value of the HREF attribute must be an absolute URI
Keyword Index ISINDEX
The ISINDEX element indicates that the user agent should allow the user to search an index by giving keywords See section Queries and Indexes for details
Link LINK
The LINK element represents a hyperlink (see section Hyperlinks) Any number of LINK elements may occur in the HEAD element of an HTML document It has the same attributes as the A element (see section Anchor A)
The LINK element is typically used to indicate authorship related indexes and glossaries older or more recent versions document hierarchy associated resources such as style sheets etc
Associated Meta-information META
The META element is an extensible container for use in identifying specialized document meta-information Meta-information has two main functions
to provide a means to discover that the data set exists and how it might be obtained or accessed and
to document the content quality and features of a data set indicating its fitness for use
Each META element specifies a namevalue pair If multiple META elements are provided with the same name their combined contents--concatenated as a comma-separated list--is the value associated with that name
HTTP servers may read the content of the document HEAD to generate header fields corresponding to any elements defining a value for the attribute HTTP-EQUIV (14)
Attributes of the META element
HTTP-EQUIV
Binds the element to an HTTP header field An HTTP server may use this information to process the document In particular it may include a header field in the responses to requests for this document the header name is taken from the HTTP-EQUIV attribute value
12
and the header value is taken from the value of the CONTENT attribute HTTP header names are not case sensitive
NAME Specifies the name of the namevalue pair If not present HTTP-EQUIV gives the name
CONTENT specifies the value of the namevalue pair
Examples
If the document contains
ltMETA HTTP-EQUIV=Expires
CONTENT=Tue 04 Dec 1993 212902 GMTgt
ltmeta http-equiv=Keywords CONTENT=Fredgt
ltMETA HTTP-EQUIV=Reply-to
content=fieldingicsuciedu (Roy Fielding)gt
ltMeta Http-equiv=Keywords CONTENT=Barneygt
then the server may include the following header fields
Expires Tue 04 Dec 1993 212902 GMT
Keywords Fred Barney
Reply-to fieldingicsuciedu (Roy Fielding)
as part of the HTTP response to a `GET or `HEAD request for that document
An HTTP server must not use the META element to form an HTTP response header unless the HTTP-EQUIV attribute is present
An HTTP server may disregard any META elements that specify information controlled by the HTTP server for example `Server `Date and `Last-modified
Next Id NEXTID
The NEXTID element is included for historical reasons only HTML documents should not contain NEXTID elements
13
The NEXTID element gives a hint for the name to use for a new A element when editing an HTML document It should be distinct from all NAME attribute values on A elements For example
ltNEXTID N=Z27gt
Body BODY
The BODY element contains the text flow of the document including headings paragraphs lists etc
For example
ltBODYgt
lth1gtImportant Stufflth1gt
ltpgtExplanation about important stuff
ltBODYgt
Headings H1 H6
The six heading elements H1 through H6 denote section headings Although the order and occurrence of headings is not constrained by the HTML DTD documents should not skip levels (for example from H1 to H3) as converting such documents to other representations is often problematic
Example of use
ltH1gtThis is a headingltH1gt
Here is some text
ltH2gtSecond level headingltH2gt
Here is some more text
Typical renderings are
H1
Bold very-large font centered One or two blank lines above and below
H2
14
Bold large font flush-left One or two blank lines above and below
H3
Italic large font slightly indented from the left margin One or two blank lines above and below
H4
Bold normal font indented more than H3 One blank line above and below
H5
Italic normal font indented as H4 One blank line above
H6
Bold indented same as normal text more than H5 One blank line above
Block Structuring Elements
Block structuring elements include paragraphs lists and block quotes They must not contain heading elements but they may contain phrase markup and in some cases they may be nested
Paragraph P
The P element indicates a paragraph The exact indentation leading space etc of a paragraph is not specified and may be a function of other tags style sheets etcTypically paragraphs are surrounded by a vertical space of one line or half a line The first line in a paragraph is indented in some cases
Example of use
ltH1gtThis Heading Precedes the ParagraphltH1gt
ltPgtThis is the text of the first paragraph
ltPgtThis is the text of the second paragraph Although you do not need to start paragraphs on new lines maintaining this convention facilitates document maintenanceltPgt
ltPgtThis is the text of a third paragraphltPgt
Preformatted Text PRE
15
The PRE element represents a character cell block of text and is suitable for text that has been formatted for a monospaced font
The PRE tag may be used with the optional WIDTH attribute The WIDTH attribute specifies the maximum number of characters for a line and allows the HTML user agent to select a suitable font and indentation
Within preformatted text
Line breaks within the text are rendered as a move to the beginning of the next line (15)
Anchor elements and phrase markup may be used (16)
Elements that define paragraph formatting (headings address etc) must not be used (17)
The horizontal tab character (code position 9 in the HTML document character set) must be interpreted as the smallest positive nonzero number of spaces which will leave the number of characters so far on the line as a multiple of 8 Documents should not contain tab characters as they are not supported consistently
Example of use
ltPREgt
Line 1
Line 2 is to the right of line 1 lta href=abcgtabcltagt
Line 3 aligns with line 2 lta href=defgtdefltagt
ltPREgt
Example and Listing XMP LISTING
The XMP and LISTING elements are similar to the PRE element but they have a different syntax Their content is declared as CDATA which means that no markup except the end-tag open delimiter-in-context is recognized (see 96 Delimiter Recognition of [SGML])
Since CDATA declared content has a number of unfortunate interactions with processing techniques and tends to be used and implemented inconsistently HTML documents should not contain XMP nor LISTING elements -- the PRE tag is more expressive and more consistently supported
16
The LISTING element should be rendered so that at least 132 characters fit on a line The XMP element should be rendered so that at least 80 characters fit on a line but is otherwise identical to the LISTING element
Address ADDRESS
The ADDRESS element contains such information as address signature and authorship often at the beginning or end of the body of a document
Typically the ADDRESS element is rendered in an italic typeface and may be indented
Example of use
ltADDRESSgt
Kishore TechnologiesltBRgt
Beside TCSltBRgt
BangloreltBRgt
Mobile 7842634463
ltADDRESSgt
Block Quote BLOCKQUOTE
The BLOCKQUOTE element contains text quoted from another source
A typical rendering might be a slight extra left and right indent andor italic font The BLOCKQUOTE typically provides space above and below the quote
Single-font rendition may reflect the quotation style of Internet mail by putting a vertical line of graphic characters such as the greater than symbol (gt) in the left margin
Example of use
I think the play ends
ltBLOCKQUOTEgt
ltPgtSoft you now the fair Ophelia Nymph in thy orisons be all
my sins remembered
17
ltBLOCKQUOTEgt
but I am not sure
List Elements
HTML includes a number of list elements They may be used in combination for example a OL may be nested in an LI element of a UL
The COMPACT attribute suggests that a compact rendering be used
Unordered List UL LI
The UL represents a list of items -- typically rendered as a bulleted list
The content of a UL element is a sequence of LI elements For example
ltULgt
ltLIgtFirst list item
ltLIgtSecond list item
ltpgtsecond paragraph of second item
ltLIgtThird list item
ltULgt
Ordered List OL
The OL element represents an ordered list of items sorted by sequence or order of importance It is typically rendered as a numbered list
The content of a OL element is a sequence of LI elements For example
ltOLgt
ltLIgtClick the Web button to open URI window
ltLIgtEnter the URI number in the text field of the Open URI
window The Web document you specified is displayed
ltolgt
18
ltligtsubstep 1
ltligtsubstep 2
ltolgt
ltLIgtClick highlighted text to move from one link to another
ltOLgt
Directory List DIR
The DIR element is similar to the UL element It represents a list of short items typically up to 20 characters each Items in a directory list may be arranged in columns typically 24 characters wide
The content of a DIR element is a sequence of LI elements Nested block elements are not allowed in the content of DIR elements For example
ltDIRgt
ltLIgtA-HltLIgtI-M
ltLIgtM-RltLIgtS-Z
ltDIRgt
Menu List MENU
The MENU element is a list of items with typically one line per item The menu list style is typically more compact than the style of an unordered list
The content of a MENU element is a sequence of LI elements Nested block elements are not allowed in the content of MENU elements For example
ltMENUgt
ltLIgtFirst item in the list
ltLIgtSecond item in the list
ltLIgtThird item in the list
19
ltMENUgt
Definition List DL DT DD
A definition list is a list of terms and corresponding definitions Definition lists are typically formatted with the term flush-left and the definition formatted paragraph style indented after the term
The content of a DL element is a sequence of DT elements andor DD elements usually in pairs Multiple DT may be paired with a single DD element Documents should not contain multiple consecutive DD elements
Example of use
ltDLgt
ltDTgtTermltDDgtThis is the definition of the first term
ltDTgtTermltDDgtThis is the definition of the second term
ltDLgt
If the DT term does not fit in the DT column (typically one third of the display area) it may be extended across the page with the DD section moved to the next line or it may be wrapped onto successive lines of the left hand column
The optional COMPACT attribute suggests that a compact rendering be used because the list items are small andor the entire list is large
Unless the COMPACT attribute is present an HTML user agent may leave white space between successive DT DD pairs The COMPACT attribute may also reduce the width of the left-hand (DT) column
ltDL COMPACTgt
ltDTgtTermltDDgtThis is the first definition in compact format
ltDTgtTermltDDgtThis is the second definition in compact format
ltDLgt
Phrase Markup
Phrases may be marked up according to idiomatic usage typographic appearance or for use as hyperlink anchors
20
User agents must render highlighted phrases distinctly from plain text Additionally EM content must be rendered as distinct from STRONG content and B content must rendered as distinct from I content
Phrase elements may be nested within the content of other phrase elements however HTML user agents may render nested phrase elements indistinctly from non-nested elements
plain ltBgtbold ltIgtitalicltIgtltBgt may be rendered
the same as plain ltBgtbold ltBgtltIgtitalicltIgt
Idiomatic Elements
Phrases may be marked up to indicate certain idioms
Citation CITE
The CITE element is used to indicate the title of a book or other citation It is typically rendered as italics For example
He just couldnt get enough of ltcitegtThe Grapes of Wrathltcitegt
Code CODE
The CODE element indicates an example of code typically rendered in a mono-spaced font The CODE element is intended for short words or phrases of code the PRE block structuring element (section Preformatted Text PRE) is more appropriate for multiple-line listings For example
The expression ltcodegtx += 1ltcodegt
is short for ltcodegtx = x + 1ltcodegt
Emphasis EM
The EM element indicates an emphasized phrase typically rendered as italics For example
A singular subject ltemgtalwaysltemgt takes a singular verb
Keyboard KBD
The KBD element indicates text typed by a user typically rendered in a mono-spaced font This is commonly used in instruction manuals For example
21
Enter ltkbdgtFIND ITltkbdgt to search the database
Sample SAMP
The SAMP element indicates a sequence of literal characters typically rendered in a mono-spaced font For example
The only word containing the letters ltsampgtmtltsampgt is dreamt
Strong Emphasis STRONG
The STRONG element indicates strong emphasis typically rendered in bold For example
ltstronggtSTOPltstronggt or Ill say ltstronggtSTOPltstronggt again
Variable VAR
The VAR element indicates a placeholder variable typically rendered as italic For example
Type ltSAMPgthtml-check ltVARgtfileltVARgt | moreltSAMPgt
to check ltVARgtfileltVARgt for markup errors
Typographic Elements
Typographic elements are used to specify the format of marked text
Typical renderings for idiomatic elements may vary between user agents If a specific rendering is necessary -- for example when referring to a specific text attribute as in The italic parts are mandatory -- a typographic element can be used to ensure that the intended typography is used where possible
Bold B
The B element indicates bold text Where bold typography is unavailable an alternative representation may be used
Italic I
The I element indicates italic text Where italic typography is unavailable an alternative representation may be used
Teletype TT
22
The TT element indicates teletype (monospaced )text Where a teletype font is unavailable an alternative representation may be used
Anchor A
The A element indicates a hyperlink anchor (see section Hyperlinks) At least one of the NAME and HREF attributes should be present Attributes of the A element
HREF
gives the URI of the head anchor of a hyperlink
NAME
gives the name of the anchor and makes it available as a head of a hyperlink
TITLE
suggests a title for the destination resource --- advisory only The TITLE attribute may be used
for display prior to accessing the destination resource for example as a margin note or on a small box while the mouse is over the anchor or while the document is being loaded
for resources that do not include a title such as graphics plain text and Gopher menus for use as a window title
REL
The REL attribute gives the relationship(s) described by the hyperlink The value is a whitespace separated list of relationship names The semantics of link relationships are not specified in this document
REV
Same as the REL attribute but the semantics of the relationship are in the reverse direction A link from A to B with REL=X expresses the same relationship as a link from B to A with REV=X An anchor may have both REL and REV attributes
URN
specifies a preferred more persistent identifier for the head anchor of the hyperlink The syntax and semantics of the URN attribute are not yet specified
METHODS
23
specifies methods to be used in accessing the destination as a whitespace-separated list of names The set of applicable names is a function of the scheme of the URI in the HREF attribute For similar reasons as for the TITLE attribute it may be useful to include the information in advance in the link For example the HTML user agent may chose a different rendering as a function of the methods allowed for example something that is searchable may get a different icon
Line Break BR
The BR element specifies a line break between words (see section Characters Words and Paragraphs) For example
ltPgt Pease porridge hotltBRgt
Pease porridge coldltBRgt
Pease porridge in the potltBRgt
Nine days old
Horizontal Rule HR
The HR element is a divider between sections of text typically a full width horizontal rule or equivalent graphic For example
ltHRgt
ltADDRESSgtFebruary 8 1995 CERNltADDRESSgt
ltBODYgt
Image IMG
The IMG element refers to an image or icon via a hyperlink (see section Simultaneous Presentation of Image Resources)
HTML user agents may process the value of the ALT attribute as an alternative to processing the image resource indicated by the SRC attribute (22)
Attributes of the IMG element
ALIGN
Alignment of the image with respect to the text baseline
`TOP specifies that the top of the image aligns with the tallest item on the line containing the image
24
`MIDDLE specifies that the center of the image aligns with the baseline of the line containing the image
`BOTTOM specifies that the bottom of the image aligns with the baseline of the line containing the image
ALT
Text to use in place of the referenced image resource for example due to processing constraints or user preference
ISMAP
indicates an image map (see section Image Maps)
SRC
Specifies the URI of the image resource (23)
Examples of use
ltIMG SRC=trianglexbm ALT=Warninggt Be sure to read these instructions
lta href=httpmachinehtbinimagemapsamplegt
ltIMG SRC=samplexbm ISMAPgt
ltagt
Advantages
Easy to use Loose syntax (although being too flexible will not comply with standards) Supported on almost every browser if not all browsers Widely used established on almost every website if not all websites Very similar to XML syntax which is increasingly used for data storage Free - You need not buy any software Easy to learn amp code even for novice programmers
Disadvantages
It cannot produce dynamic output alone since it is a static language Sometimes the structuring of HTML documents is hard to grasp You have to keep up with deprecated tags and make sure not to use them Deprecated tags appear because another language that works with HTML has
replaced the original work of the tag thus the other language needs to be learned (most of the time it is CSS)
25
Security features offered by HTML are limited
Conclusion
HTML is used to build web sites and HTML5 improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements and how to recover from errors
Some of the new features in HTML5 are functions for embedding audio video graphics client-side data storage and interactive documents HTML5 also contains new elements like ltnavgt ltheadergt ltfootergt and ltfiguregt
References
httpenwikipediaorgwikiHTML httpwwww3schoolscomhtmldefaultasp httpwwwanswerscomtopichtml
- Definition of HTML
-
8
UNIVERSITYrdquogtltcentergtltpgt
Save your file and view it in Firefox
In addition to making text ldquohyperlinkrdquo to other documents you can also add a hypertext link to graphics on your pages which will allow you to ldquojumprdquo to another page or to another location within the same page To do this select one of the two graphics you inserted into your page Then revise the coding so that it reads as follows
lta href=httpkumca2010xtgemcomgtltimg src=kickjpg border=ldquo0rdquo
height=ldquo119rdquo width=ldquo121rdquo alt=ldquoKrishna universityrdquogtltagt
Once again save your file and view it in Firefox
Adding a Simple Table
Tables may look complicated at first but they will be easier to understand if you remember that a table in HTML is created row by row Type the tags as shown and follow the directions in italic type Use any spacing or indentation that makes sense to you but do not change the order of any of the tags Be sure to insert this table before the closing body and html tags on your page
lttablegt
lttrgt
ltthgt Heading for 1st column For example Nameltthgt ltthgt Heading for 2nd column For example Phone
Numberltthgtlttrgt
lttrgt
lttdgt Words in the first row first column For example kishorelttdgtlttdgt Words in the first row
second column For example X4-7096 lttdgtlttrgt
lttrgt
lttdgt Words in the second row first column For example vedalttdgt lttdgt Words in the
second row second column For example X4-7029lttdgt
9
lttrgt
lttablegt
Save your document and preview it in Firefox
Next well spread out the table by adding space in the cells This is done by specifying a number which the browser interprets as a number of pixels between the text and the cell border The HTML command for this is cellpadding Edit your table to read
lttable cellpadding=5gt
You can also change the amount of space between table cells ndash which is called cellspacing in HTML Both cellpadding and cellspacing commands can be used at the same time
lttable cellspacing=5 cellpadding=5gt
Once you have made this change save your file and preview it in Firefox
Congratulations You have now created a simple web page with graphics links and a table
Font Size
The ltfontgtltfontgt tag introduced by Netscape may be used to set the size of the font from 1 (smallest) to 7 (largest) with a size of 3 being the normal text size
Font Size = 1Font Size = 2Font Size = 3-- normal size text
Font Size = 4
Font Size = 5
Font Size = 6
Font Size = 7Remember that the actual size will depend on the computer font the user has selected for their web browser -- you are adjusting the size relative to the default font they have chosen
The format for the font size tag is
10
ltfont size=Ngtblah blah blahltfontgt where N=1 to 7
Document Structure
An HTML document is a tree of elements including a head and body headings paragraphs lists etc Form elements are discussed in section Forms
Document Element HTML
The HTML document element consists of a head and a body much like a memo or a mail message The head contains the title and optional elements The body is a text flow consisting of paragraphs lists and other elements
Head HEAD
The head of an HTML document is an unordered collection of information about the document For example
ltDOCTYPE HTML PUBLIC -IETFDTD HTML 20ENgt
ltHEADgt
ltTITLEgtIntroduction to HTMLltTITLEgt
ltHEADgt
Title TITLE
Every HTML document must contain a TITLE element
The title should identify the contents of the document in a global context A short title such as Introduction may be meaningless out of context A title such as Introduction to HTML Elements is more appropriate
A user agent may display the title of a document in a history list or as a label for the window displaying the document This differs from headings (section Headings H1 H6) which are typically displayed within the body text flow
Base Address BASE
11
The optional BASE element provides a base address for interpreting relative URLs when the document is read out of context (see section Hyperlinks) The value of the HREF attribute must be an absolute URI
Keyword Index ISINDEX
The ISINDEX element indicates that the user agent should allow the user to search an index by giving keywords See section Queries and Indexes for details
Link LINK
The LINK element represents a hyperlink (see section Hyperlinks) Any number of LINK elements may occur in the HEAD element of an HTML document It has the same attributes as the A element (see section Anchor A)
The LINK element is typically used to indicate authorship related indexes and glossaries older or more recent versions document hierarchy associated resources such as style sheets etc
Associated Meta-information META
The META element is an extensible container for use in identifying specialized document meta-information Meta-information has two main functions
to provide a means to discover that the data set exists and how it might be obtained or accessed and
to document the content quality and features of a data set indicating its fitness for use
Each META element specifies a namevalue pair If multiple META elements are provided with the same name their combined contents--concatenated as a comma-separated list--is the value associated with that name
HTTP servers may read the content of the document HEAD to generate header fields corresponding to any elements defining a value for the attribute HTTP-EQUIV (14)
Attributes of the META element
HTTP-EQUIV
Binds the element to an HTTP header field An HTTP server may use this information to process the document In particular it may include a header field in the responses to requests for this document the header name is taken from the HTTP-EQUIV attribute value
12
and the header value is taken from the value of the CONTENT attribute HTTP header names are not case sensitive
NAME Specifies the name of the namevalue pair If not present HTTP-EQUIV gives the name
CONTENT specifies the value of the namevalue pair
Examples
If the document contains
ltMETA HTTP-EQUIV=Expires
CONTENT=Tue 04 Dec 1993 212902 GMTgt
ltmeta http-equiv=Keywords CONTENT=Fredgt
ltMETA HTTP-EQUIV=Reply-to
content=fieldingicsuciedu (Roy Fielding)gt
ltMeta Http-equiv=Keywords CONTENT=Barneygt
then the server may include the following header fields
Expires Tue 04 Dec 1993 212902 GMT
Keywords Fred Barney
Reply-to fieldingicsuciedu (Roy Fielding)
as part of the HTTP response to a `GET or `HEAD request for that document
An HTTP server must not use the META element to form an HTTP response header unless the HTTP-EQUIV attribute is present
An HTTP server may disregard any META elements that specify information controlled by the HTTP server for example `Server `Date and `Last-modified
Next Id NEXTID
The NEXTID element is included for historical reasons only HTML documents should not contain NEXTID elements
13
The NEXTID element gives a hint for the name to use for a new A element when editing an HTML document It should be distinct from all NAME attribute values on A elements For example
ltNEXTID N=Z27gt
Body BODY
The BODY element contains the text flow of the document including headings paragraphs lists etc
For example
ltBODYgt
lth1gtImportant Stufflth1gt
ltpgtExplanation about important stuff
ltBODYgt
Headings H1 H6
The six heading elements H1 through H6 denote section headings Although the order and occurrence of headings is not constrained by the HTML DTD documents should not skip levels (for example from H1 to H3) as converting such documents to other representations is often problematic
Example of use
ltH1gtThis is a headingltH1gt
Here is some text
ltH2gtSecond level headingltH2gt
Here is some more text
Typical renderings are
H1
Bold very-large font centered One or two blank lines above and below
H2
14
Bold large font flush-left One or two blank lines above and below
H3
Italic large font slightly indented from the left margin One or two blank lines above and below
H4
Bold normal font indented more than H3 One blank line above and below
H5
Italic normal font indented as H4 One blank line above
H6
Bold indented same as normal text more than H5 One blank line above
Block Structuring Elements
Block structuring elements include paragraphs lists and block quotes They must not contain heading elements but they may contain phrase markup and in some cases they may be nested
Paragraph P
The P element indicates a paragraph The exact indentation leading space etc of a paragraph is not specified and may be a function of other tags style sheets etcTypically paragraphs are surrounded by a vertical space of one line or half a line The first line in a paragraph is indented in some cases
Example of use
ltH1gtThis Heading Precedes the ParagraphltH1gt
ltPgtThis is the text of the first paragraph
ltPgtThis is the text of the second paragraph Although you do not need to start paragraphs on new lines maintaining this convention facilitates document maintenanceltPgt
ltPgtThis is the text of a third paragraphltPgt
Preformatted Text PRE
15
The PRE element represents a character cell block of text and is suitable for text that has been formatted for a monospaced font
The PRE tag may be used with the optional WIDTH attribute The WIDTH attribute specifies the maximum number of characters for a line and allows the HTML user agent to select a suitable font and indentation
Within preformatted text
Line breaks within the text are rendered as a move to the beginning of the next line (15)
Anchor elements and phrase markup may be used (16)
Elements that define paragraph formatting (headings address etc) must not be used (17)
The horizontal tab character (code position 9 in the HTML document character set) must be interpreted as the smallest positive nonzero number of spaces which will leave the number of characters so far on the line as a multiple of 8 Documents should not contain tab characters as they are not supported consistently
Example of use
ltPREgt
Line 1
Line 2 is to the right of line 1 lta href=abcgtabcltagt
Line 3 aligns with line 2 lta href=defgtdefltagt
ltPREgt
Example and Listing XMP LISTING
The XMP and LISTING elements are similar to the PRE element but they have a different syntax Their content is declared as CDATA which means that no markup except the end-tag open delimiter-in-context is recognized (see 96 Delimiter Recognition of [SGML])
Since CDATA declared content has a number of unfortunate interactions with processing techniques and tends to be used and implemented inconsistently HTML documents should not contain XMP nor LISTING elements -- the PRE tag is more expressive and more consistently supported
16
The LISTING element should be rendered so that at least 132 characters fit on a line The XMP element should be rendered so that at least 80 characters fit on a line but is otherwise identical to the LISTING element
Address ADDRESS
The ADDRESS element contains such information as address signature and authorship often at the beginning or end of the body of a document
Typically the ADDRESS element is rendered in an italic typeface and may be indented
Example of use
ltADDRESSgt
Kishore TechnologiesltBRgt
Beside TCSltBRgt
BangloreltBRgt
Mobile 7842634463
ltADDRESSgt
Block Quote BLOCKQUOTE
The BLOCKQUOTE element contains text quoted from another source
A typical rendering might be a slight extra left and right indent andor italic font The BLOCKQUOTE typically provides space above and below the quote
Single-font rendition may reflect the quotation style of Internet mail by putting a vertical line of graphic characters such as the greater than symbol (gt) in the left margin
Example of use
I think the play ends
ltBLOCKQUOTEgt
ltPgtSoft you now the fair Ophelia Nymph in thy orisons be all
my sins remembered
17
ltBLOCKQUOTEgt
but I am not sure
List Elements
HTML includes a number of list elements They may be used in combination for example a OL may be nested in an LI element of a UL
The COMPACT attribute suggests that a compact rendering be used
Unordered List UL LI
The UL represents a list of items -- typically rendered as a bulleted list
The content of a UL element is a sequence of LI elements For example
ltULgt
ltLIgtFirst list item
ltLIgtSecond list item
ltpgtsecond paragraph of second item
ltLIgtThird list item
ltULgt
Ordered List OL
The OL element represents an ordered list of items sorted by sequence or order of importance It is typically rendered as a numbered list
The content of a OL element is a sequence of LI elements For example
ltOLgt
ltLIgtClick the Web button to open URI window
ltLIgtEnter the URI number in the text field of the Open URI
window The Web document you specified is displayed
ltolgt
18
ltligtsubstep 1
ltligtsubstep 2
ltolgt
ltLIgtClick highlighted text to move from one link to another
ltOLgt
Directory List DIR
The DIR element is similar to the UL element It represents a list of short items typically up to 20 characters each Items in a directory list may be arranged in columns typically 24 characters wide
The content of a DIR element is a sequence of LI elements Nested block elements are not allowed in the content of DIR elements For example
ltDIRgt
ltLIgtA-HltLIgtI-M
ltLIgtM-RltLIgtS-Z
ltDIRgt
Menu List MENU
The MENU element is a list of items with typically one line per item The menu list style is typically more compact than the style of an unordered list
The content of a MENU element is a sequence of LI elements Nested block elements are not allowed in the content of MENU elements For example
ltMENUgt
ltLIgtFirst item in the list
ltLIgtSecond item in the list
ltLIgtThird item in the list
19
ltMENUgt
Definition List DL DT DD
A definition list is a list of terms and corresponding definitions Definition lists are typically formatted with the term flush-left and the definition formatted paragraph style indented after the term
The content of a DL element is a sequence of DT elements andor DD elements usually in pairs Multiple DT may be paired with a single DD element Documents should not contain multiple consecutive DD elements
Example of use
ltDLgt
ltDTgtTermltDDgtThis is the definition of the first term
ltDTgtTermltDDgtThis is the definition of the second term
ltDLgt
If the DT term does not fit in the DT column (typically one third of the display area) it may be extended across the page with the DD section moved to the next line or it may be wrapped onto successive lines of the left hand column
The optional COMPACT attribute suggests that a compact rendering be used because the list items are small andor the entire list is large
Unless the COMPACT attribute is present an HTML user agent may leave white space between successive DT DD pairs The COMPACT attribute may also reduce the width of the left-hand (DT) column
ltDL COMPACTgt
ltDTgtTermltDDgtThis is the first definition in compact format
ltDTgtTermltDDgtThis is the second definition in compact format
ltDLgt
Phrase Markup
Phrases may be marked up according to idiomatic usage typographic appearance or for use as hyperlink anchors
20
User agents must render highlighted phrases distinctly from plain text Additionally EM content must be rendered as distinct from STRONG content and B content must rendered as distinct from I content
Phrase elements may be nested within the content of other phrase elements however HTML user agents may render nested phrase elements indistinctly from non-nested elements
plain ltBgtbold ltIgtitalicltIgtltBgt may be rendered
the same as plain ltBgtbold ltBgtltIgtitalicltIgt
Idiomatic Elements
Phrases may be marked up to indicate certain idioms
Citation CITE
The CITE element is used to indicate the title of a book or other citation It is typically rendered as italics For example
He just couldnt get enough of ltcitegtThe Grapes of Wrathltcitegt
Code CODE
The CODE element indicates an example of code typically rendered in a mono-spaced font The CODE element is intended for short words or phrases of code the PRE block structuring element (section Preformatted Text PRE) is more appropriate for multiple-line listings For example
The expression ltcodegtx += 1ltcodegt
is short for ltcodegtx = x + 1ltcodegt
Emphasis EM
The EM element indicates an emphasized phrase typically rendered as italics For example
A singular subject ltemgtalwaysltemgt takes a singular verb
Keyboard KBD
The KBD element indicates text typed by a user typically rendered in a mono-spaced font This is commonly used in instruction manuals For example
21
Enter ltkbdgtFIND ITltkbdgt to search the database
Sample SAMP
The SAMP element indicates a sequence of literal characters typically rendered in a mono-spaced font For example
The only word containing the letters ltsampgtmtltsampgt is dreamt
Strong Emphasis STRONG
The STRONG element indicates strong emphasis typically rendered in bold For example
ltstronggtSTOPltstronggt or Ill say ltstronggtSTOPltstronggt again
Variable VAR
The VAR element indicates a placeholder variable typically rendered as italic For example
Type ltSAMPgthtml-check ltVARgtfileltVARgt | moreltSAMPgt
to check ltVARgtfileltVARgt for markup errors
Typographic Elements
Typographic elements are used to specify the format of marked text
Typical renderings for idiomatic elements may vary between user agents If a specific rendering is necessary -- for example when referring to a specific text attribute as in The italic parts are mandatory -- a typographic element can be used to ensure that the intended typography is used where possible
Bold B
The B element indicates bold text Where bold typography is unavailable an alternative representation may be used
Italic I
The I element indicates italic text Where italic typography is unavailable an alternative representation may be used
Teletype TT
22
The TT element indicates teletype (monospaced )text Where a teletype font is unavailable an alternative representation may be used
Anchor A
The A element indicates a hyperlink anchor (see section Hyperlinks) At least one of the NAME and HREF attributes should be present Attributes of the A element
HREF
gives the URI of the head anchor of a hyperlink
NAME
gives the name of the anchor and makes it available as a head of a hyperlink
TITLE
suggests a title for the destination resource --- advisory only The TITLE attribute may be used
for display prior to accessing the destination resource for example as a margin note or on a small box while the mouse is over the anchor or while the document is being loaded
for resources that do not include a title such as graphics plain text and Gopher menus for use as a window title
REL
The REL attribute gives the relationship(s) described by the hyperlink The value is a whitespace separated list of relationship names The semantics of link relationships are not specified in this document
REV
Same as the REL attribute but the semantics of the relationship are in the reverse direction A link from A to B with REL=X expresses the same relationship as a link from B to A with REV=X An anchor may have both REL and REV attributes
URN
specifies a preferred more persistent identifier for the head anchor of the hyperlink The syntax and semantics of the URN attribute are not yet specified
METHODS
23
specifies methods to be used in accessing the destination as a whitespace-separated list of names The set of applicable names is a function of the scheme of the URI in the HREF attribute For similar reasons as for the TITLE attribute it may be useful to include the information in advance in the link For example the HTML user agent may chose a different rendering as a function of the methods allowed for example something that is searchable may get a different icon
Line Break BR
The BR element specifies a line break between words (see section Characters Words and Paragraphs) For example
ltPgt Pease porridge hotltBRgt
Pease porridge coldltBRgt
Pease porridge in the potltBRgt
Nine days old
Horizontal Rule HR
The HR element is a divider between sections of text typically a full width horizontal rule or equivalent graphic For example
ltHRgt
ltADDRESSgtFebruary 8 1995 CERNltADDRESSgt
ltBODYgt
Image IMG
The IMG element refers to an image or icon via a hyperlink (see section Simultaneous Presentation of Image Resources)
HTML user agents may process the value of the ALT attribute as an alternative to processing the image resource indicated by the SRC attribute (22)
Attributes of the IMG element
ALIGN
Alignment of the image with respect to the text baseline
`TOP specifies that the top of the image aligns with the tallest item on the line containing the image
24
`MIDDLE specifies that the center of the image aligns with the baseline of the line containing the image
`BOTTOM specifies that the bottom of the image aligns with the baseline of the line containing the image
ALT
Text to use in place of the referenced image resource for example due to processing constraints or user preference
ISMAP
indicates an image map (see section Image Maps)
SRC
Specifies the URI of the image resource (23)
Examples of use
ltIMG SRC=trianglexbm ALT=Warninggt Be sure to read these instructions
lta href=httpmachinehtbinimagemapsamplegt
ltIMG SRC=samplexbm ISMAPgt
ltagt
Advantages
Easy to use Loose syntax (although being too flexible will not comply with standards) Supported on almost every browser if not all browsers Widely used established on almost every website if not all websites Very similar to XML syntax which is increasingly used for data storage Free - You need not buy any software Easy to learn amp code even for novice programmers
Disadvantages
It cannot produce dynamic output alone since it is a static language Sometimes the structuring of HTML documents is hard to grasp You have to keep up with deprecated tags and make sure not to use them Deprecated tags appear because another language that works with HTML has
replaced the original work of the tag thus the other language needs to be learned (most of the time it is CSS)
25
Security features offered by HTML are limited
Conclusion
HTML is used to build web sites and HTML5 improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements and how to recover from errors
Some of the new features in HTML5 are functions for embedding audio video graphics client-side data storage and interactive documents HTML5 also contains new elements like ltnavgt ltheadergt ltfootergt and ltfiguregt
References
httpenwikipediaorgwikiHTML httpwwww3schoolscomhtmldefaultasp httpwwwanswerscomtopichtml
- Definition of HTML
-
9
lttrgt
lttablegt
Save your document and preview it in Firefox
Next well spread out the table by adding space in the cells This is done by specifying a number which the browser interprets as a number of pixels between the text and the cell border The HTML command for this is cellpadding Edit your table to read
lttable cellpadding=5gt
You can also change the amount of space between table cells ndash which is called cellspacing in HTML Both cellpadding and cellspacing commands can be used at the same time
lttable cellspacing=5 cellpadding=5gt
Once you have made this change save your file and preview it in Firefox
Congratulations You have now created a simple web page with graphics links and a table
Font Size
The ltfontgtltfontgt tag introduced by Netscape may be used to set the size of the font from 1 (smallest) to 7 (largest) with a size of 3 being the normal text size
Font Size = 1Font Size = 2Font Size = 3-- normal size text
Font Size = 4
Font Size = 5
Font Size = 6
Font Size = 7Remember that the actual size will depend on the computer font the user has selected for their web browser -- you are adjusting the size relative to the default font they have chosen
The format for the font size tag is
10
ltfont size=Ngtblah blah blahltfontgt where N=1 to 7
Document Structure
An HTML document is a tree of elements including a head and body headings paragraphs lists etc Form elements are discussed in section Forms
Document Element HTML
The HTML document element consists of a head and a body much like a memo or a mail message The head contains the title and optional elements The body is a text flow consisting of paragraphs lists and other elements
Head HEAD
The head of an HTML document is an unordered collection of information about the document For example
ltDOCTYPE HTML PUBLIC -IETFDTD HTML 20ENgt
ltHEADgt
ltTITLEgtIntroduction to HTMLltTITLEgt
ltHEADgt
Title TITLE
Every HTML document must contain a TITLE element
The title should identify the contents of the document in a global context A short title such as Introduction may be meaningless out of context A title such as Introduction to HTML Elements is more appropriate
A user agent may display the title of a document in a history list or as a label for the window displaying the document This differs from headings (section Headings H1 H6) which are typically displayed within the body text flow
Base Address BASE
11
The optional BASE element provides a base address for interpreting relative URLs when the document is read out of context (see section Hyperlinks) The value of the HREF attribute must be an absolute URI
Keyword Index ISINDEX
The ISINDEX element indicates that the user agent should allow the user to search an index by giving keywords See section Queries and Indexes for details
Link LINK
The LINK element represents a hyperlink (see section Hyperlinks) Any number of LINK elements may occur in the HEAD element of an HTML document It has the same attributes as the A element (see section Anchor A)
The LINK element is typically used to indicate authorship related indexes and glossaries older or more recent versions document hierarchy associated resources such as style sheets etc
Associated Meta-information META
The META element is an extensible container for use in identifying specialized document meta-information Meta-information has two main functions
to provide a means to discover that the data set exists and how it might be obtained or accessed and
to document the content quality and features of a data set indicating its fitness for use
Each META element specifies a namevalue pair If multiple META elements are provided with the same name their combined contents--concatenated as a comma-separated list--is the value associated with that name
HTTP servers may read the content of the document HEAD to generate header fields corresponding to any elements defining a value for the attribute HTTP-EQUIV (14)
Attributes of the META element
HTTP-EQUIV
Binds the element to an HTTP header field An HTTP server may use this information to process the document In particular it may include a header field in the responses to requests for this document the header name is taken from the HTTP-EQUIV attribute value
12
and the header value is taken from the value of the CONTENT attribute HTTP header names are not case sensitive
NAME Specifies the name of the namevalue pair If not present HTTP-EQUIV gives the name
CONTENT specifies the value of the namevalue pair
Examples
If the document contains
ltMETA HTTP-EQUIV=Expires
CONTENT=Tue 04 Dec 1993 212902 GMTgt
ltmeta http-equiv=Keywords CONTENT=Fredgt
ltMETA HTTP-EQUIV=Reply-to
content=fieldingicsuciedu (Roy Fielding)gt
ltMeta Http-equiv=Keywords CONTENT=Barneygt
then the server may include the following header fields
Expires Tue 04 Dec 1993 212902 GMT
Keywords Fred Barney
Reply-to fieldingicsuciedu (Roy Fielding)
as part of the HTTP response to a `GET or `HEAD request for that document
An HTTP server must not use the META element to form an HTTP response header unless the HTTP-EQUIV attribute is present
An HTTP server may disregard any META elements that specify information controlled by the HTTP server for example `Server `Date and `Last-modified
Next Id NEXTID
The NEXTID element is included for historical reasons only HTML documents should not contain NEXTID elements
13
The NEXTID element gives a hint for the name to use for a new A element when editing an HTML document It should be distinct from all NAME attribute values on A elements For example
ltNEXTID N=Z27gt
Body BODY
The BODY element contains the text flow of the document including headings paragraphs lists etc
For example
ltBODYgt
lth1gtImportant Stufflth1gt
ltpgtExplanation about important stuff
ltBODYgt
Headings H1 H6
The six heading elements H1 through H6 denote section headings Although the order and occurrence of headings is not constrained by the HTML DTD documents should not skip levels (for example from H1 to H3) as converting such documents to other representations is often problematic
Example of use
ltH1gtThis is a headingltH1gt
Here is some text
ltH2gtSecond level headingltH2gt
Here is some more text
Typical renderings are
H1
Bold very-large font centered One or two blank lines above and below
H2
14
Bold large font flush-left One or two blank lines above and below
H3
Italic large font slightly indented from the left margin One or two blank lines above and below
H4
Bold normal font indented more than H3 One blank line above and below
H5
Italic normal font indented as H4 One blank line above
H6
Bold indented same as normal text more than H5 One blank line above
Block Structuring Elements
Block structuring elements include paragraphs lists and block quotes They must not contain heading elements but they may contain phrase markup and in some cases they may be nested
Paragraph P
The P element indicates a paragraph The exact indentation leading space etc of a paragraph is not specified and may be a function of other tags style sheets etcTypically paragraphs are surrounded by a vertical space of one line or half a line The first line in a paragraph is indented in some cases
Example of use
ltH1gtThis Heading Precedes the ParagraphltH1gt
ltPgtThis is the text of the first paragraph
ltPgtThis is the text of the second paragraph Although you do not need to start paragraphs on new lines maintaining this convention facilitates document maintenanceltPgt
ltPgtThis is the text of a third paragraphltPgt
Preformatted Text PRE
15
The PRE element represents a character cell block of text and is suitable for text that has been formatted for a monospaced font
The PRE tag may be used with the optional WIDTH attribute The WIDTH attribute specifies the maximum number of characters for a line and allows the HTML user agent to select a suitable font and indentation
Within preformatted text
Line breaks within the text are rendered as a move to the beginning of the next line (15)
Anchor elements and phrase markup may be used (16)
Elements that define paragraph formatting (headings address etc) must not be used (17)
The horizontal tab character (code position 9 in the HTML document character set) must be interpreted as the smallest positive nonzero number of spaces which will leave the number of characters so far on the line as a multiple of 8 Documents should not contain tab characters as they are not supported consistently
Example of use
ltPREgt
Line 1
Line 2 is to the right of line 1 lta href=abcgtabcltagt
Line 3 aligns with line 2 lta href=defgtdefltagt
ltPREgt
Example and Listing XMP LISTING
The XMP and LISTING elements are similar to the PRE element but they have a different syntax Their content is declared as CDATA which means that no markup except the end-tag open delimiter-in-context is recognized (see 96 Delimiter Recognition of [SGML])
Since CDATA declared content has a number of unfortunate interactions with processing techniques and tends to be used and implemented inconsistently HTML documents should not contain XMP nor LISTING elements -- the PRE tag is more expressive and more consistently supported
16
The LISTING element should be rendered so that at least 132 characters fit on a line The XMP element should be rendered so that at least 80 characters fit on a line but is otherwise identical to the LISTING element
Address ADDRESS
The ADDRESS element contains such information as address signature and authorship often at the beginning or end of the body of a document
Typically the ADDRESS element is rendered in an italic typeface and may be indented
Example of use
ltADDRESSgt
Kishore TechnologiesltBRgt
Beside TCSltBRgt
BangloreltBRgt
Mobile 7842634463
ltADDRESSgt
Block Quote BLOCKQUOTE
The BLOCKQUOTE element contains text quoted from another source
A typical rendering might be a slight extra left and right indent andor italic font The BLOCKQUOTE typically provides space above and below the quote
Single-font rendition may reflect the quotation style of Internet mail by putting a vertical line of graphic characters such as the greater than symbol (gt) in the left margin
Example of use
I think the play ends
ltBLOCKQUOTEgt
ltPgtSoft you now the fair Ophelia Nymph in thy orisons be all
my sins remembered
17
ltBLOCKQUOTEgt
but I am not sure
List Elements
HTML includes a number of list elements They may be used in combination for example a OL may be nested in an LI element of a UL
The COMPACT attribute suggests that a compact rendering be used
Unordered List UL LI
The UL represents a list of items -- typically rendered as a bulleted list
The content of a UL element is a sequence of LI elements For example
ltULgt
ltLIgtFirst list item
ltLIgtSecond list item
ltpgtsecond paragraph of second item
ltLIgtThird list item
ltULgt
Ordered List OL
The OL element represents an ordered list of items sorted by sequence or order of importance It is typically rendered as a numbered list
The content of a OL element is a sequence of LI elements For example
ltOLgt
ltLIgtClick the Web button to open URI window
ltLIgtEnter the URI number in the text field of the Open URI
window The Web document you specified is displayed
ltolgt
18
ltligtsubstep 1
ltligtsubstep 2
ltolgt
ltLIgtClick highlighted text to move from one link to another
ltOLgt
Directory List DIR
The DIR element is similar to the UL element It represents a list of short items typically up to 20 characters each Items in a directory list may be arranged in columns typically 24 characters wide
The content of a DIR element is a sequence of LI elements Nested block elements are not allowed in the content of DIR elements For example
ltDIRgt
ltLIgtA-HltLIgtI-M
ltLIgtM-RltLIgtS-Z
ltDIRgt
Menu List MENU
The MENU element is a list of items with typically one line per item The menu list style is typically more compact than the style of an unordered list
The content of a MENU element is a sequence of LI elements Nested block elements are not allowed in the content of MENU elements For example
ltMENUgt
ltLIgtFirst item in the list
ltLIgtSecond item in the list
ltLIgtThird item in the list
19
ltMENUgt
Definition List DL DT DD
A definition list is a list of terms and corresponding definitions Definition lists are typically formatted with the term flush-left and the definition formatted paragraph style indented after the term
The content of a DL element is a sequence of DT elements andor DD elements usually in pairs Multiple DT may be paired with a single DD element Documents should not contain multiple consecutive DD elements
Example of use
ltDLgt
ltDTgtTermltDDgtThis is the definition of the first term
ltDTgtTermltDDgtThis is the definition of the second term
ltDLgt
If the DT term does not fit in the DT column (typically one third of the display area) it may be extended across the page with the DD section moved to the next line or it may be wrapped onto successive lines of the left hand column
The optional COMPACT attribute suggests that a compact rendering be used because the list items are small andor the entire list is large
Unless the COMPACT attribute is present an HTML user agent may leave white space between successive DT DD pairs The COMPACT attribute may also reduce the width of the left-hand (DT) column
ltDL COMPACTgt
ltDTgtTermltDDgtThis is the first definition in compact format
ltDTgtTermltDDgtThis is the second definition in compact format
ltDLgt
Phrase Markup
Phrases may be marked up according to idiomatic usage typographic appearance or for use as hyperlink anchors
20
User agents must render highlighted phrases distinctly from plain text Additionally EM content must be rendered as distinct from STRONG content and B content must rendered as distinct from I content
Phrase elements may be nested within the content of other phrase elements however HTML user agents may render nested phrase elements indistinctly from non-nested elements
plain ltBgtbold ltIgtitalicltIgtltBgt may be rendered
the same as plain ltBgtbold ltBgtltIgtitalicltIgt
Idiomatic Elements
Phrases may be marked up to indicate certain idioms
Citation CITE
The CITE element is used to indicate the title of a book or other citation It is typically rendered as italics For example
He just couldnt get enough of ltcitegtThe Grapes of Wrathltcitegt
Code CODE
The CODE element indicates an example of code typically rendered in a mono-spaced font The CODE element is intended for short words or phrases of code the PRE block structuring element (section Preformatted Text PRE) is more appropriate for multiple-line listings For example
The expression ltcodegtx += 1ltcodegt
is short for ltcodegtx = x + 1ltcodegt
Emphasis EM
The EM element indicates an emphasized phrase typically rendered as italics For example
A singular subject ltemgtalwaysltemgt takes a singular verb
Keyboard KBD
The KBD element indicates text typed by a user typically rendered in a mono-spaced font This is commonly used in instruction manuals For example
21
Enter ltkbdgtFIND ITltkbdgt to search the database
Sample SAMP
The SAMP element indicates a sequence of literal characters typically rendered in a mono-spaced font For example
The only word containing the letters ltsampgtmtltsampgt is dreamt
Strong Emphasis STRONG
The STRONG element indicates strong emphasis typically rendered in bold For example
ltstronggtSTOPltstronggt or Ill say ltstronggtSTOPltstronggt again
Variable VAR
The VAR element indicates a placeholder variable typically rendered as italic For example
Type ltSAMPgthtml-check ltVARgtfileltVARgt | moreltSAMPgt
to check ltVARgtfileltVARgt for markup errors
Typographic Elements
Typographic elements are used to specify the format of marked text
Typical renderings for idiomatic elements may vary between user agents If a specific rendering is necessary -- for example when referring to a specific text attribute as in The italic parts are mandatory -- a typographic element can be used to ensure that the intended typography is used where possible
Bold B
The B element indicates bold text Where bold typography is unavailable an alternative representation may be used
Italic I
The I element indicates italic text Where italic typography is unavailable an alternative representation may be used
Teletype TT
22
The TT element indicates teletype (monospaced )text Where a teletype font is unavailable an alternative representation may be used
Anchor A
The A element indicates a hyperlink anchor (see section Hyperlinks) At least one of the NAME and HREF attributes should be present Attributes of the A element
HREF
gives the URI of the head anchor of a hyperlink
NAME
gives the name of the anchor and makes it available as a head of a hyperlink
TITLE
suggests a title for the destination resource --- advisory only The TITLE attribute may be used
for display prior to accessing the destination resource for example as a margin note or on a small box while the mouse is over the anchor or while the document is being loaded
for resources that do not include a title such as graphics plain text and Gopher menus for use as a window title
REL
The REL attribute gives the relationship(s) described by the hyperlink The value is a whitespace separated list of relationship names The semantics of link relationships are not specified in this document
REV
Same as the REL attribute but the semantics of the relationship are in the reverse direction A link from A to B with REL=X expresses the same relationship as a link from B to A with REV=X An anchor may have both REL and REV attributes
URN
specifies a preferred more persistent identifier for the head anchor of the hyperlink The syntax and semantics of the URN attribute are not yet specified
METHODS
23
specifies methods to be used in accessing the destination as a whitespace-separated list of names The set of applicable names is a function of the scheme of the URI in the HREF attribute For similar reasons as for the TITLE attribute it may be useful to include the information in advance in the link For example the HTML user agent may chose a different rendering as a function of the methods allowed for example something that is searchable may get a different icon
Line Break BR
The BR element specifies a line break between words (see section Characters Words and Paragraphs) For example
ltPgt Pease porridge hotltBRgt
Pease porridge coldltBRgt
Pease porridge in the potltBRgt
Nine days old
Horizontal Rule HR
The HR element is a divider between sections of text typically a full width horizontal rule or equivalent graphic For example
ltHRgt
ltADDRESSgtFebruary 8 1995 CERNltADDRESSgt
ltBODYgt
Image IMG
The IMG element refers to an image or icon via a hyperlink (see section Simultaneous Presentation of Image Resources)
HTML user agents may process the value of the ALT attribute as an alternative to processing the image resource indicated by the SRC attribute (22)
Attributes of the IMG element
ALIGN
Alignment of the image with respect to the text baseline
`TOP specifies that the top of the image aligns with the tallest item on the line containing the image
24
`MIDDLE specifies that the center of the image aligns with the baseline of the line containing the image
`BOTTOM specifies that the bottom of the image aligns with the baseline of the line containing the image
ALT
Text to use in place of the referenced image resource for example due to processing constraints or user preference
ISMAP
indicates an image map (see section Image Maps)
SRC
Specifies the URI of the image resource (23)
Examples of use
ltIMG SRC=trianglexbm ALT=Warninggt Be sure to read these instructions
lta href=httpmachinehtbinimagemapsamplegt
ltIMG SRC=samplexbm ISMAPgt
ltagt
Advantages
Easy to use Loose syntax (although being too flexible will not comply with standards) Supported on almost every browser if not all browsers Widely used established on almost every website if not all websites Very similar to XML syntax which is increasingly used for data storage Free - You need not buy any software Easy to learn amp code even for novice programmers
Disadvantages
It cannot produce dynamic output alone since it is a static language Sometimes the structuring of HTML documents is hard to grasp You have to keep up with deprecated tags and make sure not to use them Deprecated tags appear because another language that works with HTML has
replaced the original work of the tag thus the other language needs to be learned (most of the time it is CSS)
25
Security features offered by HTML are limited
Conclusion
HTML is used to build web sites and HTML5 improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements and how to recover from errors
Some of the new features in HTML5 are functions for embedding audio video graphics client-side data storage and interactive documents HTML5 also contains new elements like ltnavgt ltheadergt ltfootergt and ltfiguregt
References
httpenwikipediaorgwikiHTML httpwwww3schoolscomhtmldefaultasp httpwwwanswerscomtopichtml
- Definition of HTML
-
10
ltfont size=Ngtblah blah blahltfontgt where N=1 to 7
Document Structure
An HTML document is a tree of elements including a head and body headings paragraphs lists etc Form elements are discussed in section Forms
Document Element HTML
The HTML document element consists of a head and a body much like a memo or a mail message The head contains the title and optional elements The body is a text flow consisting of paragraphs lists and other elements
Head HEAD
The head of an HTML document is an unordered collection of information about the document For example
ltDOCTYPE HTML PUBLIC -IETFDTD HTML 20ENgt
ltHEADgt
ltTITLEgtIntroduction to HTMLltTITLEgt
ltHEADgt
Title TITLE
Every HTML document must contain a TITLE element
The title should identify the contents of the document in a global context A short title such as Introduction may be meaningless out of context A title such as Introduction to HTML Elements is more appropriate
A user agent may display the title of a document in a history list or as a label for the window displaying the document This differs from headings (section Headings H1 H6) which are typically displayed within the body text flow
Base Address BASE
11
The optional BASE element provides a base address for interpreting relative URLs when the document is read out of context (see section Hyperlinks) The value of the HREF attribute must be an absolute URI
Keyword Index ISINDEX
The ISINDEX element indicates that the user agent should allow the user to search an index by giving keywords See section Queries and Indexes for details
Link LINK
The LINK element represents a hyperlink (see section Hyperlinks) Any number of LINK elements may occur in the HEAD element of an HTML document It has the same attributes as the A element (see section Anchor A)
The LINK element is typically used to indicate authorship related indexes and glossaries older or more recent versions document hierarchy associated resources such as style sheets etc
Associated Meta-information META
The META element is an extensible container for use in identifying specialized document meta-information Meta-information has two main functions
to provide a means to discover that the data set exists and how it might be obtained or accessed and
to document the content quality and features of a data set indicating its fitness for use
Each META element specifies a namevalue pair If multiple META elements are provided with the same name their combined contents--concatenated as a comma-separated list--is the value associated with that name
HTTP servers may read the content of the document HEAD to generate header fields corresponding to any elements defining a value for the attribute HTTP-EQUIV (14)
Attributes of the META element
HTTP-EQUIV
Binds the element to an HTTP header field An HTTP server may use this information to process the document In particular it may include a header field in the responses to requests for this document the header name is taken from the HTTP-EQUIV attribute value
12
and the header value is taken from the value of the CONTENT attribute HTTP header names are not case sensitive
NAME Specifies the name of the namevalue pair If not present HTTP-EQUIV gives the name
CONTENT specifies the value of the namevalue pair
Examples
If the document contains
ltMETA HTTP-EQUIV=Expires
CONTENT=Tue 04 Dec 1993 212902 GMTgt
ltmeta http-equiv=Keywords CONTENT=Fredgt
ltMETA HTTP-EQUIV=Reply-to
content=fieldingicsuciedu (Roy Fielding)gt
ltMeta Http-equiv=Keywords CONTENT=Barneygt
then the server may include the following header fields
Expires Tue 04 Dec 1993 212902 GMT
Keywords Fred Barney
Reply-to fieldingicsuciedu (Roy Fielding)
as part of the HTTP response to a `GET or `HEAD request for that document
An HTTP server must not use the META element to form an HTTP response header unless the HTTP-EQUIV attribute is present
An HTTP server may disregard any META elements that specify information controlled by the HTTP server for example `Server `Date and `Last-modified
Next Id NEXTID
The NEXTID element is included for historical reasons only HTML documents should not contain NEXTID elements
13
The NEXTID element gives a hint for the name to use for a new A element when editing an HTML document It should be distinct from all NAME attribute values on A elements For example
ltNEXTID N=Z27gt
Body BODY
The BODY element contains the text flow of the document including headings paragraphs lists etc
For example
ltBODYgt
lth1gtImportant Stufflth1gt
ltpgtExplanation about important stuff
ltBODYgt
Headings H1 H6
The six heading elements H1 through H6 denote section headings Although the order and occurrence of headings is not constrained by the HTML DTD documents should not skip levels (for example from H1 to H3) as converting such documents to other representations is often problematic
Example of use
ltH1gtThis is a headingltH1gt
Here is some text
ltH2gtSecond level headingltH2gt
Here is some more text
Typical renderings are
H1
Bold very-large font centered One or two blank lines above and below
H2
14
Bold large font flush-left One or two blank lines above and below
H3
Italic large font slightly indented from the left margin One or two blank lines above and below
H4
Bold normal font indented more than H3 One blank line above and below
H5
Italic normal font indented as H4 One blank line above
H6
Bold indented same as normal text more than H5 One blank line above
Block Structuring Elements
Block structuring elements include paragraphs lists and block quotes They must not contain heading elements but they may contain phrase markup and in some cases they may be nested
Paragraph P
The P element indicates a paragraph The exact indentation leading space etc of a paragraph is not specified and may be a function of other tags style sheets etcTypically paragraphs are surrounded by a vertical space of one line or half a line The first line in a paragraph is indented in some cases
Example of use
ltH1gtThis Heading Precedes the ParagraphltH1gt
ltPgtThis is the text of the first paragraph
ltPgtThis is the text of the second paragraph Although you do not need to start paragraphs on new lines maintaining this convention facilitates document maintenanceltPgt
ltPgtThis is the text of a third paragraphltPgt
Preformatted Text PRE
15
The PRE element represents a character cell block of text and is suitable for text that has been formatted for a monospaced font
The PRE tag may be used with the optional WIDTH attribute The WIDTH attribute specifies the maximum number of characters for a line and allows the HTML user agent to select a suitable font and indentation
Within preformatted text
Line breaks within the text are rendered as a move to the beginning of the next line (15)
Anchor elements and phrase markup may be used (16)
Elements that define paragraph formatting (headings address etc) must not be used (17)
The horizontal tab character (code position 9 in the HTML document character set) must be interpreted as the smallest positive nonzero number of spaces which will leave the number of characters so far on the line as a multiple of 8 Documents should not contain tab characters as they are not supported consistently
Example of use
ltPREgt
Line 1
Line 2 is to the right of line 1 lta href=abcgtabcltagt
Line 3 aligns with line 2 lta href=defgtdefltagt
ltPREgt
Example and Listing XMP LISTING
The XMP and LISTING elements are similar to the PRE element but they have a different syntax Their content is declared as CDATA which means that no markup except the end-tag open delimiter-in-context is recognized (see 96 Delimiter Recognition of [SGML])
Since CDATA declared content has a number of unfortunate interactions with processing techniques and tends to be used and implemented inconsistently HTML documents should not contain XMP nor LISTING elements -- the PRE tag is more expressive and more consistently supported
16
The LISTING element should be rendered so that at least 132 characters fit on a line The XMP element should be rendered so that at least 80 characters fit on a line but is otherwise identical to the LISTING element
Address ADDRESS
The ADDRESS element contains such information as address signature and authorship often at the beginning or end of the body of a document
Typically the ADDRESS element is rendered in an italic typeface and may be indented
Example of use
ltADDRESSgt
Kishore TechnologiesltBRgt
Beside TCSltBRgt
BangloreltBRgt
Mobile 7842634463
ltADDRESSgt
Block Quote BLOCKQUOTE
The BLOCKQUOTE element contains text quoted from another source
A typical rendering might be a slight extra left and right indent andor italic font The BLOCKQUOTE typically provides space above and below the quote
Single-font rendition may reflect the quotation style of Internet mail by putting a vertical line of graphic characters such as the greater than symbol (gt) in the left margin
Example of use
I think the play ends
ltBLOCKQUOTEgt
ltPgtSoft you now the fair Ophelia Nymph in thy orisons be all
my sins remembered
17
ltBLOCKQUOTEgt
but I am not sure
List Elements
HTML includes a number of list elements They may be used in combination for example a OL may be nested in an LI element of a UL
The COMPACT attribute suggests that a compact rendering be used
Unordered List UL LI
The UL represents a list of items -- typically rendered as a bulleted list
The content of a UL element is a sequence of LI elements For example
ltULgt
ltLIgtFirst list item
ltLIgtSecond list item
ltpgtsecond paragraph of second item
ltLIgtThird list item
ltULgt
Ordered List OL
The OL element represents an ordered list of items sorted by sequence or order of importance It is typically rendered as a numbered list
The content of a OL element is a sequence of LI elements For example
ltOLgt
ltLIgtClick the Web button to open URI window
ltLIgtEnter the URI number in the text field of the Open URI
window The Web document you specified is displayed
ltolgt
18
ltligtsubstep 1
ltligtsubstep 2
ltolgt
ltLIgtClick highlighted text to move from one link to another
ltOLgt
Directory List DIR
The DIR element is similar to the UL element It represents a list of short items typically up to 20 characters each Items in a directory list may be arranged in columns typically 24 characters wide
The content of a DIR element is a sequence of LI elements Nested block elements are not allowed in the content of DIR elements For example
ltDIRgt
ltLIgtA-HltLIgtI-M
ltLIgtM-RltLIgtS-Z
ltDIRgt
Menu List MENU
The MENU element is a list of items with typically one line per item The menu list style is typically more compact than the style of an unordered list
The content of a MENU element is a sequence of LI elements Nested block elements are not allowed in the content of MENU elements For example
ltMENUgt
ltLIgtFirst item in the list
ltLIgtSecond item in the list
ltLIgtThird item in the list
19
ltMENUgt
Definition List DL DT DD
A definition list is a list of terms and corresponding definitions Definition lists are typically formatted with the term flush-left and the definition formatted paragraph style indented after the term
The content of a DL element is a sequence of DT elements andor DD elements usually in pairs Multiple DT may be paired with a single DD element Documents should not contain multiple consecutive DD elements
Example of use
ltDLgt
ltDTgtTermltDDgtThis is the definition of the first term
ltDTgtTermltDDgtThis is the definition of the second term
ltDLgt
If the DT term does not fit in the DT column (typically one third of the display area) it may be extended across the page with the DD section moved to the next line or it may be wrapped onto successive lines of the left hand column
The optional COMPACT attribute suggests that a compact rendering be used because the list items are small andor the entire list is large
Unless the COMPACT attribute is present an HTML user agent may leave white space between successive DT DD pairs The COMPACT attribute may also reduce the width of the left-hand (DT) column
ltDL COMPACTgt
ltDTgtTermltDDgtThis is the first definition in compact format
ltDTgtTermltDDgtThis is the second definition in compact format
ltDLgt
Phrase Markup
Phrases may be marked up according to idiomatic usage typographic appearance or for use as hyperlink anchors
20
User agents must render highlighted phrases distinctly from plain text Additionally EM content must be rendered as distinct from STRONG content and B content must rendered as distinct from I content
Phrase elements may be nested within the content of other phrase elements however HTML user agents may render nested phrase elements indistinctly from non-nested elements
plain ltBgtbold ltIgtitalicltIgtltBgt may be rendered
the same as plain ltBgtbold ltBgtltIgtitalicltIgt
Idiomatic Elements
Phrases may be marked up to indicate certain idioms
Citation CITE
The CITE element is used to indicate the title of a book or other citation It is typically rendered as italics For example
He just couldnt get enough of ltcitegtThe Grapes of Wrathltcitegt
Code CODE
The CODE element indicates an example of code typically rendered in a mono-spaced font The CODE element is intended for short words or phrases of code the PRE block structuring element (section Preformatted Text PRE) is more appropriate for multiple-line listings For example
The expression ltcodegtx += 1ltcodegt
is short for ltcodegtx = x + 1ltcodegt
Emphasis EM
The EM element indicates an emphasized phrase typically rendered as italics For example
A singular subject ltemgtalwaysltemgt takes a singular verb
Keyboard KBD
The KBD element indicates text typed by a user typically rendered in a mono-spaced font This is commonly used in instruction manuals For example
21
Enter ltkbdgtFIND ITltkbdgt to search the database
Sample SAMP
The SAMP element indicates a sequence of literal characters typically rendered in a mono-spaced font For example
The only word containing the letters ltsampgtmtltsampgt is dreamt
Strong Emphasis STRONG
The STRONG element indicates strong emphasis typically rendered in bold For example
ltstronggtSTOPltstronggt or Ill say ltstronggtSTOPltstronggt again
Variable VAR
The VAR element indicates a placeholder variable typically rendered as italic For example
Type ltSAMPgthtml-check ltVARgtfileltVARgt | moreltSAMPgt
to check ltVARgtfileltVARgt for markup errors
Typographic Elements
Typographic elements are used to specify the format of marked text
Typical renderings for idiomatic elements may vary between user agents If a specific rendering is necessary -- for example when referring to a specific text attribute as in The italic parts are mandatory -- a typographic element can be used to ensure that the intended typography is used where possible
Bold B
The B element indicates bold text Where bold typography is unavailable an alternative representation may be used
Italic I
The I element indicates italic text Where italic typography is unavailable an alternative representation may be used
Teletype TT
22
The TT element indicates teletype (monospaced )text Where a teletype font is unavailable an alternative representation may be used
Anchor A
The A element indicates a hyperlink anchor (see section Hyperlinks) At least one of the NAME and HREF attributes should be present Attributes of the A element
HREF
gives the URI of the head anchor of a hyperlink
NAME
gives the name of the anchor and makes it available as a head of a hyperlink
TITLE
suggests a title for the destination resource --- advisory only The TITLE attribute may be used
for display prior to accessing the destination resource for example as a margin note or on a small box while the mouse is over the anchor or while the document is being loaded
for resources that do not include a title such as graphics plain text and Gopher menus for use as a window title
REL
The REL attribute gives the relationship(s) described by the hyperlink The value is a whitespace separated list of relationship names The semantics of link relationships are not specified in this document
REV
Same as the REL attribute but the semantics of the relationship are in the reverse direction A link from A to B with REL=X expresses the same relationship as a link from B to A with REV=X An anchor may have both REL and REV attributes
URN
specifies a preferred more persistent identifier for the head anchor of the hyperlink The syntax and semantics of the URN attribute are not yet specified
METHODS
23
specifies methods to be used in accessing the destination as a whitespace-separated list of names The set of applicable names is a function of the scheme of the URI in the HREF attribute For similar reasons as for the TITLE attribute it may be useful to include the information in advance in the link For example the HTML user agent may chose a different rendering as a function of the methods allowed for example something that is searchable may get a different icon
Line Break BR
The BR element specifies a line break between words (see section Characters Words and Paragraphs) For example
ltPgt Pease porridge hotltBRgt
Pease porridge coldltBRgt
Pease porridge in the potltBRgt
Nine days old
Horizontal Rule HR
The HR element is a divider between sections of text typically a full width horizontal rule or equivalent graphic For example
ltHRgt
ltADDRESSgtFebruary 8 1995 CERNltADDRESSgt
ltBODYgt
Image IMG
The IMG element refers to an image or icon via a hyperlink (see section Simultaneous Presentation of Image Resources)
HTML user agents may process the value of the ALT attribute as an alternative to processing the image resource indicated by the SRC attribute (22)
Attributes of the IMG element
ALIGN
Alignment of the image with respect to the text baseline
`TOP specifies that the top of the image aligns with the tallest item on the line containing the image
24
`MIDDLE specifies that the center of the image aligns with the baseline of the line containing the image
`BOTTOM specifies that the bottom of the image aligns with the baseline of the line containing the image
ALT
Text to use in place of the referenced image resource for example due to processing constraints or user preference
ISMAP
indicates an image map (see section Image Maps)
SRC
Specifies the URI of the image resource (23)
Examples of use
ltIMG SRC=trianglexbm ALT=Warninggt Be sure to read these instructions
lta href=httpmachinehtbinimagemapsamplegt
ltIMG SRC=samplexbm ISMAPgt
ltagt
Advantages
Easy to use Loose syntax (although being too flexible will not comply with standards) Supported on almost every browser if not all browsers Widely used established on almost every website if not all websites Very similar to XML syntax which is increasingly used for data storage Free - You need not buy any software Easy to learn amp code even for novice programmers
Disadvantages
It cannot produce dynamic output alone since it is a static language Sometimes the structuring of HTML documents is hard to grasp You have to keep up with deprecated tags and make sure not to use them Deprecated tags appear because another language that works with HTML has
replaced the original work of the tag thus the other language needs to be learned (most of the time it is CSS)
25
Security features offered by HTML are limited
Conclusion
HTML is used to build web sites and HTML5 improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements and how to recover from errors
Some of the new features in HTML5 are functions for embedding audio video graphics client-side data storage and interactive documents HTML5 also contains new elements like ltnavgt ltheadergt ltfootergt and ltfiguregt
References
httpenwikipediaorgwikiHTML httpwwww3schoolscomhtmldefaultasp httpwwwanswerscomtopichtml
- Definition of HTML
-
11
The optional BASE element provides a base address for interpreting relative URLs when the document is read out of context (see section Hyperlinks) The value of the HREF attribute must be an absolute URI
Keyword Index ISINDEX
The ISINDEX element indicates that the user agent should allow the user to search an index by giving keywords See section Queries and Indexes for details
Link LINK
The LINK element represents a hyperlink (see section Hyperlinks) Any number of LINK elements may occur in the HEAD element of an HTML document It has the same attributes as the A element (see section Anchor A)
The LINK element is typically used to indicate authorship related indexes and glossaries older or more recent versions document hierarchy associated resources such as style sheets etc
Associated Meta-information META
The META element is an extensible container for use in identifying specialized document meta-information Meta-information has two main functions
to provide a means to discover that the data set exists and how it might be obtained or accessed and
to document the content quality and features of a data set indicating its fitness for use
Each META element specifies a namevalue pair If multiple META elements are provided with the same name their combined contents--concatenated as a comma-separated list--is the value associated with that name
HTTP servers may read the content of the document HEAD to generate header fields corresponding to any elements defining a value for the attribute HTTP-EQUIV (14)
Attributes of the META element
HTTP-EQUIV
Binds the element to an HTTP header field An HTTP server may use this information to process the document In particular it may include a header field in the responses to requests for this document the header name is taken from the HTTP-EQUIV attribute value
12
and the header value is taken from the value of the CONTENT attribute HTTP header names are not case sensitive
NAME Specifies the name of the namevalue pair If not present HTTP-EQUIV gives the name
CONTENT specifies the value of the namevalue pair
Examples
If the document contains
ltMETA HTTP-EQUIV=Expires
CONTENT=Tue 04 Dec 1993 212902 GMTgt
ltmeta http-equiv=Keywords CONTENT=Fredgt
ltMETA HTTP-EQUIV=Reply-to
content=fieldingicsuciedu (Roy Fielding)gt
ltMeta Http-equiv=Keywords CONTENT=Barneygt
then the server may include the following header fields
Expires Tue 04 Dec 1993 212902 GMT
Keywords Fred Barney
Reply-to fieldingicsuciedu (Roy Fielding)
as part of the HTTP response to a `GET or `HEAD request for that document
An HTTP server must not use the META element to form an HTTP response header unless the HTTP-EQUIV attribute is present
An HTTP server may disregard any META elements that specify information controlled by the HTTP server for example `Server `Date and `Last-modified
Next Id NEXTID
The NEXTID element is included for historical reasons only HTML documents should not contain NEXTID elements
13
The NEXTID element gives a hint for the name to use for a new A element when editing an HTML document It should be distinct from all NAME attribute values on A elements For example
ltNEXTID N=Z27gt
Body BODY
The BODY element contains the text flow of the document including headings paragraphs lists etc
For example
ltBODYgt
lth1gtImportant Stufflth1gt
ltpgtExplanation about important stuff
ltBODYgt
Headings H1 H6
The six heading elements H1 through H6 denote section headings Although the order and occurrence of headings is not constrained by the HTML DTD documents should not skip levels (for example from H1 to H3) as converting such documents to other representations is often problematic
Example of use
ltH1gtThis is a headingltH1gt
Here is some text
ltH2gtSecond level headingltH2gt
Here is some more text
Typical renderings are
H1
Bold very-large font centered One or two blank lines above and below
H2
14
Bold large font flush-left One or two blank lines above and below
H3
Italic large font slightly indented from the left margin One or two blank lines above and below
H4
Bold normal font indented more than H3 One blank line above and below
H5
Italic normal font indented as H4 One blank line above
H6
Bold indented same as normal text more than H5 One blank line above
Block Structuring Elements
Block structuring elements include paragraphs lists and block quotes They must not contain heading elements but they may contain phrase markup and in some cases they may be nested
Paragraph P
The P element indicates a paragraph The exact indentation leading space etc of a paragraph is not specified and may be a function of other tags style sheets etcTypically paragraphs are surrounded by a vertical space of one line or half a line The first line in a paragraph is indented in some cases
Example of use
ltH1gtThis Heading Precedes the ParagraphltH1gt
ltPgtThis is the text of the first paragraph
ltPgtThis is the text of the second paragraph Although you do not need to start paragraphs on new lines maintaining this convention facilitates document maintenanceltPgt
ltPgtThis is the text of a third paragraphltPgt
Preformatted Text PRE
15
The PRE element represents a character cell block of text and is suitable for text that has been formatted for a monospaced font
The PRE tag may be used with the optional WIDTH attribute The WIDTH attribute specifies the maximum number of characters for a line and allows the HTML user agent to select a suitable font and indentation
Within preformatted text
Line breaks within the text are rendered as a move to the beginning of the next line (15)
Anchor elements and phrase markup may be used (16)
Elements that define paragraph formatting (headings address etc) must not be used (17)
The horizontal tab character (code position 9 in the HTML document character set) must be interpreted as the smallest positive nonzero number of spaces which will leave the number of characters so far on the line as a multiple of 8 Documents should not contain tab characters as they are not supported consistently
Example of use
ltPREgt
Line 1
Line 2 is to the right of line 1 lta href=abcgtabcltagt
Line 3 aligns with line 2 lta href=defgtdefltagt
ltPREgt
Example and Listing XMP LISTING
The XMP and LISTING elements are similar to the PRE element but they have a different syntax Their content is declared as CDATA which means that no markup except the end-tag open delimiter-in-context is recognized (see 96 Delimiter Recognition of [SGML])
Since CDATA declared content has a number of unfortunate interactions with processing techniques and tends to be used and implemented inconsistently HTML documents should not contain XMP nor LISTING elements -- the PRE tag is more expressive and more consistently supported
16
The LISTING element should be rendered so that at least 132 characters fit on a line The XMP element should be rendered so that at least 80 characters fit on a line but is otherwise identical to the LISTING element
Address ADDRESS
The ADDRESS element contains such information as address signature and authorship often at the beginning or end of the body of a document
Typically the ADDRESS element is rendered in an italic typeface and may be indented
Example of use
ltADDRESSgt
Kishore TechnologiesltBRgt
Beside TCSltBRgt
BangloreltBRgt
Mobile 7842634463
ltADDRESSgt
Block Quote BLOCKQUOTE
The BLOCKQUOTE element contains text quoted from another source
A typical rendering might be a slight extra left and right indent andor italic font The BLOCKQUOTE typically provides space above and below the quote
Single-font rendition may reflect the quotation style of Internet mail by putting a vertical line of graphic characters such as the greater than symbol (gt) in the left margin
Example of use
I think the play ends
ltBLOCKQUOTEgt
ltPgtSoft you now the fair Ophelia Nymph in thy orisons be all
my sins remembered
17
ltBLOCKQUOTEgt
but I am not sure
List Elements
HTML includes a number of list elements They may be used in combination for example a OL may be nested in an LI element of a UL
The COMPACT attribute suggests that a compact rendering be used
Unordered List UL LI
The UL represents a list of items -- typically rendered as a bulleted list
The content of a UL element is a sequence of LI elements For example
ltULgt
ltLIgtFirst list item
ltLIgtSecond list item
ltpgtsecond paragraph of second item
ltLIgtThird list item
ltULgt
Ordered List OL
The OL element represents an ordered list of items sorted by sequence or order of importance It is typically rendered as a numbered list
The content of a OL element is a sequence of LI elements For example
ltOLgt
ltLIgtClick the Web button to open URI window
ltLIgtEnter the URI number in the text field of the Open URI
window The Web document you specified is displayed
ltolgt
18
ltligtsubstep 1
ltligtsubstep 2
ltolgt
ltLIgtClick highlighted text to move from one link to another
ltOLgt
Directory List DIR
The DIR element is similar to the UL element It represents a list of short items typically up to 20 characters each Items in a directory list may be arranged in columns typically 24 characters wide
The content of a DIR element is a sequence of LI elements Nested block elements are not allowed in the content of DIR elements For example
ltDIRgt
ltLIgtA-HltLIgtI-M
ltLIgtM-RltLIgtS-Z
ltDIRgt
Menu List MENU
The MENU element is a list of items with typically one line per item The menu list style is typically more compact than the style of an unordered list
The content of a MENU element is a sequence of LI elements Nested block elements are not allowed in the content of MENU elements For example
ltMENUgt
ltLIgtFirst item in the list
ltLIgtSecond item in the list
ltLIgtThird item in the list
19
ltMENUgt
Definition List DL DT DD
A definition list is a list of terms and corresponding definitions Definition lists are typically formatted with the term flush-left and the definition formatted paragraph style indented after the term
The content of a DL element is a sequence of DT elements andor DD elements usually in pairs Multiple DT may be paired with a single DD element Documents should not contain multiple consecutive DD elements
Example of use
ltDLgt
ltDTgtTermltDDgtThis is the definition of the first term
ltDTgtTermltDDgtThis is the definition of the second term
ltDLgt
If the DT term does not fit in the DT column (typically one third of the display area) it may be extended across the page with the DD section moved to the next line or it may be wrapped onto successive lines of the left hand column
The optional COMPACT attribute suggests that a compact rendering be used because the list items are small andor the entire list is large
Unless the COMPACT attribute is present an HTML user agent may leave white space between successive DT DD pairs The COMPACT attribute may also reduce the width of the left-hand (DT) column
ltDL COMPACTgt
ltDTgtTermltDDgtThis is the first definition in compact format
ltDTgtTermltDDgtThis is the second definition in compact format
ltDLgt
Phrase Markup
Phrases may be marked up according to idiomatic usage typographic appearance or for use as hyperlink anchors
20
User agents must render highlighted phrases distinctly from plain text Additionally EM content must be rendered as distinct from STRONG content and B content must rendered as distinct from I content
Phrase elements may be nested within the content of other phrase elements however HTML user agents may render nested phrase elements indistinctly from non-nested elements
plain ltBgtbold ltIgtitalicltIgtltBgt may be rendered
the same as plain ltBgtbold ltBgtltIgtitalicltIgt
Idiomatic Elements
Phrases may be marked up to indicate certain idioms
Citation CITE
The CITE element is used to indicate the title of a book or other citation It is typically rendered as italics For example
He just couldnt get enough of ltcitegtThe Grapes of Wrathltcitegt
Code CODE
The CODE element indicates an example of code typically rendered in a mono-spaced font The CODE element is intended for short words or phrases of code the PRE block structuring element (section Preformatted Text PRE) is more appropriate for multiple-line listings For example
The expression ltcodegtx += 1ltcodegt
is short for ltcodegtx = x + 1ltcodegt
Emphasis EM
The EM element indicates an emphasized phrase typically rendered as italics For example
A singular subject ltemgtalwaysltemgt takes a singular verb
Keyboard KBD
The KBD element indicates text typed by a user typically rendered in a mono-spaced font This is commonly used in instruction manuals For example
21
Enter ltkbdgtFIND ITltkbdgt to search the database
Sample SAMP
The SAMP element indicates a sequence of literal characters typically rendered in a mono-spaced font For example
The only word containing the letters ltsampgtmtltsampgt is dreamt
Strong Emphasis STRONG
The STRONG element indicates strong emphasis typically rendered in bold For example
ltstronggtSTOPltstronggt or Ill say ltstronggtSTOPltstronggt again
Variable VAR
The VAR element indicates a placeholder variable typically rendered as italic For example
Type ltSAMPgthtml-check ltVARgtfileltVARgt | moreltSAMPgt
to check ltVARgtfileltVARgt for markup errors
Typographic Elements
Typographic elements are used to specify the format of marked text
Typical renderings for idiomatic elements may vary between user agents If a specific rendering is necessary -- for example when referring to a specific text attribute as in The italic parts are mandatory -- a typographic element can be used to ensure that the intended typography is used where possible
Bold B
The B element indicates bold text Where bold typography is unavailable an alternative representation may be used
Italic I
The I element indicates italic text Where italic typography is unavailable an alternative representation may be used
Teletype TT
22
The TT element indicates teletype (monospaced )text Where a teletype font is unavailable an alternative representation may be used
Anchor A
The A element indicates a hyperlink anchor (see section Hyperlinks) At least one of the NAME and HREF attributes should be present Attributes of the A element
HREF
gives the URI of the head anchor of a hyperlink
NAME
gives the name of the anchor and makes it available as a head of a hyperlink
TITLE
suggests a title for the destination resource --- advisory only The TITLE attribute may be used
for display prior to accessing the destination resource for example as a margin note or on a small box while the mouse is over the anchor or while the document is being loaded
for resources that do not include a title such as graphics plain text and Gopher menus for use as a window title
REL
The REL attribute gives the relationship(s) described by the hyperlink The value is a whitespace separated list of relationship names The semantics of link relationships are not specified in this document
REV
Same as the REL attribute but the semantics of the relationship are in the reverse direction A link from A to B with REL=X expresses the same relationship as a link from B to A with REV=X An anchor may have both REL and REV attributes
URN
specifies a preferred more persistent identifier for the head anchor of the hyperlink The syntax and semantics of the URN attribute are not yet specified
METHODS
23
specifies methods to be used in accessing the destination as a whitespace-separated list of names The set of applicable names is a function of the scheme of the URI in the HREF attribute For similar reasons as for the TITLE attribute it may be useful to include the information in advance in the link For example the HTML user agent may chose a different rendering as a function of the methods allowed for example something that is searchable may get a different icon
Line Break BR
The BR element specifies a line break between words (see section Characters Words and Paragraphs) For example
ltPgt Pease porridge hotltBRgt
Pease porridge coldltBRgt
Pease porridge in the potltBRgt
Nine days old
Horizontal Rule HR
The HR element is a divider between sections of text typically a full width horizontal rule or equivalent graphic For example
ltHRgt
ltADDRESSgtFebruary 8 1995 CERNltADDRESSgt
ltBODYgt
Image IMG
The IMG element refers to an image or icon via a hyperlink (see section Simultaneous Presentation of Image Resources)
HTML user agents may process the value of the ALT attribute as an alternative to processing the image resource indicated by the SRC attribute (22)
Attributes of the IMG element
ALIGN
Alignment of the image with respect to the text baseline
`TOP specifies that the top of the image aligns with the tallest item on the line containing the image
24
`MIDDLE specifies that the center of the image aligns with the baseline of the line containing the image
`BOTTOM specifies that the bottom of the image aligns with the baseline of the line containing the image
ALT
Text to use in place of the referenced image resource for example due to processing constraints or user preference
ISMAP
indicates an image map (see section Image Maps)
SRC
Specifies the URI of the image resource (23)
Examples of use
ltIMG SRC=trianglexbm ALT=Warninggt Be sure to read these instructions
lta href=httpmachinehtbinimagemapsamplegt
ltIMG SRC=samplexbm ISMAPgt
ltagt
Advantages
Easy to use Loose syntax (although being too flexible will not comply with standards) Supported on almost every browser if not all browsers Widely used established on almost every website if not all websites Very similar to XML syntax which is increasingly used for data storage Free - You need not buy any software Easy to learn amp code even for novice programmers
Disadvantages
It cannot produce dynamic output alone since it is a static language Sometimes the structuring of HTML documents is hard to grasp You have to keep up with deprecated tags and make sure not to use them Deprecated tags appear because another language that works with HTML has
replaced the original work of the tag thus the other language needs to be learned (most of the time it is CSS)
25
Security features offered by HTML are limited
Conclusion
HTML is used to build web sites and HTML5 improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements and how to recover from errors
Some of the new features in HTML5 are functions for embedding audio video graphics client-side data storage and interactive documents HTML5 also contains new elements like ltnavgt ltheadergt ltfootergt and ltfiguregt
References
httpenwikipediaorgwikiHTML httpwwww3schoolscomhtmldefaultasp httpwwwanswerscomtopichtml
- Definition of HTML
-
12
and the header value is taken from the value of the CONTENT attribute HTTP header names are not case sensitive
NAME Specifies the name of the namevalue pair If not present HTTP-EQUIV gives the name
CONTENT specifies the value of the namevalue pair
Examples
If the document contains
ltMETA HTTP-EQUIV=Expires
CONTENT=Tue 04 Dec 1993 212902 GMTgt
ltmeta http-equiv=Keywords CONTENT=Fredgt
ltMETA HTTP-EQUIV=Reply-to
content=fieldingicsuciedu (Roy Fielding)gt
ltMeta Http-equiv=Keywords CONTENT=Barneygt
then the server may include the following header fields
Expires Tue 04 Dec 1993 212902 GMT
Keywords Fred Barney
Reply-to fieldingicsuciedu (Roy Fielding)
as part of the HTTP response to a `GET or `HEAD request for that document
An HTTP server must not use the META element to form an HTTP response header unless the HTTP-EQUIV attribute is present
An HTTP server may disregard any META elements that specify information controlled by the HTTP server for example `Server `Date and `Last-modified
Next Id NEXTID
The NEXTID element is included for historical reasons only HTML documents should not contain NEXTID elements
13
The NEXTID element gives a hint for the name to use for a new A element when editing an HTML document It should be distinct from all NAME attribute values on A elements For example
ltNEXTID N=Z27gt
Body BODY
The BODY element contains the text flow of the document including headings paragraphs lists etc
For example
ltBODYgt
lth1gtImportant Stufflth1gt
ltpgtExplanation about important stuff
ltBODYgt
Headings H1 H6
The six heading elements H1 through H6 denote section headings Although the order and occurrence of headings is not constrained by the HTML DTD documents should not skip levels (for example from H1 to H3) as converting such documents to other representations is often problematic
Example of use
ltH1gtThis is a headingltH1gt
Here is some text
ltH2gtSecond level headingltH2gt
Here is some more text
Typical renderings are
H1
Bold very-large font centered One or two blank lines above and below
H2
14
Bold large font flush-left One or two blank lines above and below
H3
Italic large font slightly indented from the left margin One or two blank lines above and below
H4
Bold normal font indented more than H3 One blank line above and below
H5
Italic normal font indented as H4 One blank line above
H6
Bold indented same as normal text more than H5 One blank line above
Block Structuring Elements
Block structuring elements include paragraphs lists and block quotes They must not contain heading elements but they may contain phrase markup and in some cases they may be nested
Paragraph P
The P element indicates a paragraph The exact indentation leading space etc of a paragraph is not specified and may be a function of other tags style sheets etcTypically paragraphs are surrounded by a vertical space of one line or half a line The first line in a paragraph is indented in some cases
Example of use
ltH1gtThis Heading Precedes the ParagraphltH1gt
ltPgtThis is the text of the first paragraph
ltPgtThis is the text of the second paragraph Although you do not need to start paragraphs on new lines maintaining this convention facilitates document maintenanceltPgt
ltPgtThis is the text of a third paragraphltPgt
Preformatted Text PRE
15
The PRE element represents a character cell block of text and is suitable for text that has been formatted for a monospaced font
The PRE tag may be used with the optional WIDTH attribute The WIDTH attribute specifies the maximum number of characters for a line and allows the HTML user agent to select a suitable font and indentation
Within preformatted text
Line breaks within the text are rendered as a move to the beginning of the next line (15)
Anchor elements and phrase markup may be used (16)
Elements that define paragraph formatting (headings address etc) must not be used (17)
The horizontal tab character (code position 9 in the HTML document character set) must be interpreted as the smallest positive nonzero number of spaces which will leave the number of characters so far on the line as a multiple of 8 Documents should not contain tab characters as they are not supported consistently
Example of use
ltPREgt
Line 1
Line 2 is to the right of line 1 lta href=abcgtabcltagt
Line 3 aligns with line 2 lta href=defgtdefltagt
ltPREgt
Example and Listing XMP LISTING
The XMP and LISTING elements are similar to the PRE element but they have a different syntax Their content is declared as CDATA which means that no markup except the end-tag open delimiter-in-context is recognized (see 96 Delimiter Recognition of [SGML])
Since CDATA declared content has a number of unfortunate interactions with processing techniques and tends to be used and implemented inconsistently HTML documents should not contain XMP nor LISTING elements -- the PRE tag is more expressive and more consistently supported
16
The LISTING element should be rendered so that at least 132 characters fit on a line The XMP element should be rendered so that at least 80 characters fit on a line but is otherwise identical to the LISTING element
Address ADDRESS
The ADDRESS element contains such information as address signature and authorship often at the beginning or end of the body of a document
Typically the ADDRESS element is rendered in an italic typeface and may be indented
Example of use
ltADDRESSgt
Kishore TechnologiesltBRgt
Beside TCSltBRgt
BangloreltBRgt
Mobile 7842634463
ltADDRESSgt
Block Quote BLOCKQUOTE
The BLOCKQUOTE element contains text quoted from another source
A typical rendering might be a slight extra left and right indent andor italic font The BLOCKQUOTE typically provides space above and below the quote
Single-font rendition may reflect the quotation style of Internet mail by putting a vertical line of graphic characters such as the greater than symbol (gt) in the left margin
Example of use
I think the play ends
ltBLOCKQUOTEgt
ltPgtSoft you now the fair Ophelia Nymph in thy orisons be all
my sins remembered
17
ltBLOCKQUOTEgt
but I am not sure
List Elements
HTML includes a number of list elements They may be used in combination for example a OL may be nested in an LI element of a UL
The COMPACT attribute suggests that a compact rendering be used
Unordered List UL LI
The UL represents a list of items -- typically rendered as a bulleted list
The content of a UL element is a sequence of LI elements For example
ltULgt
ltLIgtFirst list item
ltLIgtSecond list item
ltpgtsecond paragraph of second item
ltLIgtThird list item
ltULgt
Ordered List OL
The OL element represents an ordered list of items sorted by sequence or order of importance It is typically rendered as a numbered list
The content of a OL element is a sequence of LI elements For example
ltOLgt
ltLIgtClick the Web button to open URI window
ltLIgtEnter the URI number in the text field of the Open URI
window The Web document you specified is displayed
ltolgt
18
ltligtsubstep 1
ltligtsubstep 2
ltolgt
ltLIgtClick highlighted text to move from one link to another
ltOLgt
Directory List DIR
The DIR element is similar to the UL element It represents a list of short items typically up to 20 characters each Items in a directory list may be arranged in columns typically 24 characters wide
The content of a DIR element is a sequence of LI elements Nested block elements are not allowed in the content of DIR elements For example
ltDIRgt
ltLIgtA-HltLIgtI-M
ltLIgtM-RltLIgtS-Z
ltDIRgt
Menu List MENU
The MENU element is a list of items with typically one line per item The menu list style is typically more compact than the style of an unordered list
The content of a MENU element is a sequence of LI elements Nested block elements are not allowed in the content of MENU elements For example
ltMENUgt
ltLIgtFirst item in the list
ltLIgtSecond item in the list
ltLIgtThird item in the list
19
ltMENUgt
Definition List DL DT DD
A definition list is a list of terms and corresponding definitions Definition lists are typically formatted with the term flush-left and the definition formatted paragraph style indented after the term
The content of a DL element is a sequence of DT elements andor DD elements usually in pairs Multiple DT may be paired with a single DD element Documents should not contain multiple consecutive DD elements
Example of use
ltDLgt
ltDTgtTermltDDgtThis is the definition of the first term
ltDTgtTermltDDgtThis is the definition of the second term
ltDLgt
If the DT term does not fit in the DT column (typically one third of the display area) it may be extended across the page with the DD section moved to the next line or it may be wrapped onto successive lines of the left hand column
The optional COMPACT attribute suggests that a compact rendering be used because the list items are small andor the entire list is large
Unless the COMPACT attribute is present an HTML user agent may leave white space between successive DT DD pairs The COMPACT attribute may also reduce the width of the left-hand (DT) column
ltDL COMPACTgt
ltDTgtTermltDDgtThis is the first definition in compact format
ltDTgtTermltDDgtThis is the second definition in compact format
ltDLgt
Phrase Markup
Phrases may be marked up according to idiomatic usage typographic appearance or for use as hyperlink anchors
20
User agents must render highlighted phrases distinctly from plain text Additionally EM content must be rendered as distinct from STRONG content and B content must rendered as distinct from I content
Phrase elements may be nested within the content of other phrase elements however HTML user agents may render nested phrase elements indistinctly from non-nested elements
plain ltBgtbold ltIgtitalicltIgtltBgt may be rendered
the same as plain ltBgtbold ltBgtltIgtitalicltIgt
Idiomatic Elements
Phrases may be marked up to indicate certain idioms
Citation CITE
The CITE element is used to indicate the title of a book or other citation It is typically rendered as italics For example
He just couldnt get enough of ltcitegtThe Grapes of Wrathltcitegt
Code CODE
The CODE element indicates an example of code typically rendered in a mono-spaced font The CODE element is intended for short words or phrases of code the PRE block structuring element (section Preformatted Text PRE) is more appropriate for multiple-line listings For example
The expression ltcodegtx += 1ltcodegt
is short for ltcodegtx = x + 1ltcodegt
Emphasis EM
The EM element indicates an emphasized phrase typically rendered as italics For example
A singular subject ltemgtalwaysltemgt takes a singular verb
Keyboard KBD
The KBD element indicates text typed by a user typically rendered in a mono-spaced font This is commonly used in instruction manuals For example
21
Enter ltkbdgtFIND ITltkbdgt to search the database
Sample SAMP
The SAMP element indicates a sequence of literal characters typically rendered in a mono-spaced font For example
The only word containing the letters ltsampgtmtltsampgt is dreamt
Strong Emphasis STRONG
The STRONG element indicates strong emphasis typically rendered in bold For example
ltstronggtSTOPltstronggt or Ill say ltstronggtSTOPltstronggt again
Variable VAR
The VAR element indicates a placeholder variable typically rendered as italic For example
Type ltSAMPgthtml-check ltVARgtfileltVARgt | moreltSAMPgt
to check ltVARgtfileltVARgt for markup errors
Typographic Elements
Typographic elements are used to specify the format of marked text
Typical renderings for idiomatic elements may vary between user agents If a specific rendering is necessary -- for example when referring to a specific text attribute as in The italic parts are mandatory -- a typographic element can be used to ensure that the intended typography is used where possible
Bold B
The B element indicates bold text Where bold typography is unavailable an alternative representation may be used
Italic I
The I element indicates italic text Where italic typography is unavailable an alternative representation may be used
Teletype TT
22
The TT element indicates teletype (monospaced )text Where a teletype font is unavailable an alternative representation may be used
Anchor A
The A element indicates a hyperlink anchor (see section Hyperlinks) At least one of the NAME and HREF attributes should be present Attributes of the A element
HREF
gives the URI of the head anchor of a hyperlink
NAME
gives the name of the anchor and makes it available as a head of a hyperlink
TITLE
suggests a title for the destination resource --- advisory only The TITLE attribute may be used
for display prior to accessing the destination resource for example as a margin note or on a small box while the mouse is over the anchor or while the document is being loaded
for resources that do not include a title such as graphics plain text and Gopher menus for use as a window title
REL
The REL attribute gives the relationship(s) described by the hyperlink The value is a whitespace separated list of relationship names The semantics of link relationships are not specified in this document
REV
Same as the REL attribute but the semantics of the relationship are in the reverse direction A link from A to B with REL=X expresses the same relationship as a link from B to A with REV=X An anchor may have both REL and REV attributes
URN
specifies a preferred more persistent identifier for the head anchor of the hyperlink The syntax and semantics of the URN attribute are not yet specified
METHODS
23
specifies methods to be used in accessing the destination as a whitespace-separated list of names The set of applicable names is a function of the scheme of the URI in the HREF attribute For similar reasons as for the TITLE attribute it may be useful to include the information in advance in the link For example the HTML user agent may chose a different rendering as a function of the methods allowed for example something that is searchable may get a different icon
Line Break BR
The BR element specifies a line break between words (see section Characters Words and Paragraphs) For example
ltPgt Pease porridge hotltBRgt
Pease porridge coldltBRgt
Pease porridge in the potltBRgt
Nine days old
Horizontal Rule HR
The HR element is a divider between sections of text typically a full width horizontal rule or equivalent graphic For example
ltHRgt
ltADDRESSgtFebruary 8 1995 CERNltADDRESSgt
ltBODYgt
Image IMG
The IMG element refers to an image or icon via a hyperlink (see section Simultaneous Presentation of Image Resources)
HTML user agents may process the value of the ALT attribute as an alternative to processing the image resource indicated by the SRC attribute (22)
Attributes of the IMG element
ALIGN
Alignment of the image with respect to the text baseline
`TOP specifies that the top of the image aligns with the tallest item on the line containing the image
24
`MIDDLE specifies that the center of the image aligns with the baseline of the line containing the image
`BOTTOM specifies that the bottom of the image aligns with the baseline of the line containing the image
ALT
Text to use in place of the referenced image resource for example due to processing constraints or user preference
ISMAP
indicates an image map (see section Image Maps)
SRC
Specifies the URI of the image resource (23)
Examples of use
ltIMG SRC=trianglexbm ALT=Warninggt Be sure to read these instructions
lta href=httpmachinehtbinimagemapsamplegt
ltIMG SRC=samplexbm ISMAPgt
ltagt
Advantages
Easy to use Loose syntax (although being too flexible will not comply with standards) Supported on almost every browser if not all browsers Widely used established on almost every website if not all websites Very similar to XML syntax which is increasingly used for data storage Free - You need not buy any software Easy to learn amp code even for novice programmers
Disadvantages
It cannot produce dynamic output alone since it is a static language Sometimes the structuring of HTML documents is hard to grasp You have to keep up with deprecated tags and make sure not to use them Deprecated tags appear because another language that works with HTML has
replaced the original work of the tag thus the other language needs to be learned (most of the time it is CSS)
25
Security features offered by HTML are limited
Conclusion
HTML is used to build web sites and HTML5 improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements and how to recover from errors
Some of the new features in HTML5 are functions for embedding audio video graphics client-side data storage and interactive documents HTML5 also contains new elements like ltnavgt ltheadergt ltfootergt and ltfiguregt
References
httpenwikipediaorgwikiHTML httpwwww3schoolscomhtmldefaultasp httpwwwanswerscomtopichtml
- Definition of HTML
-
13
The NEXTID element gives a hint for the name to use for a new A element when editing an HTML document It should be distinct from all NAME attribute values on A elements For example
ltNEXTID N=Z27gt
Body BODY
The BODY element contains the text flow of the document including headings paragraphs lists etc
For example
ltBODYgt
lth1gtImportant Stufflth1gt
ltpgtExplanation about important stuff
ltBODYgt
Headings H1 H6
The six heading elements H1 through H6 denote section headings Although the order and occurrence of headings is not constrained by the HTML DTD documents should not skip levels (for example from H1 to H3) as converting such documents to other representations is often problematic
Example of use
ltH1gtThis is a headingltH1gt
Here is some text
ltH2gtSecond level headingltH2gt
Here is some more text
Typical renderings are
H1
Bold very-large font centered One or two blank lines above and below
H2
14
Bold large font flush-left One or two blank lines above and below
H3
Italic large font slightly indented from the left margin One or two blank lines above and below
H4
Bold normal font indented more than H3 One blank line above and below
H5
Italic normal font indented as H4 One blank line above
H6
Bold indented same as normal text more than H5 One blank line above
Block Structuring Elements
Block structuring elements include paragraphs lists and block quotes They must not contain heading elements but they may contain phrase markup and in some cases they may be nested
Paragraph P
The P element indicates a paragraph The exact indentation leading space etc of a paragraph is not specified and may be a function of other tags style sheets etcTypically paragraphs are surrounded by a vertical space of one line or half a line The first line in a paragraph is indented in some cases
Example of use
ltH1gtThis Heading Precedes the ParagraphltH1gt
ltPgtThis is the text of the first paragraph
ltPgtThis is the text of the second paragraph Although you do not need to start paragraphs on new lines maintaining this convention facilitates document maintenanceltPgt
ltPgtThis is the text of a third paragraphltPgt
Preformatted Text PRE
15
The PRE element represents a character cell block of text and is suitable for text that has been formatted for a monospaced font
The PRE tag may be used with the optional WIDTH attribute The WIDTH attribute specifies the maximum number of characters for a line and allows the HTML user agent to select a suitable font and indentation
Within preformatted text
Line breaks within the text are rendered as a move to the beginning of the next line (15)
Anchor elements and phrase markup may be used (16)
Elements that define paragraph formatting (headings address etc) must not be used (17)
The horizontal tab character (code position 9 in the HTML document character set) must be interpreted as the smallest positive nonzero number of spaces which will leave the number of characters so far on the line as a multiple of 8 Documents should not contain tab characters as they are not supported consistently
Example of use
ltPREgt
Line 1
Line 2 is to the right of line 1 lta href=abcgtabcltagt
Line 3 aligns with line 2 lta href=defgtdefltagt
ltPREgt
Example and Listing XMP LISTING
The XMP and LISTING elements are similar to the PRE element but they have a different syntax Their content is declared as CDATA which means that no markup except the end-tag open delimiter-in-context is recognized (see 96 Delimiter Recognition of [SGML])
Since CDATA declared content has a number of unfortunate interactions with processing techniques and tends to be used and implemented inconsistently HTML documents should not contain XMP nor LISTING elements -- the PRE tag is more expressive and more consistently supported
16
The LISTING element should be rendered so that at least 132 characters fit on a line The XMP element should be rendered so that at least 80 characters fit on a line but is otherwise identical to the LISTING element
Address ADDRESS
The ADDRESS element contains such information as address signature and authorship often at the beginning or end of the body of a document
Typically the ADDRESS element is rendered in an italic typeface and may be indented
Example of use
ltADDRESSgt
Kishore TechnologiesltBRgt
Beside TCSltBRgt
BangloreltBRgt
Mobile 7842634463
ltADDRESSgt
Block Quote BLOCKQUOTE
The BLOCKQUOTE element contains text quoted from another source
A typical rendering might be a slight extra left and right indent andor italic font The BLOCKQUOTE typically provides space above and below the quote
Single-font rendition may reflect the quotation style of Internet mail by putting a vertical line of graphic characters such as the greater than symbol (gt) in the left margin
Example of use
I think the play ends
ltBLOCKQUOTEgt
ltPgtSoft you now the fair Ophelia Nymph in thy orisons be all
my sins remembered
17
ltBLOCKQUOTEgt
but I am not sure
List Elements
HTML includes a number of list elements They may be used in combination for example a OL may be nested in an LI element of a UL
The COMPACT attribute suggests that a compact rendering be used
Unordered List UL LI
The UL represents a list of items -- typically rendered as a bulleted list
The content of a UL element is a sequence of LI elements For example
ltULgt
ltLIgtFirst list item
ltLIgtSecond list item
ltpgtsecond paragraph of second item
ltLIgtThird list item
ltULgt
Ordered List OL
The OL element represents an ordered list of items sorted by sequence or order of importance It is typically rendered as a numbered list
The content of a OL element is a sequence of LI elements For example
ltOLgt
ltLIgtClick the Web button to open URI window
ltLIgtEnter the URI number in the text field of the Open URI
window The Web document you specified is displayed
ltolgt
18
ltligtsubstep 1
ltligtsubstep 2
ltolgt
ltLIgtClick highlighted text to move from one link to another
ltOLgt
Directory List DIR
The DIR element is similar to the UL element It represents a list of short items typically up to 20 characters each Items in a directory list may be arranged in columns typically 24 characters wide
The content of a DIR element is a sequence of LI elements Nested block elements are not allowed in the content of DIR elements For example
ltDIRgt
ltLIgtA-HltLIgtI-M
ltLIgtM-RltLIgtS-Z
ltDIRgt
Menu List MENU
The MENU element is a list of items with typically one line per item The menu list style is typically more compact than the style of an unordered list
The content of a MENU element is a sequence of LI elements Nested block elements are not allowed in the content of MENU elements For example
ltMENUgt
ltLIgtFirst item in the list
ltLIgtSecond item in the list
ltLIgtThird item in the list
19
ltMENUgt
Definition List DL DT DD
A definition list is a list of terms and corresponding definitions Definition lists are typically formatted with the term flush-left and the definition formatted paragraph style indented after the term
The content of a DL element is a sequence of DT elements andor DD elements usually in pairs Multiple DT may be paired with a single DD element Documents should not contain multiple consecutive DD elements
Example of use
ltDLgt
ltDTgtTermltDDgtThis is the definition of the first term
ltDTgtTermltDDgtThis is the definition of the second term
ltDLgt
If the DT term does not fit in the DT column (typically one third of the display area) it may be extended across the page with the DD section moved to the next line or it may be wrapped onto successive lines of the left hand column
The optional COMPACT attribute suggests that a compact rendering be used because the list items are small andor the entire list is large
Unless the COMPACT attribute is present an HTML user agent may leave white space between successive DT DD pairs The COMPACT attribute may also reduce the width of the left-hand (DT) column
ltDL COMPACTgt
ltDTgtTermltDDgtThis is the first definition in compact format
ltDTgtTermltDDgtThis is the second definition in compact format
ltDLgt
Phrase Markup
Phrases may be marked up according to idiomatic usage typographic appearance or for use as hyperlink anchors
20
User agents must render highlighted phrases distinctly from plain text Additionally EM content must be rendered as distinct from STRONG content and B content must rendered as distinct from I content
Phrase elements may be nested within the content of other phrase elements however HTML user agents may render nested phrase elements indistinctly from non-nested elements
plain ltBgtbold ltIgtitalicltIgtltBgt may be rendered
the same as plain ltBgtbold ltBgtltIgtitalicltIgt
Idiomatic Elements
Phrases may be marked up to indicate certain idioms
Citation CITE
The CITE element is used to indicate the title of a book or other citation It is typically rendered as italics For example
He just couldnt get enough of ltcitegtThe Grapes of Wrathltcitegt
Code CODE
The CODE element indicates an example of code typically rendered in a mono-spaced font The CODE element is intended for short words or phrases of code the PRE block structuring element (section Preformatted Text PRE) is more appropriate for multiple-line listings For example
The expression ltcodegtx += 1ltcodegt
is short for ltcodegtx = x + 1ltcodegt
Emphasis EM
The EM element indicates an emphasized phrase typically rendered as italics For example
A singular subject ltemgtalwaysltemgt takes a singular verb
Keyboard KBD
The KBD element indicates text typed by a user typically rendered in a mono-spaced font This is commonly used in instruction manuals For example
21
Enter ltkbdgtFIND ITltkbdgt to search the database
Sample SAMP
The SAMP element indicates a sequence of literal characters typically rendered in a mono-spaced font For example
The only word containing the letters ltsampgtmtltsampgt is dreamt
Strong Emphasis STRONG
The STRONG element indicates strong emphasis typically rendered in bold For example
ltstronggtSTOPltstronggt or Ill say ltstronggtSTOPltstronggt again
Variable VAR
The VAR element indicates a placeholder variable typically rendered as italic For example
Type ltSAMPgthtml-check ltVARgtfileltVARgt | moreltSAMPgt
to check ltVARgtfileltVARgt for markup errors
Typographic Elements
Typographic elements are used to specify the format of marked text
Typical renderings for idiomatic elements may vary between user agents If a specific rendering is necessary -- for example when referring to a specific text attribute as in The italic parts are mandatory -- a typographic element can be used to ensure that the intended typography is used where possible
Bold B
The B element indicates bold text Where bold typography is unavailable an alternative representation may be used
Italic I
The I element indicates italic text Where italic typography is unavailable an alternative representation may be used
Teletype TT
22
The TT element indicates teletype (monospaced )text Where a teletype font is unavailable an alternative representation may be used
Anchor A
The A element indicates a hyperlink anchor (see section Hyperlinks) At least one of the NAME and HREF attributes should be present Attributes of the A element
HREF
gives the URI of the head anchor of a hyperlink
NAME
gives the name of the anchor and makes it available as a head of a hyperlink
TITLE
suggests a title for the destination resource --- advisory only The TITLE attribute may be used
for display prior to accessing the destination resource for example as a margin note or on a small box while the mouse is over the anchor or while the document is being loaded
for resources that do not include a title such as graphics plain text and Gopher menus for use as a window title
REL
The REL attribute gives the relationship(s) described by the hyperlink The value is a whitespace separated list of relationship names The semantics of link relationships are not specified in this document
REV
Same as the REL attribute but the semantics of the relationship are in the reverse direction A link from A to B with REL=X expresses the same relationship as a link from B to A with REV=X An anchor may have both REL and REV attributes
URN
specifies a preferred more persistent identifier for the head anchor of the hyperlink The syntax and semantics of the URN attribute are not yet specified
METHODS
23
specifies methods to be used in accessing the destination as a whitespace-separated list of names The set of applicable names is a function of the scheme of the URI in the HREF attribute For similar reasons as for the TITLE attribute it may be useful to include the information in advance in the link For example the HTML user agent may chose a different rendering as a function of the methods allowed for example something that is searchable may get a different icon
Line Break BR
The BR element specifies a line break between words (see section Characters Words and Paragraphs) For example
ltPgt Pease porridge hotltBRgt
Pease porridge coldltBRgt
Pease porridge in the potltBRgt
Nine days old
Horizontal Rule HR
The HR element is a divider between sections of text typically a full width horizontal rule or equivalent graphic For example
ltHRgt
ltADDRESSgtFebruary 8 1995 CERNltADDRESSgt
ltBODYgt
Image IMG
The IMG element refers to an image or icon via a hyperlink (see section Simultaneous Presentation of Image Resources)
HTML user agents may process the value of the ALT attribute as an alternative to processing the image resource indicated by the SRC attribute (22)
Attributes of the IMG element
ALIGN
Alignment of the image with respect to the text baseline
`TOP specifies that the top of the image aligns with the tallest item on the line containing the image
24
`MIDDLE specifies that the center of the image aligns with the baseline of the line containing the image
`BOTTOM specifies that the bottom of the image aligns with the baseline of the line containing the image
ALT
Text to use in place of the referenced image resource for example due to processing constraints or user preference
ISMAP
indicates an image map (see section Image Maps)
SRC
Specifies the URI of the image resource (23)
Examples of use
ltIMG SRC=trianglexbm ALT=Warninggt Be sure to read these instructions
lta href=httpmachinehtbinimagemapsamplegt
ltIMG SRC=samplexbm ISMAPgt
ltagt
Advantages
Easy to use Loose syntax (although being too flexible will not comply with standards) Supported on almost every browser if not all browsers Widely used established on almost every website if not all websites Very similar to XML syntax which is increasingly used for data storage Free - You need not buy any software Easy to learn amp code even for novice programmers
Disadvantages
It cannot produce dynamic output alone since it is a static language Sometimes the structuring of HTML documents is hard to grasp You have to keep up with deprecated tags and make sure not to use them Deprecated tags appear because another language that works with HTML has
replaced the original work of the tag thus the other language needs to be learned (most of the time it is CSS)
25
Security features offered by HTML are limited
Conclusion
HTML is used to build web sites and HTML5 improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements and how to recover from errors
Some of the new features in HTML5 are functions for embedding audio video graphics client-side data storage and interactive documents HTML5 also contains new elements like ltnavgt ltheadergt ltfootergt and ltfiguregt
References
httpenwikipediaorgwikiHTML httpwwww3schoolscomhtmldefaultasp httpwwwanswerscomtopichtml
- Definition of HTML
-
14
Bold large font flush-left One or two blank lines above and below
H3
Italic large font slightly indented from the left margin One or two blank lines above and below
H4
Bold normal font indented more than H3 One blank line above and below
H5
Italic normal font indented as H4 One blank line above
H6
Bold indented same as normal text more than H5 One blank line above
Block Structuring Elements
Block structuring elements include paragraphs lists and block quotes They must not contain heading elements but they may contain phrase markup and in some cases they may be nested
Paragraph P
The P element indicates a paragraph The exact indentation leading space etc of a paragraph is not specified and may be a function of other tags style sheets etcTypically paragraphs are surrounded by a vertical space of one line or half a line The first line in a paragraph is indented in some cases
Example of use
ltH1gtThis Heading Precedes the ParagraphltH1gt
ltPgtThis is the text of the first paragraph
ltPgtThis is the text of the second paragraph Although you do not need to start paragraphs on new lines maintaining this convention facilitates document maintenanceltPgt
ltPgtThis is the text of a third paragraphltPgt
Preformatted Text PRE
15
The PRE element represents a character cell block of text and is suitable for text that has been formatted for a monospaced font
The PRE tag may be used with the optional WIDTH attribute The WIDTH attribute specifies the maximum number of characters for a line and allows the HTML user agent to select a suitable font and indentation
Within preformatted text
Line breaks within the text are rendered as a move to the beginning of the next line (15)
Anchor elements and phrase markup may be used (16)
Elements that define paragraph formatting (headings address etc) must not be used (17)
The horizontal tab character (code position 9 in the HTML document character set) must be interpreted as the smallest positive nonzero number of spaces which will leave the number of characters so far on the line as a multiple of 8 Documents should not contain tab characters as they are not supported consistently
Example of use
ltPREgt
Line 1
Line 2 is to the right of line 1 lta href=abcgtabcltagt
Line 3 aligns with line 2 lta href=defgtdefltagt
ltPREgt
Example and Listing XMP LISTING
The XMP and LISTING elements are similar to the PRE element but they have a different syntax Their content is declared as CDATA which means that no markup except the end-tag open delimiter-in-context is recognized (see 96 Delimiter Recognition of [SGML])
Since CDATA declared content has a number of unfortunate interactions with processing techniques and tends to be used and implemented inconsistently HTML documents should not contain XMP nor LISTING elements -- the PRE tag is more expressive and more consistently supported
16
The LISTING element should be rendered so that at least 132 characters fit on a line The XMP element should be rendered so that at least 80 characters fit on a line but is otherwise identical to the LISTING element
Address ADDRESS
The ADDRESS element contains such information as address signature and authorship often at the beginning or end of the body of a document
Typically the ADDRESS element is rendered in an italic typeface and may be indented
Example of use
ltADDRESSgt
Kishore TechnologiesltBRgt
Beside TCSltBRgt
BangloreltBRgt
Mobile 7842634463
ltADDRESSgt
Block Quote BLOCKQUOTE
The BLOCKQUOTE element contains text quoted from another source
A typical rendering might be a slight extra left and right indent andor italic font The BLOCKQUOTE typically provides space above and below the quote
Single-font rendition may reflect the quotation style of Internet mail by putting a vertical line of graphic characters such as the greater than symbol (gt) in the left margin
Example of use
I think the play ends
ltBLOCKQUOTEgt
ltPgtSoft you now the fair Ophelia Nymph in thy orisons be all
my sins remembered
17
ltBLOCKQUOTEgt
but I am not sure
List Elements
HTML includes a number of list elements They may be used in combination for example a OL may be nested in an LI element of a UL
The COMPACT attribute suggests that a compact rendering be used
Unordered List UL LI
The UL represents a list of items -- typically rendered as a bulleted list
The content of a UL element is a sequence of LI elements For example
ltULgt
ltLIgtFirst list item
ltLIgtSecond list item
ltpgtsecond paragraph of second item
ltLIgtThird list item
ltULgt
Ordered List OL
The OL element represents an ordered list of items sorted by sequence or order of importance It is typically rendered as a numbered list
The content of a OL element is a sequence of LI elements For example
ltOLgt
ltLIgtClick the Web button to open URI window
ltLIgtEnter the URI number in the text field of the Open URI
window The Web document you specified is displayed
ltolgt
18
ltligtsubstep 1
ltligtsubstep 2
ltolgt
ltLIgtClick highlighted text to move from one link to another
ltOLgt
Directory List DIR
The DIR element is similar to the UL element It represents a list of short items typically up to 20 characters each Items in a directory list may be arranged in columns typically 24 characters wide
The content of a DIR element is a sequence of LI elements Nested block elements are not allowed in the content of DIR elements For example
ltDIRgt
ltLIgtA-HltLIgtI-M
ltLIgtM-RltLIgtS-Z
ltDIRgt
Menu List MENU
The MENU element is a list of items with typically one line per item The menu list style is typically more compact than the style of an unordered list
The content of a MENU element is a sequence of LI elements Nested block elements are not allowed in the content of MENU elements For example
ltMENUgt
ltLIgtFirst item in the list
ltLIgtSecond item in the list
ltLIgtThird item in the list
19
ltMENUgt
Definition List DL DT DD
A definition list is a list of terms and corresponding definitions Definition lists are typically formatted with the term flush-left and the definition formatted paragraph style indented after the term
The content of a DL element is a sequence of DT elements andor DD elements usually in pairs Multiple DT may be paired with a single DD element Documents should not contain multiple consecutive DD elements
Example of use
ltDLgt
ltDTgtTermltDDgtThis is the definition of the first term
ltDTgtTermltDDgtThis is the definition of the second term
ltDLgt
If the DT term does not fit in the DT column (typically one third of the display area) it may be extended across the page with the DD section moved to the next line or it may be wrapped onto successive lines of the left hand column
The optional COMPACT attribute suggests that a compact rendering be used because the list items are small andor the entire list is large
Unless the COMPACT attribute is present an HTML user agent may leave white space between successive DT DD pairs The COMPACT attribute may also reduce the width of the left-hand (DT) column
ltDL COMPACTgt
ltDTgtTermltDDgtThis is the first definition in compact format
ltDTgtTermltDDgtThis is the second definition in compact format
ltDLgt
Phrase Markup
Phrases may be marked up according to idiomatic usage typographic appearance or for use as hyperlink anchors
20
User agents must render highlighted phrases distinctly from plain text Additionally EM content must be rendered as distinct from STRONG content and B content must rendered as distinct from I content
Phrase elements may be nested within the content of other phrase elements however HTML user agents may render nested phrase elements indistinctly from non-nested elements
plain ltBgtbold ltIgtitalicltIgtltBgt may be rendered
the same as plain ltBgtbold ltBgtltIgtitalicltIgt
Idiomatic Elements
Phrases may be marked up to indicate certain idioms
Citation CITE
The CITE element is used to indicate the title of a book or other citation It is typically rendered as italics For example
He just couldnt get enough of ltcitegtThe Grapes of Wrathltcitegt
Code CODE
The CODE element indicates an example of code typically rendered in a mono-spaced font The CODE element is intended for short words or phrases of code the PRE block structuring element (section Preformatted Text PRE) is more appropriate for multiple-line listings For example
The expression ltcodegtx += 1ltcodegt
is short for ltcodegtx = x + 1ltcodegt
Emphasis EM
The EM element indicates an emphasized phrase typically rendered as italics For example
A singular subject ltemgtalwaysltemgt takes a singular verb
Keyboard KBD
The KBD element indicates text typed by a user typically rendered in a mono-spaced font This is commonly used in instruction manuals For example
21
Enter ltkbdgtFIND ITltkbdgt to search the database
Sample SAMP
The SAMP element indicates a sequence of literal characters typically rendered in a mono-spaced font For example
The only word containing the letters ltsampgtmtltsampgt is dreamt
Strong Emphasis STRONG
The STRONG element indicates strong emphasis typically rendered in bold For example
ltstronggtSTOPltstronggt or Ill say ltstronggtSTOPltstronggt again
Variable VAR
The VAR element indicates a placeholder variable typically rendered as italic For example
Type ltSAMPgthtml-check ltVARgtfileltVARgt | moreltSAMPgt
to check ltVARgtfileltVARgt for markup errors
Typographic Elements
Typographic elements are used to specify the format of marked text
Typical renderings for idiomatic elements may vary between user agents If a specific rendering is necessary -- for example when referring to a specific text attribute as in The italic parts are mandatory -- a typographic element can be used to ensure that the intended typography is used where possible
Bold B
The B element indicates bold text Where bold typography is unavailable an alternative representation may be used
Italic I
The I element indicates italic text Where italic typography is unavailable an alternative representation may be used
Teletype TT
22
The TT element indicates teletype (monospaced )text Where a teletype font is unavailable an alternative representation may be used
Anchor A
The A element indicates a hyperlink anchor (see section Hyperlinks) At least one of the NAME and HREF attributes should be present Attributes of the A element
HREF
gives the URI of the head anchor of a hyperlink
NAME
gives the name of the anchor and makes it available as a head of a hyperlink
TITLE
suggests a title for the destination resource --- advisory only The TITLE attribute may be used
for display prior to accessing the destination resource for example as a margin note or on a small box while the mouse is over the anchor or while the document is being loaded
for resources that do not include a title such as graphics plain text and Gopher menus for use as a window title
REL
The REL attribute gives the relationship(s) described by the hyperlink The value is a whitespace separated list of relationship names The semantics of link relationships are not specified in this document
REV
Same as the REL attribute but the semantics of the relationship are in the reverse direction A link from A to B with REL=X expresses the same relationship as a link from B to A with REV=X An anchor may have both REL and REV attributes
URN
specifies a preferred more persistent identifier for the head anchor of the hyperlink The syntax and semantics of the URN attribute are not yet specified
METHODS
23
specifies methods to be used in accessing the destination as a whitespace-separated list of names The set of applicable names is a function of the scheme of the URI in the HREF attribute For similar reasons as for the TITLE attribute it may be useful to include the information in advance in the link For example the HTML user agent may chose a different rendering as a function of the methods allowed for example something that is searchable may get a different icon
Line Break BR
The BR element specifies a line break between words (see section Characters Words and Paragraphs) For example
ltPgt Pease porridge hotltBRgt
Pease porridge coldltBRgt
Pease porridge in the potltBRgt
Nine days old
Horizontal Rule HR
The HR element is a divider between sections of text typically a full width horizontal rule or equivalent graphic For example
ltHRgt
ltADDRESSgtFebruary 8 1995 CERNltADDRESSgt
ltBODYgt
Image IMG
The IMG element refers to an image or icon via a hyperlink (see section Simultaneous Presentation of Image Resources)
HTML user agents may process the value of the ALT attribute as an alternative to processing the image resource indicated by the SRC attribute (22)
Attributes of the IMG element
ALIGN
Alignment of the image with respect to the text baseline
`TOP specifies that the top of the image aligns with the tallest item on the line containing the image
24
`MIDDLE specifies that the center of the image aligns with the baseline of the line containing the image
`BOTTOM specifies that the bottom of the image aligns with the baseline of the line containing the image
ALT
Text to use in place of the referenced image resource for example due to processing constraints or user preference
ISMAP
indicates an image map (see section Image Maps)
SRC
Specifies the URI of the image resource (23)
Examples of use
ltIMG SRC=trianglexbm ALT=Warninggt Be sure to read these instructions
lta href=httpmachinehtbinimagemapsamplegt
ltIMG SRC=samplexbm ISMAPgt
ltagt
Advantages
Easy to use Loose syntax (although being too flexible will not comply with standards) Supported on almost every browser if not all browsers Widely used established on almost every website if not all websites Very similar to XML syntax which is increasingly used for data storage Free - You need not buy any software Easy to learn amp code even for novice programmers
Disadvantages
It cannot produce dynamic output alone since it is a static language Sometimes the structuring of HTML documents is hard to grasp You have to keep up with deprecated tags and make sure not to use them Deprecated tags appear because another language that works with HTML has
replaced the original work of the tag thus the other language needs to be learned (most of the time it is CSS)
25
Security features offered by HTML are limited
Conclusion
HTML is used to build web sites and HTML5 improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements and how to recover from errors
Some of the new features in HTML5 are functions for embedding audio video graphics client-side data storage and interactive documents HTML5 also contains new elements like ltnavgt ltheadergt ltfootergt and ltfiguregt
References
httpenwikipediaorgwikiHTML httpwwww3schoolscomhtmldefaultasp httpwwwanswerscomtopichtml
- Definition of HTML
-
15
The PRE element represents a character cell block of text and is suitable for text that has been formatted for a monospaced font
The PRE tag may be used with the optional WIDTH attribute The WIDTH attribute specifies the maximum number of characters for a line and allows the HTML user agent to select a suitable font and indentation
Within preformatted text
Line breaks within the text are rendered as a move to the beginning of the next line (15)
Anchor elements and phrase markup may be used (16)
Elements that define paragraph formatting (headings address etc) must not be used (17)
The horizontal tab character (code position 9 in the HTML document character set) must be interpreted as the smallest positive nonzero number of spaces which will leave the number of characters so far on the line as a multiple of 8 Documents should not contain tab characters as they are not supported consistently
Example of use
ltPREgt
Line 1
Line 2 is to the right of line 1 lta href=abcgtabcltagt
Line 3 aligns with line 2 lta href=defgtdefltagt
ltPREgt
Example and Listing XMP LISTING
The XMP and LISTING elements are similar to the PRE element but they have a different syntax Their content is declared as CDATA which means that no markup except the end-tag open delimiter-in-context is recognized (see 96 Delimiter Recognition of [SGML])
Since CDATA declared content has a number of unfortunate interactions with processing techniques and tends to be used and implemented inconsistently HTML documents should not contain XMP nor LISTING elements -- the PRE tag is more expressive and more consistently supported
16
The LISTING element should be rendered so that at least 132 characters fit on a line The XMP element should be rendered so that at least 80 characters fit on a line but is otherwise identical to the LISTING element
Address ADDRESS
The ADDRESS element contains such information as address signature and authorship often at the beginning or end of the body of a document
Typically the ADDRESS element is rendered in an italic typeface and may be indented
Example of use
ltADDRESSgt
Kishore TechnologiesltBRgt
Beside TCSltBRgt
BangloreltBRgt
Mobile 7842634463
ltADDRESSgt
Block Quote BLOCKQUOTE
The BLOCKQUOTE element contains text quoted from another source
A typical rendering might be a slight extra left and right indent andor italic font The BLOCKQUOTE typically provides space above and below the quote
Single-font rendition may reflect the quotation style of Internet mail by putting a vertical line of graphic characters such as the greater than symbol (gt) in the left margin
Example of use
I think the play ends
ltBLOCKQUOTEgt
ltPgtSoft you now the fair Ophelia Nymph in thy orisons be all
my sins remembered
17
ltBLOCKQUOTEgt
but I am not sure
List Elements
HTML includes a number of list elements They may be used in combination for example a OL may be nested in an LI element of a UL
The COMPACT attribute suggests that a compact rendering be used
Unordered List UL LI
The UL represents a list of items -- typically rendered as a bulleted list
The content of a UL element is a sequence of LI elements For example
ltULgt
ltLIgtFirst list item
ltLIgtSecond list item
ltpgtsecond paragraph of second item
ltLIgtThird list item
ltULgt
Ordered List OL
The OL element represents an ordered list of items sorted by sequence or order of importance It is typically rendered as a numbered list
The content of a OL element is a sequence of LI elements For example
ltOLgt
ltLIgtClick the Web button to open URI window
ltLIgtEnter the URI number in the text field of the Open URI
window The Web document you specified is displayed
ltolgt
18
ltligtsubstep 1
ltligtsubstep 2
ltolgt
ltLIgtClick highlighted text to move from one link to another
ltOLgt
Directory List DIR
The DIR element is similar to the UL element It represents a list of short items typically up to 20 characters each Items in a directory list may be arranged in columns typically 24 characters wide
The content of a DIR element is a sequence of LI elements Nested block elements are not allowed in the content of DIR elements For example
ltDIRgt
ltLIgtA-HltLIgtI-M
ltLIgtM-RltLIgtS-Z
ltDIRgt
Menu List MENU
The MENU element is a list of items with typically one line per item The menu list style is typically more compact than the style of an unordered list
The content of a MENU element is a sequence of LI elements Nested block elements are not allowed in the content of MENU elements For example
ltMENUgt
ltLIgtFirst item in the list
ltLIgtSecond item in the list
ltLIgtThird item in the list
19
ltMENUgt
Definition List DL DT DD
A definition list is a list of terms and corresponding definitions Definition lists are typically formatted with the term flush-left and the definition formatted paragraph style indented after the term
The content of a DL element is a sequence of DT elements andor DD elements usually in pairs Multiple DT may be paired with a single DD element Documents should not contain multiple consecutive DD elements
Example of use
ltDLgt
ltDTgtTermltDDgtThis is the definition of the first term
ltDTgtTermltDDgtThis is the definition of the second term
ltDLgt
If the DT term does not fit in the DT column (typically one third of the display area) it may be extended across the page with the DD section moved to the next line or it may be wrapped onto successive lines of the left hand column
The optional COMPACT attribute suggests that a compact rendering be used because the list items are small andor the entire list is large
Unless the COMPACT attribute is present an HTML user agent may leave white space between successive DT DD pairs The COMPACT attribute may also reduce the width of the left-hand (DT) column
ltDL COMPACTgt
ltDTgtTermltDDgtThis is the first definition in compact format
ltDTgtTermltDDgtThis is the second definition in compact format
ltDLgt
Phrase Markup
Phrases may be marked up according to idiomatic usage typographic appearance or for use as hyperlink anchors
20
User agents must render highlighted phrases distinctly from plain text Additionally EM content must be rendered as distinct from STRONG content and B content must rendered as distinct from I content
Phrase elements may be nested within the content of other phrase elements however HTML user agents may render nested phrase elements indistinctly from non-nested elements
plain ltBgtbold ltIgtitalicltIgtltBgt may be rendered
the same as plain ltBgtbold ltBgtltIgtitalicltIgt
Idiomatic Elements
Phrases may be marked up to indicate certain idioms
Citation CITE
The CITE element is used to indicate the title of a book or other citation It is typically rendered as italics For example
He just couldnt get enough of ltcitegtThe Grapes of Wrathltcitegt
Code CODE
The CODE element indicates an example of code typically rendered in a mono-spaced font The CODE element is intended for short words or phrases of code the PRE block structuring element (section Preformatted Text PRE) is more appropriate for multiple-line listings For example
The expression ltcodegtx += 1ltcodegt
is short for ltcodegtx = x + 1ltcodegt
Emphasis EM
The EM element indicates an emphasized phrase typically rendered as italics For example
A singular subject ltemgtalwaysltemgt takes a singular verb
Keyboard KBD
The KBD element indicates text typed by a user typically rendered in a mono-spaced font This is commonly used in instruction manuals For example
21
Enter ltkbdgtFIND ITltkbdgt to search the database
Sample SAMP
The SAMP element indicates a sequence of literal characters typically rendered in a mono-spaced font For example
The only word containing the letters ltsampgtmtltsampgt is dreamt
Strong Emphasis STRONG
The STRONG element indicates strong emphasis typically rendered in bold For example
ltstronggtSTOPltstronggt or Ill say ltstronggtSTOPltstronggt again
Variable VAR
The VAR element indicates a placeholder variable typically rendered as italic For example
Type ltSAMPgthtml-check ltVARgtfileltVARgt | moreltSAMPgt
to check ltVARgtfileltVARgt for markup errors
Typographic Elements
Typographic elements are used to specify the format of marked text
Typical renderings for idiomatic elements may vary between user agents If a specific rendering is necessary -- for example when referring to a specific text attribute as in The italic parts are mandatory -- a typographic element can be used to ensure that the intended typography is used where possible
Bold B
The B element indicates bold text Where bold typography is unavailable an alternative representation may be used
Italic I
The I element indicates italic text Where italic typography is unavailable an alternative representation may be used
Teletype TT
22
The TT element indicates teletype (monospaced )text Where a teletype font is unavailable an alternative representation may be used
Anchor A
The A element indicates a hyperlink anchor (see section Hyperlinks) At least one of the NAME and HREF attributes should be present Attributes of the A element
HREF
gives the URI of the head anchor of a hyperlink
NAME
gives the name of the anchor and makes it available as a head of a hyperlink
TITLE
suggests a title for the destination resource --- advisory only The TITLE attribute may be used
for display prior to accessing the destination resource for example as a margin note or on a small box while the mouse is over the anchor or while the document is being loaded
for resources that do not include a title such as graphics plain text and Gopher menus for use as a window title
REL
The REL attribute gives the relationship(s) described by the hyperlink The value is a whitespace separated list of relationship names The semantics of link relationships are not specified in this document
REV
Same as the REL attribute but the semantics of the relationship are in the reverse direction A link from A to B with REL=X expresses the same relationship as a link from B to A with REV=X An anchor may have both REL and REV attributes
URN
specifies a preferred more persistent identifier for the head anchor of the hyperlink The syntax and semantics of the URN attribute are not yet specified
METHODS
23
specifies methods to be used in accessing the destination as a whitespace-separated list of names The set of applicable names is a function of the scheme of the URI in the HREF attribute For similar reasons as for the TITLE attribute it may be useful to include the information in advance in the link For example the HTML user agent may chose a different rendering as a function of the methods allowed for example something that is searchable may get a different icon
Line Break BR
The BR element specifies a line break between words (see section Characters Words and Paragraphs) For example
ltPgt Pease porridge hotltBRgt
Pease porridge coldltBRgt
Pease porridge in the potltBRgt
Nine days old
Horizontal Rule HR
The HR element is a divider between sections of text typically a full width horizontal rule or equivalent graphic For example
ltHRgt
ltADDRESSgtFebruary 8 1995 CERNltADDRESSgt
ltBODYgt
Image IMG
The IMG element refers to an image or icon via a hyperlink (see section Simultaneous Presentation of Image Resources)
HTML user agents may process the value of the ALT attribute as an alternative to processing the image resource indicated by the SRC attribute (22)
Attributes of the IMG element
ALIGN
Alignment of the image with respect to the text baseline
`TOP specifies that the top of the image aligns with the tallest item on the line containing the image
24
`MIDDLE specifies that the center of the image aligns with the baseline of the line containing the image
`BOTTOM specifies that the bottom of the image aligns with the baseline of the line containing the image
ALT
Text to use in place of the referenced image resource for example due to processing constraints or user preference
ISMAP
indicates an image map (see section Image Maps)
SRC
Specifies the URI of the image resource (23)
Examples of use
ltIMG SRC=trianglexbm ALT=Warninggt Be sure to read these instructions
lta href=httpmachinehtbinimagemapsamplegt
ltIMG SRC=samplexbm ISMAPgt
ltagt
Advantages
Easy to use Loose syntax (although being too flexible will not comply with standards) Supported on almost every browser if not all browsers Widely used established on almost every website if not all websites Very similar to XML syntax which is increasingly used for data storage Free - You need not buy any software Easy to learn amp code even for novice programmers
Disadvantages
It cannot produce dynamic output alone since it is a static language Sometimes the structuring of HTML documents is hard to grasp You have to keep up with deprecated tags and make sure not to use them Deprecated tags appear because another language that works with HTML has
replaced the original work of the tag thus the other language needs to be learned (most of the time it is CSS)
25
Security features offered by HTML are limited
Conclusion
HTML is used to build web sites and HTML5 improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements and how to recover from errors
Some of the new features in HTML5 are functions for embedding audio video graphics client-side data storage and interactive documents HTML5 also contains new elements like ltnavgt ltheadergt ltfootergt and ltfiguregt
References
httpenwikipediaorgwikiHTML httpwwww3schoolscomhtmldefaultasp httpwwwanswerscomtopichtml
- Definition of HTML
-
16
The LISTING element should be rendered so that at least 132 characters fit on a line The XMP element should be rendered so that at least 80 characters fit on a line but is otherwise identical to the LISTING element
Address ADDRESS
The ADDRESS element contains such information as address signature and authorship often at the beginning or end of the body of a document
Typically the ADDRESS element is rendered in an italic typeface and may be indented
Example of use
ltADDRESSgt
Kishore TechnologiesltBRgt
Beside TCSltBRgt
BangloreltBRgt
Mobile 7842634463
ltADDRESSgt
Block Quote BLOCKQUOTE
The BLOCKQUOTE element contains text quoted from another source
A typical rendering might be a slight extra left and right indent andor italic font The BLOCKQUOTE typically provides space above and below the quote
Single-font rendition may reflect the quotation style of Internet mail by putting a vertical line of graphic characters such as the greater than symbol (gt) in the left margin
Example of use
I think the play ends
ltBLOCKQUOTEgt
ltPgtSoft you now the fair Ophelia Nymph in thy orisons be all
my sins remembered
17
ltBLOCKQUOTEgt
but I am not sure
List Elements
HTML includes a number of list elements They may be used in combination for example a OL may be nested in an LI element of a UL
The COMPACT attribute suggests that a compact rendering be used
Unordered List UL LI
The UL represents a list of items -- typically rendered as a bulleted list
The content of a UL element is a sequence of LI elements For example
ltULgt
ltLIgtFirst list item
ltLIgtSecond list item
ltpgtsecond paragraph of second item
ltLIgtThird list item
ltULgt
Ordered List OL
The OL element represents an ordered list of items sorted by sequence or order of importance It is typically rendered as a numbered list
The content of a OL element is a sequence of LI elements For example
ltOLgt
ltLIgtClick the Web button to open URI window
ltLIgtEnter the URI number in the text field of the Open URI
window The Web document you specified is displayed
ltolgt
18
ltligtsubstep 1
ltligtsubstep 2
ltolgt
ltLIgtClick highlighted text to move from one link to another
ltOLgt
Directory List DIR
The DIR element is similar to the UL element It represents a list of short items typically up to 20 characters each Items in a directory list may be arranged in columns typically 24 characters wide
The content of a DIR element is a sequence of LI elements Nested block elements are not allowed in the content of DIR elements For example
ltDIRgt
ltLIgtA-HltLIgtI-M
ltLIgtM-RltLIgtS-Z
ltDIRgt
Menu List MENU
The MENU element is a list of items with typically one line per item The menu list style is typically more compact than the style of an unordered list
The content of a MENU element is a sequence of LI elements Nested block elements are not allowed in the content of MENU elements For example
ltMENUgt
ltLIgtFirst item in the list
ltLIgtSecond item in the list
ltLIgtThird item in the list
19
ltMENUgt
Definition List DL DT DD
A definition list is a list of terms and corresponding definitions Definition lists are typically formatted with the term flush-left and the definition formatted paragraph style indented after the term
The content of a DL element is a sequence of DT elements andor DD elements usually in pairs Multiple DT may be paired with a single DD element Documents should not contain multiple consecutive DD elements
Example of use
ltDLgt
ltDTgtTermltDDgtThis is the definition of the first term
ltDTgtTermltDDgtThis is the definition of the second term
ltDLgt
If the DT term does not fit in the DT column (typically one third of the display area) it may be extended across the page with the DD section moved to the next line or it may be wrapped onto successive lines of the left hand column
The optional COMPACT attribute suggests that a compact rendering be used because the list items are small andor the entire list is large
Unless the COMPACT attribute is present an HTML user agent may leave white space between successive DT DD pairs The COMPACT attribute may also reduce the width of the left-hand (DT) column
ltDL COMPACTgt
ltDTgtTermltDDgtThis is the first definition in compact format
ltDTgtTermltDDgtThis is the second definition in compact format
ltDLgt
Phrase Markup
Phrases may be marked up according to idiomatic usage typographic appearance or for use as hyperlink anchors
20
User agents must render highlighted phrases distinctly from plain text Additionally EM content must be rendered as distinct from STRONG content and B content must rendered as distinct from I content
Phrase elements may be nested within the content of other phrase elements however HTML user agents may render nested phrase elements indistinctly from non-nested elements
plain ltBgtbold ltIgtitalicltIgtltBgt may be rendered
the same as plain ltBgtbold ltBgtltIgtitalicltIgt
Idiomatic Elements
Phrases may be marked up to indicate certain idioms
Citation CITE
The CITE element is used to indicate the title of a book or other citation It is typically rendered as italics For example
He just couldnt get enough of ltcitegtThe Grapes of Wrathltcitegt
Code CODE
The CODE element indicates an example of code typically rendered in a mono-spaced font The CODE element is intended for short words or phrases of code the PRE block structuring element (section Preformatted Text PRE) is more appropriate for multiple-line listings For example
The expression ltcodegtx += 1ltcodegt
is short for ltcodegtx = x + 1ltcodegt
Emphasis EM
The EM element indicates an emphasized phrase typically rendered as italics For example
A singular subject ltemgtalwaysltemgt takes a singular verb
Keyboard KBD
The KBD element indicates text typed by a user typically rendered in a mono-spaced font This is commonly used in instruction manuals For example
21
Enter ltkbdgtFIND ITltkbdgt to search the database
Sample SAMP
The SAMP element indicates a sequence of literal characters typically rendered in a mono-spaced font For example
The only word containing the letters ltsampgtmtltsampgt is dreamt
Strong Emphasis STRONG
The STRONG element indicates strong emphasis typically rendered in bold For example
ltstronggtSTOPltstronggt or Ill say ltstronggtSTOPltstronggt again
Variable VAR
The VAR element indicates a placeholder variable typically rendered as italic For example
Type ltSAMPgthtml-check ltVARgtfileltVARgt | moreltSAMPgt
to check ltVARgtfileltVARgt for markup errors
Typographic Elements
Typographic elements are used to specify the format of marked text
Typical renderings for idiomatic elements may vary between user agents If a specific rendering is necessary -- for example when referring to a specific text attribute as in The italic parts are mandatory -- a typographic element can be used to ensure that the intended typography is used where possible
Bold B
The B element indicates bold text Where bold typography is unavailable an alternative representation may be used
Italic I
The I element indicates italic text Where italic typography is unavailable an alternative representation may be used
Teletype TT
22
The TT element indicates teletype (monospaced )text Where a teletype font is unavailable an alternative representation may be used
Anchor A
The A element indicates a hyperlink anchor (see section Hyperlinks) At least one of the NAME and HREF attributes should be present Attributes of the A element
HREF
gives the URI of the head anchor of a hyperlink
NAME
gives the name of the anchor and makes it available as a head of a hyperlink
TITLE
suggests a title for the destination resource --- advisory only The TITLE attribute may be used
for display prior to accessing the destination resource for example as a margin note or on a small box while the mouse is over the anchor or while the document is being loaded
for resources that do not include a title such as graphics plain text and Gopher menus for use as a window title
REL
The REL attribute gives the relationship(s) described by the hyperlink The value is a whitespace separated list of relationship names The semantics of link relationships are not specified in this document
REV
Same as the REL attribute but the semantics of the relationship are in the reverse direction A link from A to B with REL=X expresses the same relationship as a link from B to A with REV=X An anchor may have both REL and REV attributes
URN
specifies a preferred more persistent identifier for the head anchor of the hyperlink The syntax and semantics of the URN attribute are not yet specified
METHODS
23
specifies methods to be used in accessing the destination as a whitespace-separated list of names The set of applicable names is a function of the scheme of the URI in the HREF attribute For similar reasons as for the TITLE attribute it may be useful to include the information in advance in the link For example the HTML user agent may chose a different rendering as a function of the methods allowed for example something that is searchable may get a different icon
Line Break BR
The BR element specifies a line break between words (see section Characters Words and Paragraphs) For example
ltPgt Pease porridge hotltBRgt
Pease porridge coldltBRgt
Pease porridge in the potltBRgt
Nine days old
Horizontal Rule HR
The HR element is a divider between sections of text typically a full width horizontal rule or equivalent graphic For example
ltHRgt
ltADDRESSgtFebruary 8 1995 CERNltADDRESSgt
ltBODYgt
Image IMG
The IMG element refers to an image or icon via a hyperlink (see section Simultaneous Presentation of Image Resources)
HTML user agents may process the value of the ALT attribute as an alternative to processing the image resource indicated by the SRC attribute (22)
Attributes of the IMG element
ALIGN
Alignment of the image with respect to the text baseline
`TOP specifies that the top of the image aligns with the tallest item on the line containing the image
24
`MIDDLE specifies that the center of the image aligns with the baseline of the line containing the image
`BOTTOM specifies that the bottom of the image aligns with the baseline of the line containing the image
ALT
Text to use in place of the referenced image resource for example due to processing constraints or user preference
ISMAP
indicates an image map (see section Image Maps)
SRC
Specifies the URI of the image resource (23)
Examples of use
ltIMG SRC=trianglexbm ALT=Warninggt Be sure to read these instructions
lta href=httpmachinehtbinimagemapsamplegt
ltIMG SRC=samplexbm ISMAPgt
ltagt
Advantages
Easy to use Loose syntax (although being too flexible will not comply with standards) Supported on almost every browser if not all browsers Widely used established on almost every website if not all websites Very similar to XML syntax which is increasingly used for data storage Free - You need not buy any software Easy to learn amp code even for novice programmers
Disadvantages
It cannot produce dynamic output alone since it is a static language Sometimes the structuring of HTML documents is hard to grasp You have to keep up with deprecated tags and make sure not to use them Deprecated tags appear because another language that works with HTML has
replaced the original work of the tag thus the other language needs to be learned (most of the time it is CSS)
25
Security features offered by HTML are limited
Conclusion
HTML is used to build web sites and HTML5 improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements and how to recover from errors
Some of the new features in HTML5 are functions for embedding audio video graphics client-side data storage and interactive documents HTML5 also contains new elements like ltnavgt ltheadergt ltfootergt and ltfiguregt
References
httpenwikipediaorgwikiHTML httpwwww3schoolscomhtmldefaultasp httpwwwanswerscomtopichtml
- Definition of HTML
-
17
ltBLOCKQUOTEgt
but I am not sure
List Elements
HTML includes a number of list elements They may be used in combination for example a OL may be nested in an LI element of a UL
The COMPACT attribute suggests that a compact rendering be used
Unordered List UL LI
The UL represents a list of items -- typically rendered as a bulleted list
The content of a UL element is a sequence of LI elements For example
ltULgt
ltLIgtFirst list item
ltLIgtSecond list item
ltpgtsecond paragraph of second item
ltLIgtThird list item
ltULgt
Ordered List OL
The OL element represents an ordered list of items sorted by sequence or order of importance It is typically rendered as a numbered list
The content of a OL element is a sequence of LI elements For example
ltOLgt
ltLIgtClick the Web button to open URI window
ltLIgtEnter the URI number in the text field of the Open URI
window The Web document you specified is displayed
ltolgt
18
ltligtsubstep 1
ltligtsubstep 2
ltolgt
ltLIgtClick highlighted text to move from one link to another
ltOLgt
Directory List DIR
The DIR element is similar to the UL element It represents a list of short items typically up to 20 characters each Items in a directory list may be arranged in columns typically 24 characters wide
The content of a DIR element is a sequence of LI elements Nested block elements are not allowed in the content of DIR elements For example
ltDIRgt
ltLIgtA-HltLIgtI-M
ltLIgtM-RltLIgtS-Z
ltDIRgt
Menu List MENU
The MENU element is a list of items with typically one line per item The menu list style is typically more compact than the style of an unordered list
The content of a MENU element is a sequence of LI elements Nested block elements are not allowed in the content of MENU elements For example
ltMENUgt
ltLIgtFirst item in the list
ltLIgtSecond item in the list
ltLIgtThird item in the list
19
ltMENUgt
Definition List DL DT DD
A definition list is a list of terms and corresponding definitions Definition lists are typically formatted with the term flush-left and the definition formatted paragraph style indented after the term
The content of a DL element is a sequence of DT elements andor DD elements usually in pairs Multiple DT may be paired with a single DD element Documents should not contain multiple consecutive DD elements
Example of use
ltDLgt
ltDTgtTermltDDgtThis is the definition of the first term
ltDTgtTermltDDgtThis is the definition of the second term
ltDLgt
If the DT term does not fit in the DT column (typically one third of the display area) it may be extended across the page with the DD section moved to the next line or it may be wrapped onto successive lines of the left hand column
The optional COMPACT attribute suggests that a compact rendering be used because the list items are small andor the entire list is large
Unless the COMPACT attribute is present an HTML user agent may leave white space between successive DT DD pairs The COMPACT attribute may also reduce the width of the left-hand (DT) column
ltDL COMPACTgt
ltDTgtTermltDDgtThis is the first definition in compact format
ltDTgtTermltDDgtThis is the second definition in compact format
ltDLgt
Phrase Markup
Phrases may be marked up according to idiomatic usage typographic appearance or for use as hyperlink anchors
20
User agents must render highlighted phrases distinctly from plain text Additionally EM content must be rendered as distinct from STRONG content and B content must rendered as distinct from I content
Phrase elements may be nested within the content of other phrase elements however HTML user agents may render nested phrase elements indistinctly from non-nested elements
plain ltBgtbold ltIgtitalicltIgtltBgt may be rendered
the same as plain ltBgtbold ltBgtltIgtitalicltIgt
Idiomatic Elements
Phrases may be marked up to indicate certain idioms
Citation CITE
The CITE element is used to indicate the title of a book or other citation It is typically rendered as italics For example
He just couldnt get enough of ltcitegtThe Grapes of Wrathltcitegt
Code CODE
The CODE element indicates an example of code typically rendered in a mono-spaced font The CODE element is intended for short words or phrases of code the PRE block structuring element (section Preformatted Text PRE) is more appropriate for multiple-line listings For example
The expression ltcodegtx += 1ltcodegt
is short for ltcodegtx = x + 1ltcodegt
Emphasis EM
The EM element indicates an emphasized phrase typically rendered as italics For example
A singular subject ltemgtalwaysltemgt takes a singular verb
Keyboard KBD
The KBD element indicates text typed by a user typically rendered in a mono-spaced font This is commonly used in instruction manuals For example
21
Enter ltkbdgtFIND ITltkbdgt to search the database
Sample SAMP
The SAMP element indicates a sequence of literal characters typically rendered in a mono-spaced font For example
The only word containing the letters ltsampgtmtltsampgt is dreamt
Strong Emphasis STRONG
The STRONG element indicates strong emphasis typically rendered in bold For example
ltstronggtSTOPltstronggt or Ill say ltstronggtSTOPltstronggt again
Variable VAR
The VAR element indicates a placeholder variable typically rendered as italic For example
Type ltSAMPgthtml-check ltVARgtfileltVARgt | moreltSAMPgt
to check ltVARgtfileltVARgt for markup errors
Typographic Elements
Typographic elements are used to specify the format of marked text
Typical renderings for idiomatic elements may vary between user agents If a specific rendering is necessary -- for example when referring to a specific text attribute as in The italic parts are mandatory -- a typographic element can be used to ensure that the intended typography is used where possible
Bold B
The B element indicates bold text Where bold typography is unavailable an alternative representation may be used
Italic I
The I element indicates italic text Where italic typography is unavailable an alternative representation may be used
Teletype TT
22
The TT element indicates teletype (monospaced )text Where a teletype font is unavailable an alternative representation may be used
Anchor A
The A element indicates a hyperlink anchor (see section Hyperlinks) At least one of the NAME and HREF attributes should be present Attributes of the A element
HREF
gives the URI of the head anchor of a hyperlink
NAME
gives the name of the anchor and makes it available as a head of a hyperlink
TITLE
suggests a title for the destination resource --- advisory only The TITLE attribute may be used
for display prior to accessing the destination resource for example as a margin note or on a small box while the mouse is over the anchor or while the document is being loaded
for resources that do not include a title such as graphics plain text and Gopher menus for use as a window title
REL
The REL attribute gives the relationship(s) described by the hyperlink The value is a whitespace separated list of relationship names The semantics of link relationships are not specified in this document
REV
Same as the REL attribute but the semantics of the relationship are in the reverse direction A link from A to B with REL=X expresses the same relationship as a link from B to A with REV=X An anchor may have both REL and REV attributes
URN
specifies a preferred more persistent identifier for the head anchor of the hyperlink The syntax and semantics of the URN attribute are not yet specified
METHODS
23
specifies methods to be used in accessing the destination as a whitespace-separated list of names The set of applicable names is a function of the scheme of the URI in the HREF attribute For similar reasons as for the TITLE attribute it may be useful to include the information in advance in the link For example the HTML user agent may chose a different rendering as a function of the methods allowed for example something that is searchable may get a different icon
Line Break BR
The BR element specifies a line break between words (see section Characters Words and Paragraphs) For example
ltPgt Pease porridge hotltBRgt
Pease porridge coldltBRgt
Pease porridge in the potltBRgt
Nine days old
Horizontal Rule HR
The HR element is a divider between sections of text typically a full width horizontal rule or equivalent graphic For example
ltHRgt
ltADDRESSgtFebruary 8 1995 CERNltADDRESSgt
ltBODYgt
Image IMG
The IMG element refers to an image or icon via a hyperlink (see section Simultaneous Presentation of Image Resources)
HTML user agents may process the value of the ALT attribute as an alternative to processing the image resource indicated by the SRC attribute (22)
Attributes of the IMG element
ALIGN
Alignment of the image with respect to the text baseline
`TOP specifies that the top of the image aligns with the tallest item on the line containing the image
24
`MIDDLE specifies that the center of the image aligns with the baseline of the line containing the image
`BOTTOM specifies that the bottom of the image aligns with the baseline of the line containing the image
ALT
Text to use in place of the referenced image resource for example due to processing constraints or user preference
ISMAP
indicates an image map (see section Image Maps)
SRC
Specifies the URI of the image resource (23)
Examples of use
ltIMG SRC=trianglexbm ALT=Warninggt Be sure to read these instructions
lta href=httpmachinehtbinimagemapsamplegt
ltIMG SRC=samplexbm ISMAPgt
ltagt
Advantages
Easy to use Loose syntax (although being too flexible will not comply with standards) Supported on almost every browser if not all browsers Widely used established on almost every website if not all websites Very similar to XML syntax which is increasingly used for data storage Free - You need not buy any software Easy to learn amp code even for novice programmers
Disadvantages
It cannot produce dynamic output alone since it is a static language Sometimes the structuring of HTML documents is hard to grasp You have to keep up with deprecated tags and make sure not to use them Deprecated tags appear because another language that works with HTML has
replaced the original work of the tag thus the other language needs to be learned (most of the time it is CSS)
25
Security features offered by HTML are limited
Conclusion
HTML is used to build web sites and HTML5 improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements and how to recover from errors
Some of the new features in HTML5 are functions for embedding audio video graphics client-side data storage and interactive documents HTML5 also contains new elements like ltnavgt ltheadergt ltfootergt and ltfiguregt
References
httpenwikipediaorgwikiHTML httpwwww3schoolscomhtmldefaultasp httpwwwanswerscomtopichtml
- Definition of HTML
-
18
ltligtsubstep 1
ltligtsubstep 2
ltolgt
ltLIgtClick highlighted text to move from one link to another
ltOLgt
Directory List DIR
The DIR element is similar to the UL element It represents a list of short items typically up to 20 characters each Items in a directory list may be arranged in columns typically 24 characters wide
The content of a DIR element is a sequence of LI elements Nested block elements are not allowed in the content of DIR elements For example
ltDIRgt
ltLIgtA-HltLIgtI-M
ltLIgtM-RltLIgtS-Z
ltDIRgt
Menu List MENU
The MENU element is a list of items with typically one line per item The menu list style is typically more compact than the style of an unordered list
The content of a MENU element is a sequence of LI elements Nested block elements are not allowed in the content of MENU elements For example
ltMENUgt
ltLIgtFirst item in the list
ltLIgtSecond item in the list
ltLIgtThird item in the list
19
ltMENUgt
Definition List DL DT DD
A definition list is a list of terms and corresponding definitions Definition lists are typically formatted with the term flush-left and the definition formatted paragraph style indented after the term
The content of a DL element is a sequence of DT elements andor DD elements usually in pairs Multiple DT may be paired with a single DD element Documents should not contain multiple consecutive DD elements
Example of use
ltDLgt
ltDTgtTermltDDgtThis is the definition of the first term
ltDTgtTermltDDgtThis is the definition of the second term
ltDLgt
If the DT term does not fit in the DT column (typically one third of the display area) it may be extended across the page with the DD section moved to the next line or it may be wrapped onto successive lines of the left hand column
The optional COMPACT attribute suggests that a compact rendering be used because the list items are small andor the entire list is large
Unless the COMPACT attribute is present an HTML user agent may leave white space between successive DT DD pairs The COMPACT attribute may also reduce the width of the left-hand (DT) column
ltDL COMPACTgt
ltDTgtTermltDDgtThis is the first definition in compact format
ltDTgtTermltDDgtThis is the second definition in compact format
ltDLgt
Phrase Markup
Phrases may be marked up according to idiomatic usage typographic appearance or for use as hyperlink anchors
20
User agents must render highlighted phrases distinctly from plain text Additionally EM content must be rendered as distinct from STRONG content and B content must rendered as distinct from I content
Phrase elements may be nested within the content of other phrase elements however HTML user agents may render nested phrase elements indistinctly from non-nested elements
plain ltBgtbold ltIgtitalicltIgtltBgt may be rendered
the same as plain ltBgtbold ltBgtltIgtitalicltIgt
Idiomatic Elements
Phrases may be marked up to indicate certain idioms
Citation CITE
The CITE element is used to indicate the title of a book or other citation It is typically rendered as italics For example
He just couldnt get enough of ltcitegtThe Grapes of Wrathltcitegt
Code CODE
The CODE element indicates an example of code typically rendered in a mono-spaced font The CODE element is intended for short words or phrases of code the PRE block structuring element (section Preformatted Text PRE) is more appropriate for multiple-line listings For example
The expression ltcodegtx += 1ltcodegt
is short for ltcodegtx = x + 1ltcodegt
Emphasis EM
The EM element indicates an emphasized phrase typically rendered as italics For example
A singular subject ltemgtalwaysltemgt takes a singular verb
Keyboard KBD
The KBD element indicates text typed by a user typically rendered in a mono-spaced font This is commonly used in instruction manuals For example
21
Enter ltkbdgtFIND ITltkbdgt to search the database
Sample SAMP
The SAMP element indicates a sequence of literal characters typically rendered in a mono-spaced font For example
The only word containing the letters ltsampgtmtltsampgt is dreamt
Strong Emphasis STRONG
The STRONG element indicates strong emphasis typically rendered in bold For example
ltstronggtSTOPltstronggt or Ill say ltstronggtSTOPltstronggt again
Variable VAR
The VAR element indicates a placeholder variable typically rendered as italic For example
Type ltSAMPgthtml-check ltVARgtfileltVARgt | moreltSAMPgt
to check ltVARgtfileltVARgt for markup errors
Typographic Elements
Typographic elements are used to specify the format of marked text
Typical renderings for idiomatic elements may vary between user agents If a specific rendering is necessary -- for example when referring to a specific text attribute as in The italic parts are mandatory -- a typographic element can be used to ensure that the intended typography is used where possible
Bold B
The B element indicates bold text Where bold typography is unavailable an alternative representation may be used
Italic I
The I element indicates italic text Where italic typography is unavailable an alternative representation may be used
Teletype TT
22
The TT element indicates teletype (monospaced )text Where a teletype font is unavailable an alternative representation may be used
Anchor A
The A element indicates a hyperlink anchor (see section Hyperlinks) At least one of the NAME and HREF attributes should be present Attributes of the A element
HREF
gives the URI of the head anchor of a hyperlink
NAME
gives the name of the anchor and makes it available as a head of a hyperlink
TITLE
suggests a title for the destination resource --- advisory only The TITLE attribute may be used
for display prior to accessing the destination resource for example as a margin note or on a small box while the mouse is over the anchor or while the document is being loaded
for resources that do not include a title such as graphics plain text and Gopher menus for use as a window title
REL
The REL attribute gives the relationship(s) described by the hyperlink The value is a whitespace separated list of relationship names The semantics of link relationships are not specified in this document
REV
Same as the REL attribute but the semantics of the relationship are in the reverse direction A link from A to B with REL=X expresses the same relationship as a link from B to A with REV=X An anchor may have both REL and REV attributes
URN
specifies a preferred more persistent identifier for the head anchor of the hyperlink The syntax and semantics of the URN attribute are not yet specified
METHODS
23
specifies methods to be used in accessing the destination as a whitespace-separated list of names The set of applicable names is a function of the scheme of the URI in the HREF attribute For similar reasons as for the TITLE attribute it may be useful to include the information in advance in the link For example the HTML user agent may chose a different rendering as a function of the methods allowed for example something that is searchable may get a different icon
Line Break BR
The BR element specifies a line break between words (see section Characters Words and Paragraphs) For example
ltPgt Pease porridge hotltBRgt
Pease porridge coldltBRgt
Pease porridge in the potltBRgt
Nine days old
Horizontal Rule HR
The HR element is a divider between sections of text typically a full width horizontal rule or equivalent graphic For example
ltHRgt
ltADDRESSgtFebruary 8 1995 CERNltADDRESSgt
ltBODYgt
Image IMG
The IMG element refers to an image or icon via a hyperlink (see section Simultaneous Presentation of Image Resources)
HTML user agents may process the value of the ALT attribute as an alternative to processing the image resource indicated by the SRC attribute (22)
Attributes of the IMG element
ALIGN
Alignment of the image with respect to the text baseline
`TOP specifies that the top of the image aligns with the tallest item on the line containing the image
24
`MIDDLE specifies that the center of the image aligns with the baseline of the line containing the image
`BOTTOM specifies that the bottom of the image aligns with the baseline of the line containing the image
ALT
Text to use in place of the referenced image resource for example due to processing constraints or user preference
ISMAP
indicates an image map (see section Image Maps)
SRC
Specifies the URI of the image resource (23)
Examples of use
ltIMG SRC=trianglexbm ALT=Warninggt Be sure to read these instructions
lta href=httpmachinehtbinimagemapsamplegt
ltIMG SRC=samplexbm ISMAPgt
ltagt
Advantages
Easy to use Loose syntax (although being too flexible will not comply with standards) Supported on almost every browser if not all browsers Widely used established on almost every website if not all websites Very similar to XML syntax which is increasingly used for data storage Free - You need not buy any software Easy to learn amp code even for novice programmers
Disadvantages
It cannot produce dynamic output alone since it is a static language Sometimes the structuring of HTML documents is hard to grasp You have to keep up with deprecated tags and make sure not to use them Deprecated tags appear because another language that works with HTML has
replaced the original work of the tag thus the other language needs to be learned (most of the time it is CSS)
25
Security features offered by HTML are limited
Conclusion
HTML is used to build web sites and HTML5 improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements and how to recover from errors
Some of the new features in HTML5 are functions for embedding audio video graphics client-side data storage and interactive documents HTML5 also contains new elements like ltnavgt ltheadergt ltfootergt and ltfiguregt
References
httpenwikipediaorgwikiHTML httpwwww3schoolscomhtmldefaultasp httpwwwanswerscomtopichtml
- Definition of HTML
-
19
ltMENUgt
Definition List DL DT DD
A definition list is a list of terms and corresponding definitions Definition lists are typically formatted with the term flush-left and the definition formatted paragraph style indented after the term
The content of a DL element is a sequence of DT elements andor DD elements usually in pairs Multiple DT may be paired with a single DD element Documents should not contain multiple consecutive DD elements
Example of use
ltDLgt
ltDTgtTermltDDgtThis is the definition of the first term
ltDTgtTermltDDgtThis is the definition of the second term
ltDLgt
If the DT term does not fit in the DT column (typically one third of the display area) it may be extended across the page with the DD section moved to the next line or it may be wrapped onto successive lines of the left hand column
The optional COMPACT attribute suggests that a compact rendering be used because the list items are small andor the entire list is large
Unless the COMPACT attribute is present an HTML user agent may leave white space between successive DT DD pairs The COMPACT attribute may also reduce the width of the left-hand (DT) column
ltDL COMPACTgt
ltDTgtTermltDDgtThis is the first definition in compact format
ltDTgtTermltDDgtThis is the second definition in compact format
ltDLgt
Phrase Markup
Phrases may be marked up according to idiomatic usage typographic appearance or for use as hyperlink anchors
20
User agents must render highlighted phrases distinctly from plain text Additionally EM content must be rendered as distinct from STRONG content and B content must rendered as distinct from I content
Phrase elements may be nested within the content of other phrase elements however HTML user agents may render nested phrase elements indistinctly from non-nested elements
plain ltBgtbold ltIgtitalicltIgtltBgt may be rendered
the same as plain ltBgtbold ltBgtltIgtitalicltIgt
Idiomatic Elements
Phrases may be marked up to indicate certain idioms
Citation CITE
The CITE element is used to indicate the title of a book or other citation It is typically rendered as italics For example
He just couldnt get enough of ltcitegtThe Grapes of Wrathltcitegt
Code CODE
The CODE element indicates an example of code typically rendered in a mono-spaced font The CODE element is intended for short words or phrases of code the PRE block structuring element (section Preformatted Text PRE) is more appropriate for multiple-line listings For example
The expression ltcodegtx += 1ltcodegt
is short for ltcodegtx = x + 1ltcodegt
Emphasis EM
The EM element indicates an emphasized phrase typically rendered as italics For example
A singular subject ltemgtalwaysltemgt takes a singular verb
Keyboard KBD
The KBD element indicates text typed by a user typically rendered in a mono-spaced font This is commonly used in instruction manuals For example
21
Enter ltkbdgtFIND ITltkbdgt to search the database
Sample SAMP
The SAMP element indicates a sequence of literal characters typically rendered in a mono-spaced font For example
The only word containing the letters ltsampgtmtltsampgt is dreamt
Strong Emphasis STRONG
The STRONG element indicates strong emphasis typically rendered in bold For example
ltstronggtSTOPltstronggt or Ill say ltstronggtSTOPltstronggt again
Variable VAR
The VAR element indicates a placeholder variable typically rendered as italic For example
Type ltSAMPgthtml-check ltVARgtfileltVARgt | moreltSAMPgt
to check ltVARgtfileltVARgt for markup errors
Typographic Elements
Typographic elements are used to specify the format of marked text
Typical renderings for idiomatic elements may vary between user agents If a specific rendering is necessary -- for example when referring to a specific text attribute as in The italic parts are mandatory -- a typographic element can be used to ensure that the intended typography is used where possible
Bold B
The B element indicates bold text Where bold typography is unavailable an alternative representation may be used
Italic I
The I element indicates italic text Where italic typography is unavailable an alternative representation may be used
Teletype TT
22
The TT element indicates teletype (monospaced )text Where a teletype font is unavailable an alternative representation may be used
Anchor A
The A element indicates a hyperlink anchor (see section Hyperlinks) At least one of the NAME and HREF attributes should be present Attributes of the A element
HREF
gives the URI of the head anchor of a hyperlink
NAME
gives the name of the anchor and makes it available as a head of a hyperlink
TITLE
suggests a title for the destination resource --- advisory only The TITLE attribute may be used
for display prior to accessing the destination resource for example as a margin note or on a small box while the mouse is over the anchor or while the document is being loaded
for resources that do not include a title such as graphics plain text and Gopher menus for use as a window title
REL
The REL attribute gives the relationship(s) described by the hyperlink The value is a whitespace separated list of relationship names The semantics of link relationships are not specified in this document
REV
Same as the REL attribute but the semantics of the relationship are in the reverse direction A link from A to B with REL=X expresses the same relationship as a link from B to A with REV=X An anchor may have both REL and REV attributes
URN
specifies a preferred more persistent identifier for the head anchor of the hyperlink The syntax and semantics of the URN attribute are not yet specified
METHODS
23
specifies methods to be used in accessing the destination as a whitespace-separated list of names The set of applicable names is a function of the scheme of the URI in the HREF attribute For similar reasons as for the TITLE attribute it may be useful to include the information in advance in the link For example the HTML user agent may chose a different rendering as a function of the methods allowed for example something that is searchable may get a different icon
Line Break BR
The BR element specifies a line break between words (see section Characters Words and Paragraphs) For example
ltPgt Pease porridge hotltBRgt
Pease porridge coldltBRgt
Pease porridge in the potltBRgt
Nine days old
Horizontal Rule HR
The HR element is a divider between sections of text typically a full width horizontal rule or equivalent graphic For example
ltHRgt
ltADDRESSgtFebruary 8 1995 CERNltADDRESSgt
ltBODYgt
Image IMG
The IMG element refers to an image or icon via a hyperlink (see section Simultaneous Presentation of Image Resources)
HTML user agents may process the value of the ALT attribute as an alternative to processing the image resource indicated by the SRC attribute (22)
Attributes of the IMG element
ALIGN
Alignment of the image with respect to the text baseline
`TOP specifies that the top of the image aligns with the tallest item on the line containing the image
24
`MIDDLE specifies that the center of the image aligns with the baseline of the line containing the image
`BOTTOM specifies that the bottom of the image aligns with the baseline of the line containing the image
ALT
Text to use in place of the referenced image resource for example due to processing constraints or user preference
ISMAP
indicates an image map (see section Image Maps)
SRC
Specifies the URI of the image resource (23)
Examples of use
ltIMG SRC=trianglexbm ALT=Warninggt Be sure to read these instructions
lta href=httpmachinehtbinimagemapsamplegt
ltIMG SRC=samplexbm ISMAPgt
ltagt
Advantages
Easy to use Loose syntax (although being too flexible will not comply with standards) Supported on almost every browser if not all browsers Widely used established on almost every website if not all websites Very similar to XML syntax which is increasingly used for data storage Free - You need not buy any software Easy to learn amp code even for novice programmers
Disadvantages
It cannot produce dynamic output alone since it is a static language Sometimes the structuring of HTML documents is hard to grasp You have to keep up with deprecated tags and make sure not to use them Deprecated tags appear because another language that works with HTML has
replaced the original work of the tag thus the other language needs to be learned (most of the time it is CSS)
25
Security features offered by HTML are limited
Conclusion
HTML is used to build web sites and HTML5 improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements and how to recover from errors
Some of the new features in HTML5 are functions for embedding audio video graphics client-side data storage and interactive documents HTML5 also contains new elements like ltnavgt ltheadergt ltfootergt and ltfiguregt
References
httpenwikipediaorgwikiHTML httpwwww3schoolscomhtmldefaultasp httpwwwanswerscomtopichtml
- Definition of HTML
-
20
User agents must render highlighted phrases distinctly from plain text Additionally EM content must be rendered as distinct from STRONG content and B content must rendered as distinct from I content
Phrase elements may be nested within the content of other phrase elements however HTML user agents may render nested phrase elements indistinctly from non-nested elements
plain ltBgtbold ltIgtitalicltIgtltBgt may be rendered
the same as plain ltBgtbold ltBgtltIgtitalicltIgt
Idiomatic Elements
Phrases may be marked up to indicate certain idioms
Citation CITE
The CITE element is used to indicate the title of a book or other citation It is typically rendered as italics For example
He just couldnt get enough of ltcitegtThe Grapes of Wrathltcitegt
Code CODE
The CODE element indicates an example of code typically rendered in a mono-spaced font The CODE element is intended for short words or phrases of code the PRE block structuring element (section Preformatted Text PRE) is more appropriate for multiple-line listings For example
The expression ltcodegtx += 1ltcodegt
is short for ltcodegtx = x + 1ltcodegt
Emphasis EM
The EM element indicates an emphasized phrase typically rendered as italics For example
A singular subject ltemgtalwaysltemgt takes a singular verb
Keyboard KBD
The KBD element indicates text typed by a user typically rendered in a mono-spaced font This is commonly used in instruction manuals For example
21
Enter ltkbdgtFIND ITltkbdgt to search the database
Sample SAMP
The SAMP element indicates a sequence of literal characters typically rendered in a mono-spaced font For example
The only word containing the letters ltsampgtmtltsampgt is dreamt
Strong Emphasis STRONG
The STRONG element indicates strong emphasis typically rendered in bold For example
ltstronggtSTOPltstronggt or Ill say ltstronggtSTOPltstronggt again
Variable VAR
The VAR element indicates a placeholder variable typically rendered as italic For example
Type ltSAMPgthtml-check ltVARgtfileltVARgt | moreltSAMPgt
to check ltVARgtfileltVARgt for markup errors
Typographic Elements
Typographic elements are used to specify the format of marked text
Typical renderings for idiomatic elements may vary between user agents If a specific rendering is necessary -- for example when referring to a specific text attribute as in The italic parts are mandatory -- a typographic element can be used to ensure that the intended typography is used where possible
Bold B
The B element indicates bold text Where bold typography is unavailable an alternative representation may be used
Italic I
The I element indicates italic text Where italic typography is unavailable an alternative representation may be used
Teletype TT
22
The TT element indicates teletype (monospaced )text Where a teletype font is unavailable an alternative representation may be used
Anchor A
The A element indicates a hyperlink anchor (see section Hyperlinks) At least one of the NAME and HREF attributes should be present Attributes of the A element
HREF
gives the URI of the head anchor of a hyperlink
NAME
gives the name of the anchor and makes it available as a head of a hyperlink
TITLE
suggests a title for the destination resource --- advisory only The TITLE attribute may be used
for display prior to accessing the destination resource for example as a margin note or on a small box while the mouse is over the anchor or while the document is being loaded
for resources that do not include a title such as graphics plain text and Gopher menus for use as a window title
REL
The REL attribute gives the relationship(s) described by the hyperlink The value is a whitespace separated list of relationship names The semantics of link relationships are not specified in this document
REV
Same as the REL attribute but the semantics of the relationship are in the reverse direction A link from A to B with REL=X expresses the same relationship as a link from B to A with REV=X An anchor may have both REL and REV attributes
URN
specifies a preferred more persistent identifier for the head anchor of the hyperlink The syntax and semantics of the URN attribute are not yet specified
METHODS
23
specifies methods to be used in accessing the destination as a whitespace-separated list of names The set of applicable names is a function of the scheme of the URI in the HREF attribute For similar reasons as for the TITLE attribute it may be useful to include the information in advance in the link For example the HTML user agent may chose a different rendering as a function of the methods allowed for example something that is searchable may get a different icon
Line Break BR
The BR element specifies a line break between words (see section Characters Words and Paragraphs) For example
ltPgt Pease porridge hotltBRgt
Pease porridge coldltBRgt
Pease porridge in the potltBRgt
Nine days old
Horizontal Rule HR
The HR element is a divider between sections of text typically a full width horizontal rule or equivalent graphic For example
ltHRgt
ltADDRESSgtFebruary 8 1995 CERNltADDRESSgt
ltBODYgt
Image IMG
The IMG element refers to an image or icon via a hyperlink (see section Simultaneous Presentation of Image Resources)
HTML user agents may process the value of the ALT attribute as an alternative to processing the image resource indicated by the SRC attribute (22)
Attributes of the IMG element
ALIGN
Alignment of the image with respect to the text baseline
`TOP specifies that the top of the image aligns with the tallest item on the line containing the image
24
`MIDDLE specifies that the center of the image aligns with the baseline of the line containing the image
`BOTTOM specifies that the bottom of the image aligns with the baseline of the line containing the image
ALT
Text to use in place of the referenced image resource for example due to processing constraints or user preference
ISMAP
indicates an image map (see section Image Maps)
SRC
Specifies the URI of the image resource (23)
Examples of use
ltIMG SRC=trianglexbm ALT=Warninggt Be sure to read these instructions
lta href=httpmachinehtbinimagemapsamplegt
ltIMG SRC=samplexbm ISMAPgt
ltagt
Advantages
Easy to use Loose syntax (although being too flexible will not comply with standards) Supported on almost every browser if not all browsers Widely used established on almost every website if not all websites Very similar to XML syntax which is increasingly used for data storage Free - You need not buy any software Easy to learn amp code even for novice programmers
Disadvantages
It cannot produce dynamic output alone since it is a static language Sometimes the structuring of HTML documents is hard to grasp You have to keep up with deprecated tags and make sure not to use them Deprecated tags appear because another language that works with HTML has
replaced the original work of the tag thus the other language needs to be learned (most of the time it is CSS)
25
Security features offered by HTML are limited
Conclusion
HTML is used to build web sites and HTML5 improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements and how to recover from errors
Some of the new features in HTML5 are functions for embedding audio video graphics client-side data storage and interactive documents HTML5 also contains new elements like ltnavgt ltheadergt ltfootergt and ltfiguregt
References
httpenwikipediaorgwikiHTML httpwwww3schoolscomhtmldefaultasp httpwwwanswerscomtopichtml
- Definition of HTML
-
21
Enter ltkbdgtFIND ITltkbdgt to search the database
Sample SAMP
The SAMP element indicates a sequence of literal characters typically rendered in a mono-spaced font For example
The only word containing the letters ltsampgtmtltsampgt is dreamt
Strong Emphasis STRONG
The STRONG element indicates strong emphasis typically rendered in bold For example
ltstronggtSTOPltstronggt or Ill say ltstronggtSTOPltstronggt again
Variable VAR
The VAR element indicates a placeholder variable typically rendered as italic For example
Type ltSAMPgthtml-check ltVARgtfileltVARgt | moreltSAMPgt
to check ltVARgtfileltVARgt for markup errors
Typographic Elements
Typographic elements are used to specify the format of marked text
Typical renderings for idiomatic elements may vary between user agents If a specific rendering is necessary -- for example when referring to a specific text attribute as in The italic parts are mandatory -- a typographic element can be used to ensure that the intended typography is used where possible
Bold B
The B element indicates bold text Where bold typography is unavailable an alternative representation may be used
Italic I
The I element indicates italic text Where italic typography is unavailable an alternative representation may be used
Teletype TT
22
The TT element indicates teletype (monospaced )text Where a teletype font is unavailable an alternative representation may be used
Anchor A
The A element indicates a hyperlink anchor (see section Hyperlinks) At least one of the NAME and HREF attributes should be present Attributes of the A element
HREF
gives the URI of the head anchor of a hyperlink
NAME
gives the name of the anchor and makes it available as a head of a hyperlink
TITLE
suggests a title for the destination resource --- advisory only The TITLE attribute may be used
for display prior to accessing the destination resource for example as a margin note or on a small box while the mouse is over the anchor or while the document is being loaded
for resources that do not include a title such as graphics plain text and Gopher menus for use as a window title
REL
The REL attribute gives the relationship(s) described by the hyperlink The value is a whitespace separated list of relationship names The semantics of link relationships are not specified in this document
REV
Same as the REL attribute but the semantics of the relationship are in the reverse direction A link from A to B with REL=X expresses the same relationship as a link from B to A with REV=X An anchor may have both REL and REV attributes
URN
specifies a preferred more persistent identifier for the head anchor of the hyperlink The syntax and semantics of the URN attribute are not yet specified
METHODS
23
specifies methods to be used in accessing the destination as a whitespace-separated list of names The set of applicable names is a function of the scheme of the URI in the HREF attribute For similar reasons as for the TITLE attribute it may be useful to include the information in advance in the link For example the HTML user agent may chose a different rendering as a function of the methods allowed for example something that is searchable may get a different icon
Line Break BR
The BR element specifies a line break between words (see section Characters Words and Paragraphs) For example
ltPgt Pease porridge hotltBRgt
Pease porridge coldltBRgt
Pease porridge in the potltBRgt
Nine days old
Horizontal Rule HR
The HR element is a divider between sections of text typically a full width horizontal rule or equivalent graphic For example
ltHRgt
ltADDRESSgtFebruary 8 1995 CERNltADDRESSgt
ltBODYgt
Image IMG
The IMG element refers to an image or icon via a hyperlink (see section Simultaneous Presentation of Image Resources)
HTML user agents may process the value of the ALT attribute as an alternative to processing the image resource indicated by the SRC attribute (22)
Attributes of the IMG element
ALIGN
Alignment of the image with respect to the text baseline
`TOP specifies that the top of the image aligns with the tallest item on the line containing the image
24
`MIDDLE specifies that the center of the image aligns with the baseline of the line containing the image
`BOTTOM specifies that the bottom of the image aligns with the baseline of the line containing the image
ALT
Text to use in place of the referenced image resource for example due to processing constraints or user preference
ISMAP
indicates an image map (see section Image Maps)
SRC
Specifies the URI of the image resource (23)
Examples of use
ltIMG SRC=trianglexbm ALT=Warninggt Be sure to read these instructions
lta href=httpmachinehtbinimagemapsamplegt
ltIMG SRC=samplexbm ISMAPgt
ltagt
Advantages
Easy to use Loose syntax (although being too flexible will not comply with standards) Supported on almost every browser if not all browsers Widely used established on almost every website if not all websites Very similar to XML syntax which is increasingly used for data storage Free - You need not buy any software Easy to learn amp code even for novice programmers
Disadvantages
It cannot produce dynamic output alone since it is a static language Sometimes the structuring of HTML documents is hard to grasp You have to keep up with deprecated tags and make sure not to use them Deprecated tags appear because another language that works with HTML has
replaced the original work of the tag thus the other language needs to be learned (most of the time it is CSS)
25
Security features offered by HTML are limited
Conclusion
HTML is used to build web sites and HTML5 improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements and how to recover from errors
Some of the new features in HTML5 are functions for embedding audio video graphics client-side data storage and interactive documents HTML5 also contains new elements like ltnavgt ltheadergt ltfootergt and ltfiguregt
References
httpenwikipediaorgwikiHTML httpwwww3schoolscomhtmldefaultasp httpwwwanswerscomtopichtml
- Definition of HTML
-
22
The TT element indicates teletype (monospaced )text Where a teletype font is unavailable an alternative representation may be used
Anchor A
The A element indicates a hyperlink anchor (see section Hyperlinks) At least one of the NAME and HREF attributes should be present Attributes of the A element
HREF
gives the URI of the head anchor of a hyperlink
NAME
gives the name of the anchor and makes it available as a head of a hyperlink
TITLE
suggests a title for the destination resource --- advisory only The TITLE attribute may be used
for display prior to accessing the destination resource for example as a margin note or on a small box while the mouse is over the anchor or while the document is being loaded
for resources that do not include a title such as graphics plain text and Gopher menus for use as a window title
REL
The REL attribute gives the relationship(s) described by the hyperlink The value is a whitespace separated list of relationship names The semantics of link relationships are not specified in this document
REV
Same as the REL attribute but the semantics of the relationship are in the reverse direction A link from A to B with REL=X expresses the same relationship as a link from B to A with REV=X An anchor may have both REL and REV attributes
URN
specifies a preferred more persistent identifier for the head anchor of the hyperlink The syntax and semantics of the URN attribute are not yet specified
METHODS
23
specifies methods to be used in accessing the destination as a whitespace-separated list of names The set of applicable names is a function of the scheme of the URI in the HREF attribute For similar reasons as for the TITLE attribute it may be useful to include the information in advance in the link For example the HTML user agent may chose a different rendering as a function of the methods allowed for example something that is searchable may get a different icon
Line Break BR
The BR element specifies a line break between words (see section Characters Words and Paragraphs) For example
ltPgt Pease porridge hotltBRgt
Pease porridge coldltBRgt
Pease porridge in the potltBRgt
Nine days old
Horizontal Rule HR
The HR element is a divider between sections of text typically a full width horizontal rule or equivalent graphic For example
ltHRgt
ltADDRESSgtFebruary 8 1995 CERNltADDRESSgt
ltBODYgt
Image IMG
The IMG element refers to an image or icon via a hyperlink (see section Simultaneous Presentation of Image Resources)
HTML user agents may process the value of the ALT attribute as an alternative to processing the image resource indicated by the SRC attribute (22)
Attributes of the IMG element
ALIGN
Alignment of the image with respect to the text baseline
`TOP specifies that the top of the image aligns with the tallest item on the line containing the image
24
`MIDDLE specifies that the center of the image aligns with the baseline of the line containing the image
`BOTTOM specifies that the bottom of the image aligns with the baseline of the line containing the image
ALT
Text to use in place of the referenced image resource for example due to processing constraints or user preference
ISMAP
indicates an image map (see section Image Maps)
SRC
Specifies the URI of the image resource (23)
Examples of use
ltIMG SRC=trianglexbm ALT=Warninggt Be sure to read these instructions
lta href=httpmachinehtbinimagemapsamplegt
ltIMG SRC=samplexbm ISMAPgt
ltagt
Advantages
Easy to use Loose syntax (although being too flexible will not comply with standards) Supported on almost every browser if not all browsers Widely used established on almost every website if not all websites Very similar to XML syntax which is increasingly used for data storage Free - You need not buy any software Easy to learn amp code even for novice programmers
Disadvantages
It cannot produce dynamic output alone since it is a static language Sometimes the structuring of HTML documents is hard to grasp You have to keep up with deprecated tags and make sure not to use them Deprecated tags appear because another language that works with HTML has
replaced the original work of the tag thus the other language needs to be learned (most of the time it is CSS)
25
Security features offered by HTML are limited
Conclusion
HTML is used to build web sites and HTML5 improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements and how to recover from errors
Some of the new features in HTML5 are functions for embedding audio video graphics client-side data storage and interactive documents HTML5 also contains new elements like ltnavgt ltheadergt ltfootergt and ltfiguregt
References
httpenwikipediaorgwikiHTML httpwwww3schoolscomhtmldefaultasp httpwwwanswerscomtopichtml
- Definition of HTML
-
23
specifies methods to be used in accessing the destination as a whitespace-separated list of names The set of applicable names is a function of the scheme of the URI in the HREF attribute For similar reasons as for the TITLE attribute it may be useful to include the information in advance in the link For example the HTML user agent may chose a different rendering as a function of the methods allowed for example something that is searchable may get a different icon
Line Break BR
The BR element specifies a line break between words (see section Characters Words and Paragraphs) For example
ltPgt Pease porridge hotltBRgt
Pease porridge coldltBRgt
Pease porridge in the potltBRgt
Nine days old
Horizontal Rule HR
The HR element is a divider between sections of text typically a full width horizontal rule or equivalent graphic For example
ltHRgt
ltADDRESSgtFebruary 8 1995 CERNltADDRESSgt
ltBODYgt
Image IMG
The IMG element refers to an image or icon via a hyperlink (see section Simultaneous Presentation of Image Resources)
HTML user agents may process the value of the ALT attribute as an alternative to processing the image resource indicated by the SRC attribute (22)
Attributes of the IMG element
ALIGN
Alignment of the image with respect to the text baseline
`TOP specifies that the top of the image aligns with the tallest item on the line containing the image
24
`MIDDLE specifies that the center of the image aligns with the baseline of the line containing the image
`BOTTOM specifies that the bottom of the image aligns with the baseline of the line containing the image
ALT
Text to use in place of the referenced image resource for example due to processing constraints or user preference
ISMAP
indicates an image map (see section Image Maps)
SRC
Specifies the URI of the image resource (23)
Examples of use
ltIMG SRC=trianglexbm ALT=Warninggt Be sure to read these instructions
lta href=httpmachinehtbinimagemapsamplegt
ltIMG SRC=samplexbm ISMAPgt
ltagt
Advantages
Easy to use Loose syntax (although being too flexible will not comply with standards) Supported on almost every browser if not all browsers Widely used established on almost every website if not all websites Very similar to XML syntax which is increasingly used for data storage Free - You need not buy any software Easy to learn amp code even for novice programmers
Disadvantages
It cannot produce dynamic output alone since it is a static language Sometimes the structuring of HTML documents is hard to grasp You have to keep up with deprecated tags and make sure not to use them Deprecated tags appear because another language that works with HTML has
replaced the original work of the tag thus the other language needs to be learned (most of the time it is CSS)
25
Security features offered by HTML are limited
Conclusion
HTML is used to build web sites and HTML5 improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements and how to recover from errors
Some of the new features in HTML5 are functions for embedding audio video graphics client-side data storage and interactive documents HTML5 also contains new elements like ltnavgt ltheadergt ltfootergt and ltfiguregt
References
httpenwikipediaorgwikiHTML httpwwww3schoolscomhtmldefaultasp httpwwwanswerscomtopichtml
- Definition of HTML
-
24
`MIDDLE specifies that the center of the image aligns with the baseline of the line containing the image
`BOTTOM specifies that the bottom of the image aligns with the baseline of the line containing the image
ALT
Text to use in place of the referenced image resource for example due to processing constraints or user preference
ISMAP
indicates an image map (see section Image Maps)
SRC
Specifies the URI of the image resource (23)
Examples of use
ltIMG SRC=trianglexbm ALT=Warninggt Be sure to read these instructions
lta href=httpmachinehtbinimagemapsamplegt
ltIMG SRC=samplexbm ISMAPgt
ltagt
Advantages
Easy to use Loose syntax (although being too flexible will not comply with standards) Supported on almost every browser if not all browsers Widely used established on almost every website if not all websites Very similar to XML syntax which is increasingly used for data storage Free - You need not buy any software Easy to learn amp code even for novice programmers
Disadvantages
It cannot produce dynamic output alone since it is a static language Sometimes the structuring of HTML documents is hard to grasp You have to keep up with deprecated tags and make sure not to use them Deprecated tags appear because another language that works with HTML has
replaced the original work of the tag thus the other language needs to be learned (most of the time it is CSS)
25
Security features offered by HTML are limited
Conclusion
HTML is used to build web sites and HTML5 improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements and how to recover from errors
Some of the new features in HTML5 are functions for embedding audio video graphics client-side data storage and interactive documents HTML5 also contains new elements like ltnavgt ltheadergt ltfootergt and ltfiguregt
References
httpenwikipediaorgwikiHTML httpwwww3schoolscomhtmldefaultasp httpwwwanswerscomtopichtml
- Definition of HTML
-
25
Security features offered by HTML are limited
Conclusion
HTML is used to build web sites and HTML5 improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements and how to recover from errors
Some of the new features in HTML5 are functions for embedding audio video graphics client-side data storage and interactive documents HTML5 also contains new elements like ltnavgt ltheadergt ltfootergt and ltfiguregt
References
httpenwikipediaorgwikiHTML httpwwww3schoolscomhtmldefaultasp httpwwwanswerscomtopichtml
- Definition of HTML
-