SRL Archive - Web Development

I would like to learn HTML and JavaScript, yet I don't know what I can make. Things I know:

1. I could make a simple HTML website with:
• Links
• Different font colours and sizes
• Background colour
• Images
• Image sizes
2. JavaScript I am a COMPLETE begginer, yet I have read through the w3schools JavaScript tutorials (all of the JS Basic and JS Objects) and have a basic understanding now (I can always go back to it for reference)

What recommendations could you give me in order to practice? Thankyou.

EDIT: This thread keeps getting replies whilst I am quoting others, I am not ignoring your post. I thankyou for any posts you make in advance :)

I assume you already use a cascading style sheet for you website? I recommend looking into ajax, so cool.

From: masterBB
I assume you already use a cascading style sheet for you website?

I haven't actually got a "set" website, I just mess around with different features and tags etc.

From: masterBB
I recommend looking into ajax, so cool.

I've just looked at Ajax, but it seems a little too difficult for me at this point. Thankyou for the reply.

From: sm321
I haven't actually got a "set" website, I just mess around with different features and tags etc.

What I meant was do you use css files for styling your experiments(websites)? And are they based on divs or tables? I see a lot of people working with tables at the beginning, but it really pays off to switch to a div based website.

From: sm321
I've just looked at Ajax, but it seems a little too difficult for me at this point. Thankyou for the reply.

I didn't know exactly what you can. But before trying ajax you have to understand php or something similar(asp). Also some knowledge about javascript is required.

From: masterBB
What I meant was do you use css files for styling your experiments(websites)? And are they based on divs or tables? I see a lot of people working with tables at the beginning, but it really pays off to switch to a div based website.

I just make standard ones on Notepad++, using things like this:

<title>Computer</title>
<base target="_blank">
<alt="Computer">
<a href="http://www.dell.com" title="Computer">
<img src="http://www.productwiki.com/upload/images/dell_dimension_5150.jpg"></a>

and

<font size ="4" face="Arial" color="blue">Text here</font>

From: masterBB
I didn't know exactly what you can. But before trying ajax you have to understand php or something similar(asp). Also some knowledge about javascript is required.

Sorry, I think that came out a bit "stern" (unintentional). Also, Ajax will have to come later on when I have more experience. Do you have any recommendations on how to practice? E.g. make x website, or do y.

I assume you know the standard start:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
	</head>
	<body>
	</body>
</html>

When we want to add a title and some content it would look something like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
          <title>sm321 wants to be the very best</title>
	</head>
	<body>
          <div>
              Like no one ever was
          </div>

	</body>
</html>

And then position it with a css file:

When we want to add a title and some content it would look something like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
          <title>sm321 wants to be the very best</title>
          <link  href="style.css" rel="stylesheet" type="text/css">
	</head>
	<body>
          <div>
              Like no one ever was
          </div>

	</body>
</html>

w3schools….. Fail…

Your should prob just read the html5 standard (not guides) It's pretty straitforward being a markup language and all.

CSS is pretty easy as well tho not many people like it (idk why)… Some things can be tricky or not work how you expect.

JS, This is the real programming =) I've never done any js so I can't really help with a link or anything…

PHP, forget it unless you really want to learn it…; Also Read: Python

Python, Great =) Here's a linky

From: masterBB

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
          <title>sm321 wants to be the very best</title>
          <link  href="style.css" rel="stylesheet" type="text/css">
	</head>
	<body>
          <div>
              Like no one ever was
          </div>

	</body>
</html>

Just cause I think things are moving on to html5 >..>

<!doctype html>
<title>sm321 wants to be the very best</title>
<link  href="style.css" rel="stylesheet" type="text/css">
<div>Like no one ever was</div>

From: masterBB
I assume you know the standard start:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
	</head>
	<body>
	</body>
</html>

I know about the standard tags, yes.

When we want to add a title and some content it would look something like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
          <title>sm321 wants to be the very best</title>
	</head>
	<body>
          <div>
              Like no one ever was
          </div>

	</body>
</html>

I know that too.

And then position it with a css file:

When we want to add a title and some content it would look something like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
          <title>sm321 wants to be the very best</title>
          <link  href="style.css" rel="stylesheet" type="text/css">
	</head>
	<body>
          <div>
              Like no one ever was
          </div>

	</body>
</html>

I know about

style="position: relative; top: 0px;left: 200px;"

But not about style sheet. Also, I found the Pokemon reference VERY funny :D

From: Dgby714
w3schools….. Fail…

w3schools is actually pretty decent when it comes to javascript. Just don't read there html/css tutorials!

From: masterBB
w3schools is actually pretty decent when it comes to javascript. Just don't read there html/css tutorials!

idk I have w3schools ignored on google lol

From: Dgby714
Just cause I think things are moving on to html5 >..>

<!doctype html>
<title>sm321 wants to be the very best</title>
<link  href="style.css" rel="stylesheet" type="text/css">
<div>Like no one ever was</div>

What is that for kind of sorcery :eek: Do the body tags still work in css? I don't like it, not at all. I'm probably just getting old.

From: sm321
I know about

style="position: relative; top: 0px;left: 200px;"

But not about style sheet.

I suggest that to be the first thing to start. It can be done in notepad++, no worries. It's more important than learning javascript ;).

From: masterBB
What is that for kind of sorcery :eek: Do the body tags still work in css? I don't like it, not at all. I'm probably just getting old.



I suggest that to be the first thing to start. It can be done in notepad++, no worries. It's more important than learning javascript ;).

html, head, and body tags are optional in html5 =P (Tho IE still wont work with them missing lol >..>)

So are quotes (")….

<link rel=stylesheet type=text/css href=style.css>

From: Dgby714
html, head, and body tags are optional in html5 =P (Tho IE still wont work with them missing lol >..>)

So are quotes (")….

<link rel=stylesheet type=text/css href=style.css>

Maybe 2012 will be the end of the world…

edit:
At least the 'IE still won't work' part stays the same.

From: masterBB
Maybe 2012 will be the end of the world…

edit:
At least the 'IE still won't work' part stays the same.

Heh. I enjoy HTML5 and css3 so far, with what VS lets you use of them anyways.

@sm321: Disregard the hate towards microsoft that will likely come after this comment, but the .NET framework is really quite simple to understand and work with. Not to mention they are very widely used in the professional field.

From: Dgby714
Just cause I think things are moving on to html5 >..>

<!doctype html>
<title>sm321 wants to be the very best</title>
<link  href="style.css" rel="stylesheet" type="text/css">
<div>Like no one ever was</div>

You still need the DOCTYPE, HTML, HEAD, and BODY tags. Yes, even though they're optional, it's always good practice, since you can't make everyone use a certain browser, especially in the professional field.

From: Dgby714
html, head, and body tags are optional in html5 =P (Tho IE still wont work with them missing lol >..>)

So are quotes (")….

<link rel=stylesheet type=text/css href=style.css>

I hate you for not putting quotes around those, it's messy and ugly. I despise that and it's bad practice.

From: NCDS
Heh. I enjoy HTML5 and css3 so far, with what VS lets you use of them anyways.

@sm321: Disregard the hate towards microsoft that will likely come after this comment, but the .NET framework is really quite simple to understand and work with. Not to mention they are very widely used in the professional field.

I agree with this :p (How's the web dev going btw?)

@sm321, I would start off learning how to use tables. It will show you structure and teach you the basics. Then, convert the tables into divs and reproduce the exact look. That will be awesome practice :)

From: Kyle Undefined
You still need the DOCTYPE, HTML, HEAD, and BODY tags. Yes, even though they're optional, it's always good practice, since you can't make everyone use a certain browser, especially in the professional field.



I hate you for not putting quotes around those, it's messy and ugly. I despise that and it's bad practice.



I agree with this :p (How's the web dev going btw?)

@sm321, I would start off learning how to use tables. It will show you structure and teach you the basics. Then, convert the tables into divs and reproduce the exact look. That will be awesome practice :)

Actually, We can't force people to use a certain browser.
But we can force Microsoft to properly support html5 if everyone stops using html/head/body. =P

Also quotes, I feel they can be left out on certain things like constant things. href, no. type, yes.

<input type=text value="Test">

but idk, maybe the developer should just pick one and stay constant with his decition.

I could care less leaving out body/head/html. I don't think there "necisary"…

I usually wrap my content in a div anyways, usually….

From: Dgby714
Actually, We can't force people use a certain browser. But we can force Microsoft to properly support html5 if everyone stops using html/head/body. =P

Also quotes, I feel they can be left out on certain things like constant things. href, no. type, yes.

Haha, but they never will. They always have to "implement their own standard" instead of going with what's already set.

@sm321, I would start off learning how to use tables. It will show you structure and teach you the basics. Then, convert the tables into divs and reproduce the exact look. That will be awesome practice :)

Do you mean tables as in:


Image is from a w3schools tables tutorial. As for all of the other posts, I have read through them all, thankyou for all of the replies. :)

Yeah, that's the basics of them :)

From: Kyle Undefined
Yeah, that's the basics of them :)

Well, I can now make a table easily in HTML, CSS is a bit harder. Is it 100% key that I need to know it perfectly in CSS?

Yes, CSS is the bread and butter of your site.

A good website has the content placed inside the html file and the styling inside the css file.

To practice, I suggest you make your own site, it has an about, projects and home page at least. Try making it as nice as you can. Then check for browser differences once you're finished, first load it up in Firefox/Chrome/Opera, then check IE and fix whatever is wrong with IE.

To answer everyone, is it possible to make on just using HTML, then edit it into CSS where needed?

You mean making your HTML markup with the CSS id/classes, then changed the id/classes as needed? Of course :)

htmldog.com - HTML and CSS.
http://eloquentjavascript.net/

My advice?

Learn HTML properly with correct standards and good practice the first time through. Most people who I have encountered in my time with web development first started HTML, took a break for a while, came back to it more seriously when they decided to learn PHP or another language and had to essentially relearn everything there was about it because their foundation was weak.

For instance, you never, ever, ever want to style with HTML any longer; it is a depreciated practice:

<font color="yellow">BAD</font>

and instead use class/ID based CSS coding. They go hand-in-hand and neither are difficult to learn (may be a little harder to perfect.)

The extra time now will make life so much less complicated in the future!

From: SlothScripts
My advice?

Learn HTML properly with correct standards and good practice the first time through. Most people who I have encountered in my time with web development first started HTML, took a break for a while, came back to it more seriously when they decided to learn PHP or another language and had to essentially relearn everything there was about it because their foundation was weak.

For instance, you never, ever, ever want to style with HTML any longer; it is a depreciated practice:

<font color="yellow">BAD</font>

and instead use class/ID based CSS coding. They go hand-in-hand and neither are difficult to learn (may be a little harder to perfect.)

The extra time now will make life so much less complicated in the future!

Thankyou, that's some good advice. My plan of action is to learn how to use CSS instead of HTML, then possibly move on to JavaScript, but that's later on.