HTML & CSS: Lesson 8 – Debugging CSS

If you have spent any time actually trying to build web pages with CSS and HTML then you understand how critical being able to debug your code is.  CSS is an extremely powerful technology that allows you to build engaging web pages but it is also a temperamental  pain in the neck.  Sometimes getting the CSS to do what you want consistently on all of the 3 major browsers will make you want to slap the electricity out of your computer.

So lets look at some tools for debugging your HTML and CSS.  Google Chrome will soon become your new favorite browser.  The developer tool bar is an powerful utility that allows you to be able to inspect the HTML, CSS and JavaScript of any web page.  If you have not already installed Google Chrome, go back to Lesson 1 and follow the instructions for installing it.

The Developer Tool Bar

Fire up Google Chrome.  In the top right hand corner of the screen you should see a wrench.  Click on it and go to the wrench.  Then go to the tools menu and then click on the Developer Tools.

You should see a new panel appear in the browser window.  This window will become your new best friend.

First thing you should notice is the tabs across the top of the developer tools panel.  Elements is the only one we care about right now.  Click on it.  (The other tabs are totally awesome and are invaluable when developing web apps.  But just not for this post.)  The elements tab gives us all of the information about the HTML and CSS.

It gets better.  As you drill into the HTML you will notice that the web page will highlight that area in the browser.  Conversely, if you right click on anything on the page and select “Inspect Element” from the pop menu.  It will find that element in the HTML and highlight it for you.

And if that wasn’t cool enough, the CSS for that element will be displayed on the panel on the right.  Some tag acting weird and not doing what you thought it should be doing?  This panel will give you some clues as to why.

This also gives you a great way to easily study someone else’s work.  Sometimes I‘ll be cruzing the web and see some slick styles.  Right click and inspect element – review the CSS and now I have a new tool in my tool box.

One more nugget – you can edit the page styles from the CSS panel.  Click on a style and you can edit it.  Not sure you like the font color.  No problem.  Find the style for that tag and change it in the editor.

This is a great way to prototype web page design.   Just remember what you changed because the Developer tools will not modify the CSS for you.

The Chrome Developer Tools are fantastic.  And they have many more great features that we will discuss in future blog posts.

HTML & CSS: Lesson 7 – CSS Super Powers

In the last lesson we glossed over a lot of concepts in CSS.  So this lesson we are going to demystify CSS.  In the last lesson we discussed what CSS was and how it interacts with the HTML.  We also saw how it is used to style our page to make it look cool!

The main points that you need to know (see the last lesson if any of this does not sound familiar!) are:

1. You must include a <link> tag in the HTML so that you can link your HTML document to the style sheet if you choose to use an external style sheet.
2. CSS lives in .CSS files (aka style sheets)
3. CSS changes the size, color, position, appearance of HTML tags.
4. CSS selects the HTML tags by using classes, ids and tag names
5. An HTML tag may have 1 id and / or many classes

CSS Selectors

Lets review our menu CSS to really understand how CSS is affecting how the HTML tags are rendered by the browser.  Below is the CSS that takes our ugly div and list and turns them into a beautiful menu bar and menu.

#menuBar
{
height: 84px;
width: 100%;
background: url(images/menu-bg.png) repeat-x;
}

#menu
{
list-style-type: none;
text-align: center;
display: inline;
}

#menu li
{
display: inline;
padding: .2em 1em;
background-color: #036;
margin: 15px;
}

#menu li a{
text-decoration: none;
color: #fff;
}

#menu li:hover
{
color: #fff;
background-color: #369;
}

A CSS selector is simply a mechanism to define which HTML tags will be affected by the styles.  Lets look at the #menuBar CSS.  This select says for every tag that has an id=”menuBar” set the height, width and background.

#menuBar
{
height: 84px;
width: 100%;
background: url(images/menu-bg.png) repeat-x;
}

In CSS the # symbol means we are looking at HTML tags that have id=”SomeValue”.  Typically, we are working with a single tag on the page, but this is not a rule.  And HTML document may have multiple tags with the same id.  But this is considered bad practice and strongly discouraged.  This is where the spandex rule kicks in – “Just because you can doesn’t mean you should.”

We can also select HTML tags by class.  For example, look at the following HTML.

<div class=”article”> I am 16px font </div>

<div class=”article red”> I am 16px font and red </div>

<div class=”article ads”> I am 16px font </div>

Suppose we wanted all articles to have a 16 point font.  Then we could use the . (dot) selector to apply the font-size to all tags that have an “article” in the class attribute.

.article {
font-size: 16px;
}

Now suppose we want all tags that have a red class to have a red font color.

.red{
color: red;
}

We can reuse and combine CSS styles to create complex and reusable styles.  This is important.  Don’t miss this.  You can COMBINE styles to create more complex and REUSABLE styles.  Take the time to really digest what a powerful feature this is.  You do not (nor should not) have an individual style for every element on a page.  So if you notice that you are constantly repeating a particular decorator (font-size, color, background, width, height) that you should probably make it an individual style and apply the style to the classes that you need it.

Why do this you may ask? Sounds like a lot of work?  Just a bunch of extra thinking?  Trust me.  It is way better to change the color, width, font, or whatever in one place than to have to hunt the change down in dozens of places and hope that you got them all.  No fun.  Beside other web developers will ridicule your code and talk about your code behind your back.

So we have discussed selecting tags by id and by class.  But you can also select them by name.  Let suppose I want all <h3> tags to be red.

h3{
color: red;
}

Yep.  That simple.

So far you have seen that CSS is extremely useful – but wait there is more!  You can combine these selectors to identify specific tags.  Lets suppose I want all <a> tags in the header div to be red.

<div id=”header”>
<a href=”#”>I am red</a>
<a href=”#”>Me too</a>
</div>
<div id=”mainContent”>
<a href=”#” class=”big”>I am NOT red</a>
<a href=”#” class=”little”>So not red!</a>
</div>

#header a{
color: red;
}

Or if I wanted all tags with a “big” class in the mainContent div to be 24px.

#mainContent .big{
font-size: 24px;
}

Ok so what if I wanted all of the odd links  to be red and all the even links to be blue?  Can CSS do that?  Huh?

#header a:nth-child(odd){
color: red;
}

#header a:nth-child(even){
color: blue;
}

These types of selectors are called pseudo-classes and there are many types.  Some of the more common pseudo-classes are

:hover – the style is activated when the mouse is over the tag.

:focus – the style is activated when the tag has focus

CSS has another super power called inheritance.  Child tags will inherit the decorators of their parent tags.  For example,  lets say I wanted all text on my web page to default to 16px.  I would set the font-size of the <body> tag and then all my children tags inherit that style.  Children tags are any tags that live inside of another tag.  You may have noticed that HTML tags can contain other HTML tags. If a tag contains another tag then that tag then the top level tag is said to be the parent and all of the inner tags are the children.  This a very powerful feature.

Children can override their parents.  So if a parent has a font-size: 16px but the child element needs the font size to be 24px then the child’s style will win.

CSS is very powerful and has many features.  I could not possible discuss all of the decorators or pseudo-classes in this blog post.  But in my next post I will show you how to use the Google Chrome developer tools to steal other CSS super hero’s powers!

HTML & CSS: Lesson 6 – CSS aka Cool Styles for Sites

Ok. CSS Does not really stand for Cool Styles for Sites – but it should.  Cascading Style Sheets just sounds lame.

A style is how something is decorated.  For example, a person may choose to wear a “retro” style of clothing.  It does not change the essence of the person rather it modifies their appearance.  I may not immediately recognize my friend in a 1970 leisure suit but it is still my friend.  CSS styles are the same as fashion styles.  We can change the font, color, size and position of some text on a web page but it does not change the content of the text.  It just changes how it appears.

CSS allows web designers to selectively apply styles to the tags in an HTML document (aka web page).  In CSS we have 3 primary mechanism of deciding how tags get styled.  We can style tags by id, class,  tag name.  (Actually, it is a little more complicated than that but not by much.  We will discuss advanced CSS selectors in a later lesson.  But for now lets focus on the core selectors.)

By id

HTML tags can be given an id or a class(es) or both.  The following <p> tag has been given an id.  The value of an id should be unique with in a document.  So there should be only one tag with the id “importantText”.

<p id=”importantText” >My important text </p>

By class

Classes are different.  Classes allow us to group tags by type.  The following <p> tags have been given a class of “important”. This allows us to define how all important tags should be styled.

<p class=”important” >important message 1</p>

<p class=”important” >important message 2</p>

<p class=”important” >important message 3</p>

Classes can also have multiple groups.  For example I could have a tag that has a class “important” and “critical”.  This tag would be decorated with the styles defined by the important class and the critical class.

<p class=”important critical” >important / urgent message 1</p>

<p class=”important” >important message 2</p>

<p class=”important critical” >important / urgent message 3</p>

By tag name

CSS can also select tags by tag name.  So all <p> will get a style applied.

Creating a style sheet

Lets create your first style sheet and dive right into the code.  In Visual Studio Web Developer 2010 Express open the MyFirstWebSite project.  (See lesson 2 if you don’t have a project to work from.)

Right click on the solution and add a new item.

From the new item dialog select Style Sheet and name it StlyeSheet.css.

In the css file we are going to add a style that decorates all <p> tags with maroon text and large font size.

p {
font-size: large;
color: Maroon;
}

Now save the page and run the project.  Nothing changed?  Huh.  That is because we did not tell the page about our style sheet.  We need to link our style sheet to our web page.  Open the web page (Default.html).  Add the following line someplace inside of the <head> tags.

<link href=”StyleSheet.css” rel=”stylesheet” type=”text/css” />

So the <head> tags should now include a <link> tag.

<head>
<title>My Favorite Stuff</title>
<link href=”StyleSheet.css” rel=”stylesheet” type=”text/css” />
</head>

Now save Default.html and refresh the page.  Notice something different?  The My Favorite Links is now maroon and larger.  Cool.

What else can we do?  How about transforming our favorite links into a menu?

First, we need a way to select the tags that the CSS will effect.  Because this is a menu and our page will only have one menu we will use ids to find the tags. (Incidentally,  adding id attributes is good practice,  Ids  help to improve readability of the html.)

<div id=”menuBar”>
<p>My Favorite Links</p>
<ul id=”menu”>
<li> <a href=”http://www.bing.com”>Bing.com </a> </li>
<li> <a href=http://google.com>google.com</a> </li>
<li> <a href=”http://www.live.com”>live.com</a> </li>
</ul>
</div>

We want our menu bar to be 100% of the page width and the background to be a gradient.  Download the gradient and add it to the project under the images folder (right click the images folder and select “Add Existing Item”).

Next add the following CSS to the stylesheet.css file.  We will cover the more advanced aspects of this CSS in the next lesson.  So don’t panic if you don’t understand everything.

#menuBar
{
height: 84px;
width: 100%;
background: url(images/menu-bg.png) repeat-x;
}

#menu
{
list-style-type: none;
text-align: center;
display: inline;
}

#menu li
{
display: inline;
padding: .2em 1em;
background-color: #036;
margin: 15px;
}

#menu li a{
text-decoration: none;
color: #fff;
}

#menu li:hover
{
color: #fff;
background-color: #369;
}

List style courtesy of http://css.maxdesign.com.au/listamatic/

Now your web site should look something like the following pic.

CSS is very powerful – we are able to dramatically change how our webpage was rendered  by modifying the CSS file.  The CSS Zen Garden Site does a fantastic job of showcasing how amazing CSS styled sites can be.

HTML & CSS: Lesson 5 – HTML Basics Part 2

In the previous lessons we learned about the basic HTML tags. In this lesson we are actually going to get to use them to create a very bland web page. But don’t worry we are going to spice is up with CSS later. Your basic web page is going to be a simple page that is a list of all of my favorite web sites. (You can substitute with your sites if you want). This page is also going to have a few of my favorite pictures and a short description of why I like each pic. Open Visual Web Developer 2010 and open the project we created in lesson 2. If your not sure how to do this you might want to review lesson 2. Open the Default.html page you should have something that looks like the following.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    Hello World
</body>
</html>

In the <title> tag add My Favorite Stuff and remove the Hello World text from the <body> tag. <html xmlns=”http://www.w3.org/1999/xhtml”&gt; <head> <title>My Favorite Stuff</title> </head> <body> </body> </html> Now we are going to add a list of our favorite web sites. In the <body> tag add <p>These are my favorite sites </p>. Now save the page and run your project (F5 or from the main menu Debug –> Start Debugging ) .

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>My Favorite Stuff</title>
</head>
<body>
    <p>My Favorite Links</p>
</body>
</html>

You should have a very plain page with the text “My Favorite Links”. If you don’t, check to be sure that all of the HTML tags have a matching closing tag. <p> should be followed by a </p>. It is easy to forget the “/” in the closing tag. Now we are going to add a list of web sites. in the <body> tag and below the <p> tag add the following text. <ul> <li>Bing.com</li> <li>msdn.microsoft.com</li> <li>live.comm</li> </ul> Your page should look like the following:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>My Favorite Stuff</title>
</head>
<body>
    <p>My Favorite Links</p>
    <ul>
        <li>Bing.com</li>
        <li>msdn.microsoft.com</li>
        <li>live.comm</li>
    </ul>
</body>
</html>

Save the page and refresh your browser. You should see a “much improved” (I wish someone would invent sarcasm font) web page. If your not seeing a list of Microsoft site then check to make sure that you saved the page. Also make sure that you refreshed your browser (F5). If you still don’t see the correct text and you know the HTML in the page is correct (because you copied and pasted it). Then you may need to clear your browser cache. Personally, I use Google Chrome and I never have caching issues. My Favorite Links

• Bing.com
• msdn.microsoft.com
• live.com

Now we are going to link these items. Add an <a> tag to each site. <a href=”http://www.bing.com”>Bing.com</a> Your page should look like the following:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>My Favorite Stuff</title>
</head>
<body>
    <p>My Favorite Links</p>
    <ul>
        <li> <a href="http://www.bing.com">Bing.com </a> </li>
        <li> <a href="http://msdn.microsoft.com">msdn.microsoft.com</a> </li>
        <li> <a href="http://www.live.com">live.com</a> </li>
    </ul>
</body>
</html>

Save. Refresh. And your page should look like this. My Favorite Links

• Bing.com
• msdn.microsoft.com
• live.com

Cool. We now have a favorites list. Granted the page looks lame but we are going to fix that with CSS in future lessons. Now lets add some pictures and text. Before we go any farther we will want to divide our page into two sections one for the links and one for the pictures. Add <div> tags inside the <body> tags. One set of <div> tags will encapsulate the links and the other will be a place holder for the images.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>My Favorite Stuff</title>
</head>
<body>
    <div>
        <p>My Favorite Links</p>
        <ul>
            <li> <a href="http://www.bing.com">Bing.com </a> </li>
            <li> <a href="http://msdn.microsoft.com">msdn.microsoft.com</a> </li>
            <li> <a href="http://www.live.com">live.com</a> </li>
        </ul>
    </div>
    <div>
        Images go here
    </div>
</body>
</html>

Before we can add an images to our page we have to have images to be able to add. In Visual Web Developer 2010 Express right click on the solution and select “New Folder” from the pop up menu. Rename the folder images. Note: If you don’t see a “New Folder” option – from the main menu select Debug –> Stop Debugging. Then try again. Find a few pics and copy them into the new images folder. Inside the images <div> tag we are going to add a few images. Then save and runt the project (F5 or Debug –> Start Debugging).

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>My Favorite Stuff</title>
</head>
<body>
    <div>
        <p>My Favorite Links</p>
        <ul>
            <li> <a href="http://www.bing.com">Bing.com </a> </li>
            <li> <a href="http://msdn.microsoft.com">msdn.microsoft.com</a> </li>
            <li> <a href="http://www.live.com">live.com</a> </li>
        </ul>
    </div>
    <div>
        <img src="images/Desert.jpg" />
        <img src="images/Jellyfish.jpg" />
        <img src="images/Tulips.jpg" />
    </div>
</body>
</html>

You should see a page with your images displayed. If you selected huge images you will want to resize them to be less than 256 pixels wide. There is nothing special about that number, we don’t want the images to take up all the space on the page. Now all that is left is to add a caption to the images. We willl use <span> tags

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>My Favorite Stuff</title>
</head>
<body>
    <div>
        <p>My Favorite Links</p>
        <ul>
            <li> <a href="http://www.bing.com">Bing.com </a> </li>
            <li> <a href="http://msdn.microsoft.com">msdn.microsoft.com</a> </li>
            <li> <a href="http://www.live.com">live.com</a> </li>
        </ul>
    </div>
    <div>
        <span>desert</span>
        <img src="images/Desert.jpg" />
        <span>jellyfish</span>
        <img src="images/Jellyfish.jpg" />
        <span>tulips</span>
        <img src="images/Tulips.jpg" />
    </div>
</body>
</html>

Our page should look something close to : Excellent. We just created our first web page. Now it is time to make it look cool with CSS.

HTML & CSS: Lesson 4 – HTML Basics

Now that we have an understanding of what HTML is lets start making a web page.  HTML is a set of tags that web browsers use to display content on a web page.  HTML has dozens of tags but we are only going to discuss the 12 most important tags.  These tags (coupled with CSS) are the building blocks of modern web pages.

• <html>
• <head>
• <body>
• <div>
• <p>
• <span>
• <a>
• <img>
• <link>
• <style>
• <ul>
• <li>

These tags can be divided into 3 categories – document tags, content tags and CSS tags.  Document tags define the parts of a web page.  A letter has a header, body, and signature as part of the structure of the letter.  Web pages are the same way – they have a head and body.  Content tags describe the content of the page and are nested in the body of the web page.  Finally, there are CSS tags.  These tags existing in the head of the web page and control what CSS stylesheets are used to control the presentation of the page.  But I am getting ahead of myself now – more on this later.

Document Tags

Every web page must begin with an <html> tag.  Additionally, it must have a <head> tag and <body> tag.  If you create a new web page in Visual Web Developer 2010 Express the new web page will have this structure by default.

<html>

    <head></head>

    <body> </body>

</html>

Think of these tags as the shell of your web page.  All other tags will either go in the <head> or <body>.  The <head> is for CSS and JavaScript tags and the <body> is for content tags.

Content Tags

All content tags live in the <body> tag.

<html>

<head></head>

<body>

Content tags go here!!!!

</body>

</html>

Most content tags describe text.  Lets look at the text content tags and how to use them.

<p>  </p> – Paragraph tags

The <p> tag is used to describe paragraph content.  All paragraphs should be wrapped in a <p> tag.

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<span> </span> – Span tags

The <span> tag is used to group text content. The <span> tag is frequently nested inside of <p> tags.  The usefulness of this tag will not become evident until we discuss CSS.

<p>Lorem ipsum dolor sit amet, <span>consectetur adipisicing elit</span>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<div> </div> – Division tags

The <div> tag is used to group other content tags.  For example a page may have a main content division, an advertisement content division and a menu content division.  However, like the <span> tag the true power of this tag will not be revealed until we discuss CSS.

<div>

<p> Menu Content </p>

</div>

<div>

<p> Paragraph A Content </p>

<p> Paragraph B  Content </p>

<p> Paragraph C Content </p>

</div>

<ul> <li> – List tags

The <ul> and <li> tags are used together to create a list of content items.  <ul> is the list and <li> is the individual items in the list.  <ul> stands for un-ordered list and <li> stands for list item.

<ul>

<li> One <li>

<li> Two </li>

<li> Three </li>

</ul>

<img> – Image tag

This tag adds an image to the page.  The src attribute tells the browser where to get the image content.

<img src=”/images/Logo.png” />

<a> – Anchor tag

The anchor tag creates a link to another page.  The href attribute controls where the link will direct the browser to.

<a href=”www.bing.com”> click here to go to bing.com </a>

So now you are an HTML expert – no not really.  In the next lesson we are going to use these tags to create a very unimpressive web page.  Then we will take our very unimpressive web page and turn it into something really cool using CSS.

HTML & CSS: Lesson 3–What is HTML and CSS

Any web page can be broken into 3 parts.

• The content
• The appearance
• The behavior

The content is the words and pictures on the web site that give the page meaning.  Not all words and images are content.  For example the logo on ACME.com is not relevant to the content of the page.  If the company changes its logo to something totally different is would not really change the meaning of the page.  Articles and images relating to the article are content.  If the article changed then so would the meaning.  Titles, headers, footers are all examples of content.  Content is controlled by HTML

Appearance is how the page looks.  Colors, logos, background images, and even page layout are all aspects of the page’s appearance.  Appearance is controller by CSS.  We will cover CSS in the later lessons.

Then there is how the page behaves.  Signing into a site, searching and submitting forms are all behaviors. Behavior is controlled by JavaScript.  (JavaScript is an advanced lesson.)

HTML

HTML defines and describes content.  Look at the following lines:

1. Summer
2. <FirstName>Summer</FirstName>

Line 1 is only the content.  Line 2 is the content and a description of the content. Line 2 uses tags to describe the content and the tag <FirstName> gives the content Summer additional meaning.

HTML is a set of predefined tags that describe content on a web page.  It tells the browser which parts of the content is the title, body of the web page, paragraphs, images, and links.  But before we start diving into the different tags, we need to understand a little more about how tags work.

Tag Rules

Open and Close

A tag wraps content, so we need an opening tag and a closing tag.  The open and close tags must have matching names and the closing tag must have ‘/’ before the name.  <xyz> is an open tag and </xyz> is a closing tag.

<title> This is a web page! </title>

Some tags do not have any content (we will see why in a minute).  For these types of tags we don’t need a open and close tag.  These types of tags look like :

• <lineBreak/>.
• <image />

notice that we don’t have any content to wrap.  These types of tags are more like flags and describe parts of the web page that can’t really be wrapped in open and close tags.  Take the <image/> tag as an example. It tells the browser that an image goes here in the document.  But <image/> doesn’t define which image!  We need attributes to do that.

Attributes

Tags can have attributes that give us even more information about the content.  We can give our image tag even more information by including which image to display.

<image source=”myFavoritePic.png” />

We added more information to our tag.  Now the browser knows what images belongs in the web page.  Tags can have many attributes.  The following image tag has three – source, width and height.  The browser will use this information when constructing the web page.

<image source=”myFavoritePic.png” width=”50” height=”50”/>

Nesting and Context

Tags by themselves add a lot of information to the content of a web page. But what really makes tags so powerful is how they work together.  Lets say we were writing a letter and wanted to describe the letter using tags.  We might need a <header>, <body>, <paragraph>, <signature>, and a <footer>.  Perhaps our letter might look like the following:

<Letter date=”7/1/2012”>

<Header>Dear Mom and Dad, </Header>

<paragraph>Summer camp has been fun.  I have been having a great time staying at the hospital near the camp.  But don’t worry about me I escaped from the mother bear without a scratch.</paragraph>

<image source=”MeWithMyCast.png” />

<paragraph>And when I fell off the cliff, on account of that bear, I only got a few bumps and bruises.  The real danger in the woods is Susie Jones –  she broke my pinkie finger when <bold>I kissed her </bold>.  </paragraph>

<Signature> Your Son, Timmy </Signature>

</Letter>

Notice that the tags have more meaning in relation to one another.  Also notice that the tags are nested.  All of the tags live inside of the <Letter> tag.  Also notice the <bold> tags at the end of the second <paragraph>.  The <bold> tags are nested inside of the <paragraph> tag and give the content additional meaning.  Also notice the <image> tag.  This tag is sandwiched in between the <paragraph> tags.  This tag tells us where to place that image in relation to the other elements of the letter.

Now that we understand tags and how they work we can start using real HTML tags to create web pages.

HTML & CSS: Lesson 2–First Web Site

In our first lesson we installed Visual Studio Web Developer 2010 Expess.  In this lesson we are going to use Visual Studio to create our first web site.  The goal of this lesson is simply to show you how to to create a new web site project and add a insanely simple web page.  We have to learn how to get around or IDE before we can start.  So hang with me.

From the Start menu type “visual web developer 2010 express”to find the program.  Start it by clicking on the program.

When Visual Studio loads, select “File” from the main menu and then select “New Web Site”.

In the “New Web Site” dialog, select Visual C#, then ASP.NET Empty Web Site (make sure you pick the Empty web site).  Finally, change the default name usually WebSite1 to MyFirstWebSite.  Remember what you name it.  You will be modifying this site later and you will want to be able to find it easily in the future.

Now in the “Solution Explorer”, right click on the web site and select “Add New Item” from the menu.  (This is how we add new web pages to our site.)

Select “HTML Page” and change the name of the file to “Default.html”.  Finally click the “Add” button.

Excellent you are done.  We just created our first web site and added a web page to it.  Bu-yah!  Lets run it.

To see your web site click the “run” button at the top menu bar.

Click ok.  (You will only get this the first time it runs.)

If all goes well you should see a blank web page.  Woot!  Now the fun part.

Go back to Visual Studio and change the Default.html page.  Add “Hello World”  in between the <body> tags.  Now save the pages (Ctrl + S).  Now go back to your browser and refresh the page (F5).  (It is important to remember to refresh the page.)

<html xmlns="http://www.w3.org/1999/xhtml"> 
 <head>
 <title>   </title> 
 </head> 
 <body> 
    Hello World
 </body>
</html> 

First web page is done.  But at this point we really have not explained what is going on.  That is for the next lessons.

HTML & CSS: Lesson 1 – Setting up your box.

Before we can start pounding out code and creating awesome web sites we need to do a little setup.  Artists need paints, writers need pens, and web developers need an IDE. So what is an IDE?  An IDE is an Integrated Development Environment.  Basically, it is a program that helps you  write code.  Word helps you write papers by helping with spelling, grammar and formatting.  An IDE does the same thing – more or less. “Where do I get this IDE you speak of”, you may ask.  There are many good IDEs.  Fortunately, Microsoft provides a free version of Visual Studio (IMHO the greatest IDE ever).  Download Visual Web Developer Express and install it on your box. http://www.microsoft.com/visualstudio/en-us/products/2010-editions/visual-web-developer-express.  This install can take a long time. So be prepared for a lot of waiting.  The installation process is mostly self explanatory.  Just take all of the default installation options and answer the questions. The next thing you need to install is a modern web browser.  For development the best browser is Google Chrome.  The developer tools are a must.  Download and install it – https://www.google.com/chrome. Not bad for our first lesson.  You now have your work environment setup.  Time to do some work.  In our next lesson we will walk through setting up a project and creating our first web page.