Lecture 01

CS333
Web Programming
Fall 2019
Today's schedule
- Syllabus
- Course Info
- Browsers! The Internet!
- A little bit about HTML and CSS
Check out the course website for all this and more:
https://app.schoology.com
Course code: HGG8-QD97-WTCDX
Suggestion: Bring your laptop!
● Bring your laptop to lecture so you can follow along

with the lecture slides and check out the code examples
● I will be using https://repl.it in lecture, which lets you
try the code online
Syllabus
Week number Lecture
Week 1 ● Introduction and Course Overview

Week 2 ● Basic HTML/CSS
● Block vs inline; classes and ids
Week 3 ● More CSS; CSS Box Model
● Flexbox
Week 4 ● Mobile web
Week 5 ● Javascript - part 1
Week 7 7th Exam (30 points)
Week 9 ● Server - part 1
Week 10 ● Server - part 2
Week 11 ● Database - part 1
Week 12 ● Database - part 2
Week 13 ● Middleware
Week 14 ● Security and authentication
Week 15 ● Revision
Week 16 Final Exam (40 points)

CS333 Goals
If you never take another web programming class again,

you will leave CS333 with the following skills:
- Create attractive, small scale web sites or apps that at
least mostly work on phones
- Have the vocabulary and background knowledge to
understand technical writing/discussions about the web
(e.g. web API documentation; random blog posts)
- Have the foundation to pursue the areas of web

programming that you're interested in (if you choose)
(CS333 Non-goals)
CS333 is not a class to take to learn how to code.
CS333 is not a class that will turn you into a senior

frontend/backend developer.
- Nor is any class; software takes years of experience to
develop expertise.
CS333 is not a class that will teach you all there is to know
about web programming.
- For example, we will not teach how to support old
browsers, legacy devices, etc.
Course info
Grades
7th Exam: 30%

12th Project: 30%
HWs: 5%
Attendance: 5%
Final Exam: 30%
Browser and Text editor/IDE
- Text editor: You can use whatever you want. We

recommend https://repl.it/
- Homework turn-in: We are using Schoology for

assignment turnin.
Lectures
Bi-Weekly - AAST Aswan Campus
- Lecture slides are on schoology.com

Questions?
Today's schedule
- Syllabus
- Course Info
- Browsers! The Internet!
- A little bit about HTML and CSS
Browsers!
The Internet!
The web!
How do web pages work?
Browsers are applications that can display web pages.

E.g. Chrome, Firefox, Safari, Internet Explorer, Edge, etc.
Web pages are written in a markup language called

HTML, so browsers display a web page by reading and
interpreting its HTML.
The HTML file might link to other resources, like images,

videos, as well as JavaScript and CSS (stylesheet) files,
which the browser then also loads.
A web server is a program running on a computer that

delivers web pages in response to requests.
It either stores or generates the web page returned.

aast.edu
1. You type
in a URL,
which is the
address of
the HTML
file on the
internet.
2. The browser asks

the web server that
hosts the document to
send that document.
GET
3. The web server

responds to the
browser with HTML file
that was requested.
OK
4. The browser reads

the HTML, sees the
embedded resources
and asks the server for GET
OK
those as well.
... GET OK
5. The web page is loaded when all the resources are fetched
and displayed.
aast.edu
HTML and CSS
What is HTML?
HTML (Hypertext Markup Language)

- Describes the content and structure of a web page; not
a programming language.
- Made up of building blocks called elements.
<p>
HTML is <em>awesome!!!</em>
<img src="puppy.png" />
</p>
What is HTML?
https://repl.it/@SherifEl/Example-1
Basic HTML page structure
<!DOCTYPE html>
<html>
<head>
<title>CS333</title>
</head>
<body>
... contents of the page...
</body>
</html>
Saved in a filename.html file.

Basic HTML page structure
(i.e. copy/paste boilerplate)
<!DOCTYPE html>
Metadata that <html>
doesn't appear in <head> E.g. <title>
the viewport of <title>CS 193X</title> shows up as the
the browser </head> name of the tab
Contents that <body>

render in the ... contents of the page...
viewport of the </body>
browser </html>
HTML elements
<p>
HTML is <em>awesome!!!</em>
<img src="puppy.png" />
</p>
● An element usually has start and ending tags (<p> and </p>)
○ content: stuff in between start and end tags
● An element can be self-closing (img)
● An element can have attributes (src="puppy.jpg")
● Elements can contain other elements (p contains em and img)
Some HTML elements
(to place within <body>)
Top-level heading
<h1>Moby Dick</h1>
h1, h2, ... h6
Paragraph <p>Call me now.</p>
since feeling is first<br/>
Line break
who pays any attention
Image <img src="cover.png" />
<a href="google.com">click
Link
here!</a>
Strong (bold) <strong>Be BOLD</strong>
Emphasis (italic) He's my <em>brother</em> and all
Exercise: Course web page
Let's write some HTML to make the following page:

Exercise: Course web page
HTML boilerplate Plaintext contents of the page

<!DOCTYPE html> CS333: Web Fun
<html>
<head> Announcements
<title>CS333</title> 4/3: Homework 0 is out! Due
</head> Friday.
4/3: Office hours are now
<body> posted.
...
</body> View Syllabus
</html>
Solution
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>CS333: Web Fun</h1>
<strong>Announcements</strong><br/>
4/3: Homework 0 is out!<br/>
4/3: Office hours are now posted.<br/>
<br/>
<a href="https://app.schoology.com/course/2221846263/materials">
View Syllabus
</a>
</body>
</html>
CSS
CSS
CSS: Cascading Style Sheets

- Describes the appearance and layout of a web page
- Composed of CSS rules, which define sets of styles
selector {
property: value;
}
CSS
A CSS file is composed of style rules:
selector {
property: value;
}
selector: Specifies the HTML element(s) to style.
property: The name of the CSS style.
value: The value for the CSS style.
Saved in a filename.css file.

CSS
// NOT REAL CSS

fork {
color: gold;
}
"All forks on the table
should be gold"
CSS
p {
color: blue;
font-weight: bold;
}
h1 {
color: green;
}
● All <p> elements on the page

should be blue and bold
● All headers are in green
Linking CSS in HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>header in green</h1>
<p>contents of the page are in blue</p>
</body>
</html>
Some CSS properties
There are over 500 CSS properties! Here are a few:
Font face (mdn) font-family: Helvetica;

Font color (mdn) color: gray;
Background color (mdn) background-color: red;
Border (mdn) border: 3px solid green;
Text alignment (mdn) text-align: center;
Aside: Mozilla Developer Network (MDN) is the best reference for HTML
elements and CSS properties
- The actual W3 spec is very hard to read (meant for browser
developers, not web developers)
Main ways to deﬁne CSS colors:
140 predefined names (list)

color: black; Hex values
color: #00ff00;
rgb() and rgba() color: #0f0;
color: rgb(34, 12, 64); color: #00ff0080;
color: rgba(0, 0, 0, 0.5);
- The "a" stands for alpha channel and is a transparency value

- Generally prefer more descriptive over less:
1. Predefined name
2. rgb / rgba
3. Hex

Lecture 01

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Lecture 01

Загружено:

Авторское право:

Доступные форматы

CS333

● Bring your laptop to lecture so you can follow along

Week 1 ● Introduction and Course Overview

Week 12 ● Database - part 2

Week 16 Final Exam (40 points)

If you never take another web programming class again,

- Have the foundation to pursue the areas of web

CS333 is not a class to take to learn how to code.

CS333 is not a class that will turn you into a senior

7th Exam: 30%

- Text editor: You can use whatever you want. We

- Homework turn-in: We are using Schoology for

Bi-Weekly - AAST Aswan Campus

- Lecture slides are on schoology.com

Browsers are applications that can display web pages.

Web pages are written in a markup language called

The HTML file might link to other resources, like images,

A web server is a program running on a computer that

It either stores or generates the web page returned.

2. The browser asks

3. The web server

4. The browser reads

HTML (Hypertext Markup Language)

Saved in a filename.html file.

Contents that <body>

Let's write some HTML to make the following page:

HTML boilerplate Plaintext contents of the page

CSS: Cascading Style Sheets

A CSS file is composed of style rules:

Saved in a filename.css file.

// NOT REAL CSS

● All <p> elements on the page

There are over 500 CSS properties! Here are a few:

Font face (mdn) font-family: Helvetica;

140 predefined names (list)

- The "a" stands for alpha channel and is a transparency value

Вам также может понравиться