|
Lesson 2: Basic CSS and more HTML Lesson 3: Advanced HTML Lesson 4: Loose ends Lesson 1 The first thing you have to do to start learning HTML is open Notepad. It is probably in Start - Programs - Accessories but if you can't find it, in Internet Explorer go to View - Source and it will open Notepad. Just go to File - New to get a blank page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">This line tells your browser that it is reading HTML, version 4.01, and that you can use tags from older versions of HTML ("transitional"). The other things that could be here are XHTML, Strict HTML (no old tags), etc. Next, you start writing HTML. This is easy, put the "tag" for HTML: <html>A tag starts with < and ends with >. Most tags opened must be closed. An end tag starts with </ so at the end of your document you need to put: </html>Make sense? A common misconception is that HTML tags must be in all capitals. It actually doesn't really matter, and is easier to write in lowercase. ALSO, the writers of HTML (W3C) actually recommend lower case tags. An HTML document is just like a paper - it has a header, where you put important information that is not actually in the paper, and a body, where your paper gets written. The head of an HTML document tells it such things as Javascripts, CSS that applies to the whole page, the title of your page, what language your page is in, etc. But when your page shows up, none of these things show up - just the things in the body. So start the head tag: <head>The only things you need in your header right now are your meta tag and your title tag. The meta tag tells the browser what language/alphabet to use. I usually tell it to use iso-8859-1 which means English letters as well as letters like ã, etc. Meta tags have no end tag. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">Your title is what appears in the line at the top of the window. For example, this page's title is "HTML/CSS Tutorial."  If you don't put a title, the URL (ie, http://you.bunnie.net/page.htm) will appear instead. <title>HTML/CSS Tutorial</title>Don't forget to end your head! </head>Now we move on to the body. Anything you put in your body, people will see. In addition to opening the body tag, you can put your background color in the body tag using the bgcolor "atribute." If you don't put a background color, it will default to white. There are a few ways to specify colors. 1, by using a name (black, white, etc). 2, by using a hexidecimal color code. A list of these can easily be found by googling for "html color codes." I personally really like this site because it lets you test try colors on backgrounds. Both of these are the same thing: <body bgcolor=black> OR <body bgcolor="#000000">When using attributes, if what it is equal to is just letters and numbers with no spaces, no quotes are needed. But if you have spaces, # signs, periods, commas, etc, then it needs to be in quotes. Another useful tag to know is the center tag. It simply centers everything "inside" it. By that I mean, everything between the open tag and the close tag. <center>This text is centered.</center>Let's type some text. If you have a dark background and try to type some text, it will not show up! So now I will show you how to change the font color, face (Tahoma, Arial, etc), and size. Just put your font "inside" a font tag. The color attribute changes the color, just like bgcolor. The face attribute changes the face. The size attribute changes the size. <font color=white face=Tahoma size=3>However, size goes from a scale of 1-7 I think, so it is not like Word where you could say 12 and it would be 12 pixels high, regular sized font, and 48 would be huge font. There are benefits and downsizes. The benefit is that people can change how big it is by going to view - text size - (large, medium, etc) in Internet Explorer at least, which is GOOD for people who do not see well.  If you want to specify it like it Word, then use the style attribute - which ALWAYS needs quotes. <font style="font-size: 12px;">If you try typing some text and press enter and try to view it, you will see that it does not make an enter in HTML! You need to use the break tag. It does not have an end tag. The good side of this is that you can put enters anywhere in your code and they will not show up necessarily, which makes it easier to read when editing. The bad part is that you have to put an HTML break every time you would normally just press enter. Breaks should always go "inside" a font tag, if there is one. <br>Finally, comments are good. If you want to remind yourself how to do something, or you want to change something and do not want to lose the HTML, or you want to leave a disclaimer in your code, use comments. They do not show up when you save the page. You can even have multiple lines inside one comment! <!-- anything can go here it can even be two lines! -->I would like to make a quick note about HTML. If you are editing your page, and nothing happens, then you might want to refresh the page, save the page and then refresh, or save, FTP, and then refresh. Really, you WILL make this mistake - forgetting to save it or forgetting to refresh. It will not change on its own!! When you save your page with Notepad, make sure to put quotes around the name. Otherwise, it will save it as "page.html.txt" which is no good! You can save it as .htm or .html - .htm is simply one less letter!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Notta Bunnie Website!!!!!!!!!</title> </head> <body bgcolor=navy> <center> <font color=white style="font-size: 50px;">YAY TEXT!!!<br><br></font> </center> <font color=pink face="Comic Sans MS" size=3>yayayayaya<br></font> </body> </html>Lesson 2 Imagine that I wanted to change the color of the text on this page from blue-ish to pink. How long would it take me? Actually, it would not take me very long at all, because I use CSS. CSS helps make designing pages easier! There are two ways I will teach you to use CSS - by including it in the head, and by including it as an attribute. CSS that is in the head can be used for things that affect the entire document. It can be for every font tag, or just for some. However, not all browsers support CSS! It is sad, but true. So, we "trick" old browsers by putting all of the CSS in comments. New browsers know to ignore the comments, old browsers ignore everything inside the comments. <head> <style type="text/css"> <!-- --> </style>So, how do I change all the font colors quickly? Assuming I enclose all of the text in font tags (one tag or many tags, doesn't matter), then I can just change the color of ANYTHING inside font tags. Just put the name of the html tag (ie, font) and then braces, and inside put the attributes. Some CSS attributes are the same as HTML (ie, color) and some are different (ie, background-color for CSS and bgcolor for HTML). Here is an example of adding a line to the head (you can have as many CSS lines inside the comments as you want, and as many things inside the {}s as you want): <style type="text/css">
<!--
font {color: pink;}
-->
</style>
How easy is that? Another thing you can do in the head is change the scrollbar
colors! This is not widely supported outside of Internet Explorer but I think
it is fun. You can specify a base color, or specify each color by hand (see chart
below).
body {
scrollbar-base-color: pink;
scrollbar-track-color: navy;
}
 Back to font tags. Sometimes it does not make sense to change the color for all of the text, though. Maybe I just want to change the background color of one of the code segments. In that case, I might want to use CSS as an attribute, by using the style attribute. We actually did this before, with font size. While we're at it, we can change the size of the font, too. <font style="font-size: 12px; background-color: orange;">The benefits of using the style attribute are that it is easy, and you know exactly what is happening to the specific element without having to go look at the head, and you use it for things CSS can do that HTML cannot (like background colors for some things, like font tags). The bad side is that it is only good once, like when you specify color inside a font tag. Suppose I wanted every other code segment to have a background of orange. Now, it is time to use classes. These go in the head, but only show up when used as an attribute. In the head style section, add a new line. You put a period before what you want to call the specific style - it can be anything! .orangebg {background-color: orange;}
Then, in the element, use the class attribute.
<font class=orangebg>I will take a break from CSS to teach about images and links, and then I will teach one more cool thing about CSS. First, images. The 2 important things to remember about images are 1: always give credit to whoever made the image by putting a link on your site to their site, and 2: always save the image to your computer and then upload it to your web site. Otherwise, it is called BANDWIDTH STEALING, which is bad. The only time you should link to an image not on your site is if, like me, you have TWO sites. If I wanted to use the bunnie.net logo on hazelorb.com, I would not upload it TWICE, I would just link to it - because it is my image so it is okay. The image tag has two required attributes: The location or source (src) of the image, and a caption, or alternate text (alt). Here is the code for an image: <img src="image.jpg" alt="This shows up when you move your mouse over the image">In addition, you can also specify the width, height, and border. Width and height are specified in pixels. You can just put no text inside the alt if you want nothing to show up on hover. <img src="image.jpg" alt="" width=200 height=100 border=1>HTML borders are pretty ugly. I usually use CSS borders. On most of my images, I usually don't want a border. But maybe for a few images I do want a border. This is where I will teach you the last CSS trick (or, rather, emphasize it). Here is the code for making the images have no border (in the head style section), and below it the line for my own CSS "class" saying for those images to have a dashed border like the one around the text on this page: img {border: 0px;}
.borderimgs {border: 1px dashed cyan;}
Border in CSS needs 3 things (unless you plan on having no border):
the width of the border, in pixels; whether it is
solid (a straight line), dashed, outset or inset (3D looking like it is coming
out or going in); and finally the color of the border.
You can also do border-top for just the top, etc.So if I tell all images to have no border, how can I make some have a border? As long as I specify a class, then the thing specified last is what HTML interprets. Here is an example: <img src="image.jpg" alt="" class=borderimgs style="border: 2px solid pink;">This image would by default have no border. Then HTML would see it is in the borderimgs class, and it would give it a 1px dashed cyan border. Then since I specified the style last, HTML would decide this is really the border I want and the image would have a 2px solid pink border when the page loaded. If I switched the style and the class, then the image would have the border specified in the class because it is the last attribute. This is useful if you, for example, have a class with Arial white font with a navy background, and you want to specify for one that it has a black background, but still the same font. In the head: .normalfont {font-family: Arial; color: white; background-color: navy;}
In the element:
<font class=normalfont style="background-color: black;">So, now, on to links. A link is defined with the anchor tag, a. This tag is also used for links inside the same page (like, when you click on Tutorial 2 and it brings you to the start of this tutorial). The attribute for links is href. <a href="http://www.bunnie.net">Link text here</a>This would show up as Link text here. Links have two optional attributes you might use. The first is the target. This tells the browser to open the link in a new window or in a frame or an iframe, etc. The other is title, which is the same as alt was for images. <a href="http://www.bunnie.net" target="_blank" title="Click here!">Link text here</a>This link would open in a new window, and hover Click here! If you wanted to open in a window separate than the one your site is in, but open ALL new links in that same window, you could use target=new. Another thing you might want to do is use an image instead of text for a link! Just put the code for the image where the Link text here is. Both title and alt will not work for this. Obviously, since alt comes second, alt is the text that would be shown. <a href="http://www.bunnie.net"><img src="image.jpg" alt=""></a>Another cool attribute for images is the align attribute. This will let text "wrap" to the side of an image. You can "clear" the wrap with a special break. I use this in my blog a lot. <img src="image.jpg" alt="" align=left> This text will be next to image.jpg, which is on the right of the text. The text will keep being next to the image until I tell it to stop like this. <br clear=left>A sidenote, when I showed you in the first tutorial to go to view source, a followup question is, can everyone view my html? The answer is yes. However, it is NOT NICE to steal html - aka copy people's code without giving them credit. If you use someone else's HTML, make sure to put a link on your site to their site thanking them, and also to ask them first if possible through IM or email. A sample page of what you could code right now: View this page, view the source to see the code. Lesson 3 Most people do not use just plain font tags to display data. They organize the text into paragraphs, or another "divider": div. Just put font, images, text, etc. "inside" these tags and have formatting apply to the entire tag! <div> OR <p>Paragraphs automatically put lines in between sections, while div's don't. I also use div's for "absolute positioning." In HTML, as you probably assumed, elements show up on the page in the order they are entered. However, if you want something to show up in a specific place on the screen, you can use CSS to tell the browser where to put an object. You can tell it to start from the top left or top right. Bottom left/right only applies to the initial view of the page so I never use it. Top right also is not common because then the scrollbar displaces things and it usually is best just to use top left. <div style="position: absolute; top: 10px; left: 200px;">Absolute positioning can be used with anything - images, divs, or tables. If you give your div an absolute width and height, you can even make it scroll! <div style="width: 400px; height: 400px; scroll: overflow;">Now we will learn about tables. Tables are how we make, well, tables. They help you put things side by side and otherwise organize data. You enter data by row, not by column. Each cell is defined by a table data tag. Here is a simple table: <table> <tr> <td> Some text </td> </tr> </table>Table has some good attributes - bgcolor (just like body), border (just like img), and two new ones - cellspacing and cellpadding. These give space between the cells of a table, spacing between cells and padding around each cell. They are defined in pixels. <table bgcolor=blue border=1 cellspacing=2 cellpadding=5>Another useful table element is the table header tag. They automatically center text and make it bold. But, you can customize it easily with CSS. If you have a header at the top of each column, you can specify the formatting in the head style: th {font-weight: bold; background-color: yellow;}
And then be able to have column headers that are easily customized:
<table> <tr> <th> Column 1 </th> <th> Column 2 </th> </tr> <tr> <td> Data cell </td> <td> More data </td> </tr> </table>With this you can see it is pretty easy to make simple tables without complications. But suppose one of your headers (or any cell, for that matter) needs to span two columns? Or two rows? These attributes can be used for th and td tags. Some other things to specify with tables are how you want the text aligned. You can specify both the horizontal alignment (left, right, center) and the vertical alignment (top, center, bottom). Valign is for vertical align. Horizontal alignment is either align (one less letter, and more widely supported) or halign. <table border=1> <tr> <th colspan=2> Header 1 </th> <th> Header 2 </th> </tr> <tr> <td> Column 1 </td> <td> Column 2 </td> <td align=center> Column 3 </td> </tr> <tr> <td> Data 1 </td> <td> Data 2 </td> <td rowspan=2 valign=bottom>> Data that spans 2 rows </td> </tr> <tr> <td> Data 3 </td> <td> Data 4 </td> </tr> </table>Here is what that table looks like (plus some CSS I added):
Another useful thing to know in HTML is special character codes. How do I make the <'s show up without just making a tag?? HTML has special codes built in for this! A big list can be found here. Here are some of my favorites: & - & < - < > - > - a space. HTML only puts up to 1 space unless you use this. © - © <font face=Symbol>©</font> or ♥ - ♥A sample page of what you could code right now: View this page, view the source to see the code. To put your site online, you use FTP. I keep a copy of the program on Bunnie.net at all times. Ask me for where it is located. Once you download the program, use the Log-in Portal to see what to enter into the fields when the program starts up. Then, it will connect to Bunnie.net and you will see a screen like this: 
The left screen is files on your computer. The right screen is files on Bunnie.net on your website. Navigate through the folders on your computer by clicking the up arrow at the top of the left screen. Double click a file to send it over. Highlight multiple files and press the arrow in the middle of the screen to send them all over to Bunnie.net. Highlight a file on Bunnie.net and download it by pressing the arrow in the middle that goes the other direction (from Bunnie.net to your computer). Simple. =) Lesson 4 Some loose ends. Changing the colors of links is always fun. You can do it the boring way with HTML, or you can trust me that it is boring and do it the fun way with CSS. With CSS you can specify what happens when the person moves the mouse over the link (hovers): a {color: red;}
a:hover {color: white;}
a:visited {color: orange;}
a:visited:hover { color: yellow;}
You can also specify no-underline this way.
a {text-decoration: none;}
Next, some more fun with HTML. Lists are pretty easy. You can have ordered
lists (like an outline, or 1, 2, 3...) or unordered lists (bullets) -
shortened to ol and ul. Each line in the list is a list element (li).
You can specify whether you want it to be numbers, letters, roman numerals, etc
by the type attribute (setting it equal to the first in the sequence). You can
also tell the list where to start. It automatically breaks.
<ol type=a start=4> <li>First item</li> <li>2nd item</li> <li>3rd item</li> </ol>This lists with lowercase letters starting at the 4th letter. Spiffy, eh? Next is the pre tag. This is for when you really do not want to put in breaks and just want to leave enters and have it show up as you typed it. I use these for showing the code segments in this tutorial! <pre> This is a line This is on a different line with no break tag Etc. </pre>I-frames are useful when you want to load a little page on your layout that the user can change without having to reload the whole page. Like CSS, I-frames are not supported by some browsers so it is important to tell someone with an old browser that they are missing out! <iframe src="page.htm" name=whatever>GET A NEW BROWSER.</iframe>The text "inside" the iframe tags is what is shown if the iframe fails to load, like in an old browser. You could also put a link to the page that is supposed to load in this section. Or be mean, like me. Lol. Why do we need a name attribute for the iframe? Well, if you want people to be able to click a link on your page and have it load in the iframe, then you have to have a name! Remember when I mentioned link targets? Here is how you would make a link load in that iframe: <a href="page2.htm" target=whatever>Load this in the iframe</a>I taught about background colors, but what about background images? Well, for the main page, it really depends on what you want the background image to do whether you do it the HTML way or CSS way. The HTML way is good for tiled backgrounds - those that repeat. It goes in the body tag, where the bgcolor attribute went. <body background="image.jpg">You can even make it stay in place when you scroll. <body background="image.jpg" bgproperties=fixed>The other way to do it is with CSS. With CSS, you can make it only repeat up and down (repeat-y), or left to right (repeat-x), or not at all (no-repeat). You can center the background. I generally do it the HTML way unless I need to do something special with it that HTML cannot do. body { background-image: url('image.jpg');
background-repeat: no-repeat;
background-position: top center;
background-attachment: fixed; }
A sample page of what you could code right now:
View this page, view the source to see the code.I also want to give a brief introduction to PHP. So, what happens when your site has 20 pages and you want to change how the site looks? You have to edit all 20 of your pages. What a pain. PHP is great because you can do a lot of stuff with it. You can make it include special header files and footer files, like CSS does in the head of the HTML document, so that you only have to change the HTML once. You can make it get a list of all of the images you have and make a gallery for them. It's great. Suppose you have a list of links to all the other pages on your site. Every time you make a new page, you have to update all the old ones. With PHP, you could make that list a separate file, and just include it in each document. Make a page called something.php and put the normal HTML in. Now, where that list would go, put this: (html is here)
<?php
include('links.inc');
?>
(more html)
links.inc would just be the HTML for the list of links. You do not need a
doctype, or header, since it is just being included in other pages.
It might look something like this:
<a href="link1.php">Link 1</a><br> <a href="link2.php">Link 2</a><br> etcIf you got more advanced with PHP, you could make IT generate your list of links, and then all you would have to do would be upload the new page! This is what I do with my site generally. Another thing you can do is put all of your HTML (header, footer) in .inc files. Then you only update the header and footer files and it changes all of your pages for you! <?php
include('header.inc');
>
(your html for that page)
<?php
include('footer.inc');
?>
You could also put the content for each page in its own .inc file.
<?php
include('header.inc');
include('page.inc');
include('footer.inc');
?>
Going even further, you can make a PHP page which loads all the pages with
if-else statements.
<?php
include('header.inc');
if ($page == 'page2') {
include('page2.inc');
}
else {
include('main.inc');
}
include('footer.inc');
?>
This would show the main page by default, but if someone typed in (or you linked
to) yourpage.php?page=page2 then the other page's content would be shown.
If you did it this way, you would not even need header and footer files because
your whole site would be viewed through yourpage.php anyways.What I do is tell PHP to see if (whatever).inc exists and if it does include it, otherwise print an error message or include the main page. (html here)
<?php
if ($page) {
if (is_file("$page.inc")) {
include("$page.inc");
}
else {
print "That page does not exist.";
}
}
else {
include('main.inc');
}
?>
(more html)
What this page does is if it is called as page.php, prints the main text.
If it is called as page.php?page=something, it checks if something.inc
exists. If so, include it. Otherwise, print an error message. Pretty
sweet and low maintenance, huh? More questions with PHP I would be glad to
answer.Also, there are some HTML things I did not include in this tutorial. Image maps, frames, javascripts/forms, etc. If you want to learn any of these let me know. I do not use them particularly often. Now that you are done the tutorial, study up! The quiz is 10 multiple choice questions. 8 are covered in lessons 1 and 2. The 2 other questions deal with tables. Nothing from lesson 4 is covered explicitly on the quiz. When you think you are ready, IM me and I will give you the quiz live. You can take it as many times as you need. |
|||||||||||||||
