The <html> element is the containing element for the whole HTML document. Each HTML document should have one <html> and each document should end with a closing </html> tag. Following two elements appear as direct children of an <html> element:
The <head> element is just a container for all other header elements. It should be the first thing to appear after the opening <html> tag Each <head> element should contain a <title> element indicating the title of the document, although it may also contain any combination of the following elements, in any order : The <base> tag is used to create a “base” url for all links on the page. The <object> tag is designed to include images, javascript objects, Flash animations, MP3 files, QuickTime movies and other components of a page. The <link> tag is used to link to an external file, such as a style sheet or Javascript file The <style> tag is used to include CSS rules inside the document The <script> tag is used to include JAVA script or VBscript inside the document The <meta> tag includes information about the document such as keywords and a description, which are particularly helpful for search applications.
<html> <head> <title>practice HTML base tag</title> <base href=”http://www.sekharit.com” target=”_blank”/> </head> <body> <p> This tag is using base path to display the image. </p> <img src=”/image/html.gif”/> <p> This link will open in new window because we have used _blank in base tag.</p> <p> Try to click this <a href=”/php/index.htm”>PHP tutorial</a> </body> </html>
<Link rel=”stylesheet” type=”text/css” href=”/style.css”>
Style sheets describe how documents are presented on screens, in print, or perhaps how they are pronounced. W3C has actively promoted the use of style sheets on the web since the Consortium was founded in 1994. Cascading Style Sheets(CSS) is a style sheet mechanism that has been specifically developed to meet the needs of web designers and users. With CSS, you can specify a number of style properties for given HTMl element. Each properly has a name and a value, sperated by a colon(:) Each property declaration is separated by semi-colon(;)
The <div> tag is nothing more than a container for other tags, Much like the body tag, Div elements are block elements and work behind the scenes grouping other tags together. Use only the following attributes with your div element.
For the purpose of this example, we have included the style attribute in order to color our div tag in order to bring a stronger visualization for our viewer.
<body> <div style=”background: green”> <h5>SEARCH LINKS</h5> <a target=”_blank” href=”http://www.google.com”>Google</a> </div> </body>
Above is a great visual about how a div plays the role of a container of other HTML elements, applying a background color/image is the only real way to visualize your div tags.
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.
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. c copyright © © R registered trademark ® ® TM trademark ™ ™
The bgcolor attributes is used to control the background of an HTML element, specifically page and table backgrounds. Bgcolor can be placed within several of the HTML tags. However, we suggest you only use it for your page’s main background(<body>) and in tables. Syntax <TAGNAME bgcolor=”value”> Quick and dirty, here is how to change the background of your web page. Just use the bgcolor attribute in the <body> tag and you are golden
<body bgcolor=”Silver”> <p> We set the background….</p> </body>
images can be placed within elements of HTML. Tables, paragraphs, and body may all have a background image. To accomplish this, we use the background attribute as follows.
<table height=”100” width=”150” background=http://www.tizag.com/pics/htmlT/background.jpb> <tr><td> This table has a background image</td></tr> </table>
In the first example we happen to be lucky because our image and our table had exactly the same size pixel dimensions. Everything looks great.
<table height=”200” width=”300” background=http://www.tizag.com/pics/htmlT/background.jpg> <tr><td>This table has a background image</td></tr></table> It is obvious this is often not the desired outcome,however,it can also be quite useful as you will see in the following example.
Repeating a generic image as a background doesn’t have much practical use. We either need to find an image to fit exactly as our background or have an image an image editing program to adjust the dimensions of our image. From a different angle, we can use this default attribute to our benefit say if we wanted to have some sort of pattern as our background, In an image editing program such as Adobe Photoshop, or Paint Shop Pro, We could create a very small(perhaps 4X4 pixels) and create a couple of basic patterns, 4X4 image Now here is the same image set as the background to our same table.
<table height=”100” width=”150” background=”http://www.tizag.com/pics/htmlT/pattern.jpg”> <tr><td>This table has a background patterned image</td></tr> </table>
Another great technique, along the same lines as the patterned images, is that of transparent, colored backgrounds. Most image editors have some sort of transparency device to create images that appear see through. We’re not going to cover how to do this with every single program. However, most of the time all you need to do is fill your canvas with the color you would like and then set the opacity to something below 100%. Then make sure you save your file as a gift not a jpeg, and all systems should be go. Now that you have had the crash course on creating transparent files, you place them onto your websites the exact same way as you would a repeating background.
<table background=http://www.tizag.com/pics/htmlT/transparent.gif> <tr><td>This table has a red transparent background image</td></tr> _blank Target: ESPN.com
To link to sections of your existing page a name must be given to the anchor, In the example below, we’ve created a mini table of contents for this page. By placing blank anchors just after each heading, and naming them, We can then create reference links to those sections on this page as shown below. Fist, the headings of this page contain blank, named anchors, They look like this
<h2> HTML Links and Anchors<a name=”top”></a></h2> <h2> HTML Text Links<a name=”text”></a></h2> <h2> HTML Email<a name=”email”></a></h2> Now create the reference links, placing the pound symbol followed by the name of the anchor in the href of the new link.
<a href=”#top”> Go to the Top</a> <a href=”#text”>Learn about Text Links</a> <a href=”#email”>Learn about Email Links</a>
Creating an email link is simple. If you want somebody to mail you about your site a good way to do it is place an email link with a subject already in place for them.
<ahref=mailto:emai@sekharit.com?subject=Feedback>Email@tekslate.com</a>
Email@tekslatecom In some circumstances it may be necessary to fill in the body of the Email for the user as well.
<a href=mailto:email@tekslate.com?subject=Feedback&body=sweet site!>Email@tekslate.com</a>
Placing files available for download is done in exactly the same fashion as placing text links. Things become complicated if we want to place image links available for download. The best solution for images is to use a thumbnail link that we discuss in the next lesson.
<a href=http://www.sekharit.com/pics/htmlT/blanktext.zip> Text Document</a> Download a Text Document: Text Document
Use the <base> tag in the head element to set a default URL for all links on a page to go to. It’s always a good idea to set a base tag just incase your links become bugged somewhere down the line. Usually set your base to your home page.
<head> <base href=”http://www.seharit.com”> </head>
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” height =”50” width = “100”>
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 directly as .html file src=”..pics/sunset.gif” picture file resides in the pic directory in a previous directory as .html file A URL can’t 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 judgment to meet your needs.
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. HTML Code <img src=http://example.com/brokenlink.sunset.gif 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. HTML Code <img src=”sunset.gif” height = “50” width=”100”> Height and Width 
Above we have defined the src, height and width attributes, By information the browser of the image dimensions it knows to set aside a place for that image. Without defining an image’s dimensions your site may load poorly; text and other images will be moved around when the browser finally figures out how big the picture is supposed to be and then makes room for the picture.
Use the align and valign attributes to place images within your body, or sections.
Below is an example of how to align an image to the right of a paragraph. HTML Code <p> This is paragraph 1, yes it is …</p> <p> <img src=”sunst.gif” align =”right”> The image will appear along the …. isn’t it ? </p> <p> This is the third paragraph that appears…. </p> Image Wrap Around: This is paragraph. yes it is. I think this paragraph serves as a nice example to show how this image alignment works The image will appear along the right hand side of the paragraph. As you can see this is very nice for adding a little eye candy that relates to the specified paragraph. If we were talking about beautiful tropical sunsets, this picture would be perfect. But we aren’t talking about that, so it’s rather a waste, isn’t it ? This is the third paragraph that appears below the paragraph with the image!
This will be quick review of the links – image lesson Images are very useful for links and can be created with the HTML below. HTML Code <a href=”http://www.tizag.com/”> <img src=”sunset.gif”> </a>
Now your image will take you to our home page when you click it. Change it to your home page URL
You liked the article?
Like: 0
Vote for difficulty
Current difficulty (Avg): Medium
TekSlate is the best online training provider in delivering world-class IT skills to individuals and corporates from all parts of the globe. We are proven experts in accumulating every need of an IT skills upgrade aspirant and have delivered excellent services. We aim to bring you all the essentials to learn and master new technologies in the market with our articles, blogs, and videos. Build your career success with us, enhancing most in-demand skills in the market.
