InsertHTML https://www.html5canvastutorials.com/blog Web Design and Development Blog Tue, 06 Oct 2020 06:50:59 +0000 en-US hourly 1 https://wordpress.org/?v=5.7 How To Add Hyperlinks In HTML https://www.html5canvastutorials.com/blog/2020/09/how-to-add-hyperlinks-in-html/ https://www.html5canvastutorials.com/blog/2020/09/how-to-add-hyperlinks-in-html/#respond Sun, 13 Sep 2020 08:30:45 +0000 https://www.inserthtml.com/?p=6162
How To Add Hyperlinks In HTML

Hyperlinks are used to navigate between webpages. The hyperlinking of documents creates the web of texts which is the foundation of WorldWideWeb. The hyperlinks create a never-ending set of documents.

We all know that Berners-Lee was the person who had the vision of creating a web of pages. SpringerLink discusses the importance of hyperlinks while mentioning how such a web is more user-friendly than a hierarchical system. It provides a pool of information to the user with such easy navigation.

We can add hyperlinks to text, image, book-marks, tables, e-mail addresses, phones, etc. In this blog, we shall learn why and how, using example code.

Text Hyperlink

We use the <a> tag to indicate the start of the hyperlink and the text is between the opening and closing tags of <a>. The ‘href’ attribute is to indicate the location of the hyperlink. It is the URL.

The alternative name for the hyperlink is the anchor as it connects with the target document. The text between <a> tags is known as “hypertext”. Hypertext is displayed by the browser and it links to the URL written in <a> tag.

<a href=  “http://www.html5canvastutorials.com/blog”> Hypertext goes here </a>

The snippet above makes it clear where the hypertext is written. We generally place such snippets in the text between <p> tag. Let’s check with a code:

<html>
  <head>
    <title>
      How to add hyperlinks in HTML
    </title>
  </head>
  <body>
    <center>
      <p style= "font-size:32px;">
       HTML stands for HyperText Markup Language. <br> 
       <a href="http://www.html5canvastutorials.com/blog/2020/09/what-is-html/"> 
       What is HTML? 
       </a> <br> 
        Try clicking on the text above.
        Here Hypertext is "What is HTML?"
        </p>
    </center>
  </body>
</html>

Here’s how the output will look like:

How To Add Hyperlinks In HTML

Image Hyperlink

Images are the heart of modern webpages, it gives life to the page. We already know, how to add an image in HTML. We will use the <img> tag in place of hypertext and link the click to a new website or intra-web. So <img> tag will be nested in <a> tag.

We can also create an image map, which allows hyperlinks to multiple websites or webpages by clicking on different regions on the map. This is achieved by using CSS. For the discussion in this article, we shall limit ourselves to learning hyperlinking the image as a whole.

Let’s see the code:

<html>
  <head>
    <title>
      How to add hyperlinks in HTML
    </title>
  </head>
  <body>
    <h1> Click on the image </h1>
    <center>
      <p style= "font-size:32px;">
       Image as a hyperlink <br>
       <a href="http://www.html5canvastutorials.com/blog">
      <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" alt="How to add hyperlink to HTML"> 
        </a>
         </p>
    </center>
  </body>
</html>

Here’s the output:

How To Add Hyperlinks In HTML

Why Hyperlink?

Hyperlinks on our website add credibility to the content written, researched, or referred. It has the potential to increase the page views by backlinking or interlinking. The browsers use the Search Engine Optimization technique to show a list of websites that match the user’s search. To have a place at the top in this list we need to improve our SEO results and hyperlinks do it.

Hyperlinks can be used as ‘in-text’ headings. It can be used for ‘back to top’, ‘next’, ‘previous’, ‘return to homepage’, etc. These are the ways of intra-page and intra-website navigation which gives a great User Experience(UX).

Conclusion

As we saw in this tutorial, hyperlinks are an integral part of the World Wide Web. They can be used to improve User Experience (UX), navigation, linking relevant pages, SEO & more.

Thus, it becomes inevitable for any web developer to learn this feature. Hyperlinking can be done in many other ways which can be learned once you have reached the intermediate level. For now, we saw how to add links to text as well as images. You can explore your own codes at Codepen.

To learn some other basic HTML tags, view our previous blog! To keep enjoying our tutorials, subscribe to the blog!

]]> https://www.html5canvastutorials.com/blog/2020/09/how-to-add-hyperlinks-in-html/feed/ 0 How To Change Fonts In HTML https://www.html5canvastutorials.com/blog/2020/09/how-to-change-fonts-in-html/ https://www.html5canvastutorials.com/blog/2020/09/how-to-change-fonts-in-html/#respond Sat, 05 Sep 2020 06:55:15 +0000 https://www.inserthtml.com/?p=6145 How To Change Fonts In HTML

Fonts are an important element of any website. They can be used to give different headings or different styles to any text. For example, Headers h1 to h6 all have font sizes in decreasing order and a hyperlink is always highlighted with a different color.

“A Good Typography System Will Drive Consistency Between Pages”, says Market8.

Earlier in HTML4, we had a <font> tag which is no longer supported by HTML5. In HTML5 we use style attribute for tags like <p>, <div> and many more. We use font-family, font-style, font-size, and color to get the desired change in the text.

For example, 

<p style= “font-family:add_font; font-size:add_size; color:add_color; font-style:add_style;” >

The snippet above shows how to use style attributes along with the desired changes. Every property is followed by “:” (colon) and then specific need. To differentiate between properties we shall use “;” (semi-colon).

We will see all the properties used in the following code:

<html>
   <head>
      <title> Font change in HTML </title>
   </head>

   <body>
      <h1> How to change font in HTML </h1>
      <p style = "font-family:courier; font-size:40px; font-style:oblique; 
         color:blue">
         I am blue with size 40px and my font belong to courier family.
      </p>
   </body>

</html>

Here’s how the output will be:

How To Change Fonts In HTML

In the example above we have used font-family courier. The commonly used are Arial, serif, cursive, times & monospace. Font-size is 40px which has been specifically used to show how to get bigger font than <h1> tag. We can change it as required.

Font-style used is oblique. Most common are bold, underline & italic. The color property in HTML5 has got the liberty to get it without a specific code with just the text of the color. We have used blue. But, you can choose from any known list. Know more about HTML fonts here.

How To Indent In HTML

Arranging the alignment of the text makes it visually appealing and conveys the information in a form that is easily understood. We do this using JavaScript and CSS. <script> tag is used to write a function in JavaScript and <style> to write a CSS code. We will see both the ways in detail with an example.

Using <script> Tag

We shall use .textindent property after calling the id of a tag whose text we wish to indent. The number of pixels can be specified after the property as seen in the example below. This property takes over the command of HTML and modifies it using JavaScript. You can learn more about it here.

<html>
  <body>

    <div id="check">
       <h1>
       How to indent in HTML. This text has been indented using script tag, 
       which calls the id and adds style to it.
       </h1>
   </div>
   <p style="font-size:30px; color:green;"> I ain't indented </p>
   <script>
      {
      document.getElementById("check").style.textIndent = "200px";
      }
   </script>
  </body>
</html>

Output:

How To Change Fonts In HTML

Using <style> Tag

Indenting text using <style> is achieved by defining a CSS code and using the property “text-indent”. The property values can be length, %, initial, or inherit. We have used length and % in the following code. You can try the other ones here.

<html>
  <head>
    <style>
      .a {
      text-indent: 100px;
      }

     .b {
     text-indent: 20em;
     }

     .c {
     text-indent: 50%;
     }
   </style>
  </head>
  
  <body>

    <h1> How to indent text in HTML </h1>
    <h2> Report on COVID19 </h2>

    <div class="a" style="font-family:courier;">
    <p> In France, the first case was reported on January 25; five weeks 
    later, the number rose to 57, but in the sixth week, there were 613 
    cases, which went up to 3,640 and 4,469 in the next two weeks.</p>
    </div>

    <div class="b" style="color:red;">
    <p> Similarly, in Italy, till the third week after the first confirmed 
    case, the number was only 3. The cases then shot up to 650, 3,858, 
    15,113 in the subsequent weeks.</p>
    </div>

    <div class="c">
    <p> Iran appears to be an exception as the cases increased several times 
    each week. Various newspapers have criticised Iranian authorities for 
    being dismissive of the virus in the initial days of the outbreak. </p>
    </div>

   </body>
</html>

Output:

How To Change Fonts In HTML

Conclusion

In this tutorial, we learned how to change fonts in HTML. This includes changing the size, font family, and color of any text. Using CSS, you can add many more styles to your webpages.

To learn how to add a table in HTML, see our previous blog(internal link to how to add table)!

To keep reading such useful techniques in HTML, subscribe to our blog!

]]> https://www.html5canvastutorials.com/blog/2020/09/how-to-change-fonts-in-html/feed/ 0 What Are Basic HTML Tags https://www.html5canvastutorials.com/blog/2020/09/what-are-basic-html-tags/ https://www.html5canvastutorials.com/blog/2020/09/what-are-basic-html-tags/#respond Sat, 05 Sep 2020 06:46:01 +0000 https://www.inserthtml.com/?p=6158 What Are Basic HTML Tags

HTML is a dynamic programming language & the simplest to learn because of the tags. Tags in HTML define what we expect from the modern webpages. Here we shall see all those tags which can help you create, probably your first webpage.

The <html> Tag

This is the most basic tag which will be seen in every HTML text. <html> tag defines that the document is in HTML, it is considered the root of the language. All other tags are always nested inside the opening(<html>) and closing tags(</html>).

The <head> Tag

We generally divide the content inside the <html> tag into two, of which the first is <head>. It contains the metadata for the document. The style, script, links, character set of the document are written inside the <head> tag.

The <title> Tag

The title of the document goes between opening and closing tags of title. It is commonly nested inside the <head> tag. It is not displayed on the webpage but on the browser’s title bar. You must keep the content in it relevant to the article and succinct.

The <body> Tag

The second half of the <html> tag is a body tag. Almost all tags will be nested inside the <body> tag. The main content of the webpage is defined here including tables, text, hyperlinks, or images.

The Heading Tags (<h1> to <h6>)

These tags define HTML headings with variation in the font-size. The font-size decreases from h1 to h6 with sizes 32px to 10.72px. We shall see a code along with the usage of the previous tags to learn better.

<html>

   <head>
      <title> Basic tags in HTML </title>
   </head>
	
   <body>
      <h1> I am heading 1 </h1>
      <h2> I am heading 2 </h2>
      <h3> I am heading 3 </h3>
      <h4> I am heading 4 </h4>
      <h5> I am heading 5 </h5>
      <h6> I am heading 6 </h6>
   </body>
	
</html>

Here’s how the output will be:

What Are Basic HTML Tags

The <p> Tag

<p> tag specifies the beginning of a paragraph and hence starts with a new line and leaves a line after the closing tag. It is a block-level element that separates the content on the webpage. The spaces and line breaks written inside the <p> tag are ignored by the browsers. We use the <br> tag for a single line break and it’s an empty tag. It can be used without a closing tag.

<html>

  <head>
    <title> Basic HTML tags </title>
  </head>

<body>

<p>
My line 
breaks are 
ignored by
the browser.
</p>

<p>
Even  the  spaces are   
  ignored as   browser   treats  this   as   a paragraph
</p>

<!-- I am a comment and will be ignored completely in the output -->

<p>
The br tag <br>
  instructs the browser <br>
  to start from a <br>
  fresh line. <br> 
  <hr>
  A tag embraced by the poets is br tag
</p>

  
</body>
</html>

Output:

What Are Basic HTML Tags

The <hr> Tag

We saw the use of <hr> tag in the previous code and as the output suggests it is a horizontal rule which indicates a thematic change in the content. It is an empty element and does not need an ending tag.

The Comment Tag

Comments in the code can be indicated with the text in between the tag <!–…–>. The start of a tag <!– instructs the browser not to display the content written till –>. It is useful for the coding community and for the coder himself to refer at a later point of time.

An example of it is used in the above code and it is not displayed in the output. Learn more about the comment tag here.

The <img> Tag

One may debate about <img> tag being a basic tag. But it is an essential part of modern webpages. The webpage looks dull and dead without a live image and to add it in an HTML file we use the <img> tag. It is a self-containing tag that uses the attribute src and alt. ‘src’ is to find the source of the image & ‘alt’ is to provide an alternate text to the image for search engines. Know more on <img> tag in our blog.

Conclusion

The tags discussed here are sufficient to create your first webpage and I would encourage you to make one. You can code and run it on Codepen.

HTML tags are often complemented by HTML attributes. There can be other tags that may be said as basic tags but we are good to start with all these tags.

Learn more HTML tags and features in our blog!

]]> https://www.html5canvastutorials.com/blog/2020/09/what-are-basic-html-tags/feed/ 0 How To Add CSS To HTML https://www.html5canvastutorials.com/blog/2020/09/how-to-add-css-to-html/ https://www.html5canvastutorials.com/blog/2020/09/how-to-add-css-to-html/#respond Tue, 01 Sep 2020 07:09:42 +0000 https://www.inserthtml.com/?p=6131 How To Add CSS To HTML

The trinity of HTML, CSS, and JavaScript is inseparable for modern webpages. HTML contains the content, CSS adds styling and JavaScript makes it dynamic. Here, we will learn how to add CSS to HTML.

But before that, let’s see a brief introduction to “What is CSS”. CSS is Cascading Style Sheets which provides the visual appearance of the content in HTML. Earlier there was no CSS, so the control of the page was with the tags such as <font>, <b>, <i>, etc. This led to several problems while styling the entire content. The changes had to be made to every individual tag. To our rescue, we have CSS now. The CSS specifications are maintained by the World Wide Web Consortium (W3C).

To add CSS, we have two ways. First to add it directly in the HTML code using <style> tag and second, writing the code separately and then linking it to the HTML code using <link> tag.

The <style> Tag

It is simple and easy to start with & add the code directly in the HTML. The <style> tag can be placed anywhere in the code, though the common practice is to place it in <head> tag.

It can also be used as an attribute inside <body>, <head>, <div>, or in other tags to get the desired styling.

Below is an example that uses CSS in <style> tag:

<!DOCTYPE HTML>
<html>
  <head>
    <title> How to add CSS to HTML using Style tag </title>
    <style>
      #addCSS{
        color:blue;
        font-size:90px;
      }
    </style>
    
    <h1 id="addCSS"> The style added above applies on me. </h1> 
  </head>
  <body>
    I am not affected by style
  </body>
</html>

Here’s what the output will be for the above code:

How To Add CSS To HTML

The below illustration shows us how using style as an attribute can also add CSS to HTML:

<!DOCTYPE HTML>
<html>
  <head>
    <title> How to add CSS to HTML using Style tag </title>  
    <h1 style="font-family:courier;"> I have the font as given by the style 
     attribute </h1> 
  </head>
  <div style="font-size:400%">
    I got enlarged because of CSS
  </div>
</html>

Output:

How To Add CSS To HTML

HTML Button

Buttons come in different shapes, sizes, and styles. We can have multiple types of buttons like the shadow button, hover-able button, colored button, round button, buttons in groups, and many more. <button> and <style> tag are the key to unlock the variety of buttons. The <button> tag uses multiple global and local attributes to support different buttons.

We will use CSS inside the <style> tag and call the function in the <button> tag. We have also used properties like border, paddling, color, text-align, background, & display. These properties help us create a colored button. We can also add text on a button. The text which we want to display on the button has to be written after the opening <button> tag.

Here’s the code:

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      .button {
      border: none;
      color: white;
      padding: 15px 60px;
      text-align: center;
      display: inline-block;
      font-size: 24px;
      align: center;
      }

    .button1 {
      background-color: green; 
      color: black; 
      border: 2px solid black;
     }
    </style>
  </head>
  
  <body>
    <h2 align="center"> How to add button in HTML </h2>
    <center>
      <button class="button button1"> I am what i am, thanks to button and 
      style tag</button>
    </center>
  </body>
</html>

Output:

How To Add CSS To HTML

HTML Checkbox

Well, checkbox doesn’t have its own tag like button. We will use the <input/> tag which itself is a starting and ending tag. The ‘type’ attribute is used to add the checkbox and <label> tag to get the label before the checkbox.

Here’s how you can do it:

<!DOCTYPE HTML>
<html lang = "en">
  
  <head> </head>
  <body>
    <h1> How to add checkbox in HTML </h1>
    <form>
       <fieldset style="background-color:blue;">
        
         <p> <center>
           <label> Check the websites that you have visited </label> <br>
             <input type = "checkbox"
                 id = "inserthtml" />
             <label for = "inserthtml"> cssnewbies.com </label>
             <input type = "checkbox"
                 id = "tom" />
             <label for = "tom"> jqueryhouse.com </label>
         </p>
       </fieldset>
    </form>
  </body>
</html>

Output:

How To Add CSS To HTML

Conclusion

In this tutorial, we saw what is CSS and how it is used to style webpages. You can learn more about CSS at CSSNewbie! To keep enjoying such tutorials on HTML, subscribe to our blog!

]]> https://www.html5canvastutorials.com/blog/2020/09/how-to-add-css-to-html/feed/ 0 What Is div In HTML? https://www.html5canvastutorials.com/blog/2020/09/what-is-div-in-html/ https://www.html5canvastutorials.com/blog/2020/09/what-is-div-in-html/#respond Tue, 01 Sep 2020 07:09:16 +0000 https://www.inserthtml.com/?p=6120 What Is div In HTML?

div short for Division in HTML divides the webpage into blocks of content or sets the layout. It has both the opening and the closing tag. <div> tag serves multiple purpose in HTML. It has several properties like setting the web-layout, as a block-level element, getting the headings, paragraphs, and forms.

“The Div is the most usable tag in web development because it helps us to separate out data in the web page and we can create a particular section for particular data or functionality in the web pages.”, says GeeksForGeeks.

In this tutorial, we will see what is div in HTML.

div Using Class

We can use class by internal CSS or external CSS. We will see both ways.

Internal CSS

We will use <style> tag to define the class in the <head> section. And while using <div> tag we shall call the class that is previously defined. Check the example below:

<html>
  <head>
    <style>
      .check {
      border: 8px outset blue;
      background-color: gray; 
      text-align: center;
      }
    </style>
  </head>

  <body>
    <div class="check">
    <h2> What is div in HTML </h2>
    <p> This is one of the many important usages of div tag </p>
    </div>
  </body>
</html>

Here’s how the output will look like:

What Is div In HTML?

External CSS

We will use both the panes of HTML and CSS for the <div> tag. Try CodePen to access both the panes together. We shall use a link tag to connect the two codes and name .css file for the href attribute.

Here we have used inserthtml.css which implies the file in CSS will be .inserthtml and the class attribute to be used in <div> tag shall also be defined as inserthtml. Check the below code for more clarity.

<html> 
   <head> 
      <link rel="stylesheet" href="inserthtml.css"> 
      <title> 
         Uses of div in HTML
      </title> 
   </head> 
   <body> 
      <center> 
         <div class="inserthtml">
               <h1> What is div in HTML </h1> 
          <p> This is external CSS.
          </p> 
         </div>
      </center> 
   </body> 
</html>

Now, the CSS code will be as follows:

.inserthtml
{ 
height:150px; 
width:500px; 
 background-color: blue; 
}

Output:

What Is div In HTML?

div As A Web Layout

The layout of a webpage can also be set by using the <div> tag. Here we will use the Internal CSS in <div> as seen earlier.

<html>
  <head>
   
    <style>
      .divascontainer {
        display: flex;
        align-items: center;
        width: 100%;
        height: 350px;
        background-color: red;
      }
.divascontainer > div
      {
        width: 25%;
        height: 100px;
        margin: 150px;
        
       background-color: green;
      }
      
    </style>
  </head>
  <body>
    <div class="divascontainer">
      <div> <left> Hello </left> </div>
      <div> <center> HTML </center> </div>
     
    </div>
  </body>
</html>

Output:

What Is div In HTML?

Multiple layouts can be prepared to alter the above code. The best way shall be to design a UI and then implement it in HTML. I’m sure you will explore it more and it will keep you interested.

div As A Block

Sometimes we want to have a specific font, background, or color for a particular block of the webpage. This can be achieved by using <div>. In the following example, we will have three sections of the page.

First one without a <div> tag. The second section with <div> has a background image and it contains only the portion till this <div> tag ends. The background expands and contracts based on the content this section needs to display. The third and last section of this example has a blue color background and this, again, will only be for the text written till the closing tag.

<html>
  <body>
    <h1>Checking different usage of div tag in HTML</h1>
    <p>This section has no styling and is not a part of div tag.</p>
    <div style="background-image: 
     url('https://cdn.pixabay.com/photo/2015/04/23/22/00/tree- 
     736885__340.jpg')">
     <p>
       <center style="color:white">
       Check <br>for <br>the <br>image <br>Is<br> it <br>a <br>big <br>one?
       </center>
     </p>
    </div> 
    <div style="background-color:DodgerBlue;"> What is div in HTML.<br> The 
     background of only this section is blue.<br> This is how we can 
     separate the section of a webpage using div tag
    </div>
  </body>
</html>

Output:

What Is div In HTML?

Conclusion

In this tutorial, we saw multiple ways of using the <div> tag. Such styling tags are essential to building an interactive and responsive webpage. You can learn more about the attributes and styling of the <div> tag here!

To learn how to center text and image in HTML click here! You can learn more such useful techniques on our blog!

]]> https://www.html5canvastutorials.com/blog/2020/09/what-is-div-in-html/feed/ 0 How To Add Javascript To HTML https://www.html5canvastutorials.com/blog/2020/09/how-to-add-javascript-to-html/ https://www.html5canvastutorials.com/blog/2020/09/how-to-add-javascript-to-html/#respond Tue, 01 Sep 2020 07:09:11 +0000 https://www.inserthtml.com/?p=6126 How To Add Javascript To HTML

HTML5, CSS and JavaScript are the inseparable trinity of modern webpages. HTML lets us add content to the webpage, CSS helps with styling and layout, and JavaScript adds the interactivity in the page.

We will learn briefly about the JavaScript and then how to link JavaScript to HTML.

What Is JavaScript?

JavaScript is a text-based scripting and dynamic programming language widely used by developers. It was founded more than two decades ago but is still the most commonly used language and hence is recognized by every modern browser which has an in-built engine.

It basically adds the dynamic feature of a website and turns it live. It can be used for:

  • Automation: The refreshing we see on Facebook, Twitter or any social media site
  • Game Development: Most basic and infant programmers should always start by building a simple game using JavaScript, as this can directly be played in the browser
  • Developing Web and Mobile Applications: Most modern mobile applications can be developed using JavaScript.
  • Front-End and Back-End Development: Front-End uses of JavaScript can be well understood. The Back-End work of creating a server and linking with the databases can also be achieved easily using frameworks like Node.js

JavaScript HTML DOM

Document Object Model is created by the browser when the webpage is downloaded. JavaScript can modify all HTML elements, attributes, CSS styling, create new events, elements, add attributes, and many more. This makes JavaScript the commanding officer of the HTML.

The <script> Tag

The power to change and make the HTML dynamic using JavaScript is enabled using <script> tag. It can be used to define the function of JavaScript in the same code or by calling a file that contains the Javascript in the same folder, file, or external location.

It uses both the opening and the closing tag. methods and properties also play an important role here. We will further discuss all its usage in detail.

Adding Javascript To A Code In HTML

Now, let’s check the example and learn more.

<html>
   <body>
      <h1>How to link JavaScript to HTML</h1>
      <div id="check"> Whatever we have written here will not be displayed 
      in the output.</div>

      <script>
           document.getElementById("check").innerHTML ="I am empowered by 
           the script tag to take over the HTML content";
      </script>
   </body>
</html>

Output:

How To Add Javascript To HTML

Here, we have used the method as ‘getElementById()’, property as ‘innerHTML’ and DOM document. The id check of <div> tag is called in by the method inside the <script> tag to change the desired output set in HTML file.

Hence, we see the output written by the property ‘innerHTML’ instead of the one in the <div> tag. This example shows us two things. First, it shows how JavaScript takes over the control, and second, how it can be used to add or delete the content.

Linking To An External File

We can write the JavaScript code in a separate file and use the script tag to call the file. We will use type (may not be necessary for all browsers) and src. The type attribute suggests the type of script and the src attribute gives the source for the external file to be used.

This is the generalized example of it.

<script type="text/javascript" src="path-to-javascript-file.js"> </script>

Specifically for the external file which is not stored in the same folder as the HTML file, we can use the following example:

<script src="[url_of_the_js_library]"> </script>

Illustration to code when .js file is separate:

<html>
   <head>
      <p> <h1> How to link JavaScript in HTML <br> </h1> </p>
      <script src = "/html/script.js" type = "text/javascript"/> </script>
   </head>

   <body>
      <input type = "button" onclick = "President();"  value = "Click Me" 
       style="color:green" /> Click the button to see the dynamic 
       aspect of the page
   </body>
</html>

The Js file code will be:

function President()
{
   	alert("You have clicked the button and linked the JavaScript");
}

Output:

Before clicking the button:

How To Add Javascript To HTML

Once you click on the button:

How To Add Javascript To HTML

JavaScript Frameworks

Frameworks provide codes that are already written by developers and are available to use for free. Some important and commonly used frameworks which have its library that will help you code easily are:

Conclusion

In this tutorial, we learned the basics of adding Javascript to HTML. You can learn more about Javascript here! You can also add CSS to HTML, to create a comprehensive webpage.

To learn such other HTML features subscribe to our blog!

]]> https://www.html5canvastutorials.com/blog/2020/09/how-to-add-javascript-to-html/feed/ 0 How To Comment In HTML https://www.html5canvastutorials.com/blog/2020/09/how-to-comment-in-html/ https://www.html5canvastutorials.com/blog/2020/09/how-to-comment-in-html/#respond Tue, 01 Sep 2020 07:09:07 +0000 https://www.inserthtml.com/?p=6115 How To Comment In HTML
Customer feedback

Writing code isn’t only for the present, it’s an ongoing process. When we code we will need to edit it in the future or collaborate with another coder. That’s where comments come into the picture. It even helps you when you check your work at a later date. Comments are not read by the browser, it solely serves the coding community.

“Clarification comments are intended for anyone (including your future self) who may need to maintain, refactor, or extend your code.”, says FreeCodeCamp.

Yet it is best advised to keep comments to a minimum. So, the question remains “how to comment”? Alright, let’s see how to do it.

Whenever we want a note not to be displayed in the output add  ‘<!–‘ & ‘–>’ in front and end respectively. It’s that simple. Check the code below. You can also try it yourself at Codepen.

<html>
  <div>
    <!-- This is to learn how to comment in HTML and this won't be displayed 
         in the output -->
    <p style="text-align:center;">  I am meant to be displayed  and in 
       center </p> 
  </div>
</html>

Here’s the output of the above code:

How To Comment In HTML

Click here to learn about center text & center image in HTML.

The comment tag does not support any event or standard attribute. Unlike other tags, the comment tag itself is used to start & end the tag.

There was a <comment> tag which was used in earlier versions but modern browsers do not recognize it. Observe the code below and check its output. See if you can find an error in the code.

<html>
  <div>
    < !-- This is to learn how to comment in HTML and this won't be 
          displayed in the output -- >
    <p style="text-align:center;"> Only I was meant to be displayed </p> 
  </div>
</html>
How To Comment In HTML

I’m sure you would have figured out the error. Yes, it is the space after the opening angular bracket ‘<’. Be mindful of not clicking the extra spacebar there.

How To Comment Multiple Lines In HTML

We have seen how to comment in HTML, and now we just need to build on it. Leave a line after the starting of the comment tag ‘<!–‘ and a line before the end tag ‘–>’.

<html>
  <body>
    <!--
       Let’s learn how to comment in HTML.
       Infact How to comment multiple lines in HTML
       This won't be displayed in the output 
     -->
    <p style="text-align:right;"> Even multiple lines will not be displayed 
    </p> 
  </body>
</html>

Now, we can learn how to use these multiple lines comment tags for hiding the code. This can be used when we don’t want the code to get displayed for testing purposes. We can nest multiple tags inside the comment tags. This feature of multiple lines tag helps us keep the redundant or outlived code in the source code without displaying its output.

<html>
  <body>
       <!--
	  <p> We can learn more about HTML here(inserthtml.com)</p>
	  <img src=”html.png” alt=”How to comment in HTML”>
	  Even a write up without a nesting tag won’t be displayed
       -->
       <p> Everything from here is not inside the comment tag and it will be 
           displayed 
       </p>
  </body>
</html>

You can also try out this code on your own at Codepen.

How To Hide Script From Browsers

Sometimes for unsupported browsers, we need to hide the script. For example, while programming in JavaScript, we can use the comment function to hide the script on browsers that don’t support it.

<html>
   <head>
      <title>How to hide from unsupported browsers</title>
   </head>
   <body>
      <script language="javascript" type="text/javascript">
      <!--
         document.write("Comment in HTML")
      //-->
      </script>
   </body>
</html>

As we can see in the code above, insert the comment at the start of the script, and end it with //–> to ensure that the script works on browsers that do support it.

Conclusion

In this tutorial, we learned how to add comments in HTML, how to add multiple lines of comment, and how to hide script that is not supported by the browser. You can learn more such techniques on our blog here!

]]> https://www.html5canvastutorials.com/blog/2020/09/how-to-comment-in-html/feed/ 0 How To Center An Image In HTML https://www.html5canvastutorials.com/blog/2020/09/how-to-center-an-image-in-html/ https://www.html5canvastutorials.com/blog/2020/09/how-to-center-an-image-in-html/#respond Tue, 01 Sep 2020 07:09:04 +0000 https://www.inserthtml.com/?p=6112 How To Center An Image In HTML

A picture speaks a thousand words.

“Websites that use images well can sell a lifestyle, an ideal, an idea or whatever the product needs to sell more”, says ThoughtMechanics. Thus, while learning web development it is important to learn how to format images.

Images are the major ingredient of modern webpages. Without using them the page isn’t eye-catching. Using the right image to express adds value to the content of the page.

Aesthetic images are used as background images and informative images are used for products or services.

Thus, while learning web development it is important to learn how to format images. In this tutorial, we will learn how to add an image, background image & center-align image. So, before learning how to center an image, we will learn how to add an image.

How To Add An Image In HTML

The <img> tag is used to add images to webpages.

Here is the most basic <img> tag:

 <img src="insertimage.png" alt="How to add an image"/>

Out of the several attributes which are supported by <img> tag, only src and alt are required. The rest are useful but optional attributes.

The ‘src’ Attribute

The source attribute tells us where to fetch the image from. There are two different types of URLs you can give for source.

1. Path to an image file within your web site:

<img src="inserthtml.png" alt="Center align the image"/>

2. Path to an image file that is on the web anywhere in the world:

<img src="http://www.example.com/image-with-absolute-url.png" alt="How to add images"/>

The file format preferable for the images depends on the browser and not on the <img> tag, though general types include png, jpg, jpeg, svg, gif and bmp.

The ‘alt’ Attribute

alt represents alternate text for the image. It is useful to provide necessary information to the search engines. Assistive technologies like screen readers can use this to help the listener visualize the text flow.

The alt text will also be displayed on the screen when the browser is unable to load or find the source of the image. It is imperative to use the text which best describes the image. 

<img src="image/tulips.png" alt="This is supposed to be an image of tulips"/>

The Height & Width Attribute

The display of our monitors and laptops are made up of millions of pixels. You may not find the image which fits on your web page perfectly. Yes, we can resize it. This gives the liberty to pick any picture and change the pixel size of it.

Let us see how to add the height and width attribute to an image.

<img src="html.png" alt="How to add an image"  height="180" width="250"/>

This can also be achieved by using CSS, though adding and removing images using HTML is easier.

How To Center Align An Image

The <center> tag which is now supported only in a few web browsers was earlier used to center align. The code for that is:

<center>
<img src="html.png" alt="How to add an image"  height="180" width="250"/>
</center>

Another feature that was available in older versions was using the middle tag attribute. Let us see how that worked:

<img align="middle" src="inserthtml.png" alt="Center align the image"/>

But with the latest version of HTML, center align is done with CSS. For this, first, add an image using HTML.

<p class="centeralign">
    <img src=" inserthtml.png" alt=" Center align the image " />
</p>

To this, you now need to add the CSS code for class “centeralign”. Let us see how that is done.

<style>
.centeralign 
{
    text-align: center;
}
</style>

The above code is pretty self-explanatory. To learn more about adding effects to images using CSS, you can check our blog!

How To Add A Background Image

Adding an amazing aesthetic to your website is inevitable and to do so one of the most basic ways is to add a background image. We can do this by building on what we have learned earlier.

We will use background attribute in the body tag and add a URL of the desired image. Remember, using the attribute in the body tag signifies we want the image on the entire page.

Let’s look at the code:

<html>
   <body background=“inserthtml.png”>
      <h1>Background image in HTML</h1>
      <p>How to add an image in HTML</p>
   </body>
</html>

We can also use the attribute style in tags such as <div>,<p>, etc. It can be used as

style="background-image: url('inserthtml.jpg');"

This will add the image only behind the content in these tags. You can try the above code using HTML Visual Studio.

How To Add Hyperlink To An Image

You can also add a hyperlink to an image. Let us see how you can do that:

<a href="https://inserthtml.com">
   <img src="html.gif" alt="add an image in HTML" width="90" height="110">
</a>

Conclusion

In this tutorial, we learned how to center an image in HTML, how to add a background image, and how to add a hyperlink to an image. It is important to note that the images added to a website should be small in size to keep the speed optimized. You can learn more about how larger images harm a website here!

Similar to images, you can also center text in HTML. Another responsive feature that can be added to a website is image and text sliders. To learn such other styling codes, subscribe to our blog!

]]> https://www.html5canvastutorials.com/blog/2020/09/how-to-center-an-image-in-html/feed/ 0 How To Center Text In HTML https://www.html5canvastutorials.com/blog/2020/09/how-to-center-text-in-html/ https://www.html5canvastutorials.com/blog/2020/09/how-to-center-text-in-html/#respond Tue, 01 Sep 2020 07:08:57 +0000 https://www.inserthtml.com/?p=6109

Formatting and styling is an important step towards making a well-structured website. While CSS is generally used to style a webpage, HTML also provides a lot of options for formatting.

Formatting tags in HTML are of two types:

  • Physical tag: used for text styling i.e. to change the appearance of text
  • Logical tag: this is a semantic tag used to give meaning to different parts of the text.

For example, <b>, <i>, <u> are all physical tags and <em>, <strong> are logical tags.

<b> tag is used to make the text bold. Similarly <i> and <u> tags are used to make any text italic and underlined respectively.

On the other hand, <em> tag is used for emphasized text and the text is usually displayed as italic. <strong> tag is similar to <em> tag. It also emphasizes text but displays it as bold.

“Along with strongly encouraging semantic (meaningful) markup, the HTML5 specification strongly discourages non-meaningful markup “, says html.com.

We just learned some basic formatting tags in HTML. Now let us see some other formatting styles in HTML.

In this tutorial, we will learn about how to center text in HTML? Further in the tutorial, we will also see how to change text color in HTML.

Until recently, HTML used to use <center> tag to center text. However, it no longer uses <center> tag to center-align text in its version 5. The alignment of the text in HTML5 can be achieved in two different ways.

First Method

We can use style as an attribute along with the text which contains string that has to be aligned. Remember we are still using the CSS feature to align our text. The example code below shows how ‘style’ is used inside the <p> tag. To align on right or left we can simply replace ‘center’ in text-align: center with left/right.

<!DOCTYPE html>
	<html>
	   <head>
	      <title> How to centre text in HTML </title>
	   </head>
	
	   <body>
	      <h1> colour text in HTML </h1>
	      <p style="text-align:center;"> Learn HTML </p>
	   </body>
	</html>

Output

Second Method

The other way is similar but it defines the h1 and p tag earlier which is a preferable method once you start using CSS along.

This can be achieved by using the style tag inside HTML. Dive into the example code below to understand further:

<html>
   <head>
      <style>
      h1 {text-align: center;}
      p {text-align: center;}
      </style>
   </head>
   <body>
      <h1> How to center text in HTML </h1>
      <p> Center text in HTML </p>
   </body>
</html>

Now that you’ve understood how styling works in HTML, you can imagine what the output for the above code will be.

So we learned how to center text in HTML. Now let us take a look at how to change text color.

How To Change Text Color In HTML

Similar to the above example, the scope of style can be further expanded to color the text. Let us take an example:

<h2 style="color:blue"> Oceans are blue </h2>
<h3 style="color:yellow">  Yellow is my favourite colour </h3>

Output

Oceans are blue

Yellow is my favourite colour

How To Center Align & Change The Colour Of Text

Now, to get both the desired results we just need to club both the style functionality without using style twice. ‘Text-align’ as well as ‘color’ format can be used together with a single style command. Check the following code:

<p style="text-align:center;color:red;"> Center align with red text </p>

You can try it yourself to see the result.

Conclusion

In this tutorial, we saw how to center text in HTML and how to change text color. These are some simple examples that can be learned even by a novice web developer. It is interesting to note that you can also create custom tags in HTML.

To learn how to center an image in HTML, visit our previous blog. Subscribe to our blog to get more such tutorials!

You can also see some tutorials in CSS such as:

Creating Simple and Interactive Pricing Tables in CSS

15 New Awesome Creative CSS Animations

7 Tips For Replacing The Font Tag

]]> https://www.html5canvastutorials.com/blog/2020/09/how-to-center-text-in-html/feed/ 0 What Is HTML? https://www.html5canvastutorials.com/blog/2020/09/what-is-html/ https://www.html5canvastutorials.com/blog/2020/09/what-is-html/#respond Tue, 01 Sep 2020 07:04:19 +0000 https://www.inserthtml.com/?p=6107

Before we read about ‘What is HTML?’, let us see how it came into being.

Development Of HTML

It has been 30 years since the first website was created. In 1990, in a small office at CERN, Tim-Berner’s Lee envisaged the idea of linking documents and getting them onto public networks. Since that day, HTML has evolved continuously.

HTML is an acronym of ‘Hypertext Markup Language”. It is not a programming language. Rather, it is used to format text documents. Similarly, ‘ Hypertext’ is any text that links web pages. Thus, HTML is a language that links formatted and interactive web pages.

Now that we have a little idea about ‘What Is HTML?’, let us know more about how it has evolved:

Evolution Of HTML

The first version of HTML, HTML 1.0, was released in 1991. Subsequently, multiple versions of HTML have been created and used. Currently, HTML5, the 5th version of HTML, is used extensively to build modern web pages and web apps. “

According to an HTML5 tutorial blog, “HTML5 has brought some exciting new advantages to the HTML coding world. Canvas allows you to render graphics powered by Javascript.”

” The Web Platform Working Group continues the development of the HTML language and provides specifications that enable improved client-side application development on the Web.”, says W3C.

What Is HTML Used For

HTML, when used with CSS and Javascript, has become a key element of website development. CSS standardizes web layouts by describing how HTML elements will be displayed. On the other hand, Javascript is responsible for the way the content behaves. Learn more about CSS and Javascript in these blogs!

Along with building dynamic web pages, HTML is also used to link these web pages. This is where Hypertext comes into play. Using Hypertext, one can navigate from one web page to another. Thus, HTML can be used to create user flows.

Let us now look at an example of a simple webpage using HTML. In this example, we will create a paragraph with the heading ‘What is HTML?’.

First Example Of HTML

<html>  
    <head>  
       <title> HyperText Markup Language </title>  
    </head>  
    <body>  
       <h1>  What is HTML </h1>  
       <p>
           What is HTML? HTML is an acronym of ‘Hypertext Markup Language”. 
       </p>  
    </body>  
</html>

As you can see, HTML uses angular brackets ‘<’ & ‘>’ to differentiate the annotations from regular text. This is an extension of a previous language, SGML (Standard Generalised Markup Language). It tells the browser that the next string is a markup.

Components Of HTML

Anything between the angular brackets is known as a tag. For example, <head>, <body>, <p> are all tags.

Similarly, starting tag(eg. <head>), ending tag (eg. </head>), and everything in between is together known as an element. Here, header, body, paragraph are all elements which are pieces in itself.

Another important component of HTML is attributes. Attributes are additional characteristics and are always mentioned in starting tag. For example,

<p id= “para-1” class= “learning-HTML”> Ceres is an ocean planet </p>

The ‘id’ and ‘class’ are the attributes used to uniquely identify with “para-1” and is a part of a class “learning-HTML”.

The statement used in between tags is not going to affect the attributes. Elements, Tags & Attributes are the important constituents of HTML which makes the modern web pages shine.

Understanding The Example

<html> tag tells the browser that this an HTML document. It contains web content in between.

<head> tag is used before the <body>. This tag mentions information about the document.

<body> tag contains the main body of the web page.

<p> tag is used to write paragraphs in a web document and <h1> tag is used to write a heading.

Similarly, you can also add an image to your webpage using the below code.

<img src="C/inserthtml.jpeg" alt="What is HTML?">

This tag contains two attributes: src which specifies the source of the image and alt which provides an alternate text to describe the image.

Last but not the least, let us take a look at the main functionality of HTML i.e. linking webpages. A hyperlink is used to navigate between websites. I’m sure you would have seen sentences like ‘Find more blogs here‘. Try clicking the link above. It will take you to one of the articles on this website. A hyperlink can work on both texts as well as images.

Conclusion

In this blog, we learned ‘What is Html?’. HTML is the most popular markup language to build websites today. You can learn more about it in our posts here!

]]> https://www.html5canvastutorials.com/blog/2020/09/what-is-html/feed/ 0