HTML TAGS And attributes

CODING USING HTML

HTML is the programming language used by programmers to build websites. It allows you to give your browser instructions.
You use HTML to add text and images to a web page. You also use it to group together pieces of information into lines, paragraphs or sections.
A HTML web page is called a document. It is made up of HTML elements.
Elements are created using small pieces of code called tags.
Tags nearly always come in pairs and surround every piece of content (like a piece of text or an image) on the page. Each tag contains an instruction for your web browser, telling it how to show the element on-screen.
This is why HTML is called a “markup language”. You use tags to mark up each piece of content with an instruction for your browser

What are Tags?

A tag is made up of a piece of code surrounded by two angle brackets (< p >).
The angle brackets are on the same keys as the full stop and comma symbols on your keyboard. Let’s look at an example of a paragraph tag:

This is the < p > paragraph tag. When tags come in pairs, we call the first tag the opening tag and the second tag the closing tag. You can spot a closing tag because it contains a forward slash (/). When your browser reads this code it understands that you are telling it to group the text between the opening and closing < p > tags into a paragraph

HTML Document Structure

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”utf-8″>

<title>Hello World</title>

</head>

<body>

<h1>Hello World</h1>

<p>This is a web page.</p>

</body>

</html>

” <!Doctype html! > ” 

This is called the declaration and it is always the first line of a HTML file.
It tells our browser what version of HTML our page has been coded in.
It is not a HTML tag so it is written with capital letters and it doesn’t need a closing tag.

” <html> ” 

This is the tag and it tells the browser that we have used HTML to code our page.

” <head> ” 

This is the <head> tag. Inside are pieces of content that aren’t displayed in the main <body> of your page, like the title. You can also put instructions that you want your browser to apply to your whole page here.

” <title> ” 

The <title> tag goes inside the <head> tag. The content between the tags will not appear in the main body of our page. It will be the title of the browser window when you open the page in your browser.

” <body> ” 

All the content you want to see displayed in your web page goes inside the <body> tag. So this text about the Monk Diamond will appear on our page when we open the fi le in our web browser.

Exercise 2.1

In the code editor below, Enter the basic document structure along with hello world between the paragraph tag

BUILDING A WEB PAGE WITH HTML TAGS

Now you can write HTML tags, let’s look at how we can use them to code a more complex web page.
In the code editor above we have used the paragraph tag, but a website requires us to learn many more complex tags.
We need to put these new tags between our opening and closing tags. Putting tags inside
other tags is called nesting. Nesting tags allowus to create more exciting page layouts. Let’s look at an example of nesting.
eg:

The heading tag

All HTML documents start with the heading tag. HTML defines six special types of tags for use as headings on a web page.
The six tags are <h1> through <h6>
The intent of these tags is to define divisions and subdivisions in the document, similar to chapters, sections or topics of a book.
Headings form the structure of your web page and the structure of your entire website. Here is an example of a pair of heading tags:
<h1>This is my first heading!</h1>

The h1 tag should be used only once per web page, the rest of the tags can be anything between h2 to h6

The paragraph tag: < p >  and < /p >

The paragraph <p> tag lets you make new paragraphs. The opening tag is <p> and the closing tag is </p>. Everything between the opening and closing <p> tags is grouped together.
Use a new <p> tag every time you want a new paragraph. Look at this example, where we’ve coded two paragraphs:
<p> Congratulations you have just started your coding journey </p>
<p> The first steps always seem the most difficult </p>

The line break tag: < br/ >

The line break <br/> tag lets you start your text on a new line, but without starting a new paragraph. The line break tag is a self-closing HTML tag. Because there is no content to display on-screen, the line break tag is a single tag

Exercise 2.2

In the code editor below input the following using the heading paragraph and line break tags. Code should be entered inside the body.
A HUNDRED YEARS HENCE
A hundred years hence!
Shall I be able to send you
 An iota of joy of this fresh spring morning
The flower that blooms today
The songs that the birds sing The glow of today’s setting sun Filled with my feelings of love

In the code editor below, Enter the basic document structure along with hello world between the paragraph tag

See the Pen br tag by Ankit (@AnkitPathshalaCoding) on CodePen.

The image tag: < img/ >
Now you’ve mastered the paragraph and line break tags, let’s learn how to add an image to our web page. The image tag is another self-closing tag. Inside the tag itself you have to include a piece of information called the source (src) attribute. An image tag looks like this: < img src=”image.jpg” /> The equals sign (=) and double quotes (” “) set the value of the source attribute You have to include the source attribute in the < img /> tag so your browser knows where to fi nd your image. Without it your browser won’t know what to display on-screen. The value of your source attribute can either be set to a file name of a saved image or a URL (web address) of your image.

How to use an image URL 

If there’s an image on the Internet you want to use on your web page, you have to set the value of the source attribute in your <img /> tag to the URL of the image. You fi nd the URL of a picture by right-clicking on it and selecting Copy image URL

Naming an image

If you include an image on your page, you should always give it a name. It helps search engines like Google find your page.
A name is also handy for users who may not be able to download images. To name your image, you need to add the alt attribute after your source attribute.
eg:
< img src=”image.jpg” alt=”name” />

 

Exercise 2.3

In the editor below. Find the image of a bird using google, copy its URL and add it as an image to the editor, also name the image.

See the Pen image tag by Ankit (@AnkitPathshalaCoding) on CodePen.

Attributes

You have been using attributes with tags so far.
But what exactly is an attribute?

Attributes are properties used to provide additional information about an element. All HTML elements have an attribute
eg: ” href, src, width, height “

Attributes are defined within the opening tag, after an element’s name.
Attributes include a name and a value. The format for these attributes consists of the attribute name followed by an equals sign and then a quoted attribute value.
eg: