Continue to Site

Welcome to our site!

Electro Tech is an online community (with over 170,000 members) who enjoy talking about and building electronic circuits, projects and gadgets. To participate you need to register. Registration is free. Click here to register now.

Register Log in
  • Welcome to our site! Electro Tech is an online community (with over 170,000 members) who enjoy talking about and building electronic circuits, projects and gadgets. To participate you need to register. Registration is free. Click here to register now.

HTML Just starting out!!!

Status
Not open for further replies.
shaneshane1

shaneshane1

New Member
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?
 
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 Soyza said:
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.
Click to expand...

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?
 
shaneshane1 said:
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?
Click to expand...

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 **broken link removed** (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 https://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
 
Torben said:
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 https://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
Click to expand...

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.
 
shaneshane1 said:
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.
Click to expand...

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
 
Gayan Soyza said:
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/MyOwnFreeHost.php?cohost=Web-Hosting-Service

It must not expire & must totally free.
Click to expand...

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
 
Torben said:
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
Click to expand...


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="https://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 :confused:

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)
 
shaneshane1 said:
<snipped for brevity>
Ok this is what i have made in the last 30 minutes :confused:

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)
Click to expand...

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="https://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
 
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
 
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 :))
 
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 said:
Torben Thanks for the help, its how i wanted it to be, i just have to try and remember all of it :confused:
Click to expand...

Cool. You can always PM me if you have a problem or want something explained less. . .er. . .wordily. :)


Torben
 
Status
Not open for further replies.

Similar threads

P
Just watching "While the rest of us die" and it's very interesting. However,
Replies
15
Views
8K
Kerim
Kerim
unclejed613
just had to vent about youtube pharma ads...
Replies
12
Views
3K
Pommie
P
L
Just saying hello
Replies
2
Views
1K
Luddite
L
ClydeCrashKop
Just a curiosity or FYI.
Replies
13
Views
3K
gophert
gophert
Inquisitive
I just found this to be interesting.
Replies
1
Views
2K
Pommie
P

Latest threads

New Articles From Microcontroller Tips

Back
Top