Chapter 10
Introduction to HTML and CSS
Summary: Creating a small single-purpose website has many uses. This tutorial will
introduce you to the basics of building one.
Skills you will learn:
1. The structure of HTML and CSS
2. How they tie together to build websites
The first thing you’ll need is a text editor.
This is a program many developers use to edit the raw code that goes into their
websites. The two most popular text editors in use today are Sublime Text (link to:
http://sublimetext.com/) and Atom (link to: http://atom.io/).
For a longer discussion of code editors, see the tutorial Choosing a Code Editor.
Instead of double-clicking an HTML file and watching it open with your favourite
web browser, you can open it with Sublime or Atom and watch the raw code appear
before your eyes.
, This is the blank screen that you’ll see in front of you. Save this file as “index.html”
and your code editor will begin highlighting any code you write to showcase its
structure.
This is one of the main reasons developers like using programs like this: Being able to
see colour-coded structures allows you to see errors before they become problematic
and better visualize what you’re building. To see what that looks like, type or copy this
block into your code editor and see what it looks like:
<!DOCTYPE html>
<html lang="en">
<head>
<title>SiteTitle</title>
</head>
<body>
This is the main body of your website
</body>
</html>
Hit save. You can also drag this file into an empty tab in your web browser to see
what it looks like. This is already a fully functional website.
Introduction to HTML and CSS
Summary: Creating a small single-purpose website has many uses. This tutorial will
introduce you to the basics of building one.
Skills you will learn:
1. The structure of HTML and CSS
2. How they tie together to build websites
The first thing you’ll need is a text editor.
This is a program many developers use to edit the raw code that goes into their
websites. The two most popular text editors in use today are Sublime Text (link to:
http://sublimetext.com/) and Atom (link to: http://atom.io/).
For a longer discussion of code editors, see the tutorial Choosing a Code Editor.
Instead of double-clicking an HTML file and watching it open with your favourite
web browser, you can open it with Sublime or Atom and watch the raw code appear
before your eyes.
, This is the blank screen that you’ll see in front of you. Save this file as “index.html”
and your code editor will begin highlighting any code you write to showcase its
structure.
This is one of the main reasons developers like using programs like this: Being able to
see colour-coded structures allows you to see errors before they become problematic
and better visualize what you’re building. To see what that looks like, type or copy this
block into your code editor and see what it looks like:
<!DOCTYPE html>
<html lang="en">
<head>
<title>SiteTitle</title>
</head>
<body>
This is the main body of your website
</body>
</html>
Hit save. You can also drag this file into an empty tab in your web browser to see
what it looks like. This is already a fully functional website.
