CEd 519 HTML and JavaScript

1. CEd 519HTML and JavaScript CARDINAL STRITCH UNIVERSITY Mary Martens Instructor

2. Let’s Review, what is HTML? • HTML is the language used to create web pages. • HTML documents are interpreted and displayed in web browsers. • When a web browser recognizes an HTML element, it must display that element in accordance with an HTML standard.

3. So, why would I wantto learn HTML ? • In the last two weeks’ classes we became familiar with Netscape Composer which is one of several programs that can let you create Web pages without learning HTML. • Some others are Adobe PageMill, Microsoft FrontPage, Macromedia Dreamweaver, Claris Homepage

4. But for most of this class we are going to concentrate on making pages purely in HTML. • Yes this takes a little more time, and the typing is a lot more tedious.

5. And what will I get from all this extra work? • First, by entering tags, you will develop a deeper understanding of how HTML really works

6. Why learn HTML ? • Second, you will be able to troubleshoot Web pages when picky little errors occur

7. Why learn HTML ? • Third, you will be able to view other pages and learn how they achieved certain effects.

8. Why learn HTML ? • Fourth, you will understand a little better the file and folder structures found on Web computers.

9. Why learn HTML ? • Another reason to write pages in HTML is to decrease the size of the file. • Using a Page Editor, or a Word Processor like Microsoft “Word” and saving the file as HTML adds lines and lines of code that must be downloaded to the users computer. • Here’s an example.Look at the source code of these two pages In Word In notepad

10. Why learn HTML ? • Another problem with Page Editors is if you use any of these programs, you are limited to the features that each program is capable of producing.

11. Why learn HTML ? • Finally, and most importantly, by learning HTML you will understand how HTML, JavaScript, CSS, DHTML, XML and work together.

12. So by the end of the class you may want to start a Web page using an HTML editor. • But, instead of being limited by the features that each program is capable of producing, you will be able to add features the program may not yet recognize. • That way you will get the best of both worlds.

13. As you learn HTML, you will write the HTML document on the word processor, or notepad, wordpad, or simple text. • When you are finished creating the HTML document, you'll then open the document in a browser, like Internet Explorer or Netscape Navigator.

14. Why text only format? • HTML browsers can only read text. To understand how limited that is, look at your keyboard. • See the letters and numbers and little signs like % and @ and *? There are 128 in all (read upper- and lowercase letters as two). That's text. That's what the browser reads. It simply doesn't understand anything else.

15. HTML Elements • HTML is a subset of Standard Generalized Markup Language (SGML) • SGML is a standard for how to organize and tag elements of a document <B>sample text</B>

16. HTML Coding Practices • Tags are capitalized to separate tags from contents • Use ending tags whenever possible • Separate sections of HTML code with spaces

17. tags are capitalized spaces between sections of code use of ending tags

18. Creating a HTML Document – by using a Text Editor • Text Editor • Program that allows a user to enter, change, save, and print text, such as HTML • No advanced features • Allows you to develop HTML documents easily

19. Creating a HTML Document – by using a Text Editor • The program Web Notepad is on your CD • This is a HTML Text Editor • Program that allows a user to enter, change, save, and print text, such as HTML • No advanced features, but it will color your tags, and search for particular lines of code • Allows you to develop HTML documents easily

20. Creating a HTML Document – by using notepad

21. Creating a HTML Document – by using a HTML Text Editor

22. Tag Format • All tag formats (also called commands or flags) are the same. They begin with a less-than sign: < and end with a greater-than sign: > • (these are also called “angle brackets”) • What goes inside the < and > is the tag. • Learning HTML is learning the tag to perform whatever command you want to do.

23. Empty Tags and Containers • Tags come in two general types: • Empty tags, do not hold or surround anything, so they are called “empty”. • Empty tags are used for page formatting. • An empty tag does not enclose any text so it has no closing tag. • Some examples are <BR><HR>

24. Empty Tags and Containers • Container tags, start with a beginning tag, contain some text that is modified by the container, and end with an ending, or closing tag. • Container tags are used to manipulate or control the contents placed within them

25. Open and Close Flags • The majority of HTML tags are container tags, that is they require both an open and a close tag (a beginning and ending tag). • Most are very easy to understand because the tag is obvious.

26. Important Points Review • The end tag for commands is simply the begin tag with the added slash / <H1>text affected here</H1> • Tags will not show up on your page as long as your commands are inside the <and > brackets, the tag is used to alter the text, but the actual code is hidden from the viewer.

27. Project 2 Creating a Web Sitewith Links

28. Hyperlinks • Hyperlinks are the elements in an electronic document that link to another place in the same document or to an entirely different document. • Links are the distinguishing feature of the WWW. They let you skip from one page to another, call up a movie or a recording and download files with FTP.

29. Hyperlinks Inside Your Document • Links are the most fundamental part of the world wide web. • It is the links that tie it all together. • There are four different kinds of links you can have on your website: • Links to anchors on the current page (Internal). • Links to other pages within the current site (Local) • Links to pages outside the current site (Global) • Links to directly send an E-mail (E-mail)

30. links to targets targets Linking within a Web Page

31. Linking to Another Web Page within the Same Web Site

32. Linking to Another Web Site

33. Linking to E-Mail

34. Links • The way to create a link to another page is a set tag format like any of the others you have seen so far. • Once you learn the format, you can make as many links as you want, to any other page you want. • For example: The code below would create a link to the Stritch home page. <A HREF="http://www.stritch.edu"> Click Here For Stritch Home Page</A>

35. Here's What's Happening

36. <AHREF="http://www.stritch.edu">Click Here For Stritch Home Page</A> • A stands for Anchor. • The Anchor Tag <A> is a container that serves as the basis for all the links we create

37. Link Components • Once you begin the tag for a Link, you will need to include attributes to create the 3 components of the link • 1. The Destination • 2. The Label • 3. The Target

38. The Destination • The destination - the most important part. It is used to specify what will happen when the visitor clicks the link. • You can create links that show an image, play a sound or movie, download files, open a newsgroup, send an e-mail message and more. • The most common links, however connect to other Web pages.

39. <AHREF="http://www.stritch.edu">Click Here For Stritch Home Page</A> • HREF stands for Hypertext REFerence. • That's a nice, short way of saying to the browser, "This is where the link is going to go."

40. <AHREF="http://www.stritch.edu">Click Here For Stritch Home Page</A> • Notice that the address has an equal sign in front of it and is enclosed in quotes. • Why? Because HREFis an attribute of the Anchor <A> tag. • The value of the attribute is the destination http://www.stritch.edu or the FULL ADDRESS of the link.

41. The Label • The label is the part the visitor sees and clicks on to reach the destination. • It can be text, an image, or both. Label text is often, but not always underlined. • The better the label, the more likely a visitor will click on it. In fact, eliciting Web visitor’s click is considered an art in web page circles.

42. <AHREF="http://www.stritch.edu">Click Here For Stritch Home Page</A> • Where it reads Click Here For Stritch Home Page is the label - the part the visitor sees on the page and will click on to reach the destination. • Since what is in that space is all that will appear on the page for the viewer to click. You should write something that denotes the link.

43. <AHREF="http://www.stritch.edu">Click Here For Stritch Home Page</A> So here's what will appear on the page using the command above… Click Here For Stritch Home Page

44. Click Here For Stritch Home Page • On a web page the area of text or the image used as the label is known as the “hotspot”. • The mouse pointer changes when it is moved over the area. Like this • Generally, the mouse pointer changes to a pointing hand when it is moved over the hotspot. • The destination URL appears on the status bar when the mouse pointer is over a hotspot • This change notifies the user that there is a link from that text or image.

45. What To Write For The Link? • There are a couple different schools of thought on this. • One suggests that what you write for links should be quite blatant. This includes text like "Click here for this" or "Here's a link to...". • The other states that since the hypertext links will be blue (or whatever color they're set to), and the mouse pointer will change, the links should be just another word in the text set up as a link.

46. Just remember your readers should be allowed to have a very easy time in terms of navigating your Web pages. • But it's your page and you make that decision.

47. The Target • The last component, the target is most often used for internal links. For local and global links the target is often ignored or left up to the browser. • The target determines where the destination will be displayed. • The target might be a particular named window or frame, or a new window or frame.

48. A few notes about URLs • Uniform Resource Locator, or URL, is a fancy name for address. • It contains information about where a file is and what a browser should do with it. • Each file on the Internet has a unique URL.

49. http://www.stritch.edu/ced/514.html • The first part of the URL is called the Scheme. It tells the browser how to deal with the file that it is about to open. • One of the most common schemes you will see is http, or HyperText Transfer Protocol. • Essentially, http:// means the data is stored on the web. The colon and backslashes separate the protocol prefix from the rest of the address. • Other schemes are ftp, telnet, mailto, file

50. http://www.stritch.edu/ced/514.html • The www portion of a URL was initially used by the scientists at CERN (The European Laboratory for Particle Physics) to distinguish between World Wide Web files and Internet files. • In browsers this portion may not be necessary when typing in an address. In html, the http://www is required