15-112
Summer 20

Home

Syllabus

Schedule

Gallery

Staff

Parthean

Autolab

CMU 15-112: Fundamentals of Programming and Computer Science
Class Notes: Javascript

  1. What is HTML
  2. Nesting Tags
  3. Giving Tags Attributes
  4. Sample Webpage
  5. Some Common Tags
  6. What is CSS
  7. CSS Selectors
  8. Making Pages Pretty
  9. Some Common CSS Properties
  10. Actually Making Pages Pretty
  11. A Simple Blog
  1. What is HTML
    • HTML and XML are the two most common markup languages. In a markup languages, tags are used to annotate annotate text, and a program uses those tags to format the text.
    • In HTML, the above bullet point looks like this:
      • <li>HTML and XML are the two most common <u>markup languages</u>. In a markup languages, <u>tags</u> are used to annotate annotate text, and a program uses those tags to format the text.</li>
    • The <li> tags describe a list item, the <u> tags describe an underline, and the </li> and </u> closing tags mark the end of the item or underlined section.
      • If you're curious, <code> tags are used to format the above code.
    • HTML stands for "hypertext markup language". "hypertext" is just text that has links to other text. In 1963, this was a big deal.

  2. Nesting Tags
    • Some tags can be nested. Creating a numbered list looks like this:
      <ol> <li>Item One</li> <li>Item Two</li> <li>Item Three</li> </ol>
      This is an "ordered list" that contains three "list items".

    • All websites are created by nesting tags inside of each other. The basic structure of every webpage is this:
      <!DOCTYPE html> <html> <head> </head> <body> </body> </html>
      • First we define the type of document we're working in (an HTML document).
      • Then we create the html element that holds all other elements on the page.
      • Inside of the html element we have the head (which contains things like the page title) and the body (which contains all of the page content)

  3. Giving Tags Attributes
    Some tags take in attributes. For example, an "anchor" tag which describes a hyperlink takes in an "href" attribute which describes the link destination.
    <a href="https://cs.cmu.edu/~112">Course Website<>
    Creates a link to the course website.

  4. Sample Webpage
    Here's some code to define a simple webpage. Save this code as "sample.html", open it in a browser (by double clicking), and see what renders!
    You can also view this HTML on the course website here.
    <!DOCTYPE html> <html> <head> <title>15-112 Titled Sample Page</title> </head> <body> <h1>15-112 Sample Webpage</h1> <ol> <li><a href="https://cs.cmu.edu/~112">15-112 Course Website</a></li> <li><a href="https://docs.python.org/3/">Python Documentation</a></li> </ol> </body> </html>
    You should notice that:
    • The website's title (the tab in your browser) is "15-112 Titled Sample Page"
    • There is a large "heading 1" which says "15-112 Sample Website"
    • There's a 2-element "ordered list" with list items "15-112 Course Website" and "Python Documentation"
    • Each of these list elements is also a hyperlink
    Try modifying the code and experimenting!

  5. Some Common Tags
    Here's a (non-exhaustive) list of html tags you may find useful.
    • <h1> tags create "Heading 1"s. This is the largest heading. h2, h3, etc create smaller headers
    • <p> tags create paragraphs of text
    • <ol> tags create ordered lists
    • <ul> tags create unordered lists
    • <li> tags create list elements within those lists
    • <div> tags create blocks of content. Divs stack on top of each other
    • <span> tags create sections of content. Spans stack next to each other
    • <a> tags create "anchors" or hyperlinks. The "href" attribute of an a tag describes its target
    • <table> tags create tables
    • <tr> tags create table rows
    • <td> tags create cells of table data
    • <img> tags create images. The "src" attribute of an image tag describes its source file

    The documentation at w3schools is an excellent resource for finding tags and the details of their usage.

  6. What is CSS
    • CSS is a language which describes the styling (colors, sizes, fonts) of an HTML page.
    • CSS is a "style sheet language" and stands for "Cascading Style Sheet"

  7. CSS Selectors CSS uses "selectors" to select particular elements, and then sets styles for those elements. There are many selectors but we'll focus on three:
    1. .xyz selects any element with the attribute class="xyz". So the element <div class="xyz"> would be selected by this selector.
    2. #xyz selects any element with the attribute id="xyz". So the element <div id="xyz"> would be selected by this selector.
    3. element selects any element of type "element". So <element> would be selected by this selector.

  8. Making Pages Pretty
    CSS code lives in a <style> tag, usually in the <head> tag of your webpage. Here we modify the sample page above to be a bit more colorful.
    You can open this code in your own browser, or see it on the course website here.
    <!DOCTYPE html> <html> <head> <title>15-112 Sample Webpage</title> <style> h1 { color: blue; } .website { color: orange; } #docs { color: green; } </style> </head> <body> <h1>15-112 Sample Webpage</h1> <ol> <li class="website"><a href="https://cs.cmu.edu/~112">15-112 Course Website</a></li> <li id="docs"><a href="https://docs.python.org/3/">Python Documentation</a></li> </ol> </body> </html>
    Here the h1 selector is selecting our heading and making it blue. The .website selector is selecting the list item with the class "website" and making it orange. Finally, the #docs selector is selecting the list item with id "docs" and turning it green.

  9. Some Common CSS Properties
    Here's a (non-exhaustive) list of CSS properties you may find useful.
    • background-color sets the background color of an element. Frequently used with divs
    • color sets the text color of an element
    • font-family sets the font for an element
    • font-size sets the font size for an element
    • border describes an element's border. Borders are set like border: 5px solid black or more generally, border: npx type color
    • padding describes how close the content of an element is allowed to get to its border
    • margin describes how close other elements are allowed to get to an element

    The documentation at w3schools is an excellent resource for finding CSS properties and the details of their usage.

  10. Actually Making Pages Pretty
    • It's possible to write all styles for a website from scratch. If you're trying to establish a particular brand or style guide for a business this can be important. Google's websites are styled differently than Microsoft's for example.
    • In most cases, you can use an open source "CSS Framework" which contains many styles already written for you.
    • We'll be working with Bootstrap, one of the most popular CSS Frameworks. You can include bootstrap in your site by importing CSS and JavaScript files in your head tag like this:
      <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> </head>

    • Look at how adding bootstrap to our sample page makes it look dramatically nicer, with no extra styling.
      Remember the original sample then see here
      <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> <title>15-112 Sample Webpage</title> </head> <body> <h1>15-112 Sample Webpage</h1> <ol> <li class="website"><a href="https://cs.cmu.edu/~112">15-112 Course Website</a></li> <li id="docs"><a href="https://docs.python.org/3/">Python Documentation</a></li> </ol> </body> </html>

  11. A Simple Blog
    The Bootstrap documentation describes a grid system for splitting up pages into rows and columns. It also describes a series of components like navbars, buttons, and cards which we can add to our pages.
    In this sample we use bootstrap cards along with some of our own custom styling to create a simple blog page.
    You can see the result on the course website here.
    <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> <title>15-112 Blog</title> <style> .content { padding: 10px; } .card { margin-bottom: 10px; } </style> </head> <body> <div class="content"> <h1>15-112 Blog</h1> <hr> <div class="card"> <div class="card-body"> <h5>Post 1</h5> <p>This is our first post</p> </div> </div> <div class="card"> <div class="card-body"> <h5>Post 2</h5> <p>This post has some of our favorite websites</p> <ol> <li><a href="https://cs.cmu.edu/~112">Course Website</a></li> <li><a href="https://docs.python.org/3/">Python Documentation</a></li> </ol> </div> </div> </div> </body> </html>