quiz/discussion
- What is the internet? What role does the WWW play in it?
- What is html? What is (x)html? Go over information sheet.
- What is a browser? How do they affect our process of web development?
- What forms of content live inside the browser?
Overview
Html is a coding language used to "mark up" text and embed other forms of content onto a web page. Html utilizes the www (world wide web) as a means to communicate information. We write html when we're building web pages, websites, web applications, etc.
Getting started requires knowledge of directorys (folders), files, and how these things are stored on both your local computer and a remote server. You will come to understand how the code you write gets: requested via a typed-in url, analyzed and sometimes transformed by the server, sent back to the requesting user, "rendered" by the browsing software the user is running.
Go to some websites and look at the code
The easiest way to start learning html is to examine real-world examples of it. Take a look at some sites; google, yahoo, wikipedia, your own company's site, and go to View>Source.
You'll notice right away the source looks nothing like the web page. That's because the source contains instructions telling the browser how to display the content. The instructions are referred to as tags, and you should be able to spot the tags easily by looking for < and >.
Create a directory
To learn about html, we will create a directory to hold all of our html files, images, and anything else we want to put on our website. By creating a directory, we establish locality. From now on, we can think of our files as being connected in such a way that they are very familiar with each other; they don't have to look hard to find each other!
For this class, we will be using Eclipse to create all of our html files. Open eclipse by going to Applications>Programming>Eclipse. Eclipse lists your files and folders in the left column. When you double-click on a file over there, it will open in the editing window on the right.
Open Eclipse, and click file>New>File. Choose webroot as the parent folder. Save the file as hello_world.html.
Here is some html code. , copy and paste this into the new file:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Title goes here</title>
<link href="format.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!--Here is where all of your webpages content goes. This is a comment, and won't appear in your user's browser window. Notice how it is between the two body tags.-->
</body>
</html>
Notice the yellow button above? You can click it to select the html code, but you should get accustomed to selecting code by clicking and dragging, because that's how you usually do it. The button above uses Javascript, which is another course altogether, and it makes life easier.
By the way, I found the javascript to make the select button work here. Finding and using free code that others have written is one of the great things about working on websites. Just make sure you give credit to the original authors!
Save your file.
Open your file in several browsers
There are many browsers that can open and render your html pages. It would be great if they all performed identically. However, for a variety of reasons, they don't. Consequently, you must test your files out on at least two browsers: Internet Explorer (or IE) and Firefox. Currently, IE is the most commonly used browser, but many people are turning to Firefox.
Open your new page in a browser. This can happen in one of several ways: double click on the file, drag the file from your html folder onto your Firefox or Internet Explorer icon; or open your browser and choose File>Open File and locate the html file you'd like to view.
If you're working with ftp and have uploaded files to your web server, go to http://[yourdomainname] where [yourdomainname] is something like www.yourdomain.com, etc. type a /, then type the path to your file, starting with the name(s) of the folders that your file resides within. For example, if your html file is in a folder called learning_html, your path would be http://www.yourdomain.com/learning_html/hello_world.html
Identify html attributes, values, and elements
The most distinctive feature of markup, which is what xhtml is, is the use of < and >. I refer to them as chicken beaks, which is a lot easier than saying greater than/less than symbols. Anything between the chicken beaks is not visible in the browser window. Try typing <this stuff is invisible in the browser>This stuff is not and see what I mean. Make sure you type between the two body tags. Let me repeat: Make sure you type between the two body tags. Save the file and load it in the browser.
Notice that all stuff between the < and > doesn't appear! In fact, it really is there, but the browser does not render it. Instead, the browser sees that stuff as instructions for how to present the stuff outside the chicken beaks to the person visiting the page, or the user. In this example, the browser interprets the code you just wrote as a tag called "this"; it looks at the text immediately following the < symbol as the name of the tag. The browser does not understand the other stuff and consequently ignores it.
Luckily, the browser forgives us when we make funny tags like <this stuff is invisible in the browser>. Still, be careful when you write real tags to spell correctly and use standard tags.
There are many, many html tags that you can use on your pages. Here are some snippets of code featuring commonly used tags:
I have to go <em>really, really</em> badly!
15 Coolidge Dr.<br/> Snyder, NY 14226
In the first two examples above, there are two sets of chicken beaks-one telling the browser to begin "marking up" the text, and another telling the browser to stop. Other times, tags do not "mark up" text, they tell the browser to do something, like insert a carriage return or display an image.<br/> is a special type of tag. It doesn't surround content. It just tells the browser to do something, in this case, put the next bunch of text on its own line, i.e., add a carriage return (if you view it in the browser, the City, State and Zip will appear on the next line). Other non-enclosing tags include img, input, and meta.
You may ask, "What is that / before the > symbol in the <br/> tag?" The /before the > says "this tag is over." In order for html to qualify as xhtml, every tag must be closed. That's well and good for the paragraph tag (<p></p>), which converts the enclosed text into a paragraph, but without the / before the > in <br/>, xhtml thinks <br> is an opening tag, and can't find a </br> to round it out. So /> tells xhtml that this tag begins and ends with itself.
This slash issue is one of several to be aware of if you want to write xhtml, and not just plain old html. Xhtml is just html that follows the requirements of xml, which in turn is a way of tagging information in a universal, flexible manner. Xhtml is what we should all be writing to ensure maximum compatibility and accessibility of our code. It's often thought of as "futureproofing", ensuring future compatibility of our content with ever-progressing browsers and technologies.
You may also ask, "What is all that stuff after div in the <div id="header"> tag? Tags first declare their type, in this case div, and then they may contain any number of attribute/value pairs, constructed this way: attribute="value". Values must be enclosed in quotes for xhtml to be valid.
Most importantly, for code to be valid xhtml, everything must be an element. Elements are the entire set of tags and everything between them. html, head, body, div are all elements; starting with their opening tag and ending with their closing tag. br and img are elements also, even though they don't surround content. xhtml is a stickler for closing what has been opened, and if you leave out a </p> or type <br> instead of <br/>, xhtml get mad at you.
Play around and add some tags to your page. Here's a good list of tags to try out, or consult the html cheatsheet. Make sure you include attributes and values.
Examine whitespace in source code vs. whitespace in the browser
Type some text in your hello_world.html page. Hit return a bunch of times, add spaces, add tabs. Type some more text. Make some ascii art. Save your file and open it in the browser.
Where did all the formatting go-the spaces, tabs, returns, etc.? This stuff is called whitespace. Understanding where the whitespace went is very important. The browser looks for tags to tell it how the text should look. It will only make new lines for text if it is told to do so by a tag. It ignores whitespace in the code-i.e., multiple spaces, tabs, line breaks or carriage returns.
Add <pre></pre> around the junk you just typed. Save, refresh, and note the difference.<pre> tells the browser to render the whitespace as it appears in the code.
Although the browser doesn't care about formatting in your code, it does help to make things easier to look at. Indenting nested tags is a good way to go, e.g.:
<p>
A paragraph of text in the body of a web page
</p>
</body>
By seeing each indented level as an hierarchical structure, you get in the mindset of how the html works-things nested inside other things.
Consider the html tag. It encompasses everything; both head and body tags, and everything inside those tags.
understand the structure of a web page
Pages are built of two main parts -- the head and the body. The head contains information that the server will be interested in. The body contains information that the user will be interested in.
Within this structure is a very strict hierarchy. Each think in the hierarchy can be referred to as an "element". Elements relate to eachother in various ways. Html is the great-great-great-great grandparent. Head and body are twins; the remus and romulus, the apollo and artemis, the Sahadeva and Nakula of the web. Everything inside of them are children, cousins, siblings, uncles/aunts, etc.
The hierarchy extends to content. Html gives us 6 levels of headings (h1-h6, with h1 being considered the most important. Search engines will generally view content between heading tags as more important than that between paragraph tags, or blockquote tags, etc., even though those tags could never be children of the heading tags.
Special characters
There are many times when you will want to type in a character that doesn't appear on your keyboard. For example, consider the copyright symbol: ©. To make that appear on the page, you need to type ©. But how did I type that and make it not turn into a © symbol? Examine the code to find out. Notice that the & itself is a special character!
An important special character to get familiar with is the non-breaking-space. By typing , you can tell the browser to render a space. This is useful if you need to display more than one space, since browsers ignore them otherwise.
discussion/quiz
- Which of the following tags is properly constructed?
<a href=http://www.google.com>
<a "href"=http://www.google.com>
<ahref="http://www.google".com>
<a href="http://www.google.com"> - Fix this code:
<html>
<body>
<head>
</body>
</head>
</html> - Which tag is more important? h1 or h6?
- How can we add more than one space to the beginning of a sentence (assuming we would want to)?
lab
- Write a basic "About me" page. code three paragraphs: one about your background, one about your familiarity with html, and one about what you want to get out of this class.
- Make sure you use the title tag in the head to add a title, and the h1 tag to establish an information hierarchy. Use the pre tag inside some of the content of one of the paragraphs, and note the effect. Save the file as lab1.html in your webroot folder.