Atypical Homeschool» HTML and CSS

Stylin’

Ron — Sat, 21 Jan 2006 05:39:49 +0000

I haven’t made the time to write a succinct blog entry today. I had it in mind when I sat down earlier this afternoon. What I got caught up in was re-styling the WordPress 2.0 Admin Panel. Being an unschooler at heart, I mostly didn’t give up on it until I had most of it done. Andrea and I had discussed working away at changing it over the next couple weeks. And she had started it yesterday. Supper or something had interferred with the whole process. While it was still usable, the panel wasn’t very Ron-friendly for writing. I did those 3 posts last night. But today, the thought of using it again just got me all distracted

Anyway, here is the original panel where you would write an entry in WP 2.0:

And here is the new version: (It’s worth noting that I only changed the stylesheet.)

Unofficial poll: Which one is easier on the eyes?

Making a simple web page

andrea — Mon, 16 Jan 2006 12:50:41 +0000

There are many good websites out there to tell you all you’ll ever need to know about making web pages, but some of them are either hard to understand, too flashy, or the examples aren’t really relevant to what you might want to do.

This tutorial is all about making a simple web page with text and graphic links to places that you, your younger siblings (if you are a HEK) or your children (if you’re a HEP) frequently visit. It is also known as a portal page.

Step 1: Building the framework of the page.

On your computer, open up Notepad or a similar text editor. I like to use Notepad because I can better control exactly what gets stuck in the page behind the scenes. First, we have to tell the browser that this is an HTML document, so we type this:

Almost every HTML tag has a matching closing tag, so skip down a few spaces and type this:

Now when a web browser looks at this file, it knows that everything between these tags will be displayed in a special manner. But even better, everything that you want to be displayed in the main body of your webpage goes between two matching tags called (you guessed it) BODY.

Your web page bones should now look like this:

Step 2: Giving your page a title.

Every page needs a title so the reader knows what it is about. If you’re making this portal page for small children, a title helps their reading skills, too.

Right after the first BODY tag, place a heading tag like this:

The h1 makes the letters nice and big and keeps them on their own line. Type in whatever you want for a title like “My Webpage” and add the matching end tag. It should now look like this:

My Webpage

If you want the letters slightly smaller, try using h2 or h3.

Step 3 and continuously: Saving your work.

This is probably a good time to save all your work to a file. Click “save” from the menu in Notepad, and call the file something meaningful, like “mywebpage”. Be sure to save this file with an HTML extension and not a .txt. It’s also handy to save it right onto your desktop. Now minimize the Notepad window by clicking on that little minus sign up in the top right corner. There should be a webpage icon right there on your desktop, with the words “mywebpage”. Clicking on it should open it up in your brower window, and you’ll see a broad expanse of white webpage with your title in big letters at the top.

Cool, huh?

Let’s switch back to our file in Notepad. Click on it down there on the status bar, and we’ll see what we’ve accomplished so far. It should look something like this:

`My Webpage`

Step 4: Adding some links.

A web page is just some text and wouldn’t be any fun without somewhere to click, so here’s how to make that magic. You’ll need two things; the URL and whatever title you want to give the link.

The code to make your text “clickable” looks like this:

http://where-you-want-to-go.com”> Click here on this text!

Note this has a few parts: the beginning of the tag (the a href part), the URL of the page (close the tag), whatever text or the tile of the page to click, and the ending tag.

That is how you make a link. Put few links on one page, and now you have your very own portal page. If you have saved onto your desktop like described above, you have an easy, fast and relatively safer way to get to your (or your children’s) favorite Internet sites.

Step 5: Minor formatting.

Now, you don’t just want a whole string of links, you may want to add some descriptive text. How do you get to the next line? How do you make a paragraph? Sure, you can format it in Notepad, but we need to tell the browser what to do.

To get to a new line, you type the break tag. This is a self-contained tag, meaning it has no matching end tag, so the new rules are to make it self-closing. It looks like this:

Note the space then the closing bracket.

In action, it may looke like this:

This is my first line of text.

I want this text on the next line.

The browser makes it look like this:

This is my first line of text.
I want this text on the next line.

Let’s say we want a bit more space, say, between paragraphs of text. I’m glad you asked, because we’re up to the paragraph tag.

This is a paragraph. It has many sentences. They usually follow the same train of thought, but mine tend to be a bit rambly.

Looking under the hood at the web page we are building, it could look a lot like this:

`My Webpage`



Best homeschooling blog ever. 


Ron and Andrea sure are funny. And they have some interesting things to say about homeschooling. 


 Andrea has her own blog here.She writes funny stories about everyday life. Sometimes she makes me cry, though.

You can probably imagine how that web page looks. That might be enough to get you started and I hope to encourage you to keep learning. In the next installment I’ll discuss images and making things look pretty, unless you figure out how to do that by then. Here’s a handy dandy HTML tag reference chart to get you going.

Creating a Banner Image

Ron — Mon, 12 Dec 2005 01:26:07 +0000

I’ll take you through the steps I followed in creating the poinsetta banner image and explain how I chose the colours for the ‘Atypical Christmas’ WordPress Theme.

The only tool I used was The Gimp. I edited the Cascading Style Sheet using the WordPress admin panel and edited the theme ‘live’ (look under Presentation->Theme Editor->Stylesheet).

Step #1:

I chose the image. This is the what the original image looked like. If you would like to follow the tutorial, you can view the image in our gallery you should be able to save the image to your computer.

Step #2:

If you have a newer version of Windows, you should be able to right click on the image in Windows Explorer and Open With… gimp-win-remote. This will open the image in GIMP. If you do not have that option on your context menu, then you can open GIMP and open the image using Open on the File menu. Unless you have a monitor with a much larger resolution than mine, GIMP will set the zoom on the image to 50 or 66%. It will look something like this:

A quick note I’ll make here is that if you make a mistake in GIMP, it is no big deal. You can back out of any operation by pressing Ctrl-Z (or using undo on the Edit menu).

Step #3:

Notice that there is a low spot of the background in the top right of the red poinsetta and high point in the background where the poinsettas come together at the bottom. To maximize the area of the photo available to be included in the banner, it would be nice if we could crop a rectangle out of image on an angle. GIMP doesn’t allow us to do that. BUT, it does allow us to rotate the image. So, that’s what I did. I rotated a -10 degrees. You can find rotate under the Tools menu (Tools->Transform Tools->Rotate). The resultant image looked like this:

The checkerboard looking area in the top left corner is the area of the new image which is transparent. This is because the original image was rotated off of that area.

Step #4:

Chose the top left corner of the portion of the image that you want to be your banner image. The point I selected is shown with the white diamond in the red poinsetta in the image above. You can see it’s position in the bottom left corner of the screen shot. It was 220 pixels from the left of the picture and 400 from the top.

To make that point the top left of the image, I resized the image canvas under the Image menu (Image->Canvas Size…). Here you have to do a bit of math. The original canvas is 1600 pixels wide by 1200 high. I wanted to crop 400 off the top and 220 off the left. So, the new canvas width is 1600 – 220 = 1380 and the new height is 1200 – 400 = 800.

Once in the canvas size dialog, the first thing to do is click on the button that looks like it has 3 links of a chain on it. That button locks and unlocks the maintain aspect ratio option. The aspect ratio is the ratio of the width to the height. If the aspect ratio is locked then the new size of the canvas must have the same ratio as the original canvas size (4/3). Since the final size of the canvas from this operation is not going to be 4/3 then we have to unlock the ratio.

With the aspect ratio unlocked enter the new width in the X (1380) and Y (800). Below those 2 settings are the offset of the X and Y. You can use these to position the top left corner of the new canvas. To move into the image use negative values for the X and Y of the offset. Enter the new X (-220) and Y (-400) offset. The canvas size dialog has a preview area which will show the resulting canvas using a thin rectangular line.

Complete the operation by clicking the Resize button. The result looked something like this:

Step #5:

In the above image, there is the checked area in the bottom right of the image. It is transparent for the same reason as the top left was earlier in the tutorial.

If you look toward the right of the image, I’ve marked the bottom right corner of the area that I wanted to include in the banner with a black diamond. This time the canvas resize is much easier because I wanted the finished canvas to come from the top left of the image. As it turns out, the banner size is 1250 pixels wide and 250 high.

Go back into the canvas resize option, unlock the aspect ratio and enter the new canvas size X (1250) and Y(250). Do not enter anything in the offset X and Y. Just click the resize button.

The resultant image looked something like this:

Step #6:

The last thing I did with the image is resize it. I wanted the banner to be 200 pixels high. I found that option under the image menu (Image->Scale image). To produce the image below, I changed the Y size to 200 pixels. GIMP automatically changed the X to 1000 pixels (because the aspect ratio is locked). In the banner at the top of the page, I believe I unlocked the aspect ratio and just scaled the image in the Y direction to 200 pixels. This produced a longer banner image.

Step #7:

The last thing I did was choose colours to be applied to the style of the web page. I used GIMP to find those colours. GIMP has a colour picker tool. The button for it is shown here:

I’ve circled the areas of the image that I chose the colours from:

I spent 10 – 15 minutes picking colours until I found ones that I liked and went well together. The important thing to remember is that what brings a web page style together is to choose colours from the images that are shown on the page. If you have watched professionals in interior design shows, they almost always pick 2 or 3 items to choose their colour palette from.

That’s basically it.