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