CS 101

Clients and Frontend

Announcements

  • Paper due in 1.5 weeks. Come ask us questions!

Plan for Today

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

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

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

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

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

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

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;
      }
      

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