HTML Smiley Face Code

What is HTML?

HTML is also known as HyperText Markup language. It is the standard markup language that we use to create web pages. It is a combination of Hypertext and markup language. With the use of we can define the link between the web pages.

Using HTML, we can define the text document within the tag to define the structure of web pages. We can use this language to annotate text so that a machine can understand it and manipulate text accordingly.

Various elements help us tell the search engine how to display page content.

For example, headings, lists, images, links, and many more.

How to create a smiley face in HTML?

Let's take an example to understand how we can create a smiley face using HTML.

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Smiley Face</title>
  <style>
    div#wrapper {
      width: 10%;
      padding: 50px;
    }
   .smiley {
      height: 100px;
      width: 100px;
      position: relative;
      border-radius: 50px;
      -moz-border-radius: 50px;
      -webkit-border-radius: 50px;
    }
   .smiley.eye {
      height: 12px;
      width: 12px;
      border-radius: 6px;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
      position: absolute;
    }
   .left-eye {
      top: 25px;
      left: 30px;
    }
   .right-eye {
      top: 25px;
      right: 30px;
    }
   .mouth {
      -webkit-border-bottom-right-radius: 30px;
      -webkit-border-bottom-left-radius: 30px;
      -moz-border-radius-bottomright: 30px;
      -moz-border-radius-bottomleft: 30px;
      border-bottom-right-radius: 30px;
      border-bottom-left-radius: 30px;
      height: 30px;
      background-color: #000;
      position: absolute;
      width: 50px;
      left: 25px;
      top: 60px;
    }
    div#wrapper,.smiley div {
      background-color: rgb(8, 8, 8);
    }
   .smiley {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div id="wrapper">
    <div class="smiley">
      <div class="left-eye eye"></div>
      <div class="right-eye eye"></div>
      <div class="mouth"></div>
    </div>
  </div>
</body>
</html>

Output:

Features of HTML

HTML has many features but we will see some common features of HTML such as:

Simple and User-friendly

We use the tags for annotations to write HTML. By using HTML, tag structure we make it easier for users and browsers to read the content efficiently. We can also allow the browser to add CSS to the document which results in a better visual combination.

Semantic Structure

It is one of the most common features of HTML. It includes several tags for annotating certain elements for their specialized uses. For example, suppose the <article> tag is used to annotate page content. The <aside> tag is used so we can represent the content of the document which is indirectly connected to the major content.

Multimedia Integration

It possesses the inbuilt capability to embed different forms of multimedia content, including audio files, images, and videos, into web pages. We can achieve embedded multimedia content with the use of appropriate tags within HTML such as <img>, <video>, and <audio>.

We have another key feature of HTML is the <canvas> tag, which facilitates dynamic graphics alongside animations.

Responsive design

HTML has coding principles that have modes like fluid girls and adaptable images and breakpoints in web design. With the help of this approach, we can guarantee that the website will remain visually striking for the PC and mobile and it will be still suitable and responsive.

SEO (Search Engine Optimization)

With the help of tags, we can enhance the searchability of a website. HTML makes it easy for the search engine crawler to crawl a website's content. Some tags help with the search engine optimization of a website in HTML such as the title, meta description, heading, and alt attribute.

Media Support

It also supports the display of images, video, and audio because it has good media-playback capabilities. HTML5 introduced <video> and <audio> tags which make it easier than before. By using it we can provide controls, graphics for buttons, and even control playback programmatically.

Platform independent

It runs on a browser and is not specific to a platform. We can load the websites designed with the use of HTML or any browser. It can be interpreted on any computer or mobile device regardless of the operating system. So HTML and all the versions are platform-independent.

Web workers

When several highly demanding tasks are performed simultaneously, the browser can become slow. To overcome this issue, HTML5 introduced web workers. Web workers help perform tasks in the background without interfering with the UI thread. This feature can be used to execute tasks, such as multimedia processing, in the background.

In conclusion, HTML 5 offers additional features that improve web development and enable the creation of dynamic and interactive websites with greater dependability. HTML remains pivotal for effective web development.

Next TopicHow to Add CSS Files in HTML

← prev next →