Intro and HTML

1. Intro and HTML CS/COE 1520 Jarrett Billingsley

2. Today: • administrivia (the "first day" crap) • a roadmap for this course • a brief overview of some of the languages we'll learn • and an intro to HTML.

3. Administrivia

4. hi • you can just call me Jarrett • jarrett@cs.pitt.edu • pitt.edu/~jfb42 • this course is new to me too! • I send announcements through courseweb which come thru email • announcements/grades are the only things I use courseweb for

5. Textbook (optional) • Programming the World Wide Web, Eighth Edition(Sebesta) • it's got some good info in it • it's got some outdated info in it • I'm not a Book Person so

6. Grading • there is no such thing as attendance • 5 projects: 50% • lowest grade is weighted 6%, others 11% • 2 exams: 45% • lower grade worth 20%, other 25% • exams are independent – final is not cumulative • participation: 5% • weekly little (ungraded) quizzes/feedback • hard to lose points here unless you obviously dgaf about the course • must get at least a 73% to get a C, in order to pass

7. Teaching philosophy • I'm more of a "big picture" teacher • I care about high-level concepts and problem-solving • you won't get exam questions about function parameters • you are a student. you are supposed to be confused. • I wanna help you understand!!!!!! • NO QUESTIONS ARE DUMB!!!!! NEVER BE AFRAID TO ASK THEM!!!! • DON’T STRUGGLE IN SILENCE ON YOUR ASSIGNMENTS!!!!!!! • what is a university setting good for today? • focus, practice, and access to people who know stuff • your friends do not know as much about this stuff as I do

8. Expectations • I trust you! • I try to be accommodating re: extensions • I don’t think most cheaters are being lazy • but you’re an adult, and are responsible for your actions. • religious absences: contact me ASAP • students with disabilities: contact the DRS ASAP • if English is not your first language and you are having trouble understanding something, please ask me!!!!!!!!!! • jokes/comments about sex, gender, race, ethnicity, religion, etc. are inappropriate for class, emails, office hours, chats etc. • being an asshole is exhausting and no one will like you. • have you considered being nice? • consider others' emotional states – they're important too

9. I can tell when you cheat :^) • first time, 0 on the the assignment • second time, fail the course • you can work with one partner on projects, as long as you: • inform me ahead of time, and DO NOT SHARE CODE • don't post your code online • if your enrollment is contingent upon your GPA, don't cheat • if your friend is struggling, don't give them your code • if you're confused, don't cheat or ask your friend, ask me for help • PLEASE • IT'S MY JOBBBBBBBBBBB

10. Intro

11. Where are we going? • there are always two computers involved in a website: internets client(browser) server first half of the course focuses on this side… second half focuses on this side.

12. What the hell is the internet/web, actually • the internet is an ad-hoc global computer network been around in some form since the 1960s Internet the world-wideweb has only been around since ~1991 it's based around hypertext: text with extra features "Web" but there are many internet technologies other than the web.

13. What the hell is a web browser, actually • it has become a cross-platform high-level virtual machine …with a programming environment… it combines a powerful visual layout and graphics engine… …and provides bidirectional communication with servers. internet!

14. "Web applications" • most sites now are just programs that use the browser as a GUI • you might call them an application served over the web… even some "desktop apps" are just a webpage running in a dedicated browser. these would be a pain to write as native apps. but that convenience comes at a performance cost…

15. What the hell is a server, actually • like a server at a restaurant: you ask for it, they bring it to you your $22 gourmet calzone… …but to the client, the server is a black box – it can satisfy the request in any way. KITCHEN server client (browser)

16. C.R.E.A.M. (Code Rules Everything Around Me) • technology does not exist in a void • STEM fields are not safe havens from responsibility/consequences computers and the internet are no longer fads. the code you write can define the boundaries of people's lives. you will be tempted or coerced to write terrible things. remember that you, the engineers, have the real power. not the ones who pay you.

17. User Experience • UX is how it "feels" to use your site/app/program/whatever • most UX these days is terrible. just really bad. • because you are not the customer, you are the product. • persistent, patronizing ads; tracking; and the associated lag • features no one asked for; removal of features everyone liked • "algorithms" instead of people • widespread harassment, conspiracy theories, and hate speech going unchecked because they drive "engagement" • also cause a bunch of programmers designed the interfaces • programmers suck at design, sorry

18. Programming Languages for Web Applicationshey that's the name of the course

19. It's a mess. • the course is called that cause there are just so many Server Browser JSON, XML etc. these are the ones we'll be focusing on.

20. The webpage house • HTML is like the frame, walls, and floors of a house • it defines the structure and purpose of the parts of a page <ceiling> …but just like a house without paint, a webpage made with only HTML would be pretty boring. <window> </ceiling> <window> <window> <door> <window> </window> </window> </door> </window> <floor> <bucket> </window> </floor>

21. Painting the walls with CSS • CSS is like all the paint, floors, tiles, etc. in the house • it defines the A E S T H E T I C of the page feels like something is missing… .cabinet { color: white; } kitchen > floor { background: url(tile.jpg) repeat; }

22. That's better • JavaScript (or JS) is like all the appliances and wiring in a house • it lets you make your page do things and be interactive it has nothing to do with Java and is also called ECMAScript. $(".light").controlledBy("#switch2") var d = new Dishwasher() var f = new Fridge()

23. Sorry, but… • …the stuff you learn here will likely be outdated in 3-4 years. ? the web is the fastest-moving target in all of CS… but the basic problems have never changed… and some good ideas are timeless.

24. If you're gonna build a house… • you're gonna need some tools. • fortunately, about all you need is a browser and a code editor. Firefox and Chrome are your best bets for this course. Safari: eeehhhh? Microsoft browsers: not even once

25. HTML

26. What is HTML? • HTML stands for hypertext markup language. • it's not a programming language… it's a declarative language. e = new Element('a'); e.setHref('example.com'); e.setClass('outgoing'); e.setText('test'); body.appendElement(e); programming languages are imperative: you tell the computer what to do. <a href='example.com'class='outgoing'>test</a> declarative languages are descriptive: you tell the computer what you want.

27. Tags, tags, tags • HTML files contain text and tags. • text is the text on your page • tags give the text structure • a tag looks like this: <br> • most kinds of tags come in pairs: <em>emphasized text</em> • sometimes the closing tag is optional. • a pair of tags and all the content within is collectively called an element.

28. Nesting and structuring • elements can be nested: put inside one another. an article… which contains an image… and some text…. and a button… etc.

29. Under the hood • every HTML file has a structure required by the HTML specification. this says we're using HTML5. <!doctypehtml> <html> <head> </head> <body> </body> </html> <head> tells the browserabout the page <html> surrounds the rest of the file. <body> containsthe page contents– text,images, links, layout, etc.

30. Required items in the <head> element • the very first thing in the <head> should be: <meta charset="utf-8"> • seriously, browsers get really pissy if this isn't within the first n characters of the file • the title (the name in the tab) is also required: <title>Yay HTML is neat</title> this is the title.

31. Block and inline elements • everything you put on the page is either a block or comes inline. A block contains things. By default blocks become as wide as possible and as short as possible. When you have multiple blocks in a row, by default they stack up vertically. But blocks can be moved around and resized. Inline items appear inside the text. Things like bold, italics, links, and images are all inline.

32. Semantic markup • HTML describes content, structure, and purpose, not appearance. • semantic markup embeds purpose in your page's structure. header navigation <header> <nav> <main> <footer> semantic tags improve usability and searchability. main there are others: <section>, <article>, <aside> footer none of these have any visual impact on your page, but they provide useful structure.

33. Headings and paragraphs • headings give human-readable names to sections. • there are 6 levels, <h1> through <h6> • think of them like an outline • HTML ignores whitespace. • spaces, tabs, newlines etc. • so if you want to start a paragraph, use <p> • the closing </p> tag is optional.

34. Lists • ordered lists <ol>have numbers: <ol> <li> Beat eggs <li> Add milk </ol> • unordered lists <ul>have bullets: <ul> <li> Juice <li> Bread </ul> <li> stands for "list item". Beat eggs Add milk • Juice • Bread

35. Hypertext • the whole idea behind the web is that you can link to things • the <a> tag makes a link this is an attribute. <ahref="http://pitt.edu/~jfb42">my site</a> this is the URL that the link will... link to. and this is the text that will become clickable.

36. URLs and IP addresses • every computer connected to the internet has a unique numeric address, its IP address.(no, someone can't find you with it) • whatismyip.orgtells you yours • those addresses can change, and people suck at remembering them, so we also have Uniform Resource Locators (URLs): http://example.com/index.html protocol: how the computers communicate domain: name of the server that you want to contact path: name of the thing you want from the server