NH Web Design Blog

Beginning HTML, CSS, and XHTML Should be Fun

March 19th, 2009

One Frustrated Web Designer

A man called me in desperation, asking for help. He was an IT kind of guy (a computer software expert), but admitted that he was over his head with his first website design. He was using Adobe Dreamweaver (an HTML editor) and working with templates, but had reached the point of great frustration because things were going wrong.

coffee cup If you are also a confused or frustrated beginner, grab a cup of coffee, take a deep breath, and take a look here.

What is HTML?

computer user To begin with, a web page is created using a language called HTML (Hypertext Markup Language). It’s the simple code that’s used to create the structure of web pages.

When writing HTML, you add “tags” to the text in order to create the structure. These tags tell the web browser how to display your web page to visitors.

Take a look:

<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<p>I will see this part of my web page in a browser.</p>
</body>
</html>

When you view the resulting page in a web browser, the tags are gone and all you see is the text in RED. That’s because the tags tell the browser how to display pages but do not show themselves. Visitors see information between the opening and closing “body” tags, but not the tags themselves.

Do you want to see some code like this? You can use your internet browser to view the HTML source code of most web pages.

html view Right-click on an empty spot on a web page and select “View Source” or use a similar option depending on your browser. You can also do the same by going to the menu bar on Internet Explorer and click View -> Source. If you are using a Firefox Browser, click View -> Page Source.

You’ll see a strange-looking page of text. If you look close, you may spot the <html> opening tag near the beginning and the </html> closing tag at the end of the page.

Web browsers interpret this HTML code and display it in a human-friendly way. Thank goodness!

Here’s a great HTML Tutorial. and another Beginner HTML Tutorial.

quiz Next, warm up your coffee and try this HTML Quiz. Do it just for fun! No one is watching.

What is CSS?

HTML and CSS go hand in hand. So if you learn one, you should learn the other.

CSS (Cascading Style Sheets) is a language used for styling a website. CSS can control the text, colors, backgrounds, margins, layout and more.

Usually this is done in an external style sheet. You will link your HTML page to your CSS page.

Do you want your web page to have a pink background? Use CSS.
Do you want some space around your text? Use CSS.
Do you want to make your life easier? Use a separate cascading style sheet (CSS). You can control the layout of many web pages from that one single style sheet. That’s nice!

CSS files are just specially formatted text files much in the same way HTML pages are. They are saved with the extension (.css).

coffee and snack Okay, take a break, grab another cup of coffee, add a snack and check out this CSS Tutorial or this helpful HTML and CSS Video.

quiz

Then try a Fun CSS Quiz.

What is XHTML?

You may have heard about XHTML (eXtensible HyperText Markup Language). It is a bit more serious than HTML. It has more rules. XHTML may be the replacement for HTML someday.

What makes it more serious? XHTML pages must be well-formed. The source code also looks more complicated. Plus, the XHTML tags you create have specific rules.

Examples: Every tag needs an end tag. (A start tag like <p> for paragraph needs an end tag like </p>). No capital letters are allowed in the tags. Tags must also be properly nested.

Learn about it here: HTML to XHTML in 10 Steps or Learning XHTML

Also try this great XHTML Beginner Tutorial.

quiz Then take the XHTML Quiz. This one may require a little more concentration. Maybe a lot more. XHTML takes patience and practice.

A Bit About Images on the Web

Images are not technically inserted into a web page. Instead, web pages are linked to images. On a web page, we use the image tag <img> to create a holding space for the image. When someone loads a web page (by going to the URL), it is the browser, at that moment, that actually gets the image from the web server and inserts it into the page for you to see. Learn more about HTML Images.

In your HTML or XHTML page, you have to make sure that the images you are linking to always stay in the same spot in relation to the web page. If you mess up that path between the HTML page and the images it is referencing, you get that broken link icon that everyone hates to see. You are seeing that broken link icon because the browser can’t find the image you are referencing in the <img> tag.

You can also make a reference to an image using CSS. You can set the background image of any CSS element in your style sheet and control how the CSS background image is displayed.

You may choose to have it repeat horizontally (see the ladybug below), vertically, or not at all. But again, you must have a correct path to the image, or else it won’t be displayed in the browser.

Back to the IT Software Expert

After I spent the afternoon with the IT computer software expert helping him fix his broken website, he seemed much more relaxed. He had a better understanding of the source code behind the colorful web page he was trying to build.

We had been talking about CSS and HTML for hours. At the end he said, “Wow! I can tell that you are really passionate about what you do.” Perhaps I talked too much!

Posted in HTML and CSS, Web Design | 11 Comments »

Not So Computer Savvy but Brilliant in Business

March 9th, 2009

confused computer user I have begun to tweet at Twitter. It’s all new to me. Being a Twitter Newbie (novice) reminds me how confusing the Internet can be for those who are not quite so computer savvy.

Twitter Newbie

When I joined the Twitter community, I understood that it was a social networking and microblogging service. Okay. But what exactly is the purpose of it? I wondered.

I decided to tiptoe in anyway just out of curiosity. I learned that the itty bitty messages I post in 140 characters or less are called tweets and if people find me interesting enough they can become a follower to see more itty bitty messages. It is like having a mini blog. There’s no pressure to organize your thoughts into one big message. You can just put in a famous quote, link to your latest blog post, ask a question, or just say what you are having for lunch. No kidding. It’s actually quite fun.

You basically answer the question: “What are you doing?” But you don’t have to really do that. Here’s a quick peek:

As I struggle to think of juicy tidbits of information to post at Twitter, I feel that same anxiety that some people feel as they explore the World Wide Web. It can be especially frustrating when the not so computer savvy people decide to have their first website. These people are brilliant with their business strategies. But they are Newbies on the Internet.

Example One:

One client recently asked me if she should add another web page to her site because she felt that she had to answer the same questions over and over again.

Perfect! I told her. Your web site should answer questions for you. It should make your life easier.

contact form

Great! she said. Then she mentioned how a client had asked her what her email address was. She thought for a moment and realized she didn’t know it. Visitors to her web site had always contacted her through her contact form and her daughter, the computer savvy one, answered the emails.

Example Two:

Another web design client asked me if it would cost any more to have a website done in color instead of black and white. Wow! What a fascinating question. She was thinking in terms of the print world.

In the web design world, using tons of colors doesn’t cost a penny more. The only differences between the two images below is that the colored one has a slightly larger file size. If the colored one is added to a website, it will take a split second longer to load the website in a browser when someone comes to visit. But no one will notice the difference between these two little images, even with all those colors.

Read more about the differences between Web Design and Print Design.

black-and-white1 color-image

Example Three:

In another instance, a client called me in a panic about his new live website. All the pages looked great, except the home page, he thought. So I asked him to refresh the page a couple of times in his web browser. This was a term that was second nature to me, but confusing to him.

Did you know that each time you access a web page through your web browser, the browser caches (stores) it? The browser does this so that images etc. do not have to be retrieved from the web site each time you visit. Refreshing a web page makes the browser get new copies of all items on the page. Once my client refreshed his home page, all was fine once again.

The refresh button is located on the toolbar of your web browser. It looks similar to the blue circle below with the swirl arrow in it.

What is a Toolbar? A toolbar is a menu bar of buttons and input boxes on the browser. The standard toolbar includes the browser’s back, forward, home and refresh buttons, as well as the address box and search box.

What is a Web Browser? A web browser is a software application that enables users to access the World Wide Web. When you sit down and look at web pages, you are using a web browser. Examples are Microsoft Internet Explorer, Mozilla Firefox, Google Chrome, Safari, and Camino.

Here is a great introduction to web browsers.

Anatomy of a Web Browser: Understanding Browser Terms

web browser icons

If you are also one of those not so computer savvy business people, don’t despair.

Just grab your computer (pc or mac), open up your web browser (maybe Internet Explorer or Firefox), and hop on the World Wide Web (internet). Check out some web sites and try a few search engines (maybe Google or Yahoo). Heck. Why not even take a peek at Twitter. You can find me there at Twitter/Crimson_Designs. Be prepared. I may have posted some juicy tidbits that day or you might just find out what I had for lunch.

Posted in Social Media, Web Design | 5 Comments »

Web Design is not Print Design

March 1st, 2009

One mistake people often make with their first website is to treat it as they would print media. Both involve effective layout and the use of design elements but there are also some major differences. Let’s take a look.

PRINT DESIGN

Print design is 2-dimensional.

The print designer controls the appearance of everything.

Printed material always look the same. Once it is printed, that’s the way it stays.

When print designers add typography, they can dig through their font libraries without any restrictions.

The use of images is also unrestricted.

No matter how many images are used, anybody can see them instantly.

WEB DESIGN

The Web is interactive. Moving around is what the Web is all about.

Visitors are supposed to scroll and click.

Content is the priority. The artwork is there to compliment the content on a website.

Web content should not strain the eyes.

Good web designers look at their websites through the eyes of the targeted audience.

They try to accommodate all types of users, user platforms, and user behaviors.

Web Pages

The web designer’s main job is to make the Internet easy to use and get people the information they want. The designer is also trying to create pages that are distinctive, memorable, and engaging. The overall goal is to keep the user on a site for as long as possible.

It is foolish to try to make a web page work just like a printed page. Precise placement of elements on a web page goes against the nature of HTML.

You can’t just scan the pages of your print catalog and put up the resulting images online as a website.

Fonts

letters

A print designer can use any font under the sun, but a web designer cannot. Web sites draw fonts from what is available on the visitor’s computer. Due to this, web designers tend to use fonts that are universal. Some of these universal fonts include Verdana, Arial, Helvetica, Times, and Georgia. These fonts makes it easier for everyone to read.

Color on computers can also be deceiving. You never know exactly how a color in a web site is going to look on each person’s computer monitor.

Images

photos

Images must be optimized for the web. Web designers have to consider carefully what images they’d like to use and be considerate of those viewers who may have a hard time loading them or seeing them.

A site that is 100% graphics will would be easy to lay out, but it would take forever to load.

A web designer must also keep in mind visitors with impaired vision or other disabilities. Accessible websites provide the maximum potential audience by allowing any Web user to access a site.

german text It makes sense for web designers to use text in place of images where they can, so that those seeking information can easily find it.

Accessible websites also make it easy for search engines to index them.

Imagine seeing the image on the right. What does it mean to you?

This is the same thing a person with impaired vision and search engines may struggle with. How will they interpret the words in an image?

HTML

When a designer writes a web page, they are writing in a specific language (HTML). Web designers must be proficient in HTML and CSS. They need to understand how a page is put together, how it is delivered to a browser, how it behaves, and how it is used by real people.

Websites are more like dynamic documents that can be continually improved. Having a well-designed site can improve your company’s image and increase the likelihood customers will return.

Posted in Web Design | 1 Comment »