html and web technology - utah valley universityuniverse.tc.uvu.edu/cs2550/notes/l1/lesson1.pdf ·...
TRANSCRIPT
![Page 1: HTML AND WEB TECHNOLOGY - Utah Valley Universityuniverse.tc.uvu.edu/cs2550/notes/l1/Lesson1.pdf · Browser sends additional requests for related resources, like images in the HTML](https://reader034.vdocuments.mx/reader034/viewer/2022050221/5f6657f9cc091c2b9d60eb17/html5/thumbnails/1.jpg)
HTML AND WEB TECHNOLOGY
CS 2550 Dr. Brian Durney
![Page 2: HTML AND WEB TECHNOLOGY - Utah Valley Universityuniverse.tc.uvu.edu/cs2550/notes/l1/Lesson1.pdf · Browser sends additional requests for related resources, like images in the HTML](https://reader034.vdocuments.mx/reader034/viewer/2022050221/5f6657f9cc091c2b9d60eb17/html5/thumbnails/2.jpg)
BECOMING FLUENT IN HTML
JavaScript Program
My Web Page
GENERATE HTML
<html> My Web Page </html>
In this class, we will be writing programs that generate HTML.
You’ll need to be able to check the generated HTML and find problems if it isn’t right. ?
![Page 3: HTML AND WEB TECHNOLOGY - Utah Valley Universityuniverse.tc.uvu.edu/cs2550/notes/l1/Lesson1.pdf · Browser sends additional requests for related resources, like images in the HTML](https://reader034.vdocuments.mx/reader034/viewer/2022050221/5f6657f9cc091c2b9d60eb17/html5/thumbnails/3.jpg)
WYSIWIG Editor
Hidden HTML
My Web Page
TYPECONTENT
BECOMING FLUENT IN HTML
If you use a WYSIWIG editor like Dreamweaver, you won’t become familiar with HTML.
JavaScript Program
My Web Page
GENERATE HTML
<html> My Web Page </html> ?
![Page 4: HTML AND WEB TECHNOLOGY - Utah Valley Universityuniverse.tc.uvu.edu/cs2550/notes/l1/Lesson1.pdf · Browser sends additional requests for related resources, like images in the HTML](https://reader034.vdocuments.mx/reader034/viewer/2022050221/5f6657f9cc091c2b9d60eb17/html5/thumbnails/4.jpg)
BECOMING FLUENT IN HTMLJavaScript Program
My Web Page
GENERATE HTML
<html> My Web Page </html>
If you use a plain-text editor you’ll type in HTML and will learn how to work with HTML.
Plain-Text Editor
<html> My Web Page </html>
My Web Page
TYPEHTML
It’s okay to use an IDE. Just be sure to type in HTML directly.
![Page 5: HTML AND WEB TECHNOLOGY - Utah Valley Universityuniverse.tc.uvu.edu/cs2550/notes/l1/Lesson1.pdf · Browser sends additional requests for related resources, like images in the HTML](https://reader034.vdocuments.mx/reader034/viewer/2022050221/5f6657f9cc091c2b9d60eb17/html5/thumbnails/5.jpg)
WYSIWYGDon’t use WYSIWYG editors like Dreamweaver or word processors that save documents as HTML.
Get lots of practice working directly with HTML so that you are familiar with HTML and can debug your JavaScript programs that generate HTML.
![Page 6: HTML AND WEB TECHNOLOGY - Utah Valley Universityuniverse.tc.uvu.edu/cs2550/notes/l1/Lesson1.pdf · Browser sends additional requests for related resources, like images in the HTML](https://reader034.vdocuments.mx/reader034/viewer/2022050221/5f6657f9cc091c2b9d60eb17/html5/thumbnails/6.jpg)
BROWSERS
http://www.paulirish.com/2010/high-res-browser-icons/
For this class: Chrome, Firefox, Safari
Make web apps that are not browser-dependent.
Later in the term we will talk about feature testing or object testing
![Page 7: HTML AND WEB TECHNOLOGY - Utah Valley Universityuniverse.tc.uvu.edu/cs2550/notes/l1/Lesson1.pdf · Browser sends additional requests for related resources, like images in the HTML](https://reader034.vdocuments.mx/reader034/viewer/2022050221/5f6657f9cc091c2b9d60eb17/html5/thumbnails/7.jpg)
WORKING WITH LOCAL FILES
Two ways of opening an HTML document:From a web serverFrom a local file
No HTTP status codeBy default Ajax is not allowed
LOCAL FILES
![Page 8: HTML AND WEB TECHNOLOGY - Utah Valley Universityuniverse.tc.uvu.edu/cs2550/notes/l1/Lesson1.pdf · Browser sends additional requests for related resources, like images in the HTML](https://reader034.vdocuments.mx/reader034/viewer/2022050221/5f6657f9cc091c2b9d60eb17/html5/thumbnails/8.jpg)
IMPORTANT HTML TAGS AND CONCEPTS
<html>...</html> Opening and closing tagsSlash in closing tagRoot tag pair
<head>
<body>
<title><ul>
<ol>
<li>
Lists and list elements
<!-- --> Comments
![Page 9: HTML AND WEB TECHNOLOGY - Utah Valley Universityuniverse.tc.uvu.edu/cs2550/notes/l1/Lesson1.pdf · Browser sends additional requests for related resources, like images in the HTML](https://reader034.vdocuments.mx/reader034/viewer/2022050221/5f6657f9cc091c2b9d60eb17/html5/thumbnails/9.jpg)
<a href="..."> Link
<p>
<br>
<h1>
<h2>
<h3>
Headings
Don’t forget the closing tag
<img src="..." alt="...">Image tag, including src, alt, height, and width attributes
<table>
etc.
<tr>
<td>
<hr>
![Page 10: HTML AND WEB TECHNOLOGY - Utah Valley Universityuniverse.tc.uvu.edu/cs2550/notes/l1/Lesson1.pdf · Browser sends additional requests for related resources, like images in the HTML](https://reader034.vdocuments.mx/reader034/viewer/2022050221/5f6657f9cc091c2b9d60eb17/html5/thumbnails/10.jpg)
class="..." class attribute -- styles <div>
<span>
<form>
<input type="...">
<select>
<option>
id="..." id attribute
<button>
![Page 11: HTML AND WEB TECHNOLOGY - Utah Valley Universityuniverse.tc.uvu.edu/cs2550/notes/l1/Lesson1.pdf · Browser sends additional requests for related resources, like images in the HTML](https://reader034.vdocuments.mx/reader034/viewer/2022050221/5f6657f9cc091c2b9d60eb17/html5/thumbnails/11.jpg)
http://universe.tc.uvu.edu/Game/RSSA/index.html
URLS
protocolserver domain name
path name
absolute URL
relative URL
howToPlay.html
What other protocols have you seen?
![Page 12: HTML AND WEB TECHNOLOGY - Utah Valley Universityuniverse.tc.uvu.edu/cs2550/notes/l1/Lesson1.pdf · Browser sends additional requests for related resources, like images in the HTML](https://reader034.vdocuments.mx/reader034/viewer/2022050221/5f6657f9cc091c2b9d60eb17/html5/thumbnails/12.jpg)
URLS
server IP address
port number
query stringcheck.php?userName=Harpo&password=swordfish
http://192.168.0.250:8080/Game/RSSA/index.html
![Page 13: HTML AND WEB TECHNOLOGY - Utah Valley Universityuniverse.tc.uvu.edu/cs2550/notes/l1/Lesson1.pdf · Browser sends additional requests for related resources, like images in the HTML](https://reader034.vdocuments.mx/reader034/viewer/2022050221/5f6657f9cc091c2b9d60eb17/html5/thumbnails/13.jpg)
IP ADDRESSESIP = Internet Protocol
IPv4 address 161.28.117.185
IPv6 address fe80::250:56ff:fe87:3b1dBase 16 digits: 0-9, a-fHexadecimal or hex
Name server: translates domain name to IP address
![Page 14: HTML AND WEB TECHNOLOGY - Utah Valley Universityuniverse.tc.uvu.edu/cs2550/notes/l1/Lesson1.pdf · Browser sends additional requests for related resources, like images in the HTML](https://reader034.vdocuments.mx/reader034/viewer/2022050221/5f6657f9cc091c2b9d60eb17/html5/thumbnails/14.jpg)
HTTPlocalserver computerclient computer
remote
Browser gets URL for a web site
Browser sends HTTP request message
http://www.uvu.edu/index.htmlBrowser gets server information from URL and network lookup
GET http://www.uvu.edu/index.html HTTP/1.1
![Page 15: HTML AND WEB TECHNOLOGY - Utah Valley Universityuniverse.tc.uvu.edu/cs2550/notes/l1/Lesson1.pdf · Browser sends additional requests for related resources, like images in the HTML](https://reader034.vdocuments.mx/reader034/viewer/2022050221/5f6657f9cc091c2b9d60eb17/html5/thumbnails/15.jpg)
HTTPlocalserver computerclient computer
remote
Browser gets URL for a web siteBrowser sends HTTP request message
Server sends back requested resource, along with headers that describe it and
an HTTP status code
content-length: 1278
200 successful 404 not found
![Page 16: HTML AND WEB TECHNOLOGY - Utah Valley Universityuniverse.tc.uvu.edu/cs2550/notes/l1/Lesson1.pdf · Browser sends additional requests for related resources, like images in the HTML](https://reader034.vdocuments.mx/reader034/viewer/2022050221/5f6657f9cc091c2b9d60eb17/html5/thumbnails/16.jpg)
Browser sends additional requests for related resources, like images in the HTML document
HTTPlocalserver computerclient computer
remote
Browser gets URL for a web siteBrowser sends HTTP request message
Server sends back requested resource, along with headers that describe it and
an HTTP status code
![Page 17: HTML AND WEB TECHNOLOGY - Utah Valley Universityuniverse.tc.uvu.edu/cs2550/notes/l1/Lesson1.pdf · Browser sends additional requests for related resources, like images in the HTML](https://reader034.vdocuments.mx/reader034/viewer/2022050221/5f6657f9cc091c2b9d60eb17/html5/thumbnails/17.jpg)
Browser sends additional requests for related resources, like images in the HTML document
HTTPlocalserver computerclient computer
remote
Browser gets URL for a web siteBrowser sends HTTP request message
Server sends back requested resource, along with headers that describe it and
an HTTP status code
Server sends back other resources
![Page 18: HTML AND WEB TECHNOLOGY - Utah Valley Universityuniverse.tc.uvu.edu/cs2550/notes/l1/Lesson1.pdf · Browser sends additional requests for related resources, like images in the HTML](https://reader034.vdocuments.mx/reader034/viewer/2022050221/5f6657f9cc091c2b9d60eb17/html5/thumbnails/18.jpg)
HTTP TRANSACTIONSBrowser’s request
Server’s response
Always initiated by clientThis is a problem for some kinds of applications, like a text chat: there’s no way for the server to notify a client if there’s a new message.
![Page 19: HTML AND WEB TECHNOLOGY - Utah Valley Universityuniverse.tc.uvu.edu/cs2550/notes/l1/Lesson1.pdf · Browser sends additional requests for related resources, like images in the HTML](https://reader034.vdocuments.mx/reader034/viewer/2022050221/5f6657f9cc091c2b9d60eb17/html5/thumbnails/19.jpg)
HTTP TRANSACTIONSBrowser’s request
Server’s response
HTTP is a stateless protocolThe server doesn’t remember anything about previous requests from any client.
![Page 20: HTML AND WEB TECHNOLOGY - Utah Valley Universityuniverse.tc.uvu.edu/cs2550/notes/l1/Lesson1.pdf · Browser sends additional requests for related resources, like images in the HTML](https://reader034.vdocuments.mx/reader034/viewer/2022050221/5f6657f9cc091c2b9d60eb17/html5/thumbnails/20.jpg)
THIS IS NOT A CLASS IN GRAPHIC DESIGN......but you should be aware of some design issues and pay attention to the design of sites that you see on the web.
What works?What doesn’t work so well?How would you change the site?
![Page 21: HTML AND WEB TECHNOLOGY - Utah Valley Universityuniverse.tc.uvu.edu/cs2550/notes/l1/Lesson1.pdf · Browser sends additional requests for related resources, like images in the HTML](https://reader034.vdocuments.mx/reader034/viewer/2022050221/5f6657f9cc091c2b9d60eb17/html5/thumbnails/21.jpg)
Major changes from earlier versions of HTML
<audio>
<video>
<canvas>
offline applications
local storage
web sockets
http://diveintohtml5.info
geolocation