Beginning HTML, CSS, and XHTML Should be Fun
One Frustrated Web Designer
A man called me in desperation, asking for help. He was an IT kind of guy (a computer software expert), but admitted that he was over his head with his first website design. He was using Adobe Dreamweaver (an HTML editor) and working with templates, but had reached the point of great frustration because things were going wrong.
If you are also a confused or frustrated beginner, grab a cup of coffee, take a deep breath, and take a look here.
What is HTML?
To begin with, a web page is created using a language called HTML (Hypertext Markup Language). It’s the simple code that’s used to create the structure of web pages.
When writing HTML, you add “tags” to the text in order to create the structure. These tags tell the web browser how to display your web page to visitors.
Take a look:
- <html>
- <head>
- <title>My First Web Page</title>
- </head>
- <body>
- <p>I will see this part of my web page in a browser.</p>
- </body>
- </html>
When you view the resulting page in a web browser, the tags are gone and all you see is the text in RED. That’s because the tags tell the browser how to display pages but do not show themselves. Visitors see information between the opening and closing “body” tags, but not the tags themselves.
Do you want to see some code like this? You can use your internet browser to view the HTML source code of most web pages.
Right-click on an empty spot on a web page and select “View Source” or use a similar option depending on your browser. You can also do the same by going to the menu bar on Internet Explorer and click View -> Source. If you are using a Firefox Browser, click View -> Page Source.
You’ll see a strange-looking page of text. If you look close, you may spot the <html> opening tag near the beginning and the </html> closing tag at the end of the page.
Web browsers interpret this HTML code and display it in a human-friendly way. Thank goodness!
Here’s a great HTML Tutorial. and another Beginner HTML Tutorial.
Next, warm up your coffee and try this HTML Quiz. Do it just for fun! No one is watching.
What is CSS?
HTML and CSS go hand in hand. So if you learn one, you should learn the other.
CSS (Cascading Style Sheets) is a language used for styling a website. CSS can control the text, colors, backgrounds, margins, layout and more.
Usually this is done in an external style sheet. You will link your HTML page to your CSS page.
Do you want your web page to have a pink background? Use CSS.
Do you want some space around your text? Use CSS.
Do you want to make your life easier? Use a separate cascading style sheet (CSS). You can control the layout of many web pages from that one single style sheet. That’s nice!
CSS files are just specially formatted text files much in the same way HTML pages are. They are saved with the extension (.css).
Okay, take a break, grab another cup of coffee, add a snack and check out this CSS Tutorial or this helpful HTML and CSS Video.
Then try a Fun CSS Quiz.
What is XHTML?
You may have heard about XHTML (eXtensible HyperText Markup Language). It is a bit more serious than HTML. It has more rules. XHTML may be the replacement for HTML someday.
What makes it more serious? XHTML pages must be well-formed. The source code also looks more complicated. Plus, the XHTML tags you create have specific rules.
Examples: Every tag needs an end tag. (A start tag like <p> for paragraph needs an end tag like </p>). No capital letters are allowed in the tags. Tags must also be properly nested.
Learn about it here: HTML to XHTML in 10 Steps or Learning XHTML
Also try this great XHTML Beginner Tutorial.
Then take the XHTML Quiz. This one may require a little more concentration. Maybe a lot more. XHTML takes patience and practice.
A Bit About Images on the Web
Images are not technically inserted into a web page. Instead, web pages are linked to images. On a web page, we use the image tag <img> to create a holding space for the image. When someone loads a web page (by going to the URL), it is the browser, at that moment, that actually gets the image from the web server and inserts it into the page for you to see. Learn more about HTML Images.
In your HTML or XHTML page, you have to make sure that the images you are linking to always stay in the same spot in relation to the web page. If you mess up that path between the HTML page and the images it is referencing, you get that broken link icon that everyone hates to see. You are seeing that broken link icon because the browser can’t find the image you are referencing in the <img> tag.
You can also make a reference to an image using CSS. You can set the background image of any CSS element in your style sheet and control how the CSS background image is displayed.
You may choose to have it repeat horizontally (see the ladybug below), vertically, or not at all. But again, you must have a correct path to the image, or else it won’t be displayed in the browser.
Back to the IT Software Expert
After I spent the afternoon with the IT computer software expert helping him fix his broken website, he seemed much more relaxed. He had a better understanding of the source code behind the colorful web page he was trying to build.
We had been talking about CSS and HTML for hours. At the end he said, “Wow! I can tell that you are really passionate about what you do.” Perhaps I talked too much!
March 23rd, 2009 at 2:49 pm
Really good post it breaks things down in layman’s terms for those who are novice designers. I like your blogging style
March 23rd, 2009 at 4:09 pm
Thanks so much. I hope it does help novice web designers. We all have to start somewhere.
April 9th, 2009 at 8:11 pm
Thanks. explanation in details!!! thats very cool for a navice
March 3rd, 2010 at 7:35 pm
Thank you for this great content. I did notice Im having a few errors on your page though. I can certainly look at the post just fine but for some reason at this time there is some sort of frame on top which says “page can not be found” hmmm this might possibly end up being on my end, I may well have some spyware.
March 5th, 2010 at 2:01 pm
Dreamweaver has been my goto software for years. I truly don’t know what I would undoubtedly do without it. There were moments when I initially started using the program, and I believed it was way too difficult. Now I fly around it, and it has turned into a strong asset in my personal tool box. Anyway thank you for the article.
March 16th, 2010 at 10:27 am
I end up here searching dark culture! This post definetly has a good consideration on google also if it wasn’t definetly what i decided to search
April 7th, 2010 at 8:43 am
These really helped me to build my homepage, I can really appreciated if people take some time and write a usefull tutorial.
May 3rd, 2010 at 1:23 pm
i like how you explained it, well written good job.
July 3rd, 2010 at 7:16 pm
I realy appreciate the value your posts brings to my day. I am thinking about starting a new blog. what would be a good wordpress theme for a web design blog?