Tuesday, December 21, 2010

Easy CSS/HTML Page Part 3

We should discuss how CSS influences HTML, and vice versa. CSS has style organizations put together in classes and id's.

  • class = .nameofclass { }
  • id = #nameofid { }
A class uses a period before the name of the class. An id uses a hash mark (pound symbol) before the name of the id. The class form styles many types of areas, whereas the id form usually styles one specific area. HTML calls (tells the browser to look in the CSS for) these classes and id's, with this form:

  • <div class="nameofclass"></div>
  • <div id="nameofid"></div>
So the CSS needs a class or id name that the HTML can call, to style a box's position, size, or look. If the CSS class or id was missing or wrong, the browser would ignore the call, and display the box/area however it can. The same goes for a missing/wrong class/id within the HTML.

These class or id names also shorten the HTML code (which is already pretty long). We can call the same class many times for different areas, with just one name. Then, those areas are styled with the exact same position, size, and look.

Friday, December 17, 2010

Easy CSS/HTML Page Part 2

Welcome back. Our created page is a dark background with light text. In the top CSS, we changed the font color with the 'color:#', and the background color with the 'background-color:#'.

So, we can see that these css values are labeled similar to what they change. The beginning part of the css tag tells us where the objects are on the page, like the 'body'. To put the location, and the object being changed, together, we'll have:

body {background-color:#333333;color:#eeeeee;}

The curly brackets contain the changes of whatever is being changed, inside the 'body' part of the page. The six digit number after the colors are a hexadecimal code for digital coloring (2 numbers each for Red, Green, and Blue). The Hexadecimal range is 0123456789abcdef.

Just change the numbers and save, then refresh your browser. You'll see how the color changes. Closer to zero is darker, and closer to 'f' is lighter. If the RGB values are close together, it'll come out grayer. RGB values that are further apart are a more saturated hue.

Also, we changed the size and look of the font (text). The part of the tag that contained 'font-size:1em;' changed the size to 1em (unit). The 'font-family:Verdana, Arial, Helvetica, sans-serif;' part of the css changed the look of the font to what style the browser would display first, probably Verdana. The 'sans-serif' means a font without special decoration, but probably still the Verdana font (just without decoration).

We can tell that there are default colors and text fonts that are already there, even before we change them. So just know that when we see text that isn't changed, even though we changed the css, the browser isn't reading our code correctly.

This happens if we forget curly brackets, forget a semi-colon at the end of a value, omit a proper dash -, or have misspelled tags. That's an easy fix, since we can Google for our particular tag's attributes.

Remember our CSS format for tags is tag{element:value;}. That's pretty simple, if we understand where and what to change.

We'll need to tell all browsers how to read our css/html code, since all browsers are different. If we don't, the browsers will go into what's called 'quirks mode', which will display our code according to old standards that are not part of a single web standard.

The way we tell our browser this information is through a Doctype, or document type. It goes first in our page, before anything else, which makes sense, as browsers read from top to bottom of the document. Use this Transitional Doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Paste it above the <html> tag at the top of our document.

Next, we may want to move our text around the page. This is called positioning. We need to know from where to move the object, text, etc. Do we move it from the edge of the browser, or from another object?

We can differentiate the position with the terms, 'absolute' and 'relative'. Also, we can move things within other things. That would be 'padding'. Moving things away from other things is called 'margin'.

So we don't get confused with all the terms, let's slowly change our code. Let's add a class to change the style of a box (division):

.one {position:absolute;}

Paste this right above the closing </style> tag. We're telling the browser we want to position a box (division) from the side of the browser (absolute position). We can see the box better if we put a visible, solid one pixel border around it:

.one {position:absolute; border:1px solid;}

Just add the border part where I have in the code. We also need to tell our HTML code where, in the document itself, to put this box. So, we can see that our position in the code also affects our position in the browser. Put the html division around our text:

<div class="one">main stuff (content) here</div>

The class="" part is telling the html to look in the css for a period with a name after it, like '.one'. That way, html knows what that division is supposed to look like, and positions it according to css. The name of our class is 'one', and the css symbol for class is the period.

Next, go back to the '.one' class in css, and add a margin (outside) around the box, 1em wide:

.one {position:absolute; border:1px solid; margin:1em;}

Paste the margin where it goes in the css; save document, then refresh browser. Our new box should have moved right and down from where it was. The margin pushed it 1em from the top and side of the browser. Let's move it even more:

.one {position:absolute; border:1px solid; margin:20em;}

After saving and refreshing, the box should now be much farther from the top and sides of the browser. How about giving some space inside the box (padding)?

.one {position:absolute; border:1px solid; margin:20em; padding:10px;}

The division box is now wider around the text (if it's not, save document and refresh browser). The padding placed a ten pixel width all around the text, inside the box.

Therefore, margins move the box around (outside), and padding moves the content (inside) of the box. Think of the browser as a box, and the division as a box inside of that. Boxes within boxes is mostly the idea of CSS positioning.

Wednesday, November 17, 2010

Easy CSS/HTML Page

Hey there. CSS and HTML are just letters, that mean a webpage that can be adjusted easily, to look however you want. Here's a simple example to get you started:

<html> <head>
<title>the page's title</title>
main stuff (content) here

Above is the HTML page that you'll save with the extension .html - you can save it from some simple editor like notepad, by showing all the files, and then saving, otherwise it'll save as a text file. Optionally, when saving, you can place quotes around the file, like "mypage.html", that will save it as an html file.

So that was the HTML part. Now we can write the CSS part:

<style type="text/css">
body {
font-family:Verdana, Arial, Helvetica, sans-serif;

Now, you can put this CSS right above the closing </head> tag of the HTML file. So you can see that we need to let the browser see the CSS stuff first, before it sees the main content in the body.

Then, open up a browser, like Internet Explorer, Firefox, or Safari. Go to the file open, and look for your .html file that you saved on your computer. Open the file, and you'll notice the dark background color, with the lighter text (font).

You could learn HTML and CSS if you like. Another way is to just absorb it from making pages do different things that you want. The basic commands (tags) you'll need are what we wrote above.

Each HTML tag has this form:


The first one is the opening tag, and the last one is the closing tag. Likewise, the form for CSS is:

tag { }

The first word is what you're trying to change, and the curly brackets hold the changes between them.

Next, there are separate parts of the HTML page, like the html, head, title, and body.

  • The <html></html> tag simply means to begin writing html page tags, telling the browser where the html is (between the html tags).
  • The <head></head> tag holds any information the browser needs to know about the main content in the body (especially CSS styling).
  • The <title></title> tag is the text you'll see at the top of the browser (where you drag your browser around, and minimize/maximize, or close it).
  • The <body></body> tag is the main body of your content, that holds the text and pics of the subject of your site. This is the part that the CSS in the head section controls.
  • The <style></style> tag tells the browser where to look for CSS (between the style tags). What type of style is the type="text/css" , meaning the browser should look for text and CSS styling within the content.

Stay tuned as I explain the CSS stuff between the curly brackets. It basically has to do with fonts, and how they look. Then, we'll learn about adding a doctype and moving things around in the page (positioning).

Part 2

Tuesday, February 16, 2010

Positive Persuasion: an Idea for Sellers

1.You're reading some very interesting information, and then... the next sentence tells you 'buy the e-book', or, 'signup to read the rest of the story'.
2.Perhaps on the computer, you worked hard with something you'd like to save. Because it's the insane trial version, though, the program won't allow saves; you need to purchase the full version for that 'feature' to work.
  These sales tactics are annoying. I'm not buying; not because that service isn't something I need, but just because my time is already invested, and the seller withholds its outcome.   Usually, these selling persuasions are a surprise, with no warning. Won't I therefore, negatively react to a suggestion to purchase or signup? Just as aggravating, the parts that are missing from trials are usually intrinsic and basic to the trial's use. What enticement do I have to purchase a seemingly broken product?   Should sellers choose to market to personalities like mine, a change of strategy would be this: If your trial is free, make it 100% free, with full operation of features (or don't call it 'free', or don't offer at all). Should you offer information, offer what parts you're willing, and state at the title that it's only partially complete.   Overall, don't use a sales pitch that's a surprise. It's like a bill, that, from the outside, looks like a check. Keep the interest going by being up-front about offers. Merchants know that part of selling is persuasion. To me as a consumer, that should be positive persuasion, based on an already positive interest in their product.