Posts
4 days ago
Tuesday, April 7, 2009
Friday, August 15, 2008
Thing to Know Before You Code, Part Three: In the Body
Right now, with the code we've gone over, you should understand what the below does.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My Page</title>
</head>
<body>
</body>
<html>
Now, armed with these tags, let's go show off our opus.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>My Ugly Page</h1>
<p><b>Thank you!</b> ... for visiting my ugly page. Well, it's not <em>really</em> ugly; it just hasn't put on its <q>war paint</q> yet, but we'll get to that in a bit. Read on for an excerpt from my upcoming novel, <span class="bookTitle">What I Wrote, No, Seriously</span>.</p>
<blockquote>
It wasn't dark and stormy, or some other tired cliche. It was Caterday, and I read the <a href="http://www.lolcat.com/">lolcat's blog</a> with glee. The fur ball otherwise known as Cat decided my keyboard would make a great place to lay down his weary carcass. After all, those fingers poking keys belonged to his human, and they had better things to do than entertain their owner. Or maybe I was reading too much into the cat's actions. Maybe all he really wanted was another set of flying lessons.
</blockquote>
<p><a href="#">Buy it now!</a></p>
</body>
<html>
That should now look like:
Want to know more of the nifty tags you can use? Go browse through SitePoint's beta HTML Reference or the W3 Schools tag lists.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My Page</title>
</head>
<body>
</body>
<html>
That's all well and good, but that doesn't show a single bit of anything in your web browser. We're going to start by building a plain (ugly) page and then I'll show you how to come back and fancy it up.
The Document Structure
The document structure in a web page is based on the typographical structure of printed documents. That's not really surprising since the impetus for HTML was to electronically reproduce printed documents for academic consumption. HTML was created for sharing annotated reports, not for hyping the next best buy. Frankly, I expect that most writers have at least a rudimentary understanding of the difference between a heading, body text, block quotes, data tables, and citations. If you're not exactly sure what I'm talking about, try reading some introductions to Semantic Typography for web designers.
So, all that to say, don't worry about the uglies of the document: tell us what the structure is. We can make it pretty with Cascading Style Sheets, but we have to know what we're doing. And on that note, here are your basic content tags.
Tag | Denotes |
| <h1>...<h6> | These are your heading tags. H1 is your top level heading--like the title of your document. H2 works for sections, H3 for sub-sections, etc. It's really, really rare to get down to H5, let alone H6, but, they're there just in case. |
| <p> | Paragraphs! Need I say more? |
| <q> | Inline quotes, like <q>No man is an island...</q> (which looks like: No man is an island...) |
| <blockquote> | Structurally, text contained by a <blockquote> tag pair will be indented left and right, as most style manuals indicate to do for long quotations. | <
| <em> | Emphasized text, usually shown italicized or oblique |
| <b> | Bolded text |
| <span> | The span tag almost needs a tutorial all on its own. Pretty much, it's a way to introduce new structure elements that are not covered in the HTML vocabulary. When you use it, you need to add an attribute. We'll start with the class attribute, because we'll use that a lot with CSS. The tag pair will look like: <span class=""></span> We define (name and describe) classes inside our style sheets (later article). |
| <a> | A stands for anchor, and it has one unique attribute that we care about: href. href is short for Hyperlink Reference. In use, it looks like: <a href="http://some.webpage.com/">Linked Text</a> |
Now, armed with these tags, let's go show off our opus.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>My Ugly Page</h1>
<p><b>Thank you!</b> ... for visiting my ugly page. Well, it's not <em>really</em> ugly; it just hasn't put on its <q>war paint</q> yet, but we'll get to that in a bit. Read on for an excerpt from my upcoming novel, <span class="bookTitle">What I Wrote, No, Seriously</span>.</p>
<blockquote>
It wasn't dark and stormy, or some other tired cliche. It was Caterday, and I read the <a href="http://www.lolcat.com/">lolcat's blog</a> with glee. The fur ball otherwise known as Cat decided my keyboard would make a great place to lay down his weary carcass. After all, those fingers poking keys belonged to his human, and they had better things to do than entertain their owner. Or maybe I was reading too much into the cat's actions. Maybe all he really wanted was another set of flying lessons.
</blockquote>
<p><a href="#">Buy it now!</a></p>
</body>
<html>
That should now look like:
Thing to Know Before You Code, Part Two: HTML
Thing to Know Before You Code, Part Two: HTML
Now, we dive into the part that scares the bejebbers out of most folks: the coding.
Open up Notepad (or slide on over to the Real-Time HTML Editor).
Copy the below text and paste it into Notepad. Save the file as "index.html".
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>my first page</title>
</head>
<body>
<h1>Hey!</h1>
<p>Well, look at me! I made a web page!</p>
</body>
<html>
Go to the directory in your computer where you saved "index.html" and double click on it--it should now open up in your browser and look something like:
Now that you've done the hard part and gotten started, let's go over what you did.
HTML stands for Hyper Text Markup Language. "Hyper" means it bounces, via links, from one page to another. "Text" is thrown in because this is all written in text, instead of like, ick, machine code (binary is *soooo* not my friend). "Markup" comes into play because you're using <tags> to "mark up" the stuff you're writing. "Language" just means that there is a method to the madness, a structure and a syntax. On the plus side, the vocabulary here is really limited, so there's not much you have to learn to get started "talking" in HTML.
So, on to the syntax!
That "should be" hits a key point in html. So long as you're using the right tags, most browsers--where your web pages are interpreted--will understand the wrong example and show it the way the author intended -- well, for text formatting markup. When you start nesting tags that tell the browser about the framework of your page, getting it wrong screws up the page's format.
There are also these things called validators that are rather like automated proofreaders for your HTML coding. They're great for helping you figure out where the problems are in your pages--and, hey, everyone typos at some point, right?
One last point to make before we go back to explanations: Cascading Style Sheets (CSS) are for beautifying the page; HTML is for telling it like it is. Headings are headings, paragraphs are paragraphs, bulletted lists and block quotes and inline quotes and ... well, you get the picture. There are still some presentational tags in HTML, but these are being weeded out. Using these tags--font, strike-through, underline, et all--means setting yourself up to re-write your entire site when the support for these tags finally gets dropped. I'm going to keep it simple and show you the stuff off the latest implemented HTML standard--version 4.01.
Every page should start with a DOCTYPE declaration. A DOCTYPE tells the browser, "Here are the rules this page plays by." Without the DOCTYPE, most modern browsers are going to assume your page was written in a free-for-all style, which means it'll treat the page like it came out of the 1990s. It's called "Quirks Mode" because each browser developed then had its own quirky way of interpreting HTML. It was icky--not as bad as machine code, but still icky.
Let's take a closer look:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
The first part, "!DOCTYPE HTML PUBLIC" tells the browser that this is the DOCTYPE definition (Document Type Definition, a.k.a. DTD), it's for an HTML page, and the definition is a public definition--not something proprietary (that would be SYSTEM and the next part would be omitted). The second part, " "-//W3C//DTD HTML 4.01//EN" ", tells it that the W3C (World Wide Web Consortium) drafted the definition, that it's a definition for the 4.01 version of HTML, and developed in English. The last part ("http://www.w3.org/TR/html4/strict.dtd") is the URL pointing to where the machine-readable DTD specifications are hosted.
By the by, the DOCTYPE tag is the only tag that you don't close in proper HTML.
Next up are the <html> tags. The opening "html" tag goes just under the DOCTYPE declaration and the closing "/html" goes at the very end of the web page. No exceptions (especially if you're still learning =D). These tags tell the browser that everything in the page is web page stuff.
The "head" tags come next. Inside the head, you should always have at least a title for the page, contained in opening and closing "title" tags. You also want to drop your "meta" tags in here. Meta data is data about data. More will be made of these tags in a later article. Not least, links to accessory files, like your style sheet and any web scripts, get planted in the head. The "/head" tag closes before the "body" tag opens -- rather like the chin coming before the torso.
All of your content, all the beautiful, wonderful, BUY-MY-BOOKS-NOW stuff goes inside your "body" tags. If you want the content to show up in the web browser, you put in between the body tags, which means your page structure is also going to go in here.
And that means, time for the next article.
Now, we dive into the part that scares the bejebbers out of most folks: the coding.
Open up Notepad (or slide on over to the Real-Time HTML Editor).
Copy the below text and paste it into Notepad. Save the file as "index.html".
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>my first page</title>
</head>
<body>
<h1>Hey!</h1>
<p>Well, look at me! I made a web page!</p>
</body>
<html>
Go to the directory in your computer where you saved "index.html" and double click on it--it should now open up in your browser and look something like:
Now that you've done the hard part and gotten started, let's go over what you did.
HTML stands for Hyper Text Markup Language. "Hyper" means it bounces, via links, from one page to another. "Text" is thrown in because this is all written in text, instead of like, ick, machine code (binary is *soooo* not my friend). "Markup" comes into play because you're using <tags> to "mark up" the stuff you're writing. "Language" just means that there is a method to the madness, a structure and a syntax. On the plus side, the vocabulary here is really limited, so there's not much you have to learn to get started "talking" in HTML.
So, on to the syntax!
Basic rules of HTML
- Use the vocabulary
W3 Schools is a great reference put together by the guys writing the web development standards. However, I prefer the SitePoint HTML (beta) reference because the writing is clearer and there are comments for each article, which allow for peer review (and extra "how to use it" tips). - Every "markup" has an opening tag and a closing tag, framed by less than & greater than brackets.
<tag>stuff the tag wraps around</tag>, or in actual practice:
<p>Everything between the "p" tag at the front and the "/p" tag at the back is part of one paragraph. If you wanted to separate this into two paragraphs, you would need to close the first "p" tag (with a "/p") and open up a new one.</p>
- "Markup" should be properly "nested"
RIGHT: <b><em>Bold and Emphasized Text</em></b>
WRONG: <b><em>Bold and Emphasized Text</b></em>
That "should be" hits a key point in html. So long as you're using the right tags, most browsers--where your web pages are interpreted--will understand the wrong example and show it the way the author intended -- well, for text formatting markup. When you start nesting tags that tell the browser about the framework of your page, getting it wrong screws up the page's format.
There are also these things called validators that are rather like automated proofreaders for your HTML coding. They're great for helping you figure out where the problems are in your pages--and, hey, everyone typos at some point, right?
One last point to make before we go back to explanations: Cascading Style Sheets (CSS) are for beautifying the page; HTML is for telling it like it is. Headings are headings, paragraphs are paragraphs, bulletted lists and block quotes and inline quotes and ... well, you get the picture. There are still some presentational tags in HTML, but these are being weeded out. Using these tags--font, strike-through, underline, et all--means setting yourself up to re-write your entire site when the support for these tags finally gets dropped. I'm going to keep it simple and show you the stuff off the latest implemented HTML standard--version 4.01.
So, back to what you did.
Every page should start with a DOCTYPE declaration. A DOCTYPE tells the browser, "Here are the rules this page plays by." Without the DOCTYPE, most modern browsers are going to assume your page was written in a free-for-all style, which means it'll treat the page like it came out of the 1990s. It's called "Quirks Mode" because each browser developed then had its own quirky way of interpreting HTML. It was icky--not as bad as machine code, but still icky.
Let's take a closer look:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
The first part, "!DOCTYPE HTML PUBLIC" tells the browser that this is the DOCTYPE definition (Document Type Definition, a.k.a. DTD), it's for an HTML page, and the definition is a public definition--not something proprietary (that would be SYSTEM and the next part would be omitted). The second part, " "-//W3C//DTD HTML 4.01//EN" ", tells it that the W3C (World Wide Web Consortium) drafted the definition, that it's a definition for the 4.01 version of HTML, and developed in English. The last part ("http://www.w3.org/TR/html4/strict.dtd") is the URL pointing to where the machine-readable DTD specifications are hosted.
By the by, the DOCTYPE tag is the only tag that you don't close in proper HTML.
Next up are the <html> tags. The opening "html" tag goes just under the DOCTYPE declaration and the closing "/html" goes at the very end of the web page. No exceptions (especially if you're still learning =D). These tags tell the browser that everything in the page is web page stuff.
The "head" tags come next. Inside the head, you should always have at least a title for the page, contained in opening and closing "title" tags. You also want to drop your "meta" tags in here. Meta data is data about data. More will be made of these tags in a later article. Not least, links to accessory files, like your style sheet and any web scripts, get planted in the head. The "/head" tag closes before the "body" tag opens -- rather like the chin coming before the torso.
All of your content, all the beautiful, wonderful, BUY-MY-BOOKS-NOW stuff goes inside your "body" tags. If you want the content to show up in the web browser, you put in between the body tags, which means your page structure is also going to go in here.
And that means, time for the next article.
Thursday, July 31, 2008
Thing to Know Before You Code, Part One: Tools
If you've been following this series, you should already have an idea of what you want your web site to come out looking like. Now, we're going to cover how to get from a blank page to that concept dancing in your brain. First thing's first, though: what tools do you need to have ready?
Basic Tools:
- HTML Editor
- Graphics Editor
HTML Editor
An HTML Editor is something like a word processor for HTML code. The most basic is Notepad, which comes with just about every Windows operating system installation. Because it is so ubiquitous, it's what I'll base examples on. You can use this Real-Time HTML Editor to copy & paste code samples for an instant view.
If you want to work with something a bit spiffier, check out the below guides:
- http://en.wikipedia.org/wiki/Comparison_of_text_editors
- http://en.wikipedia.org/wiki/Comparison_of_HTML_editors
Graphics Editor
The main reason for picking up a graphics editor--as far as this article is concerned--boils down to re-sizing and re-sampling images.
I use PaintShopPro as my main graphic editing utility because I'm a digital painting hobby-ist, and it's powerful, yet still easy to figure out--unlike Adobe's Photoshop. Then again, I think most of Adobe's editing software requires advanced degrees in geek-out to get to even a middling of their usefulness. If your budget isn't that stretchy, there's the free stuff, starting with the Paint program that comes with Windows to Brush Strokes, which I'm told is pretty nifty for the price (free). And there's always the GIMP. It's one of the big Open Source Initiatives.
Wednesday, July 30, 2008
Where to Put Your Site, Part Two: Hosts
Decades and decades (okay, just *a* decade) ago, hosting a website was expensive. As with all maturing technologies, the cost has come down and you have more choices. If you like the whole techno-geeking stuff, you can pay your local Internet Service Provider for a static IP address, set up a web server on a computer attached to that IP, and host your own. All things considered, this is *not* the service of choice for most small businesses, and rarely needed for most authors. The second choice is to pay someone else to host your website, and let them deal with all the minutiae of keeping the servers ticking.
If you want to go the first route, I am not the best reference for you, though you may find some of the points below interesting. For those paying to host their sites, read on.
What do you need to know about your site host?
How much is it going to cost me?
Depending on where you go, you can pay as little as nadda to upwards of thousands of US dollars. On average, though, the prices for a decent hosting package are settling between the US$3 and US$15 per month mark.
Quick note here - there ain't no such thing as a free site host. If it's not a promo deal, you're paying for the hosting by watching ads, or allowing ads to take up valuable space on your site, and almost always with no control over what gets put in those ad slots.
What should I look for in a hosting package?
This is one of the places where things get more personal. If you plan to podcast from your site, you want more space to store your podcasting files and more monthly bandwidth to serve them. A basic plan that gives you under 100mb of storage and less than 1GB of monthly bandwidth isn't going to be useful. However, if you just plan to send out text-based files, like your web pages, 50mb to 100mb of storage with 1GB bandwidth per month may be more than enough.
To give you the math...
1,000 bytes (b) = 1 kilobyte (kb)
1,000kb = 1 megabyte (mb)
1,000mb = 1 gigabyte (GB)
The average web page file is between 2kb and 3kb and accent pictures average between 5kb-50kb. In a purely vanilla website, assuming each page view requires five images, the html and the style sheet, let's figure each download to average about 80kb per page view. That means a 1GB bandwidth allowance will let your pages be served 12,500 times. If you have a 15 page site, that's about 800 visits per month, or a little over 27 visits per day, which is pretty decent starting out.
If you add podcasting, well, 1GB of monthly bandwidth doesn't cut it. A rule of thumb for mp3s is that each minute of recording is 1mb of file size. A five minute recording then becomes a 5mb file. If you were to just serve that one file, 1GB of bandwidth would let you send it out 200 times per month, or just under 7 times per day. If you're podcasting, though, the likelihood that you'll have only one 5mb file to serve is slim to none. On a low volume site, you would do best to have at least 10GB of monthly bandwidth. That's why there are podcast hosting services like Podio Books or Podcast Alley.
Where are the servers located?
Why does this matter? Well, for one location defines most of the applicable laws. If you plan on hosting topics that could be subject to censorship in a given region, hosting out of that region is asking to have your site shut down. Another point on local laws is what kind of fiscal burden they place on your site host--who passes that down to you. In Texas, for example, one of the Private Investigators associations has successfully lobbied to make computer technicians subject to PI licensing requirements. There's also the matter of supporting your local economy.
What Server Side Scripts do they Serve?
Server-side scripting languages are the types of involved code-behind stuff that make for the truly "dynamic" sites, where the pages are made on the server based on the programmed code. If they support PHP (most do) and MySQL (a free database server platform), then you can usually set up a WordPress blog on your site with a few instructions and maybe a call to their tech support line or two. ASP and ASP.NET are only served from Windows OS servers--it's a Microsoft invention.Why do you care about this? Later on, when you want to add extra perks (or pay someone to add them), knowing what Server-Side Scripting languages you can program in will help.
Where can I get hosting?
If you're going to go the route of the no-money-out-of-pocket site host, Microsoft's OfficeLive for Small Businesses is actually a pretty good deal. I set up a site at http://shaybee.web.officelive.com/ just to see how it worked. They do offer extras for a fee--like shopping carts--but the basics are good, like setting up the web pages without having to learn a lot of the code-behind-the-pages. In fact, their site builder system is easy enough to use that, with just a little bit of CSS know how, you can create some pretty nifty static sites quickly and easily. And, aside from being so darn easy to use, they serve ads to *you* and not on your web site.
If, however, you want more control over what goes on behind the scenes, or you want to run a blog at "yourdomain.com", you may find paying for a hosting service to be more useful.
I host shaybee.com through Planet Small Business. The admin screens are fairly easy to use, they offer FTP uploads, and setting up sub-domains is pretty easy, in case you want to run blog.yousite.com. At the same time, most of their tech support is via email, even for basic stuff.
Dixiesys.com has also been recommended by a member of the Writing and Publishing Group.
Feel free to add notes about different hosting companies in the comments for this post.
Tuesday, July 29, 2008
Where to Put Your Site, Part One: Domains
There are two things you pay for when setting up a website: the file server to host the site -- where you store the files that make up your web site -- and the domain. Let's start with the domain.
What *is* a domain?
You've probably already heard or seen someone mention "URL"s. That stands for Uniform Resource Locator, which is a fancy way of saying the directions to stuff you want to see on the 'net. URLs are a subset of URIs, which is where you start needing a degree (or matching experience) to keep from getting lost in the techno-speaking. Domains come in three parts: top-level, site, and sub-site domains. The first, top-level domains, are your .coms and .nets and all. The next up, the site domain, is the part that goes yoursitename in yoursitename.com. Sub domains include the www. or blog. or whatever. All together, they look like: sub-domain.site-domain.top-level-domain.
CAUTION: Each site domain is specific to a top level domain (TLD). Yoursite.com is not the same registration as yoursite.net or .org or any of the other TLDs. If you want yoursite.com and .net and .org and any other TLD (or want to prevent someone else from registering variants on "yoursite"), you have to register for each TLD separately. Most brand concious businesses stick to registering the .com, .net, and .org versions of their site.
Where do you get them, and what do they cost?
Something to make clear, you cannot "buy" a domain--you only lease it. The cost depends on who you register through. You can find accredited domain registrars, entities authorized by ICANN (a.k.a. the guys who run the internet) to lease out domains, through InterNIC. A number of site hosts will also provide domain registration services, though these are usually through reseller agreements. All in all, expect to pay from US$8 to US$15 per year to lease a domain under the .com, .net, and .org TLDs.
You can register your domain lease separate from your hosting service, or you can pick a package. For the most part (i.e. read the fine print on any package deals), your domain registration is separate from your site hosting service.
CAUTION: There's a recent move toward "proxy registrations". One of the pushes for it is that the information you provide when registering for a domain is posted to the WHOIS database as required by existing laws, which privacy advocates find a cause for concern. With a proxy registration, a proxy company registers the domain and sub-leases it to you. I do *not* recommend proxy registrations.
What style of domain do do you want?
AuthorsFullName.com is a pretty popular site domain format - there's laurellkhamilton.org and stephenking.com and ericflint.net and davidweber.net and ... well, a lot more. Sometimes, though, something in our stories will suggest itself. Patricia Brigg's hurog.com is a fair example of that. Piers Anthony, on the other hand, went for the friendly hipiers.com, and let's not leave out our best selling author, John Foxjohn at johnfoxjohnhome.com.
What you decide is ultimately up to you. Have fun with it. =)
Sunday, July 27, 2008
Planning Your Website, Part Three: Graphics
Continuing from the last article ...
Graphics
The genre you write in has some say in what graphics you pick. Hearts and flowers and fanciful flourishes abound for romance writers, while tombstones and dripping blood play well into horror. Since you're marketing *your* writing, think of the things that might end up on your book covers. Published authors might be able to get permissions from the copyright holders to use modifications of their book covers as site elements. If you are not the creator of your artwork, you are going to have to concern yourself with the copyrights covering the graphics you choose.But, as part of your site design, what graphics are you probably going to be looking for? Please note: this is a separate issue from "content" pictures, which could include your book covers or any other pictures posted as part of the reading experience on your site.
Header
The header is the banner at the top of your web page that identifies your site. You may choose to have one header for the entire site or a different one for each section. If you do choose different headers, remember to keep them in "theme" - carry over consistent elements through out the graphics.Navigation Buttons
These "graphics" don't have to be graphics at all, but if you want something fancier than plain colors, you're probably looking at button pictures. The nice thing is they are easy to build. Try the Buttonator and see for yourself, or use a graphics editing program to build them--these will be covered in a separate post on "Basic Tools for Web Building".Accent Pieces
Rather like the little touches around your home, accent pieces are all those "minor" flourishes that round out your site presentation. These are the horizontal rules, the bullet points for your lists, attention buttons, and the like. To get a better idea of all that can be considered an accent piece, head on over to the css Zen Garden and flip through the designs there.Oh, and a nifty thing to note: all those gorgeous designs on the css Zen Garden are accomplished by changing the css file--the cascading style sheet. The actual html--where all the content is stored--is the same through out all the designs.
So, now you've got an idea of what you want your site to look like, it's time to decide *where* to put your site.
Subscribe to:
Posts (Atom)
