Displaying images using img tag in HTML
The IMG element is used to incorporate images into an HTML document. The common attributes used are SRC, ALT (required by HTML 4), WIDTH, and HEIGHT (recommended for practical reasons). IMG is an inline element, and can be used anywhere text can be used. Images can be put into a sentence, in a table cell, by themselves, or almost anywhere on a page.
The value of the SRC attribute is the URL of the image file. This URL can be absolute (e.g., “http://www.w3mentor.com/images/”) or relative. Relative URLs can be either relative to the current directory (e.g., “../../../images/learnhtml.gif”), or relative to the root of the current web server (e.g., “/images/learnhtml.gif”). The recommended usage is relative to the current directory.
Each image file contins not only the pixels of the image, but also the dimensions of the image. If the WIDTH and HEIGHT attributes are not specified, the dimensions from the image file are used to size the image on the web page.
The images files are loaded after the web page has loaded, though. If the WIDTH and HEIGHT attributes are not in the web page, this means that the browser does not know how much apace to allocate the image until the image file has been loaded. IF the WIDTH and HEIGHT attributes are specified in the HTML, then the browser can allocate that much space to the image before the image is actually available.
The WIDTH and HEIGHT can be specified either as decimal numbers, or as a percentage of the space available. If a number is used, it is taken as a dimension in pixels.
If the specified dimensions are not the same as the image dimensions, the browser will stretch or reduce the image to the specified dimensions. The browser will do the best job it can to preserve the appearance of the image, but in some cases, though, the change of size will result in unacceptable distortion. If the image is reduced, this also means that a larger file is being loaded that is required, meaning longer than necessary load times and bandwidth usage.
Recommended usage is to specify the same dimensions as the actual dimensions of the image. If resizing is desired, the resizing should be done with an image editing program, saving the image with the desired dimensions.
The value of the ALT attribute describes the file, and is displayed if the image is not available. The ALT attribute is required by the HTML 4 specifications.
Example code:
<IMG SRC="../../images/learnhtml.gif" ALT="Default Size"> <br> <IMG SRC="../../images/learnhtml.gif" WIDTH="175" HEIGHT="16" ALT="Same Size"> <br> <IMG SRC="../../images/learnhtml.gif" WIDTH="175" HEIGHT="32" ALT="Double Height"> <br> <IMG SRC="../../images/learnhtml.gif" HEIGHT="32" ALT="Double Size"> <br> <IMG SRC="../../images/learnhtml.gif" WIDTH="100%" ALT="100% WIDTH">
Horizontal rule HR tag in HTML
The horizontal rule HTML element can be used to add a visible separation line to a document. The amount of vertical space inserted between a rule and the content that surrounds it depends on the browser. The HR element is an empty element.
The appearance of a horizontal rule should be controlled by the STYLE attribute. Different browsers interpret the STYLE attribute differently, however; this can be frustrating to web designers.
The Horizontal Rule (HR) element is an empty block element. While previous HTML versions used attributes to specify the appearance of a horizontal rule, HTML 4 now use the STYLE attribute to specify the appearance.
The width (horizontal size) of an hr can be controlled by the width style or by the margin-left and margin-right styles: e.g.,
width:50%;
margin-left:20pt;margin-right:20pt;
The height (vertical size) of an hr is controlled by the height style: e.g.,
height:5pt;
The horizontal position of an hr is controlled by the margin-left and margin-right styles: e.g.,
margin-left:auto;margin-right:20pt;width:300pt;
The color of an hr should be specified by both the color and background-color styles, because of browser differences, e.g.,
color:#C00000;background-color:#C00000;
The hr element is usually rendered with a 1 pixel border; to eliminate the border, specify border:0.
Example code:
<H1>HTML 4 Strict Horizontal Rule Examples</H1>
<P>Default Horizontal Rule</P>
<HR>
<P>Horizontal Rule: width:50%</P>
<HR STYLE="width:50%">
<P>Horizontal Rule: width:400px</P>
<HR STYLE="width:400px">
<P>Horizontal Rule: width:400pt</P>
<HR STYLE="width:400pt">
<P>Horizontal Rule: width:30em</P>
<HR STYLE="width:30em">
<P>Horizontal Rule: width:50%;margin-left:0
<b>BROWSER DEPENDENT</b></P>
<HR STYLE="width:50%;margin-left:0px">
<P>Horizontal Rule: in div width:50%;margin-left:0</P>
<div STYLE="margin-left:0px;width:50%;margin-right:auto;">
<HR>
</div>
<P>Horizontal Rule: width:50%;margin-right:0;margin-left:auto
<b>BROWSER DEPENDENT</b></P></P>
<HR STYLE="width:50%;margin-right:0px;margin-left:auto;display:block">
<P>Horizontal Rule: in div width:50%;margin-right:0</P>
<div STYLE="float:right;margin-right:0px;width:50%;margin-left:auto;">
<HR>
</div>
<div STYLE="clear:right"></div>
<P>Horizontal Rule: width:50%;height:4px</P>
<HR STYLE="width:50%;height:4px">
<P>Horizontal Rule:<br>STYLE="width:50%;height:4px;
color:gray;background-color:gray;border:0;"</P>
<HR STYLE="width:50%;height:4px;color:gray;
background-color:gray;border:0;">Title tag in HTML pages
The title of an HTML document is advisory only, but it is also very important. The title appears in the title bar of the browser window, and it also appears as the first line of search engine results. The HTML TITLE element is actually the title of the web page, and it should meaningfully suggest the contents of the page. The TITLE element is placed in the HEAD element of HTML, and there should be exactly one TITLE element in each page. With most browsers, the title does not appear in the web page itself, but is shown in the title bar of the browser window.
The title text should be between the opening and closing TITLE tags, e.g.,
<TITLE> Building your own HTML PAGES - From w3mentor </TITLE>
Other HTML tags should not be used within the title; they will not be interpreted. HTML entities can be used in titles, and they will be interpreted and rendered as the symbols or characters they represent, e.g.,
<TITLE> How to Get Copyrights (©) & Trademarks (&trade) in titles.. </TITLE>
By the HTML specifications, each page must have exactly one title element.
The title element can contain plain text.
The title element can also contain html entities to include characters and symbols which are not part of the document character set.
No other HTML elements can be contained in the title element.
Example code:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Blank HTML 4 Strict Page</TITLE>
<META HTTP-EQUIV="Content-Type"
CONTENT="text/html; charset=utf-8">
</HEAD>
<BODY>
<P></P>
</BODY>
</HTML>Usually, the page headings, which do show on the body of the web page, should coordinate with the title. For example, the title of this page is
and the page headings are
Using Titles
HTML Tutorials – W3mentor
Heading tags in HTML pages
The heading elements of an HTML document organize the content in a way similar to an outline. There are six levels of headings, which correspond to the levels of an outline.The heading elements of an HTML document specify topics of the page, as a hierarchy from H1 down to H6. The tags are H1, H2, H3, H4, H5, H6. The contents of the heading elements can be a sequence of inline elements.
The heading tags have the following attributes in HTML 4
* coreattr
ID
CLASS
STYLE
TITLE
* i18n
DIR
LANG
* events
ONCLICK
ONDBLCLICK
ONMOUSEDOWN
ONMOUSEMOVE
ONMOUSEOUT
ONMOUSEOVER
ONMOUSEUP
ONKEYDOWN
ONKEYPRESS
ONKEYUPHeadings in HTML pages
The heading elements of an HTML document organize the content in a way similar to an outline. There are six levels of headings, which correspond to the levels of an outline.
The top (most important) level heading uses the H1 tag, and the lowest (least important) supported level uses the H6 tag. Typically, browsers render the headings as bold type, in decreasing sizes, by default. This default rendering can be changed by styles, though.
Usually, a document should have one or more H1 elements, each followed by one or more H2 elements. Each H2 element can be followed by one or more H3 elements, and so on. When headings are used this way, they mimic the structure of an outline. Text and other content can follow any of the headings, as needed.
Usually, the page headings should coordinate with the title. For example, the title of this page is
<TITLE>Using Headings - HTML Tutorials - w3mentor</TITLE>
and the page headings are
<H1>Using Headings</H1> <H2>HTML Tutorial - w3mentor</H2>
Creating a HTML page
Development of HTML pages can start with a basic template, which includes the framework elements. Specific information can then be added to the page as needed. An HTML page begins with a Document Type Definition (DTD), which identifies the specification against which the page should be interpreted. This is followed by the page itself, embedded in HTML tags. Contained within the HTML element are the HEAD element and the BODY element.
The DTD is not an HTML element; it is actually an SGML element.
The HEAD element contains additional information which is used to interpret the document, as well as information that is used by indexing robots. None of the contents of the HEAD element is normally shown in the browser window proper. The HEAD element is required to contain a TITLE element, which is shown on the title bar of the browser window. The META element used below identifies the character set in which the page is encoded for the HTML versions.
The BODY element contains the information which will be show in the browser window. Since these are blank documents, the body element does not contain anything.
Example:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE><!-- Put the page TITLE here --></TITLE>
<META HTTP-EQUIV="Content-Type"
CONTENT="text/html; charset=us-ascii">
</HEAD>
<BODY>
<!-- Put the page content here -->
</BODY>
</HTML>Format in HTML pages
In most cases, the format of the HTML text does not affect how the page appears in a browser. The page contents are reformatted according to the HTML tags.
When saving an HTML page from a general text editor, always explicitly use the extension “.htm” or “.html”. If you do not do this, the editor will probably add the extension “.txt”, and the browser will not recognize it as an HTML page.
HTML pages do not have to be loaded from the Internet to be displayed in a web browser.
From Netscape Navigator, choose File from the main menu, and Open Page … from the submenu. Click Choose File from the dialog box, select the file you want to display, and click Open.
From Microsoft Internet Explorer, choose File from the main menu, and Open … from the submenu. Click Browse from the dialog box, select the file you want to display, and click OK.
Empty elements in HTML
Tags for empty elements do not occur in pairs. They consist of the keyword enclosed in “angle brackets.” No page text is contained within them.
For example, the horizontal rule tag, keyword HR, puts a horizontal line on the page.
Example:
<P> This is a paragraph, which will be formatted into left justified lines to fit the available space. </P> <HR> <P> Another paragraph, which will be set apart from the previous paragraph by a blank line and by the horizontal rule. </P>
Output:
This is a paragraph, which will be
formatted into left justified
lines to fit the available space.
Another paragraph, which will
be set apart from the previous
paragraph by a blank line and
by the horizontal rule.
Introduction to HTML
Hypertext markup language, HTML, is the basic language of the web page. Writing HTML is not programming. HTML is not a procedural language. Writing HTML is more like word processing than programming. Like word processing, there are two approaches to write an HTML page. There are WYSIWYG (What You See Is What You Get) editors for HTML, which will allow your to compose a page, and see the result as you are doing it. The alternative is to use any text editor, such as notepad, wordpad, or even edit.
HTML uses tags, which are keywords enclosed in “angle brackets” (“<" and ">“) to define the meaning of the text and the format of a page. Working with the HTML directly gives you more flexible control over the page and how it will appear.
There are two categories of elements; container elements and empty elements. Container elements have a pair of tags, and the text in between is contained within thos tags. The first, or opening, tag is the keyword enclosed in “angle brackets.” The second, or closing, tag is the same as the opening tag, except that the keyword is preceeded by a (forward) slash, “/”.
For example the paragraph tag (keyword P) opens a paragraph with
<P>
and closes it with
<P>
The text in between will be seen on the web page as a paragraph.
HTML is not case sensitive, and the tags and attribute names are customarily in upper case.
Example:
<P> This is a paragraph, which will be formatted into left justified lines to fit the available space. </P> <P> Another paragraph, which will be set apart from the previous paragraph by a blank line. </P>
Output:
This is a paragraph, which will be
formatted into left justified
lines to fit the available space.
Another paragraph, which will
be set apart from the previous
paragraph by a blank line.
