Introduction to the Internet and HTML Unit1–1

British Columbia Institute of Technology School of Business and Media

MDIA 1205: Web Design Technologies 1: Publishing on the Internet and Intranets

If you don’t know much about HTML, then all of this will be fairly meaningless to you at this stage, as you will be learning these new standards from the start. If you have some experience with HTML, then please read these notes carefully so we are all on the same page.

Unit 1: Introduction to the Internet and HTML

NOTE: When you open this PDF file, click on the Bookmark icon

in the left sidebar to display a Table of Contents listing for this file. Expand the index as needed. Click on any topic to go straight to that page. Make sure you have the latest version of Adobe Reader, which you can download from https://get.adobe.com/reader/.

Best Practices — Consistency in HTML Syntax Style

A learner attempting to research HTML syntax on the Internet could quickly become confused with seemingly inconsistent rules relating to some areas of coding. This has come about because of changes in direction in HTML coding standards.

In December 1999, Version 4.01 of the HTML specification was issued and it was thought that this would be the last HTML specification to be written. This was followed by the XHTML 1.0 specification, which became a standard in 2007 and was intended to be moving towards XML with syntax criteria that were very strict. Therefore, the direction of Web syntax development changed again starting in 2010, moving toward a new HTML5 specification which is easier to use and yet more powerful than either HTML 4.01 or XHTML 1.0. While some parts of the HTML5 specification have not yet been approved, all modern browsers comply with the basic aspects of the specification, and that is all you will require in this course. By the time you finish this course, the entire specification may have become the last official standard.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–2

As educators, your instructors believe that it is important to always use “Best Practices” — meaning that we should know the direction in which syntax development is heading and attempt to follow those standards right from the beginning of our courses. Therefore, as you move through your course notes and begin authoring your Web pages, always be aware that you will be expected to use the style recommended by your instructors so that your pages will display “good markup” — which means it should validate correctly as HTML5. You will see notes related to consistency in HTML syntax style throughout your course notes, and you will need to pay particular attention to these and construct your code accordingly. NOTE: Validators do not always flag as errors some items that we consider to be “Best Practices.”

A. Objectives

Upon completion of this unit students will be able to:

• describe the origins of the Internet, • explain what HTML (HyperText Markup Language) is and how it originated as the language of the Web, • outline the basic structure of HTML5 documents, • organize your files and set up your HTML editing tools, • define and use the fundamental HTML5 tags for text manipulation, • create an HTML5 page using basic text styles, • hand code your first Web page in HTML5, • detail text style tag nesting, • describe the encoding of special characters (such as ©), • deal with special characters in HTML5, and • describe the importance of HTML validators (and use them).

B. What is the Internet?

1. Some History

The Internet began its life at the United States Department of Defense in 1969. It was seen as a solution to a “Cold War” problem — how to communicate with other departments after a nuclear attack. The government wanted a reliable communications link between its military officers, defense contractors, and the universities.

The remainder of this page has been intentionally left blank.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–3

The first network was a serial link — information traveled along one route from station to station. If one path were to be disabled (we use two disabled paths in the illustration). The effected station would be cut off from the network and could not receive or transmit any data.

To solve this problem, a team of researchers conceived an idea where installations could be linked like a fish net or spider’s web (hence the name “Web” — usually capitalized as a short form for World Wide Web). In this illustration the former isolated station gets its data from another path.

This meant there could be numerous routes to and from any station. If one route were disabled, the information could simply follow another route to its destination. This original network was called Arpanet (Advanced Research Projects Agency Network). This network used a common set of communication protocols called TCP/IP. A protocol is a set of rules for digital communication. TCP (Transmission Control Protocol) converts messages into chunks or “packets” of information and reassembles these at the destination. IP (Internet Protocol) takes care of the addressing, making sure each packet gets to its correct destination.

NOTE: When you set up your computer e-mail or Internet access, you are normally asked for TCP/IP data. That is exactly the same communications protocol we are talking about here.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–4

In the mid 1980s, the US National Science Foundation provided funding for research and the creation of academic networks, linking them throughout the United States via a high-speed network entitled NSFNet (National Science Foundation Network). This communication system also used the TCP/IP protocols and, in fact, we still use them on the Internet today. NSFNet developed a set of rules and regulations for using the network which became known as AUP (Acceptable Usage Policies). Some of these regulations included restricting extensive “for profit” and business use. However, the AUPs did not specifically ban the use of the network by commercial companies, and many businesses began providing technical support to online research companies and academic institutions.

As use of the network grew, more and more companies pushed the boundaries on the educational provisions of the AUP and began commercial transactions. Because there were no laws governing the Internet, its popularity as a means of expression also grew. It has become the one place where anything might be posted.

Several years ago, the US congress voted “NO” to a “no sex” Internet bill that would have seen the posting of anything sex-oriented as a federal offense. Of course, this brought up questions about “Big Brother” controlling the population and problems as to what should be done about safe-sex education and related health issues emerged. Today, the Internet remains one of the few public information networks which is relatively free of regulations — where freedom of speech is the first right of every user.

As well as the commercial potential, many people discovered that e-mail (electronic mail) was quicker and easier than sending letters and memos, and this use grew faster than any other application. By 1981, a new host was being added to the network every 20 days or so. In 1987, there were over 10,000 hosts (computers serving information). In the next few years, commercial Internet providers would begin providing access to the Internet for a fee. These companies eventually formed CIX (Commercial Internet eXchange) which allowed them to provide information between themselves, without having to abide by the AUPs of NSFNet. The Internet of today was born.

In Canada, NetNorth and CDNNet were the basis for a Canadian Internet network, eventually merging as the largest Canadian network — CA*net. Similar networks have developed around the world and many of them are linked through the US-based NSFNet. The British Columbia section of CA*net is known as BC.net and is operated largely by the province’s three major universities and the government.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–5

By 2018 Internet users numbered more than 4 billion worldwide — see the counter at https://www.internetlivestats.com/ which shows how quickly Internet use is growing. In 2018 the number of Internet hosts (sites) was estimated at more than 1.5 billion. That is almost 4 users for every host. No wonder information on the Net is getting more and more difficult to locate. https://www.internetlivestats.com

ACTIVITY: For more historical information on the Internet, link your browser to Hobbes’s Internet Timeline at https://www.zakon.org/robert/internet/timeline/.

Today, the Internet is a vast collection of data transmission lines which connect computers located at distant sites and is evolving and increasing in size and ability very quickly. The number of computers and people connecting to it is doubling every year.

In the early days of the Internet, the typical home user employed a telephone modem (MOdulator/DEModulator) to transmit information over their phone line to and from a local Internet service provider’s server — some users, especially in isolated areas and in developing countries — still employ slow-speed modems, so we must take that into account when writing Web pages. Logically, a service provider is called an Internet Service Provider (or ISP). The local server can be thought of as a powerful computer that accepts calls from its customers and transmits information between those customers over the Internet. The server has a more direct connection to the Internet than a normal phone line (i.e., it has a dedicated connection — a connection that serves no other purpose than the transmission of data).

More recently, high-speed modems have become increasingly common. High- speed connections are normally available through cable companies (such as Shaw Cable and Rogers Cable) and telephone companies (such as TELUS). Cable companies transmit Internet signals over their normal cable connections, while telephone companies use regular telephone lines employing a special ADSL (Asymmetric Digital Subscriber Line) high-speed modem. High-speed modems often reach speeds comparable to dedicated T1 lines (lines used by most commercial Internet users). Speeds can vary greatly with cable modems since the lines are shared and the speed of access can depend upon the number of users online simultaneously. ADSL lines, because there is a direct connection between you and the server, do not suffer from this problem. However, in my experience with a cable modem, I have seldom noticed any transmission delays at any time of the day. The next stage is already upon us, involving satellite communication of Internet signals.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–6

The current uses of the Internet involve the transmission of:

E-mail; Asynchronous (i.e., out of real time) discussions, like the D2L Discussions area; Synchronous (i.e., in real time) chat, like ICQ, iChat, MSN Chat, and Skype; Web pages; Audio files (including podcasting); Image files; Video files (including YouTube); Interactive gaming applications; E-commerce applications (i.e., online purchasing); Computer video conferencing; Social networks such as Facebook, Twitter, and Linkedin; Blogs (or personal Web logs); Mobile Web pages and apps; and more.

A large part of the Internet involves communications between special interest groups — Newsgroups — where subscribers (or the general public) may read and post information on a wide variety of topics. The sharing of audio files (podcasting), video files (YouTube), personal/public communication (Facebook, Twitter, and Skype) and ideas sharing (blogs — Web logs) have recently become very popular.

It is important to remember that the Internet is constantly evolving and becoming more powerful. It is already possible to transmit live audio and video (streaming audio and video, as it is known) over the Internet as well as engage in computer/video conferencing where one may both see and hear conference participants directly on their computer. Audio/video communication among individuals via webcams is becoming increasingly popular. As we are able to transmit more and more data over conventional telephone lines and cable, and as computers become more powerful the future of the Internet is limitless in terms of quick and easy transmission of information.

In this course we will concentrate on how to design and author Web pages that may be served through an ISP to a wide variety of users. The authoring procedures outlined in this module are equally applicable to the serving of Web pages on a private network — an intranet (notice the lower-case “i” here) — such as those maintained by both large and small business and other organizations for the use of the employees.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–7

2. Who Owns the Internet and Who Pays for It?

Nobody owns the entire Internet, but each segment of it is owned by some company or organization. The individual computer networks which comprise the Internet are usually arms of governments, universities, or corporations. The “backbones” (high-speed data links) which carry the data are owned by telecommunications companies or national governments. In British Columbia the Internet is “owned” by the three major universities (SFU, UVic, and UBC) and BCSC (BC Systems Corporation) formerly an arm of the provincial government but now a private corporation. The physical connections which link the users are leased from TELUS and other hard-wired access providers.

3. What Kind of Material can be Sent over the Internet?

Two kinds — ones and zeros — and nothing else, ever.

Of course, you can do a lot with ones and zeros. You can represent any number with them, and numbers can represent letters (like these) and numbers can even be used to store and reproduce pictures and sounds. Text pages like this appear quickly on your screen because each letter is represented by only a few digits, while graphics load slowly because hundreds or thousands of numbers are needed for even a small picture.

The ones and zeros which are sent over the Internet are interpreted with different methods (called “protocols” or rules) for different purposes. Some of the more popular Internet protocols are the World Wide Web, e-mail (electronic mail), FTP (File Transfer Protocol), Usenet (news groups), and Internet Chat (such as MSN).

4. Internet Addressing

A computer serving information to the Internet is usually referred to as a host. The Internet address of a host may be given in two forms:

hostname or DNS (Domain Naming System) name www.nhl.com IP (Internet Protocol) number 8.20.73.105

The IP number is what will actually be used to route the data between two machines, but the hostname is more informative to the user. In the above example the IP address 8.20.73.105 will be resolved by the server to www.nhl.com, but this process will be transparent to the user. Either form of

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–8

address may be used to access Web data. Try using 8.20.73.105 as your URL in a browser to check this.

C. Some Technical Terms

Like any modern technology, the various functions of the Internet have resulted in the spawning of a wide variety of terms which are used to communicate effectively. While the “jargon” of the Internet is large and sometimes complex, definition of a few basic terms is necessary here so that we may all understand what we are talking about in the following pages. Only the most basic of terms will be listed here; others will be defined as they are used in the text.

1. Browser

A browser (sometimes referred to as user agent or client) is a piece of software that allows the user’s computer to accurately interpret Web pages. You may wonder why text is not simply transmitted over the Internet as a normal word processing document. If you have ever created a text document on a PC and passed the disk to a friend who has a Macintosh you will understand why. Different platforms interpret the 0s and 1s that make up digital communication differently.

Platform: the type of computer you are using — normally a PC platform, a Macintosh platform, or a UNIX platform.

Most Web browsers are multi-platform capable in that they may be used on a variety of computer systems, and the way that text and other elements contained in a Web page are interpreted is essentially the same.

There are a wide variety of browsers currently being used on the Internet and not every browser will display your pages in the same way. This is one reason that we insist on the writing of code that is fully compliant with the latest HTML specification in these courses. If you write compliant code you can be assured that your pages will display “more-or-less” correctly in most browsers. However, there are always exceptions (see Section F-5, below, for more on browsers and their versions).

2. E-mail (Electronic Mail)

E-mail consists of messages, usually consisting of text, which are sent from one person to another via computer. E-mail can also be sent automatically to a large number of addresses and this is called a Mailing List.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–9

3. FAQ (Frequently Asked Questions)

FAQs are documents that list and answer the most common questions on a specific subject. Most technical websites will include a list of FAQs.

4. Freeware

Freeware are computer applications that you may download off the Net and for which you are not expected to pay. This contrasts with Shareware, where you are asked to make a voluntary contribution if you decide to use the product. Always look for the term “open source” when looking for free software. The Internet community provides many high-level open source applications that are freely available for download.

5. FTP (File Transfer Protocol) vs. SFTP

FTP (File Transfer Protocol) is a common method of moving files between two or more Internet sites and you will use this method of transferring files for the rest of your career, so it is important to get the process right in this course. What you are doing with FTP is, essentially, logging onto a remote server with the purpose of uploading (sending) files to or downloading (receiving) files from the remote server.

The bottom line is that using an FTP client is the “cleanest” way of transferring data to a remote host, and this is how you will upload assignments into the Presentations area (using the BCIT WebApps server) in your course interface for other students and your instructors to view. Most FTP sites require that you have a loginID and a password to access the file area. These credentials are normally obtained from your Web host. In these courses, they are automatically created for you when using the BCIT WebApps server which links to the Presentations area on the Course Home Page. The loginID for the WebApps server will be your A00123456 student ID and the password will be the same as that you use to login to the D2L course interface. There is more detail about this later in this unit.

The WebApps server at BCIT will require the use of SFTP (Secure File Transfer Protocol) with the Presentations area. With SFTP, all data are encrypted before being sent as a more secure method of transferring files. You would normally use an SFTP client such as WinSCP (for the PC), Fetch (for the Mac), or FileZilla (cross platform) to transfer files in a secure mode.

See also 10. HTTP (HyperText Transmission Protocol) vs. HTTPS below.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–10

6. Hit

No, this is not a form of Mafia execution, but an indication of how many times information has been served or located on the Web. The user will use the term like this: “I got 43 hits on the search string ‘HTML authoring tools’.” This means that you retrieved 43 URLs after using the designated search string. The term can also be used by Webmasters (those who maintain websites) to indicate how many times their server has been accessed. The Webmasters might say “we got 300,000 hits this month,” meaning that information on their server had been accessed 300,000 times. However, hit statistics for a server can be deceptive. If you access a page that has 4 graphics and a sound file, this sometimes counts as 6 hits (1 for the page, 4 for the graphics, and 1 for the sound file). The popular “Hit Counter” applications that you find on the Net are especially subject to this problem. Besides, who wants to know how many hits you receive other than you (the Webmaster) and your client. What kind of impression do you send to your clients if the hit counter stays at 7 for days? Traffic statistics that you would want to supply to your client are included in your server Log File, a document which is available from many ISPs and details what pages were accessed and how often. You can view a typical server log by accessing https://webapps.bcit.ca/mdia1205/utilities/logfile/.

7. Home Page (or Homepage)

This term has several meanings. The term originally defined the Web page that your browser is set to use when it starts. The more common meaning refers to the main Web page for a business, organization, or person that links to a series of related Web pages. The Home page (you will construct one in this course) should give the user a general idea of what the entire site contains, and link to as many related pages in the site as is necessary. Depending upon the server requirements, your home page (sometimes called the “start” page) must be named index.html and, the start file must be located in your root folder (such as mdia1205 on WebApps for this course). By using this home page convention, if you type the following in your browser: http://www.mysite.com the server will automatically deliver the page http://www.mysite.com/index.html.

Both D2L and the WebApps server use this convention because that is the way things will work for you in the “real world.”

8. Host

When you mount your Web page on a server, that server is called your host.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–11

9. HTML (HyperText Markup Language)

HTML is a coding language that allows authors to indicate to the Web browser how they would like their pages to look on a variety of computers. In this course we will be using HTML5, the latest coding specification.

10. HTTP (HyperText Transmission Protocol) vs HTTPS

You find the term HTTP at the beginning of many Web addresses or URLs (http://). Unfortunately, there is little agreement on what the second “T” stands for. Various dictionaries and glossaries will give you “transport,” “terminal,” and “transfer” — but I prefer “transmission,” as our sub-title shows. This code tells the server and the browser that they are working in a specific protocol (set of rules) so that they both know what “language” they are speaking. The term “Hypertext” is the most significant one here (see below). Be aware that, beginning in September 2018, we will be using the secure form of the HTTP protocol in this course which is coded https://.

With SFTP, all data are encrypted before being sent as a more secure method of transferring files.

See also 5. FTP (File Transfer Protocol) vs. SFTP above.

11. Hypertext

Hypertext is the single most significant concept on the Web and is what distinguishes the use of digital information in this medium from the use of printed information. Hypertext refers to the process whereby you can click your mouse button on a “hot” string of text (or link) and move to another page in the same series, to another series of pages at the same site, or to another site entirely. The term “hypertext” is a little misleading in that not only pieces of text can be linked, but also graphic buttons and other images. In fact, you can create several links on the same image by “mapping” various physical locations on the image and have each “hot” location take you to a different page. An example of the latter would be a map of Canada where you could click on each province and move to a page specific to that province. The latter technique is known as “image mapping.”

12. Internet

We have discussed the Internet (it always is an uppercase “I”) above as a vast collection of inter-connected computers and computer networks.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–12

13. intranet

An intranet (always a lower-case “i”) is a private network inside a company or organization that uses the same kinds of software that you would find on the Internet (i.e., Web browsers, FTP clients, etc.), but that is used only for the transfer of internal information. An internal network must be set up using the same protocols (rules) as the Internet in order to qualify for this name — otherwise it is simply an internal network.

14. Modem (MOdulator/DEModulator)

A modem is a hardware device that you connect to your computer and to a transmission line that allows the computer to “talk” to other computers through the system. Basically, modems do for computers what a telephone does for humans. Low-speed modems use standard telephone lines while high-speed modems are used for cable and ADSL (high-speed telephone) connections.

15. Server

A server is a host computer that contains information that can be transferred over a network, intranet, or the Internet. Normally a single, very powerful computer is designated as a server in an organization and this machine is dedicated to that work. See also “host” above. In this course, you will use the BCIT server WebApps to upload your assignments to the Presentations area so they may be viewed your classmates and your instructors. The technique of using FTP to upload documents to the WebApps server is exactly the same as this works in the “real” world.

16. Shareware

Computer applications that you may download off the Net and for which you are expected to pay a small fee if you use the application. This contrasts with Freeware, where you are not asked to pay any fee at all.

17. URI

URI is an acronym for Uniform Resource Identifier, the generic term for all types of names and addresses that refer to objects on the World Wide Web. A URL is one type of URI.

18. URL

URL is an acronym for Uniform Resource Locator, the global address of documents and other resources on the World Wide Web. The first part of the

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–13

address indicates what protocol to use (http:// or ftp:// for example), and the second part specifies the IP address or the domain name where the resource is located. For example, the two URLs below use two different protocols to access adobe.com. The first specifies an FTP address listing files that can be downloaded from Adobe using the FTP protocol in your browser; the second specifies the Adobe home page that is accessed using the HTTP protocol:

• ftp://ftp.adobe.com

• https://www.adobe.com

The use of “anonymous” FTP sites where you can log in without a user ID and password are fast disappearing on the Net. So don’t be surprised if the first link above does not work by the time you read this.

19. Usenet

Usenet (abbreviation of “User Network”) is a worldwide system of discussion groups or user groups, with comments passed among hundreds of thousands of users. Some of the Usenet discussion groups are private, others may be accessed by subscription, and the largest number (more than 100,000) are public and available to anyone on the Internet. The latter class of Usenet services is normally called Newsgroups and may be accessed via the news facility in your browser. To access a newsgroup you must know its address and precede the address with the term “NEWS:” instead of “HTTP:”.

Google maintains a wide range of user groups at https://groups.google.com but the business of transmitting news articles and other information has been taken over by RSS, which stands for Really Simple Syndication. Today, you will find many sites that allow you to subscribe to their RSS feeds. For example, the site https://www.alistapart.com/ tries to keep you up-to-date with the latest information about Web design. You can learn about how to access their RSS feeds at https://alistapart.com/about/rss where you are directed to how to subscribe to this feed.

20. Validators

A validator is an HTML and CSS syntax checker — much like a spelling checker in your word processor. The issue of validators comes up each term and we cannot overstress the value of using a good validator to check your HTML and CSS code. This tool will save you countless hours of proofreading code and it will usually pick up errors that you might miss in a manual proofread — using a validator and manually fine-tuning your code will usually result in fewer deductions in your assignments. Use the first link under “Validators” in the first column of your Course Home page to access the W3C HTML validator (https://validator.w3.org/nu/) which we will use in

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–14

assessing your pages. Some of our learners use the CSE validator — PC only — (https://www.htmlvalidator.com) you will get a special price when you are enrolled in these courses so check Discussions/Main for an announcement regarding this special offer. For the Macintosh, there is nothing better than the validator attached to the HTML editing tool BBEdit (http://www.barebones.com).

NOTE: See 1205AppendixG-Brackets.pdf section F-2. “Extensions” to see how to add the W3C HTML validator to Brackets as an extension.

21. WWW (World Wide Web)

The World Wide Web (sometimes known as W3) has two meanings. Loosely used it refers to the whole constellation of resources that can be accessed using FTP, HTTP, USENET, and some other tools. A more specific usage refers only to those servers that use hypertext as their basis.

ACTIVITY: For a more complete listing of technical terms, point your browser to the following sites: https://www.matisse.net/files/glossary.html

https://en.wikipedia.org/wiki/Glossary_of_Internet- related_terms

NOTE: Websites have a habit of moving or even disappearing entirely from the Internet. Sometimes doing a Web search will reveal a new location for a popular site.

ACTIVITY: To find out more about the Internet, link to the following site:

A Little History of the World Wide Web: https://www.w3.org/History.html

D. What is HTML?

We gave a short definition of HTML above but now it is necessary to become more specific — because HTML is what we will be talking about for the rest of this course and it is the basis for almost all other courses in this series.

HTML is a special form of another computer “language” called SGML (Standardized General Markup Language). If you use a computer word processor you use SGML all the time, although you would not know it as its rules are carefully hidden behind the menus you access and the buttons you press with your word processor — its

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–15

interface, sometimes known as a GUI — Graphical User Interface (for your amazement, it is pronounced “gooey”). SGML is also used to describe many other software applications.

The HTML “language” was developed by Tim Berners-Lee at CERN (The European Particle Physics Laboratory in Switzerland) as a vehicle for sharing scientific information around the world. In 1990 Berners-Lee and his colleagues developed the first Web browser and by 1992, when the Web became, essentially, public property, the first commercial Web browser — Mosaic — emerged. The Mosaic browser has now been completely replaced by Google Chrome (55.2% market share), Safari (13.5% market share), Mozilla Firefox (5.4% market share), and Internet Explorer and Edge combined (6.1% market share — Edge is the very latest of the Microsoft browsers). The statistics above were taken from https://www.w3counter.com/globalstats.php and the data changes daily — so link to this site for the latest information.

NOTE: The Safari statistics may seem to be artificially high. However, Safari is the browser of choice for mobile devices which tends to skew these statistics.

There are also a few minor browsers, such as Opera, iCab, and others, which we will not consider here. To keep up-to-date on browser statistics, link to the following.

• https://www.w3counter.com/globalstats.php (these stats are obtained globally, so are quite accurate).

• https://www.w3schools.com/browsers/default.asp (bear in mind that Web designers access this site regularly, so the statistics may be skewed).

As implied above, HTML was developed specifically for the World Wide Web and has many unique functions specific to digital information transfer in the Internet environment. Let’s dissect the term “Hypertext Markup Language” first.

We have already talked about hypertext, and it is this function that makes HTML stand out as unique in the information technology sector. So, hypertext, as we stated before, stands for the ability of this “language” to transfer you, via hyperlinks, from one document to another document with related information. Compare this with a hard-print book where you have to consult an index, or footnote, or a table of contents to find related information. But don’t dispense with books just yet. It is more difficult, but not impossible in this era of laptops, to take a computer to the beach

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–16

rather than a good book. Mind you, the Kindle, the Apple iPad, and other e-book readers could change all of this.

So that takes care of hypertext — what about the rest of this term?

Markup — this word always confuses everyone (or nearly everyone). While you might think that this is some high-tech jargon created in the last few decades, the term is really hundreds of years old. For centuries, editors have taken galley proofs of print documents and written instructions to the typesetters, compositors, and design artists in the margins of the galley (marginalia) with instructions regarding what the finished product was to look like — the editor was doing a “markup” of the document to be printed. In the same way HTML tells the browser what things are to look like at the receiving end.

Language — Don’t let this word frighten you. We are not talking here about Pascal, or Fortran, or C++ — we are talking about a very low-level (but quite powerful) language that is written in plain English (for the most part).

In your research you will see mention of XHTML (the HTML specification before HTML5) which adds one letter near the beginning of the acronym — X. The X stands for “eXtensible,” (which means the language can be extended to include new elements. XHTML really never did “catch on” because of its very strict syntax, but it will not entirely disappear for years until the new HTML5 specification is fully implemented. There is also an XHTML5 specification sitting out there, but we will start in this course with the more straightforward “standard” — HTML5.

One more thing about HTML, and perhaps the most important of all, is that it has been designed to be platform and browser independent. This means that you can write HTML code knowing that your pages will look essentially the same no matter what platform (PC, Macintosh, etc.) or what browser (Internet Explorer, Firefox, Opera, Safari, Chrome, etc.) you are using to view it. HTML and the browsers are, however, inextricably linked. It is the browser that really determines how the finished product will look. The browser race currently being run by Microsoft (Internet Explorer) and Google, however, means that the rules of the HTML game are constantly changing. In this course, however, we will not be dealing with the more advanced functions of HTML which are sometimes displayed on the two major browsers in radically different ways. We will leave that for much later.

Sometimes you will see notices on Web pages such as “This document is best viewed with Google Chrome” or “This document is best viewed with Internet Explorer.” This is considered to be a design “cop-out” and is a good way to tell your viewers that you don’t really know how to make your document cross-browser compatible — and that you are not a Web design professional.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–17

TIP: If you write clean code and follow the general rule

KISS (Keep It Simple, Student)

you will not run into these problems.

While the three major browsers (there are many other minor browsers around) attempt to push the envelope of the HTML specification, the World Wide Web Consortium (or W3C — see https://www.w3.org) based at the Massachusetts Institute of Technology (MIT), assumes the role of arbitrator in this race and periodically issues coding standards that are intended to apply across all hardware and software. In December 1999, Version 4.01 of the HTML specification was issued and it was thought that this would the last HTML specification to be written. This was followed by the XHTML 1.0 specification, which became the standard in 2000.

Many designers appear to have been disappointed with the W3C linking HTML so closely to XML (EXtensible Markup Language) since XML is not at all well supported by the browsers. It appears that XML is taking a direction that the W3C did not see coming, and is currently being used extensively for software interfaces, such as Microsoft Office — notice the .docx extension in Microsoft Word that has recently appeared — that “x” stands for XML coding in the software.

Development of the HTML5 specification, which we will use in this course, was begun in 2010 and, by the time you read this, this will be the official “latest” specification. Browser catch-up is almost complete with, I think, only the new

ACTIVITY: Link to https://www.w3.org/ for more information on the latest HTML and XHTML specifications and from there link to a copy of the actual specification if you wish to read it.

E. How HTML Works

NOTE: As suggested by one of our learners, beginning with this section we will color all HTML code in dark green and place it in a font so that it stands out from the text. courier

HTML tells the browsers how you want them to interpret your data. Like any language, some of the syntax is very simple while other commands are more

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–18

complex. Like good educators, we will start with the simple and move to the more complex.

HTML commands are called tags. Each tag tells the browser to do something specific with your text (or your images, or your sounds, since we are working in multimedia here).

Your browser is able to distinguish commands or tags from normal text through the use of a pair of identification symbols or control characters:

and < >

We have made these particularly large so they stand out on this page. These symbols are commonly referred to as the “less than” and “greater than” symbols in mathematical operations although you will sometimes hear them referred to as angle brackets or bent brackets, but these latter names are really not correct.

Specific HTML commands are placed between the < and > symbols. Paired commands (duplex or non-empty tags), such as the bold need to be turned on and then turned off after the text to which they apply is completed. The slash (forward slash) is the symbol for turning a command off:

bold text here

Some tags are empty elements (i.e., they have no content other than the tag) and are known as singletons. One such tag is the break element
, which simple inserts a line break.

Now you have the basic syntax and we can begin to deal with the commands themselves. There are hundreds of commands, but we will take this at a very slowly and at an easy pace so that you can savor each piece of code (like a good wine).

F. Tools to use in Writing your Web Pages

Your first task in preparing your assignments for this course is to select the best HTML editor with which to prepare your code. This section should help you to make this decision. Here are some guidelines to help you choose what software to employ — or to not employ.

• One of the reasons for the success of BCIT courses, is that we constantly seek advice from the industry regarding the structure and content of our courses. Based upon the views of our industry partners, we recommended that you not elect to use a WYSIWYG (What You See Is What You Get) editor such as

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–19

Nvu or KompoZer or even Dreamweaver in its “standard” mode). This acronym is sometimes translated as “What You See Is NOT What You Get”). I would avoid WYSIWYG editors.

• You should not consider using full-featured text editing programs (such as Microsoft Word) as these applications introduce text-formatting codes that are not recognized by the browsers. In addition, you should never use options in such editors as Save AsWeb Page as these files introduce non-compliant code which will not pass validation as a legal Web page.

• In many resources that deal with beginning Web design you will see reference to using the simple text editors NotePad and WordPad, which are built into the PC operating systems, or the applications TextEdit or SimpleEdit, which are built into the Macintosh operating systems, to write your code. However, none of these applications are designed specifically to author HTML files and require considerable configuration and care in how the files are saved to prevent errors.

• There are almost a dozen text editors that are fully-configured to write code — including HTML and CSS code. The remainder of this section will deal with this class of editors. While we suggest that you use an HTML editor that you feel comfortable with, we recommend that you start with the Brackets editor which why we have placed first in the following list.

The following editors have been recommended by your instructors and previous learners. Bear in mind that we attempt to consider first text editors that are cross platform compatible (i.e., they were will work with both Mac and PC systems).

• Brackets (both platforms) — available free from http://brackets.io/. This software is fairly new but its development is supported by Adobe Systems and many other high-end partners which gives it a good reputation for reliability. We assume you are using this editor in this course.

• Atom (both platforms) — available free from https://atom.io. Atom is a text editor that’s modern and approachable, yet fully customizable.

• Sublime (both platforms) — available from https://www.sublimetext.com. Sublime Text is a sophisticated text editor for code, markup, and prose. You’ll love the slick user interface, extraordinary features, and amazing performance.

• Komodo Edit (both platforms) — available free from https://www.activestate.com/komodo-edit. We have recommended this editor for this course for several terms. It is an excellent editor but its increasing complexity led us to replace it as our current recommended software.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–20

• Notepad++ (PC only) — free from https://notepad-plus-plus.org/. This is an advanced version of the Notepad software supplied as part of the Windows software package.

• CSS Validator (formerly CSE Validator — PC only) — available from https://www.htmlvalidator.com/. While not free, see the discussion board to see how to obtain a special discount for this software — US$39. While this software is, essentially, an excellent HTML validator, it includes a very comprehensive built-in HTML text editor with assistance tools as well.

• BBEdit (Macintosh only) — available from http://www.barebones.com/products/bbedit/. While it is not free (US$49 Educational Price) we highly recommend this HTML text editor. Your instructors use it constantly and it comes with an outstanding built-in validator. You can download BBEdit 11 as a demo (30 days) at http://www.barebones.com/products/bbedit/demo.html and you will find individual product pricing (US$49) at http://www.barebones.com/store/.

It does not matter what HTML editing software you choose to use for this course (so long as it is not WYSIWYG) and if you don’t “relate” to Brackets, use what is best for you. However, Brackets seems to have everything you will need in this course and it is relatively easy to use. There is a more-or-less complete list of other text- based HTML editors at https://en.wikipedia.org/wiki/Comparison_of_text_editors. You will find a list of other free HTML text editors for the PC at https://www.lifewire.com/best-free-html-editors-for-windows-3471313 and for the Macintosh at https://www.lifewire.com/best-free-html-editors-for-mac-3469019.

NOTE 1: We suggest you start with the recommended editor — Brackets — and then, if you are dissatisfied, explore some of the others. We don’t mind what text editor you use here as long as you are happy with it. If you find a real “winner,” please post this to discussions.

In the next section we will give you a basic introduction to Brackets as it is with this editor that you will likely wish to start. Meanwhile, here are some notes about how Brackets began to be our code editor of choice — and where we might go from there.

Adobe Systems introduced their code editor Brackets in 2014 and its development was placed in a team of some of Adobe’s best engineers. Despite excellent reviews, Adobe decided on September 1, 2001 to end support for Brackets but they did allow that the development team be allowed to continue to support the software via GitHub.

GitHub is a free and open-source software licensed under the MIT License, and is currently maintained on GitHub by Adobe and other open-source developers.

Here are some useful links to get you started —

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–21

http://brackets.io/ (the main source for information about Brackets) https://github.com/brackets-cont/brackets/releases (the open source location)

It can be a little tricky to download the Brackets software so we have loaded them into and you can access the software using the links below.

Brackets.Release.1.14.2.msi.zip — for the PC https://webapps.bcit.ca/MDIA1205/Brackets.Release.1.14.2.msi.zip

Brackets.Release.1.14.2.dmg.zip— for the Mac https://webapps.bcit.ca/MDIA1205/Brackets.Release.1.14.2.dmg.zip

Once you have the software running, all of the remaining notes here should work as intended.

1. Using Brackets

In order not to clutter these pages with too many “how to” instructions, we have given some specific instructions for using Brackets in “Appendix G: Getting Started with Brackets” which you will find in the file 1205AppendixG- Brackets.pdf which you can link to from Column 1 in the Appendices section on your Course Home page.

Start by downloading the appropriate version of Brackets for your platform from http://brackets.io/.

NOTE 1: Documentation for Brackets may be found at “How to use Brackets” (2017) at https://github.com/adobe/brackets/wiki/How-to-Use-Brackets. Additional documentation may be found using the Help menu.

VIDEOS: If you prefer using videos rather than text to introduce you to new software, try starting with the following — “Adobe Brackets: The Basics Tutorial” by Emily Abel — 2016 (https://www.youtube.com/watch?v=8O7hLUqUK4k).

“Quick Coding with Brackets Tutorials” by Lisa Catalano — 2015 (https://css-snippets.com/brackets-course/) — short course of 25 lessons.

Next launching Brackets by double-clicking on the program with an icon that looks like this —

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–22

Once you have the application running, go to the document “Appendix G: Getting Started with Brackets” (1205AppendixG-Brackets.pdf) which contains information on the following topics, which have been ordered to give you maximum benefit for using Brackets in this course.

A. Installing Brackets (p. 2) B. Let’s Get Started (p. 3) C. Getting Started with Brackets (p. 6) D. Writing your First Page (p. 11) 1. Quick Edit (p. 14) 2. Quick DOCS (p. 15) 3. The Color Picker (p. 16) 4. Live Preview (p. 17) E. Creating your First Page with CSS in Brackets (p. 19) 1.Using Split View (p. 24) F. Using Extensions and Changing Themes (p. 25) 1. Themes (p. 26) 2. Extensions — HTML Validator Extension (p. 26) G. Using Keyboard Shortcuts (p. 27) H. In Conclusion (p. 28)

2. Creating an HTML File

We will begin applying the features of Brackets by creating a simple HTML file. Remember to consult Appendix G “Getting Started with Brackets” for specifics on how to use the following tools.

Start by creating a new file. This can be done by selecting FileNew, or by using the keyboard shortcut [Ctrl] + [N] (PC) or [Command ] + [N] (Mac). You should now be in a new tab with nothing in the work area whatsoever (except for the line number for the first line).

Next, save this empty file to your MDIA1205Working folder with the name hello.html. Now Brackets will know you are creating an HTML file and will adjust its built-in tools appropriately.

The PC Save as... dialogue box works a lot like Windows Explorer (the screen capture is from Windows 10 and has been truncated horizontally).

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–23

The Macintosh dialogue box is somewhat different (ignore the Tabs: section and use the control to browse for the target file directory).

Press the Save button (PC) or (Mac) to save the file.

NOTE 1: For more information about creating the MDIA1205Working folder, see Section G-1 “Setting up Directories and Organizing your Files” in this document (Unit1– 25 in the PDF) or Section C “Writing Your First Page” in the document 1205AppendixG-Brackets.pdf (p. 10).

NOTE 2: The tool “autocomplete” is invoked at this point. This means that the software will attempt to complete code lines with a closing tag (if one is required) once a code line is started. Autocomplete is a feature that is easier to work with than if it were disabled. There is more on this feature below.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–24

Make sure you have saved your file as hello.html in your MDIA1205Working folder and then use the following 5 steps to insert the following HTML code into the work area. Indents are normally automatic but sometimes you may have to insert these (as well as linefeeds) manually.

NOTE 1: Notice the color coding that Brackets creates. This will help you to make sure that each code line is correctly written.

The color scheme here is the default for Brackets. If you do not like this color scheme you can download a different one (see Section E-1”Themes” in the document 1205AppendixG- Brackets.pdf, p. 10).

NOTE 2: If you need to view a finished copy of this file to work with, download the practice file hello.html from https://webapps.bcit.ca/MDIA1205/Brackets/hello.zip.

Use the following steps:

1. Type in the first line

This line indicates to the browsers that the document type of this file is HTML — specifically HTML5. It will be displayed in black and no autocomplete is expected because this tag does not require a closing tag.

Now click on Enter/Return (use [Enter] on the PC or [Return] on the Mac). This will take you to line 2.

2. Begin the second line by inserting the text to indicate the language of the page is English. As you type, the

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–25

autocomplete function will give you hints in a dropdown menu. For example, the following dropdown is presented once you reach the point

Notice where the cursor (in red) is positioned here, ready for input. The red arrow indicates the value to choose here.

As you complete the code line, you will notice that autocomplete inserts the closing tag which is require here.

However, there is one issue here that you have to deal with manually. You may not be aware of this yet, but the tag is not closed until the bottom of the page. We therefore suggest, at this point, that you add 2–3 linefeeds before the closing tag and then you can close up this extra space later as you finish the page.

Notice that the cursor in the above screenshot is sitting in line 3 just under the “m” of “html.” Go back to that location to continue adding code.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–26

3. Begin line 3. Notice also that line 3 automatically includes an indent. This is exactly what you want. Now type in the next line of code —

The autocomplete feature will be fully in operation here.

4. The last operation you have here is to delete the extra lines between lines 3 and 6, so that there are no empty code lines before the closing tag.

5. Click Save and your code should now appear as was illustrated in the first screenshot for this section.

NOTE 1: If you attempt to use an HTML validator, such as that we recommend at https://validator.w3.org/nu/, you will probably receive warnings such as the following:

Optional open tag for element not specified. Optional open tag for element not specified. Close tag for element omitted but document type doesn't permit it.

In the example “hello.html” we have purposely made the code as simple as possible by excluding the optional and elements in the code. While this file will display correctly in your browsers, “Best Practices” tell us that the and elements should normally be included in HTML pages.

NOTE 2: See the file 1205AppendixG-Brackets.pdf on pages 25–27 to see how the Brackets editor may be automated to check all HTML pages at https://validator.w3.org/nu/.

Now open your hello.html file in a browser to see how well you have done (the screenshot below is from Google Chrome on the PC).

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–27

NOTE: Brackets has a useful feature called “Live Preview” whereby you can mount your page directly in a browser without leaving the Brackets interface. To use this feature go to FileLive Preview or click the “lightning bolt” icon to the right of the Brackets workspace. This tool works only with Google Chrome at this point, but other browsers will likely be added soon. For more detail, see 1205AppendixG- Brackets.pdf section C-4 “Live Preview” (page 15).

G. Getting Ready to Write Your First Page

In this section we will help you set up your computer to make the writing and viewing of HTML pages easy and we will show you how to configure your tools (workspace, browsers, etc.) in order to get maximum benefit from them. You have already set up your HTML authoring tool.

You may want to write each of the following sample HTML documents along with me. Remember that some experts agree that the only way to have complete control over the HTML product and to fully understand the functions of HTML is to author the HTML code manually.

WARNING: Do not use your normal word processor for these exercises as it generates a lot of extraneous formatting code that Web browsers don’t like at all. Never, ever use the Save for the Web feature of word processors such as Microsoft Word, as it will generate bloated code that does not normally pass a validation. And, never copy the code snippets from the PDF files, always use the example files as your code source.

1. Setting up Directories and Organizing your Files

You should set up all of your Web pages and related files in one location (or two, as we describe below) on your computer, so that you can ensure that they’re all working together properly and that the process of uploading the website to the server goes more quickly and easily.

Here are some general guidelines:

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–28

a. Create a special folder for this course in your Documents folder on your hard drive. A good name for this folder would be MDIA1205. Placing a shortcut (PC) or alias (Mac) to this folder on your desktop will make it easy to locate.

The following illustration shows how this folder might look.

Notice that we have included only one file in the root (main) directory for 1205 — index.html — and that we have also included a sub-directory — images — in the root directory, although we will not be using sub- directories until we introduce images in Unit 4. If you were to expand that sub-directory, you would find that it is blank (at this time).

b. Now we are going to suggest that you create a second directory — titled MDIA1205Working, or something similar, sitting next to but not inside your MDIA1205 folder. In this second folder you will keep your working or draft pages. You may not realize this, but professional designers will create several “drafts” of pages before they determine which page will be published. Your new folder (or directory) could look something like the following.

c. Place all of your working (draft) pages in the MDIA1205Working directory.

d. When you are satisfied with the page or pages that will constitute your finished page/site, rename (if necessary) and copy that page (or pages) and only that page (or pages) to the MDIA1205 directory.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–29

A Whole Lot of Warnings

WARNING 1: Notice that we are using a single text string for the suggested directory (folder) names above. While your computer may accept directory names and even filenames with spaces or other illegal characters, many servers will not accept long names or illegal characters. So, you are best to get into the habit of using single text strings for now, or using a character string such as “MDIA_1205_Working” — the underscore here is an acceptable character for both directory names and filenames.

WARNING 2: Remember that start files (the first file to be displayed from a URL) must be named index.html. After a file has been transferred from the working directory to the main directory, make quite sure this convention is observed for the file you will be uploading to D2L or Presentations (the WebApps server).

WARNING 3: The WebApps server (where you will be uploading your assignments for the Presentation area) will only accept index.html as the start page for your assignment.

WARNING 4: Including stale versions of pages in assignment submissions has caused more than one learner to receive unwarranted deductions. You can avoid this problem by keeping your files completely organized on your hard drive and by making sure you submit only the latest version(s) of each file.

WARNING 5: While most modern servers do not any longer subscribe to the old 8+3 DOS file naming convention (i.e., a maximum of 8 characters for the filename and a maximum of 3 characters for the extension) this is still a good habit to maintain concise naming of your files. Regarding illegal characters, most characters on the upper row of your keyboard with the [Shift] key depressed — ! @ # $ % ^ & * and ( ) as well as the HTML control characters < and > — are considered illegal for filenames and directory (folder) names so these symbols must not be used.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–30

2. Showing File Extensions on the PC

NOTE: While the Macintosh platform does not use extensions for files at all, file extensions are necessary for any file you wish to upload to a Web server. When you add an extension to a Mac file, the complete filename and extension are shown by default on the Macintosh. This is not true for modern PC systems where file extensions are often hidden.

The latest PC operating systems do not show file extensions by default. Because of this we often get file names like index.html.html or myfiles.zip.zip because learners are not aware that they have file extensions hidden, so they add a section extension. For this course you will want to see the complete filename with extension for the files you are creating, so you should do the following to assure that you are seeing the complete filenames for all of your files (NOTE: This process may vary from system to system):

Use this procedure for Windows Vista and Windows 7:

a. First select the folder(s) to which you want these changes to apply — the folders MDIA1205 and MDIA1205Working are the likely candidates.

b. In Standard View, open Folder Options by clicking the Start button

, then select Control Panel, then go to Appearance and Personalization, and then select Folder Options.

In Classic View, select Folder Options.

c. Click the View tab.

d. Under Advanced settings deselect the “Hide extensions for known file types,” check box.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–31

e. Click OK.

Use this procedure for Windows 8:

a. Open Windows Explorer.

b. First select the folder(s) to which you want these changes to apply — the folders MDIA1205 and MDIA1205Working are the likely candidates.

c. In Windows Explorer select View.

d. Click the Options button and select “Change folder and search options.”

e. Scroll down to “Hide extensions for known file types.”

f. Make sure this item is deselected and click OK.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–32

Use this procedure for Windows 10:

a. Open File Explorer.

b. First select the folder(s) to which you want these changes to apply — the folders MDIA1205 and MDIA1205Working are the likely candidates.

c. In the File Explorer (illustrated below) follow the notes.

 Select View

 Open the Options menu.

 Select “Change folder and search options.”

The Folder Options window will open. Select View.

d. Make sure that “Hide extensions for known file types” is not selected.

e. Click OK.

If these procedures do not work for you, use the Help feature for your operating system. You can always see the complete filename and extension on the Macintosh.

3. Setting up Your Browsers

The remaining tools you need to get started are a suite of browsers with which to check your work. I say a “suite” of browsers because pages do not always display as we would like them to in all of the major browsers and even in versions of those browsers. So, we are asking you to check your pages in at least the following browsers before assuming that they are displaying as you

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–33

wish. The following statistics were gathered in December, 2018 from https://www.w3counter.com/globalstats.php.

• Firefox (both platforms): Download the latest version of Mozilla FireFox from https://www.mozilla.org/en-CA/firefox/new/. Firefox used to be our browser of choice for his program but it currently has only about 5% market share. Since a recent major update to Firefox 57 (known as Quantum) in November 2017, support for a number of very useful addons or extensions was discontinued and this may impact the Firefox usage trend going forward.

• Google Chrome (both platforms): With a current market share of about 60% this is a browser “on the move” and is highly recommended. It can be downloaded from https://www.google.com/chrome/. This browser also has many of the Web development tools that has made Firefox so popular with website designers.

• Safari (Mac Only): While having only about 13% of the browser market, you might also wish to start using Apple Safari, which is quickly emerging as a browser to watch, especially since it is the browser of choice for the mobile market (smartphones and tablets). Get the Mac version from https://support.apple.com/safari . The PC version seem to be no longer supported (see the Note below).

NOTE: It appears that Apple ceased support for the Safari browser on the PC in 2012 (see https://appleinsider.com/articles/12/07/25/apple_kills_wind ows_pc_support_in_safari_60). Therefore, we can no longer recommend this browser for the PC in this course.

We have left the Windows browsers for last in this list, as the Windows 10 operating system allows only 2 browsers — Edge (their latest browser) and Internet Explorer 11.

• Edge (PC Only). When you download Windows 10 (which is currently available free-of-charge for users of Windows 7 and 8), Edge is loaded as the default browser. Because Windows 10 is relatively new, we have few statistics on its use, but this is sure to be considerable, since many users of Windows software are unaware that there are other browsers available.

• Internet Explorer 11 (PC Only): Internet Explorer 11 will not have been automatically downloaded with your Windows 10 download, but it is easy to locate. First have a look at https://www.windowscentral.com/how-find- internet-explorer-windows-10-if-you-really-need-it. However, this may not be worth the effort, since this browser is quickly disappearing.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–34

Note that we expect that you will check your work in as many of the above browsers as you have available.

NOTE: Understanding Browser Market Share. It is somewhat difficult to get accurate and up-to-date statistics on the market share held by modern browsers. We have taken our statistics above from https://www.w3counter.com/globalstats.php, which is updated monthly with fairly reliable statistics on market share as well as operating systems and screen resolutions in common use. However, statistics will vary depending upon where you collect them. If you go to https://www.w3schools.com/browsers/default.asp, for example, you will see quite a different set of statistics with IE near the bottom of the pack and Google Chrome at the top as their stats are more reflective of what Web developers consider their browser of choice.

4. The Browsers’ Disk and Memory Cache

A cache (called History in Internet Explorer, Google Chrome, and Safari) is where your browser stores information about recent websites you have visited. When you return to the same URL, the computer first reads the page data from its memory, if it can, before going out for a fresh look at the site. While this considerably speeds up the loading of pages from previously visited sites while browsing, it can obviously cause some problems for Web authors who must constantly view the most recent versions of pages, both from their hard drive and from external servers like WebApps (the server where you will upload your assignments for this course). Recent changes you have made to the pages won’t show up if your browser is looking at an old (stale) file in its cache.

The easiest way to prevent you from viewing stale pages is to set your browser settings to clear the cache on every page access, or as frequently as possible.

TIP 1: Each term we get several questions from learners regarding why current changes they have made to their pages are not being displayed properly in the in the Presentations area (where you display your work for instructors and other students to view). The problem here is, invariably, that older pages are being cached and displayed and recent changes are being ignored — always clear your browser cache before testing your pages. TIP 2: Disabling the cache/history process will slow down your Web surfing considerably, so consider using the manual approach below.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–35

a. Clearing the cache manually

You can manually force the browser to link to a fresh page from the server by holding down the [Shift] key and right clicking as you press Reload or Reload Page in Google Chrome and Safari — for Firefox use and for Edge and Internet Explorer use Ctrl/F5.

NOTE: The rules for clearing the browser cache seem to vary from version to version, so please see sites such as https://kb.iu.edu/d/ahic (2019) to make sure you are up-to- date with this process.

b. The History Menu

Use the History menu in Firefox, Google Chrome, and Safari to return you to recently viewed pages. The History menu lists pages which are being held in the memory cache. This cache is purged frequently to free up memory for new pages, so not all recently visited pages will be listed here.

In Microsoft Edge select History from the menu and in Internet Explorer use the Favorites Center (the button in later versions of IE) and click on the History tab (normally the default) to see a list of recently visited pages (among other things).

5. Start Using an HTML Validator

A validator is an HTML syntax checker — much like a spelling checker in your word processor. The issue of HTML validators comes up each term and we cannot overstress the value of using a good validator as you write HTML code. This tool will save you countless hours of proofreading code and it will usually pick up errors that you might miss in a manual proofread. We will be using the online W3C validator at https://validator.w3.org/nu/ when we assess your assignments (you will find a link in the first column of your Course Home

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–36

page). Some of our learners use the CSE validator (https://www. htmlvalidator.com) — PC only. You will get a special price because you are enrolled in these courses. Check the Discussion Board for the announcement. For the Macintosh, nothing is better than the validator attached to the HTML editor BBedit (http://www.barebones.com).

NOTE: See 1205AppendixG-Brackets.pdf section F-3. “Extensions” to see how to add the W3C HTML validator to Brackets as an extension.

Now that the stage has been set and the actors are in place, let the play begin.

H. Basic HTML Tags

TIP: Please write each of the following sample HTML documents along with us using your HTML text editor of choice. Some experts agree that the only way to have complete control over the

HTML product and to fully understand the functions of HTML is to author the code manually, without the aid of an editor, especially a WYSIWYG (What You See Is What You Get) editor.

NOTE: You should be aware that the older HTML 4.01 specification requires that HTML tags be in UPPER CASE, and that tag attributes and values be in lower case. However, the new HTML5 specification is more flexible with respect to the use of case. Having stated that, “Best Practices” suggests that, in HTML5, all tags, attributes, and values be in lowercase as this will make reading and editing your code much easier. There are a few exceptions here (such as the !DOCTYPE), so read carefully below.

In Unit 2, we will show you how to use some of the coding assistance tools for Adobe Brackets.

Here is an overview of the HTML tags we will use for our first page with a description for each.

1. The DOCTYPE Declaration

The DOCTYPE declaration in HTML5 is not case sensitive. Therefore, all of the following constructions are (theoretically) valid:

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–37

However, Best Practices suggest that the format (with DOCTYPE in upper case and html in lower case) is always the best syntax to use here so that this directive stands out on your page. That syntax also matches earlier specifications.

The DOCTYPE declaration (it is not really a tag) is placed on the first line of a document with no blank or null line or comments preceding it. Some authorities state that this declaration is redundant, but W3C specifically requires it and if you are using any of the modern validators, they will need this declaration to know what syntax checking rules to use and the browser will need this information for the same reasons. Without the DOCTYPE, the browsers will not know what syntax rules to use in displaying your page. Without the DOCTYPE, the display results can be unpredictable.

In this course, the HTML5 DOCTYPE to be used in the coding of your assignments is the following:

2. The Tag

The first command that you must use (after the DOCTYPE) is . The tag tells the browser that this is the beginning of an HTML document. The tag works in pairs — it must be turned on at the beginning of the document and then off at the end of the document with . Tags that are used in pairs (on and off) are called duplex (or non-empty) tags.

Here is an example:

: : : : : : : : : : : : : : : : : :

The dotted lines represent intervening text and other tags and commands.

Notice that both commands are enclosed by the < and > symbols and that the last contains the off toggle /.

The beginning of your HTML document should now look something like this:

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–38

: : : : : : : : : : : : : : : : : :

This is similar to the previous example, except for the addition of the DOCTYPE and the fact that the language of the Web page has been specified — lang="en". This is an important element to add at this stage.

3. The Tag

The second tag that is always present is the element which provides general information (metadata) about the document. The tag should not be confused with the heading tags (h1 through h6) within the section which will be introduced later in this unit. For simple Web pages, only one element in this section is displayed in the browser — to satisfy this rule.

NOTE: Remember that the text between the tags does not appear in the body of the document, so you may have to repeat some title-type information within the body if you want it to display on the page. You could use one of the heading (h1 through h6) tags for this purpose.

At this point in time, try to make your MORE

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–40

: : : : : : : : : : : : : : : : : :

Notice that duplex (non-empty) tags are toggled off in reverse order from the order in which they were introduced (i.e., they are properly “nested”).

Remember — first in — last out.

6. Comments

The comment tag is used to insert a comment in the source code. This is a good way to locate specific sections of code. Comments begin with the tag . Comments will not display in the browsers and comments should not be placed before the DOCTYPE.

: : : : : : : : : : : : : : : : : :

7. The Paragraph Tag

…

We need one more element in order to create our first Web page — the tag

(for paragraph). The function of this tag is self-explanatory and, while toggling this tag off with

is optional in HTML5, for “Best Practices” we recommend that this tag always be toggled off. However, neglecting to toggle this tag off will not generate syntax errors for your assignments.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–41

NOTE: The

tag introduces a null (blank) line between paragraphs, as is standard Web writing practice.

I. Our First Web Page

Now we are ready to build our very first Web page. Re-write the following example using your selected text-based Web authoring tool and save it in your MDIA1205Working folder as mypage.html — or use your own name here, such as bobpage.html. You may put any text you like between each of the two

...

tag sets and you can ignore the indents if you like (although they do make code easier to read).

My First Web Page

Your page should look something like the following in the browser:

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–42

NOTE: The text between the tags is only viewable in the title bar at the top of the browser window. It does not display on the page itself. Any text you wish to be viewable on your page must be placed between the opening and closing tags.

Also note the yellow background in the display above is for example purposes only. Your test page, if coded as described above will appear in the default browser colors, typically black text with a white background.

When you have finished saving the file, if you are on a Mac you will be familiar with “grabbing and dropping files” (drag and drop) but this can also be done with some applications on the PC as well, just grab (click/hold) the file icon with your mouse pointer and drag and drop it over your browser’s icon. It should be displayed like any Web page from a server (this may not work with some versions of Internet Explorer on the PC).

Another way to view HTML documents saved as a local file is to open it in a browser (you do not have to be online to do this). In Firefox, Google Chrome, or Safari, go to FileOpen File… and navigate to the file on your computer. In Internet Explorer go to FileOpen then click the Browse button, locate your file, and then click Open.

Congratulations — you have just created your first Web page. Now it is time to get the creative juices flowing to see what enhancements we can make to this page.

The remainder of this page has been intentionally left blank.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–43

TIP: There are several HTML elements that are common to all HTML5 pages you will create and you would be clever at this point to create a template that includes all of these common elements so you do not have to re-write this coding every time you start a new page. Your template should look something like the following (there is a sample in the zip file at https://webapps.bcit.ca/mdia1205/1205resources/template.zip). This is not a Web page to be viewed, so it should be opened in Brackets or the code editor of your choice.

The comments (), which will not appear in the browser window, indicate the start and end of the head and body sections of your page. Simply insert the required content between the comments to create each new page. The character set and the title have already been included in the head section but do not forget to change the title for each new page you create.

Note: The element will be introduced later.

J. Basic Text Tags

We will begin “dressing up” our page first using only text tags — tags that affect the size, style, and placement of text elements. Other elements such as graphics, sound, and tables we will work with later. When you do your first assignment you may

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–44

choose from the following elements, but don’t try to use them all — remember the KISS principle.

1. Headings ...

NOTE: Remember that the text between the tags does not appear in the body of the document, so you may have to repeat some title-type information within the body if you want it to display on the page. You could use one of the heading (h1 through h6) tags for this purpose.

There are six levels of headings built into the HTML specification — all are duplex (non-empty) tags so must be toggled off. In the following example, the size of the printed text approximates that which the browsers will reproduce. All headings are automatically set in bold by the browser so do not combine them with the or tags. All of the heading tags also introduce a null (blank) line after the heading by default so do not place them within a

tag to get vertical separation.

Level One Heading

Level Two Heading

Level Three Heading

Level Four Heading

Level Five Heading

Level Six Heading

The remainder of this page has been intentionally left blank.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–45

TIP: The heading tags already contain a bold style so adding a bold tag ... is redundant here. Also, as stated above, heading tags have a built-in null (blank) line after them,

so placing them within a paragraph

...

is also redundant (and illegal). In addition, it is not necessary to include the line break (
) here for the same reason.

Also, try to use your heading tags in sequential order and not skip any levels, such as h1, h2, h3 to provide a proper structure to your page. Don’t worry about the default heading sizes, you will learn how to alter the default font sizing later in the course.

2. Center

...

WARNING: The

tag has been declared obsolete (i.e., flagged as “old fashioned” coding) in HTML5 in favour of Cascading Style Sheets (CSS). However, until you learn more about CSS, use it until that time but the validators will give you an error message (which we will ignore in Assignment 1 only). All browsers support most if not all of the many obsolete tags.

For more information on centering elements in HTML5, see “Centering Things” at https://www.w3.org/Style/Examples/007/center.en.html.

This tag is a duplex (non-empty) tag and must be toggled off. It causes the intervening text to be centered (note the American spelling in the tag name — center — and not the British/Canadian “centre”). The

tag is often used with the tags to centre headings (n here stands for any number between 1 and 6). A typical coding would look like this:

This level 3 heading is centered

The result would be:

Notice that the tags are toggled off in the reverse order of the way in which they are introduced — first on – last off. To code HTML without using this rule is

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–46

called a “Nesting Error” — the display may not be correct and you will get syntax errors from a validator and subsequent deductions in the course.

If you have several text blocks that require centering you only need turn

on at the beginning of the series and off at the end. It is not necessary to apply to each individual element. Text blocks include paragraphs and headings at this point, but we will introduce others as we progress through the course. Any element that contains text is known as a text block.

When you read HTML manuals you will notice that some tags may “contain” other tags (known as “order of precedence”). To alter the order of what a tag may “contain” can result in incorrect display of information. In this instance the tag

(remember the American spelling) may contain the tag

, but the

tag may not “contain” the tag.

There are rules of precedence that define the order of tags within a document. Not observing these conventions can cause an undesirable display.

For example, to set text in a text block in italics you would use:

italicized text here

but if you wished to center a level-3 heading, you would write:

Level 3 heading is centered

While you can check the rules of precedence (or nesting) by using a reference such as https://www.lifewire.com/nesting-html-tags-3466475, a good general rule to follow is that tags that apply to the internal content of a tag (such as italics for all or part of a text block or paragraph) are contained within that text block while elements that apply to the entire tag (such as centering a heading) are placed outside the text block to which they refer. If you check your code using a validator, nesting errors should be flagged for you and you can then correct them.

3. Break

The
tag inserts a single line break and it is an empty tag, which means that it has no end tag.

deltaMAC Interactive
71 Lekwammen Drive
Victoria, BC
V9A 7M2

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–47

The result would be:

Never use
when you really mean

and never use

when you really mean
. The paragraph tag

...

will separate paragraphs with a null (blank) line — which is correct design; the
tag will not.

4. Horizontal Rule

---

Notice that the horizontal rule is a singleton (or empty) tag and has no closing tag. Unless modified by CSS (see Unit 2) the

---

tag inserts a gray horizontal line 1 pixel high across the width of the browser unless a specific width is indicated.

NOTE: You should get used to the term “pixels” (pixel= Picture Elements) as a measurement of graphic content. The concept of pixels is similar to the dots-per-inch (dpi) measure of printer resolution (sorry for the use of Imperial measure here — it is traditional). Pixels are the colored dots on your computer monitor and on a standard computer monitor there are normally 72 pixels in an inch (96 pixels/inch on PC monitors) — but this will vary with the resolution of your monitor. Each square inch of the standard computer monitor contains 72x72 (5,184) pixels. Your printer might print at a resolution of 300 dpi, or 600 dpi, or even 1,200 dpi. This is one of the reasons why print material contains much more detail and sharpness than what you see on the computer monitor. Pixel is often abbreviated as px.

Here is a horizontal rule with a width of 75% (

---

).

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–48

WARNING: Like the

tag, the attribute and value width="75%" for the

---

tag have been declared obsolete in HTML5 in favour of Cascading Style Sheets (CSS). However, until you learn more about CSS in Unit 2, use this attribute and value until that time, but the validators will give you an error message (which we will ignore in Assignment 1 only). Remember that HTML attribute values are always enclosed in quotes.

Horizontal rules are useful for separating long sections of text, although, from a design perspective, there should be no long sections of text in an HTML document as they will tend to provide a disjointed display. In addition, rules tend to separate instead of integrating content, so they should be used with care.

5. Blockquote

...

The

tag is used to indicate the quotation of a section of text from another source. Here is a link to a good article about the blockquote tag https://www.lifewire.com/what-is-a-blockquote-3468272. The

tag indents a paragraph (approximately ¾ in or 2 cm) from the left and right margins of the browser window, in a similar manner as single- line quotes in print material. This tag is useful for setting off certain paragraphs of text for emphasis. The dots indicate intervening text or other elements. Since

introduces a null (blank) line in the text, it should not be enclosed within a

tag. However, if there are a number of paragraphs within the

, these should all use the

...

syntax. Like

...

,

is a duplex (non-empty) tag and requires the closing tag

.

The following example shows how the

affects text display.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–49

NOTE: To be semantically correct, the

tag should never be used for page formatting purposes, including adding page margins and indenting page text. CSS should be used for all page formatting. However, until you get more proficient with CSS, as with the tag, we will allow the use of the

tag for page formatting for the first assignment only.

K. Basic Text Styles

There are a number of text styles available in HTML, although some tags have, essentially, the same effect as others. All of the text style tags are duplex or non- empty tags and therefore must be toggled on and off.

Almost all text style tags have now been deprecated (i.e., they will eventually disappear). This is because of the emergence of Cascading Styles Sheets (CSS), which are introduced in Unit 2 of this course. All current browsers, however, support most deprecated tags, but this will change over time.

1. Bold ...

This tag sets the text in bold. It has essentially the same effect as Strong Emphasis (...) below.

2. Strong Emphasis ...

This tag has the same effect as bold (...) and sets the text in bold.

NOTE: There are guidelines about when to use and when to use in HTML. Both have the same visual effect in most browsers by displaying the text in bold style. However, the use of the tag simply displays the text with bold styling. The use of will also display the text with bold styling but search engines and screen readers will interpret the text as more important so should be used when this is the case. There are similar guidelines for the relationship between and where the text will appear in italics for both but the use of will mark up your text as more important.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–50

3. Italic ...

This tag sets the text in italics. It has essentially the same effect as Emphasis (...) below.

4. Emphasis ...

This tag sets the text in italics. It has essentially the same visual effect as Italic (...) above.

5. Superscript ^...

This tag raises the intervening characters above the text baseline and reduces the font size by 2 points as in this example: E=MC2. The coding for this example would be.

E=MC²

This tag is useful for the date convention “December the 12th.”

6. Subscript _...

This tag lowers the intervening characters below the baseline and reduces the font size by 2 points as in this example: sig02. The coding for this example would be:

sig₀₂

L. Nesting Style Tags

To get effects like bold italic you can nest the two tags and ; just make sure you toggle both off (tags must be toggled off in reverse order from which they were turned on). Here is the coding for a paragraph containing bold italic text:

bold and italic

and here are a couple of additional examples which may help to clarify the nesting principle.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–51

incorrect

This is the wrong way to emphasize content across paragraphs.

The strong tag starts inside one paragraph but ends in another.

correct

This is the correct way to emphasize content across paragraphs.

The strong tags are properly nested within the paragraphs.

It does not, of course, make sense to nest some of these tags. Nesting ^{and _{, for example, would just confuse the browser.}}

ACTIVITY: Type the following HTML code exactly as you see it. Make sure that all spacing is exactly as it is given here. Save this file as htmlcoding.html. The indents (created by the [Tab] key) and linefeeds are included to make the code more readable. They are not required, but this is a good habit to get into. Open the resulting file in your browser. The image following the code shows what you should see when you open this file in your browser.

The remainder of this page has been intentionally left blank.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–52

HTML Coding

bold

italic

emphasis

strong emphasis

superscript
Example: E=MC²

subscript
Example: sig₀₂

center

NOTE: Notice how the nesting has changed for the

tag (check the position of the

tag). Do you understand why? If not, re-read the section on nesting, above. Notice in the ^{and _{examples how a
tag may be included within a}}

tag to begin a new line within a paragraph.

The remainder of this page has been intentionally left blank.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–53

WARNING: Remember that the

tag has been deprecated (i.e., flagged as “old fashioned” coding) in HTML5 in favour of Cascading Style Sheets (CSS). However, until you learn more about CSS, use it until that time but the validators will give you an error message (which we will ignore in Assignment 1 only). All browsers support most if not all of the many deprecated tags.

For more information on centering elements in HTML5, see “Centering Things” at https://www.w3.org/Style/Examples/007/center.en.html.

Browser Display

NOTE 1: Your page will not have the yellow background. The yellow background is used here simply for example purposes.

NOTE 2: Notice how the nesting for the last item differs from the others in this example. This shows how proper nesting of tags is important. Remember that a tag that applies to a text block (

...

is a text block here) must be located outside that text block. Items that apply to text within a text block (as all of the others are) must be applied inside that text block.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–54

If this is not what you see then check your code carefully for typing errors. More HTML errors are caused by typing errors than for any other reason.

Viewing source documents of HTML data is a wonderful way to learn how to do manual HTML coding. Many Web Weavers (as the authors of Web pages are called) have learned a large part of their craft by analyzing the work of others in this way.

M. Encoding Special Characters

Before you begin Assignment 1, there is one more topic that we must cover briefly, although we will deal with it in more detail later in the course — Special Characters. When we introduce the UTF-8 (Unicode) character set in Unit 2, you will find that you can use almost any characters on your pages and they will be interpreted correctly by the browser — as long as the browser knows it is to use the UTF-8 character set.

This means that you can freely use the typographer’s quotes (sometimes called curly quotes) like “ ” ‘ ’ instead of the standard “up and down” quotes " " ' ', as well as other special characters such as ©, ®, and characters with accents such as é and á without any special coding. However, there are three characters that must be encoded on pages because they are HTML control characters — < and > (when they are not used as control characters but as part of the text), and the ampersand (&). The character entities (as they are called) for these three characters are shown in the table below.

Character Name Entity Decimal Entity < < < > > > & & &

NOTE: Few modern validators will flag the ampersand (&) or the greater-than (>) symbols as part of text string as an error in HTML5, even though the “theory” of these being a invalid text characters (but valid control characters) still holds true. So the only character you need worry about encoding is less- than (<). However, if you wish to create “pure” HTML, I would encode all of the above. There will only be deductions for not encoding the < character when used in text.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–55

So, if you code < (or <) the browser will display < and if you code > (or >) the browser will display >, and so on. The name entities are quite easy to remember — lt stands for the “less than” character, gt stands for the “greater than” character, and amp stands for the ampersand. However, the bad news is that “modern” HTML leans toward the decimal entities. But you only have three to remember here (easy). If you wish to use other special characters for this assignment, check out Appendix B “Table of HTML Character Entities” as a PDF file (https://webapps.bcit.ca/mdia1205/1205Appendix/1205AppendixB-entities.pdf) or as an HTML file (https://webapps.bcit.ca/mdia1205/1205Appendix/1205AppendixB- entities.html) to locate the special code that is required until you are allowed to use the UTF-8 character set in Unit 2.

WARNING 1: Never encode the control characters when they are used as control characters or your code will not display properly. Only encode these characters when they are part of the text to be

displayed in the browser. WARNING 2: When working in a word processor, many users do not realize that there are dozens of special printable characters available to us that are not on the standard keyboard. On the PC use the Windows Character Map utility (StartProgramsAccessories Character Map or StartProgramsAccessoriesSystem ToolsCharacter Map). The easiest way to locate the Character Map in Windows 10 is to go to Cortana (bottom left of your screen), type in “Character Map” then double click on the Character Map app. On the Macintosh (OS X) use the Character Palette or the Keyboard

Viewer, both available from the Character/Keyboard menu .

WARNING 3: One common error that Web designers often make is using the hyphen (-) when a dash is required. The n-dash (the width of the letter “n” –) is normally used to separate dates (as in 2014– 2015) while the m-dash (the width of the letter “m” —) is appropriate for separating text (as in President — Deltamac Interactive). If you are not using the UTF-8 Character Set (which we first introduce in Unit 2) then the dashes should be encoded as follows:

n-dash: – or –

m-dash: — or —

If you are using the Unit-8 Character Set, then you can find the dashes using the procedure above.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–56

N. Code Validators

A validator is an HTML syntax checker — much like a spelling checker in your word processor. The issue of using HTML validators comes up each term and we cannot overstress the value of using a good validator to check your HTML code. This tool will save you countless hours of proofreading code and it will usually pick up errors that you might miss in a manual proofread — using a validator and manually fine- tuning your code will usually result in fewer deductions in your assignments. Most syntax error deductions are entirely avoidable if you get into the habit of validating your syntax before submitting your assignments.

WARNING: More assignment deductions are made for not properly validating and correcting your code than for any other reason.

You can use the online validator at https://validator.w3.org/nu/ using the link in the fourth widget in first column of your Course Home page. We will be using this validator when we do your assignment assessments so our results should be consistent with yours — provided you also use this validator.

Some of our learners use the CSS HTML validator (https://www.htmlvalidator.com/) — PC only, and it also contains a neat HTML editor. You will get a special price for the CSS HTML validator because you are enrolled in these courses so check the Discussions area for an announcement regarding this special offer. For the Macintosh, nothing is better than the validator attached to the HTML editor BBEdit (http://www.barebones.com).

More grades are lost in this course through not validating HTML syntax and correcting the errors reported than for any other reason

NOTE: See 1205AppendixG-Brackets.pdf section F-3. “Extensions” to see how to add the W3C HTML validator to Brackets as an extension.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–57

O. A Web Design Checklist

Before publishing your page(s) use the following checklist to make sure you have coded your pages correctly. Not observing these guidelines have resulted in assignment deductions in the past. Be warned.

□ The browsers reduce a string of spaces to one space so adding extra spaces in code lines will be ignored by the browsers. If you wish to include more than one horizontal space in a text string, you must use the non-breaking space character entity ( ) or the decimal entity ( ), which is preferred by modern browsers.

□ The convention of using two spaces between sentences was introduced with the fixed-width fonts used by typewriters. This convention is normally not used with proportional fonts and, especially, not on the Web.

□ The convention of indenting the first line of paragraphs seems also to have been abandoned on the Web. Normally, text is left aligned for all lines in a paragraph. However, using a large initial cap for the first paragraph on a Web page seems to still be popular.

This is my first line...

□ HTML does not recognize the tab character at all so it won’t work for design effects, but it can be useful for indenting lines of code for easier reading.

□ The

tag inserts a null (blank) line between paragraphs automatically so do not use extra
tags to insert additional vertical space.

□ The

tag, like the paragraph, inserts a null (blank) line automatically so do not use extra
tags to insert additional vertical space.

□ Do not use incomplete elements such as empty paragraph tags

...

or long strings of line breaks (
) to create extra vertical space.

□ The headings (

through

) also insert a null (blank) line automatically so should not be contained within a paragraph (

) nor should additional line breaks
be added. The heading tags are complete on their own, so would not be appropriate for footer text where a paragraph tag would be more appropriate, even if a bold weight is desired. Heading tags should be used only for heading text.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–58

□ A paragraph

may be placed within a

but a

may not be placed within a paragraph

.

□ The browsers will “wrap” the text to fit the horizontal space available on the user’s monitor. So what you see in your browser is not necessarily what your user will see. Do not use line breaks
to format paragraph lines; let the browser wrap the text to fit the space available.

□ Extra linefeeds within paragraph tags are ignored by the browsers. Text between

and

will display as a single paragraph.

□ Do not separate text blocks with the break tag
— always use the paragraph tag

for normal text blocks that are meant to be paragraphs.

□ All text should be contained in a paragraph

...

, a list (you will be learning about these very soon) or a heading element (

–

). When someone who is visually challenged is viewing a website with a screen reader they use these elements to help them tell what the text is being used for on the page.

□ Be careful to type HTML tags exactly as the examples. Any extraneous characters (especially spaces) may result in the tags not being interpreted correctly.

□ Make sure that the tags are “nested” correctly (i.e., that they are turned on and off in the correct order). Remember: “first on — last off.”

□ In keeping with “Best Practices,” make sure that you encode the HTML control characters < (< or <), > (> or >), and & (& or &) even when using the UTF-8 character set.

□ There is no excuse for spelling errors on Web pages. Most of the editing tools you will use will have a spell check feature, so use this tool religiously. Brackets does not have a built-in spell checker but here are the steps to add an extension:

1. On the File menu, click Extension Manager. 2. In the search box, type spell. 3. When the spell-check entry appears, click Install. 4. After the Installation successful message appears, click Close. 5. Click Close to close the Extension Manager.

Nothing turns viewers off more than gross errors in spelling and grammar and these send the wrong message to prospective clients. Be warned.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–59

□ Validate, validate, validate. Every time you make a change to your page, validate it again. A change in the code can sometimes introduce errors that had not been flagged earlier.

P. Submitting Assignment 1

For Assignment 1 you will upload 1 zipped (compressed) file to the Desire2Learn Assignments dropbox and 1 HTML file (not zipped) to the Presentations area (located on the BCIT WebApps server) — your résumé. This file must have the file name index.html. For subsequent units you will upload more than one file, but the process is, essentially, the same, although more files will be involved in later assignments. Always remember that the first (or start) page must always be named index.html.

Here is a brief overview of the assignment zipping and uploading process to send your Assignment 1 file to the D2L Assignments dropbox. For subsequent assignments there will be more than one file to upload.

1. Zipping (compressing) your files

Here is a brief overview of the zipping process to prepare your file(s) uploading to the Desire2Learn course interface.

a. Make sure that your MDIA1205 folder contains only the file(s) for the current assignment. In this case it will be the index.html file only, which is your résumé. The images sub-directory in the illustration below will be empty or it will not exist unless you have already created it.

b. Select the folder MDIA1205 (containing your résumé file) and create a ZIP of the file for this assignment.

ZIP: A ZIP file contains one or more files that have been compressed to reduce their file size and this system is often used to transfer a number of files to a remote host within a single ZIP file.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–60

On the PC, with the MDIA1205 On the Mac, with the folder selected, right-click and MDIA1205 folder selected, choose Send toCompressed choose File (zipped) folder. Compress… in OS 10.5 – 10.13.

Use FileCreate Archive of… in earlier OS versions.

c. Make sure the correct index file is in the MDIA 1205 folder before creating the ZIP file and remember to rename the ZIP file with your surname and the assignment number, such as smith1.zip as is shown below.

On the PC, when the ZIP file is On the Mac, click and created, the file name will be click again to highlight highlighted for renaming. the file name. Type in the new name.

Notice we have also removed the extraneous .html from the filename that the Mac creates because it does not fully understand extensions.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–61

WARNING: Your instructors get dozens of ZIP files in the D2L Dropbox every term with the file name MDIA1205.zip or index.zip. Without your name and assignment number, how are we to know to whom and to what assignment they belong?

Not observing this protocol can result in deductions.

You are now ready to upload this file to your course.

NOTE: Your file(s) will be uploaded to two servers — as a ZIP file to the Assignments dropbox in Desire2Learn (for grading) and as individual files (using SFTP) to the WebApps server at BCIT — the Presentations area, where your instructors and other learners may view your work.

WARNING: Exploring the work of other students in this course is a great learning tool, but we have had a few unscrupulous learners who have “borrowed” from others when we employ this feature. We can detect these “borrowings” easily, so avoid this at all costs. Some students have been de-registered or even failed for this infraction of the use of others intellectual property without permission. Be Warned.

2. Uploading your File to Desire2Learn (for grading)

NOTE: Since we wish to include the largest possible screen captures in the following sections in order to give you the clearest information we can, page breaks may be somewhat irregular.

You must upload your Zip file to the Desire2Learn Dropbox for grading. You will later upload your raw (i.e., not zipped) file(s) to the WebApps server for presentation.

a. Log into your course in Desire2Learn and click on the Activities/Assignments menu.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–62

This will take you to the Assignments dropbox window, where you will upload your ZIP file for grading. The area for Assignment 1 is highlighted.

b. Click on the Assignment 1 link.

The Assignment 1 — Submit Assignment window will now appear.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–63

Expand the Show Folder Information menu to see more detail about this assignment.

c. Click on the Add a File button and the Add a File window will appear.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–64

d. Drop a file into the dotted box OR click on the “Upload” button

to search for a file on your computer. Notice that the file smith1.zip has been added here and this file can be removed by clicking on the X button.

e. Click the Add button.

f. You will then be returned to the Submit Files window with the selected file added.

g. Click on the X beside the file name to remove the file. Add any comments you have for your instructor in the Comments section.

h. Click the submit button and your file will be sent to the server. The File Upload Results window will then appear.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–65

h. Click on the Done button and you are finished.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–66

3. Uploading your File to WebApps (for Presentation)

NOTE: The WebApps server (Presentations area) does not deal with ZIP files at all, so make sure you upload your raw (HTML and image) files to that server, not ZIP files. When you work with clients the same rule will apply, as most servers will not extract ZIP files.

The WebApps server at BCIT was especially commissioned for students in this program in order to give you experience in transferring files to and from a remote server. This is a task you will use constantly in your career so it is important that you get it right in this course.

Be aware that you will be expected to transfer files to and from WebApps using the SFTP protocol.

WARNING

With SFTP, all data are encrypted before being sent in order to prevent passwords and other sensitive information from being transferred over the network.

SFTP stands for SSH (Secure Shell) File Transfer Protocol or simply Secure File Transfer Protocol. The Secure File Transfer Protocol ensures that data are securely transferred using a private and safe data stream.

Another term you will see used here is SSL (Secure Socket Layer) which is a certificate for protecting data while they are being transferred on the Net (often across many servers) while an SFTP client (such as WinSCP) is a network application used to transfer or share data with a remote computer.

In order for other learners and your instructors to view your work, you will upload your file(s) to the WebApps server at BCIT using a protocol known as SFTP (which stands for Secure File Transfer Protocol). We formerly used simple FTP (or File Transfer Protocol) but that protocol is not secure. SFTP is a special type of connection that allows you to transfer files between your computer and a remote computer or server, in this case the BCIT WebApps server. Using SFTP you can upload files (to the server) as well as download them (to your computer).

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–67

You should be aware that in the “real” world of Web design, you will constantly upload files to clients’ servers using the FTP or SFTP protocols, so the sooner you get used to this process, the further ahead you will be.

In order to transfer files you require an SFTP client. Later in this section, we will show you how to use three of the standard SFTP clients — WinSCP (for the PC), Fetch (for the Mac), and FileZilla (cross platform).

CAUTION: Even though the FTP client can upload entire folders, you are reminded that the server will not be able to find your files if they are inside a folder called something like “Assignment 1.” Remember that your .html pages should be inside the directory (folder) called MDIA1205 and that the first page of your site must be called index.html. If you are uploading images, as you will do for assignments 4 and 5, they should be within a folder called images. If you are uploading sound files for Assignment 5 (not required) they should be in a folder called media or audio.

a. Using WinSCP with your PC

1. You can obtain WinSCP from the WinSCP download page at https://winscp.net/eng/download.php. Follow the installation package link. You should save the installer to an easily accessible location such as your Windows downloads folder.

NOTE 1: The software WinSCP works only on the PC platform.

NOTE 2: WinSCP assumes that you will be using the secured protocol SFTP.

TIP: If you can, please donate to the developers of this wonderful little piece of software. A small donation will keep Open-Source software alive and well.

2. Login to the application and configure it as shown in the following illustration.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–68

3. Insert the necessary credentials.

a. File Protocol: Select SFTP here.

b. Host Name: This is the URL of the host server — sftp.webapps.bcit.ca. Don’t forget to preface the host name with the secure protocol sftp.

c. Port Number: The software should automatically insert 22 here once it sees the SFTP file protocol under section “a.”

d. User name: Enter your BCIT ID (A00nnnnnn) here.

e. Password: Enter your password here (it will appear as asterisks).

NOTE: While storing your password here may be convenient, is it a security risk and it is recommended that you choose the option to require password entry each time you log in. It is the responsibility of each user to maintain a secure working environment (WebApps Admin).

4. Click Login and the following warning may appear.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–69

This error message occurs when WinSCP connects to a new SSH server. Every server identifies itself by means of a host key; once WinSCP knows the host key for a server, it will be able to detect if a malicious attacker redirects your connection to another machine.

For more information on this feature, see https://winscp.net/eng/docs/message_host_key. If you trust this host (and you should), then click “Yes” and you will be taken to the next screen.

5. The column on the left shows directories and files on your local hard drive — read the blue textbar as C:\...\Document\MDIA1205\. Notice we have navigation down to our C: drive to the MDIA1205 folder

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–70

contained in the Documents directory. We earlier asked you to create this folder where you are to store your files that are ready for assessment. Notice that this /MDIA1205/ file contains of two elements — a single HTML files and an empty images folder (this folder will be used later and is only included here to remind you where it sits). Use the tool to go back to earlier directories.

The column on the right shows directories and files on the remote server. In the right column you will have a subfolder for each course that you are registered in. Currently we are sitting in the /MDIA1205/ directory and we have already moved into this column the same HTML file and empty images directory that you see in the left column. Use the tool to go back to earlier directories.

If your file(s) are working correctly in the MDIA1205 folder, you will want to make sure that the files in the /MDIA1205/ directory in the remote server have the same structure.

6. Before you proceed you should make sure that the left column of your application looks exactly like the screenshot above.

If you do not already have the empty images folder in the MDIA1205 folder on your computer then you are best to make that adjustment now. Otherwise, you can create an empty folder (directory) by right clicking on the white space in the column and selecting NewDirectory (a popup window will appear where you can rename the empty folder).

7. At this point, the right column in WinSCP should contain no data. Your next task is to populate the right column with the same elements that appear in the left column. There are several ways to move elements from the left column to the right column — choose the one that works best for you.

a. Drag-and-Drop: To upload a file to your server, drag it from the left window to the right. The following query window may appear.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–71

Choose an appropriate response.

b. Select an Option: Right-click on an element and choose the option “Upload”. The query window above may appear.

Choose OK or some other appropriate response.

c. Quick Transfer: Click on an element and press F5. The query window above may appear.

8. Occasionally you may wish to transfer elements from the remote server to your own computer (i.e., downloading). The above transfer options will work just as well for downloading files as they did for uploading files. While the query windows will change (as in “download” for “upload,” for example) it will be easy for you to adapt to the Download (remote to local) process once you have worked with the Upload process (local to remote).

Next we explore Fetch, a well recommended SFTP client for the Macintosh.

b. Using Fetch with your Mac

NOTE: Fetch fully supports the SFTP protocol. Detailed information on using SFTP with Fetch is available at https://fetchsoftworks.com/fetch/help/Contents/Conce pts/SFTP.html.

1. Download Fetch from https://fetchsoftworks.com/fetch/download/ and install it on your computer. BCIT has a site license for this software, so when the software asks you to verify ownership, use the following credentials:

Version 5.8 (or later) Serial Number Name: British Columbia Institute of Technology Serial Number: FETCHEX001-LP23-FV7B-K6N7-P6M2-YHSD

If you are not asked to register the software, then go to FetchEnter Serial Number and supply the credentials above. Otherwise, your software will expire in 15 days.

The Enter Serial Number command is disabled if you’ve already entered a serial number. If, for some reason, you need to enter a serial number again, you can hold down the Option key when selecting FetchEnter Serial Number to allow you to enter the serial number again.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–72

Go to FetchCheck for Update to see if there are any software updates available. There is a PDF manual available at https://fetchsoftworks.com/fetch/download/FetchHelp.pdf.

2. Open Fetch and configure the New Connection dialogue box as shown in the following illustration.

..

a. Hostname: This is the URL of the host server, in this case sftp.webapps.bcit.ca. Don’t forget to prefix the URL with sftp.

b. Username: Enter your BCIT ID (A00nnnnnn) here.

c. Connect Using: Select SFTP here.

d. Password: Enter your D2L password here (it will appear as asterisks).

e. Select Add to Keychain if you wish your Mac to save your login data.

NOTE: While storing your password here may be convenient, is it a security risk and it is recommended that you choose the option to require password entry each time you log in. It is the responsibility of each user to maintain a secure working environment (Mike Shore).

f. Click Connect.

3. Once connected, the server will take you to your personal root directory in WebApps, as is shown in the illustration below.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–73

Your root directory should show only one folder/directory — MDIA1205, as shown above. There will be additional root directories if you are enrolled in more than one course in this program.

TIP: Once you have made a successful connection here, go to ShortcutsNew Shortcut and create a Fetch shortcut to this server location. Once you have done this, you simply have to select this server location

from the Shortcuts dropdown menu in the New Connection dialogue box or select this location from the Shortcuts menu to go directly to that location.

4. On the remote server (WebApps) open the MDIA1205 directory — it should be empty unless you have uploaded a file or files earlier.

WARNING: Never place your files in the root directory in WebApps or the Presentations area will not find your file(s). Always open your MDIA1205 directory and place your file(s) inside that folder.

5. To upload a file or files, click on the Put button or select RemotePut from the menu and a dialogue box like the one below will appear.

The remainder of this page has been intentionally left blank.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–74

6. Select the file in the usual manner and click the Put button .

The default settings should work fine here.

NOTE 1: Remember that your first (or only) file must be named index.html or the WebApps server will not recognize it and you will get an error message when you click on your name in the Presentations area. If you accidentally gave your file a different name on your computer, you can change the name of the file to be uploaded in the Put as: text field.

The remainder of this page has been intentionally left blank.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–75

NOTE 2: Your file names must not contain any spaces or special characters such as are found on the top row of your keyboard with the [Shift] key pressed, and others, including:

" ! £ $ % ^ & * ( ) + = @ ' ; : / ? > < , # | \ ` ¬ )

Macintosh users are not normally restricted to these kinds of things, so make a mental note of this now, as the rest of the Internet world (especially servers) has such restrictions.

TIP: While you only had to deal with a single file (your résumé) for Assignment 1, other assignments will require that more than one file be uploaded. To select contiguous (side-by-side) files from a directory, use the [Shift] key; to select non-contiguous files (not side-by- side) use the [Command] key. Having stated that, if you have followed previous instructions there will not be any non-essential files for the current assignment in the MDIA1205 folder/directory on your computer.

7. Once transferred, the file name you selected will appear in the listing of files on the remote (WebApps) Server.

Once you see your file(s) on the WebApps Server, you are finished.

8. To create a sub-folder on WebApps, such as “images” (as you will require

for Assignment 4) use the New Folder button or go to RemoteNew Folder.

TIP: When selecting a series of files to upload (Put) if you include a folder (of images for example) before selecting Put, the sub-folder will be automatically created including its contents.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–76

9. While you may never have to do this, to download files from the

WebApps server, use the Get button . The download process is similar to, but the reverse of, what we described above.

See HelpFetch Help for further details on deleting and renaming files, or creating new directories. There is more information on the software website at https://fetchsoftworks.com/fetch/help/ and there is a PDF help file at https://fetchsoftworks.com/fetch/download/FetchHelp.pdf.

Lastly, let us first introduce you to FileZilla, an open source (i.e., free) cross- platform application that works amazingly well. The instructions for using FileZilla may seem a “little” more complex, but just follow along, step-by-step, and you will be fine.

c. Using FileZilla

FileZilla is a cross-platform FTP application available for Windows, Linux, and MacOS. If you have access to a Web server (and you do, via the BCIT WebApps server) and you have an SFTP account on that server (and such an account was created for you when you registered for this course), then by using FileZilla you can put all of your HTML and media files online very easily. The application size is extremely small (36mb), and, even better, the FileZilla installation process is simple. It’s truly a wonderful application, and is the right price — free.

i. Downloading FileZilla

1. Download the FileZilla software by going to https://filezilla- project.org/download.php?show_all=1 and select the appropriate download for your system. For the Mac OS you need to be running OS V.10.11 or better and for the PC you want to use the 64-bit version.

NOTE: This URL will help you avoid downloading “bundled” software which you do not want or need. The download site will automatically detect your operating system and for a Windows download you will also see a “FileZilla Server” button which you will not be using at this point.

2. This will place a file on your computer with the filename something like ..._win64-setup.exe (for the PC) or the compressed file

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–77

..._macosx-x86.app.tar.bz2 (for the Mac). The ellipses indicate version-specific data.

ii. Installing FileZilla

1. First, locate the installer file ..._win64-setup.exe for the PC or ..._macosx-x86.app.tar.bz2 for the Mac. The version numbers will vary depending on the version you download. This file will appear in your Downloads folder unless you have told your browsers to save it elsewhere on your hard drive.

2. On your PC, click on the ..._win64-setup.exe file to initiate the installation. Clicking on the compressed Macintosh file ..._macosx- x86.app.tar.bz2 will generate the file Macintosh FileZilla-Installer.

3. In general, your next steps would include agreeing to the licensing agreement, select Installation Options, choosing components (see the next section), indicating the installation location, and determining Start menu shortcuts — see https://wiki.filezilla- project.org/Client_Installation#Start_menu_shortcuts for more information).

4. The “Choose Components” option here is one that may confuse you. Here you choose which parts of the FileZilla client you want to install. If you hover your mouse over a choice, FileZilla will show you a description of the item. Here is the window:

Go through all of these options and check/uncheck those you want.

a. Select additional languages if you want FileZilla to perform in a language other than English.

b. Icon sets let you choose different looks for FileZilla’s icons (some of these are contributed by users).

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–78

c. The shell extension integrates FileZilla into the Windows Explorer. Though FileZilla for Windows is only available as a 32-bit build, it contains a shell extension for both the 32-bit and 64-bit shell. Installing or removing this extension requires full administrative privileges. If you do not understand this, then choose this option if your PC is operating in 64-bit mode.

d. Choose “Desktop Icon” if you wish to have a FileZilla icon placed on your desktop. Most users will go with what’s selected by default here.

When you’re all finished, click Next

iii. Starting FileZilla

NOTE: FileZilla fully supports SFTP, however, the software must be specifically set up to accept this new protocol — see especially Note ➂ below the following screenshot.

1. To start FileZilla, treat it as any other new software that you have

installed. However, when you click on the application icon you will likely see the following warning.

If the SFTP client and the server establish a client/host relationship here using a host key when a first file for that host is uploaded (webapps.bcit.ca in this case). Thereafter, the client and server will know “who is talking to whom.” Since the server does not yet have a legal host key for this transaction, it allows the “Trust on First Use” — see https://en.wikipedia.org/wiki/Trust_on_first_use) algorithm, so selecting the option “Always trust this host” (as shown by the red arrow above) means you will be able to connect to this server in

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–79

“secure” mode even though not all of the requirements for this operation are not yet in place. Once you have uploaded a file to WebApps and satisfied the TOFU requirement, you are ready to go with this client.

Once you have dealt with the TOFU requirement, the following window will display.

NOTES:

➀ Menu Bar. One of the most important options here is FileSite Manager which allows you to set up a permanent connection to the server webapps.bcit.ca which is what you will want for this course — more on this below.

➁ Icon Bar. There are only a few operations that you will need to use for this course, but Open Site Manager at the beginning of the icon bar will be useful. The rest of the icon bar deals mainly with display issues — mouse over each icon to receive a message about the function of each icon (most of these options will not immediately apply).

➂ Quick Connect Bar. Use this feature to quickly connect to a Web host. Note that the settings will not be saved once you exit FileZilla

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–80

(but see Note 2, below). We therefore recommend that you use the Site Manager to set up your WebApps access.

NOTE 1: Notice the red arrow in the Host area. To locate a host using the secure protocol, the Quickconnect option in FileZilla curiously requires that the you indicate the SFTP protocol being employed as the first item in the host string. In this case it is sftp://. This is then followed by the actual host name (which also includes sftp. preceding the host name). The textbox here is too narrow to display the entire host name, so this is what you must actually insert to reach the WebApps server —

sftp://sftp.webapps.bcit.ca

Please be aware that the unusual syntax sftp:// does not apply to most FTP clients, and should be used only with FileZilla at this time.

NOTE 2: If you have connected to a site using Quickconnect and wish to transfer the data there to the Site Manager, click on the FileCopy current connection to Site Manager option.

➃ Progress Bar. Here the software indicates the progress of your connection to the server. If the message here ends with “Status: Logged in” you know you have connected to the server.

In the next section, the left column represents the Local site (i.e., your computer) and the right column represents the Remote site, the WebApps server in this case. Notice that the left column is populated with data at this point but the right column is not. This will all change once you have established a connected with the WebApps server.

➄ Local Site: In the left column, first we link to the Documents folder (pane 1) and from that folder we select the MDIA1205 folder (pane 2).

➅ Directories Selected. Pane 3 confirms that we have selected 1 directory on your computer hard drive. This assumes that you have followed the instructions in Section G-1 “Setting up Directories and Organizing your Files” in setting up your MDIA1205 (and MDIA1205Working) directories. If you have placed your MDIA1205

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–81

folder in a different location than above, then just the paths accordingly.

➆ Remote site. As stated above, the right column contains no data since we have not yet connected to the WebApps server.

➇ Connection. This note confirms that you are “Not connected to any server.”

➈ Transfer Details. Here you are provided with important information about the state of your file transfer. There are 3 options to select here — Queued Files (files waiting to be transferred), Failed transfers (files that failed to transfer), and Successful transfers (files that were successfully transferred).

iv. Using the Site Manager

1. Access the FileZilla Site Manager using FileSite Manager (or use the keycodes [Ctrl ] + [S] on the PC or [Command ] + [S] on the Macintosh). You can also use the icon to reach the Site Manager.

The Site Manager consists of two columns with 4 options in the right column. You only need to deal with the “General” tab at this point.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–82

NOTES:

➀ New Site. Click on the “New Site” button and give your site a distinctive name — WebApps will do nicely here.

Below we are working in the “General” tab.

➁ Protocol. Choose “SFTP — SSH File Transfer Protocol” from the dropdown menu. This SFTP setting is required for the WebApps server. If you use this software with a different server you should check with the host or server administrator for the correct setting.

➂ Host. Insert the URL for the WebApps site — sftp.webapps.bcit.ca. (remember to include the sftp prefix here but do not include the protocol sftp:// as that element is handled in this window by the Protocol setting in ➁ above.)

For “Port” here, this will normally be assigned by the server. If there is a problem here, try using 21 for FTP and 22 for SFTP.

Encryption. This option disappears when you use “SFTP – SHH File Transfer Protocol” as data encryption is built into that protocol.

➃ Login Type. Choose “Normal” from the dropdown menu. In this mode, FileZilla will save passwords by default (see Edit  Settings  Interface  Passwords).

➄ User. Insert your BCIT A00123456 student ID number here.

➅ Password. Use the same password here as you would use for logging into the D2L site. If this does not work for you, please contact your instructor for help in troubleshooting.

NOTE: While storing your password here may be convenient, is it a security risk and it is recommended that you choose the option to require password entry each time you log in. It is the responsibility of each user to maintain a secure working environment (Mike Shore).

➆ OK. Click on the “OK” button to save these data to the FileZilla software.

➇ Connect. Click on the Connect button to connect to this server.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–83

When you connect to the server, the right column of the main page will now be populated with the following data.

NOTE: The icons and indicate a root directory.

v. Transferring Files

Now that you can see the files and folders in both the local and remote directories, take the following steps to transfer your files from your local computer to the server.

1. Select the MDIA1205 folder in the top pane of the Local site column. This will show the files and folders for this location on your hard drive in the bottom pane.

Notice in the bottom pane we have an empty “images” directory (we include this folder to remind you in subsequent assignments to place your images in their own folder) and a single HTML file. There will, of course, be other files included here for subsequent assignments.

2. Select the MDIA1205 folder in the top pane of the Remote site column. Notice that, apart from the root directory, which you should not touch, the server folder is empty (as the notes remind us).

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–84

3. Now we are ready to transfer some files and the key is to make the Remote site look exactly like the Local site (apart from the root folder icon that should be maintained in the Remote site). There are three recommended methods of transferring files from your hard drive to the server —

a. You can upload or download a file by double-clicking on it. It will be added to the transfer queue and the transfer starts automatically. To transfer folders and/or multiple files, select them and right-click the selection. Then you can click on Upload/Download in the popup menu. NOTE: Folders cannot be transferred using this method.

b. You can also drag the files from one side and drop them on the other side. To add files to the queue so that they will be transferred later, select them, right click, and select “Add to Queue” from the popup menu. You may also drag the files directly into the queue. Click on the “Toggles Processing of

the transfer queue” button on the toolbar to start the transfer.

c. You can click on a file, then drag the file (a box is added to the

arrow cursor) to the directory where you want to move it. The directory will be highlighted when you are over it. Let go of the mouse button and the file will be moved to the directory.

Frankly, we have found option “b” more than adequate for this course, so I would start there.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–85

That’s it. You have transferred your first files from your computer to a Web server using FileZilla. Use much the same techniques to download files from the server to your computer. You can also transfer entire directories and multiple files, as you have seen.

For additional functionality connect to the FileZilla “Quick Guide” site at https://wiki.filezilla-project.org/Using.

4. Viewing other Learner Presentations

The purpose of using the WebApps server for presentation is to allow learners to preview or test their pages on the server and to view other classmate’s assignments. One of the best learning tools on the Web is browsing other designer’s websites and learning from (but not copying) their ideas. Since all of your classmates are working to the same restrictions for each assignment in this course, you can easily see how others have dealt with the requirements of this course by viewing their presentations.

WARNING: Exploring the work of other students in this course is a great learning tool, but we have had a few unscrupulous learners who have “borrowed” from others when we employ this feature. We can detect these “borrowings” easily, so avoid this at all costs. Some students have been de-registered or even failed for this infraction of the use of others intellectual property without permission. Be Warned.

To View the Presentations of your Classmates:

a. Return to the MDIA 1205 home page and view the “Presentations” area in the right column of the course home page. There you will find a list of students in this class.

The icon expands or contracts the list here.

b. First, click on your own name to make sure that your presentation is showing correctly. If not, then you have not followed all of the instructions above related to uploading to the WebApps server and you should review your upload procedure.

c. Next, click on the name of other classmates to open their current presentation for this course.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–86

d. If you do not see a presentation, then that learner has not followed the instructions above. You might want to inform them, gently, of this fact via the course mail, in case they accidentally “skipped” item b in this list.

Q. Summary

In this unit we have introduced you to the Internet and the powerful HTML authoring language that allows you to create pages that may be published on the World Wide Web and on intranets (private networks). We have introduced you to a powerful text- based HTML editor — Adobe Brackets. We have also explored the basic structure of HTML documents and examined and demonstrated some fundamental HTML tags. With this basic knowledge we have created a simple HTML document using text only.

In the next unit we will introduce you to the code assistance tools for Adobe Brackets which will help you to use some of the more powerful aspects of HTML without being required to manually insert each line of HTML code. We also begin using CSS in an external style sheet, introduce more text tools, and start working with colour.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Introduction to the Internet and HTML Unit1–87

Appendix 1-A Summary of Basic HTML Codes

1. Document Codes:

identifies the document type as HTML5. ... defines the protocol of the page ... defines the head area contains the title ... defines the body area comment (use only 2 hyphens here)

2. Text Codes:

a. Text Spacing

...

paragraph
line break ... centre (obsolete in HTML5)

---

horizontal rule

...

indents text from the left and right margins.

b. Headings

...

level 1 heading

...

level 2 heading

...

level 3 heading

...

level 4 heading

...

level 5 heading

...

level 6 heading

c. Text Styles

... bold ... strong emphasis (bold) ... italics ... emphasis (italics) ^... superscript _... subscript

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1