XHTML Introduction
Readings
World Wide Web
Macromedia Dreamweaver MX 2004 Tutorial and Training
Quick Reference to XHTML & CSS coding (cheat sheet)
The objective of this tutorial is to provide you the basic knowledge of html (hyper text mark up language).We will be using a program called dreamweaver to create a simple websites. We will be adding text, images and learning how to make links which allow you to connect multiple websites.
Dreamweaver and the Internet
Dreamweaver, is a web development tool originally created by Macromedia (now Adobe Systems). Initial versions of the application served as simple WYSIWYG HTML editors but more recent versions have incorporated notable support for many other web technologies such as CSS, JavaScript, and various server-side scripting frameworks.The software is available for both the Mac and Windows platforms. Dreamweaver is currently owned by Adobe Systems, which acquired Macromedia in 2005.(wiki, 2007)
Dreamweaver's interface makes it easy to design and manage both simple and complex web sites by providing a point-and-click interface that simplifies most tasks. Designers can drag and drop page elements in Design view, while developers can work directly with the page's code, making use of the various tools Dreamweaver provides for ensuring correct syntax.
Dreamweaver Interface
The main workspace in Dreamweaver is the Document window. This is where you add elements to your web page, either using Dreamweaver's WYSIWYG (What You See Is What You Get) interface, or by typing the HTML code directly into the window. Dreamweaver offers three document views: Design view, Code view, and Split view, which displays both Design and Code views in a split window.
The Document toolbar also contains commands for naming, previewing, and publishing the current document:
Title - Lets you specify a title for the page, which appears in the title bar of the browser's viewer. |
|
|
No Browser/Check Errors - Provides a menu of options for checking browser compatibility with the page. |
|
File Management - Provides a menu of file management options for the page, including a command to upload the page to your web server. |
|
Preview/Debug in Browser - Lets you preview the page in the browser you select. |
|
Refresh Design View - Refreshes the appearance of the page in Design view after you've made changes to it in Code view. |
|
View Options - Lets you specify various settings for the current view. |
Basic Html Tag
| NAME | OPENING TAG | CLOSING TAG | DESCRIPTION |
|---|---|---|---|
| HTML | <html> | </html> | Hypertext Markup language provides instructions for how to format web pages for display. This tag will appear at the beginning and end of the web page. |
| head selection | <head> | </head> | contains the page title, the descriptive information for the page which is not seen in the browser and programming scripts |
| title | <title> | </title> | surround the page title, which appears in the title bar of the browser window when a viewer opens a page |
| body | <body> | </body> | surround all the content or visible;e elements on the page. Everything between this tag become publicized on to the web. |
Preview in Browsers
Site Structure
Site structure is very important when you're developing your site, it is to make sure that when you come back to it (after a while) or if anyone other than you wants to change or update anything, excellent site structure will help you (or them) understand how to change, add or name files properly (it will also make it easier to find files if you haven't worked on your site in a long time).
Here is an example of the structure for this year's TLS site that we're all looking at right now.
Uploading
There are different methods/languages/sets of rules that your computer can use to move information from one location to another (between machines). You can use and FTP program such as Transmit (mac) or WSFTP (Windows) to upload your files to a server, or navigate a server and download files to your own computer. With a good program you will be able to choose different PROTOCOLS for use in transferring. Mainly though, you'll probably find yourself using an FTP client to transfer files.
You'll be asked to provide information to the program, for instance, in WSFTP connecting to the a student site at SFU, you would provide the following information:
SERVER: ftp.sfu.ca
USER NAME: ~studentid
PASSWORD: **********
Entering this information properly would connect you to that student's files on the SFU server and you would be able to add, delete or download anything therein.