Skip to content

CSS, HTML, ala Andy!

May 28, 2009

After receiving a comment from him on my attempts at sharing my (limited) HTML knowledge, I shot off an email explained to my new friend Andy Watson that hey, I know I’m no expert in this field – but I’m doing my best. Our conversation went something like this:  

Him: Why are you teaching the old way?

Me: My purpose was to show people they COULD do something “because I did it and this is how I did it”, it works – but I wouldn’t know if it was the ‘correct way’ to do it or not. You obviously know. Would you help us?

Him: Yes.

Us: YEAH!!!

Thank you Andy. Here’s a bit about our new coding guru:

I’ve been coding php/html/css/javascript for almost 6 years now and I enjoy helping to teach people the proper way of doing everything. Everyone has to start out somewhere and I enjoy seeing them progress to the point that they can successfully code a website without too many errors.   (See the difference in credentials?  Mine= “I did it like this on my blog and MaidenShade and it worked for me…” LOL)

So to start with, Andy suggested he share with us a few of the finer points of HTML, explain why one way is better than another and also give us some basic coding strings to use. If you remember, my last post was on bolding, italics, and showed there are 2 ways of achieving those font changes. Take it away, Andy:

 

♫ Lesson I Ala Andy ♫

Both methods work (<b> and <strong>) but <b>is the old way of doing it. It is like you rewiring your entire house using wiring standards from 1950. It would work but its not the proper way of doing it and may cause problems later on (fire, reselling problems, etc)

As you may or may not know, HTML gets updates done to it and then browsers will implement those updates in newer version. HTML updates consist of the occasional dropping of tags and getting new ones. Eventually, all of the style related HTML tags will be dropped and won’t work on newer browsers because HTML is meant to be for structure only. CSS was created to be the style of the page.

So, does it hurt anything? No, but in coming years your pages may not look like they use to. There are many other reasons why you shouldn’t use HTML style tags as well. Updating a website using such tags will be much more difficult and time consuming when the time comes.

You would have to code multiple websites to allow for viewing on all media i.e. cell phones (smaller screens), screen readers (for the blind), printing, etc. If you code your website the newer proper way (without HTML style tags) using CSS, you will be able to quickly create different style sheets for each of the different browsers/print and save yourself a ton of work.

Not all tutorials are created equally. There are some good ones out there that teach you the proper way of doing things but there also those that teach you the old way. You don’t need to be an expert to do something the proper way.

I have absolutely no problem that you’re not an expert because you’re at least attempting to learn which is awesome. The whole ‘blind leading the blind’ plan is probably something you want to stay away from though. If I’m not mistaken, you had said on the blog that you’re going to do colors next.

You might want to explain what CSS (next lesson) is for the readers that have never heard of it before and so that when you do colors the proper way, they won’t get confused (the font tag is also not used anymore because its a style tag).

Colors:

<span style=”color:red;”>This is red</span>

-> becomes: This is red
<span style=”color:#ff0000;”>This is also red</span>

-> becomes: This is also red

Text Decorations:

<span style=”text-decoration:underline;”>This is underlined</span> –

-> becomes: This is underlined
<span style=”text-decoration:italic;”>This is italics</span>

-> becomes: This is italics
<span style=”text-decoration:line-through;”>This has a strike through</span>

-> becomes: This has a strike through

Lists:

<ul>    -> This is an unordered list element (no numbers by default – bullets)
<ol>    -> This is an ordered list element (numbered list)
<li>    -> List Item Element – It appears between <ul>…</ul> or <ol>…</ol>

How do you write that out correctly using these elements?  Like this:
EXAMPLE 1: This list has no bullets

<ul style=”list-style:none;”>

<li>a item</li>

<li>b item</li>

<li>c item</li>

<li>d item</li>

</ul>

EXAMPLE 2: This list has special bullets
<ul style=”list-style:url(‘arrow.png’);”>

<li>a item</li>

<li>b item</li>

<li>c item</li>

<li>d item</li>

</ul>

To get these results:

EXAMPLE 2: Here is an unordered list with special bullets

  • a item
  • b item
  • c item
  • d item

EXAMPLE 3: Here is an ordered list showing numbers

  1. a item
  2. b item
  3. c item
  4. d item

Well, there you have some basic codes that people would probably use in a blog. W3Schools is a pretty good website to check out for tutorials.

One last thing before I end this (I’m not sure if you will need it for blogs but I’m teaching HTML so…) is that if an HTML tag doesn’t have a closing tag, it ends in [space]/> for example: <br />, <input type=”text” name=”name” />, <hr />, etc.

Hope this helped.  Andy

Tip: Check out Andy’s resource: http://www.w3schools.com/Css/default.asp

Add to FacebookAdd to DiggAdd to Del.icio.usAdd to StumbleuponAdd to RedditAdd to BlinklistAdd to TwitterAdd to TechnoratiAdd to FurlAdd to Newsvine

Advertisements
9 Comments leave one →
  1. May 28, 2009 8:51 am

    It’s all like another language to me….I search around alot of the time until I get it. Thanks for the links

  2. Andrew permalink
    May 28, 2009 9:12 am

    Once you understand the basics of everything it is dead simple to do.

  3. May 28, 2009 9:46 am

    Gosh hope you’re feeling better soon. Hope I am too! Actually this is the first day in over a week I’ve actually felt up to blogging a little. Working on my pink Saturday post when your neato comment came in. Thought I would knock it out today, ’cause with this sinus and ear stuff you never know what tomorrow will bring.

    This is an awesome post, just filled with info I desperately need to learn. Thanks so much and to your friend Andy!!

  4. May 28, 2009 9:55 am

    While I was attempting to tweak my “trial” blog and wanted to experiment with font styles, colors, and sizes I typed it in the support forum and there it was 🙂 Have to do it since wordpress really does not allow us to just point and click for these ones 🙂 Aside from that, know basic linking, paragraphs, and breaks 🙂 So far, those are just the things i have been using and I’m happy with. 🙂

    Nice of you and your friend to share this.

    Li

  5. May 28, 2009 2:32 pm

    Hello! Thanks for visiting my blog, I just saw that after sending you the convo in etsy (where I ask if you have a specific size in mind for your signs). Very interesting html reading, I have several times attempted my own website (you can see it here: http://www.castleandcottagesigns.com) however I am better at the graphics than the html 🙂
    Look forward to your reply and again thanks for stopping by!
    paula

  6. May 28, 2009 4:18 pm

    Good old W3 schools. Saved my bacon a few times!

  7. May 28, 2009 5:50 pm

    Looks familar. I learned about this in my daughters computer course this year. Thanks for the refresher though. Glad to hear you throat is feeling better. I would never forget about you! 🙂 Would you be interested in seeing me do a video on the Wood Veneer?

  8. May 28, 2009 9:20 pm

    My goodness, most of it IS a foriegn language to me too! I just wish I knew enough to make a three column blog, I’ve read everything and just can’t seem to work up my nerve to just do it. lol!! I’m so glad you stopped by and visited my blog, I love when you visit and I have added you to my blog list so I can get here faster!!! I’ve been slacking on my Pink Saturday Posts, but come by and visit anyway!!! Have a super evening!!
    Teresa

  9. June 2, 2009 3:42 pm

    Whoa! A-mazing! I am SO glad I saw this on your blog. I too have been working on the “it worked for me, so it should work for you” theory (nothing wrong with that, but if there’s an easier way….) Off to read your html now, as well. I am still using MS FrontPage (2000 edition) for my website, so it might be so old that Andy’s stuff won’t work! So thanks in advance for the html stuff too!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: