Download to read offline
Lecture 1 - Comm Lab: Web @ ITP
- 1. Communications Lab ::Web Lecture 1: Introduction / HTML
- 2. Course Instructor RuxyStaicut Email : ruxy@nyu.edu Office hours : Wednesdays 7-9 pm in the Adjunct Office Resident Help Sessions : Thursdays 3:30-5 pm, Room 50
- 3. Course Information Schedule Mon 6:30 pm - 9 pm. Location Room A / B Course website http://ruxystaicut.com/itp
- 4. A Little BitAbout Yourself... Name Background Experience with HTML / CSS / JavaScript / Sinatra?
- 5. 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!
- 6. Course Goals Learnto 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
- 7. 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
- 8. Assignments There willbe 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.
- 9. Grading Attendance andParticipation: 35% Assignments and presentations: 40% Final Project: 25%
- 10. Software Required forClass Komodo Edit Chrome browser Cyberduck
- 11. Map: You AreHere 2D Design Programming Language UI / UX TODO: What other things are there on this map for other courses? Picture by courtesy of Aram Bartholl
- 12. Map: You AreHere Client / Server Communication Data Structures
- 13. Map: You AreHere Markup vs. Programming Language Markup Creates structure Information, not instructions Declarative Tree-like structure More easily manipulated than programming languages Examples: HTML, XML, Wikipedia's Markup Programming Language Communicates instructions to a machine Processes and uses information Sequence of commands, imperative Examples: JavaScript, Sinatra
- 14. HTML On theclient side, the HTML sits on the webpage. It provides structure and organization for the layout of the page
- 15. What Does HTMLLook Like? < html > Oh hai. I'm the content of a web page. < /html >
- 16. What Is AnHTML 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 >
- 17. 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>
- 18. Adding Title andParagraphs <html> <head> <title> My web page </title> </head> <body> <p>Hi, welcome to my new webpage!</p> <p>Another paragraph!</p> </body> </html>
- 19. Emphasize and Strong< em >I'm italic.< /em > ==> I'm italic < strong >I'm bold.< /strong > ==> I'm bold
- 20. 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 >
- 21. Links < ahref =" http://itp.nyu.edu ">Visit ITP</ a > This turns into... Visit ITP
- 22. Images < imgsrc =" 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.
- 23. 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:
- 24. 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:
- 25. Lists - OrderedI'm the first in the list. 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 >
- 26. Lists - UnorderedI'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 >
- 27. Nesting <h2> Today'sNews </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>
- 28. Nesting <h2> Today'sNews </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>
- 29. Exercise Downloadthe HTML template at the resources section on ruxystaicut.com/itp Open the file you downloaded in Komodo Edit Save it in a new folder
- 30. You should see...<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title> Your Title Goes Here </title> </head> <body> Content goes here </body> </html>
- 31. What does allthis 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
- 32. Let's fill thispage up Tell me a little about yourself. We'll add... a heading, a paragraph, an image a couple of links italic and bold text
- 33. Upload your fileto 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
- 34. 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.
- 35. Readings and TutorialsPrograms 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.
- 36. Assignment for NextWeek 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.
- 37. Next Time... HTMLForms Styling HTML with CSS - fonts, colors, backgrounds CSS box model