Lecture 1 - Comm Lab: Web @ ITP

Communications Lab :: Web Lecture 1: Introduction / HTML

Course Instructor Ruxy Staicut Email : ruxy@nyu.edu 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 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

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 I'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 >

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 Download the HTML template at the resources section on ruxystaicut.com/itp Open the file you downloaded in Komodo Edit 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

Lecture 1 - Comm Lab: Web @ ITP

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Lecture 1 - Comm Lab: Web @ ITP (20)

Recently uploaded (20)

Lecture 1 - Comm Lab: Web @ ITP