Introduction to Web Development in HTML

1. Introduction to Web Development in HTML Web module day 1 IS 201

2. What you will need for this module • Reading: “Beginning Web Development in HTML and CSS” • Found in your course packet • It will instruct you to create a home page for your website which also includes the web page you create based on the lectures • Laptop (or be in a computer lab for class) • Software • Notepad • Microsoft Expression Web (beginning next class period) • If you already have web experience and prefer a different WYSIWYG editor, no problem • Microsoft Expression Design (optional; for image editing) • Again, if you already have experience and prefer Photoshop, Photoshop Elements, GIMP, Windows Paint, etc., no problem • Web browser • Google Chrome, Firefox, Microsoft Internet Explorer, Safari, etc. • Photo • You’ll need a personal photo (in electronic form) that you’d like to include on your website • Your resume (either in paper or electronic form) • If you don’t have one, you’ll need your past work, education, skills, achievements, and reference info • Access to your IS 201 web server to host your website • See document titled “PostingFilestotheWebServer.pdf” on course website or “Posting Your Website to the IS Web Server” in your bookstore packet

3. Learning Objectives 1BWD = “Beginning Web Development in HTML and CSS” 2 PF = “Posting Files to the IS 201 Web Server”

4. Introduction • Best way to learn web development is to do it • Open Notepad++ (or other ASCII text editor) • Start -> All Programs -> Accessories -> Notepad • Write the following code: • Save it as “resume.html” into a new folder called “My Website” • If you already created this folder after working through the packet reading, just place this file in the root of your “My Website” folder

5. HTML: First Web Page • Navigate to your website folder and open “resume.html” • Assuming you have a web browser installed on your computer (Internet Explorer, Firefox, Chrome, Safari, etc.), you should see a window open like this: • If this is what you see, then congratulations! • You are now an HTML web developer

6. HTML: What is it? • The code you just created is part of the Hyper-Text Markup Language (HTML) • HTML: the primary markup language for displaying web pages and other information in a web browser • Not a programming language • Doesn’t calculate totals • Doesn’t validate forms • Doesn’t access databases • Simply defines (i.e. “marks up”) content • E.g. this is a paragraph, this is an image, this is a title, this is a line break, this is a link to another page/image/document, this is a web page section, this is a web page header/footer/main body, etc.

7. HTML: Related Technologies • Internet • Global system of interconnected computers and networks • World Wide Web • Network of interlinked web pages (a.k.a. “hypertext documents”) • Web browsers • Software used to read HTML documents and display content

8. HTML: Standards • Standards are critical to the success of technologies • Why? • What kind of problems result from the lack of standards? • Who forces browser makers to adhere to standards? • Answer: nobody…other than “the market” • What kind of problems can result?

10. HTML: Standards • The Internet, WWW, and HTML each follow standards • Internet • E.g. TCP/IP • Internet Engineering Task Force (IETF) • WWW • E.g. HTTP, FTP, HTTPS • World Wide Web Consortium (W3C) • HTML • HTML1, 2, 3, 4, 4.01, 5 • HTML 5 doesn’t become an official standard until 2014. The vast majority of web pages still adhere to 4.01 or older. • As a result, we teach HTML 5 standards with some backwards compatibility to 4.01 • XHTML: was thought to be the next standard after HTML 4.01, but no longer • If you can’t beat ‘em (i.e. force them to accept a “better” standard), join ‘em (create a new standard which better fits with the way the majority of the web is developed) • Also set by the W3C

11. HTML: Standards • In this class, we will follow standards • But to do that, you must tell the browser which standard your page will follow. • Do that by adding the following code: • <!DOCTYPE html> tells the browser you’re going to follow HTML 5 standards

12. HTML: Standards • How do you make sure your code is HTML5 compliant? • Open another browser tab: http://validator.w3.org • Click the “Validate by Direct Input” tab and paste your code • Click the “Check” button

13. HTML: Standards • Don’t forget, all of your work must meet HTML standards • Yes, that means your project must be HTML 5 compliant • Yes, your quizzes and test will be based on HTML 5 • So check your code often

14. HTML: Publishing Web Pages • Right now, your new resume web page lives on your computer • Nobody can see it but you • For people to see it, it must exist on a web server • A web server is just a computer that has special software for making certain folders and files safely available to some or all people over the WWW. • E.g. Apache, Microsoft IIS, etc. see comparison

15. HTML: Publishing Web Pages • Hosting providers such as godaddy.com, brinkster.com, discountasp.net, etc. rent web server space • They can also help you register a domain name which is part of a URL • URLs, or Uniform Resource Locator is what we refer to as a web address • http://www.iamawesome.net/index.html • http:// refers to the protocol that is used to transfer the web page • www.iamawesome.netrefers to the global address that can be used to locate anything on the web • /index.html refers to the absolute path to the page you are looking for from the root folder

16. HTML: Publishing Web Pages • Web pages and other files are commonly uploaded to web servers using another web protocol: FTP • FTPis a protocol somewhat similar to HTTP in that it allows the transfer of files over the WWW. • While HTTP is used to access all web pages over a browser, FTP can be accessed via the command line or its own user interface • Best way to learn it is to do it: • Place your new website on your IS 201 web space • Either follow along with me or follow the instructions in your packet called “Posting your website to the IS 201 web server”

17. HTML: Elements • Back to HTML; look at your resume.html file in Notepad • Those “tags” you created are called elements • HTML elements are used to define the content of your web pages • Always begins with “<” and ends with “>” • Typically (but not always) includes an opening tag (e.g. <html>) and a closing tag (e.g. </html>) denoted by a preceding “/” • Content lives in between the tags

18. HTML: Element Definitions • <!DOCTYPE html> - http://www.w3schools.com/html5/tag_doctype.asp • This tag simply tells all browsers that this web page is based on the HTML 5 standard. This always appears on line 1. • <html></html> - http://www.w3schools.com/html5/tag_html.asp • Everything within these tags is part of the HTML page content. What goes outside of these tags other than <!DOCTYPE html>? Certain types of code can exist outside of these tags, but we won’t cover those in this class. For now, everything you need to know will exist inside of these tags. • <head></head> - http://www.w3schools.com/html5/tag_head.asp • Everything within these tags is web page metadata—or information about the web page. None of the content here will directly appear in the body of the web page. • <title></title> - http://www.w3schools.com/html5/tag_title.asp • The title tag includes the text which appears on the title bar of the browser or the tab or the browser window. • <body></body> - http://www.w3schools.com/html5/tag_body.asp • Everything within the body tag appears directly in the body of the web page • In HTML 5, <html>1, <head>, <body> are no longer necessary. However, it is not incompliant either. So use it because 99% of the web still does. • 1<html> is still necessary if you are using AppCache

19. HTML: Spacing Matters • Notice in your code that some tags are nested inside of others • Meaning that the opening <> and closing </> tag of one element are both inside of the opening and closing tag of another element • Therefore, we space/tab the nested element • Spacing matters for people, not for browsers • In other words, your new web page would look exactly the same as it does now, even if the code looked like this:

20. HTML: Spacing Matters • However, what’s the problem if your code looks like that? • You’ll get a bad grade! (and it’s tough to troubleshoot) • Therefore, standardize your nesting

21. HTML: Spacing Matters • Remember, a nested element must be fully encapsulated by the parent element (required by HTML 4 & 5) • Proper nesting helps you to identify nesting errors • Notice how the incompliance is easier to spot in (b) than (c)

22. HTML: Web Project Description • Now that you understand the basic structure of HTML code, the importance of standards, and the nesting and spacing rules, you’re ready to continue learning HTML elements • However, before we continue, let’s pause once more and describe the end goal of this web module—your HTML project

23. HTML: Web Project Description • Basically, you’ll need to create a website with at least 3 pages: • Home page (created as you complete the reading), should include: • Navigation to the other pages in the site • Your photo and contact information you are comfortable with making publicly available • Either a personal statement, goal statement, or mission/vision statement. This is often included on a resume, but it will remain on the home page of this site. • Resume(started in class today, finished on your own), should include: • Navigation to the other pages in the site • Only these four sections in this order: • Education, Experience, Skills and Certifications, Awards, References (“Available upon request”—do not put other’s contact info on the web) • Links within each section to the websites of your university, employers, cert., awards • Personal interests(created on your own as homework), should include: • Navigation to the other pages in the site • Information about hobbies, non-professional achievements (e.g. hiked Mt. Everest, ran marathon, etc.), and anything that might impress or interest potential employers. • Nothing that you want to keep private. It is okay to share personal interests, but don’t tell them where you live, how much money you have, etc.

24. HTML: Elements Continued • Now that you know you’ll need to create two other pages (home page, interests page) in addition to the one you’ve started today (resume page), let’s create links/navigation • Add the following code to your resume within Notepad: • Then be sure to resave it; refresh your browser window

25. HTML: Elements Continued <h1> <a> • <h1></h1> - http://www.w3schools.com/html5/tag_hn.asp • Heading 1. This element does three things. First, it will make the text within it bold. Second, it increases the size of the text to 24pt (which equals 32px). Third, it adds a double space both before and after the text. You’ll notice that you can also use <h2>, <h3>, <h4>, <h5>, and <h6> as well which each get progressively smaller. • <a></a> - http://www.w3schools.com/html5/tag_a.asp • This is called the anchor tag. It is what allows text to act as a link to another web page or another location within the same web page.

26. HTML: Attributes -> href=“” • Notice that the <a> tag has a unique feature that you haven’t seen. • There is a space after the “a” followed by the attribute href. • Attributesallow you to customize the behavior, position, or appearance of the HTML element it is included within. • Each HTML element has its own unique set of available attributes. • Some attributes are common among all elements whereas others are unique to specific elements. • For example, the attribute href refers to the hyperlink reference, or location, of the target page. Therefore, if you click on the text “Home” in the browser window, your browser will redirect you (or in this case, refresh) to the index.html page. However, you would not use the href attribute in the <h1> tag because it is not a valid attribute of <h1>.

27. HTML: Attributes • There are certain rules for using attributes. • First, there must exist at least one space between the element name and the attribute name. Example error (no space between “a” and “href”): • Second, all attributes have a name and a value. In this case, “href” is the name and “index.html” is the value. There must exist an “=” sign between the two with no spaces before or after the “=”. • However, the double quotes in this example are technically optional in HTML 5, but should still be included because of the many advantages.

28. HTML: Block vs. Inline Elements • Notice that even though the three new <a> tags you’ve added in Notepad appear on different lines, they all appear on the same line in your browser. • This is because the <a> element is an inline element whereas <h1> is a block element. • What is the difference? • The simplest way to distinguish between them might be that block elements contain one or more hard line breaks (c.f., hard returns in Word) either before or after the element’s inner content while inline elements contain no line breaks, i.e. they can be used inline in a sentence. • However, there’s more to it than just that. Block elements are rendered as a “block” meaning that it will occupy as much space horizontally as it can find on the page. For example, no text can exist to the left or right of the text “Your Name” unless it was to appear inside of the <h1> element.

29. HTML: Elements Continued <br> • If you want the three links in to appear on separate lines, you will need to use the <br> element to force the inline <a> elements onto different lines. Add the <br> tags like this: • <br> - http://www.w3schools.com/html5/tag_br.asp • Forces a single line break.

30. HTML: Broken Links • Next, click “About me” link. You’ll get an error like: • That’s because the file you’re linking to doesn’t exist • Unless you’ve already completed the packet tutorial • Create all of your project files now…even if they are just blank files. Like this:

31. HTML: Elements Continued <img> • Hit the back button in your browser and click your link again to make sure you created your index.html and interests.html pages correctly • Now, let’s learn a new tag. Add the following code:

32. HTML: Elements Continued <img> • No image shows up, right? We need to add it. • Copy a personal photo to your website main root folder and rename it “photo.jpg” • If it’s not a .jpg file, just leave the extension as is and change the HTML code to match • Refresh your resume.html page in your browser • Basically, your image link was broken just like your <a> link was previously • However, your image may be too large. Therefore, add the following attributes to your <img> element:

33. HTML: Elements Continued <img> • <imgsrc=“filename” width=“size_in_pixels” height=“size_in_pixels” alt=“Image Title”> • Defines an image in an HTML page. • The width and height attributes will manually set the size of the image in pixels1. The src attribute (like the href attribute of an <a> tag) specifies the location of the image. • The alt attribute specifies the alternate text, which should be displayed if the image link is unexpectedly broken. Try breaking your image src link to see what this does (see image to the right) • Screen readers that help disabled persons navigate web pages also read this text. • 1 It is important to understand that this will not change the actual size of the native image file. It will only adjust how large the image is on the HTML page. Also, by setting either the height or the width, the other will be adjusted automatically

34. HTML: Relative References • The links you’ve used for <a> and <img> tags are relative references • i.e. The browser is looking for “photo.jpg” in a location relativeto the file that is linking to it—the resume.html file. • To better understand relative reference navigation, let’s organize your website folder • Create an “images” folder, “resume” folder, and “interests” folder • Save and close your “resume.html” file in Notepad and Browser • Move resume.html to the resume folder • Move interest.html to the interest folder • Move photo.jpg to the images folder

35. HTML: Relative References • Navigate to your resume.html file and open it. • Test out the links; nothing works right? • That’s because we’ve used relative references • After changing file structure, each page no longer exists in the same location relative to other files like it used to. • Anatomy of a reference: • “foldername/foldername/filename.html” • “../foldername/foldername/filename.jpg” -> “../” = go up one level • “../../filename.png”

36. HTML: Default Pages • So let’s fix those links • Reopen your resume.html file (in Notepad) • Edit the code as below (don’t forget the image), save, refresh browser: • What’s going on with the Home page reference? • Web servers implement “default pages” • E.g. index.html, index.htm, index.php, index.aspx, default.html, default.htm • When browser requests a folder rather than a file, web server sends default page • Will that link work if you’re viewing your web page on your computer rather than on the web server? • No, so make sure you’re viewing/editing your pages directly on your web server

37. HTML: Relative References Practice • What should the attribute/value pair look like to link from: • The index.html page in the main WebFolder to the movies.html page in the same folder? • Answer: href=“movies.html” • The selected index.html page in the test folder to the resume.html page in the homework folder? • Answer: href=“../resume.html” • The index.html page in the WebFolder to the up.jpg image in the images folder? • Answer: src=“images/up.jpg” • The selected index.html page in the test folder to the bullet.gif image in the menu folder? • Answer: src=“../../images/menu/bullet.gif”

38. HTML: Absolute References • There is an alternative way to reference/like between files • An absolute reference requires that you specify the entire URL of the file you are linking to. • e.g. http://www. yourwebsitename.com/resume.html • Try changing the <img> src=“” attribute to: • http://www.rothcpa.com/misc/20080207-1-thumb.jpeg • Save your file and refresh the browser • You look good!!! (now undo it) • You can also use absolute references to files on your own site • E.g. http://www.yourwebsitename.com/images/photo.jpg • Why use absolute references? • Why use relative references?

39. HTML: Elements Cont. <p><ol><ul><li> • Alright, time to fill out your resume. Have your info ready? • Use the <p>, <ol>, <ul>, and <li> tags to finish it:

40. HTML: Elements Continued • <p></p> - http://www.w3schools.com/html5/tag_p.asp • The paragraph element automatically adds a double-space after the text and other elements inside of the tag. • <ul></ul> - http://www.w3schools.com/html5/tag_ul.asp • The unordered list element is used to create bulleted lists. It also adds a double space before and after the content within the tag. The <li> tag is used to add each bullet. • <ol></ol> - http://www.w3schools.com/html5/tag_ol.asp • The ordered list element is used to create numbered lists. It also adds a double space before and after the content within the tag. The <li> tag is used to add each number. • <li></li> - http://www.w3schools.com/html5/tag_li.asp • The list item tag is used to create each of the bullets or numbers inside of the <ul> and <ol> tags. One <li> tag is used for each item in the list.

41. HTML: Resume Web Browser View • Don’t worry too much about styling the resume yet. Just get the content in there. Style is for next time.

42. HTML: Conclusion • Now that you’ve learned enough of HTML to be dangerous, it’s time to move onto web content styling and CSS • Before next time: • Finish your resume.html page completely • If you haven’t already, work through first 19 or 20 pages of the packet reading “Basic Web Development in HTML and CSS” until you reach the Cascading Style Sheets section • That will guide you through creating the home page (index.html) • You can ignore the parts which ask you to create your resume.html page since you’ve already done that in class. • Be prepared for a quiz at the beginning of class which will test your knowledge of the HTML elements and good coding practices (nesting and spacing) you’ve learned so far. No CSS will be included in this quiz (it will be in the next quiz).