Introduction
Hello Steemians! I was recently encouraged to begin teaching people about the basics of code. In this lesson, I'd like to go over the basics to HTML. Please feel free to leave a comment on anything I missed in this blog. One note before I begin: If you're familiar with writing these posts and have ever written a post using the "Raw HTML" editor, then this will appear very similar!
The Basics
Firstly, HTML stands for Hyper-Text-Markup-Language
To begin an HTML document, start with this template and save the file as a .html file. <-- Very important
!DOCTYPE html<-- Indicating an HTML document
html<-- The beginning of a document
head<-- The part of an HTML document where all image references, stylesheet references, and more are stored. (More on this later)
/head
body<-- The part of an HTML document where all actual code exists!
/body
/html
In HTML, you write with tags. For instance, if I wanted to make a paragraph on a website, I'd use the "p" tag. Most tags have a beginning AND an end tag. The tag of any element you're writing in starts with a less-than symbol, (<) then the tag name, (p) and lastly a greater-than symbol. (>) After this tag, your content would be written. Once you have everything you want after the tag, you have to indicate to the HTML wizards that the line is ended. To do this, you must do the following: Start the same way with the beginning tag, but insert a backslash before the name of the tag. If I am terrible at explaining things, which I know I am, this example may offer some help:
<p>Hello World!</p>This would print out as:
Hello World!
Here are some necessary tags to learn/memorize. Don't worry - the more you use/write in the language, the easier it becomes. There are hundreds of tags in HTML. Nobody expects anyone to memorize them all. In all coding languages, Google is your best friend!
- div - Serves as a separator for different lines
- span - Serves as an inline separator
- a - Hyperlink tag - click HERE is an example
- Example: CLICK ME
- img - Image tag - used for inserting images into a website
- An image tag is a special exception to me saying that "Almost all tags have an ending tag." Do NOT put at the end!
- h1 - Largest sized heading
- Note: h1, h2, h3, h4, h5, and h6 are all different sized titles on a website. Note: the heading tag only goes from 1-6!
- p - Ordinary text tag - This post was written with p tags everywhere!
- hr - horizontal divider on a website
- br - use inside of a text tag to move text to a new line
These are just a few tags that are most frequently used in HTML. This website features many of the available tags in HTML. Here is an example of a good HTML skeleton. Make sure to add structure to your work. (I'll be going over this in more detail later)
A Challenge:
Today, tomorrow, and for the next week, my challenge to fellow Steemians reading this blog: I challenge you to try writing your blogs WITHOUT the text editor; try writing them in HTML for the week! If you are able, feel free to comment a link to your post!
Conclusion
If you have any questions, comment them! I'll answer as quickly as possible. If you liked this new type of post, please comment and upvote! I'd also love some feedback :)
Sources: