HTML (Hypertext Markup Language)
HTML code tells web browsers how to display content like images, links, and text on a webpages of a website like Gadgets Study.
HTML is a computer markup language that structures all the webpages on the internet.
 |
| HTML 1 |
Tags:
In HTML, things revolve around tags. Tags start with <, followed by a keyword, then finished with a >.
For example, <button> creates a button.
<button> is a opening tag. It tells the web browser we want to start displaying a button.
The closing tag </button> comes after the opening tag <button>.
Most tags in HTML comes in a pair, they have an opening tag and a closing tag.
Example: <button> I'm Ready to Code </button>
This code displays a button with the text "I'm Ready to Code" on a website.
Text and Headings:
In HTML, the keywords of some tags are obvious, but there are some tags that use a shortened form.
For example, we use <p> for a paragraph.
<p> tag creates a paragraph.
Coding a paragraph is very similar to coding a button. We need an opening tag, followed by text, and a closing tag.
We can create headings in HTML to emphasize certain texts.
There are 6 size in HTML, from h1 to h6.
The heading tag emphasize texts by making them bigger and bolder.
h1 is the biggest and boldest and h6 is the smallest and least bold.
Example: <h1>Gadgets Study</h1>
<h2>Gadgets Study</h2>
<h3>Gadgets Study</h3>
<h4>Gadgets Study</h4>
<h5>Gadgets Study</h5>
<h6>Gadgets Study</h6>
Output:
Gadgets Study
Gadgets Study
Gadgets Study
Gadgets Study
Gadgets Study
Gadgets Study
Line Breaks, Emphasis and Important:
Sometimes we want to format paragraphs with line breaks.
For example,
In a garden fair, with colors so bright, Tiny buds bloom in the morning light. Butterflies dance, and birds sing sweet tunes, Nature's symphony, beneath the crescent moon.
This song would look much better if In a garden fair, with colors so bright, appeared on one line, Tiny buds bloom in the morning light. on the next and so on...
We can separate lines with the help of the line break tag <br> :
<p> In a garden fair, with colors so bright, <br>
Tiny buds bloom in the morning light. <br>
Butterflies dance, and birds sing sweet tunes, <br>
Nature's symphony, beneath the crescent moon.
</p>
Output:
In a garden fair, with colors so bright,
Tiny buds bloom in the morning light.
Butterflies dance, and birds sing sweet tunes,
Nature's symphony, beneath the crescent moon.
<br> is an empty tag.
Empty tags have no closing tag and no content. They are also called self-closing tags.
There's an element for giving emphasis to text, it makes it italic. It's called the em element. Add <em> and </em> .
To define texts as important, we use the <strong> and </strong> tags. It makes text bold.
Links and Attributes:
Links work to combine webpages into websites and other webpages. To start creating a link, we add the text in between the <a> and </a> tags. This won't highlight the text yet, like this: gadgetsstudy.com .
<a> stands for Anchor tag.
To link the text to a webpage, we add href="URL" along with a URL (Uniform Resource Locator). href is short for "hypertext reference".
href is an attribute. All attributes have two things in common:
i. They provide extra information, and
ii. They go inside the opening tag.
Attributes are added after the name of the tag, and before the closing sign > .
We link to a webpage by adding = after the attribute. We then add a URL as a value in between quotes.
Example: <a href = "https://gadgetsstudy.com"> Gadgets Study </a>
Output: Gadgets Study
Adding Images
In the next part, we're gonna discuss how to add images in HTML!