Lecture 0
Lecture 0
Introduction
Web Programming
HTML (Hypertext Markup Language)
o Document Object Model (DOM)
o More HTML Elements
o Forms
CSS (Cascading Style Sheets)
Responsive Design
Bootstrap
Sass (Syntactically Awesome Style Sheets)
Introduction
In this course, we’re picking up where CS50 left off and diving into the
design and creation of web applications. We’ll build our web-design skills
by working on a number of projects throughout the course, including an
open-ended final project where you’ll have the chance to create a website
of your own!
In this course, you’ll need a text editor where you can write code locally
on your computer. Some popular ones include Visual Studios
Code, Sublime Text, Atom, and Vim, but there are many more to choose
from!
Web Programming
Course Topics: We’ll go into more detail later, but here’s a brief
overview of what we’ll be working on during this course:
Now, let’s take some time to talk about the file we just wrote, which
seems to be pretty complicated for such a simple page.
o In the first line, we are declaring (to the web browser)
that we are writing the document in the latest version of
HTML: HTML5.
o After that, the page consists of nested HTML
elements (such as html and body), each with
an opening and closing tag marked with
either <element> for an opening and </element> for a
closing.
o Notice how each of the inner elements is indented just a
bit further than the last. While this is not necessarily
required by the browser, it will be very helpful to keep
this up in your own code.
o HTML elements can include attributes, which give the
browser extra information about the element. For
example, when we include lang="en" in our initial tag, we
are telling the browser that we are using English as our
primary language.
o Inside the HTML element, we typically want to include
both a head and a body tag. The head element will
include information about your page that is not
necessarily displayed, and the body element will contain
what is actually visible to users who visit the site.
o Within the head, we have included a title for our
webpage, which you’ll notice is displayed in the tab at
the top of our web browser.
o Finally, we’ve included the text “Hello, world!” in the
body, which is the visible part of our page.
Document Object Model (DOM)
The DOM is a convenient way of visualizing the way HTML elements
relate to each other using a tree-like structure. Above is an example
of the DOM layout for the page we just wrote.
More HTML Elements
There are many HTML elements you may want to use to customize
your page, including headings, lists, and bolded sections. In this next
example, we’ll see a few of of these in action.
One more thing to note: <!-- --> gives us a comment in HTML, so
we’ll use that below to explain some of the elements.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Elements</title>
</head>
<body>
<!-- We can create headings using h1 through h6 as tags. -->
<h1>A Large Heading</h1>
<h2>A Smaller Heading</h2>
<h6>The Smallest Heading</h6>
<!-- The strong and i tags give us bold and italics respectively. -->
A <strong>bold</strong> word and an <i>italicized</i> word!
<!-- We can link to another page (such as cs50's page) using a. -->
View the <a href="https://cs50.harvard.edu/">CS50 Website</a>!
<!-- We used ul for an unordered list and ol for an ordered one. both ordered and
unordered lists contain li, or list items. -->
An unordered list:
<ul>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
An ordered list:
<ol>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ol>
<!-- Images require a src attribute, which can be either the path to a file on your
computer or the link to an image online. It also includes an alt attribute, which gives a
description in case the image can't be loaded. -->
An image:
<img src="../../images/duck.jpeg" alt="Rubber Duck Picture">
<!-- We can also see above that for some elements that don't contain other ones,
closing tags are not necessary. -->
<!-- Here, we use a br tag to add white space to the page. -->
<br/> <br/>
</div>
<input type="submit">
</form>
</body>
</html>
There are far too many CSS properties to go over here, but just like
HTML elements, it’s typically easy to Google something along the
lines of “change font to blue CSS” to get the result. Some of the most
common ones though are:
o color: the color of text
o text-align: where elements are placed on the page
o background-color: can be set to any color
o width: in pixels or percent of a page
o height: in pixels or percent of a page
o padding: how much space should be left inside an
element
o margin: how much space should be left outside an
element
o font-family: type of font for text on page
o font-size: in pixels
o border: size type (solid, dashed, etc) color
Let’s use some of what we just learned to improve upon our oceans
table from above. Here’s some HTML to start us off:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Nicer Table</title>
</head>
<body>
<table>
<thead>
<th>Ocean</th>
<th>Average Depth</th>
<th>Maximum Depth</th>
</thead>
<tbody>
<tr>
<td>Pacific</td>
<td>4280 m</td>
<td>10911 m</td>
</tr>
<tr>
<td>Atlantic</td>
<td>3646 m</td>
<td>8486 m</td>
</tr>
</tbody>
</table>
</body>
<html>
The above looks a lot like what we had before, but now, either by
including a style tag or a link to a stylesheet in the head element, we
add the following css:
table {
border: 1px solid black;
border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 2px;
}
th {
border: 1px solid black;
padding: 2px;
}
Which leaves us with this nicer-looking table:
You may already be thinking that there’s some needless repetition in
our CSS at the moment, as td and th have the same styling. We can
(and should) condense this down to the following code, using a
comma to show the styling should apply to more than one element
type.
table {
border: 1px solid black;
border-collapse: collapse;
}
td, th {
border: 1px solid black;
padding: 2px;
}
1. In-line styling
2. id
3. class
4. element type
In addition to the comma for multiple selectors, there are several
other ways to specify which elements you would like to style. This
table from lecture provides a few, and we’ll go through a few
examples below:
</body>
<html>
</body>
<html>
Not only can we use CSS to change what an element looks like
permanently, but also what it looks like under certain conditions. For
example, what if we wanted a button to change color when we hover
over it? We can acheive this using a CSS pseudoclass, which provides
additional styling during special circumstances. We write this by
adding a colon after our selector, and then adding the circumstance
after that colon.
In the case of the button, we would add :hover to the button selector
to specify the design only when hovering:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pseudoclasses</title>
<style>
button {
background-color: red;
width: 200px;
height: 50px;
font-size: 24px;
}
button:hover {
background-color: green;
}
</style>
</head>
<body>
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
</body>
<html>
Responsive Design
Today, many people view websites on devices other than computers,
such as smartphones and tablets. It’s important to make sure your
website is readable to people on all devices.
One way we can achieve this is through knowledge of the viewport.
The viewport is the part of the screen that is actually visible to the
user at any given time. By default, many webpages assume that the
viewport is the same on any device, which is what leads to many
sites (especially older ones) being difficult to interact with on mobile
devices.
One simple way to improve the appearance of a site on a mobile
device is to add the following line in the head of our HTML files. This
line tells the mobile device to use a viewport that is the same width
as that of the device you’re using rather than a much larger one.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Another way to deal with differing screen size is using a new CSS
attribute known as a flexbox. This allows us to easily have elements
wrap around to the next line if they don’t fit horizontally. We do this
by putting all of our elements in a div that we’ll call our container.
We then add some styling to that div specifying that we want to use
a flexbox display for the elements inside of it. We’ve also added
some additional styling to the inner divs to better illustrate the
wrapping that’s occuring here.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Screen Size</title>
<style>
#container {
display: flex;
flex-wrap: wrap;
}
#container > div {
background-color: green;
font-size: 20px;
margin: 20px;
padding: 20px;
width: 200px;
}
</style>
</head>
<body>
<div id="container">
<div>Some text 1!</div>
<div>Some text 2!</div>
<div>Some text 3!</div>
<div>Some text 4!</div>
<div>Some text 5!</div>
<div>Some text 6!</div>
<div>Some text 7!</div>
<div>Some text 8!</div>
<div>Some text 9!</div>
<div>Some text 10!</div>
<div>Some text 11!</div>
<div>Some text 12!</div>
</div>
</body>
</html>
.grid-item {
background-color: white;
font-size: 20px;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
<div class="grid-item">10</div>
<div class="grid-item">11</div>
<div class="grid-item">12</div>
</div>
</body>
</html>
Bootstrap
It turns out that there are many libraries that other people have
already written that can make the styling of a webpage even simpler.
One popular library that we’ll use throughout the course is known
as bootstrap.
We can include bootstrap in our code by adding a single line to the
head of our HTML file:
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-
9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous">
ul {
font-size: 14px;
color: $color;
}
ol {
font-size: 18px;
color: $color;
}
Now, in order to link this styling to our HTML file, we can’t just link to
the .scss file because most web browsers only recognize .css files. To
deal with this problem, we have to download a program called
Sass onto our computers. Then, in our terminal, we write sass
variables.scss:variables.css This command will compile a .scss file
named variables.scss into a .css file named variables.css, to which you
can add a link in your HTML page.
To speed up this process, we can use the command sass --watch
variables.scss:variables.css which automatically changes the .css file
every time a change is detected in the .scss file.
While using Sass, we can also physically nest our styling rather than
use the CSS selectors we talked about earlier. For example, if we
want to apply some styling only to paragraphs and unordered lists
within a div, we can write the following:
div {
font-size: 18px;
p{
color: blue;
}
ul {
color: green;
}
}
Once compiled into CSS, we would get a file that looks like:
div {
font-size: 18px;
}
div p {
color: blue;
}
div ul {
color: green;
}
.success {
@extend %message;
background-color: green;
}
.warning {
@extend %message;
background-color: orange;
}
.error {
@extend %message;
background-color: red;
}