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://”. 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://” which merely means that the web page is being transmitted securely.

Following the “http://” 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.

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 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” (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” /> which would display the following:



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/h...le.php/3478131

http://www.pagetutor.com/pagetutor/makapage/

http://archive.ncsa.uiuc.edu/General...PrimerAll.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.

Excellent Mike. Now I have to check out all the links you provided.
Just want to let you know that none of the images you refer to are showing.

Bear

Originally Posted by behr655 Excellent Mike. Now I have to check out all the links you provided. Just want to let you know that none of the images you refer to are showing. Bear

D-OH!

Hey, this is great! I have a question...

I have created an animated gif image using some shareware, and I would like to incorporate it into my header. When I upload it, it seems to change it to a jpg and the animation doesn't work. Is it possible to have animation in the header, and if so how do I do it? Is it very complicated?

Thanks!

Originally Posted by landrum Hey, this is great! I have a question... I have created an animated gif image using some shareware, and I would like to incorporate it into my header. When I upload it, it seems to change it to a jpg and the animation doesn't work. Is it possible to have animation in the header, and if so how do I do it? Is it very complicated? Thanks!

basic .jpg files cannot animate. But this is not the right thread for that. Please stick to questions about what I wrote this week. Feel free to ask that same thing in another thread though.

Thanks!

Give a man a fish and you feed him for a day. Teach a man html and he'll be able to answer his own cobranding problems!

Mike, this information is going to go a long way and is much appreciated. I'm really starting to solve my own problems just by learning the basics of html rather than relying on you and the few other html experts in dgrin to solve my "how do I change the green color?" questions.

Way to go! And thanks a million.

I knew everything you wrote...I just didn't have it spelled out in front of me, and that is what I need to make my "language" complete
Thank You

Originally Posted by Earle I knew everything you wrote...I just didn't have it spelled out in front of me, and that is what I need to make my "language" complete Thank You

welcome to Dgrin, Earle!

Originally Posted by Mike Lane D-OH!

This is already being helpful. It is a good review for me. Thanks!

i was writing in the bio box and put my main home page and my email but how do i make those links in red or another color
thanks
r

I had just posted a "how do you change that green color" thread when i came across this. i think it will be helpful. One thing I am confused about is;
when to use html and when to use css.

It seems, (from my inexperienced standpoint) that they are different paths to the same place? If there is a thread that can clarify this I would be very appreciative.

Originally Posted by bgraydaisy I had just posted a "how do you change that green color" thread when i came across this. i think it will be helpful. One thing I am confused about is; when to use html and when to use css. It seems, (from my inexperienced standpoint) that they are different paths to the same place? If there is a thread that can clarify this I would be very appreciative.

HTML and CSS are two different things. HTML provides the content (which CSS cannot do) and CSS provides the design (which HTML cannot do effectively). So if you're putting things in your website (words or pictures or navbars or whatever) then you need to put them in with HTML. Once the HTML is in there, you can use CSS to make those words or pictures or navbars or whatever look how you want them to look.

So you need to have both to get anywhere. HTML is plain, unstyled content without CSS, and CSS is meaningless without HTML. Make sense?

yes. thankyou.

I guess that I am in a "modify existing smugmug" or "create fro scratch" limbo. And as I've only had the site for 24 hours, it is all new. I think I need to sort out the css & html thing for the modifications, and I have found threads that offer advice on how to do the same thing both ways. Does that make any sense?

Originally Posted by bgraydaisy yes. thankyou. I guess that I am in a "modify existing smugmug" or "create fro scratch" limbo. And as I've only had the site for 24 hours, it is all new. I think I need to sort out the css & html thing for the modifications, and I have found threads that offer advice on how to do the same thing both ways. Does that make any sense?

Which threads have you found confusing? Maybe we can sort it out for you.

I like your idea of coloring your text to show differences in coding that may be needed. Let me start by saying that I can make your convention work but as a colorblind guy it isn't easy. The yellow and green are virtually the same (yes, the monitor is calibrated) and it is virtually impossible to see the red against the dark background. As I said, I can make it work but if you could use blue, bold face, or intensify the hue of the colors it may help those of us who really want to use your info but who are spectrally challenged. Just food for thought. Thanks very much for the "for dummies" series.

My wife and I are just getting started here on SM. We are writing basic formats of how we want things to look on paper, and we have no clue how to make SM work for us design wise! This is a great introduction to HTML. I hope I can figure all this out over the next few weeks. Thanks for all of the great support in these pages.

Originally Posted by RJPJ My wife and I are just getting started here on SM. We are writing basic formats of how we want things to look on paper, and we have no clue how to make SM work for us design wise! This is a great introduction to HTML. I hope I can figure all this out over the next few weeks. Thanks for all of the great support in these pages.

One hint in working with Smugmug is that it's best to learn Smugmug and how it works and what can be customized in Smugmug first and then plan your customizations and how you want it to look within that framework. If you plan your customizations before knowing what can or should be changed in Smugmug, you may end up starting over a couple times.