XPDC CINTA

Jumat, 11 Oktober 2013

ayahsaba76.blogspot.com


	So, you want to make a Web Page! Lesson 26 - Last one!

Practice Lessons...Now that you've completed this section, you should really get some practice putting some of this stuff to work.

Here are some excellent materials that you may want to have a look at:

Table Tutor, Form Tutor and Frames Tutor: When you're past the basics and are ready to add a few high octane components to your web page, these three tutorials will take you step by step through the tags.
CSS Tutor: A basic primer on Cascading Style Sheets. If you're new to CSS, this may be a good place to start.
HTML 4.0 Reference: An excellent reference covering all of the tags and attributes in the HTML 4.0 specification. A very complete and useful guide.
irt.org: Internet Related Technologies - An excellent site full of FAQs and articles on a variety of web authoring topics.
World Wide Web Consortium: The World Wide Web Consortium (W3C) both develops and promotes standard technologies for the Web. Here you find various specifications for HTML, CSS, etc.
If you need stuff for your pages...: Like backgrounds, bullets, images, sounds, JavaScript or whatever, come by our Web Page Resources section. Help yourself to armloads of stuff!
Got a question?: "How do I fit a thigamajig around a whatchamacallit and put in one of those doohickeys?" Almost without exception your question has already been asked... and already been answered. Look here for FAQs (Frequently Asked Questions) from this tutorial, and links to other excellent HTML FAQ lists.

Got any suggestions? Let's hear 'em.

If you would like to add a link to HTMLisEasy.com, you are welcome to. You may link as you wish or use of these groovy text links. Just copy and paste the desired code into your page...

HTMLisEasy.com

<a href="http://www.htmliseasy.com"
style="text-decoration:none;"><span style="font:bold 11px arial;"><span
style="color:#40A840;">HTML</span><span style="color:#748874;">is</span><span
style="color:#40A840;">Easy</span><span style="color:#125598;">.com</span></span></a>

HTMLisEasy.com

<a href="http://www.htmliseasy.com"
style="text-decoration:none;"><span style="font:bold 14px arial;"><span
style="color:#40A840;">HTML</span><span style="color:#748874;">is</span><span
style="color:#40A840;">Easy</span><span style="color:#125598;">.com</span></span></a>

HTMLisEasy.com

<a href="http://www.htmliseasy.com"
style="text-decoration:none;"><span style="font:bold 18px arial;"><span
style="color:#40A840;">HTML</span><span style="color:#748874;">is</span><span
style="color:#40A840;">Easy</span><span style="color:#125598;">.com</span></span></a>

Or, the following code will just add the colors and bold, so the font matches your page font...

HTMLisEasy.com

<a href="http://www.htmliseasy.com"
style="text-decoration:none;"><b><span
style="color:#40A840;">HTML</span><span style="color:#748874;">is</span><span
style="color:#40A840;">Easy</span><span style="color:#125598;">.com</span></b></a>

ayahsaba76.blogspot.com

So, you want to make a Web Page!
Lesson 25

Well, that about does it! You now know all the tags you'll need to create a basic web page! Aren't there more tags? Oh yeah. Lots more. But rest assured you've got most of the basic weaponry you'll need. After you tinker with these main tags awhile, you may want to look at some of my other slightly more advanced tutorials: Table Tutor, Form Tutor and Frames Tutor. They will give you a few more really neat things to have in your bag of web publishing tricks. Beyond that, there are quite a few redundant tags, that is tags that in theory have a specialized use, but in practice, duplicate more common tags presented here. There are a few outdated tags, and a few that have such a limited use, it wasn't even worth it to go over them.

As I noted earlier, there is a push to separate structural markup (paragraphs, lists, tables etc) from presentational markup (colors, fonts etc.). This can be a very powerful thing from a web designer's point of view and can also go a long way towards making your content even more accessible as people begin to access the internet in ever expanding ways.

An important component of this separation is CSS (Cascading Style Sheets). And while a knowledge of CSS is not at all necessary for making web pages, it is a related area where you definitely might wish to further your studies. Eventually, using both your HTML skills and your knowledge of CSS, you may wish dig into the strict version of HTML 4.

One of the neatest things you can do with a web page is to make it DO stuff. You can investigate the wonderful world of JavaScript and learn to write mini programs that you can insert in your pages. It's a little bit more complex than HTML, but I've written JavaScript Tutor, and that will give you a solid start on some of the basics. In addition there are dozens of "copy-n-paste" javascript sites that offer code for the taking.

I mentioned at the beginning of this tutorial some of my thoughts on HTML editors. In my opinion the best editors to use are not the big clunky wizard types. You know, the ones that say you don't need to know a lick of HTML to author a page. The problem is, a large number of the pages I see that have been put together with these programs look as if the author didn't know a lick of HTML. Not only that, if a problem arises, a person with a basic knowledge of HTML is going to solve that problem a heck of a lot faster than a person who has been leaning on one of those page maulers.

Most experienced authors use some sort of text-based editors. What these editors do is pop in a set of tags for you with a simple click. They make it so you don't have to manually type in color codes, left, right, center or whatever. You have absolute control over your page design. I once heard the phrase "text editor on steroids" to describe one. That's about what they are. What do I use? I use NoteTab Pro, not only for web authoring, but for almost EVERYTHING than has anything to do with text of any sort. Its "Clipbook" makes it truly an amazing application.

Anyhow, once you have made your pages you will need to upload them to a server. The server is a computer that is running a server program that doles out documents to whoever requests them. For a little bit of guidance on putting your pages on the Web, have a look at Uploading Your Pages.

And before I go, I must say something about web page style and content. Better yet, I think I'll defer to Jeffrey Glover's Top 10 ways to tell if you have a sucky homepage.

Good luck and happy HTML'ing!

There is still one more lesson that has some further recommended reading, links and info...

ayahsaba76.blogspot.com

So, you want to make a Web Page!
Lesson 24

If you've ever looked at a busy city street... cars flying this way and that... people walking around and crossing those streets... it's almost a wonder that they all don't just crash into each other. The reason they don't (or don't very often) is because of standards... otherwise known as traffic laws.

Well, HTML is much the same way. Over the years, standards have developed that, while not "laws", are guidelines for HTML structure and well formed web pages so that things work as expected. The current HTML standard (or specification) is HTML 4.01. There are three variations of this standard...

HTML 4.01 Transitional
HTML 4.01 Frameset
HTML 4.01 Strict

The flavor of HTML that we have been learning here is HTML 4.01 Transitional. It's a less strict HTML specification that allows more traditional markup. Not to mention it's a whole lot easier for beginners to learn.

HTML 4.01 Frameset is the specification that deals with framed pages. We'll get into that in Frames Tutor.

HTML 4.01 Strict seeks to completely separate presentational markup (colors, fonts, borders, alignment, etc.) from structural markup (paragraphs, lists, line breaks, tables, etc). This is accomplished using somewhat limited and rigid HTML markup for the document structure, and CSS (Cascading Style Sheets) for presentational items.

Ok Joe, that's all well and good, but what does that have to do with the HTML I'm learning today?

Good question. It's a perfect introduction to learning about Document Type Declarations and Validation.

Here's a simple HTML document...

<html>
<head>
<title>My big ole bad page!</title>
</head>
<body>
Hello Joe!
</body>
</html>

Now add a DocType declaration at the very top...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>My big ole bad page!</title>
</head>
<body>
Hello Joe!
</body>
</html>

This is the Document Type declaration for HTML 4.01 Transitional. It has two purposes.

One, to tell web browsers or other "user agents" which specification the document is using. (That said, for nearly all normal web browsing, browsers can easily do without it and process your HTML in a perfectly proper manner.)

And two, more importantly, it helps with validation.

A HTML validator is nothing more than a software program that scans your HTML markup looking for errors. In order to work properly, you must first tell the validator which specification you wish to conform to. In our document above, we are telling the validator to check our document against the HTML 4.01 Transitional specification.

The next thing you need is a validator. The most popular validator can be found at web site of the World Wide Web Consortium... the folks that write the specifications.

To validate your HTML, first open validator.w3.org in another browser window. You'll find three options for input. Find the section labeled "Validate by Direct Input". Now copy the HTML code above into that box and click the Check button. The result should be valid HTML 4.01 Transitional.

Now, let's play a little. We'll deliberately create an error in the HTML document. We'll wrap "Hello Joe!" in two closing bold tags...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>My big ole bad page!</title>
</head>
<body>
</b>Hello Joe!</b>
</body>
</html>

Now copy and paste this altered HTML doc into the validator and check it. You'll note it tells us that there are errors. You can see how such validation can be quite useful.

I suppose I should be very clear here... a validator ONLY checks for structurally correct HTML and proper attributes against a particular specification. It doesn't check for broken links, it doesn't assure that your page will look good at all resolutions, it doesn't make sure your images can be found and it doesn't make sure that you don't use dark blue text on a black background. Think of a validator as an inspector that certifies your automobile has 4 wheels and doors that open, but has no control over how you drive...

ayahsaba76.blogspot.com

So, you want to make a Web Page!
Lesson 23

Remember when I said that the browser doesn't understand formatting, it just displays text in a steady stream? Kind of like this...

<body>
             ///\\___
             (@ @)
  +----oOO----(_)-----------+
  |      BARRY GOLDWATER    |
  |           for           |
  |        President        |
  +-----------------oOO-----+
            |__|__|  
             || ||
            ooO Ooo
</body>

///\\___ (@ @) +----oOO----(_)-----------+ | BARRY GOLDWATER | | for | | President | +-----------------oOO-----+ |__|__| || || ooO Ooo

Well, with the <pre> (preformat) tag, we can put a stop to that and have things displayed the way we type them.

<body>
<pre>
             ///\\___
             (@ @)
  +----oOO----(_)-----------+
  |      BARRY GOLDWATER    |
  |           for           |
  |        President        |
  +-----------------oOO-----+
            |__|__|  
             || ||
            ooO Ooo
</pre>
</body>

             ///\\___
             (@ @)
  +----oOO----(_)-----------+
  |      BARRY GOLDWATER    |
  |           for           |
  |        President        |
  +-----------------oOO-----+
            |__|__|  
             || ||
            ooO Ooo

Notice that a monospaced font is used.

The last tag we're going to discuss is a comment.

<body>
<!--This is a comment.-->
This is not.
A comment can be placed anywhere in the document and the browser
will ignore everything inside the brackets. You can insert hidden
messages, <!--Hi Mom!--> notes to yourself, <!--Pick up milk--> or
write a helpful message to someone looking at the source of your
page.<!--Copy anything off me and you're dead meat!-->
</body>

This is not. A comment can be placed anywhere in the document and the browser will ignore everything inside the brackets. You can insert hidden messages, notes to yourself, or write a helpful message to someone looking at the source of your page.

Just to be absolutely clear, the comment must start with

You can (usually) even put other html tags in a comment and they will be ignored. The browser will just keep ignoring everything until it sees a -->

ayahsaba76.blogspot.com

So, you want to make a Web Page!
Lesson 22

Another little widget that you will find yourself using a lot is the Horizontal Rule.

<body>
<hr>
</body>

We have a few options available to us...

<body>
<hr width="20%">
<hr width="50%">
<hr width="100%">
<hr width="20">
<hr width="50">
<hr width="100">
</body>

Be careful with large absolute widths, such as width="1000". If your visitor is running a screen resolution of 1024x768 or greater, a <hr> width of 1000 is no problem. But if he's running at a lesser resolution (such as 800x600... which many folks do) your horizontal rule will run off the right side of the screen. If you wish to alter the default length of a horizontal rule, best use a percentage value.

This attribute is pretty self-explanatory.

<body>
<hr width="60%" align="left">
<hr width="60%" align="right">
<hr width="60%" align="center">
</body>

We can control the thickness of the line...

<body>
<hr width="60%" size="1">
<hr width="60%" size="3">
<hr width="60%" size="8">
<hr width="60%" size="15">
</body>

And we can make it a solid line.

<body>
<hr width="60%" size="1" noshade>
<hr width="60%" size="3" noshade>
<hr width="60%" size="8" noshade>
<hr width="60%" size="15" noshade>
</body>

You can also color horizontal rules. (Although not included in any official HTML specification, the color attribute in a <hr> is supported by most common browsers.)

<body>
<hr width="60%" size="1" noshade color="#ff9900">
<hr width="60%" size="3" noshade color="#99ff00">
<hr width="60%" size="8" noshade color="#9900ff">
<hr width="60%" size="15" noshade color="#ff0099">
</body>

You'll notice the result is a solid color... as if a colored noshade. This is fairly consistent across the the browsers that support it. If you're going to use the color attribute, you might want to leave the noshade in there. That way the occasional browser that doesn't support color will just default to the grayish color.

ayahsaba76.blogspot.com

So, you want to make a Web Page!
Lesson 22

Another little widget that you will find yourself using a lot is the Horizontal Rule.

<body>
<hr>
</body>

We have a few options available to us...

<body>
<hr width="20%">
<hr width="50%">
<hr width="100%">
<hr width="20">
<hr width="50">
<hr width="100">
</body>

This attribute is pretty self-explanatory.

<body>
<hr width="60%" align="left">
<hr width="60%" align="right">
<hr width="60%" align="center">
</body>

We can control the thickness of the line...

<body>
<hr width="60%" size="1">
<hr width="60%" size="3">
<hr width="60%" size="8">
<hr width="60%" size="15">
</body>

And we can make it a solid line.

<body>
<hr width="60%" size="1" noshade>
<hr width="60%" size="3" noshade>
<hr width="60%" size="8" noshade>
<hr width="60%" size="15" noshade>
</body>

You can also color horizontal rules. (Although not included in any official HTML specification, the color attribute in a <hr> is supported by most common browsers.)

<body>
<hr width="60%" size="1" noshade color="#ff9900">
<hr width="60%" size="3" noshade color="#99ff00">
<hr width="60%" size="8" noshade color="#9900ff">
<hr width="60%" size="15" noshade color="#ff0099">
</body>

ayahsaba76.blogspot.com

So, you want to make a Web Page!
Lesson 21

Another type of list is a definition list.

aardvark: A burrowing, ant-eating African mammal. And, as everyone knows, the first word in every self-respecting dictionary.

(Did you know there is such a thing as an aardwolf?)

Start with this...

<body>
<dl>
</dl>
</body>

Then add a definition title...

<body>
<dl>
<dt>10th Amendment
</dl>
</body>

10th Amendment

And then the definition...

<body>
<dl>
<dt>10th Amendment
<dd>The powers not delegated to the United States by the
    Constitution, nor prohibited by it to the States, are
    reserved to the States respectively, or to the people.
</dl>
</body>

10th Amendment: The powers not delegated to the United States by the Constitution, nor prohibited by it to the States, are reserved to the States respectively, or to the people.

As a finishing touch I like to make the definition title bold. It's not required, but I think it looks much better that way.

<body>
<dl>
<dt><b>10th Amendment</b>
<dd>The powers not delegated to the United States by the
    Constitution, nor prohibited by it to the States, are
    reserved to the States respectively, or to the people.
</dl>
</body>

10th Amendment: The powers not delegated to the United States by the Constitution, nor prohibited by it to the States, are reserved to the States respectively, or to the people.

ayahsaba76.blogspot.com

So, you want to make a Web Page!
Lesson 20

We can change the type of an ordered list...

<body>
<ol type="A">
<li>a big red truck
<li>a real fast speedboat
<li>a drum set
<li>a BB gun
<li>a Melanie Griffith
</ol>
</body>

a big red truck
a real fast speedboat
a drum set
a BB gun
a Melanie Griffith

And we can change the type in an unordered list...

<body>
<ul type="circle">
<li>a big red truck
<li>a real fast speedboat
<li>a drum set
<li>a BB gun
<li>a Melanie Griffith
</ul>
</body>

a big red truck
a real fast speedboat
a drum set
a BB gun
a Melanie Griffith

The following list types are available...

<ol> Ordered List		<ul> Unordered List
type="1" - numeric: 1,2,3,4... (default) type="a" - lower alpha: a,b,c,d... type="A" - upper alpha: A,B,C,D... type="i" - lower roman: i,ii,iii,iv... type="I" - upper roman: I,II,III,IV...		type="disc" (default) type="circle" type="square"

One more example before we move on. Note that lists can also be nested...

<ol>
<li>Fruits
   <ul>
   <li>apples
   <li>oranges
   <li>bananas
   </ul>
<li>Nuts
   <ul>
   <li>peanuts
   <li>macadamia
   </ul>
<li>Vegetables
   <ul>
   <li>cucumbers
   <li>peppers
   <li>lettuce
   </ul>
</ol>

Fruits
- apples
- oranges
- bananas
Nuts
- peanuts
- macadamia
Vegetables
- cucumbers
- peppers
- lettuce

ayahsaba76.blogspot.com

So, you want to make a Web Page!
Lesson 19

Another very useful little tool is a list. There are ordered lists and unordered lists.

This is an ordered list:

something big
something small
something short
something tall

This is an unordered list:

something red
something blue
something old
something new

First, we will build an unordered list. It's mind-numbingly simple... really.

Start with this...

<body>
What I want for Christmas
</body>

What I want for Christmas

(Technically we have not started to build the list yet. This is just a sort of heading.)

Add a pair of unordered list tags.

<body>
What I want for Christmas
<ul>
</ul>
</body>

What I want for Christmas

Add a list item.

<body>
What I want for Christmas
<ul>
<li>a big red truck
</ul>
</body>

What I want for Christmas

a big red truck

Add a few more...

<body>
What I want for Christmas
<ul>
<li>a big red truck
<li>a real fast speedboat
<li>a drum set
<li>a BB gun
<li>a Melanie Griffith
</ul>
</body>

What I want for Christmas

a big red truck
a real fast speedboat
a drum set
a BB gun
a Melanie Griffith

Bingo! You made a list!

How to make an ordered list? Easy! Change the <ul> tags to <ol>.

<body>
What I want for Christmas
<ol>
<li>a big red truck
<li>a real fast speedboat
<li>a drum set
<li>a BB gun
<li>a Melanie Griffith
</ol>
</body>

a big red truck
a real fast speedboat
a drum set
a BB gun
a Melanie Griffith

And you thought HTML was hard.

ayahsaba76.blogspot.com

So, you want to make a Web Page!
Lesson 18

We've covered a lot so far... text & font manipulation, images, links. As far as the basics go, there's not a whole heck of a lot more.

I think I'm going to take this time to tell you about screen resolution. Most people use a screen resolution of 800x600. That means that the screen is divided into 800 pixels (dots) horizontally and 600 pixels vertically. A few people use 640x480, some use 1024x768 and some even use an even higher resolution.

Using a bit of javascript in this page I can detect YOUR current screen resolution...

Your current screen resolution:
1024 × 768

What does this have to do with anything? It has a lot to do with how your pages will look to different visitors. Here are a couple screen shots of my old homepage at different resolutions.


640×480	800×600	1024×768

It is a very good idea to check your page at other resolutions. Your carefully crafted layout might fall apart at other resolutions. Especially if you design your page at a higher resolution. View your creation at a lower res and you might be surprised.

If you're not sure how to change your screen resolution I've written a few instructions here.

What resolution to design for is an ongoing debate. The ideal is not to design for ANY particular resolution at all. Ideally your pages should be presentable at all resolutions. Since idealistically this is possible and realistically it's a little harder, a nice compromise is to design for a minimum horizontal resolution of about 560, then test your layout at a few different resolutions.

While this is a fine compromise, it's still not enough for some folks. Some are content in the knowledge that since "most" people run at 800x600, that's what they will design for. Just be careful if you're page layout is as fragile as a house of cards. The more you fiddle with exact layout, quite often the less dependable that layout will be. Your finely crafted page may fall apart for more people than you realize. Web page layout is not an exact thing even under the best of circumstances... keep it loose, keep if flexible, test your pages with a couple browsers and at a few resolutions.

Now we are going to look at a couple formatting tools available to you. First one is <blockquote>. In most browsers it pulls your margins in from both sides. (I don't know if that's the proper terminology but if you understand what I mean I guess it's close enough).

<body>
<blockquote>
WE THE PEOPLE of the United States, in order to form a more perfect 
Union, establish Justice, insure domestic Tranquility, provide for the 
common defense, promote the general Welfare, and secure the Blessings 
of Liberty to ourselves and our Posterity, do ordain and establish this 
Constitution for the United States of America.
</blockquote>
</body>

WE THE PEOPLE of the United States, in order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defense, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.

I'm sure when <blockquote> was first devised it had a loftier purpose, such as quoting profound bits of prose from authors I've never even heard of. But here in the trenches it serves a more mundane purpose... easy indenting.

It's also important to note that although most browsers render blockquoted text by indenting it, that's not specifically what it's designed to do. It's conceivable that some future browser may render blockquoted text in some other way (such as red italics). That said however, for the forseeable future, it is perfectly safe to indent blocks of text with <blockquote>.

ayahsaba76.blogspot.com

So, you want to make a Web Page!
Lesson 17

FAQ: My image links have these little blue dashes next to them. Also I keep getting spaces between them and I want them to be flush up against each other. I don't understand... it works right in Browser B.

A: Most browsers interpret a carriage return between images as a space. A few browsers don't. It's that simple. The little blue dash (seen in some browsers) is simply the link underlining an empty space. The cure is to eliminate carriage returns right before or right after the image.
This is the markup for the above images:

<p align="center">
<a href="myhome.html">
<img src="myhome.gif"
     width="66" height="23"
     border="0" alt="Home">
</a>
<a href="mailto:me@my.house">
<img src="myemail.gif"
     width="66" height="23"
     border="0" alt="Email">
</a>
<a href="mylinks.html">
<img src="mylinks.gif"
     width="66" height="23"
     border="0" alt="Links">
</a>
</p>

If we were to change it to this we would eliminate the little blue dashes:

<p align="center">
<a href="myhome.html"><img
     src="myhome.gif"
     width="66" height="23"
     border="0" alt="Home"></a>
<a href="mailto:me@my.house"><img
     src="myemail.gif"
     width="66" height="23"
     border="0" alt="Email"></a>
<a href="mylinks.html"><img
     src="mylinks.gif"
     width="66" height="23"
     border="0" alt="Links"></a>
</p>

Another adjustment and the spaces disappear too:

<p align="center">
<a href="myhome.html"><img
     src="myhome.gif"
     width="66" height="23"
     border="0" alt="Home"></a><a
   href="mailto:me@my.house"><img
     src="myemail.gif"
     width="66" height="23"
     border="0" alt="Email"></a><a
   href="mylinks.html"><img
     src="mylinks.gif"
     width="66" height="23"
     border="0" alt="Links"></a>
</p>

Take the time to understand what's going on in the above examples.
Is this a pain in the butt? Only if you don't understand what's happening and how to fix it. Is Browser A a crappy browser? Not necessarily, it's just different than Browser B. Browsers sometimes do different things with the same markup.

Another way to link is to link not just to a page, but to a specific part of a page. Click here to be magically transported to where we first talked about URLs. Since it would be kind of hard to have you build an example, I'll just do the best I can to explain how it's done.

First start with the spot you want people to be transported to. Pick a word and wrap it in the <a> tags.

<a>Add</a> the URL and you're done!

Next give that spot a name...

<a name="upabit">Add</a> the URL and you're done!

What you have done is marked that spot. (Or made an anchor.) Now that anchor can be referenced and linked to.

Start building the link...

Click <a>here</a> to be magically transported...

Add the URL of the document to be referenced...

Click <a href="lesson12.html">here</a> to be magically transported...

And lastly, add # and the anchor name like so...

Click <a href="lesson12.html#upabit">here</a> to be magically transported...

And that's all there is to it! Not exactly brain surgery is it??