HTML / CSS Basic's [LESSON ONE]
HTML / CSS Basic's [LESSON ONE]
As promised I said I would start contributing to the site more, with an HTML and CSS basics class.
I will be releasing lessons every week, and working our way to some really advanced stuff.
So lets get right into it and learn something!
1. What is HTML?
First of all, HTML stands for "HyperText Markup Language."
But what does that really mean? Well, for one thing it means that HTML is not a computer language in the same sense that C, Perl, Fortran or Java is a computer language. HTML is a set of "Tags" that are places around text or images in a page, to make the text or image do specific things. It's more like a publishing language, or a set of rules for page layout.
Another thing to note about HTML is that even though it has developed into quite a rich and full-featured markup language (at least compared to what it was in 1995 when I started learning it) you still don't really need to know very many "Tags" at all to create useful and pretty websites.
Finally, and this is extremely important, an HTML file must be a plain text file only. This means that you can generate an HTML file from virtually any text editor, including Microsoft Word. But it also means that if you save it as a word document, instead of Plain Text Format, it's not going to work. This allows HTML to be portable and readable by any modern web browser on any computer. (Note the use of the word modern, very old browsers won't be able to understand a lot of the newer webpages).
2. Okay, so what is a "Tag"?
A Tag simply refers to the actual HTML code that you write. You "Markup" the text with "Tags" to make it appear how you want.
In operational terms, a Tag is anything that appears between < and >. For example, to define a piece of text in a paragraph, you would enclose it within the paragraph tag
<p>Text goes here!</p>.
As you can see, the paragraph tag actually consists of two tags, one to start the markup section, and one to end it. As a general rule, most tags require both a starting and ending tag to function properly (there are of course exceptions, and we will cover some of those). The ending tag is typically the same as the starting, but preceeded by a backslash.
Another thing to know about tags, is that many of them have additional, optional attributes that will allow you to specify things about style or formatting. For example, if you wanted your paragraph of text centered on the screen, you would use the "align" attribute for your paragraph tag. Note that these attributes are only present in the starting tag, they are not mirrored in the ending tag of the markup.
<p align=center>Text goes here!</p>.
3. How is the actual HTML code structured on a page
Well the easiest way to see this (and actually one of the best ways to learn HTML), is just to use the "View Page Source" function that is implemented into most modern browsers. This shows you the raw HTML code from the page.
First of all, the entire HTML page is enclosed in <html></html>. This is probably not necessary, but it is proper.
Within that, there are two main sections. <head></head> and <body></body>
<head> is usually reserved for indexing information about the page, or things that are not meant to be seen by the casual web browser. It also includes the title of your page which goes in the top of the window, and things like javascript code.
<body> contains the main portion of the HTML, and everything you want the surfer to see.
Use <body bgcolor=FFFFFF> for a white background. FFFFFF is the hex code for white, and can be changed to yield any background colour that you want.
Use <body background=coolpicture.jpg> to specify a picture as a background for your page. coolpicture.jpg should specify the path name of the actual image file on the server, relative to that HTML file (though be careful, it's hard to read over a lot of background pictures).
One more thing, all HTML files should end with the extension ".html" PC users might have to use ".htm", and that's okay too.
So here is the basic structure we need up with:
[HTML]<html> <head> <title>Page title</title> </head> <body> </body></html>[/HTML]
4. How about some more tag examples?
Paragraph
<p>Text goes here!</p>
Attributes: align=center|left|right
Heading
There are six levels of heading, with 1 being the most important and 6 being the least. Use this as section headings, it will be larger and bolder than a standard paragraph.
<h1>Text</h1>, <h2>Text</h2> ... <h6>Text</h6>
Attributes: align=center|left|right
Lists
There are two kinds of lists:
Ordered Lists <ol></ol>
Unordered Lists <ul></ul>
The difference is that an ordered list uses numbers, but an unordered list uses bullets
The list is the first tag that now requires another tag nested within, and that is the List Element "<li>"
Use <li> to start off each element in the list. This is a tag that typically does not require a closing tag, as closing is implied by either a new <li> element, or a list closing element </ol> or </ul>
It is also possible to nest one list within another. If you nest an unordered list within an ordered one, you would have a numbered heading, followed by a series of bullets. Nested lists have increased indentation, and often a different bullet style (browser dependant)
Links
The link is one of the more important tags to know, but also one of the stranger. Unlike the paragraph tag, the link tag REQUIRES an attribute to work properly. The attribute, in this case, is the web address that you want to link to.
<a></a>
Attribute: href (stands for Hypertext REFerence)
So a typical link looks like this: <a href="http://www.stanford.edu/">Stanford University</a>
There are two kinds of links; absolute and relative. Absolute links are like the one above, and include the full URL (http etc). Relative links specify only the path of the new page relative to the current page. Thus, if you wanted to link to a page in the same directory, you would use <a href=otherpage.html>Nice Link!</a>. This makes for a lot less typing for you, and also makes it easy to transfer the entire site to another server without changing any of the code.
Finally, you can also use a link to send an email to someone via your brower. Use this format <a href="mailto:joe@domain.com"> where "joe@domain.com" is clearly the email address of the intended recepient.
Images
What webpage would be complete without some pretty pictures? (besides this one of course:-)
The image tag is strange because it both requires an attribute to function (you specify the image file), and it has no ending tag. It has no ending tag because it is not actually used to markup text, so it does not surround anything.
<img>
Attributes: src=prettypic.jpg this specifies the location of the image on the server. Note that only gif, jpg and png files can be viewed by most browsers. Things like tiff will sometimes work, but they are typically so large they should be avoided anyways.
alt="This is a pretty picture" this specifies text that will be displayed instead of the image, in case the image fails to load, or in case someone chooses not to load the image (often the case when surfing on a really slow connection). This information is also used when visualy impaired people are surfing the web, so it's nice to include. Notice that it needs to be enclosed in quotes, since the alternate text is usually a string with spaces.
border=0 by default, if you place a link around an image, it will have a blue border. Use this to eliminate that if you want
A full image tag might look like this: <img src=picture.jpg alt="Nice Picture!">
Horizontal Rule
<hr> Another tag without any closing portion, draws a nice horizontal line across the page.
Other
There are tons more HTML tags. Simply google "HTML Tags" and you will find an tons of tags.
5. General HTML Rules
Typically all of your text should be imbedded in some kind of tag, either a paragraph, header or list item.
Images can also be imbedded in a paragraph, header or list (though they tend to make lists look funny).
Links can be imbedded as part of a paragraph or header, but not vice versa. There is a bit of a hierarchy to tags, which you will get a feeling for over time.
Paragraphs cannot be inside headers, and vice versa. For this kind of thing, common sense usually prevails. Paragraphs and headers are both different categories of text, so a given piece of text can only be one or the other, but not both.
6. Some Extra Style Tags
<b></b> Make your text Bold
<b></b> Make your text Italic
<strong></strong> Give your text Strong Emphasis (usually the same as bold, but browser dependant)
<tt></tt> Display text in a monospaced font (like I do a lot here), for things like code display
<code></code> Similar to the monospaced tool (like bold vs. strong) but specifically for source code
<br> Have you noticed yet that a carriage return is ignored by the web browser? Use this to force a line break to be displayed
Have you also noticed that when you put four spaces (or more) in a row, a web browser will pretend it's only one? Use a non-breaking space to tell the browsers that you want them to display each and every space (useful for indenting things).
7. Some tags for the <head></head> Section
<title></title> Put the title for your page here, this is what will be displayed as the browser window title
8. Miscellaneous Tips
Remember: Only GIF's and JPG's and PNG's! BMP, TIFF, and other formats do not work with the web. It's also a good idea to think about how big your pictures are, both in terms of resolution and filesize. Remember other people might have a smaller screen, and might have a slower connection than you do.
Unix is case sensitive, and most of the internet is powered by unix machines. That means that picture.jpg and picture.JPG are NOT the same thing. This is a big problem when you name something with capital letters, but then link to it with small letters.
Make your file names simple, use only alphanumeric characters (letters and numbers). Don't include spaces, quotes, brackets, question marks, or the little prime indicators. These all cause problems on a Unix system for reasons I won't get into here. Keep it simple.
That concludes our lesson one of the HTML / CSS Basics class.
If anyone has any questions feel free to message me or reply.
Remember I will be releasing a new lesson every week.
Lets build something great!
,
Adam Whitten.
I will be releasing lessons every week, and working our way to some really advanced stuff.
So lets get right into it and learn something!
1. What is HTML?
First of all, HTML stands for "HyperText Markup Language."
But what does that really mean? Well, for one thing it means that HTML is not a computer language in the same sense that C, Perl, Fortran or Java is a computer language. HTML is a set of "Tags" that are places around text or images in a page, to make the text or image do specific things. It's more like a publishing language, or a set of rules for page layout.
Another thing to note about HTML is that even though it has developed into quite a rich and full-featured markup language (at least compared to what it was in 1995 when I started learning it) you still don't really need to know very many "Tags" at all to create useful and pretty websites.
Finally, and this is extremely important, an HTML file must be a plain text file only. This means that you can generate an HTML file from virtually any text editor, including Microsoft Word. But it also means that if you save it as a word document, instead of Plain Text Format, it's not going to work. This allows HTML to be portable and readable by any modern web browser on any computer. (Note the use of the word modern, very old browsers won't be able to understand a lot of the newer webpages).
2. Okay, so what is a "Tag"?
A Tag simply refers to the actual HTML code that you write. You "Markup" the text with "Tags" to make it appear how you want.
In operational terms, a Tag is anything that appears between < and >. For example, to define a piece of text in a paragraph, you would enclose it within the paragraph tag
<p>Text goes here!</p>.
As you can see, the paragraph tag actually consists of two tags, one to start the markup section, and one to end it. As a general rule, most tags require both a starting and ending tag to function properly (there are of course exceptions, and we will cover some of those). The ending tag is typically the same as the starting, but preceeded by a backslash.
Another thing to know about tags, is that many of them have additional, optional attributes that will allow you to specify things about style or formatting. For example, if you wanted your paragraph of text centered on the screen, you would use the "align" attribute for your paragraph tag. Note that these attributes are only present in the starting tag, they are not mirrored in the ending tag of the markup.
<p align=center>Text goes here!</p>.
3. How is the actual HTML code structured on a page
Well the easiest way to see this (and actually one of the best ways to learn HTML), is just to use the "View Page Source" function that is implemented into most modern browsers. This shows you the raw HTML code from the page.
First of all, the entire HTML page is enclosed in <html></html>. This is probably not necessary, but it is proper.
Within that, there are two main sections. <head></head> and <body></body>
<head> is usually reserved for indexing information about the page, or things that are not meant to be seen by the casual web browser. It also includes the title of your page which goes in the top of the window, and things like javascript code.
<body> contains the main portion of the HTML, and everything you want the surfer to see.
Use <body bgcolor=FFFFFF> for a white background. FFFFFF is the hex code for white, and can be changed to yield any background colour that you want.
Use <body background=coolpicture.jpg> to specify a picture as a background for your page. coolpicture.jpg should specify the path name of the actual image file on the server, relative to that HTML file (though be careful, it's hard to read over a lot of background pictures).
One more thing, all HTML files should end with the extension ".html" PC users might have to use ".htm", and that's okay too.
So here is the basic structure we need up with:
[HTML]<html> <head> <title>Page title</title> </head> <body> </body></html>[/HTML]
4. How about some more tag examples?
Paragraph
<p>Text goes here!</p>
Attributes: align=center|left|right
Heading
There are six levels of heading, with 1 being the most important and 6 being the least. Use this as section headings, it will be larger and bolder than a standard paragraph.
<h1>Text</h1>, <h2>Text</h2> ... <h6>Text</h6>
Attributes: align=center|left|right
Lists
There are two kinds of lists:
Ordered Lists <ol></ol>
Unordered Lists <ul></ul>
The difference is that an ordered list uses numbers, but an unordered list uses bullets
The list is the first tag that now requires another tag nested within, and that is the List Element "<li>"
Use <li> to start off each element in the list. This is a tag that typically does not require a closing tag, as closing is implied by either a new <li> element, or a list closing element </ol> or </ul>
It is also possible to nest one list within another. If you nest an unordered list within an ordered one, you would have a numbered heading, followed by a series of bullets. Nested lists have increased indentation, and often a different bullet style (browser dependant)
Links
The link is one of the more important tags to know, but also one of the stranger. Unlike the paragraph tag, the link tag REQUIRES an attribute to work properly. The attribute, in this case, is the web address that you want to link to.
<a></a>
Attribute: href (stands for Hypertext REFerence)
So a typical link looks like this: <a href="http://www.stanford.edu/">Stanford University</a>
There are two kinds of links; absolute and relative. Absolute links are like the one above, and include the full URL (http etc). Relative links specify only the path of the new page relative to the current page. Thus, if you wanted to link to a page in the same directory, you would use <a href=otherpage.html>Nice Link!</a>. This makes for a lot less typing for you, and also makes it easy to transfer the entire site to another server without changing any of the code.
Finally, you can also use a link to send an email to someone via your brower. Use this format <a href="mailto:joe@domain.com"> where "joe@domain.com" is clearly the email address of the intended recepient.
Images
What webpage would be complete without some pretty pictures? (besides this one of course:-)
The image tag is strange because it both requires an attribute to function (you specify the image file), and it has no ending tag. It has no ending tag because it is not actually used to markup text, so it does not surround anything.
<img>
Attributes: src=prettypic.jpg this specifies the location of the image on the server. Note that only gif, jpg and png files can be viewed by most browsers. Things like tiff will sometimes work, but they are typically so large they should be avoided anyways.
alt="This is a pretty picture" this specifies text that will be displayed instead of the image, in case the image fails to load, or in case someone chooses not to load the image (often the case when surfing on a really slow connection). This information is also used when visualy impaired people are surfing the web, so it's nice to include. Notice that it needs to be enclosed in quotes, since the alternate text is usually a string with spaces.
border=0 by default, if you place a link around an image, it will have a blue border. Use this to eliminate that if you want
A full image tag might look like this: <img src=picture.jpg alt="Nice Picture!">
Horizontal Rule
<hr> Another tag without any closing portion, draws a nice horizontal line across the page.
Other
There are tons more HTML tags. Simply google "HTML Tags" and you will find an tons of tags.
5. General HTML Rules
Typically all of your text should be imbedded in some kind of tag, either a paragraph, header or list item.
Images can also be imbedded in a paragraph, header or list (though they tend to make lists look funny).
Links can be imbedded as part of a paragraph or header, but not vice versa. There is a bit of a hierarchy to tags, which you will get a feeling for over time.
Paragraphs cannot be inside headers, and vice versa. For this kind of thing, common sense usually prevails. Paragraphs and headers are both different categories of text, so a given piece of text can only be one or the other, but not both.
6. Some Extra Style Tags
<b></b> Make your text Bold
<b></b> Make your text Italic
<strong></strong> Give your text Strong Emphasis (usually the same as bold, but browser dependant)
<tt></tt> Display text in a monospaced font (like I do a lot here), for things like code display
<code></code> Similar to the monospaced tool (like bold vs. strong) but specifically for source code
<br> Have you noticed yet that a carriage return is ignored by the web browser? Use this to force a line break to be displayed
Have you also noticed that when you put four spaces (or more) in a row, a web browser will pretend it's only one? Use a non-breaking space to tell the browsers that you want them to display each and every space (useful for indenting things).
7. Some tags for the <head></head> Section
<title></title> Put the title for your page here, this is what will be displayed as the browser window title
8. Miscellaneous Tips
Remember: Only GIF's and JPG's and PNG's! BMP, TIFF, and other formats do not work with the web. It's also a good idea to think about how big your pictures are, both in terms of resolution and filesize. Remember other people might have a smaller screen, and might have a slower connection than you do.
Unix is case sensitive, and most of the internet is powered by unix machines. That means that picture.jpg and picture.JPG are NOT the same thing. This is a big problem when you name something with capital letters, but then link to it with small letters.
Make your file names simple, use only alphanumeric characters (letters and numbers). Don't include spaces, quotes, brackets, question marks, or the little prime indicators. These all cause problems on a Unix system for reasons I won't get into here. Keep it simple.
That concludes our lesson one of the HTML / CSS Basics class.
If anyone has any questions feel free to message me or reply.
Remember I will be releasing a new lesson every week.
Lets build something great!
,
Adam Whitten.
Originally Posted by Mc565
