## Week 7 Wednesday Andrew Sellergren ### Announcements and Demos (0:00-10:00) + Now that you know a little bit about HTML, perhaps you can appreciate the humor of [this tattoo](http://omigapun.com/designomg/wp-content/uploads/2011/08/head-body-html-tattoo-480x352.jpg). + Happy birthday, [Nate](http://cs.harvard.edu/nate/)! + Head to [x.cs50.net/hello](http://x.cs50.net/hello) to be greeted by your CS50x classmates! + The scavenger hunt form Problem Set 4 is afoot! Together with your section, find as many of the computer scientists as you can and get pictures with them. + We're now accepting designs for CS50 apparel at [cs50.net/design](http://cs50.net/design). The technical requirements are as follows: + PNG + 200+ DPI + <= 4000 x 4000 pixels + <= 10 MB + Have a campus problem that could be solved with a mobile app? Need a website for your student group? The Final Project is on the horizon! The specification is now available [here](http://cdn.cs50.net/2012/fall/projects/project.pdf). Know that the Pre-Proposal is just meant to get a conversation started between you and your TF. If you're struggling to come up with your own idea, check out [projects.cs50.net](http://projects.cs50.net) for some ideas shared by others. Plenty of [seminars](https://manual.cs50.net/Seminars) and [APIs](http://manual.cs50.net/APIs) are available to get you up and running in new technologies. APIs, or application programming interfaces, are libraries of code that empower you to interact with third-party applications and data. For example, the [HarvardFood API](https://manual.cs50.net/HarvardFood_API) is a service we wrote that scrapes the HUDS website to get daily menu information. If you employ this API, you can use this menu information in CSV, JSON, or serialized PHP format within your own code. ### HTML and HTTP (10:00-55:00) + HTML stands for hypertext markup language. The word "markup" implies that it's not a programming language, per se. For the most part you can't (and shouldn't) express logic in HTML. Rather, HTML allows you to tell the browser how to render a webpage using start and end tags. + You can actually view the HTML of a webpage by right clicking and selecting View Source in most major browsers. In general, HTML has the following skeleton structure:
+ The first line is the doctype declaration which tells the browser "here comes some HTML." Everything after that is enclosed in the `` tag. This tag has two children, `` and ``. A very simple webpage we looked at last time was as follows:`:
This is CS50, Harvard College's...
A quick brown fox jumps over a lazy dog. A quick brown fox jumps over a lazy dog. A quick brown fox jumps over a lazy dog. A quick brown fox jumps over a lazy dog. A quick brown fox jumps over a lazy dog. A quick brown fox jumps over a lazy dog. A quick brown fox jumps over a lazy dog. A quick brown fox jumps over a lazy dog.
+ The `` tag will actually insert linebreaks for us.
+ Suppose we want to link to another website's image of a quick brown fox. We can use the `` tag to do this:
This is CS50, Harvard College's...
A quick brown fox jumps over a lazy dog.
A quick brown fox jumps over a lazy dog.
A quick brown fox jumps over a lazy dog.
A quick brown fox jumps over a lazy dog.
A quick brown fox jumps over a lazy dog.
A quick brown fox jumps over a lazy dog.
A quick brown fox jumps over a lazy dog.
A quick brown fox jumps over a lazy dog.
This is CS50, Harvard College's...
A quick brown fox jumps over a lazy dog.
CS50 Search
+ Comments in HTML are enclosed by ``. The `` tag is a heading tag which by default specifies big and bold text. There are also `
`, `
`, `
`, `
`, and `
` tags which specify progressively smaller text.
+ To take input from the user, we use the `