it350 web & internet programming fall 2016 - usna.edu · or main.html (1 of 1) example. 3 w3c...
TRANSCRIPT
1
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
2
Basic Syntax
<a href=“links.html”> Useful links </a>
<br /> or <br>
main.html
(1 of 1)
Example
3
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>
4
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
5
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>
6
picture.html
(1 of 1)
Images
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
7
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>
8
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
9
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?
10
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>
11
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
• www.w3.org/TR/html5
• http://www.w3schools.com/html/default.asp
• validator.w3.org
12
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