IT350 Web & Internet Programming Fall 2016 Set 2: Introduction - - PDF document

▶
it350 web internet programming fall 2016
SMART_READER_LITE
LIVE PREVIEW

IT350 Web & Internet Programming Fall 2016 Set 2: Introduction - - PDF document

Jan 11, 2024 49 likes •169 views

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

slide-1
SLIDE 1

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

slide-2
SLIDE 2

2

Basic Syntax

<a href=“links.html”> Useful links </a> <br /> or <br>

main.html (1 of 1)

Example

slide-3
SLIDE 3

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>

slide-4
SLIDE 4

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
slide-5
SLIDE 5

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>

slide-6
SLIDE 6

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

slide-7
SLIDE 7

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>

slide-8
SLIDE 8

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
slide-9
SLIDE 9

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?
slide-10
SLIDE 10

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 = "webmaster@ussmichigan.org">Webmaster</A></p> </body> </html>

slide-11
SLIDE 11

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

  • Google
  • www.w3.org/TR/html5
  • http://www.w3schools.com/html/default.asp
  • validator.w3.org
slide-12
SLIDE 12

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