Microsoft.NET

……………………………………………….Expertise in .NET Technologies

HTML Tags – Part 2

Posted by Ravi Varma Thumati on December 15, 2009

Paragraph Tag <p>

Publishing any kind of written works requires the use of a paragraph. The paragraph tag is very basic and a great introductory tag for beginner’s because of its simplicity.

The <p> tag defines a paragraph. Using this tag places a blank line above and below the text of the paragraph. These automated blank lines are examples of how a tag “marks” a paragraph and the web browser automatically understands how to display the paragraph text because of the paragraph tag.

<p>Avoid losing floppy disks with important school…</p>

<p>For instance, let’s say you had a HUGE school…</p>

<p align=”justify”>For instance, let’s say you had a HUGE school or work…</p>

HTML – Headings 1:6

heading in HTML is just what you might expect, a title or subtitle. By placing text inside of <h1> (heading) tags, the text displays bold and the size of the text depends on the number of heading (1-6). Headings are numbered 1-6, with 1 being the largest heading and 6 being the smallest.

<body>

<h1>Headings</h1>

<h2>are</h2>

<h3>great</h3>

<h4>for</h4>

<h5>titles</h5>

<h6>and subtitles</h6>

</body>

Notice that each heading has a line break before and after each heading display. This is a built in attribute so to speak associated with the heading tag. Each time you place a heading tag, your web browser automatically places a line break in front of your beginning tag and after your ending tag exactly the same as with <p> tags.

HTML Horizontal Rule

Use the <hr /> tag to display lines across the screen. Note: the horizontal rule tag has no ending tag like the line break tag.

<hr />

Use

<hr /><hr />

Them

<hr />

Sparingly

<hr />

HTML Lists

There are 3 different types of lists. A <ol> tag starts an ordered list, <ul> for unordered lists, and <dl> for definition lists. Use the type and start attributes to fine tune your lists accordingly.

<ul> – unordered list; bullets

<ol> – ordered list; numbers

<dl> – definition list; dictionary

HTML Ordered Lists

Use the <ol> tag to begin an ordered list. Place the <li> (list item) tag between your opening <ol> and closing </ol> tags to create list items. Ordered simply means numbered, as the list below demonstrates.

<h4 align=”center”>Goals</h4>

<ol>

<li>Find a Job</li>

<li>Get Money</li>

<li>Move Out</li>

</ol>

Start your ordered list on any number besides 1 using the start attribute.

<ol start=”4″ >

HTML Ordered Lists Continued

There are 4 other types of ordered lists. Instead of generic numbers you can replace them with Roman numerals or letters, both capital and lower-case. Use the type attribute to change the numbering.

<ol>

<ol>

<ol>

<ol>

HTML Unordered Lists

Create a bulleted list with the <ul> tag. The bullet itself comes in three flavors: squares, discs, and circles. The default bullet displayed by most web browsers is the traditional full disc.

<h4 align=”center”>Shopping List</h4>

<ul>

<li>Milk</li>

<li>Toilet Paper</li>

<li>Cereal</li>

<li>Bread</li>

</ul>

HTML – Font and Basefont

The <font> tag is used to add style, size, and color to the text on your site. Use the size, color, and face attributes to customize your fonts. Use a <basefont> tag to set all of your text to the same size, face, and color.

Font Size

Set the size of your font with size. The range of accepted values is from 1(smallest) to 7(largest).The default size of a font is 3.

<p>

<font size=”5″>Here is a size 5 font</font>

</p>

Font Color

Set the color of your font with color.

<font color=”#990000″>This text is hexcolor #990000</font>

<br />

<font color=”red”>This text is red</font>

Font Face

Choose a different font face using any font you have installed. Be aware that if the user viewing the page doesn’t have the font installed, they will not be able to see it. Instead they will default to Times New Roman. An option is to choose a few that are similar in appearance.

<p>

<font face=”Bookman Old Style, Book Antiqua, Garamond”>This paragraph

has had its font…</font>

</p>

<p><font size=”7″ face=”Georgia, Arial” color=”maroon”>C</font>ustomize

your font to achieve a desired look.</p>

HTML – Formatting Elements

As you begin to place more and more elements onto your web site, it will become necessary to make minor changes to the formatting of those elements. In our HTML Attributes lesson we discussed ways to add some flavor with attributes and align elements within other elements. Several tags exist to further amplify text elements. These formatting tags can make text bold, italic, sub/superscripted, and more.

Bold, Italic and More

<p>An example of <b>Bold Text</b></p>

<p>An example of <em>Emphasized Text</em></p>

<p>An example of <strong>Strong Text</strong></p>

<p>An example of <i>Italic Text</i></p>

<p>An example of <sup>superscripted Text</sup></p>

<p>An example of <sub>subscripted Text</sub></p>

<p>An example of <del>struckthrough Text</del></p>

<p>An example of <code>Computer Code Text</code></p>

Output will be

An example of Bold Text
An example of Emphasized Text
An example of Strong Text
An example of Italic Text
An example of superscripted Text
An example of subscripted Text
An example of struck through
An example of Computer Code Text

HTML Color Coding System – Color Names

There are 3 different methods to set color. The simplest being the Generic terms of colors. Examples: black, white, red, green, and blue. Generic colors are preset HTML coded colors where the value is simply the name of each color. Here is a sample of the most widely supported colors and their respective name values.

HTML Coloring System – Hexadecimal

The hexadecimal system is complex and difficult to understand at first. Rest assured that the system becomes much, MUCH easier with practice and as a blossoming web developer, it is critical to understand hexadecimals to be capable of using them in your own web publications. They are far more reliable and widely compatible among web browsers and are the standard for colors on the internet.

A hexadecimal is a 6 digit representation of a color. The first two digits(RR) represent a red value, the next two are a green value(GG), and the last are the blue value(BB).

Here’s a hexadecimal you might see in an HTML document.

bgcolor=”#RRGGBB”

HTML Links and Anchors

The web got its spidery name from the plentiful connections between web sites. These connections are made using anchor tags to create links. Text, Images, and Forms may be used to create these links.

HTML – Hypertext Reference (href)

The href attribute defines reference that the link refers to. Basically this is where the user will be taken if they wish to click this link.

Hypertext references can be Internal, Local, or Global.

Internal – Links to anchors on the current page

Local – Links to other pages within your domain

Global – Links to other domains outside of your site

Internal – href=”#anchorname”

Local – href=”../pics/picturefile.jpg”

Global – href=”http://www.tizag.com/&#8221;

HTML – Text Links

Use the <a></a> tags to define the start and ending of an anchor. Decide what type of href attribute you need and place this attribute into the opening tag. The text you place between the opening and closing tags will be shown as the link on a page. Use the demonstration below as a reference.

<a href=”http://www.tizag.com/&#8221; target=”_blank” >Tizag Home</a>

<a href=”http://www.espn.com/&#8221; target=”_blank” >ESPN Home</a>

<a href=”http://www.yahoo.com/&#8221; target=”_blank” >Yahoo Home</a>

HTML – Link Targets

The target attribute defines whether to open the page in a separate window, or to open the link in the current browser window.

target=” _blank” Opens new page in a new browser window
_self” Loads the new page in current window
_parent” Loads new page into a frame that is superior to where the link lies
_top” Loads new page into the current browser window, cancelling all frames

HTML Character Entities

An entity is a fancy term for a symbol. Several symbols such as copyright, trademark, or foreign cash symbols exist outside of the ones you see on your keyboard. In order to display them. In order to display these characters, you need to know 3 parts.

Each begins with a ampersand – &

Then the entities name – copy

And finally a semicolon – ;

Combine &copy; to make – © – Copyright symbol.

HTML – Images

Images are a staple of any web designer, so it is very important that you understand how to use them properly. Use the <img /> tag to place an image on your web page.

<img src=”sunset.gif” />

HTML – Image src

Above we have defined the src attribute. Src stands for source, the source of the image or more appropriately, where the picture file is located. As with links described in a previous lesson, you may use any standard URL to properly point the src attribute to a local or external source.

There are two ways to define the source of an image. First you may use a standard URL. (src=http://www.Tizag.com/pics/htmlT/sunset.gif) As your second choice, you may copy or upload the file onto your web server and access it locally using standard directory tree methods. (src=”../sunset.gif”) The location of this picture file is in relation to your location of your .html file.

Local Src Location Description
src=”sunset.gif” picture file resides in same directory as .html file
src=”../sunset.gif” picture file resides in previous directory as .html file
src=”../pics/sunset.gif” picture file resides in the pic directory in a previous directory as .html file

A URL cannot contain drive letters, since a src URL is a relational source interpretation based on the location of your .html file and the location of the picture file. Therefore something like src=”C:\\www\web\pics\” will not work. Pictures must be uploaded along with your .html file to your web server.

Each method has its pros and cons, for instance using the URL of pictures on other sites poses a problem if the web master(s) of the other site happen to change the physical location of the picture file. Copying the file directly to your web server solves this problem, however, as you continue to upload picture files to your system, you may eventually run short on hard drive space. Use your best judgement to meet your needs.

HTML – Alternative Attribute

The alt attribute specifies alternate text to be displayed if for some reason the browser cannot find the image, or if a user has image files disabled. Text only browsers also depend on the alt attribute since they cannot display pictures.

<img src=”http://example.com/brokenlink/sunset.gif&#8221; alt=”Beautiful Sunset” />

HTML – Image Height and Width

To define the height and width of the image, rather than letting the browser compute the size, use the height and width attributes.

<img src=”sunset.gif” height=”50″ width=”100″>

Vertically and Horizontally Align Images

Use the align and valign attributes to place images within your body, tables, or sections.

  1. align (Horizontal)
  • right
  • left
  • center
  1. valign (Vertical)
  • top
  • bottom
  • center

Below is an example of how to align an image to the right of a paragraph.

<p>This is paragraph 1, yes it is…</p>

<p>

<img src=”sunset.gif” align=”right”>

The image will appear along the…isn’t it?

</p>

<p>This is the third paragraph that appears…</p>

Images as Links

This will be a quick review of the links – image lesson. Images are very useful for links and can be created with the HTML below.

<a href=”http://www.tizag.com/”&gt;

<img src=”sunset.gif”>

</a>

Now your image will take you to home page when you click it. Change it to your home page URL.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: