HTML - THE BASICS Session ONE with Codehead - archive - Virtual Assistant Forums

Tess · #1 (**permalink**) 03-15-2008

NOTE: These archives, as well as ALL posted material on Virtual Assistant Forums, is copyrighted and may NOT be copied to another site under ANY circumstances unless otherwise noted. Please respect this free community feature!

Moderator: I'd like to introduce Hamid (Codehead) to all of you and maybe brag a bit about his brilliant mind. Many of you know that he's my best friend and husband and that we met and married while were both traveling in India three years ago. You may already know that we started our business while we were living abroad and that we continued growing our business from no less than SIX different countries over the course of the last three years. But what you may not know is that everything Hamid brings to the table, all of his skill and the ability to craft amazing technology (like our customizable rate comparison calculator!) with a few lines of code - all of that is completely self taught. He 'speaks' ten programming languages and learns a new one each year. When he realized that many forum members were really struggling with their websites and downright hating them in some cases. Hamid decided to create this series of classes to help empower each of you to be able to shed the restraints of the free website templates and limited exposure to HTML. Today's session is the first of a series where we'll learn HTML and CSS - the two tools you need to craft professionally coded, beautiful websites. We'll be running these sessions once every two weeks and each one will build on the previous classes. It's great if you can stay with us through the whole series, as truly engaged interactive learning is going to be to your advantage, but if you do miss a session or two don't worry - each class will be archived in the VAF Events Archives for later reference and ALL sample links Hamid provides you in each class will remain accessible on the website. There IS homework and there WILL BE exams - but all are designed to be fun and to help encourage you and cheer you on - not as a measuring stick against someone else or to make you feel you're missing something. Ultimately, like anything, it's up to you what you do with the information provided - we hope you use it to your advantage. Hamid is going to be pausing to take questions as we move through each main point so don't worry - we're not going to leave anyone behind!

Codehead: Hi! I hope you're all good this morning. In this series, I'm going to teach you both HTML and CSS and how to use them effectively to build and maintain a website. I've learned a lot from great people in the webmaster industry over the past few years and I feel like it's time to give something back. I know that for alot of you the idea of "coding" and HTML are frustrating, intimidating, and it feels really difficult to learn - like another language. But it doesn't have to be.

Everything I know about building websites and software I learned by DOING, and practicing, and reading.

Here is what this series will offer you (not all at once today, but over the course of the next few months):
-Teach you the concepts of HTML, and then CSS.
-To help you write web pages from scratch
-To teach you how to edit existing web pages
-To teach you common HTML and CSS techniques, like centered pages, 2 and 3 column pages etc.

Here is what's it not:
-It will not make you a HTML and CSS guru, you need dedicated practice for that. For those who are interested in pursuing HTML and CSS beyond what I will offer in this series, I will show you how, where to go, what to read.

What you need:
-You need a text editor with no text formatting or a text editor with text formatting that let's you save plain text files with no text formatting

NOTEPAD is a great choice for Windows users and if you are a Mac user, if you have something like Notepad, that's great but if you don't try this: http://www.apple.com/downloads/macos...acnotepad.html. Also you can use DREAMWEAVER if you have it and are already familiar with it (or any other text editor that you are already familiar with). Otherwise, NOTEPAD is the best option for the purpose of today's class.

Moderator: Please take a minute to find and open whichever text editor you'll be using today...

Codehead:
How we will learn:
I tend to like practical examples and I learn through examples better than reading pages and pages of text. So you will be seeing a lot of examples. I will stop periodically to make sure each of you is following along and to find out if there are any questions - we will have time for a Q & A at the end so if your question doesn't relate to what we're doing at the moment, please jot it down to ask at the end of the session. If you have any questions at this point, please go ahead and ask - otherwise, let's begin!

What is HTML and CSS:
HTML stands for "HyperText Markup Language" and CSS stands for "Cascading Style Sheets". The idea is to present some content or information with HTML and then add styles and make it pretty with CSS. This way, if a user has a really old fashioned browser that for some reason doesn't understand CSS, he/she will still be able to view your information just not with your fancy design. Every page on the internet has what's called a SOURCE CODE. Source code is exactly what it sounds like - the source of what built the page. You can view the source code for just about any page on the internet.

How to view a page's source code:
I'll show you how to do this right now, right on this page. First, right click in the middle of the page and you'll see a drop down menu. Click on "View Source", depending on the browser you are using, you might see varieties of "View Source", like "View Page Source" etc.

I view the source code on just about any website I visit, it's kind of an obsession for me to see how a developer made a page or if a website's source code has any quality etc. As you learn HTML and CSS you'll start to recognize the difference between well-written code and sloppy code.

As you learn more, you'll also be able to use this to find out how a coder or designer did something specific on a page.

Now, please open the following link in a new window: http://www.virtualassistantforums.co.../html_css.html
The samples at the link I just gave you can be referred to as we move forward today, and anytime you wish to return to this first session on HTML (after it's been archived on the forums)

OK, so let's start with the most basic elements of HTML - and yes, these are very basics - but in order to learn anything well you've got to have the basics. These initial elements may seem tedious or too simple, but believe me - they will build the foundation for stronger skills as we move forward. You should expect to feel a little disoriented at first - you are, after all, learning a new language.

PLEASE stick with it - don't give up. Things that may not make sense at first will come to light as we progress - you are building a set of TOOLS that are invaluable as a business owner. Just like when you started your VA practice you had to work really hard to grasp some new things. This is the same. If at any time you start to feel like you're missing some info - just let me know. I'll stop after each example to ask for questions - don't be shy if you've got them.

OK! Let's make our first HTML page!

Moderator: you'll want to open the notepad now so that when we start giving you code samples to play with you're ready to go.Each step of the way Hamid will give you specific instructions so you know what's going on - and what you need to do. This page he gave you the link to has a list of the code samples we're going to be working on today so that as you make your own (with instruction of course

) you have something to compare it with. OK, if everyone has that page opened in a new window we'll move ahead

Codehead: "Hello World" is the program that just about every programmer learns to write first, and yes HTML is a programming language!
Now write (type) this in your Notepad:

Hello World

Now save your file as hello_world.html

To save your file this way click 'File' in the menu across the top, select 'Save As'. Then, in the field enter hello_world.html and click 'Save' (be sure you save it to your desktop so you can find it easily again). Now find the file on your desktop and double click on the file's icon. This will launch your browser window and displays the page for you.

View my example online here and compare to your own sample: http://www.virtualassistantforums.co...llo_world.html Please take a moment to do this now and let me know if you have any questions. How does your own page look? Any problems?

What just happened is that you made your first HTML page! Some might argue that this is not an HTML page because it doesn't have any HTML code in it but hey it works in your browser doesn't it? This is an HTML page in it's most basic form, no HTML tags in it yet.

HTML tag, HTML markup and HTML elements are all the same thing and we will use these terms interchangeably. They are the 'accessories' that help you give style, color, and other attributes to your content.

Now let's add an HTML tag to our "Hello World" example. Open a NEW Notepad (File -> New) and write: <strong>Hello World</strong>
Then save the file as hello_world_strong.html on your desktop as we did before. Now, double click on the new file icon to launch your sample in the browser.

(Content cont'd in next post, scroll down to continue reading)

Tess · #2 (**permalink**) 03-15-2008

NOTE: These archives, as well as ALL posted material on Virtual Assistant Forums, is copyrighted and may NOT be copied to another site under ANY circumstances unless otherwise noted. Please respect this free community feature!

Codehead: View my example online here and compare to your own sample: http://www.virtualassistantforums.co...ld_strong.html Please take a moment to do this now and let me know if you have any questions. How does your own page look? Any problems?

As you can see the HTML <strong></strong> tag simply makes whatever appears within it's field BOLD.

So an HTML tag has a starting tag <strong> and an ending tag </strong>.

Member: what is the difference between using the strong vs b?

Codehead: <b> is deprecated, it's better if you use <strong>. <b> is not part of the current standards for HTML any longer.

Codehead: When a web browser reads your HTML file to display it, it starts reading from top to bottom and does whatever you tell it to. You give your instructions to the browser using HTML tags.

In our example, your browser starts at the beginning of the hello_world_strong.html and sees the opening strong tag (<strong>), it realizes that the following piece of text should be bold, it displays the following text bold and then it encounters the end tag (</strong>) which marks the end of the bold region. After the end tag, if there is any text in your document, it will be displayed as normal text not bold.

To test this, open a new text document and copy or type the following: <strong>I'm bold</strong> and I'm not!

Save it as tag_test.html on your desktop and double click on the new file icon. View my example online here and compare to your own sample: http://www.virtualassistantforums.co..._css_tags.html Please take a moment to do this now and let me know if you have any questions. How does your own page look? Any problems?

Member: "I'm bold" was bolded, while "and I'm not" was not

Codehead: Exactly!
You can also have HTML tags withing HTML tags.

Open a new text editor file and copy or type this: <strong><em>I'm bold and italics</em></strong>

Save it as tag_within_tags.html on your desktop and double click on the new file icon. View my example online here and compare to your own sample: http://www.virtualassistantforums.co...thin_tags.html Please take a moment to do this now and let me know if you have any questions. How does your own page look? Any problems?

<i> is also an italic tag but it's deprecated like <b>, use <em> instead!

Member: All letters were bold and in italic

Codehead: Right!

A web browser interprets this exactly the same way, it starts at the beginning and encounters your beginning <strong> tag and realizes that the following text should be bold and then it encounters your beginning <em> tag and that means the following text should be italicized, then it displays your text as both bold and italicized until it then encounters the end of the italicized region and after that it encounters the end of the bold region.

The one very very important thing to note here is that whatever tag starts later should end sooner and that's why our code
Reason for Editing:
looks like this with the tags placed like this: strong italics --- italics strong : <strong><em>I'm bold and italics</em></strong>

Note how <em> starts later and ends sooner.

Now this code below might work in some browsers but would be invalid and most certainly won't work in some browsers so it's an important rule to be aware of and a common coding mistake to avoid:
<strong><em>I'm bold and italics</strong></em> (<-------- NOT CORRECT)

Codehead: Now let's make a little bit more complex page, open a new file in your text editor (File -> New) and copy or type this code into it: <strong><em>I'm bold and italics</em> I'm just bold</strong> <em>I'm just italics</em>

Save it as tag_within_tags_complex.html on your desktop and double click on the new file icon. View my example online here and compare to your own sample: http://www.virtualassistantforums.co...s_complex.html
Please take a moment to do this now and let me know if you have any questions. How does your own page look? Any problems?

Member: Do you just start remembering the codes, or is there a book or something that has them all there?

Moderator: You'll actually find that you learn these as you use them more often...but we will be building a resource page that will contain each of the codes, tags, and other HTML elements that you'll be learning in each session - so there will be a list of tags, with a sample and what they do, that will accumulate as you move through the course series....that resource page will be available at the second session. In the meantime, you can always refer to that initial link Hamid gave you with the examples of each of these exercises...

You can also take notes as you go along - and that's definitely recommended, for these tags....the more you use them, write them, and see them the more likely you are to memorize them sooner.

Codehead: Now, while this was a very basic HTML page you will never see nor make HTML pages like this.

I just wanted to get you comfortable with your text editor and to show you that it doesn't take alot of crazy information to make something happen on a web page. BUT - a proper HTML page starts with something called a "Document Type Declaration" or a "Doctype" in short.

You don't need to memorize Doctypes, I don't and it's just a way of telling the browser what version of HTML you are using.

Here is a simple Doctype we will use for our own sessions:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

You DON'T need to know what this is exactly in order to make proper HTML pages, the ONLY thing you need to do is to copy and paste it into the top of all of your HTML pages. It should be the very first thing in the file. (In every file)

Again, all it does is to inform the browser which version of HTML you are using, so that when it reads the rest of your page looking for information on how to display your content it understands completely.

All programming languages are updated every once in a while. For your intents and purposes - it is enough for you to know to copy and paste the string of code I've presented here into the top of every HTML page you create.

Moderator: Hamid is now going to start giving you longer pieces of code - he will be starting the code sections with a few dashes, and ending with a few dashes. You do NOT want to copy and paste the dashes, these are just placemarkers to let you know where the code ends and where it begins.

Codehead: A proper HTML page also has a few more HTML tags in it. Here is what a proper and the most basic HTML page looks like:
(Open a new text editor and copy and paste ALL of the following code into it but NOT the dashes!!)

----------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title of your page goes here</title>
</head>
<body>
Hello World
</body>
</html>
----------------------------------------

One important note - please notice how each of these lines is separated by a 'return' - make sure you format your own page the same way, so it looks like it does right here. Click 'return' after EACH line - this keeps your code clean and tidy instead of all in one long string which is messy and not good form

It also makes it easier later when your pages get very very long....so you can find what you want to edit faster.

Now save your code as basic_html.html on your desktop and double click on the new file icon.

View my own example online and compare to your own page: http://www.virtualassistantforums.co...asic_html.html
Please take a moment to do this now and let me know if you have any questions. How does your own page look? Any problems?

Member: it shows "hello world"

(Content cont'd in next post, please scroll down to continue reading)

Tess · #3 (**permalink**) 03-15-2008

Codehead:
Now let's look at what each of these tags means/does:
It starts with the Doctype we talked about - to tell the browser which HTML version you are using.

Then it starts an <html> region, meaning everything from here on, in the document is written in HTML.

Then it starts a <head> region.
A <head> usually contains stuff that won't show up on the browser window but are important for SEO etc. Things like your document (page) title etc. We will explain this later in more detail and we will revisit and use the head region for a number of things.
The head region then ends.

Then a <body> region starts, this is your HTML document's body where things will be rendered in the browser window or in other words, VISIBLE ELEMENTS of your page will be here, for example we put the "Hello World" here. This is the region that contains the content your website user will interact with and read.
Then the body region ends and the html region ends too and that's a very basic HTML page.

Open this link in a new window to view the structure of an HTML page in image form: http://www.virtualassistantforums.com/courses/html_structure.gif

Moderator: Ok, one quick additional little exercise we want you to try - go back to the file you JUST saved, the basic_html.html file and right click on it, select 'OPEN WITH' and then 'Notepad' (or whatever editor you're using) - It should open your coded file for you.

Now, replace the 'hello world' text with a sentence about your VA practice, anything you wish to write is fine, just replace the old text with something new. Save your document and then reopen it in the browser as you did before.

You should see your changes on the page now - your own text rather than 'Hello World'. Have you done that? How did it go? Do you see your own new text?

Codehead: From now on whenever you want to make an HTML page copy and paste ALL OF THIS CODE into your file FIRST - it will be your map and is called a TEMPLATE:

--------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Edit me: Title of your page goes here</title>
</head>
<body>
</body>
</html>
--------------------------------

This code I've given you is required in all of the practices we are going to follow in this series.

Remember, the dashes are just placeholders, you want the code between them and you want to hit 'return' between each line for clean well organized code.

There are a few things you are going to memorize as you learn HTML such as: HTML tags. Tags such as <strong></strong>, <em></em>. You don't need to sit and try memorizing this all at once but expect that you will just automatically memorize them after using them a few times.

Here are a few more tags you need to know in order to do this session's practice:

<p></p> Creates a paragraph, try it - open a new document, enter your TEMPLATE, and write the following into the BODY REGION of your code:

-----------------------
<p>I'm the first paragraph</p>
<p>I'm the second paragraph</p>
-----------------------

*So your code should look like this:

-----------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Paragraphs</title>
</head>
<body>
<p>I'm the first paragraph</p>
<p>I'm the second paragraph</p>
</body>
</html>
-----------------------

Save it as paragraph.html on your desktop and double click on the new file icon. Check your example against my example here: http://www.virtualassistantforums.com/courses/html_css_paragraph.html
Any questions, issues?

Moderator: Now, notice he placed some actual text in the <title> tags, it reads 'Paragraphs' When you launch your page in the browser window, look up to the top left corner - you'll see it reads 'Paragraphs' - this is your page title.

Try re-opening your file and editing that field to read your business name. Then save it again and launch to see the changes. Please go ahead and give this a try.

Remember you right click the file on your desktop, then select 'Open with' then 'Notepad' to open and edit your HTML file.

Page titles are VERY important not only for letting your user know in an instant where they are, but also for SEO - search engines read page titles too and place alot of importance on them. Just keep in mind that in the brower there is limited space for a page title, it should NEVER be a string of keywords or a very long sentence...but something that is fully readable in the space provided.

Codehead: Keeping this template somewhere convenient so you can copy and paste it into your document whenever you want to create a new page is a good idea:

---------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Edit me: title goes here</title>
</head>
<body>
</body>
</html>
---------------------

(Content cont'd in next post, please scroll down to continue reading)

Tess · #4 (**permalink**) 03-15-2008

Codehead:
Back to some more basic tags:
<br> Creates a line break, try it, make a new page with this bit of code in the BODY region of your template:

---------------------
I'm the first line<br>
I'm the second line<br><br>
I'm the third line
---------------------

My example is here, please compare to your own and let me know how yours looks: http://www.virtualassistantforums.co...ml_css_br.html

Note that <br> is one of the tags that DOESN'T have an ending tag, it makes sense if you think about it. When a browser encounters a <br> tag, it simply breaks the line and starts a new line.

Now, about <h1></h1> tags:
These create a heading.

We also have <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5> and <h6></h6>.
They are ALL for making headings of different sizes, the only difference is that <h1></h1> makes the biggest heading and <h6></h6> the smallest.

To test these and see what they do exactly, create a new page with this code in the BODY region of your template:

-----------------------------
<h1>I'm the biggest heading</h1>
<h2>I'm smaller</h2>
<h3>Smaller</h3>
<h4>Smaller</h4>
<h5>Smaller</h5>
<h6>Smallest</h6>
-----------------------------

You'll find my example here, please compare to your own sample - how does it look?: http://www.virtualassistantforums.co..._headings.html

I've set up some homework for you to practice with between now and our next session. While it may seem simplistic and easy to some of you I do encourage each of you to spend some time practicing with these homework instructions over and over again.

The idea is to become comfortable with everything from the first session so that these items come naturally to you, so that these terms are familiar to you.

Your homework is presented as an image - the reason for this is I want you to USE the tools we explored today, rather than just viewing the souce and copying

: http://www.virtualassistantforums.co...s_practice.gif

I'm going to leave our session here for today - this may all seem easy so far but it's actually quite a lot to work with.

Moderator: To recap: your homework is to create an HTML page just like the image at the link above (except without the watermark, of course

The formatting and text styles should match Hamid's page exactly. You can also play around with editing the text, etc. Please start a file folder on your desktop to keep your notes, practice files, etc. in - that way you can see your progress.

Good job today everyone, you all did great! It does get more complicated so congrats for laying the basic foundation today!!

We'll post to the boards with the date and time for the next session and will update the ad at the top of the site with the same info.

Codehead: Remember to bookmark this: http://www.virtualassistantforums.co.../html_css.html and we'll see you in two weeks!

(The preceding text has been edited for easier presentation and understanding as a forum post.)

ipifa Virtual Assistant · #5 (**permalink**) 05-22-2009

I thought I would leave a comment on this brillant HTML mini course so it would get noticed by some of the newer members

(sorry if I shouldn't be leaving a comment here?)

I have just finished the first course and busy with the homework! I found this really useful as I really want to learn some HTML to set up my own website.

Thank you soo much Hamid & Tess for setting this up

stacey
Fair AdminSupport

Tess · #6 (**permalink**) 05-22-2009

Comments are good!
We have wanted to keep this course running but I had a baby and life took over

Maybe we'll get it back on track this summer. I think there are five lessons listed so far.

ipifa Virtual Assistant · #7 (**permalink**) 05-22-2009

I noticed that there was about 5 and plan to follow them all

It's the best course i've came across as all others are to difficult to understand!

I totally understand how a baby can take over for a while

(I have 2 myself - one is 2 and the other 4 months

)

I would definately be interested in taking part in this course were it to start up again

Tess · #8 (**permalink**) 05-23-2009

It's really nice to hear that you are enjoying the information and finding it easy to work through.
We'll see what we can do about getting it started up again sooner than later - there is definitely much more material to be covered.

Feel free to post comments or ask questions on any of the class threads!

shelly311 · #9 (**permalink**) 04-12-2010

Thanks for the lesson! I really appreciate all the hard work that is put into this board.