Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

* * * * - 1 votes

How to add images to a page?


  • Please log in to reply
9 replies to this topic

#1 Guest_c0de_*

Guest_c0de_*
  • Guest

Posted 09 September 2007 - 12:12 PM

To add images to a simple HTML page is not to hard it's simple with some codes!

Here is the key to add image to a simple page:

<img src="The link or the place of image">
This is the code what we need to add image to our page!

We put this code between <body>...</body> tags!

At the code <img src=".."> we can play with image like; we can change the size of the image or we can write an ALT text when we put our mouse on the image there should appear a text, etc...

For to change the size of the image, we use these two attributes (weight and height attributes).

These can be used when adding a image like this:

<img src="ninja.gif" weight="20px" height="30px" alt="The text what will shown when our mouse goes on image">
With this code we can add to our page a simple image With 20px weight, 30px height...

We can change the image place in the page with "algin="side of the page where image want to go" often goes algin="center" or sometimes we use middle!...

There is an example where to add the image codes:

Posted Image

Then open your page and you will see how this works!

This tutorial belongs to me.

-Regards, c0de!
  • 0

#2 KevinADC

KevinADC

    CC Addict

  • Just Joined
  • PipPipPipPipPip
  • 125 posts

Posted 12 September 2007 - 05:54 PM

For to change the size of the image, we use these two verbs (weight and height verbs).

verbs? Those are called attributes. They are not even correctly called verbs, they are nouns.
  • 0

#3 niceniceedu

niceniceedu

    CC Lurker

  • Just Joined
  • Pip
  • 1 posts

Posted 14 September 2012 - 03:44 AM

if you want add of any image in your html page then simply you can give the reference of that picture which you want to add your html page and give the paths of it also definetly it will display on your html page..
  • 0

#4 Vaielab

Vaielab

    Programming God

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1382 posts
  • Location:Quebec City
  • Programming Language:Java, C++, C#, PHP, JavaScript, Visual Basic .NET, Transact-SQL, ActionScript

Posted 14 September 2012 - 04:16 AM

We have to be careful with the height and width property.
The full size image is still loaded, and then the browser will resize it.
So if I only want to show a 20x20 images, but load a 500x500 images, the website will be a lots slower than it has to be.
The best pratice is to modify your image with a image software (like photoshop, gimp...) and give it the wanted size.

I saw website taking about 15seconds to load because of this, when after resizing the images, it took less than 1secondes.
  • 1

You can now stalk me on linkedin: http://ca.linkedin.c...elle/24/b44/88/ !


#5 wim DC

wim DC

    Roar

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2681 posts
  • Programming Language:Java, JavaScript, PL/SQL
  • Learning:Python

Posted 14 September 2012 - 05:49 AM

Note that I agree the images should not get resized, it's still a good idea to set the width and height property.

Say you have a 100x100 image and it should display as 100x100, then still set the width and height accordingly.
This will let browser already reserve the required space when they're building the page, so when the image gets loaded no content is jumping around to fit the image in.
  • 1

#6 James360Smith

James360Smith

    CC Newcomer

  • Member
  • PipPip
  • 20 posts
  • Programming Language:Objective-C, PHP, JavaScript, PL/SQL, Ada, Transact-SQL, Logo, ActionScript
  • Learning:Objective-C, PHP, JavaScript, Perl, Ruby, PL/SQL, Visual Basic .NET

Posted 05 December 2012 - 04:15 AM

Agree with above tutorial, and it's a nice effort by him. When adding images to your web pages- try to keep images more seo friendly for fast uploading web pages. So be careful while giving appropriate "alt" attribute which specifies an alternate text for an image when images are taking more time to load.
  • 0

#7 wim DC

wim DC

    Roar

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2681 posts
  • Programming Language:Java, JavaScript, PL/SQL
  • Learning:Python

Posted 05 December 2012 - 04:19 AM

Wrong topic :s
  • 0

#8 Monkeyking

Monkeyking

    CC Lurker

  • New Member
  • Pip
  • 3 posts
  • Learning:PHP

Posted 29 October 2013 - 08:03 PM

Hi all. I think it's a matter of learning the new language html. Not you, when all of us started working with html is difficult. So I'll give you an example:

<img src="" weight="px" height="px" alt="" title="" target="">

in the example above:

src is the image path

width and height of the image pixels is calculated, if no attributes width, height, the default will get the original size of the image file

alt - contents will be displayed when the path to the image file does not exist

title - content to display when the mouse pointer up.

target - This attribute shall specify the link will be opened where

for example: <img src='http://www.frivmini.com/img/happyhalloween.jpg' alt='Happy Halloween' width='180' height='135' title="Happy Halloween" target="_blank"/>


  • -1

#9 Vaielab

Vaielab

    Programming God

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1382 posts
  • Location:Quebec City
  • Programming Language:Java, C++, C#, PHP, JavaScript, Visual Basic .NET, Transact-SQL, ActionScript

Posted 30 October 2013 - 02:44 AM

@Monkeyking... do you know this question was asked in september 2007? I'm pretty sure he find an answer since then...


  • 0

You can now stalk me on linkedin: http://ca.linkedin.c...elle/24/b44/88/ !


#10 ZaraWatsonn

ZaraWatsonn

    CC Newcomer

  • Member
  • PipPip
  • 10 posts
  • Location:India
  • Programming Language:C, C++, C#
  • Learning:C, Java, C#

Posted 20 April 2016 - 10:28 PM

According to my point of view, if you want to add images to a page, please refer the below link:

 

<img src="" weight="px" height="px" alt="" title="" target="">

 

It will helpful for given title tag to an image and easy to find the image in the search engine.


  • -1