<cite> tag
Definition and Usage
The <cite> tag defines the title of a work (e.g. a book, a song, a movie, a TV show,
a painting, a sculpture, etc.).
Note: A person's name is not the title of a work
Define the title of a work with the <cite> tag:
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
Example
<!DOCTYPE html>
<html>
<body>
<img src="img_the_scream.jpg" width="220" height="277" alt="The Scream">
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
</body>
</html>
RESULT WILL BE:
The Scream by Edward Munch. Painted in 1893.
HTML <marquee> Tag
The HTML <marquee> tag is used for scrolling piece of text or image displayed
either horizontally across or vertically down your web site page depending on the
settings.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee>This is basic example of marquee</marquee>
<marquee direction="up">The direction of text will be from bottom to
top.</marquee>
</body>
</html>
Specific Attributes
The HTML <marquee> tag also supports following additional attributes:
Attribute Value Description
Behavior scroll Defines the type of scrolling.
slide
alternate
Bgcolor rgb(x,x,x) Deprecated-Defines the direction of scrolling
#xxxxxx the content.
colorname
Direction up Defines the direction of scrolling the content.
down
left
right
Height pixels or % Defines the height of marquee.
Loop number Specifies how many times to loop. The
default value is INFINITE, which means that
the marquee loops endlessly.
scrolldelay seconds Defines how long to delay between each
jump.
Superscript Text
The content of a <sup>...</sup> element is written in superscript; the font size
used is the same size as the characters surrounding it but is displayed half a
character's height above the other characters.
Example
<!DOCTYPE html>
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>The following word uses a <sup>superscript</sup> typeface.</p>
</body>
</html>
This will produce following result:
The following word uses a superscript typeface.
Subscript Text
The content of a <sub>...</sub> element is written in subscript; the font size used
is the same as the characters surrounding it, but is displayed half a character's
height beneath the other characters.
Example
<!DOCTYPE html>
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
</body>
</html>
This will produce following result:
The following word uses a subscript typeface.
HTML <pre> Tag
Definition and Usage
The <pre> tag defines preformatted text.
Text in a <pre> element is displayed in a fixed-width font (usually Courier), and it
preserves both spaces and line breaks.
Example
Preformatted text:
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre> Result will be Same
HTML Comments:
Comment is a piece of code which is ignored by any web browser. It is a good
practice to add comments into your HTML code, especially in complex
documents, to indicate sections of a document, and any other notes to anyone
looking at the code. Comments help you and others understand your code and
increases code readability.
HTML comments are placed in between <!-- ... --> tags. So any content placed
with-in <!-- ... --> tags will be treated as comment and will be completely ignored
by the browser.
Example
<!DOCTYPE html>
<html>
<head> <!-- Document Header Starts -->
<title>This is document title</title>
</head> <!-- Document Header Ends -->
<body>
<p>Document content goes here.....</p>
</body>
</html>
This will produce following result without displaying the content given as a part
of comments:
Document content goes here.....
Valid vs Invalid Comments
Comments do not nest which means a comment can not be put inside another
comment. Second the double-dash sequence "--" may not appear inside a
comment except as part of the closing --> tag. You must also make sure that there
are no spaces in the start-of-comment string.
Example
Here given comment is a valid comment and will be wiped off by the browser.
<!DOCTYPE html>
<html>
<head>
<title>Valid Comment Example</title>
</head>
<body>
<!-- This is valid comment -->
<p>Document content goes here.....</p>
</body>
</html>
But following line is not a valid comment and will be displayed by the browser.
This is because there is a space between the left angle bracket and the exclamation
mark.
<!DOCTYPE html>
<html>
<head>
<title>Invalid Comment Example</title>
</head>
<body>
< !-- This is not a valid comment -->
<p>Document content goes here.....</p>
</body>
</html>
This will produce following result:
< !-- This is not a valid comment -->
Document content goes here.....
Multiline Comments
So far we have seen single line comments, but HTML supports multi-line
comments as well.
You can comment multiple lines by the special beginning tag <!-- and ending tag
--> placed before the first line and end of the last line as shown in the given
example below.
Example
<!DOCTYPE html><html>
<head>
<title>Multiline Comments</title>
</head>
<body>
<!--
This is a multiline comment and it can
span through as many as lines you like. -->
<p>Document content goes here.....</p>
</body>
</html>
This will produce following result:
Document content goes here.....
HTML Images
Images are very important to beautify as well as to depict many complex concepts
in simple way on your web page. This tutorial will take you through simple steps
to use images in your web pages.
Insert Image
You can insert any image in your web page by using <img> tag. Following is the
simple syntax to use this tag.
<img src="Image URL" ... attributes-list/>
The <img> tag is an empty tag, which means that it can contain only list of
attributes and it has no closing tag.
Example
To try following example, let's keep our HTML file test.htm and image file
test.png in the same directory:
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src="test.png" alt="Test Image" />
</body>
</html>
You can use PNG, JPEG or GIF image file based on your comfort but make sure
you specify correct image file name in src attribute. Image name is always case
sensitive.
The alt attribute is a mandatory attribute which specifies an alternate text for an
image, if the image cannot be displayed.
Set Image Location
Usually we keep our all the images in a separate directory. So let's keep HTML
file test.htm in our home directory and create a subdirectory images inside the
home directory where we will keep our image test.png.
Example
Assuming our image location is "image/test.png", try the following example:
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src="images/test.png" alt="Test Image" />
</body>
</html>
This will produce following result:
Simple Image Insert
Set Image Width/Height
You can set image width and height based on your requirement
using width and height attributes. You can specify width and height of the image
in terms of either pixels or percentage of its actual size.
Example
<!DOCTYPE html>
<html>
<head>
<title>Set Image Width and Height</title>
</head>
<body>
<p>Setting image width and height</p>
<img src="test.png" alt="Test Image" width="150" height="100"/>
</body>
</html>
Set Image Border
By default image will have a border around it, you can specify border thickness in
terms of pixels using border attribute. A thickness of 0 means, no border around
the picture.
Example
<!DOCTYPE html>
<html>
<head>
<title>Set Image Border</title>
</head>
<body>
<p>Setting image Border</p>
<img src="test.png" alt="Test Image" border="3"/>
</body>
</html>
Set Image Alignment
By default image will align at the left side of the page, but you can
use align attribute to set it in the center or right.
Example
<!DOCTYPE html>
<html>
<head>
<title>Set Image Alignment</title>
</head>
<body>
<p>Setting image Alignment</p>
<img src="test.png" alt="Test Image" border="3" align="right"/>
</body>
</html>
