CS 101

Clients and Frontend

Announcements

  • Paper due on Friday. Come ask us questions!
  • The Honor Code

Plan for Today

  • Going over feedback
  • Recall: requests go to a server, which returns a response
  • Today: how do clients display the response?
    • HTML
    • CSS
    • JavaScript

A Note on the Feedback

  • Thank you!
  • Some requests for more info on slides, some notes that it seems that I'm "reading off the slides"
    • Compromise: I'll try to ensure each bulletpoint has enough info to point you in the right direction, and that the how-to steps are more clearly laid out
  • Lots of people like that I ask for questions, some people want more time on the slides
    • I'll give more time to think about questions at the end of the slides (and time to take notes)
    • If I was confused about something when learning the topic, I'll point out questions I had
  • HWs are about 3-6 hours on average, and you all seem happy with the difficulty as a whole.
  • We're covering web development (today) and security (next week), the two most requested topics

Recall: HTTP

  • HTTP: Hypertext Transfer Protocol
  • Hyperlinks connect nodes of text (another network!)
  • Requests
    • GET: requests a certain resource
    • POST: requests the server adds something to the resource at the URL (e.g. web forms or uploading a file)
    • DELETE: delete the information at the URL
  • Responses include a code, header, and a body
  • How does the client interpret the body?

Displaying responses

  • HTML: Hypertext Markup Languages (what's actually returned from the server)
  • CSS: Cascading Style Sheets (rules for how to display the HTML)
  • JavaScript: dynamically generate content to display
  • One way to think about it: HTML is what information, CSS is how to display the information, and JavaScript is how the user interacts with the information

HTML

  • The "language" of the internet - the information to present
  • Markup: designates how to process and present the text
    • No inherent formatting, so we have to explicitly define how it should be formatted
    • Imagine someone was reading a webpage to you - how could they tell you what's a title or what's in a list?
  • Made up of a series of elements (like how papers have components like a title or paragraphs)
  • Defines each element in a tag, which are used by browsers to figure out what type of content is being displayed - explicit definition

Common HTML tags

  • Rigid syntax (just like Excel and JavaScript):
    • <tag>info to display</tag>
  • Header Tags: h1, h2, h3
  • Paragraph tag: p
  • Lists: ul (unordered) or ol (ordered)
    • Elements are given the li tag
  • Link: a
    • Form: <a href="URL">Text to display</a>
  • Image: img
    • Form: <img src="Image URL"></img>
  • JavaScript: script

Writing HTML

  • Use a text editor (Mac TextEdit or Windows Notepad)
  • You can download my website as a template: web.stanford.edu/~ataylor4
  • Let's write a website together
  • I'll post this on my webspace afterwards, so don't worry about taking notes

CSS

  • Describes how to present information
  • Colors, fonts, borders, etc.
  • Each type of element has different rules for displaying
  • You can also define your own types of elements in CSS
  • Sometimes, multiple tags apply to a piece of text. Use the most specific tag's property when in conflict

Common CSS Styles

  • Link the stylesheet at the top
  • Pro-tip: if you use Bootstrap (which is open-source), you can make a cool website quickly!
  • Example of CSS: 
      
body {
  font-size: 18px;
  color: red;
}

h1 {
  font-size: 30px;
  color: orange;
  margin: 5px;
}

Adding to our Website

  • Use a text editor (Mac TextEdit or Windows Notepad)
  • Download my style.css as a template: web.stanford.edu/~ataylor4/style.css
  • Hint: download the file and open with your text editor

JavaScript

  • Change the information to present
  • Example: press the arrow key, and the slide updates
  • Usually changes based on the information returned from the server (e.g. if we have one thing to display, we can make it bigger) or based on user input

JavaScript Example

  • We can directly add a button to our index.html from before.

Rendering Engines

  • Why do different browsers display content differently?
  • Rendering Engine is responsible for interpreting html and css
  • Different browsers have different rendering engines, and different engines interpret information slightly differently
  • Not (perfectly) standardized!

AFS: Your own webpage

  • Stanford gives every student their own space for a website through a system called AFS (a distributed file system)
  • Visit https://afs.stanford.edu/, then click the WWW directory
  • Upload .html and .css file(s), along with any images or other materials your webpage links to
  • Note: you can create the files on your computer (open with TextEdit or Notepad) and test them out by opening with your preferred web browser

Creating a Webpage

  • Look at things you like!
    • Right click on a page and select "View Page Source" (Chrome)
  • Try modifying your HTML or CSS as it displays
    • Right click on a page and select "Inspect"
  • Google! W3Schools is great

Recap

  • Responses contain HTML, the content to display
  • HTML is displayed using CSS
  • JavaScript can change how the content is displayed for different users
  • You can create your own website