HTML Skeleton, Elements and CheatSheet

Blog Desk April 29, 2021 1446 No Comments

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

It is Free
HTML is Easy to Learn and Use
HTML is Basic of all Programming Languages
HTML is User-Friendly
HTML is supported by all Browsers
HTML is Simple to Edit
HTML can integrate easily with Other Languages
HTML is very Lightweight
Display Changes Instantly

Disadvantages of HTML

It can create only static and plain pages so we can not create dynamic pages using HTML.
Need to write a lot of code for making a simple webpage.
Security features are not available in HTML.
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:

Domain name like: hitech.edu.np, www.yamsoti.com, www.google.com
Hosting package (storage space)
FTP Server: File zilla, Cute, winscp FTP etc.
cPanel
PC with internet connection

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 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)

<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: or

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, is starting tag of a paragraph and is closing tag of the same paragraph but This is my paragraph 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>