Lecture 1 - Comm Lab: Web @ ITP
-
Upload
yucefmerhi -
Category
Technology
-
view
1.221 -
download
2
description
Transcript of Lecture 1 - Comm Lab: Web @ ITP
Communications Lab :: Web
Lecture 1: Introduction / HTML
Course Instructor
• Ruxy Staicut
• Email: [email protected]
• Office hours: Wednesdays 7-9 pm in the Adjunct Office
• Resident Help Sessions: Thursdays 3:30-5 pm, Room 50
Course Information
• Schedule Mon 6:30 pm - 9 pm.
• Location Room A / B
• Course website http://ruxystaicut.com/itp
A Little Bit About Yourself...
• Name• Background• Experience with HTML / CSS / JavaScript /
Sinatra?
Today
• Class introduction, schedule
• You are here! Where are we on the ITP Technology Map?
• Web pages: How do they work?
• HTML elements: Let's build a web page!
Course Goals
• Learn to lay out and style a web page
• Make the page responsive to the user
• Embed a form for taking user input
• Create a simple server to receive, store, manipulate, and return that input
Schedule
• Week 1, September 12th: Introduction/HTML • Week 2, September 19th: HTML Forms and CSS• Week 3, September 26th: Sinatra Introduction
and Routes• Week 4, October 3rd: Sinatra and DataMapper• Week 5, October 17th: JavaScript• Week 6, October 24th: Advanced Sinatra• Week 7, October 31st: Show Sites
Assignments
There will be readings assigned to each lecture. It is very important that you read what is assigned. They are additional tutorials that will help you understand the material in more depth.
The assignments are individual.
You need to hand in the assignment for each class, otherwise it will be registered as a late assignment.
Grading
Attendance and Participation: 35%
Assignments and presentations: 40%
Final Project: 25%
Software Required for Class
• Komodo Edit• Chrome browser• Cyberduck
Map: You Are Here
• 2D Design• Programming Language• UI / UX
TODO: What other things are there on this map for other courses?Picture by courtesy of Aram Bartholl
Map: You Are Here
• Client / Server Communication • Data Structures
Map: You Are Here
• Markup vs. Programming Language
Markup
1. Creates structure– Information, not
instructions– Declarative– Tree-like structure– More easily manipulated
than programming languages
– Examples: HTML, XML, Wikipedia's Markup
Programming Language
1. Communicates instructions to a machine
– Processes and uses information
– Sequence of commands, imperative
– Examples: JavaScript, Sinatra
HTML
• On the client side, the HTML sits on the webpage.
• It provides structure and organization for the layout of the page
What Does HTML Look Like?
<html> Oh hai. I'm the content of a web page.</html>
What Is An HTML Tag?
• It is an element contained between two angle brackets: <html>. This is also called an opening or start tag.
• Each tag that is opened, needs to have a closing tag or end tag. This contains a slash sign like this: </html>
• Together, the two create a block which may contain content, as in the previous example.
<html> Oh hai. I'm the content of a web page. </html>
Nested Tags - Head and Body
<html> <head> The head contains the items that prepare the page, mostly things you don't see. </head>
<body> This is the main part of the page, visible. </body></html>
Adding Title and Paragraphs
<html> <head> <title> My web page </title> </head>
<body> <p>Hi, welcome to my new webpage!</p> <p>Another paragraph!</p> </body></html>
Emphasize and Strong
<em>I'm italic.</em> ==> I'm italic
<strong>I'm bold.</strong> ==> I'm bold
Headings
<h1>I am the greatest.</h1><h2>I am number 2, the second greatest.</h2><h3>I came in third, smaller than 1 and 2</h3> ....<h6>I am the smallest heading, a heading nonetheless.</h6>
Links
<a href="http://itp.nyu.edu">Visit ITP</a>
This turns into... Visit ITP
Images
<img src="cute_cat.jpg" width="104" height="142" />
Width and Height is in pixels.
NOTE: cute_cat.jpg has to be located in the same directory as the html file.
Relative Paths
<img src="images/cute_cat.jpg" width="104" height="142" />
In this case, the "images" directory has to be in the same directory as the html.
Example:
Relative Paths
<img src="../images/very_cute_cat.jpg" width="104" height="142" />
Putting ../ in front of a path means go into parent directory.
Example:
Lists - Ordered
1.I'm the first in the list.2.I'm the second in the list.
HTML:<ol> <li>I'm the first in the list.</li> <li>I'm the second in the list.</li> ....</ol>
Lists - Unordered
• I'm an element in the list• I'm an element in the list
HTML:<ul> <li>I'm an element in the list</li> <li>I'm an element in the list</li> ...</ul>
Nesting
<h2>Today's News</h2> <p> Citing "massive overvaluation" of the <a href="wikipedia.org/wiki/Swiss_franc">Swiss franc</a>, the <a href="wikipedia.org/wiki/Swiss_National_Bank">Swiss National Bank</a> <strong> <a href="wikipedia.org/wiki/Swiss_franc#2011_appreciation">introduces</a> </strong> a minimum exchange rate with the <a href="wikipedia.org/wiki/Euro">euro</a>. </p>
Nesting
<h2>Today's News</h2> <p> Citing "massive overvaluation" of the <a href="/wiki/Swiss_franc">Swiss franc</a>, the <a href="/wiki/Swiss_National_Bank">Swiss National Bank</a> <strong> <a href="/wiki/Swiss_franc#2011_appreciation">introduces</a> </strong> a minimum exchange rate with the <a href="/wiki/Euro">euro</a>. </p>
Exercise
1. Download the HTML template at the resources section on ruxystaicut.com/itp
2.Open the file you downloaded in Komodo Edit 3.Save it in a new folder
You should see...
<!DOCTYPE html><html> <head> <meta charset=utf-8 /> <title>Your Title Goes Here</title> </head> <body> Content goes here </body></html>
What does all this mean?
• Open the HTML file you just saved in Chrome (File > Open File... )
• Modify the file in Komodo Edit - for example, change the text!
• Save it• Refresh the browser
Let's fill this page up
Tell me a little about yourself. We'll add... • a heading, • a paragraph, • an image• a couple of links• italic and bold text
Upload your file to FTP
FTP stands for File Transfer Protocol. • Open up Cyberduck and connect to your account• Make a new folder for Comm Lab Web and put your
new html file there• Upload your image here as well• Go to the url of your page
To continue...
1. Modify the page again (add another paragraph, heading, link, image, etc) 2. Save 3. Open HTML file in browser: did you see your changes?
4. Upload your file again to FTP through Cyberduck.
Readings and Tutorials
• Programs vs. markup or why HTML authoring is not programming:
http://www.cs.tut.fi/~jkorpela/prog.html• W3Schools HTML Tutorial:
http://www.w3schools.com/html/• HTML Dog Tutorials - Beginner:
http://htmldog.com/guides/
** The tutorials are required for your assignment.
Assignment for Next Week
• Check your assignment for this week on the schedule at ruxystaicut.com/itp/
• The assignment is due next class.
• Print your assignment to turn it in.
• Don't forget to link on the class wiki to your files.
Next Time...
• HTML Forms • Styling HTML with CSS - fonts, colors, backgrounds
• CSS box model