Scratch
archived forums
#1 2008-09-18 21:10:50
Html/css
HTML/CSS/Javascript/PHP
Here are some lists of tutorials for CSS and HTML. You can talk about it, ask questions and share your designs here.
What is HTML?
HTML: Stands for "Hyper-Text Markup Language". A simple markup language (actually, the only one). This means that you can't actually program anything with it, but you can embed programming languages into it. The base for all web developing.
What is CSS?
CSS: Stands for Cascading Style Sheets. An expansion to HTML. Makes life easier and more stylish.
What is Javascript?
JavaScript: A programming language. You can do stuff with it, but being text-based, having more image-based stuff is harder to do. IT IS NOT SPRITE-BASED BUT FUNCTION BASED. However, it is client-side, so making a website with users (e.g. and online community, perhaps a forum) is impossible.
What is PHP?
PHP: Stands for "Php: Hypertext Processor". Almost exactly the same as JavaScript but a bit more open-ended, and ServerSide, so having online communities and so-such is possible.
Well how do I use it?
To write the code, use notepad for windows and I am not sure for Macs. Anyways when you want to see what you have made, save the document as a .htm Then open up your internet. Click in the following order: File-->Open-->Browse-->The file you saved it as. Then your webpage pops up.
HTML Tutorials
http://www.w3schools.com/html/html_intro.asp
http://www.htmlcodetutorial.com/
http://www.tizag.com/htmlT/
http://www.web-source.net/html_codes_chart.htm
CSS Tutorials
http://www.w3schools.com/css/css_intro.asp
http://www.yourhtmlsource.com/stylesheets/csstext.html
http://www.tizag.com/cssT/
Javascript Tutorials
http://www.w3schools.com/js/default.asp
http://www.tizag.com/javascriptT/
http://www.dickbaldwin.com/tocjscript1.htm
PHP Tutorials
http://www.w3schools.com/php/php_intro.asp
http://www.tizag.com/phpT/
http://devzone.zend.com/node/view/id/627
If you know any good tutorials, please tell us as we are all learning!
Last edited by Bobby500 (2008-09-24 18:08:31)
Offline
#2 2008-09-19 18:22:15
Offline
#4 2008-09-19 18:46:33
Re: Html/css
keroro645 wrote:
Is html free?
Whats CSS?
Good Question. HTML is free. It is the code for making webpags. HOSTING your own website isn't free though unless you use frewebs or somthing. You just write html on notepad, save it as an .htm document and then while online to see it, go to
File-->Open-->Browse and then open it. It will show you what it will look like.
CSS is the style sheet for HTML it lets you control what it looks like. While you don't absolutly need it, most newer versions use it and it makes it look better. Oh, and I learned all of this yesterday.
Offline
#5 2008-09-19 18:51:13
Re: Html/css
Bobby500 wrote:
keroro645 wrote:
Is html free?
Whats CSS?Good Question. HTML is free. It is the code for making webpags. HOSTING your own website isn't free though unless you use frewebs or somthing. You just write html on notepad, save it as an .htm document and then while online to see it, go to
File-->Open-->Browse and then open it. It will show you what it will look like.
CSS is the style sheet for HTML it lets you control what it looks like. While you don't absolutly need it, most newer versions use it and it makes it look better. Oh, and I learned all of this yesterday.
Wow! I never thought I'd see a topic on CSS. A great page (I found) for some CSS text styles is here: http://www.yourhtmlsource.com/stylesheets/csstext.html
I have been using HTML and CSS for years now and I added on in the past two years, PHP and Javascript. If you need any help, feel free to ask me!
Offline
#6 2008-09-19 18:56:06
Re: Html/css
I know HTML (well, enough to make a website, anyway). I could even write a sample page right here...
I'm taking a break from Scratch until 2.0 comes out. Any messages sent between then and now probably won't be read - sorry.
(Oct. 20, 2011)
Offline
#7 2008-09-19 18:57:54
Re: Html/css
coolstuff wrote:
Bobby500 wrote:
keroro645 wrote:
Is html free?
Whats CSS?Good Question. HTML is free. It is the code for making webpags. HOSTING your own website isn't free though unless you use frewebs or somthing. You just write html on notepad, save it as an .htm document and then while online to see it, go to
File-->Open-->Browse and then open it. It will show you what it will look like.
CSS is the style sheet for HTML it lets you control what it looks like. While you don't absolutly need it, most newer versions use it and it makes it look better. Oh, and I learned all of this yesterday.Wow! I never thought I'd see a topic on CSS. A great page (I found) for some CSS text styles is here: http://www.yourhtmlsource.com/stylesheets/csstext.html
I have been using HTML and CSS for years now and I added on in the past two years, PHP and Javascript. If you need any help, feel free to ask me!
Actually I made this because I am trying to learn it and thought that it woul help if I made a topic here where I could ask for help.
And I do have a question that I posted on the flash sheet.
Bobby500 wrote:
Hey, in CSS or the language for websites, is it possible to put if statments? Like if B link clicked change page X to show Y project but if G link pressed, chnge page X to show R Project? So that way I can put tons of projects on one page that only display 1 at a time depending on what link you clicked?
Offline
#8 2008-09-19 19:44:49
Re: Html/css
Bobby500 wrote:
Hey, in CSS or the language for websites, is it possible to put if statments? Like if B link clicked change page X to show Y project but if G link pressed, chnge page X to show R Project? So that way I can put tons of projects on one page that only display 1 at a time depending on what link you clicked?
Well, using JUST CSS it's not possible. CSS is a Style Sheet language, meant for styling things. It's like decorating things. But, using Javascript, you can. I'm not the best at Javascript, so I can't write a script on the spot, but if you give me a little while I could.
(now for a long look at some of CSS's features and an easier way of web development)
But what you probably don't know is that it makes life a whole lot easier. For example, by simply typing:
<div class="myNewClass">my content</div>
<div class="myNewClass">my content 2</div>
<style type="text/css">
div.myNewClass
{
border:1px solid black;
background-color:white;
}
</style>
you can get BOTH div's to look exactly the same, with a black border and a white background. This is useful because without this seperate stylesheet, you would need to type this:
<div style="border:1px solid black; background-color:white">my content</div>
<div style="border:1px solid black; background-color:white">my content 2</div>
to get the same thing. An even easier way to make a constantly changing layout is by simply making a link to an external stylesheet:
<link rel="stylesheet" type="text/css" href="http://locationofmyexternalstylesheet.com/stylesheet.css">
That way, you only need to change the code of the stylesheet, not every single page.
Another great thing I found in web development is that, using PHP, you are able to create an even easier layout. Since tags do not need to be finished before the end of a document, you can make a .php file and use the include() function. The .php file would look like this (it's actually just an HTML file, but php has more functionality):
<html>
<body>
(my layout stuff)
Just remember NOT TO END ANY MAJOR TAGS (<body> and <HTML>)
Then, in every page, simply use this script after </head>:
<?php include("layout.php") ?>
my content
</body> <!-- because we started the body tag in layout.php, which is now actually part of the file -->
</html>
(replace "layout.php" with the name of your layout file. If it's in a different directory than the file you're writing, simply use ../layout.php for 1 directory up, ../../layout.php for 2, and even ../../directory/layout.php for a directory in 2 directories up)
What's actually happening is you're combining the two pages together. If you take a look at the source code of the page, it will NOT show what you wrote, but what the browser displays. For example, if you wrote:
<html>
<head>
<title>blah</title>
</head>
<?php include("layout.php") ?>
blahblahblahblahblahblahblahblah
</body>
</html>
in the main page, and:
<html>
<body>
(my layout things)<br /><br />
the Source would look like:
<html>
<head>
<title>blah</title>
</head>
<html>
<body>
(my layout things)<br /><br />
blahblahblahblahblahblahblahblah
</body>
</html>
If this is making any sense to you, you're doing well.
Note that for the PHP stuff to actually work, you need a php-compatible web server. I find t35.com a great one, but that's just me. Freewebs does NOT have php installed and quite frankly I find Freewebs to be the worst web host on Earth.
Last edited by coolstuff (2008-09-19 19:49:28)
Offline
#10 2008-09-19 21:29:55
Re: Html/css
coolstuff wrote:
If this is making any sense to you, you're doing well.
Note that for the PHP stuff to actually work, you need a php-compatible web server. I find t35.com a great one, but that's just me. Freewebs does NOT have php installed and quite frankly I find Freewebs to be the worst web host on Earth.
Um, it sort of makes sense. Remember, I just learned this yesterday. I used Freewebs as an example because I have used it before and new that it took CSS. Of course, I thought CSS did whaat HTML does and HTML does what you say JAvascript does and this is confusing the heck out of me and um...I will go slowly with this I think. So, I should learn CSS, HTML,PHP and JAvascript. Any recomendations on which to learn first or anything like that...?
Offline
#11 2008-09-19 21:45:35
Re: Html/css
Bobby500 wrote:
coolstuff wrote:
If this is making any sense to you, you're doing well.
Note that for the PHP stuff to actually work, you need a php-compatible web server. I find t35.com a great one, but that's just me. Freewebs does NOT have php installed and quite frankly I find Freewebs to be the worst web host on Earth.Um, it sort of makes sense. Remember, I just learned this yesterday. I used Freewebs as an example because I have used it before and new that it took CSS. Of course, I thought CSS did whaat HTML does and HTML does what you say JAvascript does and this is confusing the heck out of me and um...I will go slowly with this I think. So, I should learn CSS, HTML,PHP and JAvascript. Any recomendations on which to learn first or anything like that...?
Okay, here's my explanation on the different programming languages (oh yeah, and remember to use the advanced account in Freewebs) :
HTML: Stands for "Hyper-Text Markup Language". A simple markup language (actually, the only one). This means that you can't actually program anything with it, but you can embed programming languages into it. The base for all web developing.
CSS: Stands for Cascading Style Sheets. An expansion to HTML. Makes life easier and more stylish.
JavaScript: A programming language. You can do stuff with it, but being text-based, having more image-based stuff is harder to do. IT IS NOT SPRITE-BASED BUT FUNCTION BASED. However, it is client-side, so making a website with users (e.g. and online community, perhaps a forum) is impossible.
PHP: Stands for "Php: Hypertext Processor". Almost exactly the same as JavaScript but a bit more open-ended, and ServerSide, so having online communities and so-such is possible.
I would learn these four computer languages before moving on to anything else (web-wise). And before moving on to JavaScript and PHP you should have a clear understanding of HTML. CSS is completely optional, but can come in handy if you want a nice layout. So, the order in which I would learn them (or at least the order in which I did learn them) would be: HTML, CSS, JavaScript, PHP
If you like, I could give you a mini-lesson in HTML, CSS, or Javascript. I haven't been using PHP for too long (only a month or so) so I can't lecture you about that.
Last edited by coolstuff (2008-09-19 21:47:54)
Offline
#12 2008-09-20 07:05:41
Re: Html/css
coolstuff wrote:
Okay, here's my explanation on the different programming languages (oh yeah, and remember to use the advanced account in Freewebs) :
I would learn these four computer languages before moving on to anything else (web-wise). And before moving on to JavaScript and PHP you should have a clear understanding of HTML. CSS is completely optional, but can come in handy if you want a nice layout. So, the order in which I would learn them (or at least the order in which I did learn them) would be: HTML, CSS, JavaScript, PHP
If you like, I could give you a mini-lesson in HTML, CSS, or Javascript. I haven't been using PHP for too long (only a month or so) so I can't lecture you about that.
I will probably use something esle, I just thought of it first. I will try to get HTML right now and will probably have most of the basics down in a week. By the way, how long did it take you to learn all that?
Oh and I stole your descriptions. 
Offline
#13 2008-09-20 09:28:01
Re: Html/css
Bobby500 wrote:
coolstuff wrote:
Okay, here's my explanation on the different programming languages (oh yeah, and remember to use the advanced account in Freewebs) :
I would learn these four computer languages before moving on to anything else (web-wise). And before moving on to JavaScript and PHP you should have a clear understanding of HTML. CSS is completely optional, but can come in handy if you want a nice layout. So, the order in which I would learn them (or at least the order in which I did learn them) would be: HTML, CSS, JavaScript, PHP
If you like, I could give you a mini-lesson in HTML, CSS, or Javascript. I haven't been using PHP for too long (only a month or so) so I can't lecture you about that.I will probably use something esle, I just thought of it first. I will try to get HTML right now and will probably have most of the basics down in a week. By the way, how long did it take you to learn all that?
Oh and I stole your descriptions.
Well, I kind of learned HTML in a week, CSS a year later, Javascript a half-year later, and PHP this year. I kind of learned it in "chunks" because I kept losing interest. But it's really fun once you get the hang of it. I became familiar with the languages after 1/2 weeks and actually got them down pretty well after a month or so.
Oh, and a great website for PHP tutorials is this: http://devzone.zend.com/node/view/id/627 . You can skip the "installation" part, just make sure you have a PHP web server.
Last edited by coolstuff (2008-09-20 09:30:05)
Offline
#15 2008-09-20 13:41:24
Re: Html/css
coolstuff wrote:
This should be in "advanced topics"...
Well, they moved the flash one here so thats why I put it here. I just wish I could change the title to include Javascript and PHP! Anyways, I am just going through HTML tutorials now and will move to CSS in a week or so.
Offline
#16 2008-09-20 17:45:14
Re: Html/css
Oh, and I am having trouble puting pictures in my demo thingy that I am expeirementing with. It shows up as a little white outline box thing with a symbol in it. (not the X, somthing with green, red and blue.) Any idea on how I can changethe settings to view the picture?
Offline
#17 2008-09-20 19:45:24
Re: Html/css
Okay, I am just having some fun and have made a small little page so if you want to save it and take a look, please go ahead. (I am uploading the code.)
Code:
<a href="">HOME</a> <a href="">LINKS (doesn't Work)</a> <a href="Scratch.mit.edu">Scratch</a> </div> <br/> <h2 align="center">My First Web Page!</h2> <h6 align="center">Welcome and enjoy</h6> <img scr="http://www.networks-by-design.com/img/computer.jpg" / title="I can't see this on my computer and I don't know why!!!"> <p title="Welcome. I soon hope to make games and put them on here useing a program called Scratch.">Comeing soon will be my completed web page that will wow and impress you!</p> <br/> <hr/> <p title="I know it doen't do anything yet but please do it anyways!"> <font color="green">To register to this non-existent site with a non-existent user account, please type in a name less than 20 characters using no bad words. Then insert the password of your choice that is less than 10 characters long. Please remeber that because this is not a secure facility, it is not our fault if some passing hacker decides to steal your life. Thank you and have a nice day. </p> <form method="post" action="mailto:youremail@email.com"> Name:<input type="text" size="10" maxlength="20" name="name"><br/> Password:<input type="password" size="10" maxlength="10" name="password"> <br/> <input type="submit" value="Send it to Nothing!"> </form> <br/> <hr/> <h3 align="center">Games for you to play!</h3> <code> <ol> <li><a href="http://scratch.mit.edu/projects/Shanesta/9710" target="_self">Archery Champion Beta 1.0</a></li> <li><a href="http://scratch.mit.edu/projects/Bobby500/265109" target="_parent">The Hardest Game Ever!</a></li> <li><a href="http://scratch.mit.edu/projects/kuri/58059" Target"_self">Ninja Stick Person</a></li> </code> <br/> <hr/> <h3 align="center">Submit your own Game!</h3> <input type="hidden" name="MAX_FILE_SIZE" value="100" /> <input name="file" type="file" /> <br/> <input type="submit" value="Send it but I won't look at it."> </font> </body> </html>
Offline
#18 2008-09-20 19:58:00
Re: Html/css
You put img scr. It should be img src.
I made the same mistake a few days ago. My teacher asked me if I had dyslexia 
Last edited by archmage (2008-09-20 20:00:45)
Hi, I am Archmage coder extraordinaire. I do Scratch,pascal,java,php,html, AS2 and AS3. Leave me a message if you want coding advice. Also check out my personal website, lots of good stuff about web development, Flash, and Scratch (v1 and v2) !
Offline
#19 2008-09-20 20:05:58
Re: Html/css
Bobby500 wrote:
Okay, I am just having some fun and have made a small little page so if you want to save it and take a look, please go ahead. (I am uploading the code.)
Code:
<a href="">HOME</a> <a href="">LINKS (doesn't Work)</a> <a href="Scratch.mit.edu">Scratch</a> </div> <br/> <h2 align="center">My First Web Page!</h2> <h6 align="center">Welcome and enjoy</h6> <img scr="http://www.networks-by-design.com/img/computer.jpg" / title="I can't see this on my computer and I don't know why!!!"> <p title="Welcome. I soon hope to make games and put them on here useing a program called Scratch.">Comeing soon will be my completed web page that will wow and impress you!</p> <br/> <hr/> <p title="I know it doen't do anything yet but please do it anyways!"> <font color="green">To register to this non-existent site with a non-existent user account, please type in a name less than 20 characters using no bad words. Then insert the password of your choice that is less than 10 characters long. Please remeber that because this is not a secure facility, it is not our fault if some passing hacker decides to steal your life. Thank you and have a nice day. </p> <form method="post" action="mailto:youremail@email.com"> Name:<input type="text" size="10" maxlength="20" name="name"><br/> Password:<input type="password" size="10" maxlength="10" name="password"> <br/> <input type="submit" value="Send it to Nothing!"> </form> <br/> <hr/> <h3 align="center">Games for you to play!</h3> <code> <ol> <li><a href="http://scratch.mit.edu/projects/Shanesta/9710" target="_self">Archery Champion Beta 1.0</a></li> <li><a href="http://scratch.mit.edu/projects/Bobby500/265109" target="_parent">The Hardest Game Ever!</a></li> <li><a href="http://scratch.mit.edu/projects/kuri/58059" Target"_self">Ninja Stick Person</a></li> </code> <br/> <hr/> <h3 align="center">Submit your own Game!</h3> <input type="hidden" name="MAX_FILE_SIZE" value="100" /> <input name="file" type="file" /> <br/> <input type="submit" value="Send it but I won't look at it."> </font> </body> </html>
A few notes...
form action=mailto:blahblablhallksjfdlskdjf
just opens up an application. There's no point. Just put a button.
<img scr="http://www.networks-by-design.com/img/computer.jpg" / title="I can't see this on my computer and I don't know why!!!">
you can't see it because you made a typo. It's <img src=";asd;asldnln"> not <img scr="asdsdf"> If you want to follow HTML standards, write it like this <img src='blahblahblah.jpg" />.
the <font> tag is deprecated. You don't need to worry about that yet, but just a note if you want to become a proffesional.
Using CSS you don't need to keep reformatting everything
I dunno why you put the <code> tag over the list...
your Scratch.mit.edu link doesn't work because you need http:// in front of it.
Be sure to end the <ol> tag!
If you want to make a real form, be sure to put the "upload" form in a <form> tag!
Offline
#20 2008-09-20 20:09:24
Re: Html/css
archmage wrote:
You put img scr. It should be img src.
I made the same mistake a few days ago. My teacher asked me if I had dyslexia
Thanks alot!!!!
Anyways, I am haveing some more trouble. Now that I have the basics of HTML down, I am trying to go into adding a bit of CSS but it doesn't work for me. Internal sheets work but I can't get the external sheets to work. Here is the code ofr the main page that deals with the sheet.
Code:
<html> <head> <base href="www.freewebs.com/bobby500"> <title>My Own Webpage!</title> <meta name="keywords" content="Mine, Crimson King Co., Totally fake, Hi Archmage!"/> <meta name="description" content="Welcome to my totally spoof site!" If this ever gets published, I will get totally embaressed!"/> <link rel="stylesheet" type="text/css" href="myfirstpage2.css"/> </head>
and on the CSS page
Code:
p{color: green; }
h2{color: green; }
h6{color: green; }
body{background-color: yellow; }Unfortunatly, the page is just regular black and white. I know the document is the saved right and stuff.
Offline
#21 2008-09-20 20:14:13
Re: Html/css
coolstuff wrote:
A few notes...
form action=mailto:blahblablhallksjfdlskdjf
just opens up an application. There's no point. Just put a button.
<img scr="http://www.networks-by-design.com/img/computer.jpg" / title="I can't see this on my computer and I don't know why!!!">
you can't see it because you made a typo. It's <img src=";asd;asldnln"> not <img scr="asdsdf"> If you want to follow HTML standards, write it like this <img src='blahblahblah.jpg" />.
the <font> tag is deprecated. You don't need to worry about that yet, but just a note if you want to become a proffesional.
Using CSS you don't need to keep reformatting everything
I dunno why you put the <code> tag over the list...
your Scratch.mit.edu link doesn't work because you need http:// in front of it.
Be sure to end the <ol> tag!
If you want to make a real form, be sure to put the "upload" form in a <form> tag!
Wow, I made a huge amount of mistakes. 
Alot of this was just to experiment. I wasn' trying to make anything in particular.
I just used the font tag because I haven't learnt CSS yet. I am starting to now though.
I put the code tag to make it look good.
Funny, it looked like it worked. I will fix it anyways.
I will end the ol tag. Wonder why it didn't affect anything though.
As I said, I was just messing around.
Offline
#22 2008-09-20 20:16:35
Re: Html/css
Bobby500 wrote:
Wow, I made a huge amount of mistakes.
Alot of this was just to experiment. I wasn' trying to make anything in particular.
I just used the font tag because I haven't learnt CSS yet. I am starting to now though.
I put the code tag to make it look good.
Funny, it looked like it worked. I will fix it anyways.
I will end the ol tag. Wonder why it didn't affect anything though.
As I said, I was just messing around.
Well, you don't technically need to end any list tags. but it's good practise.
Offline
#23 2008-09-20 20:22:26
Re: Html/css
coolstuff wrote:
Bobby500 wrote:
Wow, I made a huge amount of mistakes.
Alot of this was just to experiment. I wasn' trying to make anything in particular.
I just used the font tag because I haven't learnt CSS yet. I am starting to now though.
I put the code tag to make it look good.
Funny, it looked like it worked. I will fix it anyways.
I will end the ol tag. Wonder why it didn't affect anything though.
As I said, I was just messing around.Well, you don't technically need to end any list tags. but it's good practise.
Any ideas about my css external sheet problem?
Offline