HTML Seminar

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 & 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 BernersLee 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) Static. 2) 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 wasn't permanent.
http://kumca2010.xtgem.com
Static sites are meant for those sites that cant be changed or updates regularly. And Dynamic sites are those sites that changes or update regularly.
IMPORTANT POINTS: 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 as it is required by XML. 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. All file names you create should be lower-case. The href attribute specifies the link's destination: <a href="http://kumca2010.xtgem.com">kumca2010</a> The href or the name attribute must be present in the <a> tag. Common HTML Tags to Know and Understand (Remember you will need to Close each of these tags! An example is provided for the first tag.) <html> beginning of an HTML document (</html> to close). <head> beginning of the head of the document. <title> beginning of the title in the head of the document. <body> beginning of the body (main part) of the document. <h1> the headline, or main heading, of your page. <h2> the subheading of your page. <h3> the sub-sub heading [Note: There are a total of 6 levels of headers <h1> - <h6> available]. <p> begin new paragraph. <ul> unordered list (bulleted list).
<ol> ordered list (numbered list). <li> list item (used in conjunction with <ul> or <ol>). <a> anchor (used for a hyperlink) such as <a href=http://www.lib.umd.edu>UM Libraries</a>. <strong> strong emphasis: usually displays as boldface [Note: Use this tag instead of <b> (bold)]. <em> emphasis [Note: Use this tag instead of <i> (italics)]. <table> begin a table. <tr> begin a table row. <th> table header (information in the cells of the top row of a table). <td> table data (information in an individual cell). The following tags are not used in pairs; only a beginning tag is used: <br> line break <img> image (used in conjunction with the SRC attribute -- <IMG SRC=>) When you are coding your web page, keep in mind that HTML elements cannot overlap each other. So, the following is invalid: <strong><em>Incorrect nesting</strong></em> Why? In this example, the strong element is intended to contain an em element. To be truly contained within the strong element, the em element's end tag must occur before the strong element's end tag. To correct this problem, you would need to change the coding to: <strong><em>Correct nesting</em></strong> 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.
Launch Notepad on your computer, by going to Start ProgramsAccessories Notepad. To make your efforts at coding a bit easier, go to Format and be sure Word Wrap 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 nonstandard HTML.) Type the following: <html> <head> <title> Type the title of your web page here. For example: My First Web Page </title> [Remember: Always close your tags!] </head> <body> <h1>Type the title or main heading you want to be seen at the top of your Web page. For Example: My First Web Page </h1> <p>Type today's date here. </p> <h2>Type a title for a list. For Example: My Grocery List</h2> <p>Type a short introduction about the topic. </p> <ul>
<li>Type your first list item. For example: Cake</li> <li>Type your second list item. For example: Popcorn</li> <li>Type your third list item. For example: Dove Bars</li> <li>Type your fourth list item. For example: Tums</li></ul> <h2>Type a title for a numbered list. For example: My Vacation Priorities </h2> <p>Type a second short introduction. </p>
<ol> <li>Type your first list item. For example: Disneyworld</li> <Ii>Type your second list item. For example: Hollywood. </li> <li>Type your third list item. For example: Universal Studios. </li> <li>Type your fourth list item. For example: Home. </li></ol> <p>Type Authored by and your name. </p>
Now we will use the anchor tag <a> 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 outside 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 <h1> tag: <a name=top></a> [Note: Do not forget the quotation marks!] Then, add the following to your page after the final </p> (the authored by statement): <p>Go to the <a href=#top>top</a> of the page.</p> Whenever you put a URL inside an anchor tag, you must enclose it within quotation marks. Also, dont forget that the URL is case-sensitive. Insert the following sentence into your sample page below the numbered list (after the </ol>) to make a link to the visitors page on the University of Maryland Libraries website.
(You can use another site if you know the URL.) <p>More information can be found in the University of Maryland Libraries <a href="http://www.lib.umd.edu/visitors.html">Information For Visitors</a> web page.</p> 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: </body> </html> To save your file, go to file and save 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 save as type All files (*.*).
Now, we can add a link to your e-mail address. Choose the line that reads <p>Type Authored by and your name. </p> and change the coding as follows: <p>Authored by <a href="mailto:[insert your e-mail address@umd.edu here]"> your name.</a> </p> 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:
This image is named catalog.gif. Sample HTML code for this image could read:
<img src="images/home/catalog.gif" alt="Catalog" border="0" width="127" height="18"> An image used on a Web page is a separate file on the Libraries server. All information about the image is put inside the <img> tag. The <img> 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 <img> 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 home subfolder of the images folder. In the above example, there will be no border around the image when it appears on a web page. The ALT text is what appears when you hover 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: <p><center><img src="kick.jpg" border=0 height=119 width=121 alt=KRISHNA
UNIVERSITY></center></p> Save your file and view it in Firefox. In addition to making text hyperlink to other documents, you can also add a hypertext link to graphics on your pages, which will allow you to jump 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: <a href="http://kumca2010.xtgem.com"><img src="kick.jpg" border=0 height=119 width=121 alt=Krishna university></a> 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. <table> <tr> <th> Heading for 1st column . For example: Name</th> <th> Heading for 2nd column. For example: Phone Number</th></tr> <tr> <td> Words in the first row, first column. For example: kishore</td><td> Words in the first row, second column. For example: X4-7096 </td></tr> <tr> <td> Words in the second row, first column. For example: veda</td> <td> Words in the second row, second column. For example: X4-7029</td> </tr>
</table> Save your document, and preview it in Firefox. Next, we'll 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: <table cellpadding="5"> You can also change the amount of space between table cells which is called cellspacing in HTML. Both cellpadding and cellspacing commands can be used at the same time. <table cellspacing="5" cellpadding="5"> 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 <font>..</font> 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 = 1
Font Size = 2
Font Size = 3-- normal size text
Font Size = 4
Font Size = 5
Font Size = 6
Font Size = 7
Remember 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: <font size=N>blah blah blah</font> where N=1 to 7.
10
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:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"> <HEAD> <TITLE>Introduction to HTML</TITLE> </HEAD> ... 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 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.
11
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 name/value 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, and the header value is taken from the value of the CONTENT attribute. HTTP header names are not case sensitive.
12
NAME: Specifies the name of the name/value pair. If not present, HTTP-EQUIV gives the name. CONTENT: Examples: If the document contains: <META HTTP-EQUIV="Expires" CONTENT="Tue, 04 Dec 1993 21:29:02 GMT"> <meta http-equiv="Keywords" CONTENT="Fred"> <META HTTP-EQUIV="Reply-to" content="fielding@ics.uci.edu (Roy Fielding)"> <Meta Http-equiv="Keywords" CONTENT="Barney"> then the server may include the following header fields: Expires: Tue, 04 Dec 1993 21:29:02 GMT Keywords: Fred, Barney Reply-to: fielding@ics.uci.edu (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. 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: <NEXTID N=Z27>
specifies the value of the name/value pair.
13
Body: BODY The BODY element contains the text flow of the document, including headings, paragraphs, lists, etc. For example: <BODY> <h1>Important Stuff</h1> <p>Explanation about important stuff... </BODY>
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: <H1>This is a heading</H1> Here is some text <H2>Second level heading</H2> Here is some more text. Typical renderings are: H1 Bold, very-large font, centered. One or two blank lines above and below. H2 Bold, large font, flush-left. One or two blank lines above and below. H3
14
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, etc.Typically, 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: <H1>This Heading Precedes the Paragraph</H1> <P>This is the text of the first paragraph. <P>This is the text of the second paragraph. Although you do not need to start paragraphs on new lines, maintaining this convention facilitates document maintenance.</P> <P>This is the text of a third paragraph.</P> Preformatted Text: PRE The PRE element represents a character cell block of text and is suitable for text that has been formatted for a monospaced font.
15
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: <PRE> Line 1. Line 2 is to the right of line 1. Line 3 aligns with line 2. </PRE> 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 9.6 "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. <a href="abc">abc</a> <a href="def">def</a>
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: <ADDRESS> Kishore Technologies<BR> Beside TCS<BR> Banglore<BR> Mobile : 7842634463. </ADDRESS> Block Quote: BLOCKQUOTE The BLOCKQUOTE element contains text quoted from another source. A typical rendering might be a slight extra left and right indent, and/or 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 (>), in the left margin. Example of use: I think the play ends <BLOCKQUOTE> <P>Soft you now, the fair Ophelia. Nymph, in thy orisons, be all my sins remembered. </BLOCKQUOTE>
17
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: <UL> <LI>First list item <LI>Second list item <p>second paragraph of second item <LI>Third list item </UL>
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: <OL> <LI>Click the Web button to open URI window. <LI>Enter the URI number in the text field of the Open URI window. The Web document you specified is displayed. <ol> <li>substep 1
18
<li>substep 2 </ol> <LI>Click highlighted text to move from one link to another. </OL> 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: <DIR> <LI>A-H<LI>I-M <LI>M-R<LI>S-Z </DIR>
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: <MENU> <LI>First item in the list. <LI>Second item in the list. <LI>Third item in the list. </MENU>
19
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 and/or 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: <DL> <DT>Term<DD>This is the definition of the first term. <DT>Term<DD>This is the definition of the second term. </DL> 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 and/or 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. <DL COMPACT> <DT>Term<DD>This is the first definition in compact format. <DT>Term<DD>This is the second definition in compact format. </DL>
Phrase Markup:
Phrases may be marked up according to idiomatic usage, typographic appearance, or for use as hyperlink anchors. 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.
20
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 <B>bold <I>italic</I></B> may be rendered the same as plain <B>bold </B><I>italic</I>
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 couldn't get enough of <cite>The Grapes of Wrath</cite>. 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 <code>x += 1</code> is short for <code>x = x + 1</code>. Emphasis: EM The EM element indicates an emphasized phrase, typically rendered as italics. For example: A singular subject <em>always</em> 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: Enter <kbd>FIND IT</kbd> to search the database. Sample: SAMP
21
The SAMP element indicates a sequence of literal characters, typically rendered in a monospaced font. For example: The only word containing the letters <samp>mt</samp> is dreamt. Strong Emphasis: STRONG The STRONG element indicates strong emphasis, typically rendered in bold. For example: <strong>STOP</strong>, or I'll say "<strong>STOP</strong>" again!
Variable: VAR The VAR element indicates a placeholder variable, typically rendered as italic. For example: Type <SAMP>html-check <VAR>file</VAR> | more</SAMP> to check <VAR>file</VAR> 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 The TT element indicates teletype (monospaced )text. Where a teletype font is unavailable, an alternative representation may be used.
22
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 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
23
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: <P> Pease porridge hot<BR> Pease porridge cold<BR> Pease porridge in the pot<BR> 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: <HR> <ADDRESS>February 8, 1995, CERN</ADDRESS> </BODY> 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: <IMG SRC="triangle.xbm" ALT="Warning:"> Be sure to read these instructions. <a href="http://machine/htbin/imagemap/sample"> <IMG SRC="sample.xbm" ISMAP> </a> 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 & 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 <nav>, <header>, <footer>, and <figure>. References: http://en.wikipedia.org/wiki/HTML http://www.w3schools.com/html/default.asp http://www.answers.com/topic/html

HTML Seminar

Transféré par

Informations du document

Description originale:

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

HTML Seminar

Transféré par

Droits d'auteur :

Formats disponibles

1

Maryland Libraries' home page.

Creating a Web Page: Understanding and using Images

Adding a Simple Table:

Font Size = 3-- normal size text

specifies the value of the name/value pair.

Block Structuring Elements

but I am not sure.

Vous aimerez peut-être aussi