Mike Lane
Sep-16-2005, 05:02 PM
Customizing for Dummies
Chapter 1 – The Basics
A quick note about my conventions. I'm going to try to color code the things that I write to make them easier to understand. I've decided that the following colors mean the following things. Chapter titles and sub-titles are in green. HTML is in orange. CSS is in yellow. Changes are in red. I will sometimes put things in a code box, but often times I actually think it makes more sense to put things in the text just in a different color. I'd appreciate any feedback from you if this is a system you don't like.
Our goals are straight forward. We want to use the Smugmug cobranding features to customize our page. In order to accomplish these goals we must have a background on the technologies behind web pages. Without this foundation, you will be lost for the rest of the discussions. So that is what we will be discussing this week.
The Browser
There is one assumption that I have to make. You have at least the most basic knowledge of what a browser is. You are looking at these words in your browser window after all. You have a row of buttons at the top that includes a back button to take you back one page, a forward button to take you forward one page (which only works if you have used the back button to go back at least one page), a stop button, possibly a reload button and an address bar. You may have more on your browser, but these are the basics.
If you look in your address bar you will see a string of characters preceded by “http://” (http://%E2%80%9D). This stands for hypertext transfer protocol and it is what tells the browser that it is looking for a web page that is out on the internet as opposed to other things (like a file on your local computer, another computer connection via FTP – don’t worry what that means, or various other things). You may see “https://” (https://%E2%80%9D) which merely means that the web page is being transmitted securely.
Following the “http://” (http://%E2%80%9D) you will see a string of characters that most often begins with www. This string is called a Uniform Resource Locator or URL. For example http://www.smugmug.com is one that we are surely all familiar with. The “smugmug” part of the URL is called the domain name. This is registered through a specific company so that whenever anyone in the world types in http://www.smugmug.com into their address bar and clicks go (or hits enter) they will all end up on the Smugmug website. For our purposes, it is completely unimportant how this happens (it’s complicated).
What Smugmug has done is made it so when you sign on with them, they give you a sub-domain of their domain that coincides with your username. This is what takes place of the www in the address bar. For example, my Smugmug page is http://mikelane.smugmug.com and my username is mikelane. The page that we’ll be working on has a username of customize so the sub domain is customize and the address is http://customize.smugmug.com. So all web addresses will essentially get forwarded to the Smugmug domain and will then get forwarded to your sub domain.
There is one other thing I want to mention about the browser. The window where you actually see the content of the web pages is called the view port. In the process of creating the page, there will be times when we will be talking about positioning things with respect to the view port. I have highlighted the view port in red in the following image.
http://customize.smugmug.com/photos/36324754-L.jpg
The viewport is bounded in red. Scroll bars and things off screen don't count.
HTML
So you know about the browser, you know how to type in the address to get to your page, and you know a tiny bit about why your page gets directed the way it does. But how exactly do websites appear on the screen? The answer to that is Hypertext Markup Language or HTML.
According to the World Wide Web Consortium (W3C – The body that governs the world-wide standards for HTML), HTML “is a special kind of text document that is used by Web browsers to present text and graphics. The text includes markup tags such as <p> to indicate the start of a paragraph, and </p> to indicate the end of a paragraph. HTML documents are often referred to as 'Web pages'.” 1 (http://www.w3.org/MarkUp/Guide/) So HTML is quite simply a text file that is almost no different than what you’d get from a program like Notepad or SimpleText. The only difference is that your HTML document would be something like index.html not index.txt.
But how can that be? You clearly see images and colors and fonts and moving things and tons of other stuff on your website that you could never see in Notepad. This is where the term Hypertext and your browser come into play. Your browser whether it is Internet Explorer, Firefox, Safari, Opera, or whatever has a built in understanding of the special features of HTML and will use the various codes found in an HTML document to display certain things. These codes are the markup portion of the HTML.
HTML actually doesn’t have that many different codes for a person to use. You can get a complete list of all the HTML tags and exactly what they do and even try them out at http://www.w3schools.com/tags/default.asp (ignore the ones that say “deprecated”!). It is important to remember that in HTML you need to think of these codes as an element. You will have an opening tag and a closing tag for every element on your page with a few notable exceptions. Let’s take a look at some of the tags that we will be dealing with most often. I will note the basic opening tag and put an ellipses (…) and a closing tag if it requires one.
<a> … </a> This is what makes the web interconnected. The a tag is what you use to make any given element a link. In order to make it work, you need to tell the browser what page you are linking to. The way you do that is to include href=“http://www.smugmug.com” (http://www.smugmug.com%E2%80%9D) (notice I put the full URL including the http:// part in double quotes, that is important) in the a tag like this <a href=“http://www.smugmug.com”>Smugmug</a>. The “href” stands for hypertext reference and it is what makes your <a> tag work. There are other things you can do with the <a> tag. One important thing you can do is to make a link that someone can click to email you. To do that you need to do something like this: <a href=“mailto:lanemik@msn.com”>My MSN Address</a>. Notice on this one I used mailto: instead of http://, that is important. More info on the <a> … </a> tag at http://www.w3schools.com/html/html_links.asp
<img /> This is the image tag. Notice that I didn’t use a closing tag but I included a “/” before the ending “>”, that is important. This is one way to tell the browser to display an image. Just like the <a> tag you must tell the browser where on the internet the image is located. For this we use src which stands for “source”. So the full tag would be for example <img src=“http://customize.smugmug.com/photos/36069203-Th.jpg” (http://customize.smugmug.com/photos/36069203-Th.jpg%E2%80%9D) /> which would display the following:
http://customize.smugmug.com/photos/36069203-Th.jpg
As you can see, you are simply telling the browser “hey, I want you to put an image here and this is where you will find it.” More at http://www.w3schools.com/html/html_images.asp
<p> … </p> This is the paragraph tag. This is useful for defining a block of text, links, images or whatever to be a paragraph. The usage is simple. For example, you could do the following:
<p>This is some text that is going to be it’s own paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras eu diam. Curabitur nisi. Donec vitae diam quis odio consequat malesuada. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In odio. Nullam pharetra. Aliquam eu ligula. Etiam non nibh consectetuer eros aliquet tempus.</p><p>And this text will be in its own paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras eu diam. Curabitur nisi. Donec vitae diam quis odio consequat malesuada. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In odio. Nullam pharetra. Aliquam eu ligula. Etiam non nibh consectetuer eros aliquet tempus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
All of this will get translated into the following (indented for readability):
This is some text that is going to be it’s own paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras eu diam. Curabitur nisi. Donec vitae diam quis odio consequat malesuada. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In odio. Nullam pharetra. Aliquam eu ligula. Etiam non nibh consectetuer eros aliquet tempus.
And this text will be in its own paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras eu diam. Curabitur nisi. Donec vitae diam quis odio consequat malesuada. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In odio. Nullam pharetra. Aliquam eu ligula. Etiam non nibh consectetuer eros aliquet tempus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
We’ll be using the <p> ... </p> tag to format various paragraphs of text in our bios and elsewhere. More at http://www.w3schools.com/html/html_primary.asp
<div> … </div> This is called the div tag. Many times people also call everything found within the div tag a layer. The div tag will probably be the tag that we use the most often. Div tags are very flexible and can be formatted in very cool ways. You can put anything you want into a div tag including other div tags. We will be using this feature a lot to do everything from headers to boxes around our whole site. These divs will make it so we do not have to use the word table in our whole page. More at http://www.w3schools.com/tags/tag_div.asp.
<span> … <span> similar to div tags except they are compacted down to the individual lines rather than being big blocks of space like divs (this will make more sense later). A typical use for a span tag is to format a section of text. For example one may do this: I am writing <span>this text</span> as an example. The span tag around “this text” will allow us to access it in special ways. We’ll be using the span tag to have precise control over text that is inline and we will be adjusting Smugmug span tags. More at http://www.w3schools.com/tags/tag_span.asp.
<ul> </ul> This is the unordered list tag. This is slightly different than the other tags in that it requires another tag to work: <li></li> (li stands for “list item”). The basic syntax is this:
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
will display this:
item 1
item 2
item3
That will create a bulleted list. In fact you can take it farther and create sub-bullets like this:
<ul>
<li>item 1</li>
<ul>
<li>sub-item 1</li>
<li>sub-item 2</li>
</ul>
<li>item 2</li>
<li>item 3</li>
</ul>
Gives us something like:
item 1
sub-item 1
sub-item 2
item 2
item 3
We’ll be using the ul tag to create our rollover navbars. More at http://www.w3schools.com/html/html_lists.asp.
More reading on basic html:
http://www.w3.org/MarkUp/Guide/
http://www.htmlgoodies.com/primers/html/article.php/3478131
http://www.pagetutor.com/pagetutor/makapage/
http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html
Once you’ve read over what I wrote, check out the HTML links that I gave. Ask any and all questions you have in this thread. Remember, this thread is about basic HTML and how it applies to building the smugmug site of your dreams. This is not the place for “how do I get rid of the green color?” type questions.
Chapter 1 – The Basics
A quick note about my conventions. I'm going to try to color code the things that I write to make them easier to understand. I've decided that the following colors mean the following things. Chapter titles and sub-titles are in green. HTML is in orange. CSS is in yellow. Changes are in red. I will sometimes put things in a code box, but often times I actually think it makes more sense to put things in the text just in a different color. I'd appreciate any feedback from you if this is a system you don't like.
Our goals are straight forward. We want to use the Smugmug cobranding features to customize our page. In order to accomplish these goals we must have a background on the technologies behind web pages. Without this foundation, you will be lost for the rest of the discussions. So that is what we will be discussing this week.
The Browser
There is one assumption that I have to make. You have at least the most basic knowledge of what a browser is. You are looking at these words in your browser window after all. You have a row of buttons at the top that includes a back button to take you back one page, a forward button to take you forward one page (which only works if you have used the back button to go back at least one page), a stop button, possibly a reload button and an address bar. You may have more on your browser, but these are the basics.
If you look in your address bar you will see a string of characters preceded by “http://” (http://%E2%80%9D). This stands for hypertext transfer protocol and it is what tells the browser that it is looking for a web page that is out on the internet as opposed to other things (like a file on your local computer, another computer connection via FTP – don’t worry what that means, or various other things). You may see “https://” (https://%E2%80%9D) which merely means that the web page is being transmitted securely.
Following the “http://” (http://%E2%80%9D) you will see a string of characters that most often begins with www. This string is called a Uniform Resource Locator or URL. For example http://www.smugmug.com is one that we are surely all familiar with. The “smugmug” part of the URL is called the domain name. This is registered through a specific company so that whenever anyone in the world types in http://www.smugmug.com into their address bar and clicks go (or hits enter) they will all end up on the Smugmug website. For our purposes, it is completely unimportant how this happens (it’s complicated).
What Smugmug has done is made it so when you sign on with them, they give you a sub-domain of their domain that coincides with your username. This is what takes place of the www in the address bar. For example, my Smugmug page is http://mikelane.smugmug.com and my username is mikelane. The page that we’ll be working on has a username of customize so the sub domain is customize and the address is http://customize.smugmug.com. So all web addresses will essentially get forwarded to the Smugmug domain and will then get forwarded to your sub domain.
There is one other thing I want to mention about the browser. The window where you actually see the content of the web pages is called the view port. In the process of creating the page, there will be times when we will be talking about positioning things with respect to the view port. I have highlighted the view port in red in the following image.
http://customize.smugmug.com/photos/36324754-L.jpg
The viewport is bounded in red. Scroll bars and things off screen don't count.
HTML
So you know about the browser, you know how to type in the address to get to your page, and you know a tiny bit about why your page gets directed the way it does. But how exactly do websites appear on the screen? The answer to that is Hypertext Markup Language or HTML.
According to the World Wide Web Consortium (W3C – The body that governs the world-wide standards for HTML), HTML “is a special kind of text document that is used by Web browsers to present text and graphics. The text includes markup tags such as <p> to indicate the start of a paragraph, and </p> to indicate the end of a paragraph. HTML documents are often referred to as 'Web pages'.” 1 (http://www.w3.org/MarkUp/Guide/) So HTML is quite simply a text file that is almost no different than what you’d get from a program like Notepad or SimpleText. The only difference is that your HTML document would be something like index.html not index.txt.
But how can that be? You clearly see images and colors and fonts and moving things and tons of other stuff on your website that you could never see in Notepad. This is where the term Hypertext and your browser come into play. Your browser whether it is Internet Explorer, Firefox, Safari, Opera, or whatever has a built in understanding of the special features of HTML and will use the various codes found in an HTML document to display certain things. These codes are the markup portion of the HTML.
HTML actually doesn’t have that many different codes for a person to use. You can get a complete list of all the HTML tags and exactly what they do and even try them out at http://www.w3schools.com/tags/default.asp (ignore the ones that say “deprecated”!). It is important to remember that in HTML you need to think of these codes as an element. You will have an opening tag and a closing tag for every element on your page with a few notable exceptions. Let’s take a look at some of the tags that we will be dealing with most often. I will note the basic opening tag and put an ellipses (…) and a closing tag if it requires one.
<a> … </a> This is what makes the web interconnected. The a tag is what you use to make any given element a link. In order to make it work, you need to tell the browser what page you are linking to. The way you do that is to include href=“http://www.smugmug.com” (http://www.smugmug.com%E2%80%9D) (notice I put the full URL including the http:// part in double quotes, that is important) in the a tag like this <a href=“http://www.smugmug.com”>Smugmug</a>. The “href” stands for hypertext reference and it is what makes your <a> tag work. There are other things you can do with the <a> tag. One important thing you can do is to make a link that someone can click to email you. To do that you need to do something like this: <a href=“mailto:lanemik@msn.com”>My MSN Address</a>. Notice on this one I used mailto: instead of http://, that is important. More info on the <a> … </a> tag at http://www.w3schools.com/html/html_links.asp
<img /> This is the image tag. Notice that I didn’t use a closing tag but I included a “/” before the ending “>”, that is important. This is one way to tell the browser to display an image. Just like the <a> tag you must tell the browser where on the internet the image is located. For this we use src which stands for “source”. So the full tag would be for example <img src=“http://customize.smugmug.com/photos/36069203-Th.jpg” (http://customize.smugmug.com/photos/36069203-Th.jpg%E2%80%9D) /> which would display the following:
http://customize.smugmug.com/photos/36069203-Th.jpg
As you can see, you are simply telling the browser “hey, I want you to put an image here and this is where you will find it.” More at http://www.w3schools.com/html/html_images.asp
<p> … </p> This is the paragraph tag. This is useful for defining a block of text, links, images or whatever to be a paragraph. The usage is simple. For example, you could do the following:
<p>This is some text that is going to be it’s own paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras eu diam. Curabitur nisi. Donec vitae diam quis odio consequat malesuada. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In odio. Nullam pharetra. Aliquam eu ligula. Etiam non nibh consectetuer eros aliquet tempus.</p><p>And this text will be in its own paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras eu diam. Curabitur nisi. Donec vitae diam quis odio consequat malesuada. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In odio. Nullam pharetra. Aliquam eu ligula. Etiam non nibh consectetuer eros aliquet tempus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
All of this will get translated into the following (indented for readability):
This is some text that is going to be it’s own paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras eu diam. Curabitur nisi. Donec vitae diam quis odio consequat malesuada. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In odio. Nullam pharetra. Aliquam eu ligula. Etiam non nibh consectetuer eros aliquet tempus.
And this text will be in its own paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras eu diam. Curabitur nisi. Donec vitae diam quis odio consequat malesuada. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In odio. Nullam pharetra. Aliquam eu ligula. Etiam non nibh consectetuer eros aliquet tempus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
We’ll be using the <p> ... </p> tag to format various paragraphs of text in our bios and elsewhere. More at http://www.w3schools.com/html/html_primary.asp
<div> … </div> This is called the div tag. Many times people also call everything found within the div tag a layer. The div tag will probably be the tag that we use the most often. Div tags are very flexible and can be formatted in very cool ways. You can put anything you want into a div tag including other div tags. We will be using this feature a lot to do everything from headers to boxes around our whole site. These divs will make it so we do not have to use the word table in our whole page. More at http://www.w3schools.com/tags/tag_div.asp.
<span> … <span> similar to div tags except they are compacted down to the individual lines rather than being big blocks of space like divs (this will make more sense later). A typical use for a span tag is to format a section of text. For example one may do this: I am writing <span>this text</span> as an example. The span tag around “this text” will allow us to access it in special ways. We’ll be using the span tag to have precise control over text that is inline and we will be adjusting Smugmug span tags. More at http://www.w3schools.com/tags/tag_span.asp.
<ul> </ul> This is the unordered list tag. This is slightly different than the other tags in that it requires another tag to work: <li></li> (li stands for “list item”). The basic syntax is this:
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
will display this:
item 1
item 2
item3
That will create a bulleted list. In fact you can take it farther and create sub-bullets like this:
<ul>
<li>item 1</li>
<ul>
<li>sub-item 1</li>
<li>sub-item 2</li>
</ul>
<li>item 2</li>
<li>item 3</li>
</ul>
Gives us something like:
item 1
sub-item 1
sub-item 2
item 2
item 3
We’ll be using the ul tag to create our rollover navbars. More at http://www.w3schools.com/html/html_lists.asp.
More reading on basic html:
http://www.w3.org/MarkUp/Guide/
http://www.htmlgoodies.com/primers/html/article.php/3478131
http://www.pagetutor.com/pagetutor/makapage/
http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html
Once you’ve read over what I wrote, check out the HTML links that I gave. Ask any and all questions you have in this thread. Remember, this thread is about basic HTML and how it applies to building the smugmug site of your dreams. This is not the place for “how do I get rid of the green color?” type questions.