10 HTML Tips for Beginners

Sacredvoyage

14 years ago

Great post, some very useful tips here. I will be putting these into practice and let you know how I get on.

Thanks

Thanks
1 reply

{{ DiscussionBoard.errors[2907509].message }}

outsourcedesign 14 years ago

hi.........
Thanks for giving such a great tips!
really it is a good tips and it is very usefull tips to newbies to develop a good web page.
- Thanks
{{ DiscussionBoard.errors[2907807].message }}

RaulK

14 years ago

Can you elaborate on the point 10? spacer GIF trick?

Thanks.

Thanks
1 reply

{{ DiscussionBoard.errors[2907849].message }}

brandon2664 13 years ago

Originally Posted by RaulK

Can you elaborate on the point 10? spacer GIF trick?

Thanks.

How do you expect him to elaborate on that when he obviously just ripped that info off some other site.
- Thanks
{{ DiscussionBoard.errors[4187045].message }}

deziner_web

14 years ago

yeah what is spacer GIF trick?

Thanks
1 reply

{{ DiscussionBoard.errors[2908439].message }}

Logo Design 13 years ago

Originally Posted by deziner_web

yeah what is spacer GIF trick?

when you give image name.You also used
- Thanks
{{ DiscussionBoard.errors[4166780].message }}

ecommerce web developer

14 years ago

Here are some more html tips for beginners
1: Always Close Your Tags
2: Declare the Correct DocType
3: Never Use Inline Styles
4: Place all External CSS Files Within the Head Tag
5: Consider Placing Javascript Files at the Bottom
6: Never Use Inline Javascript. It’s not 1996!
7: Validate Continuously
8: Download Firebug
9: Use Firebug!
10: Keep Your Tag Names Lowercase

Thanks
2 replies

{{ DiscussionBoard.errors[2911796].message }}

caesargus

14 years ago

I'm on a roll right now so I'll follow up this one as well ...

Originally Posted by ecommerce web developer

Here are some more html tips for beginners
1: Always Close Your Tags - We just covered this ... so I won't go over it again.
2: Declare the Correct DocType - Ah yes - this allows you to determine how strict the browser is when it is rendering your page. For instance, Google Chrome is very specific about doc types, and if something is not just right then stuff starts to break, layouts appear wonky etc. (use the correct doc type - it'll save your sanity).
3: Never Use Inline Styles - Inline styles are hard to correct especially if you end up repeating the same inline style over and over again. That is why they made Style Sheets, so you can make the change in one spot, not several - this saves headaches and time.
4: Place all External CSS Files Within the Head Tag - If you're trying to practice proper web design, all CSS files should be placed in the head tag ... It helps the page load faster as well.
5: Consider Placing Javascript Files at the Bottom - This is a suggestion that I see placed forth by the Yslow plugin. Its explanation behind this was that it helps with page rendering. Your page should load completely first before it begins to perform any processing.
6: Never Use Inline Javascript. It's not 1996! - Just think ease of maintenance
7: Validate Continuously - How else do you know if you just screwed something up, unless you validate it constantly? If you don't validate constantly, then you're not quite sure if the change you made 5 minutes ago or the change you made 5 days ago was the one that broke your site/page validation - this just saves headaches and time.
8: Download Firebug - This is one of my favorite browser plugins. There are so many insights that this tool provides, like being able to modify scripts and stylesheet on the fly. Time Saver!
9: Use Firebug! - Time Saver!
10: Keep Your Tag Names Lowercase - You'd find this out if you're running against validators, that a lot of them will throw errors if your tag names are mixed case. Lowercase tags also means that you're being consistent, and being consistent allows you to read and debug your code faster ...

Hope that info helps too!

[ 1 ] Thanks

Signature

The Marketing Easy Button - You Just Found it
Select All Facebook Friends
Auto Add Friends on Facebook

{{ DiscussionBoard.errors[2915363].message }}

tgsinc 14 years ago

Hey! thank you for sharing, Really It's valuable for beginner's like me, I would like to try it.
Regards,
www telegenisys com
- Thanks
{{ DiscussionBoard.errors[2982927].message }}

flowerwedding

14 years ago

describe me 10 point with details.

Thanks

{{ DiscussionBoard.errors[2911902].message }}

SteveJohnson

14 years ago

Unbelievable - a spammer thread completely populated by spammers.

[ 3 ] Thanks

Signature

The 2nd Amendment, 1789 - The Original Homeland Security.

Gun control means never having to say, "I missed you."

{{ DiscussionBoard.errors[2913898].message }}

Silke

14 years ago

About point 3: Why do you need an HTML validator ?

Thanks
1 reply

{{ DiscussionBoard.errors[2914180].message }}

orvn 14 years ago

Originally Posted by deziner_web

yeah what is spacer GIF trick?

Originally Posted by RaulK

Can you elaborate on the point 10? spacer GIF trick

Basically you make sure that no one steals your image (or other content)
By overlaying it with a 1px gif image called a spacer.

In Flickr, you can't right click on copyrighted images, because there is a repeating spacer located throughout that div.

It's more of a CSS trick really.

Originally Posted by SteveJohnson

Unbelievable - a spammer thread completely populated by spammers.

lmfao.
- Thanks
Signature
Orun Bhuiyan[@orvn] [linkedin] See what I've been doing lately by visiting my marketing agency's site. SEOcial specializes in content marketing and integrated optimization. We create conversions for businesses by gracefully connecting the realms of design, development and marketing.
{{ DiscussionBoard.errors[2915296].message }}

caesargus

14 years ago

Well since people are asking ... I guess I can fill in for mostapha ...

Originally Posted by mostapha

Here are 10 HTML tips and tricks for newbies. If you're just starting out with building your Web pages, these techniques should be very useful to you!

1. Always close your HTML tags - You want to close your HTML tags because it will allow the browser's html parser to process your page faster, and will give you faster page load times. You are able to get away without closing your tags, and it will not cause any significant page load increases, but it does make it easier to read, easier to style, etc. (more on this in a bit)
2. Style HTML using style sheets wherever possible - You should use style sheets where possible, because you are able to make a change across your entire site, in one spot. If you are not aware of the power of Cascading Style sheets, I would check out some tutorials online. Quick example: You can change the format of a <p> tag just by making a style sheet with the following: p { font-family: 'Arial'; font-size: 9pt; }
3. Use an HTML validator - You should use the validator to make sure that the tags are properly closed. This can help you greatly when you're trying to debug style sheet issues. Typically several issues related to style sheets and getting them to work properly on the site, can be traced back to the page not passing the html validator.
4. Use HTML comments wisely - I'm not sure why this rule is here ... I assume it's just general commenting practice in that you should comment items so that you can figure out what you were doing when you left a section of code, and you're not sure why you built the section in a specific fashion - You'd find several comments in the IE6 CSS hacks - so comments left in those spots are extremely helpful.
5. Embedding images in HTML - Um ... To embed images use the following <img src="image_path" />
6. Use widths and heights with HTML images - This allows the page to build it's layout faster, since it knows how big to place the images. <img src="image_path" width="image_width_size_num" height="image_height_size_num" />
7. Non-breaking spaces in HTML - when HTML is displayed in the browser, the browser will ignore white space (outside of the first space). If you need additional spacing use the " " which means non-breaking space, this allows you to add additional spacing where you need it. Just be careful when you're using too many of these, there is probably a better way to get the spacing you desire ...
8. Use tables for tabular data, CSS for layout - This is one will help the page load speed of your site. By using the css for layout and tables for tabular data it allows your page to render faster, because the entire table must be rendered before it can be displayed to the user. So if you have a huge amount of data (or you're using tables for your layout ...) your site will slow down (or appear to be slow) because the page is rendering. If you use CSS, the rendering can take place after the page is loaded, and can be replaced easily when you want to change out a holiday theme...
9. Creating empty table cells - Have you ever rendered a table with borders and you noticed that one of the table cells were "flat" where all of the other cells were nice and hollowed out with data? This is because if the table cell does not have data, it doesn't hollow out the cell if it doesn't need to. So what do you do? Add a " " to all of the empty cells (and if you're programming, and you're not sure if the cell will be empty or not - add a " " in front of any content that you're going to render).
10. The spacer GIF trick - The spacer gif trick ... This is somewhat old school, but if you need a thin line (it can be any thickness you want really ...), what you would do is create a transparent gif that is 1x1. Place this spacer gif on your web server somewhere so you have access to it. Now do the following ...
<table><tr><td bgcolor="#FCFCFC"><img src="images/spacer.gif" width="1" height="50" /></td></tr></table>
This creates a line 50 pixels tall with the color of "#FCFCFC". This allows you to get a precise placement of various items.

When I said this was old school, this functionality was replaced by Style Sheets since they can handle exact placement of items. But it is a good trick to know.

Hope that information helps!

[ 1 ] Thanks
1 reply

Signature

The Marketing Easy Button - You Just Found it
Select All Facebook Friends
Auto Add Friends on Facebook

{{ DiscussionBoard.errors[2915312].message }}

Nikart 13 years ago

good reference.
i remember i was trying to remove some html errors using W3H website support and at that time found these small small mistakes in my website.
- Thanks
Signature

Owner of MoreEarn.com
MoreEarn Dofollow Social Networking | Bookmark | Blogging website.
{{ DiscussionBoard.errors[4192500].message }}

emma11

14 years ago

Hi friend what a nice tips provide from you. Its really very important for me, HTML design updates itself regularly based on changing rules, which usually includes a set for each version.
Thanks for sharing this beautiful tips.

Thanks

{{ DiscussionBoard.errors[2917992].message }}

signity

14 years ago

Its really great tips for the beginners. Thanks for sharing it.

Thanks

{{ DiscussionBoard.errors[2926537].message }}

brenna55

14 years ago

Originally Posted by mostapha

Here are 10 HTML tips and tricks for newbies. If you're just starting out with building your Web pages, these techniques should be very useful to you!

1. Always close your HTML tags
2. Style HTML using style sheets wherever possible
3. Use an HTML validator
4. Use HTML comments wisely
5. Embedding images in HTML
6. Use widths and heights with HTML images
7. Non-breaking spaces in HTML
8. Use tables for tabular data, CSS for layout
9. Creating empty table cells
10. The spacer GIF trick

Absolutely right, I agree with you and thanks for sharing.

Thanks

{{ DiscussionBoard.errors[2939467].message }}

Zombee

14 years ago

nice tips there.... thanks

Thanks

{{ DiscussionBoard.errors[2939724].message }}

bestdesigner

14 years ago

Those are great tips mostapha. Thanks for sharing the information...

Thanks

{{ DiscussionBoard.errors[2940080].message }}

wendymay1

14 years ago

Always good to add HTML as part of your Internet Marketing arsenal.

Thanks for the tips

Thanks
1 reply

Signature

How To Make $283.03 Per Day In Just 8 Minutes.

{{ DiscussionBoard.errors[2940174].message }}

Shirlyn 14 years ago

hi,HTML is the basic web development and designing language from last decade or more and I have found all info in the above points for an easy start with HTML. Thank you for sharing your knowledge here.
- Thanks
Signature
eUKhost : UK Web Hosting | Website builder
{{ DiscussionBoard.errors[2940254].message }}

andywily889

14 years ago

This is such useful tips for beginners like me. These all are use by new or old user day by day development. It is really important for me. And I think HTML is most used in creating website.

Thanks

{{ DiscussionBoard.errors[2944418].message }}

mahesh2010

14 years ago

Nice tips keep sharing thanks

Thanks

Signature

Mobile Website Design

{{ DiscussionBoard.errors[2944571].message }}

princefarr

Banned 14 years ago

Actually I was looking for this tips. Thanks for sharing such wonderful tips with all of us. Keep sharing more tips in th future.

Thanks

{{ DiscussionBoard.errors[2950312].message }}

mo3ttaz

14 years ago

Thank you friend

Thanks

{{ DiscussionBoard.errors[2953851].message }}

SPMassie

14 years ago

Where were you months ago when I first started out lol. Thanks

Thanks

{{ DiscussionBoard.errors[2953873].message }}

mario25

14 years ago

Hey, Buddies Thanks for sharing this useful information with us.

Thanks

{{ DiscussionBoard.errors[2963522].message }}

davidthomas35

14 years ago

Thanks guys for the list of things that worth doing. I want to add one more point that is Do not forget to check to validate your html when done

Thanks

{{ DiscussionBoard.errors[2965778].message }}

tinajohn

14 years ago

You can explore this in notepad itself.
tags only very import.
all the tags and its detail available in w3schools.com

Thanks

{{ DiscussionBoard.errors[2965891].message }}

mugen2k

14 years ago

basic and great tips

Thanks

{{ DiscussionBoard.errors[2968533].message }}

shrutiseo

14 years ago

Hi..!!

Nice tips...!! Great Post..!! Thanks for sharing it...!!!

Thanks

{{ DiscussionBoard.errors[2969824].message }}

eallard.moore

14 years ago

Excellent tips for beginners. Thanks for sharing

Thanks

{{ DiscussionBoard.errors[2971213].message }}

Anithaseo

14 years ago

Thanks for the tips would like to try it out

Thanks

Signature

Submit Guest Post | Stress Care Management | Notepad Compare

{{ DiscussionBoard.errors[2975577].message }}

PaulKennedy

14 years ago

Many thnks for sharing this great tips with us. I will take care about them on my next project

Thanks

{{ DiscussionBoard.errors[2983631].message }}

Mehak

14 years ago

thanks for sharing

Thanks

{{ DiscussionBoard.errors[2983635].message }}

jaxspotmedia

14 years ago

For beginners, to learn more, use Firefox and download the firefox plugin "firebug". You can learn a lot of coding and another good part is you can accomplish a lot of troublshooting errors when you do webdesign.

Thanks

{{ DiscussionBoard.errors[2986652].message }}

keon.gray23

14 years ago

Great information! Thanks for sharing this with us.

Thanks

{{ DiscussionBoard.errors[2988993].message }}

ninal

14 years ago

Originally Posted by mostapha

8. Use tables for tabular data, CSS for layout
9. Creating empty table cells
10. The spacer GIF trick

Aren't these 3 a bit contradicting? Since tables are no longer used for layouts, I doubt there's still much use for the spacer GIF. And what would be the empty table cells for?

These 10 tips don't really provide much info.

Thanks

Signature

Hello

{{ DiscussionBoard.errors[2989089].message }}

FabianSmith

14 years ago

Thanks for sharing i really appreciate your information........

Thanks

{{ DiscussionBoard.errors[2989142].message }}

jaxspotmedia

14 years ago

also learn 960 grid system to make site more responsive.

Thanks
1 reply

{{ DiscussionBoard.errors[2992391].message }}

profreelancer 14 years ago

11. Use alt text with image tag
12. Use title text with href links

Nice tips!
Just my 2 cents!
- Thanks
Signature
{{ DiscussionBoard.errors[2993651].message }}

welkin

14 years ago

Hi, friend I please to observe your post, Its really very helpful for me. It will very helpful me for batter web layout. Thanks for sharing this.

Thanks

Signature

web development india || website development in india

{{ DiscussionBoard.errors[2993877].message }}

iwtmmo

14 years ago

Thanks for your nice tips! I think it's useful for newbies.

Thanks

{{ DiscussionBoard.errors[2998345].message }}

marimar

14 years ago

Woww..Nice post, Very useful for me. Thanks for sharing it..

Thanks

{{ DiscussionBoard.errors[3154230].message }}

bilzz

14 years ago

Very great post ..would be helpful for beginners thanks for sharing us .

Thanks

Signature

Emr reviews Rate md Shop online Six sigma Tutorial

{{ DiscussionBoard.errors[3154241].message }}

chrismarcans

14 years ago

These HTML tips for beginners are very useful. These can help a lot especially for those who are still learning. Thank you for sharing.

Thanks

{{ DiscussionBoard.errors[3154249].message }}

LoginBD

14 years ago

I always keep jazascript into head tag. Now why should i consider Placing Javascript Files at the Bottom?...Does it have any specific reason.

Thanks
1 reply

{{ DiscussionBoard.errors[3154479].message }}

msforum01 14 years ago

Here are some more tips:

-Always Close Your Tags
-Declare the Correct DocType
-Never Use Inline Styles
-Consider Placing Javascript Files at the Bottom.

hope this will help also.....
- Thanks
Signature
GED Online
{{ DiscussionBoard.errors[3155231].message }}

alexcercel

14 years ago

RaulK < spacer gif is a transparent gif of 1x1 pixels you use to hide your logo or whatever behind it or to keep the size of a table cell if nothing else works. Eg. you have a logo div with your logo set as background and a spacer gif as the image inside the div. When you right click the logo and chose show image you see the spacer gif, not the logo < so it's like a bit of security against stealing your logo or whatever.

Thanks,
Alex

Thanks

Signature

-----------------------------------------------------------------
They Say The Dark Angel Wears Prada...
CB Best Sellers Wear BlingCovers' Minisite Design
-----------------------------------------------------------------
Professional Web Banners - Amazing Prices!

{{ DiscussionBoard.errors[3155335].message }}

rosesmark

13 years ago

I really appreciated your work.

Thanks

{{ DiscussionBoard.errors[3982389].message }}

moonheart

13 years ago

Thanks for the tips. I want to ask one thing that should i externally call the style.css file or should I add css within the html code?

Thanks
1 reply

Signature

G Web Pro Marketing Inc. - SEO Services Toronto

{{ DiscussionBoard.errors[3983608].message }}

ronc0011 13 years ago

Originally Posted by moonheart

Thanks for the tips. I want to ask one thing that should i externally call the style.css file or should I add css within the html code?

External stylesheets are much easier to maintain ant to work with.
- Thanks
{{ DiscussionBoard.errors[3989722].message }}

scottmann

13 years ago

i just want to add:
- embed movie in html
- embed flash in html

thankyou

Thanks

{{ DiscussionBoard.errors[3984253].message }}

webtwilight

13 years ago

HTML is one of the easiest programming languages out there. Great way for any web designer to start with .

Thanks

Signature

Patrick McGraw
Webtwilight.com

Website Review - for free

{{ DiscussionBoard.errors[3986482].message }}

EtheelLambert

13 years ago

Style sheets will accomplish your HTML coding activity so abundant easier. No added tags everywhere. You as well get abundant bigger ascendancy over the way your pages look, and you can change their actualization just by alteration one style sheet file.

Thanks

{{ DiscussionBoard.errors[3988363].message }}

logoonlinepros1

13 years ago

Yeah this tips is very necessary and most using html code.
I like this and i save it also.

Thanks

Signature

LogoOnlinePros

{{ DiscussionBoard.errors[3988704].message }}

rauff

13 years ago

great tips thanks for sharing it

Thanks

{{ DiscussionBoard.errors[3989036].message }}

johnybravo

13 years ago

your just shared some nice tips, i am not a beginner though but still nice job done sharing this.

Thanks

Signature

Photodynamic Therapy

{{ DiscussionBoard.errors[3989936].message }}

nirjor

13 years ago

Really good information for html beginner.

Thanks
1 reply

{{ DiscussionBoard.errors[3991469].message }}

mahedi 13 years ago

What information?
- Thanks
{{ DiscussionBoard.errors[4001495].message }}

richardjmartinez

13 years ago

that was a great post.. keep it up

Thanks

{{ DiscussionBoard.errors[3994103].message }}

o2webtech

13 years ago

Hi, Thank you so much for posting such good points really works.

Thanks

Signature

webbloggers.net : Social media blog | Content Writing Services
Follow me : Facebook | Twitter

{{ DiscussionBoard.errors[3994502].message }}

wilsionjack

13 years ago

great tips

Thanks

{{ DiscussionBoard.errors[3995229].message }}

Happytrousers

13 years ago

Thanks for all the work here, very useful.

Thanks

{{ DiscussionBoard.errors[4002416].message }}

JackHomes

13 years ago

I am really impressed with your tips.

Thanks

{{ DiscussionBoard.errors[4002733].message }}

seomelbourne

13 years ago

These tips are very helpful for everyone specially for me.
Because i am new user of HTML. I really impress with your work and i hope you continue it in future.

Thanks

{{ DiscussionBoard.errors[4007986].message }}

Matt G

13 years ago

Thanks for sharing. Good tips for beginners.

Thanks

{{ DiscussionBoard.errors[4011215].message }}

ApocalypseXL

13 years ago

Dear God is this thread for real ? This are HTML tips for beginners ? Wow if everyone would roll like this i wouldn't have to worry about competition

Here's 1 real tip - learn to use HTML 5 , it is the future .

Thanks

Signature

Victory at all costs, victory in spite of all terror, victory however long and hard the road may be; for without victory there is no survival.

{{ DiscussionBoard.errors[4014179].message }}

Stephen Lessey

13 years ago

Thanks for the tips. HTML coding is definitely one of the easiest ways to get started.

I also wanted to add another, CSS is now an industry standard in the design and layout of your pages. So make sure you keep 1 external style sheet for your pages.

This way you can be consistent with your design on all your webpages

Thanks

{{ DiscussionBoard.errors[4014761].message }}

harveen0019

13 years ago

Nice tips. Will be helpful for starters in html.

Thanks

{{ DiscussionBoard.errors[4015922].message }}

projectrobot

13 years ago

cool tips

doing it in action is the best

Thanks
1 reply

Signature

Forex pays my rent, car and shopping. Simple and Easy Money Making Forex Web App ♥ Find out Here ♥

{{ DiscussionBoard.errors[4167044].message }}

g4r3th 13 years ago

Great tips thanks. Its cool what a little bit of coding can do.
Learing new html all the time thanks.
- Thanks
Signature
Bouncy Castle Hire | Chocolate Fountains
{{ DiscussionBoard.errors[4167100].message }}

samstephan9

13 years ago

This is tips are really great thanks for sharing.

Thanks

Signature

Facebook App Developer | iPhone Application Development

{{ DiscussionBoard.errors[4167259].message }}

Amigo

13 years ago

It is really a great post. Thanks for sharing such a nice tips. I will always take care of them.

Thanks

Thanks

{{ DiscussionBoard.errors[4167284].message }}

dashing448

13 years ago

the most cool tip is Spacer GIF Trick

Thanks
1 reply

{{ DiscussionBoard.errors[4167433].message }}

Daniel7 13 years ago

This post remembers me the days when I have begun learning HTML. Great tips by the way.
- Thanks
{{ DiscussionBoard.errors[4167629].message }}

jmartinez

13 years ago

I like the tip to not use inline css and link all external css files from the head of your html document.

One problem so many people run into is that css rules override other css rules. So, you may be trying to align something to the left of the page, but it doesn't work no matter what you do. In many cases it could be because there is an inline css rule that is overriding your external css rules. It can be a real mess trying to figure it out. Keep a well organized external .css file and save yourself the headaches that can arise.

Thanks

{{ DiscussionBoard.errors[4168273].message }}

saini1987

13 years ago

Thanks for the nice tips....

Thanks

Signature

Webmaster Forum UK

{{ DiscussionBoard.errors[4168478].message }}

yeshou

13 years ago

thanks it is very useful

Thanks

{{ DiscussionBoard.errors[4184808].message }}

joelgarner

13 years ago

Originally Posted by mostapha

Here are 10 HTML tips and tricks for newbies. If you're just starting out with building your Web pages, these techniques should be very useful to you!

1. Always close your HTML tags
2. Style HTML using style sheets wherever possible
3. Use an HTML validator
4. Use HTML comments wisely
5. Embedding images in HTML
6. Use widths and heights with HTML images
7. Non-breaking spaces in HTML
8. Use tables for tabular data, CSS for layout
9. Creating empty table cells
10. The spacer GIF trick

thanks for sharing such good tips of HTML to learn....

Keep sharing
Thanks..