Course Overview. Week 1

Transcription

1 Course Overview Week 1

2 AGENDA WEBD101 Introduction Course Requirements Attendance Assignment Submissions This week 2

3 I live in Ohio Introduction I have worked for Franklin University as an adjunct / employee since Spring 2001 I also currently work for major telecommunications company (34 years) Have been teaching for over 21 years (15+ online) Degrees BS Computer Engineering (The Ohio State University) MS Computer Engineering (The University of Illinois at Urbana-Champaign) MBA in International Business (Ashland University) 3

4 Introduction (continued) WELCOME PLEASE READ & RESPOND! <- READ!!! Click where it says HERE under #1 item to get brief intro to class brief introduction my contact information general rules for this course learning environment attendance assignments miscellaneous items references/external resources Click where it says HERE under #2 item to view assignment details Course assignments Click where it says HERE under #4 item to view additional information Click where it says SOFTWARE NEEDED under #5 item for software required 4

5 LMS Learning Objects to look at: - WELCOME PLEASE READ & RESPOND! - SPECIAL PASSES! - LINKS TO WEEKLY QUIZZES (QUICK CHECKS) - NOTES / ERRATA 5

6 6

7 7

8 Attendance Must meet at least one of the following before 11:59 PM EST on Sunday of each week in order to be counted as being present for that week: submit at least one complete assignment for the week (must submit in week in which assignment is due [or complete quiz]) communicate with me during week via with question(s), comments NOTE: Attendance at Meet session does NOT count towards attendance Weekly Meet sessions WEDNESDAYS 8:00 9:00 PM EST 3 weeks of absence results in Z grade 8

9 Web Development & Design Foundations with HTML5 CHAPTER 1 INTRODUCTION TO THE INTERNET AND WORLD WIDE WEB 9

10 In this chapter, you will learn how to Learning Outcomes Describe the evolution of the Internet and the Web Explain the need for web standards Describe Universal Design Identify benefits of accessible web design Identify reliable resources of information on the Web Identify ethical use of the Web Describe the purpose of web browsers and web servers Identify networking protocols Define URIs and domain names Describe HTML, XHTML, and HTML5 Describe popular trends in the use of the Web 10

11 Internet The interconnected network of computer networks that spans the globe. 11

12 The World Wide Web The graphical user interface to information stored on computers running web servers connected to the Internet. 12

13 Intranet & Extranets Intranet A private network contained within an organization or business used to share information and resources among coworkers. Extranet A private network that securely shares part of an organization s information or operations with external partners 13

14 Web Standards and the W3C Consortium W3C World Wide Web Consortium Develops recommendations and prototype technologies related to the Web Produces specifications, called Recommendations, in an effort to standardize web technologies WAI Web Accessibility Initiative 14

15 Web Accessibility Accessible Website provides accommodations for individuals with visual, auditory, physical, and neurological disabilities WAI W3C s Web Accessibility Initiative WCAG Web Content Accessibility Guidelines 15

16 Web Accessibility & The Law Americans with Disabilities Act (ADA) Prohibits discrimination against people with disabilities Section 508 of the Rehabilitation Act Requires that government agencies must give individuals with disabilities access to information technology that is comparable to the access available to others 16

17 Universal Design for the Web Universal Design the design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design 17

18 Network Overview Network two or more computers connected together for the purpose of communicating and sharing resources 18

19 Networks LAN Local Area Network Usually confined to a single building or group of buildings WAN Wide Area Network Usually uses some form of public or commercial communications network to connect computers is widely dispersed geographical areas. 19

20 The Client/Server Model Client/Server can describe a relationship between two computer programs the "client" and the "server". Client requests some type of service (such as a file or database access) from the server. Server fulfills the request and transmits the results to the client over a network 20

21 The Internet Client/Server Model Client Web Browser Server Web Server 21

22 Web Client Connected to the Internet when needed Usually runs web browser (client) software (such as Internet Explorer or Firefox) Uses HTTP (Hypertext Transfer Protocol) Requests web pages from server Receives web pages and files from server 22

23 Web Server Continually connected to the Internet Runs web server software (such as Apache or Internet Information Server) Uses HTTP (Hypertext Transfer Protocol) Receives request for the web page Responds to request and transmits status code, web page, and associated files 23

24 Internet Protocols Protocols Rules that describe the methods used for clients and servers to communicate with each other over a network. There is no single protocol that makes the Internet and Web work. A number of protocols with specific functions are needed. 24

25 FTP File Transfer Protocol A set of rules that allow files to be exchanged between computers on the Internet. Web developers commonly use FTP to transfer web page files from their computers to web servers. FTP is also used to download programs and files from other servers to individual computers. 25

26 Protocols Sending SMTP Simple Mail Transfer Protocol Receiving POP (POP3) Post Office Protocol IMAP Internet Mail Access Protocol 26

27 HTTP - Hypertext Transfer Protocol A set of rules for exchanging files such as text, graphic images, sound, video, and other multimedia files on the Web. Web browsers send HTTP requests for web pages and their associated files. Web servers send HTTP responses back to the web browsers. 27

28 TCP/IP Transmission Control Protocol/ Internet Protocol TCP/IP has been adopted as the official communication protocol of the Internet. TCP and IP have different functions that work together to ensure reliable communication over the Internet. 28

29 TCP Transmission Control Protocol Purpose is to ensure the integrity of communication Breaks files and messages into individual units called packets 29

30 IP Internet Protocol A set of rules that controls how data is sent between computers on the Internet. IP routes a packet to the correct destination address. The packet gets successively forwarded to the next closest router (a hardware device designed to move network traffic) until it reaches its destination. 30

31 IP Address Each device connected to the Internet has a unique numeric IP address. These addresses consist of a set of four groups of numbers, called octets will get you Google! An IP address may correspond to a domain name. 31

32 Domain Name Locates an organization or other entity on the Internet Domain Name System Divides the Internet into logical groups and understandable names Associates unique computer IP Addresses with the textbased domain names you type into a web browser Browser: IP Address:

33 Uniform Resource Identifier URI Uniform Resource Identifier identifies a resource on the Internet URL Uniform Resource Locator a type of URI which represents the network location of a resource such as a web page, a graphic file, or an MP3 file. 33

34 TLD Top-Level Domain Name A top-level domain (TLD) identifies the rightmost part of the domain name. Examples of generic TLDs:.com,.org,.net,.mil,.gov,.edu,.int,.aero,.asia,.cat,.jobs,.name,.biz,.mobi,.museum,.info,.coop,.post,.pro,.tel,.travel 34

35 Markup Languages SGML Standard Generalized Markup Language A standard for specifying a markup language or tag set HTML Hypertext Markup Language The set of markup symbols or codes placed in a file intended for display on a web browser. 35

36 Markup Languages (2) XML extensible Markup Language A text-based language designed to describe, deliver, and exchange structured information. It is not intended to replace HTML it is intended to extend the power of HTML by separating data from presentation. 36

37 Markup Languages (4) HTML 5 The next version of HTML4 and XHTML

38 Web Development & Design Foundations with HTML5 CHAPTER 2 HTML BASICS Copyright Terry Felke-Morris 38

39 Learning Outcomes In this chapter, you will learn how to... Describe HTML, XHTML, and HTML5 Identify the markup language in a web page document Use the html, head, body, title, and meta elements to code a template for a web page Configure the body of a web page with headings, paragraphs, line breaks, divs, lists, and blockquotes Configure text with phrase elements Configure a web page using new HTML5 header, nav, main, and footer elements Configure special characters Use the anchor element to link from page to page Create absolute, relative, and hyperlinks Code, save, and display a web page document Test a web page document for valid syntax 39

40 What is HTML? HTML: The set of markup symbols or codes placed in a file intended for display on a Web browser page. The World Wide Web Consortium ( sets the standards for HTML and its related languages. 40

41 HTML Elements Each markup code represents an HTML element. Each element has a purpose. Most elements are coded as a pair of tags: an opening tag and a closing tag. Tags are enclosed in angle brackets, "<" and ">" symbols. 41

42 Newest version of HTML/XHTML Supported by modern browsers What is HTML5? Intended to be backwards compatible Adds new elements Adds new functionality Edit form data Native video and audio And more! Source: W3C 42

43 Example HTML5 Web Page <!DOCTYPE html> <html lang="en"> <head> <title>page Title Goes Here</title> <meta charset="utf-8"> </head> <body>... body text and more HTML5 tags go here... </body> </html> 43

44 Head & Body Sections Head Section Contains information that describes the web page document <head> head section info goes here </head> Body Section Contains text and elements that display in the web page document <body> body section info goes here </body> 44

45 Title Element Meta Element 45

46 Heading Element <h1>heading Level 1</h1> <h2>heading Level 2</h2> <h3>heading Level 3</h3> <h4>heading Level 4</h4> <h5>heading Level 5</h5> <h6>heading Level 6</h6> Demo 46

47 Paragraph element Paragraph Element <p> paragraph goes here </p> Groups sentences and sections of text together. Block Display Configures empty space above and below Demo 47

48 Line Break Element Line Break element Stand-alone, or void tag text goes here <br> This starts on a new line. Causes the next element or text to display on a new line Demo 48

49 Blockquote Element Blockquote element Indents a block of text for special emphasis <blockquote> text goes here </blockquote> Block Display Configures empty space above and below Demo 49

50 Phrase Elements Indicate the context and meaning of the text Element Example Usage <b> bold text Text that has no extra importance but is styled in bold font by usage and convention <em> emphasized Causes text to be emphasized in relation to other text; usually text displayed in italics <i> italicized text Text that has no extra importance but is styled in italics by usage and convention <mark> mark text Text that is highlighted in order to be easily referenced (HTML5 only) <small> small text Legal disclaimers and notices ( fine print ) displayed in small font-size <strong> strong text Strong importance; causes text to stand out from surrounding text; usually displayed in bold <sub> sub text Displays a subscript as small text below the baseline <sup> sup text Displays a superscript as small text above the baseline 50

51 Proper Nesting CODE: <p><i>call for a free quote for your web development needs: <strong> </strong></i></p> BROWSER DISPLAY: Call for a free quote for your web development needs:

52 HTML Lists Unordered List Ordered List Description List formerly called a definition list 52

53 Displays a bullet, or list marker, before each entry in the list. Unordered List <ul> Contains the unordered list <li> Contains an item in the list 53

54 <ul> <li>tcp</li> <li>ip</li> <li>http</li> <li>ftp</li> </ul> Demo Unordered List Example 54

55 Ordered List Displays a numbering or lettering system to itemize the information contained in the list <ol> Contains the ordered list type attribute determines numbering scheme of list, default is numerals <li> Contains an item in the list 55

56 Ordered List Example <ol> <li>apply to school</li> <li>register for course</li> <li>pay tuition</li> <li>attend course</li> </ol> Demo 56

57 Description List Useful to display a list of terms and descriptions or a list of FAQ and answers <dl> Contains the description list <dt> Contains a term/phrase/sentence Configures empty space above and below the text <dd> Contains a description of the term/phrase/sentence Indents the text Configures empty space above and below the text 57

58 Description List Example <dl> <dt>ip</dt> <dd>internet Protocol</dd> <dt>tcp</dt> <dd>transmission Control Protocol</dd> </dl> Demo 58

59 Special Characters Display special characters such as quotes, copyright symbol, etc. Character Code < < > > & & 59

60 Div Element Configures a structural block area or division on a web page with empty space above and below. Can contain other block display elements, including other div elements <div>home Services Contact</div> Demo 60

61 HTML5 Structural Elements header Element <header></header> Contains the web page document s headings nav Element <nav></nav> Contains web page document s main navigation main Element <main></main> Contains the web page document s main content footer Element <footer></footer> Contains the web page document s footer 61

62 HTML5 Structural Elements <body> <header> document headings go here </header> <nav> main navigation goes here </nav> <main> main content goes here </main> <footer> document footer information goes here </footer> </body> 62

63 Anchor Element Specifies a hyperlink reference (href) to a file Text between the <a> and </a> is displayed on the web page. <a href="contact.html">contact Us</a> href Attribute Indicates the file name or URL Demo 63

64 Absolute & Relative Hyperlinks Absolute link Link to a different website <a href=" Relative link Link to pages on your own site <a href="index.htm">home</a> 64

65 Hyperlink Automatically launch the default mail program configured for the browser If no browser default is configured, a message is displayed <a href= mailto:me@gmail.com >me@gmail.com</a> 65

66 Writing Valid HTML Check your code for syntax errors Benefit: Valid code more consistent browser display W3C HTML Validation Tool Put <!DOCTYPE html> as first line in html file (HTML5) 66

67 67

68 68

69 69

70 70

71 71

72 72

73 73

74 74

75 75

76 76

77 77