Want to learn some HTML?
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:
Nice...i have done those manually like 20 years ago...in this webhosting site called fortunecity.com. i still remember my url by hard.
Wow. That sounds much more difficult writing them that way!
Just a bit of Advice, If you are going to do this again... Please make the text work for people that use dark and light mode. I found it hard to read
The whole post just got erased.
Well, That is Really, REALLY weird. have you tried editing it to put the content back?
Luckily, the full post was saved as a draft
Yeah, That's lucky
Learned all my HTML back when I wrote on my blog on my own website.
Probably forgot it all by now.
Code is like language, you stop speaking it, you forget it.
Indeed
Hey @tbaumer2,
I'm actually glad that you took my suggestion. This is awesome. And I hope to see you make a name for yourself with it.
Anyway, since you are assuming that people attending your class have zero knowledge of codes/languages, it better to make it easier.
Cheers!
#Hug-Challenge!
Great suggestions. Thanks!
@OriginalWorks
The @OriginalWorks bot has determined this post by @tbaumer2 to be original material and upvoted(1.5%) it!
To call @OriginalWorks, simply reply to any post with @originalworks or !originalworks in your message!
@nairadaddy this one's for you :)