|
HTML lesson 4 - a few more tags
Welcome to our next html lesson! As always, I'm really glad you're reading my tutorials and that I can help people who are new to all of this! If you're new here, you can find my latest posts in my blog, where I explain everything from the very beginning. It's really easy, everybody can learn it step by step.
This time I'll show you the most basic html tags. You already know - the <p> (paragraph) tag to display a paragraph of text
- the <style> tag to define CSS classes for your HTML elements
- the <a> (anchor) tag for external links
- the <img> (image) tag for pictures and gifs.
The line break If you read my last post, you've already seen this one a few times, but I always told you to remove it. Now I'll finally tell you what the <br> tag actually does. It's another self closing tag (remember the <img> tag), so it's simply written this way: <br>
You can use it to make a line break inside your text. It's smaller than the one made by the <p> tags and it's also useful for small amounts of text. Imagine you want to write your favorite bands inside your music section. You can write it like this in your profile editor: My Chemical Romance
Hawthorne Heights
Rise Against
Tool But because you're writing in raw HTML, it will be displayed like this:  Of course you could make a <p> tag around each band, but then there would be big gaps beetween them and it wouldn't look that good. The easier and better way is to put a <br> tag after each band name. My Chemical Romance<br>
Hawthorne Heights<br>
Rise Against<br>
Tool<br>
And it will look like this: 
Highlighting important words The <strong> tag is useful to point out a word of a text that is important or that should be bold for another reason. You can simply wrap it around one or more words like this: <p>This word is <strong>important</strong>!</p>
And it will look like this: This word is important! You can also use the <b> tag in the exact same way, it stands for bold and does pretty much the same thing. Another text tag You may wonder what we need another tag for text now. We already have the <p> tag, isn't that enough? Well, actually, it often isn't.
The <span> tag does nothing more or less than containing text. Sounds useless? You didn't think about the possibilities to style text with CSS then. Imagine you want to write a paragraph about your favorite bands and you want to make the band names better visible by giving them a light green color. The hex color code we'll use is #c0ff33 because I like coffee, deal with it.
The code of the plain text will look like this: <p>
I love My Chemical Romance because of the emotions inside their sounds and
lyrics, and because Gerard Way is a real icon for me.<br>
But Tool is also one of my favorite bands because of their different sound,
their incredible talent and some of their really good and deep lyrics.
</p>
The next thing you do is to wrap a <span> tag around the band names. Then, you give them a style property where you define the color inside (I explained how it works in our first lesson). Now your code looks like this: <p>
I love <span style="color: #c0ff33;">My Chemical Romance</span> because of the emotions inside their sounds and
lyrics, and because Gerard Way is a real icon for me.<br>
But <span style="color: #c0ff33;">Tool</span> is also one of my favorite bands because of their different sound,
their incredible talent and some of their really good and deep lyrics.
</p>
And it should look like this: 
Headings There are 6 different sizes of headings you can use in HTML. They look like this: <h[1-6]>. <h1> is the biggest, <h6> the smallest one. Let me show you how it works. <h1>Another headline</h1>
<h2>Another headline</h2>
<h3>Another headline</h3>
<h4>Another headline</h4>
<h5>Another headline</h5>
<h6>Another headline</h6>
It will look like this: 
For the headlines in this post, I use <h3>.
Ordered and unordered lists Sometimes you may want to display a list of things like I did above with the HTML tags you already learned. There are three tags you need to know here. - The
<ul> tag. It's used for creating an unordered list. The list at the beginning of my post is an unordered list. - The
<ol> tag. It's used for ordered lists. This is an ordered list. - The
<li> tag. It's one list item of any list. We could write the names of our favorite bands again, but this time, we won't need the <br> tag, we'll use an unordered list instead. You create a <ul> tag, then 4 <li> tags for the four bands inside it. Inside the <li> tags, you write the names. <ul>
<li>My Chemical Romance</li>
<li>Hawthorne Heights</li>
<li>Rise Against</li>
<li>Tool</li>
</ul>
And it's displayed like this: - My Chemical Romance
- Hawthorne Heights
- Rise Against
- Tool
It work exactly the same way with ordered lists. You just use the <ol> tag instead of the <ul> tag. There's a lot of stuff you can do with lists, especially with the power of CSS. I think that's a bit too much for this basic tutorial, but if you want me to do an extra part about them, pls let me know ^^
We're done for now, I'm sure this was a lot for you. Try it out on your profile and read about them on w3schools to learn what else is possible!
There are still some things I want to show you, but the most important things are covered now. If there's more you're interested in and you want me to do tutorials about, pls write it in the comments and I'll do my best to do it! ^^
In the next post I'll show you how you can play music on your profile!
0 Comments
|
