Basic HTML
By: Cratecode
Let's take a look at some basic HTML. First, set up your HTML document. Remember, start with <!DOCTYPE html>, then create an html element with a head and body element inside it.
A lot of HTML deals with text, so we'll start off with that. Remember, content (stuff you see, e.g. text and images) goes inside of body. Here are a few of the most basic HTML text elements:
Headings
Headings are used to bring significance to some text by making the text big and bold. They come in different levels of intensity, with the biggest heading being h1, and the smallest being h6. Here's an example:
<h1>BIG HEADING</h1> <h3>Medium Heading</h3> <h6>little heading</h6>
Paragraphs
Paragraphs are another basic text element in HTML. They represent, well, paragraphs, and are used to house most kinds of texts. They're used with the p element. Here's an example:
<p>Normal text here</p>
Text Styling
HTML includes some basic elements to do text styling (bold, small, strikethrough, etc). These should be inside another text element, such as a p. Here's a little list (although there are many, many more that aren't included):
i- will italicize text.s- renders a line (strikethrough) inside of text.small- makes text smaller.strong- makes text bold.
Here's an example of using them:
<p> <s><strong>ERROR:</strong> Service <i>error prone service</i> encountered an error.</s> <strong>ERROR RESOLVED</strong> </p>
Project
Try using these elements to create a little story with enhanced styling. It could be about anything, but here's some ideas if you get stuck:
- Your experience learning programming.
- One of your favorite activities.
- What you want to do in the future.
Anything goes, just make sure to use at least one element from each category (though I'd encourage you to do more than one). Mess around with it and see what you can do with these elements, and remember, every website is built using HTML. If you get stuck, take a look at the example HTML document in the previous lesson. Good luck!
Also, here's an HTML cheatsheet with a list of HTML elements: HTML Cheatsheet.