HTML Tables and Links
Concepts -
We can use anchor tag to go in desired position inside same page using id attribute as below.-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Save Earth</title>
</head>
<body>
<img src="Image/save.jpg" alt="Please Save Earth!!" height="300" width="300">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<ul>
<li>Save Water</li>
<li>Plant Trees</li>
<li>Recycle</li>
</ul>
<p>You can find more details here</p>
<a href="https://www.google.com" visted = "false">Google Search</a>
<a href="https://www.msn.com/en-in/news/other/it-is-sorrow-after-sorrow-kashmir-chief-cleric-mirwaiz-condemns-security-crackdowns-pak-deportations/ar-AA1E3sF2?ocid=entnewsntp&pc=U531&cvid=097506d9e8be411b8aa5711c96459a6d&ei=11">Kash News</a>
<a href="About.html">About us</a>
<a href="#EOF">End of Page</a>
<h2> Welcome to mypage</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus est iusto praesentium ipsam aliquam distinctio incidunt non, <br>nobis animi odit magnam quisquam id hic minima. Omnis dolorum non accusantium provident tempora officia, asperiores rerum nisi suscipit debitis voluptates fugiat repellendus temporibus quos culpa, illum magnam numquam illo, iusto dolor! Sequi iste labore laudantium quaerat recusandae. Repellat at, repellendus est magnam ea accusantium nam reiciendis impedit explicabo quae, perspiciatis, reprehenderit inventore dolore? Illo quo doloremque dicta consequatur asperiores autem quidem libero odit quaerat nostrum nemo voluptas repellat laborum facilis molestiae earum et sit ex eos corporis mollitia tenetur, aliquam quibusdam laboriosam! Fugiat optio, corrupti culpa in nesciunt porro earum vitae labore asperiores illum facere iste nemo iure. Porro tempore eveniet eligendi in cupiditate corrupti temporibus. Laboriosam ducimus, sint dignissimos quae animi aspernatur autem quibusdam, eum laudantium, accusamus recusandae omnis dolor nostrum labore velit. Perspiciatis nam doloribus molestias ipsam minima excepturi ullam eligendi corporis similique. A at commodi dolores vitae quaerat cum praesentium? Voluptates officia impedit ut eum quod nulla odit laboriosam aperiam provident. Quidem, consequatur facilis. Quos tempora totam architecto, atque suscipit voluptatibus beatae voluptates dolores eum dolor sunt, est dolorem ipsam quis minima unde accusamus eos, aliquam aspernatur voluptas maiores at reprehenderit animi. Nihil, animi quas. Distinctio possimus hic deserunt modi dicta minus inventore molestias at aperiam doloribus exercitationem consequatur necessitatibus, harum velit fugiat provident magni sunt? Modi eaque nam autem quod vel, ullam dolores ex rerum quae odio porro recusandae enim eum veritatis temporibus tenetur! Ullam, numquam fugit adipisci libero quod temporibus! Fugit mollitia eos, molestiae doloribus minima, distinctio voluptates iure et, deleniti veritatis quae? Quibusdam, quo qui similique corporis nam iure aspernatur totam rem numquam est eius cupiditate quaerat maxime illo quas veritatis nulla eveniet deserunt, itaque nihil unde assumenda nemo sapiente. Repudiandae iusto mollitia nesciunt quibusdam voluptate necessitatibus, blanditiis molestiae, ex facere esse sit dicta veritatis optio nobis facilis? Accusantium neque quo quaerat blanditiis unde magnam ratione iusto. Soluta eos voluptatibus ullam deserunt voluptatum, consequatur quisquam suscipit velit impedit quos? Fugit earum temporibus blanditiis eaque modi incidunt id! Porro placeat at qui perferendis omnis, ab maiores fugit eos suscipit possimus repudiandae impedit beatae atque et id voluptatem aperiam ducimus autem consequuntur eius quisquam velit dolor adipisci? Tenetur ut nostrum suscipit non aperiam, illum in dolorem optio possimus officia accusamus perspiciatis, distinctio maxime repellat vel exercitationem ea voluptatibus voluptates maiores perferendis, cumque eum dicta veritatis? Fuga ipsam, dignissimos repellat, maiores dolorum totam, saepe molestiae non culpa nam aspernatur. Quidem ducimus perferendis libero, ipsam illum quia a eius, eos fuga repudiandae nihil exercitationem ea accusantium vero cumque ab atque tempore inventore alias consequuntur quis placeat, porro impedit corporis! Ullam sed officia, nam esse cupiditate error expedita quis. Soluta, praesentium, dignissimos debitis rerum officiis distinctio maiores consequatur quisquam at ratione ex magni, error porro libero sed earum illum! Amet eligendi alias impedit fugiat atque, aperiam cupiditate neque fuga facere fugit dignissimos quo quidem earum corrupti rerum. Autem dolorum tempora odit harum illum nihil. Vitae debitis ratione officia ullam, labore quos iure quam, animi eos saepe, reiciendis voluptatum. Deserunt architecto exercitationem, sapiente numquam nemo earum ratione nostrum optio rem quisquam recusandae ut, saepe, qui ea dignissimos? Eveniet, officiis velit, expedita nostrum hic eum quisquam mollitia provident molestiae quibusdam nemo? Ratione repellat quae vel error facilis perferendis deleniti earum ipsa provident dignissimos. Debitis aliquid veniam excepturi at voluptatibus ipsam harum, dolorum blanditiis illo in unde illum animi nisi voluptate saepe eaque veritatis reprehenderit praesentium ratione dignissimos. Fuga optio vitae fugit ullam, magni omnis minus aspernatur. Ad culpa nostrum, hic dolores natus debitis praesentium. Illo non culpa aut architecto expedita corrupti beatae, repudiandae voluptatibus alias sequi. Rerum, cumque pariatur ullam asperiores exercitationem quas! Repellat cumque perferendis reprehenderit, dolores maiores excepturi. Nesciunt provident atque aperiam quibusdam eligendi consectetur deleniti saepe, cumque, eaque aliquam culpa dignissimos sit, distinctio libero. Rerum, error libero iusto, quidem voluptatum ipsam iste eveniet eaque incidunt nemo sunt voluptates officiis sit alias voluptatibus totam deserunt soluta consequatur. Ex, quia nisi? Eius deserunt molestiae expedita natus perferendis. Hic accusantium a maiores perspiciatis, autem provident doloribus suscipit impedit tempora iure debitis sit ullam inventore asperiores repellendus cumque officia maxime deserunt rerum. Obcaecati veritatis deserunt doloremque laborum dignissimos consectetur error quia molestiae impedit iste, harum recusandae, adipisci similique inventore praesentium excepturi. Corporis sed eligendi praesentium deserunt placeat natus dolor, voluptas ea asperiores perferendis, nam quasi facilis quos est eveniet minima nihil! Consequatur, repellendus! Consequuntur cumque fuga, culpa sapiente esse vero quia laborum ipsam! Repellat exercitationem architecto ut eos officiis, ab doloribus? Iusto corporis itaque impedit repellat saepe molestiae magnam. Non, aperiam nam? Blanditiis aspernatur id expedita voluptate repellat veritatis ipsum ratione maiores nemo laboriosam. Ipsam porro blanditiis cumque aliquid dolor ab voluptatem deserunt ullam, corrupti ea, quo iusto eaque est inventore fuga doloremque! Earum obcaecati maxime explicabo reiciendis, possimus placeat doloremque consequuntur sapiente beatae exercitationem. Exercitationem inventore corrupti sint! Tenetur, veritatis. Nulla impedit recusandae voluptates architecto, dolore sed illo aliquam sunt voluptatibus eum inventore mollitia corporis distinctio accusamus! Aperiam, distinctio. Aperiam unde nulla voluptas tenetur labore eaque, commodi odio minima, quam voluptatibus laborum provident! Dolorum enim minima, dolore quibusdam obcaecati error, dolor laudantium aliquam porro maxime in reprehenderit labore non consequuntur. Corporis, ratione repudiandae! Molestias fugit cupiditate aperiam tempora perspiciatis sequi doloremque obcaecati, debitis, consequatur exercitationem eius. Quam perspiciatis hic temporibus ad dolorem animi rerum inventore vel minus ipsum explicabo ut itaque, et, eligendi aperiam voluptates sapiente obcaecati quisquam est incidunt repellendus quaerat. Tempora maiores magni eius ipsam vitae doloribus sapiente veritatis adipisci! Iusto, fugiat consectetur. Officia atque asperiores pariatur facere repellendus quo ipsum voluptates beatae velit nemo illo, fugiat rem minima suscipit. Odit sunt quidem a! Ratione in veritatis accusamus itaque veniam animi maxime ad quam impedit asperiores, facilis officia numquam soluta, ipsum consequuntur sit. Tempora incidunt, a reprehenderit rerum autem dicta voluptate magnam eum dolorum repudiandae, blanditiis corporis maiores eveniet excepturi commodi, officia eos libero at debitis exercitationem consequatur suscipit. Quo cumque veritatis nesciunt similique rem at quibusdam, temporibus inventore perspiciatis expedita, fugit alias minus aut sunt vero. Odio omnis voluptates corporis!</p>
<h2 id="EOF">End of page</h2> <!--- id assigned for End of file ->
<h3>bottom</h3>
</body>
</html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Save Earth</title>
<link rel="shortcut icon" href="Image/R.png" type="image/x-icon">
HTML Table
<table border="2" width = "400"><!--border attribute is deprecated and
Recommended to use CSS for this purpose-->
<thead>
<tr>
<!---Table header is center alligned-->
<th>S.No</th>
<th> Name</th>
<th> City</th>
<th>PostCode</th>
<th>Contact</th>
</tr>
<tr>
<!---Table data is left alligned-->
<td>1</td>
<td>Hari</td>
<td>Pune</td>
<td>411057</td>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>Rama</td>
<td>Pune</td>
<td>411057</td>
</tr>
<tr>
<td>3</td>
<td>Shriyan</td>
<td>Pune</td>
<td>411057</td>
<td>123456789</td>
</tr>
<tfoot>
<tr>
<th colspan="4" align="center">Count</th>
<th>3</th>
</tr>
</tfoot>
</tbody>
</table>
HTML ENTITIES
<!DOCTYPE html>
<html>
<head>
<title> My Practice weblink</title>
</head>
<body>
<!-- HTML Entities are used to display different symbols, the most used list can be found in below link -->
<p> <a href = "https://www.w3schools.com/html/html_entities.asp"> HTML Enties </a></p>
<!-- If you use the less than (<) or greater than (>) signs in your text, the browser might mix them with tags..
If we want to use the paragraph tag in source as special symbol this can be done as
< p > href = "https://google.com" >
-->
< p > href = "https://google.com" >
</body>
</html>
Another Example
<!doctype html>
<html>
<head>
<title>HTML Entities</title>
</head>
<body>
<p>The cost is:</p>
<ul>
<li>£9.99</li>
<li>¥9.99</li>
<li>€9.99</li>
</ul>
</body>
</html>
Comments
Post a Comment