HTML Skeleton, Elements and CheatSheet

  Computer Guru       April 29, 2021      67

HTML Skeleton Elements and CheatSheet

Introduction to HTML :

HTML stands for Hyper Text Markup Language. It is a web page describing language developed by W3 Consortium (founder of W3 Consortium “Tim Berners Lee” in 1989). We learn about HTML Skeleton, Elements and CheatSheet.

File Extension:  .html or .htm

Importance of HTML in Webpage Designing

HTML is a significant tool for building up a website or web applications. It is a scripting language used to describe the structure of information on a web page. HTML, CSS, and JavaScript makes up the essential building blocks of websites. HTML controls page heading, paragraph, inserting images, creating table, list items, creating forms etc. CSS controls the look of a page, and JavaScript designs interactive a content.

Advantages of HTML

  1. It is Free
  2. HTML is Easy to Learn and Use
  3. HTML is Basic of all Programming Languages
  4. HTML is User-Friendly
  5. HTML is supported by all Browsers
  6. HTML is Simple to Edit
  7. HTML can integrate easily with Other Languages
  8. HTML is very Lightweight
  9. Display Changes Instantly

Disadvantages of HTML

  1. It can create only static and plain pages so we can not create dynamic pages using HTML.
  2. Need to write a lot of code for making a simple webpage.
  3. Security features are not available in HTML.
  4. If we need to write long code for making a webpage then it produces some complexity.

Requirement:
Creating  page
Text Editor: Notepad, Notepad++, Sublime Text, Atom, Visual Studio Code, Dreamweaver, Microsoft Front Page etc.

Web browser: Internet Explorer, Mozilla Firefox, Google Chrome, opera, Safari etc.

Publishing website:

Skeleton of HTML


<!DOCTYPE html>
<html>
  <head>
     <title>This is my first page</title>
  </head>
  <body>
     <h1>Welcome to HTML</h1>
     <p>Hi I am learning HTML.</p>
  </body>
</html>
HTML Skeleton, Elements and CheatSheet
HTML Skeleton Elements and CheatSheet

HTML Tag

HTML tags are element names surrounded by angle brackets:<>

There two types of html tag :

Paired tag (container tag):

  • Opening tag <html>
  • Closing tag </html>

Unpaired tag (empty tag)

  • <br>
  • <img>
  • <hr>
  • <input>
  • <embed>
  • <frame src>

What is the difference between container tag and empty tag?

Container Tag

  • Container tag consists of opening and closing tag
  • Container tag have content in between opening and closing tag

Example:


<title>page title</title>
<p>paragraph text goes here</p>
<h1>Heading Title goes here</h1>
Empty Tag

  • Empty tag is without closing tag
  • Empty tag is without content

Example:


<br>
<hr>
<input type="text" name="name">
<img src="images/logo.jpg">

HTML Attributes

HTML attributes are values added to the opening tag of an element to configure the element or change the element’s default behavior. Like: <p align=”justify”> or <p style=”text-align:justify;”>

HTML Comments

HTML comments are not displayed in the browser, but they can help document your HTML source code.
<!– Write your comments here –>

HTML Tag vs. Element

An HTML element is defined by a starting tag. If the element contains other content, it ends with a closing tag.
For example, <p> is starting tag of a paragraph and </p> is closing tag of the same paragraph but <p>This is my paragraph</p> is a paragraph element.

Nested HTML Elements

It is very much allowed to keep one HTML element inside another HTML element
Example


<!DOCTYPE html>
<html>
    <head>
        <title>Nested Elements Example</title>
    </head>
  <body>
    <h1>This is <u>under line style inside heading</u> heading</h1>
    <p>This is <i>italic style inside paragraph element</i> paragraph</p>
  </body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *