Web Basics
(HTML/CSS)
How the web works
"facebook.com"
Your Computer
DNS
"Domain Name Server"
- Send a request - "facebook.com"
- DNS converts the request
How the web works
"facebook.com"
Your Computer
DNS
"Domain Name Server"
- Send a request - "facebook.com"
- DNS converts the request
How the web works
"facebook.com"
Your Computer
DNS
"Domain Name Server"
- Send a request - "facebook.com"
- DNS converts the request
- Facebook receives the request
How the web works
- Send a request - "facebook.com"
- DNS converts the request
- Facebook receives the request
- Facebook sends the website files
"facebook.com"
Your Computer
DNS
"Domain Name Server"
Website components
- A domain name "yourname.com"
- A web host
- Website files
##.###.###.#
A web host
"whatever.com"
Your Computer
A domain name
Files
$15/yr
$1-$10/mo
HTML
"Bones" of the web
<html>
<head></head>
<body>
<h1>Hello there</h1>
<p>This is some text</p>
</body>
<footer></footer>
</html>
HTML
"Bones" of the web
<html>
<head></head>
<body>
<h1>Hello there</h1>
<p>This is some text</p>
</body>
<footer></footer>
</html>
CSS
"Skin" of the web
h1 {
font-size: 24px;
font-weight: bold;
}
p {
font-size: 16px;
color: black;
}
HTML/CSS themes
- Make-your-own
- HTML5 Up - good pre-built HTML/CSS sites
- Codrops Freebies
- Themeforest
- Creative Market
- Google
- "HTML theme"
- Stay away from flashy things
HTML/CSS hands-on
Visit nytimes.com
- Right click -> Inspect
Download this workshop file, open index.html:
Join my Dropbox folder and visit:
Add files to the Dropbox folder and view them online
Web Basics (HTML/CSS)
By abraren
Web Basics (HTML/CSS)
An introduction to how the web works and the basics of HTML/CSS.
