IT350 Web & Internet Programming Fall 2016 Set 2: Introduction to HTML5 Introduction and Editing HTML5 • HTML 5 (HyperText Markup Language 5) – A markup language that specifies the structure and content of documents – Separates document presentation from information – Standard defined by W3C • HTML documents – Source-code form – Text editor (e.g. Notepad++, Wordpad, emacs, etc.) – .html or .htm file-name extension – Web server – stores HTML documents – Web browser – requests HTML documents 1
Basic Syntax <a href =“links.html”> Useful links </a> <br /> or <br> Example main.html (1 of 1) 2
W3C HTML5 Validation Service • Validation service ( validator.w3.org ) – Checking a document’s syntax – Provide URL (not intranet), upload file, or direct input • Local validation service • http://mope.cs.usna.edu:8888 Block vs. inline tags in HTML5 • Block tags – Start their content on a new line • Inline tags – Their content continues on the same line • Restrictions – Inline tags (and text) must be nested inside block tags, not directly under <body> or <form> – Block tags cannot be nested inside inline tags ILLEGAL:<em> <h1> Foo </h1> </em> 3
Headers – h1 to h6 Linking • Hyperlink – References other sources such as HTML documents and images – Both text and images can act as hyperlinks – Created using the a (anchor) element • Attribute href – Specifies the location of a linked resource • Link to e-mail addresses using mailto: URL 4
Relative vs. Absolute Links Absolute links <a href =“http://www.usna.edu/CS/”>Computer Science Dept</a> <a href =“http://www.nytimes.com”> NYT </a> Relative links <a href =“textbooks.htm”>Textbooks</a> <a href =“../textbooks.htm”>Textbooks</a> <a href =“../common/dogs.html”>More on dogs</a> 5
Images picture.html (1 of 1) Lists • Unordered list element ul – Creates a list in which each item begins with a bullet symbol (called a disc) – li (list item) • Entry in an unordered list • Ordered list element ol – Creates a list in which each item begins with a number • Lists may be nested to represent hierarchical data relationships 6
links2.html (1 of 1) Exercise #1 – Correct any invalid HTML 5 syntax <!DOCTYPE html> <!-- An example file <!-- Our first Web page --> <html> <body> <h1> Welcome to <b> IT350! </h1> </b> <h2> Today’s Agenda </h2> <li> XHTML <li> JavaScript </body> 7
Exercise #2 – Correct any invalid HTML 5 syntax <!DOCTYPE htm> <html> <title>Internet and WWW How to Program - Welcome</title> <body> <img scr = "xmlhtp.jpg" height = "238" width = "183" > <h1 align=“center”>Under construction</h1> </body> </html> HTML5 / XHTML (part 1) • Documents should be “well - formed” 1. Required : All tags must properly nest 2. Should I close my tags? • Some tags must be closed. (ul, form, div) • Some tags don’t have to be closed. (p, li, body) • Some tags cannot be closed (void elements). (br, img, input) 3. Recommended : All start tags should be closed unless void 8
HTML 5 / XHTML (part 2) • Rec : Tag and attribute names should be lowercase • Rec : Attribute values should be double-quoted Use id instead of name • <a name=bottom> Stuff </a> <a id=“bottom”> Stuff </a> <h1 id=“ships”> … </h1> HTML 5 / XHTML (part 3) • Many “style” tags/attributes removed http://webdesign.about.com/od/htmlxhtmltutorials/l/bltags_deprecat.htm • What to do? 9
HTML 5 / XHTML (part 4) • Frames allowed in HTML4, XHTML 1.0… – But removed in XHTML 1.1, HTML 5 • A few more technical differences… – See http://www.w3.org/TR/html5-diff/ Exercise #3 – Correct any invalid HTML 5 syntax <html> <head> <title>Internet and WWW How to Program - Links</title> </head> <body> <b> <h1>Here are my favorite links</h1> </b> <p><A href = "http://www.yahoo.com">Yahoo!</A></p> <p><A mailto = "webmaster@ussmichigan.org">Webmaster</A></p> </body> </html> 10
Exercise #4 – Correct any invalid HTML 5 syntax <!DOCTYPE html> <html> <head> <title>Best features of the Internet</title> </head> <body> <ul> <li>Meet new people from around the world.</li> <li>Access to new media as it becomes public: </li> <ul> <li>New games</li> <li>New applications & software </ul> <li>Search engines</li> </ul> </body> </html> Web Resources • Google • www.w3.org/TR/html5 • http://www.w3schools.com/html/default.asp • validator.w3.org 11
Lab Accounts (on mope) • Mapping web-server account: – Talk to Bonnie to set up password – Start->Computer : Map Network Drive (pick drive W) • \\mope.academy.usna.edu\mXXXXXX • Check the “Reconnect at login” box. • Check the "Connect using different credentials" • Click on "Finish" • Fill in Username: mope\mXXXXXX • Password: whatever you set up with Bonnie • Click "OK“ • Set up the web server: – ssh into mope.academy.usna.edu (use putty) – Create public_html directory (mkdir public_html) – Change permissions for directory to allow web access (setfacl -dm u:www-data:rx public_html) (setfacl -m u:www-data:rx public_html) • URL for each student website on the department web server: http://mope.academy.usna.edu/~mXXXXXX 12
Recommend
More recommend
