Skip to content

HTML is fun, no, really!

May 21, 2009

I discovered when I opened MaidenShade that I was woefully ignorant.  I needed to open a store, and those I looked at ALL claimed it was easy, you could do it in minutes, bleh bleh bleh.

Don’t believe it.

Now maybe if you don’t care what it looks like as far as customization goes, or if you’re satisfied with bare bones text and so on, this doesn’t apply to you.  Then it can be accomplished in minutes.

But I wanted certain things, like indentation, bolding, color choices, and bullets in descriptions, more pictures than what my ProStores listings offered, links to other pages so people could get more information – and stores don’t have a WYSIWYG editor for these areas.  There were those editors on main pages, but they held limitations as well.  Yet I knew there had to be a way to do what I wanted done.

WYSIWYG = What you see is what you get 

In other words, getting those things didn’t come with ANY package, ever.  Well, let me back up, not that I could afford to pay for.  I was in this alone, I did not have the luxury of a webmaster or a nice geek friend who could build my page for me. 

So, to get the look I wanted, and the hoo-haws like the “real” stores had, I went on a mission.  Apparently I am a lifetime learner.  At my stage in life, I began the process of learning a new language.  HTML.

I would say after a couple of years I am maybe just beyond the “mama, dada, bye-bye” stage.  Hey, I didn’t say I was a quick learner.  But I can get around and either know how to do the things I want OR I can figure it out.  Eventually…

Here are some basics to get you started.  This is from a resource called The Pocket HTML Tutorial if you want to take the entire course – I’ll give you the condensed version that includes things I use all of the time with just a bit of background which may make things easier for you.  This will not be a one post deal, by the way. So bookmark me, subscribe to my feed, and check back often!

PARTS OF A WEBPAGE: Elements

<html>
<head>
<title>A Simple Webpage</title>
</head>
<body>
This is a simple webpage.
</body>
</html>

The words that are surrounded with angle brackets (< >) are called elements. Nuf said.

Structure of the Simple Webpage

Although the “Simple Webpage” doesn’t look like much, its elements (html, head, title, and body) are fundamental to the structure of all HTML documents. Here’s what these elements mean:

  • <html>: “Here begins an HTML document.” The html element helps identify a file as an HTML document.
  • <head>: “Here begins the header.” The header contains elements that apply to the overall document. For example, it might contain elements that are designed for search engines to process or elements that change the overall appearance of the webpage. However, elements in the header do not display directly as normal webpage content. The reasons you would be concerned about the header are a bit abstract at this stage, so we won’t worry about it much until later.
  • <title>: “Here begins the document title.” (Must be in the header) If you view the file simple.html in your browser, along the top of your browser window you should see the words, “A Simple Webpage”. These words appear because of the title element. Titles might not seem important at first glance, but they’re actually quite useful. For example, if a search engine displays your page in a list of search results, it will probably display the title as your page’s title. If you omit the title element, the search engine will make up one for you. This is Not a Good Thing.
  • <body>: “Here begins the body.” The body is where you put text and elements to be displayed in the main browser window. The reason that the words “This is a simple webpage” appear when you display simple.html is because you placed them in the body.

So why do we only see “This is a simple webpage” when we display simple.html in a browser? The answer is, after you remove all the elements that are not designed to display in the browser window, the sentence “This is a simple webpage” is the only thing left.

So now you have the basics for the structure of a webpage.

What I wanted to know straight away was how to do simple things – bullets, bolding, saying “contact me” without writing out a link and telling someone to cut and paste it into their browser… So, I’ll give the code for those things, and then talk about how to use them, tomorrow.

Here are examples:

  • <b>That’s how you make something bold</b>
  • or <em>for italics</em>
  • and <p>for blocks of text</p>

So no “/” means the start of the change, and putting one in means the end of that change, so the text following the / doesn’t get the same formatting.

In other words here’s how you can read it: <P> is “Start Paragraph” and </P> is “End Paragraph”.  That’s one chunk of text, a text block.

Isn’t this fun?  More tomorrow!

xJ

 “The Pocket HTML Tutorial” Copyright 2009 by Evan Goer

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

Advertisements
3 Comments leave one →
  1. May 21, 2009 6:50 am

    When I started focusing my attention on blogging more than my website and eBay and etsy sites, I realized that it was time to learn a bit more about html. Little by little I have built up a small knowledge base. However, you are correct that it is a lifelong learning journey.

    Stick to it. I know enough to get by in limited formats. WordPress is not one I know a thing about now. Often I find free or inexpensive html to modify which is a great base when getting started.

    Even if your brain “hurts”, the end result is so worth it! You are doing a great job.

  2. May 21, 2009 11:27 am

    Thanks for the mini lesson. I’ve just started to weave my way around the tangeled web of blog HTML. My next step may be to change the width of my margins, if I get brave enough. I’d love to go to a stretch template and expand my width (that’s probably about the only place a girl would want to do that!). I don’t know how long it will take me to figure that out. I will probably just start with the regular stretch and get comfortable with that format first.

    Have a terrific Thursday, only one more to go until the summer “season” starts, YIPPEE!!!

  3. May 21, 2009 4:17 pm

    I can’t tell you how many blog templates I have wrecked messing with the CSS. I have finally gotten the hang of it, I think. Not enough to start from scratch, but enough to customize things to my liking. It’s good to keep learning new things and HTML is a whole different language. Hope you have had a great day Jennifer!

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: