IT145 HTML and CSS — Fall 2013

Homepage

 

Class Lectures and Assignments

Aug  19   26 

Sept  2   9   16   23   30 

Oct  7   14   21   28 

Nov   4   11   18   25 

Dec   2   9 

Index by Topic

Resources

Syllabus (PDF)

Instructor: T. Beach
tbeach@unm.edu

UNM-LA

Week 2

* Assignment *

Chapter 1: Web Page Building Blocks

Web page documents contain the text that will appear on the page, and the HTML markup that structures the page (and also specifies where non-text content, such as where images go and the location of their source files, and also makes the links to other pages, etc.).

It has been the trend for a long time now to have the HTML of the page specify the structure and semantics of the page, and have as much of the formatting directives that specify the appearance of the document to be separated out into CSS style sheets. The CSS style sheet information may be stored within the Web page document, but they are often kept in separate files so that the same formatting styles can be applied to multiple pages.

HTML5 continues this trend to focus HTML much more on the structure of the page, specifying the semantics (meaning) of the content. Concentrating on good semantics will make your Web pages more accessible, improve search engine optimization, and makes your code easier to style and maintain.

 

HTML Markup:

The HTML markup (which are tags inserted within the text of the document) divides the document up into elements that specify the semantics of each part of the page. HTML elements are very often nested within other elements.

• Elements, consist of the following:
  1. The opening tag (such as the <p> that that indicates the start of a new paragraph). The opening tag may include attributes of the element.
  2. The affected content (text or other elements nested inside this element).
  3. The closing tag (such as </p> that marks the end of a paragraph).
  • Some elements are "empty" elements (examples: img, hr, br)
    In XHTML the empty tags have closing built in, such as: <hr />
    HTML5 allows this built-in closing, but does not require it.
• Attributes
  • These appear within the opening tag.
  • There may be several attributes specified.
  • The order of the attributes does not matter.
  • Attributes have some sort of Value specified
• Values
  • Values must appear within quotes in XHTML! HTML5 does not require (but allows) these quotes. I think it's a good idea to include them to learn good coding discipline that will carry over to coding JavaScript and other languages.
  • Values might be URLs or numbers or percentages:
    <img src="fish.jpg" width="200" />
    in this above example, the assumed units on "200" are pixels.
  • Values might be an allowed predefined word value:
    <link rel="stylesheet" type="text/css" media="screen" href="base.css" />
    as shown with the first three values in the above example. These values should be typed in lowercase.

• Block Elements v. Inline Elements (Phrasing Elements)
  • These terms "block element" and "inline element" are no longer used in HTML5, but the concepts are still valid.
  • A block element is an element that starts on a new line in the default page display. The term "block element" is out of favor because it implies information about formatting, which is not supposed to be in HTML anymore. The textbook calls these "elements that start on their own line," which is pretty unwieldy... so I will continue to call them "block elements."
  • Examples of block elements: div, h1, p
    • By default, block elements get default white space before and after them, but you will later learn how to control this with CSS.
    • Block elements can contain other block elements and inline elements.
  • Inline elements are now called "phrasing elements," and these elements continue on the same line of the page display.
  • Examples of inline elements: strong, em, span
    • Inline elements generally only contain text and other inline elements.
  • List-items are neither block or inline.

• Parents, Children, Descendants
  • Elements nested within other elements are children of the parent element.
  • Any elements nested within the child element (and the child element itself) are descendents of the parent (which is called an ancestor of the descendant).
  • All children must be nested properly:
    • Proper way: <strong><em>some bold, italic text</em></strong>
    • Wrong way: <strong><em>some bold, italic text</strong></em>
    • There must be no overlap or crossing of the tags!
  • As we will learn later, various formatting can be inherited from an ancestor.

Text Content of a Web Page

• Text is the basic content of a web page (other than the markup).
• How HTML treats "white space":
  • HTML collapses multiple spaces/tabs into a single space.
  • HTML collapses multiple Returns and Line Feeds into a single Return or ignores them altogether.
  • DEMO TIME!
• You should avoid typing certain reserved characters into the text you want to display on your page because they are reserved for page markup. Examples of these reserved characters are:  &  <  >  "
• You enter these characters (if you want them to appear in the text of your page) using entities (which the textbook now calls character references). For example (include the semicolon as shown below!):
  • & = &amp;    
  • < = &lt;
  • > = &gt;
• You can also use entities to display special characters, such as
  • © = &copy;
  • ñ = &ntilde;
  • non-breaking space = &nbsp;
  • BUT... if the text file of your web page is encoded as Unicode, such as UTF-8 format (specified in the head of the document...we will learn about this later), you should be able to simply type in the special characters if you know how. On a PC, you can hold down the Alt key and type 0169 on the keypad to type a © symbol. On a Mac, you use Option-G to type a © symbol. But using the entities in your Web page code is safer, since it doesn't depend on the encoding setting.
• Here is a listing of entities: http://www.w3schools.com/tags/ref_entities.asp

Non-Text Content of a Web Page (Images, Links, Flash movies, etc.)

• Non-text content is inserted with HTML markup.
• Browsers can display JPEG, GIF, and PNG images. Other content usually requires plugins or helper applications to be displayed. HTML5 includes new elements to display audio, video, and other content without the need to resort to plugins (but all of the formats and implements have not been finalized).
• XHTML and HTML5 requires the alt attribute for all images to provide information to users of screen readers or other assistive technologies.

File Names

• Web page names should end in either .html or .htm (the textbook author and I both prefer .html)
• Windows users beware: Most Windows systems are set to NOT show the file extensions by default, so you may miss seeing if there are mistakes in your extensions.
  • To show file extensions in Windows 7, go to the Start menu > Control Panel > Appearances and Personalization > Folder Options > View tab. UNcheck the checkbox labeled Hide extensions for known file types.
• The names of Web page files, and the names of all other media files used in your site should contain NO SPACES!
  • bob_beach.html
  • bobBeach.html
  • bob-beach.html
• If you forget and use spaces in filenames, they may show up with %20 in place of all the spaces, which looks ugly. Worse, on many Web servers, any file names containing spaces will simply not work.
• You can avoid confusion by using ALL LOWERCASE names, but this is not required. Capitalization matters on Unix-based web servers (bob.html, Bob.html, bob.HTML are all different file names to Unix, but not to Mac or Windows).
• The textbook recommends using all lowercase letters, and using dashes (but not underscores). This makes your file name easier to type and remember.
• The home page of your Web site generally needs to be named index.html (but this varies with the Web server). An index.html file in a subdirectory will also be the default page sent if a user types in the URL or is linked into to that directory.

Uniform Resource Locators

• A Uniform Resource Locator (URL), also known as a Uniform Resource Identifier (URI), specifies the location of a file out on the Internet.
• In general, the format is: Scheme://server_name/path_to_file
  • http://www.unm.edu/~tbeach/IT145/index.html    (specifies a Web page)
    • The Web server address may rarely end in a port number such as :80
    • The Web server may appear as an IP address such as 172.16.20.7
      (DNS servers translate domain names into IP addresses.)
  • http://www.unm.edu/~tbeach/IT145/    (specifies a Web directory)
  • ftp://www.unm.edu/~tbeach/IT145/syllabus.pdf    (specifies a file for FTP download)
  • mailto:tbeach@unm.edu    (specifies an email address. Note the lack of //)
  • file:///c|/IT145/index.html    (specfies a file on the local C: drive in Windows)
  • file:///disk/IT145/index.html    (specfies a file on the local disk on a Mac)
    
  • (You probably won't have much use for those last two.)
     
• Absolute URLs
  • Use an absolute URL to reference files outside of your Web site.
  • http://www.unm.edu/~tbeach/IT145/index.html
     
• Relative URLs    (I will draw diagrams on the board)
  • Use relative references to for files within your own web site.
  • bob.html    (references the file bob.html that is in the same directory as the referencing file. Note: Directories = folders.)
  • vacations/japan.html    (references the file japan.html that is inside the vacations directory, which is located in the same directory as the referencing file)
  • ../index.html    (references the file index.html that is one level up in the directory structure from the referencing file)
  • ../../vacations/bob.html    (can you draw the map for this reference?)
  • /vacations/index.html    (This reference, which starts with a / mark, is relative to the root directory of the Web server. This is generally only useful if you control the root of the Web server, so WE WILL NOT USE THIS.)

HTML vs. XHTML

• XHTML is much pickier in that it
  • always requires closing tags (or built-in closing for empty tags)
  • requires lowercase for all tags, attributes, and predefined values
  • requires quotes around values.
• Bothering with XHTML gives you more consistent code, better chances of the code working in the future, better browser support, and better compatibility with advanced web technologies.
• I recommend using the conventions of XHTML when making your HTML5 (lowercase, quotes, closings for empty tags).

DOCTYPE and the flavors of HTML

• The DOCTYPE line at the start of your Web page file tells the Web browser what kind of document it is (what version and 'flavor' of HTML it uses) so that it can format and display it appropriately.
• XHTML and some old versions of HTML required very unwieldy DOCTYPE lines. For example, the DOCTYPE for XHTML 1.0 transitional is:
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
• HTML5 is much simpler! Its DOCTYPE is:
  • <!DOCTYPE html>
  • Note that the word DOCTYPE is capitalized.
• Later versions of HTML no longer allow certain tags or attributes in certain tags that were allowed in older versions of HTML. These tags are said to be deprecated.
  • Deprecated tags and attributes are still supported by most browsers, but their use is not recommended in order to insure compatibility of your pages with future browsers.
  • Web pages that include deprecated tags will not validate if you check your page's code with a validator. It's a good idea to write valid code whenever possible.
  • Examples of deprecated tags: <center> and <font>
• Standards vs. Quirks mode
  • Some browsers look to see if there is a proper DOCTYPE on your page, and will try to follow web standards when rendering the page. If no proper DOCTYPE is found, the browser will resort to using quirky behaviors that older versions of the browser had (and which some web authors exploited for certain effects).

 

Chapter 2: Working With Web Page Files

Designing Your Site

• A linear Web site structure connects Web pages in a straight line.
• A hierarchical Web site structure connects Web pages in a tree-like structure.
• A webbed Web site structure has no set organization.
• A broad Web site is one in which the home page is the main index page, and all other Web pages are linked individually to the home page.
• A deep Web site is one that has many levels of pages, requiring the user to click many times to reach a particular Web page. This can also be a circular Web site.
• The best design for you to use for your Web site will depend on the type of site you are making.

Organizing Your Files

• For this class, you will have a remote root folder on the www.unm.edu Web server.
  • That folder is named public_html (you may need to create it).
  • (Other Web servers may use a different name for the root folder.)
• You will keep a local copy of your Web site files on your USB Flash Drive
  • It's good to have a backup copy of your site on your home computer's hard drive.
  • You should arrange the folder structure of your local copy to match the directory structure of your remote site (and how you arrange this will generally depend on your site's design--see previous section).
  • In general, you will work on the local copies of your files and test them out locally in your Web browser, and then move them to the remote server after they work.
• Where to store your media files:
  • Just in the site's root folder? (messy if there are a lot)
  • All in one media folder?
  • Separate media folders for different types of media?
  • Separate media folders for different pages?
  • It's up to you.

---

Using Our Editor and FTP programs

• Let's set up our Core FTP software to access our remote site
  • Launch Core FTP LE
  • It will open showing the Site Manager window, but close that for now.
  • In the left pane, use the Directory Tree button to navigate to your local folder on your USB Flash Drive. (You can learn the names of the buttons in Core FTP by pointing at them and reading the screen tips that appear.)
  • In the right pane, click on the Site Manager button.
  • Setup the site in the Site Manager dialog box:
    • Site Name = UNM Main   (or whatever you want to call it)
    • Host.IP/URL = ftp.unm.edu
    • Username = your UNM NetID
    • Password = your UNM account's password
    • Check the "Don't save password" box
    • Connection = SSH/SFTP
    • Click Connect and see if it works
    • If a dialog box comes up and asks if you want to trust this site you are connecting to, click Yes.
  • If your connection was successful, you should see the contents of your student file space listed in the right pane.
  • FIRST TIME: If this is your first time looking at your UNM student file space, you may need to create your public_html folder:
    • Click the Make Directory button
    • Give the new directory the name public_html
    • Set the permissions for the public_html directory by:
      • right-click on the public_html folder
      • choose Properties from the shortcut menu
      • User should have Read, Write, and Execute permissions checked.
      • Group should have Read and Execute permissions checked.
      • World should have Read and Execute permissions checked.
      • (You could also do this by typing 755 into the Value field.)
      • Click OK.
  • You can open the public_html folder by double-clicking on it.
  • (You can create additional folders inside public_html as you desire, and set their permissions.)
  • If you want connecting to this site to always open your public_html folder, do the following:
    • Copy the path shown in the Selected Directories / URLs field
      (mine says "/nfs/user/t/tbeach/public_html/" for example)
      (Also: write this path down for use later in these exercises)
    • Click the Site Manager button.
    • Click the Advanced button.
    • Click on Directory/Folder from the list
    • Paste the path into the Remote Start Folder field.
    • Click on the "Abs" check box that is located to the right of the Remote Start Folder field to be sure it is checked.
    • You can also select a Local Start Folder now if you wish by clicking on the button to the right of that field and navigating to the folder on your USB Flash Drive that corresponds to your remote public_html folder.
    • Click OK.
  • When you are connected, you can transfer files from your local folder to the remote folder by selecting the file(s) and clicking on the Upload button (it's a rightward-pointing arrow).
  • When you are connected, you can transfer files from your remote folder to the local folder by selecting the file(s) and clicking on the Download button (it's a leftward-pointing arrow).
  • You can disconnect and reconnect as needed using the Disconnect and Reconnect buttons.
  • When you launch Core FTP in future, you can use the Site Manager dialog box to Connect to your remote site.
  • (If you use Core FTP with multiple web servers, you can setup additional new sites in the Site Manager.)
     
• Let's practice with Komodo Edit
  • Launch the ActiveState Komodo Edit program
    (it takes a long time for it to first start up and load it's code database).
  • Use File | New | New File to create a new Text file on your Local USB Flash Drive. Give it the name mypage.html
  • Type in these three lines (with your name in place of Your Name):
        Your Name
        IT 145
        Hello World!
  • Save the file.
  • Open the file in a Web browser
    • To easily view the file you are editing with Komodo Edit in a Web browser, click on the drop-down arrow part of the "Preview Buffer in Browser" button on the Komodo Edit toolbar (on the right side of the button with a world globe icon in it. If you just click on the button, and not its pop-up arrow, Komodo Edit will display the page in a pane).
    • It may not be readily apparent how to open a file in the new version of Firefox we have installed in the PC lab, since (by default) Firefox now does not have a File > Open menu command. But you can get around this in a couple ways:
      • In Firefox, choose: Firefox > Options > Menu Bar (this turns on the display of the menu bar, which includes a File > Open command).
      • OR, in Windows, you can right-click on the icon of the file you want to view in the browser, and then select Open with > Firefox from the shortcut menu that appears.
  • Does it look like what you expected it would? If not, why not?
  • Edit the file by adding the two extra lines as shown below:
        <pre>
        Your Name
        IT 145
        Hello World!
        </pre>
  • Save the file a view it in the Web browser again.
  • The <pre> tag (which we will hardly ever use in the future) overrides the default way that HTML treats white space.
  • Next we will use Komodo Edit to directly store this file into your remote public_html folder. First we set up the server information:
    • Choose the Edit | Preferences menu command   (On the Macintosh version, you would use Komodo | Preferences)
    • Select Servers from the list on the left.
    • Click the New Server button and make the settings below:
    • Server Type = SFTP
    • Name = UNM Main    (or whatever name you'd like)
    • Hostname = ftp.unm.edu
    • User Name = your UNM NetID
    • Password = (leave this blank)
    • Default Path = the path to your public_html that we wrote down earlier
      (mine, for example, is: /nfs/user/t/tbeach/public_html )
    • Click the Add button, then click OK.
  • Now to actually save the file:
    • Select File | Save As Other | Remotely File...
    • From the Server popup, select UNM Main
    • Wait a little and the program should ask to enter your UNM Password
      Do that, then click Login.
    • The contents of your public_html directory should then be displayed (so that you could open other folders in there, for example)
    • Type in the File name: mypage.html (if it's not already there)
    • Click Save
  • Now you could use a Web Browser to look at your page. The address would be:
    • For older accounts at UNM, the address is:
      http://www.unm.edu/~yourNetID/mypage.html
      (where you must replace yourNetID with your UNM NetID)
    • For newer accounts at UNM (although this also works for older accounts, too) the address is:
      http://yourNetID.people.unm.edu/mypage.html
      (where you must replace yourNetID with your UNM NetID)
    • Unfortunately, the page probably won't display because the permissions for it have not been set. And Komodo Edit has no way to set the file permissions. What a bother!
    • Let's go back to Core FTP to set the permissions...
       
• Use Core FTP to set the file permissions for mypage.html
  • Launch Core FTP LE
  • Connect to the UNM Main server
  • Navigate to the public_html folder if you are not already there
  • Right-click on the mypage.html file
  • Choose Properties from the shortcut menu
    • User should have Read and Write permissions checked.
    • Group should have Read permission checked.
    • World should have Read permission checked.
    • (You could also do this by typing 644 into the Value field.)
    • Click OK.
    • NOTE that files (unlike directories) only need these permissions set. BUT, it would be OK to give the file 755 permissions that folders need.
  • Now that the permissions are set, view the page in a Web browser. The address would be:
    • http://www.unm.edu/~yourNetID/mypage.html
      (where you must replace yourNetID with your UNM NetID)
    • Did it work?
       
• Fixing the annoying permissions problem on the UNM server
  • It would be annoying to have to use Core FTP to set the permissions for all of the files we upload to the UNM server, but unfortunately the default settings on the UNM server make setting the permissions necessary
  • (Note that with all other web servers I have worked with, the permissions of files uploaded into the default Web folder are automatically set properly.)
  • BUT, we can change some settings in a file in your UNM file space to correct this problem:
    • Launch Komodo Edit
    • Choose File | Open | Remote File
    • Select the UNM Main server and enter your password when prompted, if needed.
    • The files in your public_html folder should appear
    • Click the Go up one Directory button to take you to the root level of your student file space.
    • Look for a file named either .cshrc or .bashrc and Open it.
    • Once the file opens, locate the line that says umask 077
    • Edit that line to say umask 022
    • Choose File | Save
    • Your file should automatically have been saved back onto the UNM server. (Note: If you have both a .cshrc and a .bashrc file, make this change to both of the documents.)
    • From now on, whenever you save a file in your file space, it should have the proper permissions for viewing by web browsers.
  • You may need to log out from all connections to your NetID account in order for this change to take effect.
  • To be sure, use Komodo edit to create a file named mypage2.html with content similar to mypage.html, and save this new file directly to your remote public_html directory. Then see if you can view it in your Web browser.
  • Show your instructor that your mypage2.html file works!

Using "webupdate" via SSH

If the method above for getting the correct Web permissions on the files you uploaded to ftp.unm.edu is not working for you, here is an alternate method: You can connect to the linux.unm.edu machine via SSH (as outlined below) and then use the "webupdate" command. This command will set the correct permissions on all the files and directories currently in your public_html folder.

On our classroom PCs, we have a "Secure Telnet" application installed that will allow you to connect to the main campus linux machine via SSH2 protocol. (You can get this software from here if you want to install it elsewhere.) This copy of the software is preconfigured to take you to the UNM main campus computer system. To use this application, do the following:

1. Choose Start > All Programs > Secure Telnet and FTP > Telnet
   (This will launch the program and the "Connect to Remote Host" dialog box that appear with the "linux.unm.edu" host name already in place.)
2. Enter your UNM NetID into the "User Name" field.
3. Click the "Connect"
4. If the warning notice appears, click "OK"
5. Enter your password (for your UNM NetID account) into the dialog box
6. Click "OK"
7. When it asks "Terminal type? [vt100]", press your Enter key.
   (The $ prompt will appear)
8. Type webupdate and press Enter.
   (The permissions on all of your Web files are now set properly!)
9. Type logout and press Enter to logout.

If you are using Mac OS X, you can use the Terminal utility to perform this same action. Do this:

1. Go > Utilities
2. Double-click on the "Terminal" application.
3. Type ssh NetID@linux.unm.edu and press Return
   (where "NetID" is YOUR UNM NetID)
4. When prompted, type your password and press Return
   (no character will appear while you type your password)
5. When it asks "Terminal type? [vt100]", press your Enter key.
   (The $ prompt will appear)
6. Type webupdate and press Enter.
   (The permissions on all of your Web files are now set properly!)
7. Type logout and press Enter to logout.

Note that using the "webupdate" command only sets the permissions for all of the files and directories that are currently in your public_html folder. If you upload more files, you will need to repeat this procedure to set the permissions for those files. But, if you have uploaded several files, it can be faster to set all the permissions this way rather than setting them individually with your SFTP program (especially if you can't remember what files you have uploaded recently that need permissions set).

 

Other Stuff From Chapter 2

• Saving your Web pages from a text editor
• About MS Word and Web Pages
• Viewing Source Code in Web browsers.
  • Often there is a View Source command somewhere.
  • In Firefox, use: Tools > Web Developer > Page Source
• Learning from other peoples' Web pages
• NOTE! So far I have just been modifying my old XHTML pages to create these lecture pages, so don't look at them for proper HTML5!

Recommendations

• Set up the UNM Main server information in the Komodo Edit you will use at home.
• Set up the UNM Main server information in whatever SFTP program you will use at home.

 

---

---

---

Top of Page

Assignment 2 - Due Saturday, Aug 31

Create a simple HTML Web page and load it onto your Web space on ftp.unm.edu using the Web tools discussed/used in class or similar tools. Name the file a2.html and make sure its permission are properly set so that it can be viewed in a Web browser. The web page should display the following four lines as shown below:

Your Name
IT 145
Assignment 2
It works!

Don't worry about validating this page, since we aren't using proper HTML yet. You don't need to include any HTML tags other that the <pre> element (as shown in the lecture above) in this file.

Send an email to tbeach@unm.edu that includes the URL of the page so that I can see it.

NOTE! The Subject line of this email should be "IT145 YourName Asg. 2"

You will be graded on:

• How well you followed directions
• Does the page display as directed

Reading Assignment:

• Read Chapters 3 and 4 of HTML5 and CSS (for next week's lecture)

Extra Credit:

• If you have Web page space available through your home Internet Service Provider (or other Web server you use), figure out how to place Web pages into that space using Komodo Edit and/or and FTP program. Place a copy of your a2.html page there and send me the URL so that I can view it.
• If you do not have Web space through your home ISP, you can do this extra credit assignment by researching how to get an account from a free Web hosting site that allows you to upload files via FTP, and place the a2.html page there. Send me the URL so that I can view it. (It is OK if the free Web host adds an advertising banner to the page.)

Top of Page