yourfirstserver.com

The Basics of HTML and Best Web Design Program

Tweet

600Host explains the basics of HTML & best web design program.

HTML, those letters you see at the end of many webpages, is one of the foundations of the Internet as we know it. It stands for Hyper Text Markup Language, which underpins most, if not all, of the information you’ll find on the Internet today. Every browser is designed to read HTML and translate the code into the unique arrangement of words, pictures, and interactive experiences that each page provides. While there are many additional elements to professional web design such as Flash, PHP, and Javascript, HTML is still the basic language you need to know to put a web page together on UK Web Hosting.

First of all, let me clarify: HTML is not a programming language. “Markup Language” means that the language sits around the information. Let’s say you’ve found your UK web hosting site and now you want to put together a great page for yourself or your business. Because most of what you’re going to be presenting on your website is media – text, pictures, videos, etc. – you just need a way to arrange that information in a presentable, easy-to-navigate format.

HTML uses “tags” to supplement the information you’re placing on your UK web hosting site. Tags surround words to tell them to be in their own paragraph, to be bold, italic, coloured, big, small, in a table, or many other things. If you can create an effect in a word processor, you can do it in HTML. Tags are bounded by the < sign and the > sign. So, in order to make text bold, you type < b> (without the space before the b). In order to end the bold text, you do the same thing, but with a / before the b. So, < /b> (again without the space before the /b) turns the text normal afterwards.

There are hundreds of possible tags, but here are some basics to get you started. For more, do a search for HTML tutorials – there are tons of great ones online.

< html> is what you put at the beginning and end of every HTML document

< title> makes the text appear above the menu bar in the browser.

< body> makes the text appear in the main screen. The bulk of the information on your site with UK Web Hosting will be between the < body> and < /body> tags.

< br> creates a line break.

< p> creates a paragraph. Within the < p> tag you can change the style, size, colour, and orientation of the text by typing < p style=”text-align: center; font-size: 14; color: blue> or anything like that.</p>
<p>< a> (signifying “anchor”) makes the text link to another website. It works by typing < a xrel=”nofollow” onclick=”javascript:_gaq.push(['_trackPageview', '/outgoing/article_exit_link']);” href=”link” mce_rel=”nofollow” onclick=”javascript:_gaq.push(['_trackPageview', '/outgoing/article_exit_link']);” href=”link”>. End the link by typing < /a>, and remember not to include that initial space between the < and the a or /a.

< img> places an image. as a whole, it looks like < img xsrc=”image’s location on your server” alt=”text that appears when you move the mouse over the image” height=”image’s height” width=”image’s width”> There is no end tag for this one.

< table> begins a table to put your information. After this, you type < tr> to indicate a row, then < td> for each subsequent column. For a two-row, two-column table with four numbers, you’d write:

< table>
< tr>< td> 1 < /td>< td> 2 < /td>< /tr>
< tr>< td> 3 < /td>< td> 4 < /td>< /tr>
< /table>

Because HTML doesn’t create line breaks unless you tell it to, you can arrange the code in your editor in whatever way is easiest to read. Many people use a basic text editor such as Notepad, Wordpad, or SimpleText to write HTML, but if you’d like a leg up, there are some great web design programs for your UK Web Hosting site which give you immediate visual feedback about what your code looks like.

Adobe Creative Suite contains everything you could possibly need to make a professional-caliber site. Within the suite, Dreamweaver is a WYSIWYG (what you see is what you get) editor that lets you move images and text around to look like what you want, and it will write the code for you. Photoshop lets you design images, and Flash lets you create animations for your site. Adobe’s programs are the best out there, the only downside is their price.

For those on a budget, CoffeeCup 2006 is a great, easy-to-learn WYSIWYG editor, a lot like Dreamweaver, as is Web Studio.

So long as you study up on your HTML, Evrsoft First Page 2006 is a convenient free web design program which lets you see the results of your code as you edit it.

Read more …