HTML Fundamentals

Basic code structure of a Website

This week we are going to discuss how the Web works and how the various coding languages come together to make our modern Web experiences possible. We will also begin to dive into the fundamentals of HTML and how Web pages are created.

How things have changed in 15 years.

By now, most of us have been using the Web for years, if not over a decade.

I remember using the Internet for the very first time in 1995 with my brother at a public Internet lab. At the time, I barely even understood what the Internet was, let alone how it worked.

I remember when my family first got dial up Internet (Hoosier Online) in 1996 and not even really grasping the concept fully. We were using an Apple PowerMac with a 1GB hard drive, a floppy drive, and a CD-ROM. We had to install Hoosier Online by inserting a series of floppy discs and getting a modem that connected to our phone line.

My brother and I soon figured out how to set up email and begin writing people. It was like driving a car for the first time.

And many of you probably remember the days of Napster, downloading virtually any song for free. We were still using dial up at the time, so my brother and I would make a list of all the songs we wanted to download right before we went to bed, and come down to the computer the next morning to find half of the songs had failed while several were still loading!

Now, we watch high definition movies through Netflix wirelessly while downloading entire albums in a matter of seconds. Design-wise, Web pages look incredible now compared to the boring, techie, stale look they used to have. Take a look, for instance, at the difference between Apple’s Website today and 14 years ago! Back in 1997, the site was completely static and most likely didn’t even require a separate designer and developer.

What may surprise you though, is that since the late 1990’s, we still use the same coding languages to produce modern Websites, those being HTML, CSS, Javascript, Flash, XML, MySQL, and PHP. In the next section, we’ll discuss the main differences between these four languages and how they team up to create rich Web experiences.

HTML

Most everyone has heard this term, but more than likely don’t know exactly what it means or what it stands for. According to Wikipedia, it is:

the predominant markup language for web pages. HTML is the basic building-blocks of webpages. A markup language is a set of markup tags, and HTML uses markup tags to describe web pages.

Simply put, HTML is the skeleton of the Web. It’s like the blueprint of a building. HTML tells where everything is placed on the page, in what order, and to a certain extent, how it looks. Web pages can be made entirely out of HTML with no assistance from any other language, but the code won’t be nearly as efficient or well-organized, or aesthetically pleasing.

HTML’s structure is base on the opening and closing of “tags”. For instance, if I want to create several paragraphs, this is what it would look like:

<p>This is the first paragraph</p>

<p>This is the second paragraph</p>

Notice how we have the opening paragraph tag <p> to indicate the start of that tag and </p> to indicate the end of it. It’s like placing quotations around something. The opening quote indicates that the speaker is speaking, and the closing quote indicates that he is no longer speaking after that point.

Another example of a tag is the <strong> tag, which makes things bold, the <em> tag to make things italicized, and the <u> tag to make things underlined. Below I will show what the HTML would look like and then, what it would look like on the page.

HTML Code:

<p>I am going to use <u>HTML</u> to make <em>certain words</em> <strong>bold</strong>.

How it appears in the browser:

I am going to use HTML to make certain words bold.

And there are many other tags that have unique functions. Below are some of the main ones that I use constantly, and their basic functions:

(Don’t worry about memorizing all these just yet, but know that you will be using them countless times throughout this course.)

<html>

Declares that we are now working in HTML this is the outer-most tag.

<head>

in the top of an HTML section, holds configuration and informational information about the page, but not anything that will be seen on the page itself.

<title>

Text in here goes up at the top title bar in the browser.

<meta>

Used for stuff like key words, descriptions, etc.

<script>

Used to embed other scripting languages like Javascript.

Example:
<script type="text/javascript" src="js/jquery.js"></script>

<link>

Used to link to external CSS and other documents.

Example:
<link href=”folder/stylesheet.css” rel=”stylesheet” type=”text/css />

<body>

This is where the visable HTML is; the stuff you see in the browser

<p>

Paragraph tag, mostly for text. Has default space around it.

<br/>

Single line space (like hitting Shift-Return)

<img />

An image tag. Usually is self-closing (doesn’t require a closing tag)

Needs src=”” to work. This is the URL of the image file.

Example:
<img src=”folder-path/sub-folder/image.jpg” />

<a>

Anchor” tag; used for links and anchors.

To make a link, you need href="" inside the opening tag.

Example:
<a href=”http://www.google.com”>Link to Google</a>

To open it in a different window or tab, add target="" inside the opening tag

Example:
<a href=”http://www.google.com” target=”_blank”>Opens Google in new window</a>

<span>

Mostly used to style text.

Example:
<span class=”bold”>Bold</span> text.

<strong>

The <strong> tag simple makes text appear bold. <b> does the same thing.

<em>

The <em> tag italicizes text. <i> does the same thing.

<h1>

This is the first of several header tags. These are used for really big text. The larger the h number, the smaller the size. For example <h1> is much larger than <h6>. Each of these can be styled however you want though, using CSS.

<ul>

Unordered list. For bullet points. This contains 1 or more <li> tags

<li>

List item. These are the bullet points in the list.

<ol>

Ordered list. This numbers the list of <li>from 1 through whatever number.

Example:
<ol>
<li>This will be numbered 1.</li>
<li>This will be numbered 2.</li>
</ol>

<div>

A very basic container element that is used most prominently in CSS-driven pages.

<iframe>

Used to display other Web pages within a Web page.

Needs src=""to work.

Example:
<iframe src=”http://www.amazon.com”></iframe> Displays amazon.com in an iframe.

<table>

A structure used for charts with multiple rows and cells.

<tr>

A row inside a table. This contains cells, but not vice versa.

<td>

A cell inside a row. You can, however, have rows inside cells)

<table>
<tr>
<td>Cell 1, Row 1 </td>
<td> Cell 2, Row 1 </td>
</tr>
<tr>
<td>Cell 1, Row 2<td>
<td>Cell 2, Row 2<td>
</tr>
</table>

The crazy thing about HTML is that we can actually view it in pretty much any browser. How? Well, it’s different for each browser. But, it’s most commonly under the “View” menu and then “View Source”. If you are using Chrome, it is “View”, then “Developer”, then “View Source”.

This allows us to see the HTML structure of the page that we are looking at. In fact, this is how I first got into Web design. I wanted to create a Website for my band, so I went to a Website that looked similar to what I wanted, viewed the source, and then experimented with the code until I got the site I wanted. This is, in my opinion, one of the best ways to learn coding.

But, before we get more into depth on HTML, let’s look at some of the other languages briefly to find out what they do.

CSS

CSS stands for Cascading Style Sheet. This language tells the HTML elements how to look. If HTML is made up of nouns, then CSS is made up of adjectives, metaphorically speaking. For example, we can create a paragraph in HTML, but we can use CSS to change the height, the width, the background color, how big the text in that paragraph is, how much space is around the paragraph, what color the text is inside the paragraph, and on and on.

While HTML is written in tags, CSS is written a little differently. We first write what we want the CSS to affect, aka the “selector”, then, inside of curly brackets, we write a series of descriptors. I’ll give you an example below:

HTML

<p>This paragraph is being affected by CSS</p>

CSS

p {
font-weight: bold;
color: red;
text-decoration: underline;
font-size: 12px;
}

This CSS would make the text inside the <p> tag bold, red, underlined, and 12 pixels high. Notice the structure: the selector, p followed by an open curly bracket, { then the property font-weight then a colon : then the value bold and finally a semicolon ; The semicolon marks the end of each property. Before you enter your next selector, you must wrap up the attributes of that selector with a closing curly bracket }

Make sense? If it doesn’t yet, don’t worry, we’ll get more practice using it later on. For now, the important part is to understand the differences in each of the languages.

Javascript

Javascript is where the Web design position ends and the Web developer begins. This is mainly because it is a much more logical language than a structural or descriptive language like HTML or CSS. Javascript has much more to do with the functionality and motion of a site than it’s actual visible make up.

If HTML is a set of nouns and CSS is a set of adjectives, then Javascript is a set of verbs. It tells the HTML and CSS what to do when the user interacts with the Web page. For instance, if someone were to click on a link, Javascript would cause a paragraph to fade in or slide across the page. It can handle things like animated effects and much more.

Javascript is not to be confused with Java, which is an entirely different scripting language.

To see some amazing, cutting edge examples of what Javascript is capable of, visit Google’s Chrome Experiments Website. chromeexperiments.com

As you go through some of the examples on that site, you may be thinking to yourself “This looks a lot like Flash”. Well that brings me to our next player on the Web, Adobe Flash.

Flash

Back in the earlier days of the Web, before Javascript was as developed as it is now, Flash was the way people were able to experience dynamic, interactive, graphically rich Web sites. Flash was originally developed by Macromedia before Adobe acquired the company.

You see Flash every time you go to Youtube and watch a video or every time you use Google Maps or see an animated advertisement on a Website or play songs on Myspace. You probably even see Flash when you watch modern cartoons.

Flash not only allows amazing animation and layered graphics, but it also does it without hardly any coding on the designer’s part.

So, what’s the catch? Well there are several. So many, in fact, that, as most of you may already know, Steve Jobs (CEO of Apple) refuses to allow Flash to run on the iPad, iPod Touch, and iPhone. This has caused a HUGE stir in the Web community. Why? Well, I already mentioned several major Websites that use Flash (Google Maps, YouTube, MySpace), along with literally millions of other sites that use it.

Here are some more examples of Flash at work:

The Flash Debate

As wide-spread as Flash is, one of the key reasons Flash is frowned upon is that it is proprietary. That simply means that the source code, or the code that makes up the language, is not open to the public. Think of Flash content on the Web as a black box. It can do all kinds of crazy things, but all inside of this closed box that cannot be edited or taken apart. Not without special software, that is.

What’s another reasons? Well, you have to BUY Flash, the software program to create your own content. That’s right, you can’t just open a text editor and start coding away. You have to purchase a licensed version from Adobe for what now runs as $700!!! And that’s until the next version comes out, at which point, you need to purchase a $200 upgrade.

To get Steve Job’s personal opinion as to why he doesn’t want to support Flash on his slick new devices, read his article Thoughts on Flash.

Watch this video that followed Steve’s posting of that article.

...And Adobe’s CEO, Shantanu Narayen’s response.

So what are your thoughts? Should Apple allow Flash on the iPad? After all, there are millions of Websites out there that use Flash, and hundreds of them get millions of visitors per day. Post your answer in this week’s discussion board.

XML

XML stands for Extensible Markup Language, and quite simply is used to organize data. XML is similar to HTML in its syntax (the grammatical structure of a coding language) in that it uses opening and closing tags. The way that it differs is that none of the tag names have any meaning whatsoever. You can put whatever word you want in the tags, so long as it is consistent with whatever other program is being used in combination with the XML.

A very common example of how XML is used is in Podcasts, which are quite simply RSS feeds. If you are not familiar with RSS feeds or Podcasts, they are systems that allow people to get regular updates to feed readers such as iTunes or Google Reader. You may have seen the RSS icon (to the left) in various Websites.

Below is some common code used in RSS feeds.

<rss version="2.0">
<channel>
<title>W3Schools Home Page</title>
<link>http://www.w3schools.com</link>
<description>Free web building tutorials</description>
<item>
<title>RSS Tutorial</title>
<link>http://www.w3schools.com/rss</link>
<description>New RSS tutorial on W3Schools</description>
</item>
<item>
<title>XML Tutorial</title>
<link>http://www.w3schools.com/xml</link>
<description>New XML tutorial on W3Schools</description>
</item>
</channel>
</rss>

In this instance, you can see that there are tags nested inside of other tags. For example, the outer most tag is <rss>, which holds a <channel> tag, which holds a <title> tag, a <link> tag, a <description> tag, and two <item> tags, which both hold their own <title>,<link>, and <description> tags.

Notice the hierarchy? Think of it like a sandwich or a hot dog. You’ve got two pieces of bread, one at the top and one at the bottom. Those would be like the opening and closing tags of the outer most part, in the above example, that would be like the <channel> tag. Then, in our sandwich, we have two pieces of lettuce, both inside the pieces of bread. Those would be like the opening and closing of the <item> tag. Now, between two pieces of lettuce, you have your ham, folded in two. Think of the top fold as being the opening <link> tag and the bottom fold as being the closing </tag>

I hope I didn’t just make that more confusing.

To see RSS (XML) in action, I recommend downloading a copy of iTunes, if you haven’t already. Once you’ve downloaded it, go to the iTunes store and go the Podcast section. There, you will see tones of audio feeds and video feeds.

Another way to see RSS in action is to go to google.com/reader. They make it easy to organize all your feeds.

XML is not only used for Podcasts and RSS feeds, but is also used in combination with Flash. For example, there are many Flash templates that you can purchase or download that you can edit the internal content of via XML. That means you don’t actually have to have Adobe Flash to make some of these templates work. Now, this requires some internal programing within the Flash document before hand, but once it’s been coded out, the XML is all you need to touch.

MySQL

MySQL (pronounced “My S Q L” or sometimes “My Sequel”) is a language specifically used to manipulate databases. Now, what is a database? Databases are simply structures, much like Microsoft Excel spreadsheets, that hold tables of data. Databases are manipulated using the CRUD method (Create, Read, Update, and Delete).

MySQL, much like Javascript, is a much more developer-oriented coding language, and is usually never dealt with by the Web designer.

So, why use databases? Well, those allow for dynamic Websites, such as Twitter, Facebook, Google, MySpace, or Wordpress. They allow users to post data, such as a Tweet or a Facebook status update for everyone else to see. But there are a couple languages (or techniques rather) used to make a dynamic Website, and those are PHP and AJAX.

PHP

PHP is a Hypertext Preprocessor. Remember reading Hyper Text earlier? Yes, the first two letters of HTML. So therefore, PHP is a language that interacts with the database and spits out HTML that is seen on a Web browser. Remember how we pulled up the source code earlier to see the HTML that makes up a page? Well, in the source, you will NEVER see PHP code. This is all executed behind the scenes.

PHP is like the liaison between HTML and MySQL. PHP is used to access a database, pull data from it, and present it to the Web user in the form of HTML. For example, if a user enters some text into a form field, PHP then takes what he typed and sends it to the database to be entered.

AJAX

AJAX stands for asynchronous JavaScript and XML, but in fact, most AJAX you see is not so much between XML and Javascript, but PHP, MySQL, and Javascript. AJAX is part of what has been known as the Web 2.0 revolution.

AJAX allows for things like Google’s new search feature, where the results update automatically as you enter your search query, without having to actually hit ENTER or refresh the page. Never noticed that before? Go to google.com and start entering a word. Don’t hit ENTER. Notice how the results below are changing, but the nav up at the top never blinks for a second to refresh? That is all the magic of AJAX.

With plain old Javascript, you could do really cool transitions and effects, but it would require all the data to be loaded beforehand. So, even though it may look like new data is being loaded on the page, most likely, it was just being kept hidden until you clicked the right button or link to reveal it.

AJAX allow particular elements to be loaded right before your eyes without having to load the whole page.

Want another example? Go to http://twitter.com/Aplusk (remember from last week’s video; he’s the most followed Twitterer? At the bottom of the page and click “More”. You’ll notice more posts are added to the bottom without reloading the page.

So, that is the big happy family of coding languages (for the most part). There are many more, but those are the main players. In this class, we will be sticking primarily to HTML and CSS, and possible dipping our toes in a Javascript framework called jQuery, which we’ll learn more about later on.


Overview of the Internet

To further explain how the Web works, on a much broader level, here is a video, through Lynda.com in which James Williamson describes the overall process of the Web.

By the way, if you haven’t, I STRONGLY suggest that you get a paid monthly or yearly subscription to lynda.com. The video that I listed above was free, but the rest of the series, from which it came requires login access. It is a very informative series, that is very well explained.

Here is another great explanation of the Internet. This has to do much more with the technical aspects of the Internet, rather than design, but I believe having a good understanding of the underlying principles will help aid in our thought processes when dealing with the Web.

And one more video...

History of the Internet

This video does a great job of explaining the history of the Internet from the very beginning.

Let’s get our feet wet!

So, now that we’ve discussed the various languages and the overall structure of the Internet, lets practice applying some of what we’ve learned, or at least just experiment.

First of all, you must download a copy of Firefox. If you are still using Internet Explorer, STOP IT!!! This is Rule #1 of being a Web designer - at least in my opinion. I’m just going to go on a side tangent for a bit.

IE6

Internet Explorer (IE) and especially version 6, is INFAMOUS among Web designers for being incredibly annoying and frustrating to code for. As you get further into your Web design career, you will need to perform a task known as Cross Browser Compatibility Testing, which simply means, testing to make sure your site looks good in all the major browsers (such as Firefox, Chrome, Safari, Opera, and Explorer). In my own experience, and I’m sure the experience of many thousands of other Web designers and developers, Internet Explorer is typically the ONLY browser that renders code out differently from the others.

Think I’m just making this up? Visit this link:

http://www.catswhocode.com/blog/15-amazing-anti-ie-resources

Or check out this comic:

 

For example, I recently launched a site for an event loft. I literally spent more time fixing problems that only occurred in Internet Explorer than I did developing the entire site from scratch. And I’ve had to do this type of thing many times.

But, let me bring you back from my IE tangent...

FireFox + Firebug = Web Design Magic

We need to download Firefox so that we can use one of its most powerful plug-ins for Web designers and developers, and that’s Firebug.

Firebug is a powerful tool that allows us to not only view a page’s source code, but also manipulate it. Here is an article explaining some of the key advantages to using Firebug and why you, as an aspiring Web designer, need to use it.

Also, there is a good video explanation on the main Firebug homepage under the section.

Once you’ve downloaded Firefox, downloaded Firebug, and read the above article, go ahead and go to a site like cnn.com or nytimes.com and change the text of the article to make it however you want it.

  1. Go to your desired page.
  2. Right-click on the element you want to change.
  3. In the Right-click menu, you should see "Inspect Element" at the bttom. Click it.
  4. At the bottom of the browser, you should see a window containing the HTML of that page. Click on the text that you want to change between the tags that hold it.
  5. To the right, you should also see the CSS of whatever element you have clicked on in the HTML side of the code. This can also be manipulated.

You can even right-click on an element in the HTML below, such as a paragraph you may want to get rid of, and choose “Delete Element”.

There are many other things you can do with Firebug, but for now, let’s just stick with changing text. This should help give you a familiarity with HTML structure as you are manipulating different elements.


The Homework

  1. Make sure you’ve read all the above notes as well as linked articles and videos.
    (Don’t worry about memorizing the HTML and CSS cheat sheets. Those are only for later reference.)
  2. Go onto the Discussion Board and answer the posted questions.
  3. Download Firefox.
  4. Download Firebug and install it on Firefox.
  5. Go to a page on a popular site such as nytimes.com or cnn.com and change the headlines and intro text. (Don’t worry about changing anything else.)
  6. Take a screen shot of what you changed and email it to me at jearley1@ivytech.edu.

    If you don’t know how to do a screen grab, here are some links:
  1. How to Screen Capture for Mac
  2. How to Screen Capture for Windows XP
  3. How to Screen Capture for Windows 7 or Vista
  4. http://www.aviary.com/launch/talon

If you still have trouble doing a screen grab, ask a classmate, and if he/she doesn’t know either, you can email me for help.

Until next time!

- Jon

Sneak peek:

Next week, we’ll be coding out our very first HTML pages using some of the code we discussed in today’s notes. I’ll show you the various types of code editors, and how they differ.

Questions?

As always, please email me if you have any questions! jearley1@ivytech.edu