Category: HTML / CSS

Learning some shorthand CSS (MFW#7)

September 13th, 2009

“My First Website” series navigation: first postwhole series

mfw7In the last post in this series we centered our web page, added some padding and margins, and put a border around it all. But, in order to do so, it took about 13 lines of CSS code. Ouch! Most people, after seeing that much coding, would give up the idea of hand-coding a website and run to a WYSIWYG visual editor.

Never fear, there are actually a few ways to take that obnoxiously long CSS code and shrink it down to only 4 lines! In this post, you’ll learn how to miniaturize your CSS code and — as promised — talk about some spacing anomalies.

Read on…

HTML line break tag – when and how to use it

August 4th, 2009

HTML line break codeA lot of beginners to website design want to know how to create a line break using HTML. And while the tag used to create a line break is easy to remember, knowing when and how to use it correctly is a little more complicated. In addition, there are many times when you shouldn’t even use the HTML line break code at all.

In this post we’ll take a look at line breaks, what is the HTML tag for one, and when to and not to use them.

(By the way, if this is your first time visiting Newbie Website Design, then I encourage you to check out the My First Website series to learn how to build websites the right way.)

Let’s get learn more about HTML line breaks, shall we?

Read on…

Margins, padding, and borders oh my! Plus centering a website with CSS (MFW#6)

August 3rd, 2009

“My First Website” series navigation: first postwhole series

mpbIn this post of the “My First Website” series, we’re not going to touch the HTML of our website at all! Instead, we will focus only on the CSS. Specifically, how to add margins, padding, and borders. In addition, we are going to take our web page (which was stuck hard and fast to the left side of the browser window) and center it using some simple CSS.

If you haven’t done so already, fire up Notepad (Windows) or TextEdit (Mac), open the document called “style.css”, and get your “index.html” loaded up in your browser to view your results as you go through this tutorial…

Read on…

Adding some CSS to our website (MFW#5)

July 28th, 2009

“My First Website” series navigation: first postwhole series

css-babyIt’s time for the moment you’ve all been waiting for: adding CSS to our website! In the previous post in this series we finally were able to get some very basic content on our first website. Unfortunately, as far as websites go, it’s pretty lame — no styling, no colors, and what we got was one long liquid layout (a layout whose width varies with the width of the browser window.)

So roll up your sleeves, get Notepad, TextEdit, or your favorite text-digesting software ready to go, because we’re gonna add some CSS!

Read on…

Filling out our webpage with HTML (MFW#4)

July 16th, 2009

“My First Website” series navigation: first postwhole series

HTML headings and paragraphsIn this installment of My First Website, we’ll build upon the simple web page we created in the previous post in the series. You’ll learn about headings and how to create them as well as dividing up your content into paragraphs. Yes, slowly but surely we are getting into more of the “meat and potatoes” of HTML!

But before we can tuck in our napkin and dine on some HTML goodness, let’s get your web page ready to be viewed on your own browser. And it’s very easy to do.

Let’s begin…

Read on…

First web page with HTML (MFW#3)

July 3rd, 2009

“My First Website” series navigation: first postwhole series

My First Website 3Now it’s time to make our first web page with HTML! This, of course, is going to be a very, very basic web page. But it’s important to understand exactly what the HTML of a basic web page looks like and how each HTML element and tag function.

So let’s dive right in, cut to the chase, get to the point, (and any other expressions that you know of that make good transitions in writing… ;) )

All HTML web pages MUST have these

All web pages must contain certain “elements” or “items” that allow browsers to recognize them as being web pages. As you may have experienced, your browser can render (display on your screen) many kinds of files such as single images, .PDF files, audio-only pages, and a multitude of others. So, in order for your browser to know that your web page really IS a web page, it must contain the following:

Read on…

Cascading Style Sheets – CSS

May 6th, 2009

CSS-cascading style sheetsIn the previous post, you learned what is HTML and XHTML and a few of the most commonly used tags. If you simply added a few more tags to your HTML vocabulary you could make some decent websites. But why would you want to stop there when there is the wide and wonderful world of Cascading Style Sheets (CSS) just over the horizon…

Pre-CSS: the dark age of website design

Before Cascading Style Sheets came into being in the world of website design, designers had to put detailed HTML tags into every web page. These tags controlled things like font size, font color, background color, line height, lists, etc. etc. etc. This was all fine and dandy if your website only had a few pages.

As the web grew so did the size of websites. Gone were the days of sites that had a dozen or two pages only. The next generation of websites grew to hundreds and hundreds of pages. News sites are a prime example.

Now imagine this:
Read on…

What is HTML and XHTML?

May 2nd, 2009

What is HTML and XHTML?To the newbie website designer, acronyms like HTML and XHTML can seem like strange and wild foreign languages that only people with the “tech” gene turned on can fathom. But they are not that hard to understand at all. And you certainly don’t need to undergo gene therapy to master them.

HTML stands for “HyperText Markup Language”. XHTML stands for “Extensible HyperText Markup Language”.

Yada. Yada. Yada.

Let’s find out what those actually mean.
Read on…