HTML Just starting out!!! - Electronic Circuits Projects Diagrams Free

shaneshane1 · 22nd February 2008, 07:52 AM

Hi i just started learning HTML/XHTML a few days ago and i am looking to make a website, it is quite fun to learn and very easy to understand, and i am picking up on it very fast, but i am running into some hard situations though, eg: i want to create images side by side and not above or under an existing image.

its easy to create an image and put another image under or above it, but cant work out a way to have them on the same line, eg: left, middle, right, on the same line?

Gayan Soyza · 22nd February 2008, 08:14 AM

I'm using Macromedia Dream Weaver it allows to put an image anywhere you like.

The secret is you can create a layer or a table & insert the image.Or without that you can directly insert & position the image.

Did you find a server? My website is ready but i dont have a server yet.So i'm creating another site in the freewebs (freely).Its under construction.

shaneshane1 · 22nd February 2008, 08:54 AM

Quote:

Originally Posted by Gayan Soyza

I'm using Macromedia Dream Weaver it allows to put an image anywhere you like.

The secret is you can create a layer or a table & insert the image.Or without that you can directly insert & position the image.

Did you find a server? My website is ready but i dont have a server yet.So i'm creating another site in the freewebs (freely).Its under construction.

No i haven't found a server yet, stiil working on the site, i have used freewebs before, but i want an independent site to call my own, what sort of site have you made, what is it about?

Gayan Soyza · 22nd February 2008, 08:58 AM

Quote:

Originally Posted by shaneshane1

what sort of site have you made, what is it about?

Its about some simple projects which is very usefull to day to day life.

Torben · 22nd February 2008, 09:41 AM

Quote:

Originally Posted by shaneshane1

Hi i just started learning HTML/XHTML a few days ago and i am looking to make a website, it is quite fun to learn and very easy to understand, and i am picking up on it very fast, but i am running into some hard situations though, eg: i want to create images side by side and not above or under an existing image.

its easy to create an image and put another image under or above it, but cant work out a way to have them on the same line, eg: left, middle, right, on the same line?

To make images line up side by side, you can put them in <div>s with appropriate class designations, and then define the class display rules in your CSS style sheet.

Here's a snippet from a page I have up at http://www.hybrid17.com/pictures.html (it's a company owned by friends so I do their site work for them):

Code:

        <div class="artGalleryCSS">

          <div class="artGalleryCSSInner">
            
            <div class="artGalleryCSSThumbnail">
              <a href="/pictures.html?artgallerycss[category]=/Planting 2006"><img border="0" src="/pics/gallery/folder.gif" alt="Planting 2006" /><br />Planting 2006</a>
            </div>            
            <div class="artGalleryCSSThumbnail">

              <a href="/pictures.html?artgallerycss[category]=/Planting 2005"><img border="0" src="/pics/gallery/folder.gif" alt="Planting 2005" /><br />Planting 2005</a>
            </div>            
            <div class="artGalleryCSSThumbnail">
              <a href="/pictures.html?artgallerycss[category]=/Burning 2004"><img border="0" src="/pics/gallery/folder.gif" alt="Burning 2004" /><br />Burning 2004</a>
            </div>            
            <div class="artGalleryCSSThumbnail">
              <a href="/pictures.html?artgallerycss[category]=/Planting 2004"><img border="0" src="/pics/gallery/folder.gif" alt="Planting 2004" /><br />Planting 2004</a>
            </div>            
            <div class="artGalleryCSSThumbnail">

              <a href="/pictures.html?artgallerycss[category]=/Burning 2003"><img border="0" src="/pics/gallery/folder.gif" alt="Burning 2003" /><br />Burning 2003</a>
            </div>            
            <div class="artGalleryCSSThumbnail">
              <a href="/pictures.html?artgallerycss[category]=/Planting 2003"><img border="0" src="/pics/gallery/folder.gif" alt="Planting 2003" /><br />Planting 2003</a>
            </div>            
            <div class="artGalleryCSSThumbnail">
              <a href="/pictures.html?artgallerycss[category]=/Planting 2001"><img border="0" src="/pics/gallery/folder.gif" alt="Planting 2001" /><br />Planting 2001</a>
            </div>            
            <div class="artGalleryCSSThumbnail">

              <a href="/pictures.html?artgallerycss[category]=/Brushing 2001"><img border="0" src="/pics/gallery/folder.gif" alt="Brushing 2001" /><br />Brushing 2001</a>
            </div>            
            <div class="artGalleryCSSThumbnail">
              <a href="/pictures.html?artgallerycss[category]=/Burning 2001"><img border="0" src="/pics/gallery/folder.gif" alt="Burning 2001" /><br />Burning 2001</a>
            </div>            
            <div class="artGalleryCSSThumbnail">
              <a href="/pictures.html?artgallerycss[category]=/Planting 2000"><img border="0" src="/pics/gallery/folder.gif" alt="Planting 2000" /><br />Planting 2000</a>
            </div>            
            <div class="artGalleryCSSThumbnail">

              <a href="/pictures.html?artgallerycss[category]=/Brushing 2000"><img border="0" src="/pics/gallery/folder.gif" alt="Brushing 2000" /><br />Brushing 2000</a>
            </div>            
            <div class="artGalleryCSSThumbnail">
              <a href="/pictures.html?artgallerycss[category]=/Burning 2000"><img border="0" src="/pics/gallery/folder.gif" alt="Burning 2000" /><br />Burning 2000</a>
            </div>
 
            <div class="spacer"></div>

          </div> <!-- artgallerycssInner -->

       </div> <!-- artgallerycss -->

. . .and here's the relevant style sheet information:

Code:

/**************************************************/
/*   ArtGallery stuff  */
/**************************************************/

.artGalleryCSS { 
  top: 0;
  left: 0;
  height: auto;
  width: 100%;
  text-align: center;
  background: transparent;
  background-color: transparent;
  padding: 1px;
  padding-bottom: 1em;
  margin: 1px;
}

.artGalleryCSS a { 
  position: relative;
  z-index: 1000;
}

.artGalleryCSSThumbnail { 
  float: left;
  padding: 1em;
  z-index: 999;
  text-align: center;
  width: 80px;
  height: 80px;
}

.artGalleryCSSThumbnail a { 
  z-index: 100;
  width: 80px;
  height: 80px;
  display: block;
  padding: 0px;
  text-decoration: none;
  background: transparent;
}

.artGalleryCSSInner { 
  text-align: center;
  display: inline-block;
  padding: 0px;
  margin: 0px;
}

I'd recommend learning your way through (X)HTML and CSS before learning tools like Dreamweaver, especially if you're going to be using free hosting services. It will take a little time but it will be worth it.

Also, I wouldn't recommend freewebs.com; their offering is fairly limited and you get some weird restrictions placed on you. Check out sites like http://www.free-webhosts.com/ to help you pick one.

You could also do it with tables but the display options are way more limited. And table layout is just so 1998.

Torben

Gayan Soyza · 22nd February 2008, 10:14 AM

Hi Torben That link is very usefull have you ever tried that?

What do you think of this the first one in your given link.
http://www.free-webhosts.com/reviews...osting-Service

It must not expire & must totally free.

shaneshane1 · 22nd February 2008, 10:20 AM

Quote:

Originally Posted by Torben

I'd recommend learning your way through (X)HTML and CSS before learning tools like Dreamweaver, especially if you're going to be using free hosting services. It will take a little time but it will be worth it.

Also, I wouldn't recommend freewebs.com; their offering is fairly limited and you get some weird restrictions placed on you. Check out sites like http://www.free-webhosts.com/ to help you pick one.

You could also do it with tables but the display options are way more limited. And table layout is just so 1998.

Torben

As it has only been a few DAYS since i have been learning (X)HTML, i think i will study a little more before i tackle the harder stuff, i have been learning from the HTML tutorial(google HTML tutorial, its the first page) and its been really great, is there a better site you can recommend, or is that site good.

So far i can work out all the text info, and create links, and images with links, all of the top of my head, thats about it.

Torben · 22nd February 2008, 10:24 AM

Quote:

Originally Posted by shaneshane1

As it has only been a few DAYS since i have been learning (X)HTML, i think i will study a little more before i tackle the harder stuff, i have been learning from the HTML tutorial(google HTML tutorial, its the first page) and its been really great, is there a better site you can recommend, or is that site good.

So far i can work out all the text info, and create links, and images with links, all of the top of my head, thats about it.

No worries, you'll get it.

Post the actual problem you're trying to solve, and the code that isn't making you happy, and I'll walk you through it. We can do it via email if you prefer. PM me.

Torben

Torben · 22nd February 2008, 10:27 AM

Quote:

Originally Posted by Gayan Soyza

Hi Torben That link is very usefull have you ever tried that?

What do you think of this the first one in your given link.
http://www.free-webhosts.com/reviews...osting-Service

It must not expire & must totally free.

I don't really like the looks of that one. Check out some of those listed on the top-rated page: http://www.free-webhosts.com/user_reviews.php

I have heard good things about http://www.free-webhosts.com/reviews/X10Hosting.php and it does appear to have a lot to offer for free. The only catch is that you have to log into the forum at least once every two weeks.

Torben

shaneshane1 · 22nd February 2008, 10:48 AM

Quote:

Originally Posted by Torben

No worries, you'll get it.

Post the actual problem you're trying to solve, and the code that isn't making you happy, and I'll walk you through it. We can do it via email if you prefer. PM me.

Torben

Code:

<html>

<head> 
<title>home page</title>
</head>

<body bgcolor="00CC66">

<div align="center"> <h1 style="color:blue"> Shane's Home Page </h1> </div>
 
<div align="center"> <a href="http://www.google.com.au"> <img src="a/google.jpg" width="90" height="40"> </a> </div>

<div align="center"> <a href="http://www.electro-tech-online.com"> <img src="a/elec.jpg" width="90" height="40" </a> </div>

<div align="center"> <a href="http://webmail.optuszoo.com.au"> <img src="a/optus.jpg" width="90" height="40"> </a> </div>

<div align="center"> <a href="http://www.commbank.com.au"> <img src="a/commbank.jpg" width="90" height="40"> </a> </div>

<div align="center"> <a href="http://www.ebay.com.au"> <img src="a/ebay.jpg" width="90" height="40"> </a> </div>


</body>
</html>

Ok this is what i have made in the last 30 minutes

I know there is better ways to do this, but i dont want to know at the moment, as i will work them out at a later time.

with all my links, i want to have them from left to right, rather top to bottom?

i want them all on the same line?

i want them to be explained in the easiest way possible(if possible)

Torben · 22nd February 2008, 11:29 AM

Quote:

Originally Posted by shaneshane1

<snipped for brevity>
Ok this is what i have made in the last 30 minutes

I know there is better ways to do this, but i dont want to know at the moment, as i will work them out at a later time.

with all my links, i want to have them from left to right, rather top to bottom?

i want them all on the same line?

i want them to be explained in the easiest way possible(if possible)

Here is a quick fix using XHTML (sorta) and CSS:

Code:

<html>

  <head>
    <title>home page</title>

    <style type="text/css">
      .menu {
          width: 100%;
          height: 40px;
          text-align: center;
          border: 1px solid red;
      }
      .menuitem {
          width: 20%;
          height: 40px;
          text-align: center;
          float: left;
      }
      .menuitem a {
          position: relative;
          z-index: 100;
      }
    </style>

  </head>

  <body bgcolor="#00CC66">

    <div align="center"> <h1 style="color:blue"> Shane's Home Page </h1> </div>

    <div class="menu">
      <div class="menuitem"> <a href="http://www.google.com.au"> <img src="a/google.jpg" width="90" height="40" border="0" /> </a> </div>

      <div class="menuitem"> <a href="http://www.electro-tech-online.com"> <img src="a/elec.jpg" width="90" height="40" border="0" /> </a> </div>

      <div class="menuitem"> <a href="http://webmail.optuszoo.com.au"> <img src="a/optus.jpg" width="90" height="40" border="0" /> </a> </div>

      <div class="menuitem"> <a href="http://www.commbank.com.au"> <img src="a/commbank.jpg" width="90" height="40" border="0" /> </a> </div>

      <div class="menuitem"> <a href="http://www.ebay.com.au"> <img src="a/ebay.jpg" width="90" height="40" border="0" /> </a> </div>
    </div>

  </body>
</html>

Each element in the page (div, a, img, etc) can be given a class or an id by which you can refer to them in the "style sheet". In this example, the style sheet is defined inside the HTML page, in the <style> section in <head>.

Note that I gave the divs the class "menu" (for the whole menu) and then "menuitem" for each div in the menu. If you look in the style sheet, you'll see blocks of code which start with '.menu' and '.menuitem'. When you refer to classes in the style sheet, you prefix the names with '.'.

We'll ignore ids for now (but you would prefix them with a '#', in case you're wondering).

So in the HTML, you have <div class="menuitem">blah</div>, and in the style sheet you see this:

Code:

      .menuitem {
          width: 20%;
          height: 40px;
          text-align: center;
          float: left;
      }

. . .which just means "apply these rules to the contents of any div with the class 'menuitem'".

For your purposes, the really important one here is 'float: left;'. Normally, a div is output with an implicit line break before and after. The 'float: left;' tells the renderer that this div is meant to not have those line breaks--it should just 'float' to the left of whatever came before it.

Elements which are referenced directly in the style sheet (i.e. 'a', 'img', 'body', etc) don't get a prefix. So for instance, when you see the following in the style sheet:

Code:

      .menuitem a {
          position: relative;
          z-index: 100;
      }

. . .it means "apply these rules to any element 'a' (i.e. <a href=blah></a>) which are inside a div with the class 'menuitem'".

I hope that helps. I'm kind of tired so I might just be making this look really hard. It's not: it's really powerful, and initially maybe confusing, but again, it's worth it in the end.

Torben

UTMonkey · 22nd February 2008, 08:37 PM

Some great examples of CSS here, if you literally want to specify (x,y) where you want your "images" Torben's is the way to go.

If I could give one bit of advice, install another browser on your computer like firefox or some other mozilla compatible browser, that way you can test your pages on different platforms to see if they look right.

Certain aspects of CSS rendering don't work as desired on certain browser platforms (don't even get me started with Microsoft's DOM).

Regards

Mark

**Krumlink** · 22nd February 2008, 10:48 PM

Hey im also doing HTML and I really enjoy it! The fun thing is to make Menus and stuff like that, I will have to show you one day (once I fix it up

)

Hero999 · 23rd February 2008, 12:30 PM

I personally wouldn't bother, I'd use OpenOffice to generate HTML.

Don't forget to test your page on various browsers to make it assessable to as many people as possible,

shaneshane1 · 24th February 2008, 12:24 AM

Torben Thanks for the help, its how i wanted it to be, i just have to try and remember all of it

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Latest
Starting Robotics.	Glacius	Robotics Chat	18	4th May 2007 06:46 PM
Just starting and need some advice	Taipan	Micro Controllers	7	19th January 2006 04:18 PM
diesel engine remote starting circuit	mdj21	General Electronics Chat	11	6th October 2005 01:32 AM
HTML Tags.	lord loh.	Feedback/Comments	4	7th May 2005 09:18 AM
Just Starting	agentnikoli	Robotics Chat	4	5th February 2004 12:19 AM

22nd February 2008, 07:52 AM	(permalink)
shaneshane1	HTML Just starting out!!! Hi i just started learning HTML/XHTML a few days ago and i am looking to make a website, it is quite fun to learn and very easy to understand, and i am picking up on it very fast, but i am running into some hard situations though, eg: i want to create images side by side and not above or under an existing image. its easy to create an image and put another image under or above it, but cant work out a way to have them on the same line, eg: left, middle, right, on the same line? __________________ http://consolehacks.createforum.net/index.php

22nd February 2008, 08:14 AM	(permalink)
Gayan Soyza	I'm using Macromedia Dream Weaver it allows to put an image anywhere you like. The secret is you can create a layer or a table & insert the image.Or without that you can directly insert & position the image. Did you find a server? My website is ready but i dont have a server yet.So i'm creating another site in the freewebs (freely).Its under construction. __________________ Gayan My Website http://gsmicro.blogspot.com/

22nd February 2008, 10:14 AM	(permalink)
Gayan Soyza	Hi Torben That link is very usefull have you ever tried that? What do you think of this the first one in your given link. http://www.free-webhosts.com/reviews...osting-Service It must not expire & must totally free. __________________ Gayan My Website http://gsmicro.blogspot.com/

22nd February 2008, 08:37 PM	(permalink)
UTMonkey	Some great examples of CSS here, if you literally want to specify (x,y) where you want your "images" Torben's is the way to go. If I could give one bit of advice, install another browser on your computer like firefox or some other mozilla compatible browser, that way you can test your pages on different platforms to see if they look right. Certain aspects of CSS rendering don't work as desired on certain browser platforms (don't even get me started with Microsoft's DOM). Regards Mark

22nd February 2008, 10:48 PM	(permalink)
Krumlink	Hey im also doing HTML and I really enjoy it! The fun thing is to make Menus and stuff like that, I will have to show you one day (once I fix it up ) __________________ MechTronics World of Warcraft is a disease

23rd February 2008, 12:30 PM	(permalink)
Hero999	I personally wouldn't bother, I'd use OpenOffice to generate HTML. Don't forget to test your page on various browsers to make it assessable to as many people as possible, __________________ I also post at the following sites: http://www.stop-microsoft.org http://www.heated-debates.com Screen name: Aloone_Jonez

24th February 2008, 12:24 AM	(permalink)
shaneshane1	Torben Thanks for the help, its how i wanted it to be, i just have to try and remember all of it __________________ http://consolehacks.createforum.net/index.php