Week 1
Course Introduction
Required Materials
- Textbook Visual Quickstart Guide: HTML5 and CSS3 (7th edition)
- USB Flash Drive to store files
- UNM NetID (login and password)
- UNM Local Computer Account
Introduction to the Web and HTML
What is the Internet?
- The Internet is a worldwide collection of computer networks that links together millions of computers used by businesses, government, educational institutions, organizations, and individuals using modems, telephone lines, television cables, and other communications devices and media.
- A network is a group of two or more computers that are connected together to share resources and information.
- The Internet backbone is a collection of high-speed data lines that connect major computer systems located around the world.
- An Internet Service Provider (ISP) is a company that has a permanent connection to the Internet backbone through which customers can access the Internet.
- The concepts behind the Internet were developed in projects funded by Defense Advanced Research Projects Agency (DARPA...originally just ARPA) in the 1960s and 1970s.
What Is the World Wide Web?
- The World Wide Web, also called the Web, is the part of the Internet that supports multimedia and consists of a collection of linked documents.
- Web pages are linked together by hyperlinks. The concept of hypertext, hyperlinks, and hypermedia were invented by Ted Nelson in 1965.
- Hypertext Transfer Protocol (HTTP) is a set of rules for exchanging text, graphics, sound, and other multimedia files that Web pages use.
- The concept for the World Wide Web was proposed by Tim Berners-Lee while working at CERN in 1989, and developed in the early 1990s.
- Web pages are pages of information on the Web.
- A Web site is a related collection of Web pages.
- A homepage is the first document users see when they access a Web site.
Web Servers
- Web pages are stored on a Web server, or host, which is a computer that stores and sends (serves) requested Web pages and related files.
- Publishing is copying Web pages and other files to a Web server.
- For this course, we will use the Web server at www.unm.edu (you have personal web space on that machine as part of your UNM NetID account).
Web Site Types and Purposes
- There are many types of Web sites (for individuals, organizations, business, etc.), and for many purposes (personal, informational, e-commerce, etc.).
- Electronic commerce (e-commerce) is the buying and selling of goods and services on the Internet.
Web Browsers
- A Web browser, also called a browser, is a program that interprets and displays Web pages and enables you to view and interact with a Web page .
- Browser statistics.
- A Uniform Resource Locator (URL) is the address of a document or other file accessible on the Internet. The term Uniform Resource Identifiers (URI) is also used for this.
- A hyperlink, also called a link, is an element used to connect one Web page to another.
What Is Hypertext Markup Language?
- Web pages are created using Hypertext Markup Language (HTML), which is the authoring language used to create documents on the World Wide Web.
- HTML uses a set of special instructions called tags or markup to define the structure and layout of a Web document and specify how the page is displayed in a browser.
- HTML is platform independent, meaning you can create, or code, an HTML file on one type of computer and then use a browser on another type of computer to view that file as a Web page.
- The newest version of HTML that is currently under development is HTML5. Although it has not yet reached official recommendation status, modern browser can use most of its new features
Extensible Hypertext Markup Language (XHTML)
- Previously we taught this class using XHTML, be we are transitioning away from this older version of HTML. Because it is a stricter version of HTML (which teaches better coding practices) we will still format our code with some aspects of XHTML as noted in the lectures.
- Extensible Markup Language (XML) is a markup language that uses tags to describe the structure and content of a document, not the format.
- Extensible Hypertext Markup Language (XHTML) is a reformulation of HTML so it conforms to Extensible Markup Language (XML) rules.
- XHTML has a few syntax changes from old HTML to make it XML compliant.
For example, empty tags are different:
- <br> or <BR> (in old HTML or HTML5)
- <br /> (in XHTML)
- HTML and XHTML documents come in Strict, Transitional, and Frameset.
Dynamic HTML (DHTML)
- Dynamic HTML (DHTML) is a term that describes a combination of HTML tags, cascading style sheets (CSS), and a scripting language such as JavaScript. DHTML allows users to create interactive, animated Web pages.
- We will primarily create such effects with HTML and CSS in this course, and will have only a brief introduction to JavaScript.
- The term "DHTML" has fallen out of use in recent years.
Cascading Style Sheets (CSS)
- Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation (look and formatting) of a Web page.
- In this course, we will concentrate on separating Web page content and structure (the meaning or semantics) of the Web page (which is handled by the HTML) from the presentation and styling of the page (the visual appearence, which is handled by the CSS).
- The power of CSS formatting can be seen on such example sites as www.csszengarden.com.
Web Page Validation
- Web page validators are programs that check a Web page for proper HTML and CSS coding.
- In this course, we will validate all of the pages we create for assignments and projects.
HTML History
- The Browser Wars is a term used to describe the competition for dominance in the Web browser market.
- During the "bad old days" of the browser wars, browser developers often created incompatible features in their browsers that made it very difficult to write Web pages that would appear the same in all browsers.
- The World Wide Web Consortium (W3C) is an industry consortium that seeks to promote standards for the evolution of the Web and Web technologies
- Today's Web browsers are much more standards compliant, making it much easier to develop pages that appear nearly the same in all browsers.
HTML Versions
- HTML has gone through several versions, each of which expands the capabilities of HTML. After HTML 4.01, the W3C pushed XHTML as the next standard. Currently, HTML5 is being developed (and is already in use).
HTML Elements
- HTML Elements are the basic components of an HTML page, such as headings, paragraphs, tables, lists, etc.
- Most HTML Elements consist of opening and closing tags surrounding content (such as text or other elements). The opening tag may include attributes (zero, one, or many attributes). Examples:
<tag attribute="......">Stuff enclosed by tags</tag>
<tag attribute="......">
Stuff
enclosed
by tags
</tag>
- Some HTML Elements are said to be "empty," since they do not enclose content. Examples of empty Elements include <img>, <hr>, and <br>.
- NOTE! In XHTML, there must always be a closing tag, so any empty Element has the closing /> built into the tag. Example:
<img src="bob.jpg" alt="Picture of Bob Smith" />
- HTML5 does not require the space and slash before the final > of the tag, but HTML5 works fine with it there. I recommend including it.
- XHTML requires that all tags are in lowercase. HTML5 allows you to use uppercase or lowercase tags...but it looks pretty old fashioned nowadays to use uppercase tags, so I recommend against it.
- In the <img> example above, src and alt are attributes of the element. What follows the attribute is the value of the attribute. XHTML requires quotes around the values, but HMTL5 does not (but works fine with the quotes). We will always include the quotes because it fosters better coding discipline that is useful when you move on to JavaScript and other languages.
Web Site Testing
- Usability is the measure of how well a product, such as a Web site, allows a user to accomplish his or her goals.
- Usability testing is a method by which users of a Web site or other product are asked to perform certain tasks in an effort to measure the product's ease-of-use and the user's perception of the experience.
Tools for Creating HTML Documents
- A text editor is a program that allows a user to enter, change, save, and print text, such as HTML. Window's Notepad and Macintosh's TextEdit applications are example of a simple text editor.
- An HTML editor is a program that provides basic text-editing functions, as well as more advanced features, such as color-coding for various HTML tags, menus to insert HTML tags, and spell checkers. Komodo Edit is an example of a HTML editor available for free for Windows, Mac, and Linux.
- A WYSIWYG editor is a program that provides a graphical user interface that allows a developer to preview the Web page during its development. Adobe Dreamweaver is an example of a WYSIWYG editor.
- NOTE! The purpose of this class is to learn HTML coding, so you should NOT be making your web pages in a WYSIWYG environment. But you can use programs such as Dreamweaver in is Code View mode.
- IMPORTANT! Avoid saving files in anything other than plain text format. For example, do NOT use Word or WordPad and save files as .doc or .rtf format!
- You will also need tools to transfer your Web site files to a Web Server. This is often done using Secure File Transfer Protocol (SFTP), and some editors have this capability built in.
- Links to a variety of Web tools can be found on this site's Resources page.
Let's Install the Web Developer Extension in Firefox!
Firefox is an excellent browser because you can install useful "extensions." It also has good compliance with Web standards.
We will now install Chris Pederick's Web Developer extension:
- Open this page the Firefox browser.
- Click on this link to the Web Developer extension.
- Click on the "Add to Firefox" button on the page that shows up.
- When the drop-down appears warning you to only install add-ons from authors you trust, click "Install Now".
- You should choose to "Restart Firefox" after the installation is complete.
- The Web Developer toolbar should appear in the upper part of the Firefox window after restart. It contains many useful tools.
I highly recommend that you install Firefox and the Web Developer extension on whatever computers you intend to use for creating HTML pages for this course. There is also a Web Developer extension for the Chrome browser.
(Do not confuse the Web Developer toolbar with Firfox's menu item Tools > Web Developer.)
(If we have extra time, we'll go ahead to next week's lecture, although some students might not have their UNM computer accounts yet.)
Assignment 1 - Due Saturday, Aug 24
Send an email to tbeach@unm.edu that includes:
- Your name.
- Your UNM NetID.
- Your 9-digit UNM student number.
- A phone number that we can use to contact you.
- Your preferred email address.
- Your computer platform (Windows, Macintosh, Linux, etc.)
- Your preferred web browser and version (Firefox, Internet Explorer, Safari, ...)
- Your reason for taking this class.
- What you hope to get from the course.
NOTE! The Subject line of this email should be "IT145 YourName Asg.
1".
In general, all email you send to me should have this format for the
Subject line.
You will be graded on:
- How well you followed directions.
Reading Assignment:
- Read the Introduction of HTML5 and CSS3 (this is review of today's lecture)
- Read Chapters 1 and 2 of HTML5 and CSS3 (this is for next week's lecture)