Lesson1.pdf Lesson 1 Slides
Lesson1all.pdf Lesson 1 Slides (with builds)
There are various tools that you can use to create HTML files. Some people like to use WYSIWYG ("What You See Is What You Get") tools, like word processors or editors made specifically for use with web pages. One of the big disadvantages of using a word processor for HTML is that some word processors produce HTML that is very long and complicated. You can see that for yourself if you save a word processor document as HTML and then look at the file in a plain-text editor.
For this class it's very important reason to be fluent in HTML and not rely on WYSIWIG tools. We will be writing programs that analyze and generate HTML, so if you don't understand HTML you will have a difficult time writing those programs. Make sure that you are familiar with the basic structure of an HTML document and the most commonly used tags.
Here's a list of free editors that might be useful:
Atom Cross platform
Brackets Cross platform
Komodo Edit Windows, Mac, Linux
Bluefish Primarily for Linux, but also available for Mac and Windows
It's okay to use an IDE. Just make sure that you type in HTML tags directly.
Our textbook, Fundamentals of Web Development, has several chapters about HTML and you should read those chapters to help you learn HTML. In addition, many web sites have good tutorials and reference materials about HTML. Here are some sites that you might find helpful:
Note that only opening tags are listed here even though most of these tags are used in opening-closing pairs.
Unfortunately, testing web applications in several different browsers is a necessity because of the many browser dependencies you will encounter: Internet Explorer vs. Firefox, old versions vs. new versions, and so on.
Some Web developers simply aim for the biggest market share and ignore other browsers. In this class I discourage that approach and encourage you to make your Web applications standards-compliant and as browser-indpendent and system-independent as possible.
In this class we won't study the network technologies that make the Web work, but it's a good idea to know the basic concepts and terminology.
There are two international organizations that are important for Web
technology, the IETF and the W3C:
• The IETF (Internet Engineering Task Force) defines standards for various aspects of Internet technology. Their mission, as stated on their web site at http://www.ietf.org, is "to make the Internet work better by producing high quality, relevant technical documents that influence the way people design, use, and manage the Internet"
• The W3C (World-Wide Web Consortium) defines standards for Web technology. As stated on their web site (http://www.w3.org/Consortium/) "The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards. Led by Web inventor Tim Berners-Lee and CEO Jeffrey Jaffe, W3C's mission is to lead the Web to its full potential." Two of the main technologies that we use in this class, HTML and CSS (Cascading Style Sheets), are defined by W3C standards.
The IETF and the W3C together defined HTTP (Hypertext Transfer Protocol) which specifies how web browsers and web servers communicate.
When you surf the Web, you use a web browser like Chrome, Firefox, Internet Explorer (to name a few) to download and view web pages from all over the world. Let's look at what happens when you look at a web site in your browser.
The computer that the browser is running on is called the local computer or the client computer. The computer that the web server software is running on is called the remote computer or the server computer. In some cases, the browser and the server program are on the same computer, but usually they are running on two different computers.
A browser's request, together with the server's response, make up an HTTP transaction. HTTP transactions are always initated by the client, which makes it difficult to write some kinds of applications, like text chat, using only HTTP.
A URL (Uniform Resource Locator) specifies how to access a file or other resource.
According to the
article for URL, the syntax for a URL is:
The scheme is also called protocol and determines what the format of the remainder of the URL will be. The two protocols we will use most in this class are http, for web addresses, and file for local files.
The domain is the domain name of a web server. An IP address can be used instead of a domain name.
The port is useful when there is more than one web server program running on the same computer, or when a server is not using the default port (which is port 80).
The path tells where the resource is located on the server, if the resource is a file. For local files, with a file: scheme (or protocol), there is no domain or port, so the path is the most important part of the URL.
The fragment_id tells the browser what part of the document should be displayed.
In order to communicate with the server, the browser (or network software on the client computer, needs the IP address associated with the domain name. IP stands for Internet Protocol. Network protocols, like IP are formal specifications of the messages that are sent from one computer to another across a network link.
There are two kinds of IP addresses in use: IP4 (version 4 of the Internet Protocol) and
IP6 (version 6 of the Internet Protocol).
This is an example of an IP4 address: 188.8.131.52
This is an example of an IP6 address (in hexadecimal, or base 16 notation): fe80::250:56ff:fe87:3b1d
Name servers are network programs that translate domain names to IP addresses.
Because we are working with the client side of web programming, we will work with local files. For your assignments you will use a text editor, like Notepad++, to write HTML files and save them on your computer. Then you will open them in your browser using Open File... and browsing your local file system to find the HTML document.
If you use Linux or Mac OS X, you can (relatively) easily start a web server running on your computer. However, that is not necessary for doing your assignments and project for this class. You can also run web servers on Windows computers, but as far as I know, a web server isn't installed by default on Windows.
A few years ago someone came up with the term "Web 2.0". According to Wikipedia the term "became notable after the first O'Reilly Media Web 2.0 conference in 2004." Although there are various definitions of Web 2.0, the definition that I will use here is the one of "using the Web as a platform".
One example of using the Web as a platform is Google Documents. To use Google Documents, you don't install anything on your computer (other than a web browser, in the very unlikely event that there wasn't one installed already). You go to a Web site, and then you can create word processor documents, spreadsheets, and presentations. From my experience with Google Documents it seems pretty clear that there aren't as many features as you would find in the Microsoft Office or Open Office equivalents, but there's no question that you can do a lot, and everything you do happens inside a web browser.
Another buzzword that has appeared in recent years is "Rich Internet Application" (RIA). The RIA concept is similar to the "Web as a platform", except that it often refers more to the user interface (UI) than to the underlying implementation. Silverlight and Flash are two products often associated with making RIAs.
...but it is important for you to be aware of some design issues so that you can work well with the people who have taken classes in graphic design. It's also possible that you will be in a situation where you have to do everything for a company or group's Web site: graphic design, writing, software design and implementation, maintenance, etc.
As you use various sites on the Web, think about their design: What works well? What doesn't work so well? How would you change the site?
Here's a Web design site that you might find interesting and helpful: http://webdesignfromscratch.com
We will be learning and using HTML5, the most recent version of HTML. HTML5 includes some major changes from earlier versions, including audio and video tags, offline applications, and a graphics library.
A good resource for learning HTML5 is the online book Dive Into HTML5 (diveintohtml5.info). I don't expect you to read the online book for this lesson, but I do recommend that you look through the book and pay particular attention to the history chapter at the beginning.
One of the requirements for the project is to incorporate one feature of HTML5 into your web application, so start thinking about what you can use from HTML5.