HTML
INTRO:-
Html is the standard markup language for creating
Web pages.
➮Html describes the structure of web pages using markup
➮Html elements are the building blocks of Html pages.
➮Html elements are represented by tags.
➮Browsers do not display the Html tags but use them to
render the content of the page.
What area unit tags and attributes?
Tags and attributes area unit the idea of Html.
They work alone, however, perform totally different functions.
What are HTML tags?
Tags are used to mark up the beginning of an Html element
and they are closed in angle brackets.
<h1> and </h1>
1. <!DOCTYPE html>
You’ll need this tag at the beginning of every HTML document you create. It ensures that a browser knows that it’s reading HTML and that it expects HTML5, the latest version.
Even though this isn’t actually an HTML tag, it’s still a good one to know.
What are HTML attributes?
You’ll need this tag at the beginning of every HTML document you create. It ensures that a browser knows that it’s reading HTML and that it expects HTML5, the latest version.
2. <html>
This is another tag that tells a browser that it’s reading HTML. The <html> tag goes straight after the DOCTYPE tag, and you close it with a </html> tag right at the end of your file. Everything else in your document goes between these tags.
3. <head>
The <head> tag starts the header section of your file. The stuff that goes on here doesn’t appear on your webpage. Instead, it contains metadata for search engines and info for your browser.
For basic pages, the <head> tag will contain your title, and that’s about it. But there are a few other things that you can include, which we’ll go over in a moment.
4. <title>
This tag sets the title of your page. All you need to do is put your title in the tag and close it, like this (I’ve included the header tags, as well):
<head>
<title>My Website</title>
</head>
That’s the name that will be displayed as the tab title when it’s opened in a browser.
5. <meta>
Like the title tag, metadata is put in the header area of your page. Metadata is primarily used by search engines and is information about what’s on your page. There are a number of different meta fields, but these are some of the most commonly used:
description—A basic description of your page.
keywords—A selection of keywords applicable to your page.
author—The author of your page.
viewport—A tag for ensuring that your page looks good on all devices.
Here’s an example that might apply to this page:
<meta name="description" content="A basic HTML tutorial">
<meta name="keywords" content="HTML,code,tags">
<meta name="author" content="MakeUseOf">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The “viewport” tag should always have “width=device-width, initial-scale=1.0” as the content to make sure your page displays well on mobile and desktop devices.
6. <body>
After you close the header section, you get to the body. You open this with the <body> tag, and close it with the </body> tag. That goes right at the end of your file, just before the </html> tag.
All of the content of your webpage goes in between these tags. It’s as simple as it sounds:
<body>
Everything you want displayed on your page.
</body>
7. <h1>
The <h1> tag defines a level-one header on your page. This will usually be the title, and there will ideally only be one on each page.
<h2> defines level-two headers such as section headers, <h3> level-three sub-headers, and so on, down to <h6>. As an example, the names of the tags in this article are level-two headers.
<h1>Big and Important Header</h1>
<h2>Slightly Less Big Header</h2>
<h3>Sub-Header</h3>
8. <p>
The paragraph tag starts a new paragraph. This usually inserts two line breaks.
Look, for example, at the break between the previous line and this one. That’s what a <p> tag will do.
<p>Your first paragraph.</p>
<p>Your second paragraph.</p>
You can also use CSS styles in your paragraph tags, like this one which changes the text size:
<p style="font-size: 120%;">20% larger text</p>
9. <br>
The line break tag inserts a single line break:
<p>The first line.<br>
The second line (close to the first one).</p>
Working in a similar way is the <hr> tag. This draws a horizontal line on your page and is good for separating sections of text.
10. <strong>
This tag defines important text. In general, that means it will be bold. However, it’s possible to use CSS to make <strong> text display differently.
However, you can safely use <strong> to bold text.
<strong>Very important things you want to say.</strong>
11. <em>
Like <b> and <strong>, <em> and <i> are related. The <em> tag identifies emphasized text, which generally means it will get italicized. Again, there’s the possibility that CSS will make emphasized text display differently.
<em>An emphasized line.</em>
12. <a>
The <a>, or anchor, tag lets you create links. A simple link looks like this:
<a href="//www.makeuseof.com/>Go to MakeUseOf</a>
13. <img>
If you want to embed an image in your page, you’ll need to use the image tag. You’ll normally use it in conjunction with the “src” attribute. This specifies the source of the image, like this:
<img src="wp-content/uploads/2019/04/sunlit-birds.jpg">
Other attributes are available, such as “height,” “width,” and “alt.” Here’s how that might look:
<img src="wp-content/uploads/2019/04/sunlit-birds.jpg" alt="the name of your image">
14. <ol>
The ordered list tag lets you create an ordered list. In general, that means you’ll get a numbered list. Each item in the list needs a list item tag (<li>), so your list will look like this:
<ol>
<li>First thing</li>
<li>Second thing</li>
<li>Third thing</li>
</ol>
15. <ul>
The unordered list is much simpler than its ordered counterpart. It’s simply a bulleted list.
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
16. <table>
While using tables for formatting is frowned upon, there are plenty of times when you’ll want to use rows and columns to segment information on your page. Several tags are needed to get a table to work. Here’s the sample HTML code:
<table>
<tbody>
<tr>
<th>1st column</th>
<th>2nd column</th>
</tr>
<tr>
<td>Row 1, column 1</td>
<td>Row 1, column 2</td>
</tr>
<td>Row 2, column 1</td>
<td>Row 2, column 2</td>
</tbody>
</table>
INTRO:-
Html is the standard markup language for creating
Web pages.
➮Html describes the structure of web pages using markup
➮Html elements are the building blocks of Html pages.
➮Html elements are represented by tags.
➮Browsers do not display the Html tags but use them to
render the content of the page.
What area unit tags and attributes?
Tags and attributes area unit the idea of Html.
They work alone, however, perform totally different functions.
Tags are used to mark up the beginning of an Html element
and they are closed in angle brackets.
<h1> and </h1>
1. <!DOCTYPE html>
You’ll need this tag at the beginning of every HTML document you create. It ensures that a browser knows that it’s reading HTML and that it expects HTML5, the latest version.
What are HTML attributes?
You’ll need this tag at the beginning of every HTML document you create. It ensures that a browser knows that it’s reading HTML and that it expects HTML5, the latest version.
2. <html>
This is another tag that tells a browser that it’s reading HTML. The <html> tag goes straight after the DOCTYPE tag, and you close it with a </html> tag right at the end of your file. Everything else in your document goes between these tags.
3. <head>
The <head> tag starts the header section of your file. The stuff that goes on here doesn’t appear on your webpage. Instead, it contains metadata for search engines and info for your browser.
For basic pages, the <head> tag will contain your title, and that’s about it. But there are a few other things that you can include, which we’ll go over in a moment.
4. <title>
This tag sets the title of your page. All you need to do is put your title in the tag and close it, like this (I’ve included the header tags, as well):
<head>
<title>My Website</title>
</head>
That’s the name that will be displayed as the tab title when it’s opened in a browser.
5. <meta>
Like the title tag, metadata is put in the header area of your page. Metadata is primarily used by search engines and is information about what’s on your page. There are a number of different meta fields, but these are some of the most commonly used:
description—A basic description of your page.
keywords—A selection of keywords applicable to your page.
author—The author of your page.
viewport—A tag for ensuring that your page looks good on all devices.
Here’s an example that might apply to this page:
<meta name="description" content="A basic HTML tutorial">
<meta name="keywords" content="HTML,code,tags">
<meta name="author" content="MakeUseOf">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The “viewport” tag should always have “width=device-width, initial-scale=1.0” as the content to make sure your page displays well on mobile and desktop devices.
6. <body>
After you close the header section, you get to the body. You open this with the <body> tag, and close it with the </body> tag. That goes right at the end of your file, just before the </html> tag.
All of the content of your webpage goes in between these tags. It’s as simple as it sounds:
<body>
Everything you want displayed on your page.
</body>
7. <h1>
The <h1> tag defines a level-one header on your page. This will usually be the title, and there will ideally only be one on each page.
<h2> defines level-two headers such as section headers, <h3> level-three sub-headers, and so on, down to <h6>. As an example, the names of the tags in this article are level-two headers.
<h1>Big and Important Header</h1>
<h2>Slightly Less Big Header</h2>
<h3>Sub-Header</h3>
8. <p>
The paragraph tag starts a new paragraph. This usually inserts two line breaks.
Look, for example, at the break between the previous line and this one. That’s what a <p> tag will do.
<p>Your first paragraph.</p>
<p>Your second paragraph.</p>
You can also use CSS styles in your paragraph tags, like this one which changes the text size:
<p style="font-size: 120%;">20% larger text</p>
9. <br>
The line break tag inserts a single line break:
<p>The first line.<br>
The second line (close to the first one).</p>
Working in a similar way is the <hr> tag. This draws a horizontal line on your page and is good for separating sections of text.
10. <strong>
This tag defines important text. In general, that means it will be bold. However, it’s possible to use CSS to make <strong> text display differently.
However, you can safely use <strong> to bold text.
<strong>Very important things you want to say.</strong>
11. <em>
Like <b> and <strong>, <em> and <i> are related. The <em> tag identifies emphasized text, which generally means it will get italicized. Again, there’s the possibility that CSS will make emphasized text display differently.
<em>An emphasized line.</em>
12. <a>
The <a>, or anchor, tag lets you create links. A simple link looks like this:
<a href="//www.makeuseof.com/>Go to MakeUseOf</a>
13. <img>
If you want to embed an image in your page, you’ll need to use the image tag. You’ll normally use it in conjunction with the “src” attribute. This specifies the source of the image, like this:
<img src="wp-content/uploads/2019/04/sunlit-birds.jpg">
Other attributes are available, such as “height,” “width,” and “alt.” Here’s how that might look:
<img src="wp-content/uploads/2019/04/sunlit-birds.jpg" alt="the name of your image">
14. <ol>
The ordered list tag lets you create an ordered list. In general, that means you’ll get a numbered list. Each item in the list needs a list item tag (<li>), so your list will look like this:
<ol>
<li>First thing</li>
<li>Second thing</li>
<li>Third thing</li>
</ol>
15. <ul>
The unordered list is much simpler than its ordered counterpart. It’s simply a bulleted list.
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
16. <table>
While using tables for formatting is frowned upon, there are plenty of times when you’ll want to use rows and columns to segment information on your page. Several tags are needed to get a table to work. Here’s the sample HTML code:
<table>
<tbody>
<tr>
<th>1st column</th>
<th>2nd column</th>
</tr>
<tr>
<td>Row 1, column 1</td>
<td>Row 1, column 2</td>
</tr>
<td>Row 2, column 1</td>
<td>Row 2, column 2</td>
</tbody>
</table>
No comments:
Post a Comment