These are so cool:
http://www.google.com/webfonts#HomePlace:home
Finally, you can use something different. Though I think standard fonts are still okay for main text, this gives so much more flexibility for headers and more.
Blog revamp
A blogger I know downloaded a free blog template. This was what her blog looked like:
Which looks fine. Nothing wrong with that. Except for that someone else she knew proceeded to get the exact same template.
So she wanted something original.
I gave her this:
She had the picture previously and had been wanting to use it. I made it into a background. The first design I had for her was somewhat different than this, but we went back and forth until I gave her the exact design she wanted.
And now, her blog is unique.
Links and Images
Lesson 4: Links and Images
Links: For links, you use an <a> tag. This actually stands for “anchor.” And you probably really don’t care why, and neither do I. Very simple, you can use the <a> tag to define a link:It starts out like this:
<a href=”http://grabshelldude.wordpress.com”>
“a” is a link. “href” means I want to direct the user somewhere else. Then I identify what I’m referring to, or what website I want to go to. Make sure you have the equals sign and the quotation marks too.
Then you put the text or whatever that will be the thing the user clicks on to get to the other site.
<a href=”http://grabshelldude.wordpress.com”>My blog
Then you end the link.
<a href=”http://grabshelldude.wordpress.com”>My blog</a>
And it’ll look like this:
Awesome, huh? And not hard at all.
On to images. Most other programs you make stuff in, you can just copy the image right in and there it is. But an html file is text only. You can’t just insert an image. Instead, you have to tell the browser to go look somewhere else for the image.
This is a basic image tag:
<img src=”http://edgeofshade.com/design/image.jpg” />
Src stands for source, which is pretty simple. I just direct it where my image is, end the tag, and then I’m done. Again, make sure you get the equals sign and the quotation marks.
So whenever you use an image for a web page, you have to have the image uploaded somewhere too.
Tag, You’re It!
Lesson 3: Tag, You’re It!
Let’s look at an example homework assignment from last lesson:
HEADING 1 CHAPTER 1
HEADING 2 DOWN THE RABBIT HOLE
PARAGRAPH Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, “and what is the use of a book,” though Alice, “without pictures or conversations?”
PARAGRAPH So she was considering, in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.
Okay, I know you didn’t do the homework. That’s okay.
Html has specific tags, and a tag is just the thing that identifies the element. We already know how to identify; now we just need to know how to use html tags.
A tag begins with this: < and ends with this: >. For example: <tag>.
Tags have particular codes that correspond with different elements. So the specific code for a paragraph is p, so the tag for a paragraph looks like this: <p>.
A paragraph tag says to the browser, “Hey! This is a paragraph.”
You use tags to open and close an element. The opening tag is sort of like yelling to the browser, “Hey! This is a paragraph.” Then, when the paragraph is done, you insert a slash in the tag (for example: </tag>) to say, “Hey! This paragraph has ended.”
Example:
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, “and what is the use of a book,” though Alice, “without pictures or conversations?”</p>
Now, it may seem difficult to remember all the codes for all the different identifiers, but once you start using them, it’s not too bad.
Title <title> </title>
Heading 1 (the main heading) <h1> </h1>
Heading 2 (a subtitle) <h2> </h2>
Heading 3 (another subtitle) <h3> </h3>
Paragraph <p> </p>
Ordered lists <ol> </ol>
Unordered lists <ul> </ul>
An item in a list <li> </li>
Images <img/>
Block Quotes <blockquote> </blockquote>
Tables <table> </table>
Links <a> (sort of) </a>
Sections (large and small) <div> (for a big section) </div>
<span> (for a small section) </span>
Emphasized text <em> </em>
Strong text <strong> </strong>
Horizontal Lines <hr/>
Line breaks <br/>
If you noticed, images, horizontal lines, and line breaks didn’t have an opening and closing tag, just a closing tag. This is because they don’t really open and close at all. They aren’t identifying text; they are their own separate elements. So, they always exist with that slash.
Self Study: It’s like the previous assignment: go through and identify elements of a web page, document, book, or whatever, but this time use html tags.
Structure of a Webpage
Lesson 2: Structure
Look at a website, a book, a magazine, etc. Chances are there are a few different elements: there are titles, aren’t there? Titles to a chapter, title of an essay, that sort of thing. There might be some subheadings. There are definitely paragraphs.
How about we break it down:
- Title
- Heading 1 (the main heading)
- Heading 2 (a subtitle)
- Heading 3 (another subtitle)
- Paragraph
That’s really basic. There are also:
- Ordered lists
- Unordered lists
- An item in a list
- Images
- Block Quotes
- Tables
- Links
- Sections (large and small)
- Emphasized text
- Strong text
- Horizontal Lines
- Line breaks
So in html, you write up a web page, and then use html tags (we’ll talk about them more later) to identify each element like the ones listed above.
Self-study: Look at magazines, books, and websites, and label the elements using what I’ve listed above.
When you get really used to identifying parts of documents by the labels above, it’ll make coding html incredibly easy.
Foggy Headers
Samples with text on them:
Plain headers:
Transparent Images
The header image I currently have on this website is transparent. I wanted to make one, and figured out how.
I used Paint.NET, a free program. I started with a transparent canvas. To do that, you can just select the whole image and press delete. Transparency is represented by small gray and white squares.
Then I added my text in the color that I wanted. I disabled antialiasing for the text, since with it on it led to funny lines.
Saved it as a .gif format, uploaded, and there you go.
How to make repeatable backgrounds
This a repeat of some tutorials I’ve seen. The only difference is, I used Paint.NET instead of Photoshop.
Let’s say I want this to be my background:
Please note, this is a square, 300 x 300 pixels.
If I try to repeat it, I get seams:
—
So let’s remove those seams.
First, I need to offset it. In Photoshop and other programs, I could do this in one easy step, but I’ll explain how the long way around.
First, image your image has four quadrants (each a square 150 x 150 pixels):
Offsetting it simply means to change where each quadrant is, like this:
The top left quadrant becomes the bottom right quadrant, the top right quadrant because the bottom left quadrant, the bottom left quadrant becomes the top right quadrant, and the bottom right quadrant becomes the top left quadrant. Don’t make me repeat that.
To do this using Paint.NET, I select an area slightly bigger than the quadrant and copy it as a new image. Then I change the canvas size (this is different than resizing–canvas size will basically crop the image for you) so the image so it is exactly 150 x 150 pixels, making sure to anchor it at the proper corner (e.g. the top left quadrant I anchor top left). I do this for every quadrant and then paste them back in so that the image is offset.
This is the image I get:
Notice the seams. I get rid of the seams by using a clone brush, so my final image is something like this:
No seams! And when I repeat it, it looks like this:
—
End of tutorial.
Forget the Style
This is the first thing you need to know about html: html identifies, not styles.
You can’t change the font with html. You can’t change the color. You can’t move things all over the page. Don’t try to.
Why is that lesson 1? Because html is a lot easier when you don’t try to force it to do something it was never designed to do.
A Story
Long ago, when the Internet barely existed, web browsers came into being. A web browser’s whole purpose was to interpret a file of plain, unformatted text and make it look dashingly handsome. So the small, plain text file (our hero) identified its different elements so that the browser could interpret them and format them correctly.
At first, all style was found in a browser. A person how wanted a header that said “Awesomeness!” simple coded
<h1>Awesomeness!</h1>
in their small, plain text file, and then the browser would make it large, emphasize it, and etc.
Then people wanted more control over how their web pages looked. So some evil minions decided to mess with html and make obnoxious, horrible tags like that are so abominable that anyone who uses them should be forced to use manual typewriters for the rest of their life. The reason it is so abominable is that it made the small, plain text file into a large and hideous beast that looked like this:
<font face=”Times New Roman”>
<font size=”+4″>awesomeness </font> </font> <br>
<font face=”papyrus”> <font size=”+1″>
<p align=”center”> A place for the awesomeness of the Internet. <br> <br>
</p>
</font>
How hideous! Something that was once so plain and simple bloated out of proportion! And, to spare your eyes, I have shown just the smallest html beast: there are ones that are much, much larger.
The evil minions also had another plot in mind: image you have a fifty-page website, all that has been coded with hideous font tags, and you want to change the font. You have to go through and manually change a bazillion individual font tags, taking up the better part of a day. The horror of it all!
Some other people, who had more brains, and wanted to preserve the small, plain text file instead created CSS, which is basically another file that tells the web browser how to style the small, plain text file. That way, my small, plan text file can look like this:
<h1>Awesomeness</h1>
<p>A place for the awesomeness of the Internet.</p>
instead of the large ugly beast above.
But the web designer can make it display how they want to with a separate CSS file.
To make things really awesome, by using CSS, a web designer can change the font on fifty different websites by changing one file instead of a bazillion individual font tags.
Beautiful.
This is why html identifies, only. It is not used to style something. CSS is the great style hero.
Favorite Web Resources
Three favorite resources of the day:
W3 Schools. I love, love, love this site. Whenever I am coding, I go to it with any questions. When I forget what a tag means exactly, or want to find out specific details, or want to learn something new, I go to W3 Schools. And if you want to learn html and css, it is the PERFECT place to start.
A List Apart I have also really enjoyed. I found it searching on Google for a specific problem, but enjoyed the tone, the website and the clarity that I kept coming back.
Finally, WordPress. WordPress has answers to everything. And not only WordPress problems: they have good references and links to a wide variety of web design and development. It’s so easy to use and understand and so flexible. My love for WordPress runs deep.