BASICS OF HTML LANGUAGE: PART 2
in the previous chapter, we saw together how to make our first web page using HTML. In this chapter, we will see more tags and we will improve our web page by adding some links and list, we will also see how to modify our paragraph.
I-ADD LINKS
to add links inside a web page it's very simple, we will use the <a> tag, and this is how to create it :
<a href="#">this is a link</a>
as you can see we used "href" attribute, this attribute will specify the URL or the path of our link.
Like <img> tag, we can use the <a> tag to link our web page to an existing web page using its URL like this :
<a href="https://www.google.com">this is a link</a>
or we can also link pages inside your project's folder like this:
<a href="page/gallery.html">this is a link</a>
and that's it.
I will also show you another interesting attribute of the <a> tag.
as you can see when you click the link it will quit your web page and will go to the web page linked to your web site, imagine now that you want that your visitor opens the link in another tab or in another window, in that case we will use the "target" attribute.
inside the " target " attribute we can only use these values:
- _Blank: Opens the linked document in a new window or tab
- _Self: Opens the linked document in the same frame as it was clicked (this is default)
- _parent: Opens the linked document in the parent frame
- _top: Opens the linked document in the full body of the window
- framename: Opens the linked document in a named frame
for example, to create a link that will open in another tab we will use this code
<a href="page/gallery.html" target="_blank">this is a link</a>
now we have finished with links, let's pass to the next tag and its list
II-list in HTML
before we start coding, let me tell you that there are two main types of list and they are :
- unordered list using <ul> tag
- ordered list using <ol> tag
<ul> and <ol> tags are a bloc type tags so they had it's closing tag </ul> and <ol>.
As you know every list is composed of items, they are represented by the <li> tag.
let's see an example where we will create an unordered list, we will make a shopping list for example :
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>bread</li>
</ul>
 |
| result |
And that's it, its very simple to create a list in HTML, to make an ordered list, we will use the same way but we will replace <ul> by <ol>
III-phrase tag
phrase tag allows us to apply some modification to our text like make it bold, or in italic, it's important to learn to make our paragraph more clear.
we will see the most important one like <strong></strong> , <em> ...
this is a list of the main phrase tag and what it does:
- <strong> : define important text and display it in bold
- <em>: render as emphasized text
- <b>: render bold text
- <mark> : mark down the text
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>my website</title> </head> <body> <strong>strong text</strong><br> <em>emphasis text</em><br> <b>Bold text</b><br> <mark>marked text</mark><br> </body> </html>
this is a little example of phrase-tag
for the end let me explain you the <br> tag, it simply allows us to jump to another line like the " enter " key.
i hope you loved this tutorial, in the next chapter we will see divs and span, two of the most important tag that we will use it frequently if you want to learn more about tags and learn other tags, i invite you ti visit w3school and see and test by yourself all kind of tag.
LEARN HOW TO MAKE A WEBSITE USING HTML AND CSS: PART 3
Reviewed by Medics
on
March 18, 2019
Rating:
Reviewed by Medics
on
March 18, 2019
Rating:
No comments: