Computer Science Canada

[Tutorial] HTML Basics - how to code without using a WYSIWYG

Author:  PHP God [ Sun May 25, 2003 3:55 pm ]
Post subject:  [Tutorial] HTML Basics - how to code without using a WYSIWYG

I'm sure many of you use frontpage, or Dreamweaver. I admit I have used these programs before and it was a long time till I saw their flaws. Not only in how they wrote code, but also in how fast they outdate. They also add codes that some browsers can't read, FP is the worst for this. After this tut you will never need expensive programs again.

Well heres some news for you, I don't think notepad will ever change. The great thing about notepad is you can make any kind of file with it, when you save it, just select the dropdown menu, select ALL FILES, and type in the filename with the extensions. At the bottom of this tutorial I have added some helpful links. I will not cover Tables in this tutorial, but I have covered it in a previous one.

HTML is an abbreviation for HyperText Markup Language. It is the most commonly used way to build a website. Even a PHP file converts to HTML, you are viewing this forum that is PHP enabled. But if you view the source, you will notice it is still in HTML. THis is because PHP generates HTML for your browser because not many have PHP installed. The difference between these two is one is STATIC, and the other is DYNAMIC. DYNAMIC is programming like ASP or PHP, whereas HTML is static.

HTML uses what are called TAGS. Every tag (with the exception of BR) has an opening tag and a closing tag. an opening tag has two braces around the tag name. The closing tag has the two braces, and then the tag name with a backslash in front of it. The best way to show how this works is to use the B (bold) tag.

code:

<B>This is bold</B>This is not


The text inside the the bold tag is bold, but the rest is not. Basically we are telling the browser somethings properties by putting it between tags. Below is a list of tags and attributes which may be added to them.
______________________________________
FONT - specifies text properties
- attributes -
FACE - specifies the fonts name i.e VERDANA, HEVELTICA
SIZE - specifies the size, can be a number or a pt. i.e 3 or 10pt
COLOR - Specifies the color, must be a hex value.
______________________________________
A - used for links. Anything between the a tags becomes a hyperlink.

code:

EX. <A href="http://www.mypage.com">A link to my page</A>

the HREF is used to refrence a URL.

URL's can be used to make an e-mail link too.
code:

EX. <A href="mailto:you@yourmail.com">E-Mail me</A>

_______________________________________
B - used to bold text, any text inside it will be bolded
_______________________________________
U - used to underline text, any text inside the tags will have an underline.
_______________________________________
MARQUEE - used to make a scrolling marquee
- attributes -
WIDTH - specifies the marquee's width, you can use a percent or pixels.
SCROLLDELAY - an average value is 90, it specifies the scrolling speed
BEHAVIOR - can be either SCROLL, or ALTERNATE
_______________________________________
CENTER - centers anything inside the tags.
_______________________________________
these are basic formatting tags. You can place these in your file. They are however useless until the browser sees we are making an HTML page. so we use the HTML tag. Preceding it is the HEAD tags. After are the BODY tags (where you content goes).

code:

<HTML>
<HEAD>
</HEAD>
<BODY>
<!-- Your stuff here -->
</BODY>
</HTML>


The line that says:

<!-- Your stuff here -->

is a comment tag. It is ignored by the browser, you can use it to write helpful notes on your page.

If you want to change the title in the tilte bar of the browser, use the TITLE tag inside of the HEAD tags.

code:

<HEAD>
<TITLE>Look at me, I'm a title.</TITLE>
</HEAD>


Another thing you need to know is that you cannot put more than two spaces between words. The browser will ignore additional spaces after the first. You need to use a Non-Breaking Space. you do this by typing NBSP;

you can type multiple ones to make more spaces.

If you want to add a break, or go down to the next line, then type BR in a tag.
<BR>
note that this tag does not need to be closed.

you can align things using the P tag. Its attributes are, CLASS (used for CSS), and ALIGN. ALIGN can equal RIGHT, LEFT, or CENTER. Any text inside the tags will be accordingly oriented.

HTML is a very large language, thus it would take forever to write a complete guide. HTML is always changing too, this could be outdated in a year. For news on Web programming languages, you can go to the World Wide Web Consortium ( http://www.w3c.org )

A useful free editor is CRIMSON EDITOR. it color codes your tags, and when you press enter it doesn't start at the beggining of the line like Notepad. it drops to where you started the last one making it easier to code cleanly. It also supports many other languages.

Download Crimson Editor @
http://download.com.com/3000-2352-10140098.html?tag=lst-0-1

If you have any questions feel free to ask.

Author:  JSBN [ Sun May 25, 2003 4:00 pm ]
Post subject: 

Good.
Note: You have already received an Award so i can only give you +10
Thx alot, JSBN

Author:  the_short1 [ Sun Jun 06, 2004 7:56 pm ]
Post subject: 

THANKS A LOT!!\


i didn't even know how to make a fricking link like 1 month ago.... ive slowly been learning by looking at other sites source codes...... yea ive been making my new website in Geocities PAGEBUILDER... but i will be importing to shaw later on and have to modify it a bit...

but for my forum u can edit board HTML all u want.. .. . .this is VERY helpful!!!

<br> <<< really happy i leared that!

Author:  JHanson90 [ Wed Aug 18, 2004 12:56 pm ]
Post subject:  Re: [Tutorial] HTML Basics - how to code without using a WYS

PHP God wrote:
HTML is a very large language, thus it would take forever to write a complete guide. HTML is always changing too, this could be outdated in a year.


Quite right, HTML eventually will change to require XHTML. XHTML requires that all your tags be in lowercase, as opposed to the old fashioned UPPERCASE style, like so:
code:
<html>
<head>
<title>Blah</title>
</head>
<body>
Blah<br />
<b>Blah</b>
</body>
</html>
You can also see that in XHTML, ALL tags must be closed. So from the old HTML's <BR>, XHTML says it must be as <br />. Same goes for an image; <img src="blah.png" alt="moo" title="moo" name="blah" id="blah" />. If you ever have to use the name attributes of a tag, you should also include the exact same thing, but in the form of an id attribute. This attribute is supposed to change sometime in the future so they recommend that you use both name="name" and id="name" for now. Also, you may have noticed that on image alternative texts (the alt attribute of an <img />), Microsoft Internet Explorer shows you what the alt attribute says when your mouse goes over the image, but Mozilla does not do that. To support both Mozilla and MSIE, you must not only use the alt attribute, but also the title attribute. Mozilla displays the title one.

The reason you have to close all tags is because XHTML is really XML, and the XHTML (A.K.A. the "HTML of the future") will have to follow the rules of XML.

Author:  wtd [ Wed Aug 18, 2004 1:51 pm ]
Post subject: 

While I appreciate people hand-coding, using the bold tag is bad practice. Instead, use styles. For instance, instead of:

code:
<p>Hello, I'm going to talk about important people like <b>Einstein</b> and <b>Edison</b>.  Yada yada yada...</p>


Use:

code:
<p>Hello, I'm going to talk about important people like <span class="important-person">Einstein</span> and <span class="important-person">Edison</span>.  Yada yada yada...</p>


Then the style can be applied as simply as:

code:
.important-person {
   font-weight: bold;
}


Later the style could be uniformly changed witha modification as simple as:

code:
.important-person {
   font-weight: bold;
   color: red;
   text-decoration: underline;
}

Author:  JHanson90 [ Wed Aug 18, 2004 2:01 pm ]
Post subject: 

wtd wrote:
While I appreciate people hand-coding, using the bold tag is bad practice. Instead, use styles. For instance, instead of:

code:
<p>Hello, I'm going to talk about important people like <b>Einstein</b> and <b>Edison</b>.  Yada yada yada...</p>


Use:

code:
<p>Hello, I'm going to talk about important people like <span class="important-person">Einstein</span> and <span class="important-person">Edison</span>.  Yada yada yada...</p>


Then the style can be applied as simply as:

code:
.important-person {
   font-weight: bold;
}


Later the style could be uniformly changed witha modification as simple as:

code:
.important-person {
   font-weight: bold;
   color: red;
   text-decoration: underline;
}


Very good method, extracts even more dynamicness from static HTML Smile

But web designers beware; when you get into the more complex areas of CSS, it might not render correctly in specific browsers. M$IE doesn't properly render some CSS styling (it also doesn't support transparent .PNGs Crying or Very sad). Here's a good example; to see what I mean, look at the following website in Opera or Mozilla: http://www.monse.org/
Then look at it in IE.
You can take a look at the CSS used here:
http://www.monse.org/monseorg.css
Unless I'm mistaken, it's all valid. It's even been validated by the World Wide Web Consortium.

Author:  Amailer [ Wed Aug 18, 2004 3:03 pm ]
Post subject: 

Actually you can use css (for divs and etc) and make it work on both borwsers, IE/FireFox and etc (tho they don't work very well on browsers on MAC's), take a look at Catalyst site it's completly using divs and css files. (and <li> also Very Happy).

Depends on how you code it... using tables becomes anoying because their like unstable... if you refresh the page you'll have 1 table stretched accross the site suddenly, refresh it again it becomes normal (well that again is due to the way you code).

[ I don't know but iv noticed when sometimes i put a table inside another table it starts to have weird anoying problems, plus it was all built in dreamwaver Very Happy (ask dan) ].

Author:  wtd [ Wed Aug 18, 2004 3:15 pm ]
Post subject: 

Amailer wrote:
Actually you can use css (for divs and etc) and make it work on both borwsers, IE/FireFox and etc (tho they don't work very well on browsers on MAC's), take a look at Catalyst site it's completly using divs and css files. (and <li> also Very Happy).


Apple's Safari browser is actually better at CSS than most other browsers. It actually implements a good share of CSS3 already. Dave Hyatt, the guru behind it is an amazing hacker.

However, Safari does use a modified KHTML (the basis for Konqueror) rendering engine, so it's quite likely that it will have some very minor differences when compared to browsers using Mozilla or the IE rendering engine.

Also, the full Mozilla suite and Firefox are both available for OS X, and render pages the same way they do on any other platform.

Author:  Dan [ Wed Aug 18, 2004 4:53 pm ]
Post subject: 

wtd wrote:

Apple's Safari browser is actually better at CSS than most other browsers. It actually implements a good share of CSS3 already. Dave Hyatt, the guru behind it is an amazing hacker.

However, Safari does use a modified KHTML (the basis for Konqueror) rendering engine, so it's quite likely that it will have some very minor differences when compared to browsers using Mozilla or the IE rendering engine.


idk about safari but Konqueror shows things very difrently then IE or Firefox. with some of the stuff i am working on for v3 invaling tables they work fine in firefox and IE but when i try to view them in Konqueror the boraders are completay diffrent. Athougth not so bad that it makes the site unuseable just makes it look odd.

Author:  Zasalamel [ Tue May 11, 2010 3:07 pm ]
Post subject:  Re: [Tutorial] HTML Basics - how to code without using a WYSIWYG

http://www.tizag.com/htmlT/ is a really good tutorial for absolute beginners to experts (also has CSS, Javascript,Perl,Ajax,etc. tutorials)


: