freeyourdesign » the basics http://freeyourdesign.com break free by learning Wed, 06 Oct 2010 19:32:24 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 The Basics – Learning CSS – Where Styles Go http://freeyourdesign.com/the-basics/the-basics-learning-css-where-styles-go/ http://freeyourdesign.com/the-basics/the-basics-learning-css-where-styles-go/#comments Mon, 04 Feb 2008 17:57:40 +0000 fyd http://freeyourdesign.com/the-basics/the-basics-learning-css-where-styles-go/ flagCSS – Cascading Style Sheets – it's what you use these days to 'style' your Web pages. CSS is used to change font colors, and backgrounds, borders, format lists, links, etc. It is also used to arrange elements on the page and form certain page layouts.

It use to be that Tables or Frames were used when making a layout for a Web page, but now CSS is the way to go. Tables really are no longer the accepted way to create web layouts. Every thing can be done with CSS and with cleaner and less code. Plus, CSS makes it very easy to format all the pages in your site. Actually, that's the main purpose of CSS.

Where Does CSS Go

There are three ways to add CSS to your Web page.

CSS can be put into a separate, or external .css file, and be linked to via a statement in the head section of your HTML page

<html>
<head>
<title>Learning CSS</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
...

You can also have an embedded, or internal, style sheet which is put right into the head section of the HTML page

<html>
<head>
<title>Learning CSS</title>
<style type="text/css">
your styles go here
</style>
</head>
<body>
...

Or you can use inline styles. These are used inside the body of HTML to style a single element.

<html>
<head>
<title>Learning CSS</title>
</head>
<body>
<p style="color:#999999; border: 1px solid #000000;">
Some paragraph text
</p>
</body>
</html>

We will learn what color and border do later.

You can actually use all three of these methods in a single page. Sometimes you will have elements on a page that you want to be styled differently than all the other pages. That's where the embedded and inline styles can come into play. If you are using all three, you have to pay attention to the order you set things up. So, usually you put in your external style sheet link first. Then you do your embedded style sheet. Finally, you can add inline styles to elements. Basically, the inline style will have the highest priority – or it will override anything in the external or embedded style sheet. The embedded style sheet will have priority over the external style sheet as long as it is after the link to the external style sheet.

So, now we know where the styles go – next time we will learn about the syntax of CSS.

]]> http://freeyourdesign.com/the-basics/the-basics-learning-css-where-styles-go/feed/ 0 The Basics – List Creation http://freeyourdesign.com/the-basics/the-basics-list-creation/ http://freeyourdesign.com/the-basics/the-basics-list-creation/#comments Mon, 21 Jan 2008 18:11:34 +0000 fyd http://freeyourdesign.com/the-basics/the-basics-list-creation/ listsAnother block-level element that is used often is the list. We will be going over three types of lists. Ordered Lists are used for items that you want to appear in sequential order – each item will have a number before it. Unordered Lists are used when the order of items isn't as important – each item will have a bullet in front of it. Finally, Definition Lists which are used when defining a term. Let's get started.

Ordered Lists

Here is the code to create an ordered list:

<html>
<head>
<title>Ordered List</title>
</head>
<body>

<ol> - starting ordered list
<li>List Item 1</li> - list element
<li>List Item 2</li>
<li>List Item 3</li>
<li>Last List Item</li>
</ol> - ending ordered list

</body>
</html>

results

So as you can see, we start an ordered list with <ol> and end it with </ol>. Each item you want to be in the list is surrounded by <li> and </li>. And like I said earlier there is a number in front of each item in the list.

Unordered Lists

Here is the code to create an unordered list:

<html>
<head>
<title>Unordered List</title>
</head>
<body>

<ul> - starting unordered list
<li>List Item 1</li> - list element
<li>List Item 2</li>
<li>List Item 3</li>
<li>Last List Item</li>
</ul> - ending unordered list

</body>
</html>

results

The setup is very similar to the ordered list except here we start with <ul> and end it with </ul>. Again, each item you want to be in the list is surrounded by <li> and </li>. And like I said earlier there is a bullet in front of each item in the list.

Definition Lists

Here is the code to create a definition list:

<html>
<head>
<title>Definition List</title>
</head>
<body>

<dl> - starting definition list
<dt>Term 1</dt> - term to define
<dd>The definition of term 1</li>
<dt>Term 2</dt>
<dd>The definition of term 2</dd>
</dl> - ending definition list

</body>
</html>

results

Definition lists are started similarly to the other two – we start with <dl> and end it with </dl>. The rest is a little different though. The term you would like to define is surrounded by <dt> and </dt>. Then the next thing you do is place the definition of that term between <dd> and </dd>. As you can see in the results, the definition is indented.

There you have it. Lists are pretty easy, but are used quite often. The best thing to do is to practice them. You can even nest lists within each other. I'll leave you with a nested list example.

<html>
<head>
<title>Nested Lists</title>
</head>
<body>
<ol> - starting ordered list
<li>Numbered Item 1 - open first ordered list element
	<ul> - starting unordered list
		<li>nested bullet 1</li>
		<li>nested bullet 2</li>
	</ul> - ending unordered list
</li> - close first ordered list element
<li>Numbered Item 2
	<ul>
		<li>nested bullet 1</li>
		<li>nested bullet 2</li>
	</ul>
</li>
</ol> - ending ordered list
</body>
</html>

results

It's a lot easier to indent your code when doing lists – it just makes it easier to read and follow, and remember it won't show up that way in the browser. When doing a nested list just remember to watch when you close your <li> tags.

]]> http://freeyourdesign.com/the-basics/the-basics-list-creation/feed/ 0 The Basics – HTML Headings http://freeyourdesign.com/the-basics/the-basics-html-headings/ http://freeyourdesign.com/the-basics/the-basics-html-headings/#comments Fri, 18 Jan 2008 17:33:50 +0000 fyd http://freeyourdesign.com/the-basics/the-basics-html-headings/ headingsSo, we've learned how to setup the basic shell for an HTML document and add a little text. Now we can get into a little more of the formatting for our site's content. I briefly mentioned block-level elements in the previous basics post when we used the <p> tag. Specifically, a block-level element displays our content in a separate section within the page. So, basically it's just setting it off from other items or blocks. The elements we will be using today just happen to be block-level elements. You will see how they separate from other sections of content. Enough with the chit-chat let's get going.

Heading Elements!

As you can see the heading elements will make your text really stand out from the normal content. We use <h#>content</h#> to create headings – where # is a number 1 through 6. <h1> is the largest heading while <h6> is the smallest. So let's make some headings:

<html>
<head>
<title>Some Headings</title>
</head>
<body>
<p>Some placeholder text to show how block-level
 elements separate</p>
<h1>h1 Heading</h1>
<h2>h2 Heading</h2>
<h3>h3 Heading</h3>
<h4>h4 Heading</h4>
<h5>h5 Heading</h5>
<h6>h6 Heading</h6>
<p>Some placeholder text to show how block-level
 elements separate</p>
</body>
</html>

My results
So, there they are – a little more diversity to your normal text. Notice how they separate from each other. There is extra room between each heading and each one starts on its own line. Which brings me to a side note:

HTML ignores white space. What's white space? It's just like it sounds – empty spaces between text, elements, tags, etc. For example, if you hold down the space bar between say the H and the e it will only read one space. So, just hitting the enter button at the end of a line does not mean it will look the same in the browser.

<html>
<head>
<title>Some Headings</title>
</head>
<body>
<p>Some                  placeholder text to show
how block-level
 elements separate</p>
<h1>h1                 Heading</h1>
<h2>h2 He         ading</h2>
<h3>h3
Heading</h3>
<p>Some placeholder
text to show how block-level
 elements separate</p>
</body>
</html>

results
Even with all those extra spaces and returns HTML only counts one of the spaces and doesn't pay attention to the line returns.

Another word on block-level elements – You are not suppose to place block-level elements inside other block-level elements. For example, <p><h1>Hello</h1></p> is not valid. Yes, it will still show up in an Internet browser but it is still not good practice and won't validate(will learn more about validation in the future).

That's it for now…

]]> http://freeyourdesign.com/the-basics/the-basics-html-headings/feed/ 0 The Basics – HTML Hello World http://freeyourdesign.com/the-basics/the-basics-html-hello-world/ http://freeyourdesign.com/the-basics/the-basics-html-hello-world/#comments Mon, 14 Jan 2008 23:32:52 +0000 fyd http://freeyourdesign.com/uncategorized/the-basics-html-hello-world/ If you're looking to get started learning HTML the good old 'Hello World' is a fine place to start. I'll take you through the simple steps of setting up a very basic HTML web page. We will just display a simple line of text saying… Hello World!

So, let's get started. Here is what you need:

  • Text Editor – I'll be using NotePad
  • Internet Browser – Firefox for me, but Internet Explorer is fine

You don't need much – here we go…

File setup

First of all, open up NotePad
Goto File->Save As… Pick where you want to save your file and in the File name: box type in the name you want and a .html – I'm using hello.html
The .html tells the computer the file will be used in an Internet browser other wise it would just be a text file.

Some HTML

Now we'll get started into the HTML. First, we are going to create the basic shell that you need for a web page. Here is the code just type it into NotePad(just the blue text) – I'll explain it next:

<html> - marks the start of an HTML document
<head> - contains info about the document
<title></title> - page title shows in browsers title bar
</head> - head section has ended
<body> - where the content is displayed
</body> - body section has ended
</html> - end of HTML document

So, that is the basic shell for any HTML page (technically the title doesn't have to be there). Of course, if you look at it in your browser you aren't going to see anything yet. But before we get into our content lets talk a little bit more about that code we just typed in.

Those 'things' you just typed in are tags. Now a days tags in HTML will always be closed because that is the standard(more on that in the future). There are two-sided tags. What two-sided means is that each tag has an opening tag and a closing tag. <></> The / indicates the second or closing tag. And there are one-sided tags which close inside itself. It looks like this < /> – the / shows that the one-sided tag has been closed. We don't have to worry about that just yet.

We call what the word inside the tag an element. So it's <element></element> – Then there are empty elements which are basically one-sided tags <element />

Let's do two more things to our code – add a title and output some text – so we can finally see the results of our work.

<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>Hello World!</p>  - our text in a paragraph tag
</body>
</html>

Alright – after you save the file – the title 'My First HTML Page' will show up in the bar at the very top of your web browser and you should see the text 'Hello World!' in your browser. My results

The new tag we used here was the <p></p> tag or the paragraph tag. It is what we call a block-level element. The paragraph tag tells the browser to start a new line with a blank space above it – so it helps separate blocks of text. Notice we put the text inside the <body></body> tag. This is where we will put anything we want to display in the browser window.

I think that's a good place to stop for now. In the future we will get into headings, images, color, css properties, and code needed for things like validation.

]]> http://freeyourdesign.com/the-basics/the-basics-html-hello-world/feed/ 0