Go To Bottom
Go To Sushi
Go To The Dancing Newlyweds
Go To Copper Photo
Go To Dancing Balloon
Go To Bummer Balloon
Go To Top
Oh, Well, Go To Bottom Then (so we can take another fun trip back to the Top. Sheesh, I gotta get a life.)
Go To More Basic Lesson Page (but keep this page open as well)
Go To More Basic Lesson Page (and leave this page altogether)
Miss Management Home PageDhyana HTML Basics
Hi, Dhyana!
Are we having fun yet?
Want to ditch all this and go get some SUSHI?
The above graphic, by the way, was a bear to create. I got the photo from some site that sells sushi equipment. Had to extract it. Had to draw in part of the stand which was cut out of the original photo.
Hey - check out this very page - Dhyana HTML Basics - on the World Wide Web (although if you click the link, you'll still just be here. Duh - I just realized that).
The preceding underlined link was created using an html tag - the <a href></a> tag - anchors - the method for creating links. HTML stands for HyperText Markup Language.
Can you hear the music on this page? By the way, I figured out why your media player was maximizing and you could no longer see the pages when you operated the sound toggle on my everlastingmemories pages.
Might As Well Dive Into The Lessons So Here's A Random Comment:
The below graphic is in the same folder on my hard drive and my server as this web page, thus when we insert it into this page, we don't need to specify a path, but just simply code it as <img src="web-jamie5-dance.gif" width="460" height="444" />
Speaking of the below graphic, I'm glad to see you're enjoying the music.
You are two smooth dancers!
The music is a jungle beat, a .midi file (Musical Instrument Digital Interface).
This next graphic, however, is in a different folder (my root folder) from this page. Therefore, we have to designate the relative path to it like so: <img src="../email-jamie5-copper.jpg" width="360" height="444" />It is the little ../ thingies that define paths from one location to another in your site folders. The further one folder is from another in your site tree, the more of those little ../ thingies you use.
Sometimes I prefer to use the absolute URL (Uniform Resource Locator) rather than a relative path. Just seems safer somehow. We'll talk about this.
Go To Top
Return To Discussion of Transparency
All of the design elements on this page - bold <b></b>, paragraphs <p></p>, font families, font colors and sizes, background colors, yada yada, are defined using html tags. HTML tags come in pairs with a beginning and an ending tag. Thus <b> before your bolded text and </b> after your bolded text, <p> before a paragraph and </p> after it, and so on.
Badda bing, badda boom.
Cascading Style Sheets - CSS - is a whole other ball of wax - the latest and greatest, puts plain old html to shame. CSS still uses some html tags, but many of them are deprecated in favor of "styles." Also, CSS can and ideally is external to the html document whereas html tags are embedded within the document. You can read all about CSS at CSS Zen Garden. Did I ever show you that site? (Just kidding . . .)
Probably one of the biggest benefits of Cascading Style Sheets is the ease of making global changes. For instance, using CSS, I could give the letters "CSS" an ID, create a style rule for that ID, and define that rule as: the font is Arial, the size is 12 points and the color is yellow. If I later wanted all occurrences of "CSS" to be lime, I could simply change the rule. On the other hand, in plain old html where the tags are embedded all throughout the document, I have to go to each and every occurrence of "CSS" and change the html font color tag to lime - very time consuming. This is what pioneer web authors had to do in the olden days.
Another benefit of CSS - I can apply the same external CSS file to any or all of my pages, thus vastly speeding up my web authoring tasks and making my pages consistent in design. Note that although CSS styles can also be embedded in the html file rather than being placed in a separate, external file, this is not the ideal way to do it because you lose the benefit of applying the same style sheet to multiple pages.
And there's more! Speed. Broadband and dialup resources. A big issue in web authoring. If you use an external style sheet for multiple pages, the browser only has to download those styles once. On the other hand, if your styles or html tags are embedded in each separate page, well, browser has to do a lot more downloading.
By the way, notice if you click on the CSS Zen Garden link as I have it set up, you don't really leave my site? The Zen Garden opens in a blank page and you can't use your browser's back or forward button from within it. You can only close the page, and then you are back in my site. Sometimes you want to do this - direct a person to another site without them exiting your own page. Alternatively, you could send them there in such a way that they would no longer be on your page. I'll show you all this too.
This page is not centered or anything. I just kind of threw it up here real quick.
Want to see the source code for this page? From your Internet browser menu, choose "View" and "Source." If you wanted to, you could copy and paste all that code into Notepad or Dreamweaver or another html editor (Word is one but it's kind of messy) and voila - exact copy of this page. Of course you'd have to snag the graphics - either by saving them from this page (which a web author can disable - most of my pages disable right-clicking and saving the graphics) or grabbing them from your Temporary Internet Cache.
Regarding the disabling of right-clicking on a page to stop people from snagging your graphics, this doesn't really work. Anyone who knows about the Temporary Internet Cache thing can still get your graphics, code, music, etc., because every single element - graphics, text, CSS files, music files, html files, everything called by the browser when a page is accessed - is downloaded into the Temporary Internet Cache on the hard drive of the viewer. A lot of people don't know this, however, so I just go ahead and disable right-clicking.
Fireworks, however, slices the graphics up so much (well, sometimes . . . I'll show you) that it would take a person a long, long time to put the pieces back together.
If you look at the source code of this page using "View" and "Source" from your Internet browser menu, you will notice that there are elements besides just the text, graphics, music and html tags which reside in the "body" of the document. An html page also has a "head" which is where you place things like the title, meta content information which is used by search engines, etc. I'll show you all of this.
So an html document is comprised of a head, a body, and also the DTD - below.
The very first thing in an HTML document, right above the head, is always the DTD - the Document Type Definition. The DTD for this particular web page you are reading right now is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">the operative phrase for our purposes being XHTML.
As you can well imagine, there are many permutations of hypertext markup languages, each accommodating one technology or another.
Examples:
html (HyperText Markup Language)
xhtml (Extensible HyperText Markup Language)
shtml (Server-Side Includes)
dhtml (Dynamic HyperText Markup Language)
xml (Extensible Markup Language)
php (Hypertext Preprocessor)
asp (Active Server Pages)
I am getting really tired of coding all these darned font colors. I could have used CSS, defined a couple of style rules, applied the styles, and bam - Emeril Kicked-Up Barbecue Sauce. However, I wanted to show you a plain old html page. Sadly but beside the point, I'm also running out of colors.
By the way, please remind me to say a word or two - or less - about Web Safe Colors.
Also, let's talk about CSS and structure through design and why the color "scheme" on this page adds absolutely nothing whatsoever to the meaning of the content. Guess I got carried away with my paint bucket.
Anyway, back to html versions - lo and behold there are sub-versions - transitional, strict, fun stuff like that.
Back to our purposes - we are going to set our Dreamweaver preferences to automatically use XHTML whenever we create a new page because this is the version that is:
1) best suited to CSS, and
2) the language that will eventually transition into XML, the dawning of which is rapidly approaching, my dear, and we want to be ready.
And news that will put a huge grin :-) on your face:
We are going to use CSS rather than HTML tags! We are going to set our Dreamweaver preferences to, and I quote verbatim from the Dreamweaver preferences menu, "Use CSS Styles Instead Of HTML Tags." I skeered!
My Macromedia / Adobe Professional Studio 8 version of Dreamweaver, Fireworks, and Flash comes with a little freebie - TopStyle (alas it's only the "lite" version) - a CSS editor. You can edit CSS in Dreamweaver, but it's niftier doing it in TopStyle. Some day I may spring for the big version.
Notice in my above reference to DTD that I highlighted http://www.w3.org? The W3C, as it is called, stands for the World Wide Web Consortium, the body which sets standards for web authoring. It is a very useful site. You can go to it. You can look at it. You can view it. You can stare at it. You can search it. You can scroll around on it to your little heart's content. You can read it as many times as you want for as long as you want. You can gaze at it in wonderment, awe, disbelief, bewilderment and respect. You can not understand a single word on it.
You can also get a free validation of your html code! It's nifty!
Frankly, I don't know how I ever got along without it.
:-(
The W3C also runs the W3 Schools site. Here you can get tutorials - free! And you can also not understand them. It's way cool.
Don't sweat any of this stuff - Dreamweaver is nice and GUI, having a Graphical User Interface, and most of the code is created behind the scenes while you do the fun stuff in design view. However, it helps to have a little understanding of HTML in case you want to mess around with the code for one reason or another.
We can even bypass Dreamweaver for the most part and create our pages directly in Fireworks. Then we use Dreamweaver just to load 'em up via ftp - File Transfer Protocol.
Fireworks is really fun. It is used primarily for graphics - both bitmap and vector (those really nasty Bezier curves) - but Fireworks can also be used to directly create web pages.
Here's some fun trivia about graphics - .gif (graphics interchange format) is the only bitmap format (well, with the exception of png (portable network graphics) which doesn't work in all browsers) - that supports animation and transparency.
Linguist Steven Pinker would not like the way I phrased the above sentence. It's terribly awkward, and you, the listener, have to work hard to remember that .gif (towards the beginning of the sentence) refers to animation and transparency (way at the end of the sentence), all the while fussing with that parenthetical stuff in the middle. By the way, I bought you and Amanda each a copy of Pinker's fascinating book, The Language Instinct.
Sorry for digressing. The other bitmap formats (also known as raster graphics) don't support animation or transparency (except for that png thing I mentioned above). The following are the most common bitmap formats (besides .gif (and png!) ):
jpeg - Joint Photographic Experts Group (most common format used by digital cameras)
bmp - Bitmap
tiff - Tagged Image File Format
raw - Raw
Let's remember to talk about bitmap graphics and pixels vs. the mathematically defined vector graphics and Bezier paths. Let's remember to talk about why you can't scale a jpeg bigger without losing detail (fixed number of pixels spread over a larger area) whereas you can scale a vector graphic bigger exactly because it is mathematically defined.
Transparency is really useful if you want to place a graphic on a page and have it blend in with whatever background color or background image your page uses. First, though, you have to extract your image from its own background - like I did my orange kitty, Ennui, from the porch for the home page of this site as well as the above dancing graphic of you and Jamie extracted from the porch of the Mare Island mansion where you guys got hitched.
Here is a graphic that is both transparent and animated - a .gif file.
It took me "a while" to do this one mostly because it was someone else's graphic and they had their darned logo splattered all over it. I had to erase that thing, recreate the threads in the balloon, yada yada. It was nasty. . . (I guess we should discuss using other people's graphics. Wouldn't want to do it on a commercial site. I use them just for practice.)
Here is the same graphic not transparent, not animated.
See? Idn't that a bummer?
Note to self: We need to remember to name our files - including pages, graphics, music, anything we intend to load up - in all lower case letters with no spaces in between - for instance dhyana_html_basics.html rather than DhyanaHTML Basics.html, and use underscores between words and avoid hyphens in file names. It is when you have spaces in a web file name that the browser displays those weird characters like %20 in the location bar. Some browsers won't display the page at all if it doesn't conform to the correct naming convention.
Shoot - I just noticed I broke this very rule above. The two photos of you and Jamie (above) contain hyphens rather than underscores. The graphics still load in some, probably most, browsers. However, this stuff is evolving and changing all the time. Better to just practice good habits from the git-go. I personally have some very bad habits.
Hey, did you know there are other browsers in the world besides Internet Explorer (IE)? Bill Gates wouldn't want you to know this, but out there are also Mozilla Firefox, Safari, Netscape, Opera, maybe even others. These assorted browsers have varying support for different web page technologies and strategies. For instance, PNG transparency may be supported by one browser but not another. Here's a little tidbit for you - IE has the least support for CSS of all the browsers. And after they promised . . .
:-(
If you were a professional web designer creating an important site, you would want to check for browser compatibility to ensure that your pages worked properly in all browsers. We'll cover that on a future visit. Bet you can't wait!
Well, I have to think of more stuff so goodbye for now and have a good day!
One last thing - Aren't these cute pictures? I was cleaning up my hard drive this morning and came across them.
This is a little digital trick I did - Marcel watching himself watching himself watching me working on a background extraction of my beloved erstwhile Ennui.
