Scratch
archived forums
#1 2012-02-17 06:54:26
HTML tutorial for beginners.
HTML stands for Hyper text markup language... It is used for making webpages.
If you want to build your webpage in intermediate code, use CSS with your html...
What I mean by this is: You can put style on your html.
How to do it?
type the following code...
Code:
<html>
<title> ...................put your title here................... </title>
<style type="text/css">
body {
font-family: Arial;
color: *PICK A COLOR OR HEXADECIMAL COLOR CODE!*;
background-color: *PICK A COLOR OR HEXADECIMAL COLOR CODE!* }
</style>
<body>
PUT TAGS FOR YOUR BODY HERE...
</body>
</html>Or, if you want to be advanced, type this code:
Code:
<html>
<title> TITLE </title>
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
</style>
</head>
<body>
<!-- Site navigation menu -->
<ul class="navbar">
<li><a href="WEBSITE"> Description of website </a>
</ul>
<!-- Main content -->
<h1>Header 1</h1>
<address>TEXT.</address>
</body>
</html>...Hope this helped!
Offline
#2 2012-02-17 06:55:59
- RedRocker227
- Scratcher
- Registered: 2011-10-26
- Posts: 1000+
Re: HTML tutorial for beginners.
Good guide ^^ I'm trying to learn HTML, but I only started learning seriously a couple of days ago, so I can't do anything except underlining, changing colour, that sort of stuff XD
Why
Offline
#3 2012-02-17 08:15:02
Re: HTML tutorial for beginners.
Cool guide, I already know HTML but still...
Btw I would recommend http://bluefish.openoffice.nl/index.html for those of you who want to do web developing. Best HTML editor ever. No it's not a wysiwyg editor.
Offline
#4 2012-02-17 08:26:13
Re: HTML tutorial for beginners.
slinger wrote:
Cool guide, I already know HTML but still...
Btw I would recommend http://bluefish.openoffice.nl/index.html for those of you who want to do web developing. Best HTML editor ever. No it's not a wysiwyg editor.
personally i use eclipse PDT, it's made for PHP and i'm using it right now for scratchbb
Offline
#5 2012-02-17 08:32:12
Re: HTML tutorial for beginners.
TRocket wrote:
slinger wrote:
Cool guide, I already know HTML but still...
Btw I would recommend http://bluefish.openoffice.nl/index.html for those of you who want to do web developing. Best HTML editor ever. No it's not a wysiwyg editor.personally i use eclipse PDT, it's made for PHP and i'm using it right now for scratchbb
Ok, i'll check it out. I really like bluefish though 
Offline
#7 2012-02-17 09:51:12
- veggieman001
- Scratcher
- Registered: 2010-02-20
- Posts: 1000+
Re: HTML tutorial for beginners.
slinger wrote:
Cool guide, I already know HTML but still...
Btw I would recommend http://bluefish.openoffice.nl/index.html for those of you who want to do web developing. Best HTML editor ever. No it's not a wysiwyg editor.
My personal favourite editor is Unitron for Macs, but I usually just use Notepad on a PC.
Posts: 20000 - Show all posts
Offline
#8 2012-02-17 10:09:29
Re: HTML tutorial for beginners.
veggieman001 wrote:
slinger wrote:
Cool guide, I already know HTML but still...
Btw I would recommend http://bluefish.openoffice.nl/index.html for those of you who want to do web developing. Best HTML editor ever. No it's not a wysiwyg editor.My personal favourite editor is Unitron for Macs, but I usually just use Notepad on a PC.
Ok, cool enough I just find this really helps of you are trying to do something and forget a certain tag etc...
Offline
#9 2012-02-17 10:10:20
- veggieman001
- Scratcher
- Registered: 2010-02-20
- Posts: 1000+
Re: HTML tutorial for beginners.
slinger wrote:
veggieman001 wrote:
slinger wrote:
Cool guide, I already know HTML but still...
Btw I would recommend http://bluefish.openoffice.nl/index.html for those of you who want to do web developing. Best HTML editor ever. No it's not a wysiwyg editor.My personal favourite editor is Unitron for Macs, but I usually just use Notepad on a PC.
Ok, cool enough
I never forget tags 
Well, when I do, I can see it easily on the page. And that helps me go slower and not make that mistake again ^^
Posts: 20000 - Show all posts
Offline
#11 2012-02-17 13:41:58
- ProgramCAT
- Scratcher
- Registered: 2011-12-13
- Posts: 500+
Re: HTML tutorial for beginners.
THAT IS TERRIBLE HTML!
OK, sorry for the outburst but NEVER USE EMBEDDED OR INLINE STYLES!
It's really bad practice and makes maintaining the CSS over several pages incredibly messy.
But that is a nice guide! If you added some information explaining HTML's different elements it would be even better. 
Programming is an art...
Goodbye, Scratch. I am leaving because of the exams coming up at our school, though I'll check the forums once or twice a week.
Offline
#13 2012-02-17 17:12:28
Re: HTML tutorial for beginners.
I don't really count this as a tutorial, but more of a guide, as a tutorial teaches you how to do more than one thing with a guide about things, but a guide just tells you how to do stuff.
So if people wanted to change some things they wouldn't be able to because you didn't teach them how it works...
Offline
#14 2012-02-17 17:14:55
Re: HTML tutorial for beginners.
not bad
but external css is a major help
i use notepad++
Pretty Hate Machine, Broken, Closer To God, The Downward Spiral, Further Down The Spiral, The Perfect Drug, The Fragile, And All That Could Have Been, With Teeth, Year Zero, Y34RZ3R0R3M1X3D, Ghosts I-IV, The Slip, Pretty Hate Machine 2010
Offline
#15 2012-02-17 17:44:08
- veggieman001
- Scratcher
- Registered: 2010-02-20
- Posts: 1000+
Re: HTML tutorial for beginners.
ProgramCAT wrote:
THAT IS TERRIBLE HTML!
OK, sorry for the outburst but NEVER USE EMBEDDED OR INLINE STYLES!
It's really bad practice and makes maintaining the CSS over several pages incredibly messy.
But that is a nice guide! If you added some information explaining HTML's different elements it would be even better.
Inline styles are nice, especially if you're only using the CSS for one page.
Posts: 20000 - Show all posts
Offline
#16 2012-02-17 17:49:31
Re: HTML tutorial for beginners.
veggieman001 wrote:
ProgramCAT wrote:
THAT IS TERRIBLE HTML!
OK, sorry for the outburst but NEVER USE EMBEDDED OR INLINE STYLES!
It's really bad practice and makes maintaining the CSS over several pages incredibly messy.
But that is a nice guide! If you added some information explaining HTML's different elements it would be even better.Inline styles are nice, especially if you're only using the CSS for one page.
From experience, inline styles are terrible to maintain.
Though if there is only one page, I generally use embedded.
But it's good practice to use external stylesheets.
Offline
#17 2012-02-17 17:52:27
- veggieman001
- Scratcher
- Registered: 2010-02-20
- Posts: 1000+
Re: HTML tutorial for beginners.
trinary wrote:
veggieman001 wrote:
ProgramCAT wrote:
THAT IS TERRIBLE HTML!
OK, sorry for the outburst but NEVER USE EMBEDDED OR INLINE STYLES!
It's really bad practice and makes maintaining the CSS over several pages incredibly messy.
But that is a nice guide! If you added some information explaining HTML's different elements it would be even better.Inline styles are nice, especially if you're only using the CSS for one page.
From experience, inline styles are terrible to maintain.
Though if there is only one page, I generally use embedded.
But it's good practice to use external stylesheets.
Ah well. Each to his own.
Posts: 20000 - Show all posts
Offline
#18 2012-02-17 17:58:07
Re: HTML tutorial for beginners.
Here's a list of commonly used tags.
Remember: All tags must have an ending with the same name and a / like this:
Code:
<p></p>Code:
<html>The base of your code. Put everything in the html in here.
Code:
<head>The header. Stuff like <title>, <style>, and <link> go in there.
Code:
<title>Put text in the title, and it appears on the tab (chrome), head (IE), or somewhere (firefox).
Code:
<style>Code:
<body>The main parts of your code go here. Stuff like paragraphs <p> and links <a href="'> go here.
Code:
<h1>A heading that's in the text. h1-h6 all work, but as you go higher, the text gets smaller. Should use with styling.
Code:
<p>Paragraphs. Put your text in here.
Code:
<a href="link">text</a>Special exception: Links. Put the link where it says "link" and put the text you want in the "text" area. The </a> must be at the end to work.
Code:
<a>Anchor. Not much to it.
Code:
<span>/<div>Dividers. <span> is inline (inside your paragraphs and such) while <div> is where your headers go. Use with <style>.
Code:
<img src="image link" />This is an image. No need for a </img>. Put the image link in the "image link".
---------------
The heck is an <address> tag.
Last edited by bbbeb (2012-02-17 18:00:17)
Back in my day.... there were no laws that censored the internet... now, there are.... nah.
Offline
#19 2012-02-17 18:02:19
- veggieman001
- Scratcher
- Registered: 2010-02-20
- Posts: 1000+
Re: HTML tutorial for beginners.
bbbeb wrote:
Here's a list of commonly used tags.
Remember: All tags must have an ending with the same name and a / like this:
Code:
<p></p>Code:
<html>The base of your code. Put everything in the html in here.
Code:
<head>The header. Stuff like <title>, <style>, and <link> go in there.
Code:
<title>Put text in the title, and it appears on the tab (chrome), head (IE), or somewhere (firefox).
Code:
<style>Code:
<body>The main parts of your code go here. Stuff like paragraphs <p> and links <a href="'> go here.
Code:
<h1>A heading that's in the text. h1-h6 all work, but as you go higher, the text gets smaller. Should use with styling.
Code:
<p>Paragraphs. Put your text in here.
Code:
<a href="link">text</a>Special exception: Links. Put the link where it says "link" and put the text you want in the "text" area. The </a> must be at the end to work.
Code:
<a>Anchor. Not much to it.
Code:
<span>/<div>Dividers. <span> is inline (inside your paragraphs and such) while <div> is where your headers go. Use with <style>.
Code:
<img src="image link" />This is an image. No need for a </img>. Put the image link in the "image link".
---------------
The heck is an <address> tag.
Posts: 20000 - Show all posts
Offline
#20 2012-02-17 18:41:50
Re: HTML tutorial for beginners.
1. I know what it does, was wondering why it was there.
2. Why did you quote the entire thing.
Back in my day.... there were no laws that censored the internet... now, there are.... nah.
Offline
#21 2012-02-17 18:49:15
- veggieman001
- Scratcher
- Registered: 2010-02-20
- Posts: 1000+
Re: HTML tutorial for beginners.
bbbeb wrote:
1. I know what it does, was wondering why it was there.
2. Why did you quote the entire thing.
Because I am lazy
Posts: 20000 - Show all posts
Offline
#22 2012-02-23 05:23:11
Re: HTML tutorial for beginners.
bbbeb wrote:
1. I know what it does, was wondering why it was there.
2. Why did you quote the entire thing.
The <address> tag is literally the same as the <i> tag. It renders in italic.
Offline
#23 2012-02-23 11:05:47
Re: HTML tutorial for beginners.
Here is a few random words of advice ,
1. HTML Supports commenting using the <!-- --> tag
2. Join Stackoverflow.com and ask questions there
3. Using JavaScript and SHIMs and polyfills with html is great advice
4. Check features [html5 & css3 & JS2.0Api] on www.caniuse.com
5. Use MDN
6. Never goto w3schools.com because the tutorials there are outdated and not well written atall they rather give fake information and ..
7. As per IDE is concerned i use Aptana Studio 3 [ free and powerful ] though Adobe Dreamweaver is awesome and for those drag and drop kids Adobe Edge is a great software coming with decent html5 support.
8. Last but not the least , use Chrome / Firefox with Console / Firebug respectively for
the sake of proper debugging
and dear god
@rdococ
*faceuniverse*
<address> tag is not just as <i> tag it is there for a sementic use
this is why the <address> tag is actually there
Code:
The address element provides contact information for a document or part of a document. Information provided by address may include the names of the document’s maintainers, links to the maintainers’ Web pages, e-mail addresses for feedback, postal addresses, phone numbers, and so on. The address element is not appropriate for all postal and e-mail addresses; it should be reserved for providing such information about the contact people for the document.
W3Specification
Hope that helps
Last edited by fanofcena (2012-02-23 11:11:47)
Click whats above u might make a cute planet happy ^_^ Offline
#24 2012-02-23 21:41:32
- ProgramCAT
- Scratcher
- Registered: 2011-12-13
- Posts: 500+
Re: HTML tutorial for beginners.
HTML5 is the new standard.
Just saying but you might want to include the new tags like <nav> and <article> into your tutorial.
Programming is an art...
Goodbye, Scratch. I am leaving because of the exams coming up at our school, though I'll check the forums once or twice a week.
Offline
#25 2012-02-23 23:36:52
Re: HTML tutorial for beginners.
ProgramCAT wrote:
HTML5 is the new standard.
Just saying but you might want to include the new tags like <nav> and <article> into your tutorial.
O really?? why keep web in stoneage ???
Click whats above u might make a cute planet happy ^_^ Offline