4. title Attribute
This is a paragraph
If you click the paragraph, you get the title.
5. The lang Attribute
You should always include the lang attribute inside the <html> tag to declare the language of the Web page. This is meant to assist search engines and browsers.
The following example specifies English as the language:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
6. The alt Attribute
The required alt attribute for the <img> tag specifies an alternate text for an image, if the image for some reason cannot be displayed. This can be due to a slow connection, or an error in the src attribute, or if the user uses a screen reader.
Html formatting
Formatting elements were designed to display special types of text:
1.<b> Bold text defines bold text, without any extra importance.
2. <strong> - Important text defines text with strong importance
3. <i> - Italic text defines a part of text in an alternate voice or mood
4. <em> - Emphasized text defines emphasized text i.e. verbal stress
5. <mark> - Marked text defines text that should be marked or highlighted
6. <small> - Smaller text
7. <del> - Deleted text defines text that has been deleted from a document. Browsers will usually strike a line through deleted text
8. <ins> - Inserted text defines a text that has been inserted into a document. Browsers will usually underline inserted text
9. <sub> - Subscript text defines subscript text. Subscript text appears half a character below the normal line. Subscript text can be used for chemical formulas, like H2O
10. <sup> - Superscript text defines superscript text. Superscript text appears half a character above the normal line. Superscript text can be used for footnotes, like WWW[1]
Example-
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><b>This text is bold.</b></p>
<p><strong>This text is important!</strong></p>
<p><i>This text is italic.</i></p>
<p><em>This text is emphasized.</em></p>
<p><small>This is some smaller text.</small></p>
<p>Do not forget to buy <mark>milk</mark> today.</p>
<p>My favorite color is <del>blue</del> red.</p>
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
<p>This is <sub>subscripted</sub> text.</p>
<p>This is <sup>superscripted</sup> text.</p>
HTML Comment Tag
Comments are not displayed by the browser, but they can help document your HTML source code.
Syntax:
<!-- Write your comments here -->
There is an exclamation point (!) in the start tag, but not in the end tag.
Hide Inline Content- Comments can be used to hide parts in the middle of the HTML code.
Example
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Style the header */
header {
background-color: #666;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}
/* Create two columns/boxes that floats next to each other */
nav {
float: left;
width: 30%;
height: 300px; /* only for demonstration, should be removed */
background: #ccc;
padding: 20px;
}
/* Style the list inside the menu */
nav ul {
list-style-type: none;
padding: 0;
}
article {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px; /* only for demonstration, should be removed */
}
/* Clear floats after the columns */
section::after {
content: "";
display: table;
clear: both;
}
/* Style the footer */
footer {
background-color: #777;
padding: 10px;
text-align: center;
color: white;
}
/* Responsive layout - makes the two columns/boxes stack on top
of each other instead of next to
each other, on small screens */
@media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
</style></head>
<body>
<h2>CSS Layout Float</h2>
<p>In this example, we have created a header, two columns/boxes and a footer.
On smaller screens, the columns will stack on top of each other.</p>
<p>Resize the browser window to see the responsive effect
(you will learn more about this in our next chapter - HTML Responsive.)</p>
<header> <h2>Cities</h2> </header> <section> <nav>
<ul>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokyo</a></li>
</ul>
</nav>
<article>
<h1>London</h1>
<p>London is the capital city of England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major
settlement for two millennia, its history going back to its
founding by the Romans,who named it Londinium.</p>
</article>
</section>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
HTML Hyperlinks
- HTML links are hyperlinks. You can click on a link and jump to another
document. When you move the mouse over a link, the mouse arrow will turn into a little hand. The
HTML <a> tag defines a hyperlink. It has
the following syntax: <a href="url" >link text</a> Use the <a> element to
define a link Use the href attribute to define the link address Use the target attribute to
define where to open the linked document Use
the <img> element (inside <a>) to use an image as a link Use the mailto: scheme
inside the href attribute to create a link that opens the user 's email program By default,
links will appear as follows in all browsers:
An unvisited link is underlined and blue A visited link is underlined and purple An active link
is underlined and red The target Attribute By default, the linked page will be displayed in the
current browser window. To change this,
you must specify another target for the link. The target attribute specifies where to open the
linked document. The target attribute can have one of the following values:,
- _self - Default. Opens the document in the same window/tab as it was clicked
- _blank - Opens the document in a new window or tab _parent - Opens the document in the parent frame
- _top - Opens the document in the full body of the window
Example :
<!DOCTYPE html>
<html>
<body>
<h1>HTML Links</h1>
<p>
<a href="https://www.goolge.com/" >Visit goolge!</a>
</p>
<a href="https://www.kamlesh1119.org/" target="_blank">
</a>
</body>
</html>
Use an Image as a Link To use an image as a link, just put the
<img> tag inside the <a> tag
<!DOCTYPE html>
<html>
<body>
<h2>Image as a Link</h2>
<p>The image below is a link. Try to click on it.</p>
<a href="https://www.rgpv.ac.in/" >
<img src="smiley.gif"
style="width:42px;height:42px;" ></a>
</body>
</html>
Preformatted
i = 0;
while (!deck.isInOrder()) {
print 'Iteration ' + i;
deck.shuffle();
i++;
}
print 'It took ' + i + ' iterations to sort the deck.';