Chapter 2 - Introduction to HTML5: Part 1

IT350 Web and Internet Programming Chapter 2 - Introduction to HTML5: Part 1 2.1 Introduction / 2.2 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 2.4 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://zee.cs.usna.edu:8888/html5 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 2.5 Headers – h1 to h6 2.6 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 2.7 Images picture.html (1 of 1) 2.9 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>  <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> HTML 5 / XHTML (part 1) • Documents should be “well-formed” 1. Req: All tags must properly nest 2. Rec: All start tags should be closed 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 = "[email protected]">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 • Student Web Server Accounts (zee - Unix) – Mapping web-server account: • Start->Computer : Map Network Drive (pick drive W) • \\zee.academy.usna.edu\mXXXXXX • Check the “Reconnect at login” box. • Click on “Finish” • Username: academy\mXXXXXX – Set up the web server: • Ssh into mope.academy.usna.edu (use putty or other tool) • Create public_html directory (mkdir public_html) • Change permissions for directory to allow web access (setfacl -dm u:www-data:rx public_html) – URL for each student website on the department web server: http://zee.academy.usna.edu/~mXXXXXX 12 .

Chapter 2 - Introduction to HTML5: Part 1

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support