WELCOME TO MY SITE. THIS SITE HAS BEEN CREATED BY MD RIAZ & IS FOR TRAIL ONLY. THANK YOU.
  • Home
  • HTML Steps »
    • Step 1
    • Step 2
    • Step 3
    • Step 4
    • Step 5
  • HTML Advenced »
    • HTML Doctypes
    • HTML Layout
    • HTML Head
    • HTML Meta
    • HTML Script
    • HTML URL
    • HTML Validation
  • HTML References »
    • HTML Character Entities
    • List of HTML5 Tags/Elements
  • Contact »
    • Facebook
    • Email

Step 3: CUSTOMIZING YOUR WEB PAGE

Customizing your web page means enhancing the look of your page. You can do this by adding pictures, videos and other media files too such as audio clips (.mp3, .wmv, etc)

ADD BACKGROUND IMAGE

Here I will tell you how you will add images to your web pages instead of colors as we did earlier.

For adding image as a background of your web pages you can choose either of the following options:-

  • Using Background attribute:

By using background attribute you can easily add image as a background. This is how you will be using it-

<body background="image source">

Here you will replace "image source" [without the quotes] with the complete path of the image.

Example: Suppose your image is stored in the folder named "images" located in the "E" drive of your computer, then you will be using the following path for this image:-

E:\image\something.jpg

Here something.jpg is your image name with .jpg extension.

Tips

  • You can even know the compete path of your images by opening it with internet explorer. You can do it by right clicking the image and selecting Internet explorer or any other browser from the open with option.
Codes img
  • You can use "bgcolor" and "background" attribute at the same, just to ensure that the web browser displays the color assigned if it fails to show the background image.
  • Using the Style Attribute:

This method gives you more flexibility and command over your background images. Use the following code:-

<body background="the compete path of your image">

This will be the output:

Codes img

ADDING IMAGE TO YOUR WEB PAGE

  • For adding images to your web pages you will be using <img> tag. Some of the attributes of <img> tag are:
  1. alt: every text assigned with this attribute will be displayed by the web browser when the image will be being loaded or if its unable to display the images.
  2. src: you will use this attribute to assign the path of the image you want to display on your web page
  3. height/width: these attributes are used to assign height and width of the image. You can set the height and width of you image by either percentage value or by pixel value.
  4. align: using this attribute you can position your images either on right or left side of your web page.

To add image to your page, use the following code:-

<img src="image source" height="200" width="400" align="left/right/center" alt="image">

If your image is in the same folder then use only the image name.
example:- <img src="imagename.jpg" height="200" width="400" alt="image">

OR if u have the image in a folder, than use the following code:-

<img src="foldername/imagename.jpg" height="200" width="400" alt="image">

ADDING VIDEO TO YOUR WEB PAGE

  • You can simply use <video> tag to add videos.

<video controls="controls" src="video location/videoname.mp4" height="350" width="500" autoplay> </video>

If you use the "autoplay" attribute, then your video will start playing as soon as you open your web page.

The output would be like this:

Codes img

ADDING AUDIO TO YOUR WEBPAGE

  • You can add music to your web page in the same way to added video. Just instead of video file path use the path to your music file & replace video tag with audio.
<audio controls="controls" src="audio location/audioname.mp3" height="auto" width="auto"> </audio>

If you use this tag then you will see a audio player on your web page.

Codes img
  • You can also run any audio file in the background by using this tag:

<bgsound src="E:\image\audioname.mp3" loop="infinite">

Here "loop" represents the number of times you want to play the audio. You can use 0, 1 ,2 or any other number, depending on your interest.

Use this tag just after the <body> tag:

<body><bgsound src="files/audioname.mp3" loop="infinite">XXXXXXXXXXXXXXXXXXXXXXXXXXXXX</body>

Using <bgsound> tag will not add any music player to your web page but still you will be hearing it.

WHAT YOU LEARNED IN THIS STEP

You learned following things:

  1. How to add image as a background.
  2. How to add images within your webpage.
  3. How to add Video, audio and background music to your web page.
Now go to page 5 to learn step 4.
  • Pages :-
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

How Many People Visit
​