Learning HTML :)

manic111

manic111

manic111

Soldato
Joined
1 Jul 2007
Posts
21,267
Location
Various
Right, I'm starting to learn HTML and CSS, and feel fairly confident that I understand the very basics at least, mostly thanks to HTMLDog and Lissa Explains.

I've had a look at creating a liquid 2 column layout using CSS, but run into the problem that the colums get larger if I add content to them. From what I have read, the best/only way to solve this is through Javascript, which I don't know the first thing about! Is it possible to solve this problem in another way, and if not can anyone point me the way of a beginners tutorial for Javascript?

Is it worth learning this, or should I just fix the size of my columns instead? Like I said, I'm really only a beginner, so it may be more worth my while to build a full site in CSS first and become happy with that and then move on to Javascript.


Next question, how easy are Content Management Systems to implement? I've been learning HTML on my own, but my cousin is starting a business and wants a (very basic) website that she can update herself, and I said that I'd try to give it a go, for free obviously.


Finally, hosting. I've had a search on these forums, and there seem to be a number of good hosts for high performance usage. However, say I wanted to build a website for personal use, and wouldn't need much memory etc. I would probably go with000WebHost. If I did this though, how would I then go about buying a domain name? Can I buy a domain name off UK2net, for example, and then link it to my 000webhost site?


Sorry if some of these are really nooby questions, but everyone starts somewhere :D
 
not sure exaclty how you have written the layout and waht you mean by the column gets larger as content is added but does "overflow: hidden" work? probably not the best solution and if i can see the code for the column then maybe can help better. javascript is 100% not needed for what you want to do.

although it's great to have a project it is probably best you get to grips with html and css before taking on cms as these will require database and server scripting language knowledge such as php. you can get cms that don't require any knowledge but these will be no use to you as you wont learn any programming from it.

try not to learn too many different languages too quick as you may find it all gets really confusing.

your hosting choice is a good one for now. whoever you buy your domain with i'm sure will be able to help you step by step to setting it up to use your chosen host.
 
OK cool, cheers-I haven't actually written the site yet, but will do so sometime soon, sticking to CSS and HTML for now.

I haven't experienced the problem with the expanding columns, but they said on the tutorial that it may well be one. What they say, is that when you set up a column to be a percentage of the screen size (rather than a fixed number of pixels) you run the risk of that column "growing" if you put in text, or a large picture; it will expand to take in the text, possibly even if there is still space in the column and it doesn't need to expand.

Has this helped explain it? If not let me know-I'm trying to find the tutorial now, but made the schoolboy mistake of not bookmarking it!
 
What do you mean by expanding columns, width wise expanding?...

Are you using tables or more CSS, ie divs and lists (div & ul, li).

If you're aiming a site at less PC savy users you'll be 'more' reliant on IE friendly code though not totally dependent. Helpful to check in multiple browsers when testing.

Link for testing.
http://browsershots.org/

Bear in mind you don't need to support everyone, and how far you take compliancy is down to you.

Depending on compliancy you can use CSS to handle overflow of text. Though in my experience the most common cause of breaking tables and divs in super long links... example: http://thisisanexamplelink.com/with...llyreallyreallyreallyreallyreallyLONGURL.html

Now that link is automatically truncated (snipped) by the vbulletin forum here, so you can't see the length of the URL, long strings are the main culprit for me when it comes to columns expanding width wise.

Lots of options, but it's dependent on the specific use of the content and what the content is, and the design you're using.
 
I'm using full CSS with divs etc. Cheers for that testing link T3los, very helpful! What do you mean by elastic layouts Tripnologist? Does that mean that the size of the columns can only change width to a certain degree? If so, how do you do that (if it's complicated, do you have any links to a tutorial?)?
 
Yes, they'll expand with your browser window but only to a set point. It's usually used with a two column layout where your side column is kept at a set width and the main column is elastic. (they can both be elastic if you wish though)

It's not too complicated. Here's a straightforward tutorial but you'll probably have to amend it a bit to fit your needs.

http://www.456bereastreet.com/archive/200504/fixed_or_fluid_width_elastic/
 
Last edited:
Right, I've started trying to code today. Effectively what I want is to make a stylesheet with an all black/grey background, and one white box in the middle where the text etc will go. Above this box will sit a single links bar and one header.

I'm running into a bit of a problem though. When you set a column, say, to be 100% of the height, it makes it 100% of the height of the browser's browsing space, including the space you can scroll into. What I want is to make a page which does not require you to scroll (and, indeed, you cannot scroll on). All that fits on your screen at the time is all you get. Google's home page is like this.

One way in which I could do this would be to fix the number of pixels of each column. However, obviously this would mean that it would only not require scrolling on one specific size screen; all other screens would either have blank space, or need a scroll bar.

Is there a way to make this sort of webpage that will be compatible with all, or at least most, screen sizes? Cheers!
 
If you do not specify a height, it will just automatically grow as the content does - or if there's not enough content, then the scroll bar will not be required.
 
Confused said:
If you do not specify a height, it will just automatically grow as the content does - or if there's not enough content, then the scroll bar will not be required.
Click to expand...

But I've merely specified the height and width to 100%, and have not yet filled it with content, so why does it still have a scrollbar?
 
Excellent, cheers mate. I've now got the basic CSS layout for my site sorted, with 1 minor issue. I've got a fully black background, but for some reason there are white borders around the edge of the site (see the piccy).

343mzh2.jpg



Here is the code. Two things though, I know that it's a bit of a botched job, but only want advice on how to improve it if you can tell me why that would help, and how to do it; I don't just want to be told what to do, but to understand it as well. Second, I know that the site's layout looks a bit cack, but I'm going to be photoshopping a better background as soon as I get the time!

<html>
<head>
<title>webpage!</title>
<style type="text/css">

#body {
margin:0;
padding:0;
width:100%;
border:0;
background:#000000;
font-size:100%;
height:100%;
}

a {
color:#3399ff;
}

a:hover {
color:#003399
text-decoration:underline;
}

p {
margin:15px 15px 15px 15px;
padding:0;
font-family:"times new roman";
font-size: 12pt;
color:#000000;

}

h1 {
margin:0;
padding:0;
background:#deebeb;
font-family:"times new roman";
font-size: 15pt;
color:#000000;
font-weight: bold;
text-align:center;
}

h2 {
font-family:"times new roman";
font-size: 26pt;
color: #ffffff;
}


#main {
position:absolute;
top:20%;
left:20%;
width:60%;
height:60%;
background:#ffffff;
}

#header {
position:absolute;
top:10px;
left:10px;
width:250px;
height:50px;
background:#000000;
}

</style>
</head>

<div id="body">
<div id="main">

<p> hello how are you <br> very weell </p>

</div>

<div id="header">

<h2>dddddddd</h2>

</div>

</html>
Click to expand...
 
Here you go......

Code: 
<html>
<head>
<title>Webpage!</title>
<style type="text/css">

html, body {background:#000;color:#000}
html,body,h1,h2 {padding:0;margin:0;border:0;}

a:link,a:visited,a:active {color:#39f;}

a:hover {color:#039;text-decoration:underline;}

body,h1,h2 {font-family:Times New Roman;}

p {padding:15px;margin:0}

h1 {background:#deebeb;font-size: 15pt;color:#000;font-weight: bold;text-align:center;}

div>h2 {font-size: 26pt;color: #fff;}

#main {position:absolute;top:20%;left:20%;width:60%;height:60%;background:#fff;padding:0;}

#header {position:absolute;top:10px;left:10px;width:250px;height:50px;}

</style>
</head>
<body>
<div id="main">
<p>
Hello how are you?
<br />Very well thanks.
</p>
</div>

<div id="header">
<h2>dddddddd</h2>
</div>

</body>
</html>
You missed the <body> tag in your HTML, and i've cleaned the CSS a little. It's your code, so i tried not to fiddle too much.... :)

You could even do the same this way....

Code: 
<html>
<head>
<title>Webpage!</title>
<style type="text/css">

html {background:#000;color:#000}
html,h1,h2,main {padding:0;margin:0;border:0;}

body {background:#fff;margin-left:20%;margin-right:20%;margin-top:15%;margin-bottom:15%}

body,h1,h2 {font-family:Times New Roman;}

a:link,a:visited,a:active {color:#39f;}
a:hover {color:#039;text-decoration:underline;}

p {padding:15px;margin:0}

h1 {background:#deebeb;font-size: 15pt;color:#000;font-weight: bold;text-align:center;}

h2 {font-size: 26pt;color: #fff;}

#main {height:100%;background:#fff;}

#header {position:absolute;top:10px;left:10px;}

</style>
</head>
<body>
<div id="main">
<p>
Hello how are you?
<br />Very well thanks.
</p>
</div>

<div id="header">
<h2>dddddddd</h2>
</div>

</body>
</html>

Typically it's not really a good idea to position divs absolutely, you can always manage the same things using a well thought out CSS structure.

Considering you're learning still (as am i 'always') you've not done a terrible job.

I personally tend to work on the site look before the coding part, as your design will (in my experience) dictate how the code should be used or worked. However that said, sometimes a design may change to better serve the coding side of things..... though me personally i get the graphical work done first, then come back it later if the design is becoming too 'code heavy'.

Either way post if you get stuck....
 
Last edited:
t31os said:
(snip)

Typically it's not really a good idea to position divs absolutely, you can always manage the same things using a well thought out CSS structure.

Considering you're learning still (as am i 'always') you've not done a terrible job.

I personally tend to work on the site look before the coding part, as your design will (in my experience) dictate how the code should be used or worked. However that said, sometimes a design may change to better serve the coding side of things..... though me personally i get the graphical work done first, then come back it later if the design is becoming too 'code heavy'.

Either way post if you get stuck....
Click to expand...

Firstly, thanks, that's awesome and really helpful, just trying to look through and see what you've done, and if there's anything I don't get!

I assume that all you have done which makes my CSS look tidier is to put all of the commands relating to the same thing on one line, and to make it so that I only need to type the same setting (eg the font-family one) once, rather than each time I want to use Times New Roman?

What does "div>h2" mean? Not seen that before!

Something that I'm really struggling with is putting a picture in the top right of the white section. I've managed to do it using

<body>
<div id="body">
<div id="main">

<div align="right"><img src="003.jpg" width="250" height="350" alt="me!">

<p>Well hello! <br><br> !</p>


</div>
</div>
Click to expand...

However, this aligns the text to the right as well. Ideally, I would like the picture to resize as the browser window does, but I have no clue how to do that! The easiest way that I could think of was to make the picture the background image of a div, and make that div flexible, but this just served to confuse me; for some reason I couldn't work out how to make the picture the background image of the div (the best I came was managing to get the bottom corner of the picture, but not the rest!). Even having done this, I couldn't work out how to place the div in the right place without assigning it a certain fixed area using pixels, but obviously this wouldn't help me in making it liquid!

Finally, can you suggest a way of getting my "main" div (ie the white box) into the centre of the screen without positioning it absolutely? It was the best way I could work out, as there is no "float:centre" command! Or is this where the "clear" command will help me? If I set up a div along the top floated left, then for the #main div use clear:left. Would that then place it underneath the top div? How would I centre it horizontally after doing that?

Thanks again to everyone that's helping me by the way :D

EDIT: Oh, also, can you float things vertically as well as horizontally? Could you tell something to "float:right" and to "float:up" at the same time (is there even a "float:up" command)? If not, how do you choose where divs are positioned vertically?

Lastly (I hope!) can someone explain the difference between IDs and classes? From what I've read, it seems that IDs are unique; that each ID div can only be used once-there can only be one "#main" box on a page, for instance. Classes can be used over and over, so you could have 5 ".main" boxes on a page. Is this right? If so, how do you distinguish between which one of those 5 ".main" boxes you are working with?
 
Last edited:
Well lots of questions there mate.

Firstly IDs as you said can only be used once, if you have a basic layout that uses a header, content area, over and over and it's likely to only be used once throughout any given page then you can use an ID, anything else you should stick to HTML tags (definable and redefinable via the CSS) and/or classes.

Ids are defined as #this-is-an-id
Classes as .this-is-a-class

# = ID / . = class

To redefine a HTML tag you drop the dot or the hash, so redefining the paragraph tag is done just by going...

p {color:#fff} without neither a dot or hash.

For the most part it's quite hard to make a design work that will streach and stay centered, without losing quality or without breaking the design. Users all have different browsers, different screens, and different types of Operating Systems, so the design may look fine to you, but maybe not necessarily to a person visiting your site. Some users may change the text size.

NOTE: When working with images try to avoid putting text onto images in your graphical program unless necessary, ie. personal logo or banner.

Float can be used for left and right, not up or down.

As i said i find it personally better to have the design down first, write the code in pure mostly HTML, then start moving the code from HTML into CSS as i go, for the most part anyway, what i can do by freehand there and then i will, minor bits can be cleaned later.

http://www.w3schools.com/ - Very good site for learning various languages, been using the CSS section myself today.

When you work with HTML and/or CSS it's pretty good practive (imo) to think in terms of tables and blocks. Since anything you want to plonk on a page is going to be sat inside some form of block or table. It's for this reason i work on visual aspect first, that way i can avoid creating a design that's going to be impossible or difficult to code.

I think if you're starting out it's handy to have a proper HTML editor, Frontpage (my first) / Dreamweaver or any decent freebie. When it comes to pages you'll you might find that visual element helps you understand the contruct of how pages work or be will need to be laid out.

Not saying it's restrictive, but complex designs require a lot of time if not thought out to begin with. (heck i've been stuck trying to fix an awkward table and div layout for hours and hours, only to scrap it and start again)

Now on to a question you had on this bit in the CSS.

div>h2

This basically (keeping it simple) says when the H2 tag follows a DIV tag (inside the DIV) then apply the style....

<div>something
<h2>hello></h2>
</div>

Would be true, the style would apply...

<div>something</div><h2>hello</h2><div>more</div>

Would be false, as the H2 tag is not inside a DIV element.

<div>something
<div> something else</div>
<h2>hello</h2>
</div>

Would be true as H2 is again inside a DIV element.

<div>something
<span> something else
<h2>hello</h2>
</span>
</div>

Would be false as H2 is sat inside another element....

To make that work you'd use....

div > span > h2
or
span > h2

Or we can just grab any H2 inside a DIV like so...

div h2 {color:#fff}

Using the > (right arrow) is simply a way of saying when a tag/class/id is directly inside another particular tag/class/id then apply the style.

------------------- yabbering on here... lol -------------------

Regarding images, if the image doesn't need to be static or you'd like to have content shown over the top then background is better suited, unless it needs to resize... if you want it to repeat you'll need to use it as a background.

This would be a basic div with a background.....

HTML - <div class="example">This is my text inside the div</div>
CSS - .example {background: #fff url('http://www.example.com/exampleimage.jpg') repeat-x top center;}

That's off the top of my head, refer to the link i posted to be sure...
EDIT: Link - http://www.w3schools.com/css/css_background.asp

That's shorthand, but if need be you can define everything literally....

.example {
background-color: #fff; /* (if you need colour to) */
background-image: url ('pathtofile/example.jpg');
background-position:top center;
background-repeat: repeat-x;
background-attachment:fixed;
}

Tried to cover as much as i could for you..... Just try and do what you can, and ask when you get really stuck....

Google is your friend (and mine to.... in times when i get brain freeze and forget the most simplest of things...)
 
Happy to help, still learning HTML and CSS myself, even after years of use, there's always something new to learn, and the web standards are constantly being revamped and updated so that's helpful to....
 
You must log in or register to reply here.
Back
Top Bottom