Archive for tags
More HTML Formatting Help
Posted by: | CommentsWe 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!
Basic HTML Formatting Help
Posted by: | CommentsWhen 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!
Modify the HTML Body Tag
Posted by: | CommentsThere 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!
Basic Parts of a Website Layout
Posted by: | CommentsWhen 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!
How to Write a Better Title Tag
Posted by: | Comments
The title tag might be a feature many people overlook, but it is just as important as having a nice looking web site layout. Some might even say it is the most important thing, because it is often the first thing a web site visitors sees. Today I’ll be telling you what the title tag is and what you can do to make yours better.
What is so Important About the Title Tag?
The title bar is important because it tells your readers what they can expect on that page. If you are missing a title tag, often the Internet browsers out there just name the actual file name as the title. If that happens, the title tag is not doing the job of telling the web site visitor what that page is about. Title tags are also used by search engines. The title tag is typically used as the first line of the search result. Once again, this is another reason why it is important to use a title tag.
How do you Write a Better Title Tag?
Now that we have gone over the importance of a title tag, let me tell you how to write a better one.
Keep the title under 65 characters. This is mainly for search engine optimization reasons, so your last few words or your title don’t get replace with a “…” when showing up on the search engines, like Google.
Use keywords phrases specific to your web site. Now this one might seem overly obvious, but some people still forget it. Use your most popular keywords that lead people into your site, or that best describe your site in the title tags.
Put your web site name at the end of the title tag. Now some people put the site name at the end, some people put it at the beginning and then some people leave it off, all together. Unless your site name is keyword rich, like “Best Coupons for Hosting” – I would say bump it to the end of the title. It helps to identify what page you are on. Then you can put the web page title before it, such as:
How to Write a Better Title Tag – Web Hosting Show
There you have the page’s name first, and the web site’s name second. Both are relevant when describing the web page in question so both should be mentioned in the title tag.
Re-use your title tag in your web site too. Your web site’s title should mirror your headline title on the web page you are editing. This is easy to remember to do with blogs, however it might be overlooked with hand coded HTML web sites.
There you have it. Those are my own personal tips to help you write a better web site title tag. Have any other advice or tips to share? Give me your feedback in the comments.
Like This Article? Listen to it and more like it on podcast #202 of the Web Hosting Show!
Add me on Twitter! Come follow my daily antics, links, tips and more @mitchkeeler on Twitter!© Mitch Keeler 2010 | Check out my firefox help site and my tech blog too!
RSS Feed Reader Graduates To Social News Aggregator: Adobe MyFeedz
Posted by: | CommentsmyFeedz is a new service aimed at personalizing and adding a democratic, social dimension to the RSS feed reading experience. Here we have an interesting attempt to roll together the success of social news sites such as Digg, services that quickly learn your viewing preferences such as Stumble Upon and the familiar process of aggregating your online news into a single space using a feed reader, such as Google Reader. The result is a new breed of feed reader that delivers to you a personalized stream of news generated at the intersection of your own interests and other users\’ ratings, so that – theoretically at least – you get the cream of the latest news in your personal areas of …