-
-
Notifications
You must be signed in to change notification settings - Fork 1
Lesson #2: Let's Add Some Structure
Now that we have some text to work off of from Step #10, let's add some structure with HTML tags and elements!
Below is a table of the different types of elements you can use and how to use them. You don't have to use all of them, but this is a great point of reference for the future.
I also have a package in my text editor, language-html, that offers html language support when you're coding by offering suggestions and descriptions as you go. To install the package in Atom, navigate to the top menu bar > Atom > Preferences > (a new side bar will pop up on your editor) > Install > type html in the search bar > Install language-html.
We're going to start with the basic html structure.
- Take your
index.htmlfile with your "why" and your roadmap and format it in this way.
<!DOCTYPE html>
<html>
<head>
<title>website title</title>
</head>
<body>
WHY
ROADMAP
</body>
</html>Every opening tag needs a closing tag, like <body> WHY ROADMAP </body>
| COMMON TAGS | DESCRIPTION |
|---|---|
<h?> heading </h?> |
# Heading (in-place of ?, use numbers 1 for the largest to 6 for the smallest text size) |
<p> paragraph </p> |
Basic text in paragraph format |
<b> bold </b> |
bolds text |
<i> italic </i> |
italicizes text |
<a href="url"> link name </a> |
Creates a hyperlink from one page to another |
<div> ... </div> |
A divider to separate page content into sections |
<img src="filename.jpg"> |
Displays an image |
<ul> <li> list </li> </ul> |
* Unordered list of bullet points |
<ol> <li> list </li> </ol> |
1. Ordered list of numbered points |
<br> |
Line break, forcing a new line |
<span style="color:red"> red </span> |
Method to extend CSS style changes to specific text inline |