lecture01
lecture01
Basic HTML
Lecture 1
Agenda
1. Introductions
2. Course Overview & Logistics
3. The "Web" and The "Internet"
4. HTML
"Waterfall Chat"
QUESTION:
20% Midterm
To keep them low-stakes, they will be graded largely on completion (% questions answered), with
approximately 1 question (clearly marked) to be graded on correctness.
What this class is about:
An overview of how the Internet works
What is a website and how to create one from scratch
...with semantic markup and design/layout
...with interactivity through client- and server-side programs
...with up to four different languages
...by searching through online documentation
...and by following detailed specifications
...and overall, building design/development strategies across the "full-stack"
The end result? A better understanding of the web, important technologies, and a portfolio for you to
show!
What this class is *not* about:
While this course is very practical and hands on (you will write lots of code and be able to show it off),
it is a foundational survey course.
This means:
… you will learn the foundations of what powers the Web, but not the latest framework everyone
might be talking about.
… you will learn a lot of concepts and a lot of terminology, but there will always be more; we don't (and
can't) cover it all.
… as such, while people have gotten Web programming/development jobs after this course, our goal is
to give you the basis with which to learn more -- it's an intro course, after all.
Modules
Make sure to follow the Setup Guide and create an account on repl.it account.
So What is a Web Page Really?
1. Decide on URL...
2. Type it in...
3. Hit enter...
4. Website loads!
You don't have Google.com on your computer. So, where does it come from?
1. Figure out where it is
2. Ask for it to be sent to us
3. Check and verify what we get
4. Show it
The thing in the address bar. Where is the
website?
Uniform Resource Locator (URL): An identifier for the location of a document
A couple of basic URLs:
https://https://www.minecraft.net/tr-tr/about-minecraft
https://https://www.ageofempires.com/games/aoe/
path
protocol host
Wikipedia:
http://en.wikipedia.org/wiki/internet
The Internet
A connection of computer networks
built on the Internet Protocol (IP)
● E.g.,: 34.215.139.216
● Find yours with WhatsMyIP.org
We've handled the host to IP address (so we know who to ask for the web page)
The "protocol" tells us how:
● HTTP: HyperText Transfer Protocol
● Gives us the instructions (protocols) for how to share (transfer) web content
("hypertext")
Examples:
● ACM’s 404
● WSDOT
● Imgur
● FT Labs
● Discord
● Android
● GitHub
They are everywhere
Then… we have the web page right?
Asynchronous Javascript and XML: fetching data from web services using
JavaScript fetch API
JavaScript Object Notation (JSON): file format for organizing human readable data
Content
Words and images
HTML
Getting Started with HTML
There are many different types of HTML tags used to structure web pages (we
can't possibly cover all of them within class). We've consolidated a handy slide
deck with examples of common tags you should know, but you can find a
comprehensive list on MDN (it's a great bookmark page for reference this
quarter!)
You are not expected to memorize these! You'll all get more practice
tomorrow in section :)
Hypertext Markup Language (HTML)
SYNTAX: <element>content</element>
EXAMPLE: <p>This is a paragraph</p>
Structure of an HTML page
An HTML page is saved into a file ending
with extension .html <!DOCTYPE html>
<html>
The <head> tag describes the page and <head>
the <body> tag contains the page's
information about the page
content
</head>
The DOCTYPE tag tells the browser to <body>
interpret our page's code as HTML5, the page contents
latest/greatest version of the language </body>
</html>
Let's start with a template!
HTML Tag Attributes
Some tags don’t contain content and can be opened and closed in one tag
SYNTAX: <element attribute="value" attribute="value">
EXAMPLES: <br>, <hr>,
<img src=”puppy.jpg” alt=”cutest puppy”>
Comments <!-- .. -->