Web Site Design and Graphics with Marlon Sanders | Secrets of Creating Graphics That Sell » Basic HTML

Beginners HTML Tutorial | Adding Backgrounds To Your Web Page

admin — Thu, 06 May 2010 07:03:58 +0000

Step 1: To add a background image to your web page, just copy this snippet of code:

background=”bg.png” bgproperties=”fixed”

Step 2: Now open your web page in the First Page or NVU software and paste that code in just AFTER the

Step 3: Change FILENAME to the actual filename you used when you saved the image to your hard drive.

Example: If you used the filename of bluegradientbg.png then you’d type it like this:

Step 4: Now save your web page and open it in a browser and check to make sure the image has displayed correctly.

Incoming search terms for the article:

Basic HTML Tags That You Will Use Most Often

admin — Thu, 29 Apr 2010 07:22:29 +0000

Basic HTML Tags That You Will Use Most Often

HTML is the basic programming language of the web. It is what your browser reads and interprets for you. Learning it is not very hard. It is almost like writing very basic and much abbreviated English. When you are coding HTML for your website, you will use a few terms very often. Just knowing the most often used tags will enable you to code basic websites using nothing but those tags.

The P Tag

This is the paragraph tag. When coding, you would start with a ‘<’, then a ‘p’, then a ‘>.’ When you are done with the paragraph, you would close the tag with a ‘<’, then a ‘/’, then a ‘p’, then a ‘>.’

Unlike writing in a word processor where you press enter twice for a new paragraph, when writing HTML, you would use the P tag instead. You can have one long line with only these tags to differentiate the paragraphs and it will look okay when you post it on the web.

The H1 Tag

This is the header tag which will bold and increase the font size of what is included. You would write this the same way as the paragraph tags. Actually all tags are written in the same way.

H1 will give you the biggest headline. There are several different levels that you can use. You can go all the way down to H6 if you wanted to. But then, if you go that low, the font size might end up being smaller than your text.

The FONT Tag

This lets you choose the font you want to choose. You would write FONT=[your font name] inside the ‘<’ and ‘>.’

A word of warning: Do not use seldom used fonts that not everyone may have. If you use a font like that, not everybody will be able to display it on their computer. If they do not have the font installed, the default font will be used which may disrupt the formatting you have done. If you absolutely have to use that specific font, use it in an image processing program and turn it into an image to insert to your website.

The IMG Tag

You use this tag to insert an image. To insert an image, you first must upload your image to your website or an image sharing site. In code you would write ‘<’, then ‘img’, then ‘src=[image link]‘, then ‘>.’

If you use an image in place of text, though, you will need to insert an ALT property that includes the text so that the search engines can read it. So before you put the ‘>’ to end the tag, you would include ALT=[your text for the image].

The ALT Property

This is the property that was mentioned in the previous section. You use this tag to include search engine friendly text for images that the search engines cannot see. You would want to include one of these with every image you use. Use descriptive keyword rich text to describe what is in the pictures.

The A Tag

This is most often used in connection with the HREF property. This is to link to other pages and other sites. In code, it is written ‘<’, then ‘a’, then ‘href=”[link]“‘, then’>’, then ‘[link description]‘, then ‘<’, then ‘/’, then ‘a’, then ‘>.’ You can also use the ALT property to add some text that will show when people mouse over the link. You can have it show ‘Click me!’ by using this property.

*****************

Need to learn more HTML basic tags? Visit the Design Dashboard for your step step guide in making a simple web page design, guide to the things needed to make a website and get instant access to everything you need to create a web site, mini-site or affiliate pre-sell page that SELLS!

html basic tags

Incoming search terms for the article:

simple html dashboard

Learning The HTML Basics | Use Web graphics bullets To Make Your Text Stand Out

admin — Fri, 23 Apr 2010 07:18:59 +0000

Learning The HTML Basics | Use Web graphics bullets To Make Your Text Stand Out

Just like with the use of other high quality free web graphics such as web buttons, background images, webpage dividers and much more, you can use web graphics bullets to enhance your website. Web graphic bullets are perfect for lists, as decorations, menus, among many other purposes.

The purposes of web graphic bullets include:

When you are on a webpage, you may see one of the many bullets there. What the bullets does is to provide you the user with a graphical link to another website. Instead of using text to form a hyperlink, website designers make use of the bullets.

Bullets are also used to locate another web page on the same website. For example, you may have seen on numerous websites small arrow-shaped icons like the ones in this article. Those types of bullets allow the user to skip between pages or sets of pages while on the same website.

Web graphic bullets have to be downloaded from the internet. Seeing that they are the creative work of other users of the internet, a copyright has been granted, an agreement will have to be formed between the creator of the bullets and the user who is downloading them. This prevents users from taking advantage of the work done by others.

If you are interested in creating your personal bullets, then you will need to purchase the Adobe Dreamweaver or any other graphics software. The Dreamweaver software allows you to create bullets and other graphical images using HTML or CSS.

To create bullets using the CSS style codes you will have to follow the following steps:

Click on Window > CSS Styles to open the CSS Styles pallet.
Select the button that says ‘New CSS Style’ and provide the name of style as .bullet and whether it is a style sheet file or only the current document.
From the List Category, you will select the type of bullet image that you want and save that style.

At this stage, you are ready to create your list of bullet items using the default bullet. Afterwards you will apply the style by selecting the

Set Class to bullet

Here is a list of the popular CSS style codes that can be used to create your bullets using Dreamweaver.

Bullet Type	CSS Style Code	Example
Circle	.bullet {list-style-type: circle;}	List Item 1
Numbers	.bullet {list-style-type: decimal;}	List Item 1
Square	.bullet {list-style-type: square;}	List Item 1
Image Bullet	.bullet {list-style-image: url(/images/icons/arrow.gif);}	List Item 1
Disc	.bullet {list-style-type: disc;}	List Item 1

For easier navigation and selection, the bullets provided by many websites are categorized in themes such as:

Arrow Bullets

Basic Bullets

Cross Bullets :

Glassy Bullets

Metallic Bullets

Mica Bullets

Prismatic Bullets

Incoming search terms for the article:

Learning Basic HTML | Tips and Tricks You Can Use to Improve Your Web Site Sales

admin — Wed, 03 Mar 2010 04:46:32 +0000

One trick you can use to get your visitors to read every single word of your headline — before scrolling down to see the rest of your page:

To get your visitors to notice your headline as the first thing they see when they land on your page, just use YELLOW or GREEN highlighting.

The RGB code for the yellow highlighting is: #FFFF00
The RGB code for the green highlighting is: #00FF00

In FrontPage it’s simple to do this. Just click on the highlighting tool and drag it across the text, just like you would in Microsoft Word.

In Dreamweaver it’s a bit trickier to do.
Here’s the work-around for doing this in Dreamweaver:

Step 1) Create a new web page and type 1 line of text like you see below and save it as highlighting.html

Step 2) Now copy the source code provided here:

Step 3) Now open highlighting.html and go into the SOURCE CODE view.
The 1 line of text you typed will look like this when you view it as SOURCE CODE:

This is my line of text

Step 4) What you want to do next is PASTE the line of source code I gave you and put it BEFORE the line of text starts on your page, just like this:

This is my line of text
So what you’ve done is you’ve typed your line of text, then PASTED the first bit of code BEFORE the text you typed.

Step 5) The final step is to CLOSE the tag you just pasted into the page by applying the ENDING tag.
So copy this line of code:

Step 6) Now paste it at the END of the code you’ve already got on your page, like this:

This is my line of text

Step 7) Now just save the highlighting.html page somewhere on your desktop, or wherever you can easily find it later on.

Anytime you need the highlight, just whip that page open, copy the line of text and paste it into any web page you’re working on.

What I suggest you do is highlight a key word in the beginning AND also highlight one at the end.

The bright yellow draws your eyes towards the screen and that’s where they’ll start reading.

If you use highlighting near the end, it’s only natural for your visitors to read the whole thing, as their eyes are drawn across the page, left to right.

Using cascading style sheet or css will also boost your website performance, thus allowing your web pages to load faster.

• Visit The Design Dashboard for your step step guide in making a simple web page design, guide to the things needed to make a website and get instant access to everything you need to create a web site, mini-site or affiliate pre-sell page that SELLS!

You can also get the free PDF: Effective web design tips and tutorials.

Articles Related to Web Design Tips and Tutorials:

Beginners Web Design Tips and Tutorials

Tips & Tricks You Can Use To Improve Your Web Site Sales

Top 10 Website Design Best Practices

Incoming search terms for the article:

Basic HTML Code | Create Your First Sales Letter Web Page

admin — Tue, 17 Nov 2009 14:43:25 +0000

There are a lot of free HTML tutorials you can find on the web showing you how to how to create simple website and sometimes you get confused on what codes to use and where to put the codes. Here is an easy way to create your own webpage – free HTML codes basically used to create your own selling page.

Sample HTML code:

<a href="http://www.designdashboard.com">Basic HTML Codes</a>

This is a html heading tag

This is the html paragraph tag

html tags link

This is a text formatting bold

HTML table tutorial
This is a cell inside the table
This is another cell inside the table

Basic HTML list tutorial

another list

Copy the codes and paste it to notepad or any other HTML editor you have. Save your file with a .html extension, ex. myfirstpage.html

Run the code in a browser. Now you created your own first hand coded web page! Now you only need to add more good custom web graphics for your header for webpages, buttons and other images.

Need help in adding more graphics to your page? Click here to learn more on website graphics online tutorial.

If you are, you may be getting ripped off. Design Dashboard shows you not only the basics graphic design tutorials, steps to create website but really walks you step by step through setting up your hosting, autoresponders and shopping cart. Basic sales page web design tutorial.

Articles Related to Web Design Tips and Tutorials:

Tips & Tricks You Can Use To Improve Your Web Site Sales

Top 10 Website Design Best Practices

Beginners Web Design Tips and Tutorials