Heading tag <h1> to <h6>
Title names are placed inside these tags. The largest (main) heading is marked with <h1> while the smallest title is marked with <h6> tag.
See the Pen
Titles in html by Web programming (@chos)
on CodePen.
Paragraph tag<p>
This tag is used to place inside it plain text that is of a standard size and appearance. This paragraph tag processes the layout of the text before displaying the text, by deleting all empty lines and empty fields and tries to display everything in one line.
See the Pen
<p> tag by Web Programming (@chos)
on CodePen.
<br> tag
We saw that <p> tag always try to display everything in one line, and if we want to “cut” the text at a certain place and transfer the rest of it to the next line, we need to use <br> tag.
See the Pen
<br> tag by Web Programming (@chos)
on CodePen.
Reformatted text <pre>
However, what if we don’t want our <p> tag shapes the text, i.e. what if we really want to keep the empty lines or fields and display the text exactly as we wrote it? Then it is necessary to use <pre> A tag that “knows” that the text has already been sorted (reformatted) and does not sort anything further. See the difference in the following example:
See the Pen
<before> tag by Web programming (@chos)
on CodePen.
Tag for displaying images <img>
This tag provides space for the image within the page, and this tag does not have an end tag ie. it has only the initial one. With this tag, it is not enough to just write his name, but we have to insert some other information along with the name. This additional information is called attributes, and <img> tag has two required attributes:
- srcattribute (which is responsible for defining the image path)
- altattribute (this attribute is responsible for displaying the replacement text if the browser for some reason did not find the image to display it)
<img src="/putanja_slike_folder/naziv_slike.jpg" alt="tekst koji opisuje sliku">
See the Pen
<img> tag by Web programming (@chos)
on CodePen.
Tag for displaying hyperlinks <a>
This tag is used to display links:
- hyperlinks ie. of clickable content that opens a new website when clicked, the address of which is defined in the tag.
- downloadlink, i.e. clickable content that immediately starts the download of the file indicated by the link
The specificity of this tag is the behavior of the mouse, because when we move the mouse over <a> then the appearance of the cursor should change to the so-called pointer type (hand with finger).
“href” attribute
The only binding attribute of this tag is the address (reference) where the link should take the user (in the case of a hyperlink) or the address from which the download should be made (in the case of a download) and it is called href =" "
See the Pen
<a> tag by Web programming (@chos)
on CodePen.
There are multiple attributes that can be placed within the <a> taga, but besides this href =" " binding attribute, we will mention only one more, which is target=" "
“target” attribute
The Target attribute defines more specifically how the link will be displayed
- _self (link opens in same tab)
- _blank (link opens in a new window)
See the Pen
<a > tag + attribute target by Web programming (@chos)
on CodePen.
In addition to the clickable text that leads to a certain internet address, we can also put a click on the image to do the same, see an example:
See the Pen
<a> with image by Webprogramming (@chos)
on CodePen.
download attribute
To enable download from a link, you just need to add the “download” attribute within the <a> tag:
See the Pen
Untitled by Web Programming (@chos)
on CodePen.
It should be noted that this does not work in all browsers!
<en> tag
This tag is used to visually separate the page into multiple units by drawing a horizontal line (horizontal rule).
See the Pen
<en> tag by Web programming (@chos)
on CodePen.
h