- What is a website?
- The web is not the internet
- What is a browser?
- A very brief history of the web
- The importance of the hyperlink
- What HTML looks like
- HTML as a structured document
- What CSS looks like
- Examples of CSS styling HTML elements
- What to do next
- Not too much code
- Rapid overview
- Don't get bogged down in the details
- Entire presentation is published in HTML/CSS
- Use examples of real websites and apps
- Try not to be pedantic
Fundamentally, a website is a document. Websites are written in HTML (hypertext markup language) and styled with CSS (cascading style sheets).
We will talk more about markup and the languages of the web soon. The important bit here is that all websites are written in HTML, which is a document language.
The world wide web is made of documents that are linked.
Web != internet
(This means that the web is not equal to the internet.)
The internet predates the world wide web, going all the way back to the 1960s and 1970s. The internet is a world-wide networking technology that has allowed for everything from email to the world wide web to voice and video calling. The internet is the infrastructure that made the web possible.
The world wide web was originally developed as a research project in 1989 by Tim Berners-Lee at CERN (also known more recently for projects like the Large Hadron Collider) to connect scientists in universities and institutes around the world. The web was built to share and link information (that is, documents) over the internet.
You know IP addresses (like 10.0.0.1) that you might see if you are trying to connect to a Wi-Fi network at a coffee shop? Those are internet protocol (IP) addresses. Connecting to the right IP address is part of how you are able to “get online”. What can you do with an IP address? Connect to a server anywhere in the world, and not just web servers. When you use your mail app on your phone to get mail, you are downloading mail content from a mail server over the internet but not necessarily over the web.
The web relies on IP too, but also HTTP.
The web however, uses a specific HTTP (hypertext transfer protocol) to connect you (the client) to a web server far away in a data center or closet somewhere (the server). The server provides data to the client, and they can communicate with each other back and forth via HTTP. The web’s HTTP is only one layer – a subset of the broader internet protocol.
- 1970s The internet
- 1980s More internet, plus email
- 1989 Tim Berners-Lee invents the web
- 1990s The web
- 2000s Mobile (no not really – more web)
- 2010s The web
A browser is software that displays and renders websites. It also lets you navigate from one site to another.
Examples of modern web browsers are: Google Chrome, Apple’s Safari, Microsoft Internet Explorer, Mozilla Firefox, Opera
Examples of modern mobile web browsers are: Google Chrome, Apple’s Safari, Microsoft Internet Explorer, Mozilla Firefox, Opera
RIP Netscape Navigator (although its roots live on in Mozilla Firefox)
[Show examples of mobile Safari and desktop Chrome]
Common features of browsers:
- URL bar
- Retrieves web pages via URLs
- Back/forward controls
- A window that displays rendered HTML as a page
Most of the apps on your phone or tablet are not browsers.
Examples of not-browsers:
- Yelp
- Gmail
- Tumblr
- Google Maps
- Uber
- Spotify
But aren’t those websites too? What about mail.google.com and tumblr.com? Those are websites, but their mobile app counterparts you get from sources like the Apple App Store or Google Play Store are not usually about the web. Only apps like Safari and Chrome are dedicated web browsers.
What about apps like Gmail, Facebook and Twitter where you can access links within the app? Those apps have browsers built-in, but they are not only or even primarily browsers.
So?
Unlike mobile apps, the web is universal. HTML and CSS don't much care what kind of browser you have. (designers do, though)
The web is not about pixel widths. The web is not about the canvas.
The web is universal.
It’s in the name of HTML: hyper text
The hyperlink. Document languages are common (you’ve used Microsoft Word, right?), but what was special about the web over 20 years ago was that pages could be linked. Anything can be linked to anything. The hyperlink takes advantage of the URL (uniform resource locator), which is most commonly known as a “web address”. Every time you activate a link, there is an anchor reference that roughly says: “go to http://example.com”. In HTML this looks like:
<a href="http://example.com">This is a hypertext link to example.com</a>
This one feature might sound trivial, but this is how businesses like Google and Yahoo originally made billions of dollars.
This is <html>
<p>This is an element.</p>
<p>In particular, this element is a paragraph element.</p>
And here is the one we ran into a minute ago, the anchor.
<a href="http://example.com">This is a hypertext anchor link that goes to example.com</a>
a is for anchor. p is for paragraph. Let’s put these two elements together.
`
Elements can be placed within one another, nested!
Here is an anchor hyperlink within a paragraph.
`These bits of code are called elements. An HTML element is a specified and standardized piece of code that gives a semantic definition to text or other content in a document. By “semantic” I mean that the text means something. An <h1> (heading level 1) has a different purpose in a document from a paragraph. Text that is <em> (emphasized) is intended to be spoken or read with stress emphasis. This doesn't mean "presented as italic" – it means emphasized.
An element is always made up of at least one, and usually two significant parts, the tags and attributes.
The opening tag <p> that begins a paragraph element and the closing tag </p> that ends that element are generally required for elements. An element can also have an attribute like <p class="classy">. Now the paragraph has “classy” as a class attribute. In our previous example with the anchor, href is an attribute which defines the URL for that anchor link.
Most HTML (at its best) is human readable! If you ignore all of the tags and attributes, you are left with pretty much two things: text and URLs.
We write plain text all of the time. HTML provides semantic meaning and structure for our plain text. It also provides a global context through hyperlinks.
Inline images
<img src=“/image.jpg”>
Tables and embedded media content (no time for this)
Blue and purple links. Dull typography. Bland black-on-white uniformity.
That is why we have CSS. Cascading Style Sheets is a programming language that lets us declare styles, adding a presentational layer to an HTML document. This means how it is laid out and how it is formatted. Every web page you have seen today (including this one) is styled using CSS.
Let's style a plain html page with some CSS.
[context switch: plain-html.html]
a {
color: white;
}
p {
color: yellow;
font-family: Avenir, sans-serif;
font-size: 150%;
}
body {
background: gray;
}
[context switch: styled-html.html]
This is the result we get from just a few lines of CSS, targeted at the HTML elements. Except for the CSS being applied, the content of the HTML document in this example is exactly the same.
We are doing something really important here: we are separating content from presentation. The content is in the structured HTML document, while the presentation is handled separately by CSS. This means that we can change the style of our page without altering the meaning and structure of our document.
Selector (the HTML we are targeting)
Declaration (inside the braces)
Property (the property we want to apply, like color or size)
Value (the value we want to assign to that property, like red or 40 pixels)
selector {
property: value;
}
The stuff inside the brackets is the declaration.
[and that is really all we have time for]
- Take the introductory HTML & CSS track on Codecademy
- Practice using HTML and CSS using CodePen
- Start looking at source code to see how your favorite websites are built
- Ask questions!
- Make a website
