Post by hymas on Sept 3, 2017 14:11:18 GMT
Hello, and I was learning new html features so, I found my old 2014 lessons. I know they are ugly but anyway.
1.
2.
3.
4.
The code:
I find this funny somehow.
1.
2.
3.
4.
The code:
<DOCTYPE html!>
<html>
<head>
<title>about:blank</title>
</head>
<body>
<h1>Heading</h1>
<p>Paragraph goes here</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed elementum orci. Integer in odio tristique, sodales sem sit amet, euismod turpis. Praesent blandit nisi sed mauris fringilla, rutrum porta justo gravida. Nullam quis quam vitae purus viverra facilisis eu vitae velit. Maecenas pretium ullamcorper elit vitae porta. Donec purus mi, pulvinar vel nibh ut, mattis pulvinar ante. Sed quis ligula vitae mauris fermentum sollicitudin tincidunt at libero. Nullam aliquam dui sit amet faucibus porttitor.
Nam nec nisi facilisis velit scelerisque scelerisque id consectetur diam. Cras pretium eros sed mauris tincidunt, non lobortis est auctor. Donec venenatis nulla lacus, pretium volutpat arcu facilisis in. In hac habitasse platea dictumst. Nullam ac arcu id massa eleifend dapibus in sit amet quam. Praesent nec gravida elit, sed elementum orci. Proin et nisl consectetur sapien aliquam interdum. Aenean in ipsum lacinia, tincidunt orci id, consequat massa. Proin malesuada velit at nisl convallis porta. Phasellus ut bibendum diam.
Vivamus sed mattis arcu. Sed egestas arcu at dolor suscipit condimentum. Praesent enim nibh, ullamcorper quis tempor in, rhoncus sit amet ligula. Proin tempus pulvinar erat, sit amet viverra eros pretium euismod. Proin laoreet leo orci, vel tincidunt sem lacinia vitae. Maecenas at leo non magna semper malesuada. Phasellus viverra varius augue. Aenean suscipit facilisis dolor rhoncus fermentum.
Nunc fringilla est elit, a fringilla elit luctus ut. Mauris nisl lorem, porta in venenatis et, vulputate ultrices lorem. Cras sed urna eget turpis gravida gravida sed in justo. Integer sit amet magna sit amet augue venenatis placerat et ut velit. In pretium purus sit amet mauris posuere, et congue sapien posuere. Integer viverra ante id ipsum fringilla ornare. Donec pulvinar est at sapien fringilla consequat. Quisque ultricies sapien posuere tellus venenatis, et lacinia neque malesuada. Fusce mattis tellus eu massa condimentum, eu mollis augue sodales. Praesent cursus massa quis purus pulvinar, in vestibulum massa pulvinar. Nulla fermentum ipsum tortor, ut molestie metus fringilla non. Curabitur vel nunc eu sem fermentum molestie et eget nisi. Nunc ligula risus, consequat congue pretium nec, mollis eu sem. Proin pharetra magna et augue malesuada, at rhoncus felis tristique. Nulla rhoncus nulla ut aliquam tincidunt. Integer finibus convallis nisl, sit amet posuere leo dapibus non.
Duis tempus vestibulum ipsum sit amet pellentesque. Maecenas non euismod ex. Duis ultrices dolor vel massa sagittis vestibulum. Praesent maximus sem elit, sed tempor mi dictum ac. Aliquam ut eros sem. Nullam condimentum dui vitae purus interdum fermentum. Nam et egestas nibh, ut faucibus purus. Integer dignissim, metus sed bibendum finibus, tortor dolor maximus tortor, eget blandit nunc lacus a turpis. Fusce feugiat, lacus id condimentum aliquam, sem lectus scelerisque orci, sed suscipit nisl lacus ac nibh. Fusce nec accumsan ante, sed finibus enim. Quisque nunc erat, elementum in purus sit amet, consectetur pretium neque. Phasellus enim nibh, aliquam vel porttitor id, bibendum luctus turpis. Donec eu ligula eget nunc convallis ornare vitae nec odio. In volutpat tincidunt ante a sodales.</p>
<h1>First</h1>
<h2>Second</h2>
<h3>Third</h3>
<a href="https://www.youtube.com/watch?v=TN_8D-79BZg">This is a link, song</a>
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
<tagname>Content text</tagname>
<h1>Fresh start</h1>
<html lang="en-US">
Another test from w3schools..
<p title="I'm a tooltip">
This is a paragraph - title.
</p>
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:36px;">I am big</p>
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p><b>Bold</b></p>
<p><i>Italic</i></p>
<p>Sub<sub>script</sub> & superscript</sub></p>
<p><strong>Strong text</strong></p>
<em>Emph</em>
<h2>HTML <mark>Marked</mark></h2>
<p>This text is <del>added</del></p>
<p>Underlines are <ins>cool</ins></p>
<h3>This text is <sub>subscripted</sub></h3>
<h4>And this text is <sup>superscripted</sup></h4>
<p>This text is abbr'd - <abbr title="Abbr Title">SO</abbr> This text is uses abbr title. </p>
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
<h3>Fresh start, again!</h3>
And now, we will talk backwards!
<bdo dir="rtl">Magic, this is bdo dir magic!</bdo>
<!-- This is a comment -->
<p>Paragraph!.</p>
<!-- Test -->
<h2 style="background-color:red">
Background-color set by using red
</h2>
<h2 style="background-color:orange">
Background-color set by using orange
</h2>
<h2 style="background-color:yellow">
Background-color set by using yellow
</h2>
<h2 style="background-color:blue;color:white">
Background-color set by using blue
</h2>
<h2 style="background-color:cyan">
Background-color set by using cyan
</h2>
<h2 style="background-color:rgb(255,0,0)">
Background-color set by using rgb(255,0,0)
</h2>
<h2 style="background-color:rgb(0,255,0)">
Background-color set by using rgb(0,255,0)
</h2>
<h2 style="background-color:rgb(0,0,255)">
Background-color set by using rgb(0,0,255)
</h2>
<h2 style="background-color:rgb(255,255,0)">
Background-color set by using rgb(255,255,0)
</h2>
<h2 style="background-color:rgb(255,0,255)">
Background-color set by using rgb(255,0,255)
</h2>
<h2 style="background-color:rgb(0,255,255)">
Background-color set by using rgb(0,255,255)
</h2>
^used rgb & styles.
<h4>Fresh start!</h4>
<h1 style="color:blue;">Colored heading!</h1>
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>
</head>
<body>
<p>You can change the default colors of links</p>
<a href="B27.jpg" target="_blank">HTML Images</a>
</body>
<p>The image is a link. You can click on it.</p>
<a href="B27.jpg">
<img src="B27.jpg" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>
<p><a href="#C4">Jump to Chapter 4</a></p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Bill Gates</td>
<td>Microsoftia.</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
<h2>An unordered drink list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<h1>My <span style="color:green">Important</span> Heading</h1>
<h7>Fresh start!</h7>
<p>That's the new paragraph, congratulations!</p>
<h3>This text is <sub>subscripted</sub> again! and now <sup>superscripted</sup></h3>
<p>Paragraph has no <mark>limits</mark>!<p>
<a href="http://sharafeev.net" target="_blank">sharafeev.net</a>
<h3>Fresh start!</h3>
<p>I like <span style="color:yellow">Fruits</span> and my friend likes tasty <span style="color:red">Apples</span></p>
<h4>Another <mark>test</mark> from my <mark>lessons</mark></h6>
<iframe src="demo_iframe.htm" style="border:none;"></iframe>
<p><i>Italic font is so <mark><i>italic</mark></i></p>
<p><b>Bold font is so <mark><b>perfect!</mark</b></p>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to show date and time.</button>
<p id="demo"></p>
<p>JavaScript can change the content of an HTML element:</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="demo">This is a demonstration.</p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World, it's me!";
}
</script>
<p>This is my <span style="color:green"</span> html code! </p>
<h1>Fresh <mark>start!</mark></h1>
<p>Let's try <ins><mark>something</ins></mark> else!
<h4>That's the <b>bold</b> font!</h4>
<bdo dir="rtl">Backward tricks!</bdo>
<h1>Repeat</h1>
<p>Fresh start</p>
<head>
<body>
<p>Let's contine the lessons!</p>
</head>
</body>
<address>
John Doe<br>
You can visit on us<br>
Our telephone number is<br>
Also check our menu, it's on: <br>
145 Box<br>
</address>
<h1><mark>Marked text!</mark></h1>
<p><emp>Emph font!</emp></p>
<p><i>Italic font!</i></p>
<p><b>Bold font!</b></p>
<p><ins>Underlines</p></ins>
<p><sub>Subscript!</sub></p>
<bdo dir="rtl">Focus</bdo>
<h3>Fresh start!</h3>
<a href="http://yandex.com" target="_blank">yandex.com</a>
</i>
</b>
<h1>That's the test</h1>
<p><b>Alan Walker</b></p>
<p><i>Faded</i></p>
</i>
<h2>Start making new creations!</h2>
<mark><a href="http://minecraft.net" target="_blank">minecraft.net</mark></a>
<h1>Fresh.</h1>
<bdo dir="rtl">HTML</bdo>
<p><ins><mark>Perfectionist</p></ins></mark>
<p>This test web-site is so <ins>irrelevant</ins></p>
<html>
<head>
<title>about:blank</title>
</head>
<body>
<h1>Heading</h1>
<p>Paragraph goes here</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed elementum orci. Integer in odio tristique, sodales sem sit amet, euismod turpis. Praesent blandit nisi sed mauris fringilla, rutrum porta justo gravida. Nullam quis quam vitae purus viverra facilisis eu vitae velit. Maecenas pretium ullamcorper elit vitae porta. Donec purus mi, pulvinar vel nibh ut, mattis pulvinar ante. Sed quis ligula vitae mauris fermentum sollicitudin tincidunt at libero. Nullam aliquam dui sit amet faucibus porttitor.
Nam nec nisi facilisis velit scelerisque scelerisque id consectetur diam. Cras pretium eros sed mauris tincidunt, non lobortis est auctor. Donec venenatis nulla lacus, pretium volutpat arcu facilisis in. In hac habitasse platea dictumst. Nullam ac arcu id massa eleifend dapibus in sit amet quam. Praesent nec gravida elit, sed elementum orci. Proin et nisl consectetur sapien aliquam interdum. Aenean in ipsum lacinia, tincidunt orci id, consequat massa. Proin malesuada velit at nisl convallis porta. Phasellus ut bibendum diam.
Vivamus sed mattis arcu. Sed egestas arcu at dolor suscipit condimentum. Praesent enim nibh, ullamcorper quis tempor in, rhoncus sit amet ligula. Proin tempus pulvinar erat, sit amet viverra eros pretium euismod. Proin laoreet leo orci, vel tincidunt sem lacinia vitae. Maecenas at leo non magna semper malesuada. Phasellus viverra varius augue. Aenean suscipit facilisis dolor rhoncus fermentum.
Nunc fringilla est elit, a fringilla elit luctus ut. Mauris nisl lorem, porta in venenatis et, vulputate ultrices lorem. Cras sed urna eget turpis gravida gravida sed in justo. Integer sit amet magna sit amet augue venenatis placerat et ut velit. In pretium purus sit amet mauris posuere, et congue sapien posuere. Integer viverra ante id ipsum fringilla ornare. Donec pulvinar est at sapien fringilla consequat. Quisque ultricies sapien posuere tellus venenatis, et lacinia neque malesuada. Fusce mattis tellus eu massa condimentum, eu mollis augue sodales. Praesent cursus massa quis purus pulvinar, in vestibulum massa pulvinar. Nulla fermentum ipsum tortor, ut molestie metus fringilla non. Curabitur vel nunc eu sem fermentum molestie et eget nisi. Nunc ligula risus, consequat congue pretium nec, mollis eu sem. Proin pharetra magna et augue malesuada, at rhoncus felis tristique. Nulla rhoncus nulla ut aliquam tincidunt. Integer finibus convallis nisl, sit amet posuere leo dapibus non.
Duis tempus vestibulum ipsum sit amet pellentesque. Maecenas non euismod ex. Duis ultrices dolor vel massa sagittis vestibulum. Praesent maximus sem elit, sed tempor mi dictum ac. Aliquam ut eros sem. Nullam condimentum dui vitae purus interdum fermentum. Nam et egestas nibh, ut faucibus purus. Integer dignissim, metus sed bibendum finibus, tortor dolor maximus tortor, eget blandit nunc lacus a turpis. Fusce feugiat, lacus id condimentum aliquam, sem lectus scelerisque orci, sed suscipit nisl lacus ac nibh. Fusce nec accumsan ante, sed finibus enim. Quisque nunc erat, elementum in purus sit amet, consectetur pretium neque. Phasellus enim nibh, aliquam vel porttitor id, bibendum luctus turpis. Donec eu ligula eget nunc convallis ornare vitae nec odio. In volutpat tincidunt ante a sodales.</p>
<h1>First</h1>
<h2>Second</h2>
<h3>Third</h3>
<a href="https://www.youtube.com/watch?v=TN_8D-79BZg">This is a link, song</a>
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
<tagname>Content text</tagname>
<h1>Fresh start</h1>
<html lang="en-US">
Another test from w3schools..
<p title="I'm a tooltip">
This is a paragraph - title.
</p>
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:36px;">I am big</p>
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p><b>Bold</b></p>
<p><i>Italic</i></p>
<p>Sub<sub>script</sub> & superscript</sub></p>
<p><strong>Strong text</strong></p>
<em>Emph</em>
<h2>HTML <mark>Marked</mark></h2>
<p>This text is <del>added</del></p>
<p>Underlines are <ins>cool</ins></p>
<h3>This text is <sub>subscripted</sub></h3>
<h4>And this text is <sup>superscripted</sup></h4>
<p>This text is abbr'd - <abbr title="Abbr Title">SO</abbr> This text is uses abbr title. </p>
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
<h3>Fresh start, again!</h3>
And now, we will talk backwards!
<bdo dir="rtl">Magic, this is bdo dir magic!</bdo>
<!-- This is a comment -->
<p>Paragraph!.</p>
<!-- Test -->
<h2 style="background-color:red">
Background-color set by using red
</h2>
<h2 style="background-color:orange">
Background-color set by using orange
</h2>
<h2 style="background-color:yellow">
Background-color set by using yellow
</h2>
<h2 style="background-color:blue;color:white">
Background-color set by using blue
</h2>
<h2 style="background-color:cyan">
Background-color set by using cyan
</h2>
<h2 style="background-color:rgb(255,0,0)">
Background-color set by using rgb(255,0,0)
</h2>
<h2 style="background-color:rgb(0,255,0)">
Background-color set by using rgb(0,255,0)
</h2>
<h2 style="background-color:rgb(0,0,255)">
Background-color set by using rgb(0,0,255)
</h2>
<h2 style="background-color:rgb(255,255,0)">
Background-color set by using rgb(255,255,0)
</h2>
<h2 style="background-color:rgb(255,0,255)">
Background-color set by using rgb(255,0,255)
</h2>
<h2 style="background-color:rgb(0,255,255)">
Background-color set by using rgb(0,255,255)
</h2>
^used rgb & styles.
<h4>Fresh start!</h4>
<h1 style="color:blue;">Colored heading!</h1>
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>
</head>
<body>
<p>You can change the default colors of links</p>
<a href="B27.jpg" target="_blank">HTML Images</a>
</body>
<p>The image is a link. You can click on it.</p>
<a href="B27.jpg">
<img src="B27.jpg" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>
<p><a href="#C4">Jump to Chapter 4</a></p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Bill Gates</td>
<td>Microsoftia.</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
<h2>An unordered drink list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<h1>My <span style="color:green">Important</span> Heading</h1>
<h7>Fresh start!</h7>
<p>That's the new paragraph, congratulations!</p>
<h3>This text is <sub>subscripted</sub> again! and now <sup>superscripted</sup></h3>
<p>Paragraph has no <mark>limits</mark>!<p>
<a href="http://sharafeev.net" target="_blank">sharafeev.net</a>
<h3>Fresh start!</h3>
<p>I like <span style="color:yellow">Fruits</span> and my friend likes tasty <span style="color:red">Apples</span></p>
<h4>Another <mark>test</mark> from my <mark>lessons</mark></h6>
<iframe src="demo_iframe.htm" style="border:none;"></iframe>
<p><i>Italic font is so <mark><i>italic</mark></i></p>
<p><b>Bold font is so <mark><b>perfect!</mark</b></p>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to show date and time.</button>
<p id="demo"></p>
<p>JavaScript can change the content of an HTML element:</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="demo">This is a demonstration.</p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World, it's me!";
}
</script>
<p>This is my <span style="color:green"</span> html code! </p>
<h1>Fresh <mark>start!</mark></h1>
<p>Let's try <ins><mark>something</ins></mark> else!
<h4>That's the <b>bold</b> font!</h4>
<bdo dir="rtl">Backward tricks!</bdo>
<h1>Repeat</h1>
<p>Fresh start</p>
<head>
<body>
<p>Let's contine the lessons!</p>
</head>
</body>
<address>
John Doe<br>
You can visit on us<br>
Our telephone number is<br>
Also check our menu, it's on: <br>
145 Box<br>
</address>
<h1><mark>Marked text!</mark></h1>
<p><emp>Emph font!</emp></p>
<p><i>Italic font!</i></p>
<p><b>Bold font!</b></p>
<p><ins>Underlines</p></ins>
<p><sub>Subscript!</sub></p>
<bdo dir="rtl">Focus</bdo>
<h3>Fresh start!</h3>
<a href="http://yandex.com" target="_blank">yandex.com</a>
</i>
</b>
<h1>That's the test</h1>
<p><b>Alan Walker</b></p>
<p><i>Faded</i></p>
</i>
<h2>Start making new creations!</h2>
<mark><a href="http://minecraft.net" target="_blank">minecraft.net</mark></a>
<h1>Fresh.</h1>
<bdo dir="rtl">HTML</bdo>
<p><ins><mark>Perfectionist</p></ins></mark>
<p>This test web-site is so <ins>irrelevant</ins></p>
I find this funny somehow.
