Web Hosting Show » Web Design http://www.webhostingshow.com podcast about web hosts and web hosting topics Tue, 17 Jan 2012 12:22:50 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 More HTML Formatting Help http://www.webhostingshow.com/2012/01/17/more-html-formatting-help/ http://www.webhostingshow.com/2012/01/17/more-html-formatting-help/#comments Tue, 17 Jan 2012 12:22:50 +0000 Mitch http://www.webhostingshow.com/?p=3960 We have already covered some basic HTML tags you will use when writing your web page code. Here are a few more that you might find come in handy, when designing your own web page.

Image Tags

In HTML, when you want to call upon an image to be displayed on your web page, you need to use the img tag. This tag tells the browser and web server that you are going to put an image here, and then what follows src= is the direct path to the image in question.

Code: <img src=”http://www.yourdomain.com/yourimage.jpg” />

Horizontal Rule Tags

The horizontal rule is for making a nice separator between sections of your web page. It acts as a single solid line that can be placed anywhere on your web page. It looks like this:

Code: <hr />

List Tags

If you want to format a list of topics on a single page, then the list tags will come in handy. You would start a list with the <ul> tag and end it with the </ul> tag. For each item on the list, you will want to wrap it in the <li> and </li> tags.

Code: <ul> <li>item #1</li> <li>item #2</li> </ul>

Ordered List Tags

If you want to format a list of topics on a single page, and have them numbered, the ordered list tags should be used. You would start a list with the <ol> tag and end it with the </ol> tag. For each item on the list, you will want to wrap it in the <li> and </li> tags.

Code: <ol> <li>item #1</li> <li>item #2</li> </ol>

Link Tags

Links are used to help users go from one page to the next page. The basic link is started with the <a href=”"> tag with the page’s path you want to link to inside the quotation marks. Then you type in the text of the link, and close it out with the </a> tag.

Code: <a href=”http://www.somedomain.com/pageiamlinkingto.html”>This Text is a Link</a>

Facebook Fan Page Come join the fun on the Web Hosting Show Facebook Fan Page!

© Mitch Keeler 2011 | Check out my firefox help site and my tech blog too!

  ]]> http://www.webhostingshow.com/2012/01/17/more-html-formatting-help/feed/ 1 Basic HTML Formatting Help http://www.webhostingshow.com/2012/01/09/basic-html-formatting-help/ http://www.webhostingshow.com/2012/01/09/basic-html-formatting-help/#comments Mon, 09 Jan 2012 12:34:43 +0000 Mitch http://www.webhostingshow.com/?p=3957 When it comes to formatting a web page using HTML code, you can think of it (kind of) in the same way you would look at formatting a document formatted by a word processor. You have your headlines to show you where one section starts and stops. You have your paragraphs to break up blocks of text, and you have line breaks to show where there should be a new line started. Now I am going to show you how to get some of these things done using HTML.

Headline Tags

The main purpose of the headline tags are make the titles stand out on the page, and also tell the browser and visitors where the titles are. You can use <h1></h1> for the main title, then (if needed) <h2></h2> for a secondary title. The bigger the number gets, the smaller or less important the title becomes. Remember to use the headline tags for headings only. It is not a good idea to use them to make text bigger or bolder. Also, search engines look at how your headline tags are used to help index the structure of the content on your web pages.

Code: <h1>This Is My Title</h1>

Paragraph Tags

The paragraph tags are important because they show the start (

) and then end

of where a paragraph should be on your web page. Having a long page with nothing but unformatted text is going to be very hard for the reader to navigate through. You want to break up the web page with the paragraph tags to make the web page your working on more scan-able for the end user.

Code: <p>This will be shown as it’s own paragraph on my web page.</p>

Line Break Tags

What if you don’t want to go to a new paragraph, and instead only want to break of one line and move to the line right under it? That is what the
or
tags are for. You might see either used, however it might be best to start using
to future-proof your web page for browsers in the future (just in case support for
was ever dropped.

Code: I can put this at the end of a line to show where I want it to stop. <br />

Blockquote Tags

When text has been blockquoted, it is often indented a little – in comparison with the other paragraphs around it. So you get white space to the left, and the margins around the text are enlarged a little ‘bit to seperate it from the rest of the text.

Code: <blockquote>This text will be shown as indented on my web page.</blockquote>

Facebook Fan Page Come join the fun on the Web Hosting Show Facebook Fan Page!

© Mitch Keeler 2011 | Check out my firefox help site and my tech blog too!

  ]]> http://www.webhostingshow.com/2012/01/09/basic-html-formatting-help/feed/ 0 Modify the HTML Body Tag http://www.webhostingshow.com/2011/12/12/modify-the-html-body-tag/ http://www.webhostingshow.com/2011/12/12/modify-the-html-body-tag/#comments Mon, 12 Dec 2011 12:32:38 +0000 Mitch http://www.webhostingshow.com/2011/12/12/modify-the-html-body-tag/ There are several HTML tags that can act as modifiers to how the web page looks visually.

First, let us re-visit the body tags. The body tags are there to tell the browser what part of the document is going to be visible to the end user when viewing the web page. This is marked up in your HTML code by putting a <body> where your web page’s content begins and a </body> tags where it ends.

How to Modify the Body Tag

So, any time you modify the body tags, you will be changing the way the web site is seen. There are several body tag modifiers you can use.

Change the Web Page’s Background Color

You can add bgcolor=”VALUE” (replacing VALUE with the name of the color or the HEX number) to change the background color for a web page.

Code: <body bgcolor=”white”> (this would make the background all white)

Change the Web Page’s Text Color

You can add text=”VALUE” (replacing VALUE with the name of the color or the HEX number) to change the background color for a web page.

Code: <body text=”black”> (this would make the text all black)

Change the Web Page’s Link Color

You can add link=”VALUE” (replacing VALUE with the name of the color or the HEX number) to change the color of links on a web page.

Code: <body link=”blue”> (this would make the links all blue)

Change the Web Page’s Visited Link Color

You can add vlink=”VALUE” (replacing VALUE with the name of the color or the HEX number) to change the color of link that have already been visited on a web page.

Code: <body vlink=”red”> (this would make the visited links red)

Change the Web Page’s Active Link Color

You can add alink=”VALUE” (replacing VALUE with the name of the color or the HEX number) to change the color of an active link.

Code: <body alink=”purple”> (this would make the active link purple)

More Helpful Body Tag Tips

You can use more than one of these at a time. If you wanted to, you could use more than one of these body modifiers at a time. you would just need to remember to put a space in between each body modifier. For example: 

<body bgcolor="black" color="white">

This is how you would link more than one together, this would tell the browser to make the background of the web page black and the text on the web page white. There is no limit to the number of these modifiers you can use on the body tag, as long as everything is formatted correctly, the web page should come out the way you want it to.

Only add these modifiers to the opening body tag. It is important to note that you only add these modifiers to the opening tag <body> and not the closing tag </body>.

Where can I find the HTML color or HEX values? You can find these many places. One of the best examples, is on w3school.com’s HTML colors page here:

Facebook Fan Page Come join the fun on the Web Hosting Show Facebook Fan Page!

© Mitch Keeler 2011 | Check out my firefox help site and my tech blog too!

  ]]> http://www.webhostingshow.com/2011/12/12/modify-the-html-body-tag/feed/ 2 How to Create the Best Website Navigation http://www.webhostingshow.com/2011/12/08/how-to-create-the-best-website-navigation/ http://www.webhostingshow.com/2011/12/08/how-to-create-the-best-website-navigation/#comments Thu, 08 Dec 2011 12:40:44 +0000 Mitch http://www.webhostingshow.com/2011/12/08/how-to-create-the-best-website-navigation/ The navigation section of your web site is one of the most important factors to a web site.

Why? The navigation is what allows you to move from one section of the web site to the next, linking web pages to web pages, and in all making a web site work. Here I hope to explain why web site navigation is important, along with a few other key factors you should remember when creating your web site.

Organize Your Web Pages

You should have a good idea of what your web site is going to be about, and how you are going to create it before you start with any HTML coding. One tool that comes in extremely handy when deciding navigation and how each page links to each idea is mind mapping. You can learn more about that process here:

As an example let us say you are working on a web site about you, so you have these basic web pages designed and ready to go:

  • The Home Page (the first thing people see)
  • An About Page (which gives more information about you, like your resume)
  • Your Contact Page (might have your e-mail address, or various means of contacting you)
  • Projects and Work (examples of the work you have done, or the projects you have worked on)

Now somewhere, you will need to have your web site navigation on each of the pages. This can be done in a number of different ways, but the most popular seems to be across the top. This way people can go to and from different parts of the web site, just by clicking the links you see on the top. I would suggest having them formatted this way:

Home | About Me | Contact Me | My Projects

Each one should link to the related pages above. A clean-cut and uniform navigation system is really a must.

Web Site Navigation Tips

Here are some more tips you should watch out for when it comes to web site navigation:

  • Create a site map to help people find exactly what they are looking for quickly.
  • There is no problem with highlighting certain pages you think deserve more attention, just make sure they don’t take away from your main web site navigation.
  • Be sure to use short and precise words in your links, so people will know exactly what they are getting.

This is no doubt that navigation plays a huge roll in how successful your web site is and how long they stick around it. If people can not navigate from web page to web page easily, they might grow frustrated and leave the web site all together. So, having a good navigation system means you can keep more visitors both on and returning to your hosted web site.

Facebook Fan Page Come join the fun on the Web Hosting Show Facebook Fan Page!

© Mitch Keeler 2011 | Check out my firefox help site and my tech blog too!

  ]]> http://www.webhostingshow.com/2011/12/08/how-to-create-the-best-website-navigation/feed/ 2 Basic Parts of a Website Layout http://www.webhostingshow.com/2011/12/07/basic-parts-of-a-website-layout/ http://www.webhostingshow.com/2011/12/07/basic-parts-of-a-website-layout/#comments Wed, 07 Dec 2011 12:21:19 +0000 Mitch http://www.webhostingshow.com/2011/12/07/basic-parts-of-a-website-layout/ When it comes to very basic website design, every website layout has four basic elements that you should learn. These are the HTML tags, the head tags, the title tags and the body tags.  Each one plays an important part in presenting your website data to the public.

Let’s look at this example of some very basic website code and then I’ll tell you about each part: 

<html>
<head>
<title>My First Web Site</title>
</head>
<body>
This is my first web site.  I hope you enjoy it!
</body>
</html>

The HTML Tags

The <html> and </html> tags wrapped around the text tells you this is an HTML document. They signify the start of the web page and the end of the web page.

The Head Tags

The <head> and </head> tags wrapped around the title tags tell the web browser this is where you can get specific information about this page, and how it is displayed. The head tags must be at the top of the page, after the first HTML tag.

The Title Tag

The <title> and </title> tags tells the browser that what is in between here is the title for the web page. It will be shown (in most browser) at the top of the menu and on the tab you are browsing from.

The Body Tags

The <body> and </body> tags wrapped around the text tells you this is the “body” of the web page, where the content you want displayed in the browser goes.

Remember to Close Your Tags

You might have noticed that these tags come in pair. One of these tags is used to start the command to the web browser, and the other is used to end or close it. For example, when you use the <title> tag, you are telling the web browser, “Hey, this is the web page’s title here, pay attention!”. Now, you need to tell the web browser that you are done telling it the title of your page page. You use the </title> tag to say, “Ok, done telling you what the title is – move along!”

Facebook Fan Page Come join the fun on the Web Hosting Show Facebook Fan Page!

© Mitch Keeler 2011 | Check out my firefox help site and my tech blog too!

  ]]> http://www.webhostingshow.com/2011/12/07/basic-parts-of-a-website-layout/feed/ 0 HTML Basics http://www.webhostingshow.com/2011/12/06/html-basics/ http://www.webhostingshow.com/2011/12/06/html-basics/#comments Tue, 06 Dec 2011 12:21:29 +0000 Mitch http://www.webhostingshow.com/2011/12/06/html-basics/ Hyper Text Markup Language, or as you know it HTML, is the markup language for most web pages on the Internet.

Now, it is not exactly a language like English or Spanish, which we communicate with verbally. A markup language is a system for editing text in a way that changes how the text looks or how you interact with it. Where you use funny looking code to make one section of text look different than the other, the code in question is not seen by the end user. The server the web page is coming from, and the user’s browser come together to help mesh it together as something that is seen as visually appealing to the end user.

A Simple HTML Example

Here is an example of a web site written in HTML code: 

<html>
<body>
<p>This is my first web site.  I hope you enjoy it!</p>
</body>
</html>

Breaking Down the HTML Code

As you can see from the text above, this is a pretty simple example. You have the basic text of the web site, “This is my first web site. I hope you enjoy it!” with several HTML tags wrapped around it. The HTML tags are what give the text commands on how it should be interpreted by the browser.

  • The <html> and </html> tags wrapped around the text tells you this is an HTML document.
  • The <body> and </body> tags wrapped around the text tells you this is the “body” of the web page, where the content you want displayed in the browser goes.
  • The <p> and </p> tags wrapped around the text tells you this should be formatted as a paragraph.

Here are some frequently asked questions somebody might have at this point.

How do you create an HTML file like this one? Best thing to use would be a plain text editor, such as Notepad. The reason for this, is you want the files in question to be saved with no extra markup information included.

How do I save the file as a HTML web page? You will want to save the file with a .html extension at the end. This will tell the web browser that this page is an HTML coded page, and should be read like one. As an example, I saved this file as “test.html”. The “test” name does not matter at this point, it could be anything. We will dive deeper into how to name your HTML files in a later tutorial.

Facebook Fan Page Come join the fun on the Web Hosting Show Facebook Fan Page!

© Mitch Keeler 2011 | Check out my firefox help site and my tech blog too!

  ]]> http://www.webhostingshow.com/2011/12/06/html-basics/feed/ 0 Free CSS Designs for You! http://www.webhostingshow.com/2009/10/14/free-css-designs-for-you/ http://www.webhostingshow.com/2009/10/14/free-css-designs-for-you/#comments Wed, 14 Oct 2009 10:00:09 +0000 Mitch http://www.webhostingshow.com/?p=2131 Free Web Site Layouts and Designs

Searching for a place to find free web site designs you can use?  OpenWebDesign.org has plenty to choose from, and they are all free to use.

If writing CSS code isn’t your favorite thing to do – and you would much rather tweak up a design that has already been done for you – finding a great free online design is the way to go.  So to help you jumpstart your next web site design project, head over to the stockpile of web designs found over at OpenWebDesign.org.

There are over 3,000 designs to choose from (and most are XHTML/CSS-based), so should be enough variation and choice for any web site designer out there.

Facebook Fan Page Come join the fun on the Web Hosting Show Facebook Fan Page!

© Mitch Keeler 2011 | Check out my firefox help site and my tech blog too!

  ]]> http://www.webhostingshow.com/2009/10/14/free-css-designs-for-you/feed/ 0 Squarespace is an All in One Hosting Package http://www.webhostingshow.com/2009/06/15/squarespace-is-an-all-in-one-hosting-package/ http://www.webhostingshow.com/2009/06/15/squarespace-is-an-all-in-one-hosting-package/#comments Mon, 15 Jun 2009 09:45:41 +0000 Mitch http://www.webhostingshow.com/?p=1912 I have heard about Squarespace from a number of different sources the past few weeks, so I thought I would give it a look.  For those of you who may be new to the service, it is a fully hosted, completely managed environment for creating and hosting a web site.

The service really does a great job a breaking down the parts of your web site down into bricks.  You kind shift and move the bricks around, make make your web site look the way you want.  The designs to choose from are great too, and you can customize them to suit your needs.

Along with hosting, and design – they also provide you with real time visitor analytics and stats about all of your pages.  That way you can work on marketing yourself better too.

Squarespace Tour Video from Squarespace on Vimeo.

At $8 a month, the service really has a lot going for it, if you are looking for a mix of hosting, plus a quality content management system.  Try them out for free, at Squarespace.com.

Facebook Fan Page Come join the fun on the Web Hosting Show Facebook Fan Page!

© Mitch Keeler 2011 | Check out my firefox help site and my tech blog too!

  ]]> http://www.webhostingshow.com/2009/06/15/squarespace-is-an-all-in-one-hosting-package/feed/ 0 How to Turn WordPress into What You Need! http://www.webhostingshow.com/2009/02/06/how-to-turn-wordpress-into-what-you-need/ http://www.webhostingshow.com/2009/02/06/how-to-turn-wordpress-into-what-you-need/#comments Fri, 06 Feb 2009 10:00:50 +0000 Mitch http://www.webhostingshow.com/?p=1660 WordPress is much more than just your standard blogging script.  It has the ability to do so many thing.  With truckloads of smart developers banging away at it every single day – there have been a lot of creative WordPress powered projects out there.  Here are a few of the ones that have caught my eye and you could install on your own web hosting account.

How to Turn WordPress into a Multiple Blog Network

wordpress-mu Want to launch your own blogging network?  WordPress MU (the MU stands for multiple users) is what you want to look into using.  If you have ever wanted to run multiple blogs off a single install of WordPress, this is definitely what you need.

WordPress MU and WordPress also share 99% of their codebase, so what you can do with one, you can probably do with the other.  So if you are afraid of learning an entirely new CMS – no need! WordPress MU is pretty similar as far as the exterior and the interior goes with WordPress.

How to Turn WordPress into a Micro Blogging Service

prologue-screenshotDid you know, you could take your normal WordPress install, and quickly turn it into a micro blogging service of your very own?  That is where the Prologue theme for WordPress comes into the picture.  It was inspired by services such as Twitter, however has a unique enough look and feel to it that you don’t feel like you are ripping them off.

Best example of this theme in use was to password protect the WordPress install it was skinning, and using it as an internal short memo system inside of a small business.

How to Turn WordPress into a Social Network

buddypress BuddyPress is an add-on to WordPress MU that will give you the ability to turn it into a social network platform, like MySpace or Facebook.  Playing with the demo, I see a lot of promise here.  You have groups, blogs, member pages, news and more.  The possibilities are endless.

Everything is still in beta, and in the demo phases – however, in the big picture, I think that BuddyPress will be one of the WordPress tools we will be talking a lot about.  With it, anybody can launch a social network for their friends or for the area of expertise they share.  I always wanted a web hosting social network.

As you can see, WordPress can be taken into a number of different direction, when it the right hands of the right developers and designers.  We didn’t even get into their forum script, bbPress.  By far, WordPress might be one of the easiest platforms to use these days.  What do you think?

Facebook Fan Page Come join the fun on the Web Hosting Show Facebook Fan Page!

© Mitch Keeler 2011 | Check out my firefox help site and my tech blog too!

  ]]> http://www.webhostingshow.com/2009/02/06/how-to-turn-wordpress-into-what-you-need/feed/ 0 Multi-column CSS Layouts with YAMAL Builder http://www.webhostingshow.com/2008/11/12/multi-column-css-layouts-with-yamal-builder/ http://www.webhostingshow.com/2008/11/12/multi-column-css-layouts-with-yamal-builder/#comments Wed, 12 Nov 2008 10:00:51 +0000 Mitch http://www.webhostingshow.com/?p=1313 Need to quickly build a CSS powered web site, with multiple columns?  Well, you could do things by hand.  However, it would be better if you had a tool that would at least lay out the basics of designing the multi-column layout for you.  YAML Builder is an easy to use site builder you can use Online for just that.

You fill in the basics that you need, and this web site will take care of the rest for you.  Based on web standards, accessible and easy to use, this is the best online layout creator I have used in some time.

yaml-builder

So what does YAML stand for?  With this builder, you can create Yet Another Multi-column Layout.  To try it out for yourself, go visit:  http://builder.yaml.de/

Facebook Fan Page Come join the fun on the Web Hosting Show Facebook Fan Page!

© Mitch Keeler 2011 | Check out my firefox help site and my tech blog too!

  ]]> http://www.webhostingshow.com/2008/11/12/multi-column-css-layouts-with-yamal-builder/feed/ 0