HTML cheat sheet
2020.11.10
Notes from JamesO2:
The text below comes default with the Zonelets blog, but I'm keeping it here for my own reference, and for testing purposes.Notes from JamesO2:
It's also possible to write my posts in MarkDown. This text is an example. At the bottom of this post, I'm gonna make a duplicate in a MarkDown block as a sample.
H1 is a Large Heading for Post Titles!
H2 is a Medium Heading
H3 is a Small Heading
The <p> tag is for paragraphs. Paragraphs just like this one! This is an example paragraph.
Here's how you use BOLD text.
And here's how you use italic text.
The <a> tag is for links!- You can make an <ol> like this!
- <ol> stands for "Ordered List"
- That means that the list is numbered!
- Or how about a <ul>, know what that stands for?
- That's right! <ul> is "Unordered List"
- That means that the list uses bullets.
This is an image caption! Huh? It's just a <p> tag! Ah, but we have added the class "caption"! "Classes" allow us to set special styles for certain elements.
Ahhh, back to a regular paragraph. All of that italicized text was making me a bit hoarse.
Wow, that image is smaller and aligned to the right. This text is flowing around it!
Oh, I see... we added two classes to it... small and right! Marina must have set special styles in the CSS file for images with the small and right classes. Goodness gracious, what will she think of next?
You might be confused if you're viewing this on a phone. When the screen gets really small, then the small class images just revert to taking up the whole width (responsive design). Otherwise they'd just be too ridiculously small! But I bet if you rotate your phone to wide view, you'll be able to see the effects of the small and right classes on images...
Hmmm... there's something strange about this image...
Yikes! It's a link!! I guess you can put an <img> tag inside an <a> tag to create an image link!
If you've been following along inside the HTML editor, you might be wondering, what are all those weird codes with stuff in-between & and ;? Those are called escape characters. < means "less than" symbol and > means "greater than" symbol. Those symbols are used in HTML tags. But if I try to write actual HTML tags to talk to you about them, then the computer will get confused. So somtimes we need to speak, quite literally, in code, to get around this. Maybe you are like... a math blogger so I thought I'd just let you know ahead of time. If you get unexpected results, check back over your writing. You might have typed something that to a human is normal but to a computer is confusing!
Well, that's all for now. Keep this file around and use it for reference if you'd like. Happy blogging!
~Marina
H1 is a Large Heading for Post Titles!
H2 is a Medium Heading
H3 is a Small Heading
The <p> tag is for paragraphs. Paragraphs just like this one! This is an example paragraph.
Here's how you use BOLD text.
And here's how you use italic text.
- You can make an <ol> like this!
- <ol> stands for "Ordered List"
- That means that the list is numbered!
- Or how about a <ul>, know what that stands for?
- That's right! <ul> is "Unordered List"
- That means that the list uses bullets.
This is an image caption! Huh? It's just a <p> tag! Ah, but we have added the class "caption"! "Classes" allow us to set special styles for certain elements.
Ahhh, back to a regular paragraph. All of that italicized text was making me a bit hoarse.
Wow, that image is smaller and aligned to the right. This text is flowing around it!
Oh, I see... we added two classes to it... small and right! Marina must have set special styles in the CSS file for images with the small and right classes. Goodness gracious, what will she think of next?
You might be confused if you're viewing this on a phone. When the screen gets really small, then the small class images just revert to taking up the whole width (responsive design). Otherwise they'd just be too ridiculously small! But I bet if you rotate your phone to wide view, you'll be able to see the effects of the small and right classes on images...
Hmmm... there's something strange about this image...
Yikes! It's a link!! I guess you can put an <img> tag inside an <a> tag to create an image link!
If you've been following along inside the HTML editor, you might be wondering, what are all those weird codes with stuff in-between & and ;? Those are called escape characters. < means "less than" symbol and > means "greater than" symbol. Those symbols are used in HTML tags. But if I try to write actual HTML tags to talk to you about them, then the computer will get confused. So somtimes we need to speak, quite literally, in code, to get around this. Maybe you are like... a math blogger so I thought I'd just let you know ahead of time. If you get unexpected results, check back over your writing. You might have typed something that to a human is normal but to a computer is confusing!
Well, that's all for now. Keep this file around and use it for reference if you'd like. Happy blogging!
~Marina
Another Note from JamesO2:
Its really interesting to note that I can just jump between Markdown and pug dynamically like this.
This is incredibly powerful!