Sey 8

Showing posts with label HTML CODING. Show all posts

3D Laptop CSS Quiz

Written by: Sir Chogyal -

Edit this post

🎉 Quiz Complete!

Creating Superscript and Subscript in an HTML

Written by: Sir Chogyal -

Edit this post

<html>
<title>sup_sub tag</title>

<head></head>

<body>
<h2>Superscript</h2>
<p>
5<sup>th</sup> December.
</p>

<p>
(a+b)<sup>2</sup>
</p>

<h2>Subscript</h2>
<p>
Nitric Acid, HNO<sub>3</sub>
</p>

<p>
Carbon dioxide, CO<sub>2</sub>
</p>

</body>

<footer></footer>

</html>

Result:

Superscript

5^th December.

(a+b)²

Subscript

Nitric Acid, HNO₃

Carbon dioxide, CO₂

Splitting Or Merging Cells In An HTML Table Using An HTML Code

Written by: Sir Chogyal -

Edit this post

Splitting or merging cells in HTML table

Video Tutoral at https://youtu.be/bo4HN8R_lPY

1. Code Before Using rowspan & colspan:

<title>HTML Table</title>

<style>
            table, th, td
                  {
                  border: 1px solid blue;
                  border-collapse: collapse;
                  }

             th, td
                  {
                   padding: 5px;
                   }
</style>

<table align="center" width="80%">
    
             <tr>
                    <td colspan="7" style="text-align: center; font-size: 25px; background: green; color: yellow;"><b>Position Holders For the Academic Year 2019</b></td>
           </tr>

           <tr>
                  <th>SL No</th>
                  <th>Name</th>
                  <th>Class</th>
                  <th>Percentage</th>
                 <th>1st Position</th>
                 <th>2nd Position</th>
                 <th>3rd Position</th>
           </tr>

          <tr>
                 <td>1.</td>
                 <td>Jack</td>
                 <td>12 Commerce 'A'</td>
                 <td>98%</td>
                 <td>97%</td>
                 <td>95%</td>
                 <td>93.8%</td>
          </tr>

        <tr>
          <td>2.</td>
          <td>Dorji</td>
          <td>12 Commerce 'B'</td>
          <td>97.8%</td>
          <td>97.6%</td>
          <td>85%</td>
          <td>85.01%</td>
        </tr>
        
        <tr>
          <td>3.</td>
          <td>Oma Ghalley</td>
          <td>12 Science 'A'</td>
          <td>100%</td>
          <td>99.01%</td>
          <td>96.8%</td>
          <td>96%</td>
        </tr>
          
        <tr>
          <td>4.</td>
          <td>Rose Marry</td>
          <td>12 Science 'B'</td>
          <td>100%</td>
          <td>98%</td>
          <td>96</td>
          <td>85%</td>
        </tr>
          
        <tr>
          <td>5.</td>
          <td>Changying</td>
          <td>12 Arts 'A'</td>
          <td>100%</td>
          <td>97%</td>
          <td>96.8</td>
          <td>96%</td>
        </tr>
          
        <tr>
          <td>6.</td>
          <td>D.k Pradhan</td>
          <td>12 Arts 'B'</td>
          <td>98%</td>
          <td>97%</td>
          <td>95.8</td>
          <td>94.01%</td>
        </tr>
          
</table>

2. Code after using rowspan & colspan:

<title>HTML Table</title>

<style>
            table, th, td
                  {
                  border: 1px solid blue;
                  border-collapse: collapse;
                  }

             th, td
                  {
                   padding: 5px;
                   }
</style>

<table align="center" width="80%">
  
             <tr>
                    <td colspan="10" style="text-align: center; font-size: 25px; background: green; color: yellow;"><b>Position Holders For the Academic Year 2019</b></td>
           </tr>

           <tr>
                  <th rowspan="2"></th>
                  <th>Name</th>
                  <th colspan="4">Class</th>
                  <th>Percentage</th>
                 <th>1st Position</th>
                 <th>2nd Position</th>
                 <th>3rd Position</th>
           </tr>

          <tr>
            
                 <td>Jack</td>
                 <td colspan="2">12 Commerce 'A'</td>
                     <td>Accountancy</td>
                     <td>Commerce</td>
                 <td>98%</td>
                 <td>97%</td>
                 <td>95%</td>
                 <td>93.8%</td>
          </tr>

        <tr>
           <td>Lopon</td>
          <td>Dorji</td>
          <td colspan="4">12 Commerce 'B'</td>
          <td>97.8%</td>
          <td>97.6%</td>
          <td>85%</td>
          <td>85.01%</td>
        </tr>
      
        <tr>
          <th rowspan="4">Sl No</th>
          <td>Oma Ghalley</td>
          <td>12 Science 'A'</td>
                  <td>Biology</td>
                  <td>Physics</td>
                  <td>Chemistry</td>
           <td>100%</td>
          <td>99.01%</td>
          <td>96.8%</td>
          <td>96%</td>
        </tr>
        
        <tr>
      
          <td>Rose Marry</td>
          <td colspan="4">12 Science 'B'</td>
          <td>100%</td>
          <td>98%</td>
          <td>96</td>
          <td>85%</td>
        </tr>
        
        <tr>
        
          <td>Changying</td>
          <td colspan="3">12 Arts 'A'</td>
              <td>Arts with Maths</td>
          <td>100%</td>
          <td>97%</td>
          <td rowspan="2">96.8</td>
          <td>96%</td>
        
        </tr>
        
        <tr>
        
          <td>D.k Pradhan</td>
          <td  colspan="4">12 Arts 'B'</td>
          <td>98%</td>
          <td>97%</td>
        
          <td>94.01%</td>
        </tr>
        
</table>

3. Behind rowspan & colspan, Hiding Border Lines In An HTML Table By Using Background Color:
remove table cell

Full code:↓

<title>HTML Table</title>

<style>
            table, th, td
                  {
                  border: 1px solid blue;
                  border-collapse: collapse;
                  }

             th, td
                  {
                   padding: 5px;
                   }

</style>

<table align="center" width="80%">
  
             <tr>
                    <td colspan="7" style="text-align: center; font-size: 25px; background: green; color: yellow;"><b>Position Holders For the Academic Year 2019</b></td>
           </tr>

           <tr>
                  <th>SL No</th>
                  <th>Name</th>
                  <th>Class</th>
                  <th>Percentage</th>
                 <th>1st Position</th>
                 <th>2nd Position</th>
                 <th>3rd Position</th>
           </tr>

          <tr>
                 <td>1.</td>
                 <td>Jack</td>
                 <td>12 Commerce 'A'</td>
                 <td>98%</td>
                 <td>97%</td>
                 <td>95%</td>
                 <td>93.8%</td>
          </tr>

        <tr>
          <td>2.</td>
          <td>Dorji</td>
          <td>12 Commerce 'B'</td>
          <td>97.8%</td>
          <td>97.6%</td>
          <td>85%</td>
          <td>85.01%</td>
        </tr>
      
        <tr>
          <td>3.</td>
          <td>Oma Ghalley</td>
          <td>12 Science 'A'</td>
          <td>100%</td>
          <td>99.01%</td>
          <td>96.8%</td>
          <td>96%</td>
        </tr>
        
        <tr>
          <td>4.</td>
          <td>Rose Marry</td>
          <td>12 Science 'B'</td>
          <td>100%</td>
          <td>98%</td>
          <td>96</td>
          <td>85%</td>
        </tr>
        
        <tr>
          <td>5.</td>
          <td>Changying</td>
          <td>12 Arts 'A'</td>
          <td>100%</td>
          <td>97%</td>
          <td>96.8</td>
          <td>96%</td>
        </tr>
        
        <tr>
          <td style=" border-left:1px solid white; border-bottom:1px solid white; border-right:1px solid white;"></td>
          <td style=" border-left:1px solid white; border-bottom:1px solid white;"></td>
          <td>12 Arts 'B'</td>
          <td>98%</td>
          <td>97%</td>
          <td style="border-bottom:1px solid white;  border-right:1px solid white;"></td>
          <td style="  border-bottom:1px solid white; border-right:1px solid white;"></td>
        </tr>        

</table>

How to Create a Table with Scrollbar Using HTML and CSS

Written by: Sir Chogyal -

Edit this post

Tables are crucial elements of any website as they are used to present and organize data in a structured manner. However, large tables with numerous rows and columns can often cause the web page to exceed its intended size and make it difficult for users to view the data. This is where a scrollbar becomes indispensable, enabling users to navigate through the table with ease and without having to resize their browser window.

Try it at https://codepen.io/sirchogyal/pen/QWZaKpY

The first step in creating a table with a scrollbar is to create an HTML table. For our example, we will be using a table with five columns and five rows. Below is the HTML code for the table with a horizontal scrollbar using HTML and CSS and if you reduce the height, the vertical scrollbar from the right side will also appear. The table contains five columns: "SL No", "Particulars", "Quantity", "Unit Price", and "Total Amount (USD)". Each row of the table displays data related to an office furniture item, including the item number, description, quantity, unit price, and total amount in US dollars.

HTML Code

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="scroll-bar">
  <b>Table with a horizontal scroll bar:</b><br><br>
<table>
<th>SL No</th><th>Particulars</th><th>Quantity</th><th>Unit Price</th><th>Total Amount (USD)</th>
<tr><td>001</td><td>Exexutive Table</td><td>1000</td><td>200</td><td>200000</td></tr>
<tr><td>002</td><td>High Revolving Chair</td><td>2000</td><td>100</td><td>200000</td></tr>
<tr><td>003</td><td>Pedestal Drawer</td><td>8000</td><td>100</td><td>800000</td></tr>
<tr><td>004</td><td>File Rack</td><td>1100</td><td>100</td><td>110000</td></tr>
<tr><td>005</td><td>Cupoard</td><td>1000</td><td>300</td><td>300000</td></tr>
</table>
</div>


<br><br>
<! --You are free to use this code. But you must include the credit below: -->
<div class="credit" style="margin-left: 100px;">
 <p><span style="font-size: large;">Learn HTML, CSS & JavaScript at <a href="https://c815.blogspot.com" target="_blank"><b><span style="color: #ff00fe;">c815.blogspot.com </span></b></a></span></p> 
</div>
  
</body>
</html>

After creating the HTML table, we need to apply some CSS styles to add a scrollbar. The following is the CSS code for the scroll-bar class:

Stylesheet

.scroll-bar {
             height:180px;
             width: 33%;
             border:1px solid grey;
             font-family: 'GestaRegular', Arial, Helvetica, sans-serif;
             overflow: auto;
             white-space: nowrap;
             position: static;
             margin-left: 100px;
             margin-top: 100px;
             
}
         table, th, td {
             border: 1px solid blue;
             border-collapse: collapse;
             padding: 0 30px 0 30px;
   }

The scroll-bar class contains CSS styles for the scrollbar. The height and width properties define the dimensions of the scrollbar container. The border property sets the border of the scrollbar container, while the font-family property sets the font family of the text inside the scrollbar container. The overflow property determines whether to clip the content or to add a scrollbar.

To add a horizontal scrollbar to the table, we can use the white-space property to prevent the text from wrapping and overflow-x property to add a horizontal scrollbar.

To add a vertical scrollbar, we can use the overflow-y property to add a vertical scrollbar to the scrollbar container. It's essential to set a height for the scrollbar container to ensure that the scrollbar appears.

With these simple steps, you can now create a table with a scrollbar using HTML and CSS. Experiment with different properties and styles to customize the scrollbar and the table to suit your requirements.

Adding a scrollbar to a table using HTML and CSS is an excellent way to present data in an organized and user-friendly way. With the code snippet provided in this blog post, you can easily create a table with a scrollbar and customize it to fit your specific needs. A scrollbar makes it easy for users to navigate through large tables, ensuring that your website remains easy to use and visually appealing.

How To Create and Link Favicon in HTML

Written by: Sir Chogyal -

Edit this post

Video Tutorial at: https://youtu.be/xjIzHsO5wtw

"Fav" is the abbreviation for "favorite". A favicon, otherwise known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, is a file containing one or more small icons that are associated with a particular website or web page. Or favicon is a small image or a logo of a website that shows before the title of a page on the browser's tab. It can also be shown when users bookmark your website or save it to their favorites.

You can design your logo and make it transparent where necessary. In my case, I used MS paint to design a simple logo and used Adobe Photoshop to remove background arround the logo and then saved as png file. After that, I google searched "image to favicon converter". Then picked an approprite website to convert image to favicon.

The following code demonstrates how the favicon can be linked. The favicon is added using a <link> tag as shown here in this line: <link rel="icon" type="image/x-icon" href="./images/favicon.ico">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="./images/favicon.ico">
    <title>Favicon</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis autem unde odit culpa, nobis animi quasi doloremque totam a laborum aliquid ipsam sint repellat illum dolorum. Suscipit atque ullam repudiandae?</p>
    <p>In commodi autem explicabo possimus, sit eos, hic temporibus impedit, voluptate nostrum odio natus a illum nihil praesentium ipsam iste quibusdam porro debitis ratione iure reprehenderit repellendus nisi quam. Perferendis?</p>
    <p>Modi nam exercitationem atque, itaque minus corrupti corporis reiciendis ea deleniti nesciunt facilis, illo molestiae, voluptates dignissimos similique autem magnam porro labore debitis! Optio earum aspernatur veniam maxime eius repellendus!</p>
    <p>Totam rem commodi dolores. Laborum doloremque distinctio dolor repellendus eum cupiditate laboriosam quibusdam nesciunt dolorem nobis, odit repellat asperiores labore ipsam natus? Consectetur, dicta eaque. Vel maiores architecto in inventore?</p>
    <p>Laboriosam culpa, a dignissimos laborum mollitia, placeat nihil hic perferendis odit non expedita sequi nobis sapiente architecto. Dolorem, veniam. Cumque similique nobis aperiam incidunt laboriosam odio ratione repudiandae enim! Fugiat!</p>
</body>
</html>

The 'rel="icon"' attribute indicates that the linked resource serves as an icon. The link type is "image" or "x-icon" and this (href="./images/favicon.ico") serves as the path to the favicon file in the root directory.

This is how you can link favicon in html.

An Address Tag in HTML

Written by: Sir Chogyal -

Edit this post

Video Tutorial at: https://youtu.be/UpOKBVuweMg

Outlines

We know that HTML has many tags within the <html> tag and the <address> tag is one of them. Each tag carries a different usage and purpose which provides the overall structure, presentation, and functionality of a web page such as text formatting, styling, linking, etc.

Have you ever used an <address> tag? This tag is used to share contact information in an HTML document or on a website.

Definition of an <address> tag

So how do we define an <address> tag?

An <address> tag in HTML is used to define the contact information of an author/owner of a document/article/website. An address element can be a physical address, phone number, link, social media ID, etc. which can be used as contact information. The text inside the <address> element will be rendered in italics. There will be a line break which is equivalent to one tag before and after the <address> element.

Where to use <address> tag

The <address> tag is straightforward and easy to learn. The only thing you need to remember is that whenever you show an address on your web document, make sure your contact information is written within the <address> tag. This will help you improve the structure of your website and may contribute toward a better SEO ranking.

You can keep your contact information or the information about an author or anyone in any part of your web document. It can be at the footer, inside/above/below an article, on a separate page, etc.

Example of an <address> tag:
 <address>
 Edited by: John Bennet
 From: Washington, D.C.
 </address>

The CSS of an <address> tag can be written as shown in the <style> tag below:

<!DOCTYPE html>
<html>
<head>
<title>Contact Address</title>
   <style>
     address {
             font-size: 20px;
             color: blue;            
        }
  </style>
</head>

<body>

  <span style="font: bold 25px Arial;">Contact Information:</span>
  
     <address>
            John Bennett<br>
            Upper Street ABCD 4321<br>
            New York City<br>
            Email: example@gmail.com<br>
            Phone: +1 2XX-998-12**
        </address>

</body>
</html>

The <address> tag can also support the Global Attributes & Event Attributes in HTML.

Summary

An <address> tag is a simple tag just like any other tags used in HTML and it is used to provide contact information or information of an author/owner for a particular web(HTML) document or documents. It can be used in any part of the HTML. So remember to use the <address> tag whenever you share contact information. I do hope my readers will love this simple blog post. Goodbye for now. Until next time!

hr and br tags in HTML

Written by: Sir Chogyal -

Edit this post

Video Tutoral at https://youtu.be/B1UCE3nfLww

The <hr> tag defines a horizontal rule or thematic break in an HTML page. It shows as a horizontal line. It is used to divide or separate content or a change of topic, chapter, section, etc. It doesn't require an end tag.

The tag is an empty tag used to break a line in HTML text. Like the <hr> tag, the tag has no end tag. According to my online research, I learned that it is generally used in poems and addresses. Despite poems and addresses, I found that the tag is also used in other topics.

The <hr> and tags can be also written as <hr/> and respectively.

HTML

Know <hr> tag and <br> tag:

The <hr> tag defines a horizontal rule or thematic break in an HTML page. It shows as a horizontal line. It is used to divide or separate content or a change of topic, chapter, section, etc in an HTML page. It doesn't carry an end tag.

<span style="font-size: 25px;">Health</span>

<p>We have to drink enough water everyday and eat the right foods.</p>
     
     <hr>  

<p>We have to go for walk or excercise regularly to stay fit.</p>
 
     <hr>

<p>Beside good foods and excercises, we have to also meditate or learn to stay inspired and happy.</p>

<br> tag is an empty tag. It is used to break a line in an html text. Like an <hr> tag, the <br> has got no end tag. According to my online research, I learnt that it is generally used in poem or address. However, I found it is also used in other topics.

Example:

<span style="font-size: 25px;">My Poem</span>

<p>
  In many places I wandered<br>
  And many lessons I learned<br>
  Unexpectedly, something withered<br>
  I became old and lost everything<br>
</p>

<p>
   Oh! All the human beings<br>
   Practice Budhha dharma<br>
   Time goes so quickly<br>
   Dear all, wake up to this souvenir<br>
</p>

A Doctype Declaration in HTML

Written by: Sir Chogyal -

Edit this post

A Doctype Declaration or Document Type Declaration (DTD): This declaration is always made before the <html> tag. We know that HTML documents are written inside the <html> tag. A <!DOCTYPE> declaration must be written before the HTML documents. This declaration is not an HTML tag but an information to the browser about type of document being used by a website. So to specify the version of HTML, the DTD is used in an HTML document.

Video Tutoral at https://youtu.be/7_0N7p3KmvU

1. DTD in HTML 4.01:

For example, in the past, this declaration (<!DOCTYPE html PUBLIC "-//CodeAtHome//DTD HTML 4.01 Transitional//EN" "http://www.c815.blogspot.com/html4.dtd">) was made to ensure the browser that the website was using HTML 4.01 as shown below.

<!DOCTYPE html PUBLIC "-//CodeAtHome//DTD HTML 4.01 Transitional//EN" "http://www.c815.blogspot.com/html4.dtd">
<html>
  <head>
    <title>DTD</title>
  </head>

<body style="font: 25pt Arial;">
    <p>This is an example page to demonstrate the HTML4.</p>
</body>

</html>

2. DTD in HTML 5:

In HTML 5, the <!DOCTYPE> Declaration has much more simplified. It can be written as <!DOCTYPE html> as shown below. Modern web browsers support HTML5. So it is very feasible to use the <!DOCTYPE html> declaration on every website.

<!DOCTYPE html>
<html>
<head>
    <title>HTML5</title>
</head>

<body>
    <h1>Hello, World!</h1>
    <p>This is a basic HTML5 document.</p>
</body>

</html>

How To Reduce the Height of br Tag in HTML

Written by: Sir Chogyal -

Edit this post

Video Tutorial at: https://youtu.be/tUzscpat6Hw

In this post, you will learn how to use a half of tag or reduce the height of a tag, or adjust the height of a line break in HTML. It's so easy and straightforward.

The following code demonstrates how the line-break or tag's height can be adjusted.

<!DOCTYPE html>
<html>

<head>
    <style>
           span {
                     display: block;
          }

           #text2 {
                    margin-bottom: 5px;
          }
    </style>
</head>

<body>

    <span>This is a sample text line, text1.</span><br>
   
   <span id="text2">This is a sample text line, text2.</span>
    
   <span>This is a sample text line, text3.</span>

</body>

</html>

You can also use line-height property to adjust the line break's height. But the code above uses margin-bottom property to adjust the height of a line break.

To create line breaks, we have to use tags. I can add tags to create more line breaks but if I wanted to reduce the height of the gap created below a text line, it is a way bigger problem for us. So here in this post, I disclose my little tips and tricks to reduce the height of a line break in HTML.

You can remove tags. Give an id name to an element and start styling it. You can use something like margin-bottom property to adjust the space below a text line. Use margin-top property if you are adjusting the space above a text line. Also make sure to use display: block; When we use display: block;, it automatically creates a line break equivalent to one tag for each text line.

This is how you can adjust the height of a line break in html.

Code for Basic Blogger's Theme/Template

Written by: Sir Chogyal -

Edit this post

We know that Blogger is a very free plateform but it is not as easy as you may think. You must understand how it works from the ground lavel. The theme provided by the Blogger itself is so good but if you want to advance it further, you must have the knowledge of HTML tags, CSS, JavaScript, etc. However, if you don't like to learn coding, you can simply buy a Blogger theme online or hire a web developer.

Video Tutoral at https://youtu.be/MH90m2o1ulM

You may start coding the Blogger's theme by using the basic code given below. Copy the code to your blogger's theme and save the theme. Make sure you backup your old theme before making any changes with the code I have provided here in this blog post.

<!DOCTYPE html>
  <html>
   <head>
     <b:skin><![CDATA[
*******************************
Blogger Theme
Name: Responsive
Designer: Sir Chogyal
Site: https://c815.blogspot.com
********************************
     ]]></b:skin>
<style>
<!---Your CSS code will go within this <style> tag-->     
</style>
  </head>

<body>

     <b:section id='header'/>

</body>
</html>

If you use the code given above, the whole blog can be be controlled by you. However, posting from pages and posts will not work. You have to create everything from scratch or else you can add the code given below to the above code to get more blogger options. But you must follow these steps otherwise it may get error. 1. Copy the above code to your blogger theme and save it. 2. Just below the header section, paste the code given below. 3. Save your theme.

<div id='content-wrapper'>
<div id='main-wraper'>
     <b:section class='main' id='main' name='Main' showaddelement='no'>
     <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
     </b:section>
     </div>
  </div>

It can be appeared as shown below.

<!DOCTYPE html>
  <html>
   <head>
  <b:skin><![CDATA[
*******************************
Blogger Theme
Name: Responsive
Designer: Sir Chogyal
Site: https://c815.blogspot.com
********************************
     ]]></b:skin>
<style>
<!---Your CSS code will go within this <style> tag-->     
</style>
  </head>

<body>

     <b:section id='header'>
     </b:section>

<div id='content-wrapper'>
<div id='main-wraper'>
     <b:section class='main' id='main' name='Main' showaddelement='no'>
     <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
     </b:section>
     </div>
  </div>

</body>
</html>

Subscribe to: Posts ( Atom )

NEW POSTS

Main Menu

Pages

Contact Form

3D Laptop CSS Quiz

💻 3D Laptop CSS Quiz

🎉 Quiz Complete!

Creating Superscript and Subscript in an HTML

Result:

Superscript

Subscript

Splitting Or Merging Cells In An HTML Table Using An HTML Code

How to Create a Table with Scrollbar Using HTML and CSS

How To Create and Link Favicon in HTML

An Address Tag in HTML

hr and br tags in HTML

A Doctype Declaration in HTML

How To Reduce the Height of br Tag in HTML

Code for Basic Blogger's Theme/Template

Latest Posts

Pages