You are viewing our Forum Archives. To view or take place in current topics click here.
HTML Tutorial/Guide
Posted:
HTML Tutorial/GuidePosted:
Status: Offline
Joined: Jun 26, 201113Year Member
Posts: 447
Reputation Power: 23
Status: Offline
Joined: Jun 26, 201113Year Member
Posts: 447
Reputation Power: 23
So what actually is HTML?
HTML, which stands for HyperText Markup Language, is the predominant markup language for web pages. HTML is the basic building-blocks of webpages.
HTML is written in the form of HTML elements consisting of tags, enclosed in angle brackets (like <html>), within the web page content. HTML tags normally come in pairs like <h1> and </h1>.
HTML is written in the form of HTML elements consisting of tags, enclosed in angle brackets (like <html>), within the web page content. HTML tags normally come in pairs like <h1> and </h1>.
Introduction,Presentation & Exercise
Here are some great videos produced by the google team that really helped me learn HTML and put it to great use! I also learn't CSS and JAVA from the google team but you can learn that from somewhere else or find it yourself. If you want to look at this in more detail then I'd suggest looking at W3 schools as it helps too!
Here are some great videos produced by the google team that really helped me learn HTML and put it to great use! I also learn't CSS and JAVA from the google team but you can learn that from somewhere else or find it yourself. If you want to look at this in more detail then I'd suggest looking at W3 schools as it helps too!
Google HTML/CSS/Javascript from the Ground Up Class: Introduction
Google HTML/CSS/Javascript from the Ground Up Class: HTML Presentation
Google HTML/CSS/Javascript from the Ground Up Class: HTML Exercise
Here Is a 'Hand Written' Tutorial - Using the source of my own knowledge
Tags:
The browser is able to tell what's an instruction and what isn't because an instruction always starts with the < character and ends with the > character. Anything contained within these two angle-brackets is an instruction to the browser - and is known as a TAG. It won't be displayed, but acted upon. An ordinary HTML file contains nothing but tags and plain text in English (or French, Italian, German, etc.).
Because it's quite important that a browser doesn't attempt to interpret any of the other files it may encounter on your computer or down the phone line, it will only deal with a file which begins with a tag announcing that the file actually contains HTML code. For our purposes, it's also useful to tell the browser which version of HTML you're writing in. This is because a five-year-old browser won't know about the latest versions of HTML, so may not display things in the same way as one released just last month. It's good practice to try to ensure that all your readers get the same result!
The second tag is rather obvious - it says "From here on in we're talking HTML". This tag is mandatory - nothing will happen without it. There should also be a </HTML> at the end of the file - meaning that's the end of the HTML.
Next comes another mandatory tag:
<TITLE>your page's title</TITLE>
This is the one which places 'your page's title' in the title bar of the browser when it's displaying the file. Again, it has to be switched off with the / element (often called a 'closer'), so the browser know that what comes next is not part of the title. Tags are not case-sensitive, so <title> would do just as well - but I always type all my tags in upper case to make them easier to see in a page of code.
Next we sometimes find this non-mandatory tag:
<HEAD> and of course </HEAD>
... but they're not needed in most ordinary files and can be left out. I'll explain situations where a Header section is needed, later.
Next we always find this mandatory tag:
<BODY> and of course </BODY>
This is where the Body of the page is written - i.e. the main part of what you see on the screen. It's also where you can specify some overall display attributes for the whole file - like the font name, size, colour, background colour, background graphic, Hypertext link colours, etc.
<BODY BACKGROUND="graphics/mag_bak.jpg">
... is what I use on the main pages of the Musical Traditions magazine. Double quotes are supposed to enclose names of other files or attributes specified from within the HTML file. In practice, they appear not to be necessary ... as we're trying to write compact code there's no sense in including anything which isn't essential - every character has to be downloaded! Try putting them in if something doesn't work properly.
Obviously, the background colour or graphic is your decision as the page's creator - but avoid insisting that a reader has to do things your way unless it's important that s/he does. Thus I never specify the Font Face in the magazine apart from in the Discographies and a few other situations where a lot of text has to be displayed in a small space - then I use the tag:
<FONT FACE="Arial Narrow"> followed by </FONT> when it's no longer needed.
I also never specify the Hypertext link colours - suppose your reader is colour-blind and has set his/her browser to display these in colours s/he can recognise!
Text formatting:
Basic text formatting also employs non-ASCII characters, so you have to tell the browser to start and stop displaying your text in <I>italics</I> or <B>bold</B> or <U>underlined</U> or <B><I>bold italics</I></B>. I think they are fairly self-explanatory?
Its quite likely that the first thing you might write on your page would be a heading of some sort - and you could always tell the browser to make it larger and emboldened, and to start the next line as a new paragraph, like this:
<P> <FONT SIZE=5><B>Heading</B></FONT>
<P>
... but it's far simpler, and more compact, to use the built in Header tags, like this:
<H2>Heading</H2>
... which incorporate a paragraph tag above and below the Heading into the bargain. H1 is the biggest size and H4 is about as small as a heading ever needs to be. You can always specify the exact sized text with the Font Size tag, if required.Font Sizes are a bit problematic because there can be so many variables. You've probably noticed that you can set your browser to display the page in five sizes from 'smallest' through to 'largest', or specific point sizes on older ones. The default size for text in an HTML file is 3 (about 10 point) but it's possible to set this to another number with the <BASEFONT SIZE=n> tag (n ranges from 1 to 7). This will override what your reader has set his/her browser to - not often a good idea. You can specify font size as being larger or smaller than the basefont size, i.e. <FONT SIZE=+3>, but that's no good if the reader's browser is already set to 'largest' as you can't get larger than that! The best thing is to experiment a bit - and try to avoid situations where the font size is too critical.
Your heading may need to be centred on the page - <CENTER><H2>Heading</H2></CENTER> will take care of that. If you'd like your Heading displayed in a colour other than black, then <FONT COLOR=red>Heading</FONT> will do it. Notice the US spelling of <COLOR>. There are a range of named colours (blue, green, yellow, etc), or they can be specified by their 24-bit hexadecimal RGB numbers in quotes and with a hash - <FONT COLOR="#FF0000"> is red, for example. There's a list of all of these at the end on this piece.
The browser is able to tell what's an instruction and what isn't because an instruction always starts with the < character and ends with the > character. Anything contained within these two angle-brackets is an instruction to the browser - and is known as a TAG. It won't be displayed, but acted upon. An ordinary HTML file contains nothing but tags and plain text in English (or French, Italian, German, etc.).
Because it's quite important that a browser doesn't attempt to interpret any of the other files it may encounter on your computer or down the phone line, it will only deal with a file which begins with a tag announcing that the file actually contains HTML code. For our purposes, it's also useful to tell the browser which version of HTML you're writing in. This is because a five-year-old browser won't know about the latest versions of HTML, so may not display things in the same way as one released just last month. It's good practice to try to ensure that all your readers get the same result!
The second tag is rather obvious - it says "From here on in we're talking HTML". This tag is mandatory - nothing will happen without it. There should also be a </HTML> at the end of the file - meaning that's the end of the HTML.
Next comes another mandatory tag:
<TITLE>your page's title</TITLE>
This is the one which places 'your page's title' in the title bar of the browser when it's displaying the file. Again, it has to be switched off with the / element (often called a 'closer'), so the browser know that what comes next is not part of the title. Tags are not case-sensitive, so <title> would do just as well - but I always type all my tags in upper case to make them easier to see in a page of code.
Next we sometimes find this non-mandatory tag:
<HEAD> and of course </HEAD>
... but they're not needed in most ordinary files and can be left out. I'll explain situations where a Header section is needed, later.
Next we always find this mandatory tag:
<BODY> and of course </BODY>
This is where the Body of the page is written - i.e. the main part of what you see on the screen. It's also where you can specify some overall display attributes for the whole file - like the font name, size, colour, background colour, background graphic, Hypertext link colours, etc.
<BODY BACKGROUND="graphics/mag_bak.jpg">
... is what I use on the main pages of the Musical Traditions magazine. Double quotes are supposed to enclose names of other files or attributes specified from within the HTML file. In practice, they appear not to be necessary ... as we're trying to write compact code there's no sense in including anything which isn't essential - every character has to be downloaded! Try putting them in if something doesn't work properly.
Obviously, the background colour or graphic is your decision as the page's creator - but avoid insisting that a reader has to do things your way unless it's important that s/he does. Thus I never specify the Font Face in the magazine apart from in the Discographies and a few other situations where a lot of text has to be displayed in a small space - then I use the tag:
<FONT FACE="Arial Narrow"> followed by </FONT> when it's no longer needed.
I also never specify the Hypertext link colours - suppose your reader is colour-blind and has set his/her browser to display these in colours s/he can recognise!
Text formatting:
Basic text formatting also employs non-ASCII characters, so you have to tell the browser to start and stop displaying your text in <I>italics</I> or <B>bold</B> or <U>underlined</U> or <B><I>bold italics</I></B>. I think they are fairly self-explanatory?
Its quite likely that the first thing you might write on your page would be a heading of some sort - and you could always tell the browser to make it larger and emboldened, and to start the next line as a new paragraph, like this:
<P> <FONT SIZE=5><B>Heading</B></FONT>
<P>
... but it's far simpler, and more compact, to use the built in Header tags, like this:
<H2>Heading</H2>
... which incorporate a paragraph tag above and below the Heading into the bargain. H1 is the biggest size and H4 is about as small as a heading ever needs to be. You can always specify the exact sized text with the Font Size tag, if required.Font Sizes are a bit problematic because there can be so many variables. You've probably noticed that you can set your browser to display the page in five sizes from 'smallest' through to 'largest', or specific point sizes on older ones. The default size for text in an HTML file is 3 (about 10 point) but it's possible to set this to another number with the <BASEFONT SIZE=n> tag (n ranges from 1 to 7). This will override what your reader has set his/her browser to - not often a good idea. You can specify font size as being larger or smaller than the basefont size, i.e. <FONT SIZE=+3>, but that's no good if the reader's browser is already set to 'largest' as you can't get larger than that! The best thing is to experiment a bit - and try to avoid situations where the font size is too critical.
Your heading may need to be centred on the page - <CENTER><H2>Heading</H2></CENTER> will take care of that. If you'd like your Heading displayed in a colour other than black, then <FONT COLOR=red>Heading</FONT> will do it. Notice the US spelling of <COLOR>. There are a range of named colours (blue, green, yellow, etc), or they can be specified by their 24-bit hexadecimal RGB numbers in quotes and with a hash - <FONT COLOR="#FF0000"> is red, for example. There's a list of all of these at the end on this piece.
Quite alot of work went in to this post!
So if you found this helpful then feel free to thank the topic!
So if you found this helpful then feel free to thank the topic!
Sticky?
Last edited by Mischief ; edited 1 time in total
#2. Posted:
Status: Offline
Joined: Apr 06, 201113Year Member
Posts: 1,190
Reputation Power: 55
Status: Offline
Joined: Apr 06, 201113Year Member
Posts: 1,190
Reputation Power: 55
nice tut Thanks
12345
12345
- 3useful
- 0not useful
#3. Posted:
Status: Offline
Joined: Mar 29, 201113Year Member
Posts: 31
Reputation Power: 1
Thanks dude you helped me a lot!
Sticky?
Sticky?
- 0useful
- 1not useful
#4. Posted:
Status: Offline
Joined: Jun 26, 201113Year Member
Posts: 447
Reputation Power: 23
Status: Offline
Joined: Jun 26, 201113Year Member
Posts: 447
Reputation Power: 23
hope i helped yourwelome
- 0useful
- 0not useful
#5. Posted:
Status: Offline
Joined: Jul 12, 201013Year Member
Posts: 2,684
Reputation Power: 122
Status: Offline
Joined: Jul 12, 201013Year Member
Posts: 2,684
Reputation Power: 122
This is a very poor tutorial and is outdated. To learn HTML correctly, use Tizag.com.
- 1useful
- 0not useful
#6. Posted:
Status: Offline
Joined: Jun 26, 201113Year Member
Posts: 447
Reputation Power: 23
Status: Offline
Joined: Jun 26, 201113Year Member
Posts: 447
Reputation Power: 23
-Jordan- wrote This is a very poor tutorial and is outdated. To learn HTML correctly, use Tizag.com.
Dude. Your wrong, this tutorial is not incredibly outdated, it is actually a tutorial that is up to date and may help most people learning basic html. So don't troll without a good reason as your doing it pointlessly, so gtfo.
- 0useful
- 0not useful
#7. Posted:
Status: Offline
Joined: Jul 12, 201013Year Member
Posts: 2,684
Reputation Power: 122
Status: Offline
Joined: Jul 12, 201013Year Member
Posts: 2,684
Reputation Power: 122
GenerationGFX wrote-Jordan- wrote This is a very poor tutorial and is outdated. To learn HTML correctly, use Tizag.com.
Dude. Your wrong, this tutorial is not incredibly outdated, it is actually a tutorial that is up to date and may help most people learning basic html. So don't troll without a good reason as your doing it pointlessly, so gtfo.
<font> = Depreciated
<center> = Depreciated
<color> = Depreciated
<basefont> = Depreciated
background="" = Depreciated
size="" = Depreciated
color="" = Depreciated
-----------
Some other things you got wrong:
- Elements are not instructions.
- The fact that the file begins with a tag doesn't declare that it's an HTML file. The extension does.
- The <title> tag isn't mandatory.
- If the '<title> is mandatory' as you claim then how can the <head> not be. The <title> resides in the head.
- A <head></head> actually is required in most ordinary files.
...and probably many more.
- 3useful
- 0not useful
#8. Posted:
Status: Offline
Joined: Oct 01, 201013Year Member
Posts: 2,675
Reputation Power: 94
Status: Offline
Joined: Oct 01, 201013Year Member
Posts: 2,675
Reputation Power: 94
Thanks for guide dude.
- 0useful
- 0not useful
#9. Posted:
Status: Offline
Joined: Jun 26, 201113Year Member
Posts: 447
Reputation Power: 23
Status: Offline
Joined: Jun 26, 201113Year Member
Posts: 447
Reputation Power: 23
Thanks, just wished this had more publicity!
- 0useful
- 0not useful
#10. Posted:
Status: Offline
Joined: Jun 26, 201113Year Member
Posts: 447
Reputation Power: 23
Status: Offline
Joined: Jun 26, 201113Year Member
Posts: 447
Reputation Power: 23
if you think this is wrong then please feel free to correct me
- 0useful
- 0not useful
You are viewing our Forum Archives. To view or take place in current topics click here.