Skip to main content

Basics Of HTML

Lesson 1: Introduction Of HTMl

HTML stands for Hyper Text Markup Language an is used to create Web pages. Diffrent types of elements are present in html which are used to display content in different ways.

Display HTML Code Example 
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Page Title</title>
    </head>
    <body>
    <h1>Learning HTML!</h1>
    <p>This is the first paragraph</p>
    </body>
    </html>
Test This Code in HTML Editor Here

Or How to Test Above Code:

To test this example write the above code in “NOTEPAD” and saveAs with any name “index.htm” Now open this file in any browser to check performance.

Let’s understand the above code:

The <head> is used to creating heading of document which we can see when loading the page in any browser. \ The <h1> < /h1 >is used to create large heading. We can create many types of headings with different tags like <h2> </h2>, <h3>> </h3>, <h4> </h4>, <h5> </h5>, <h6> /h6>. The <p>> </p>> element is used to write paragraph.

All HTML documents must start with a document type declaration: . The HTML document itself begins with <html> and ends with </html>. The visible part of the HTML document is between <body> and </body>.

Lesson 2: What are Attributes in HTML ?

If we want to give some additional information about HTML elements then we use attributes. 

The various types of attributes are: 

  • The href attribute of <a> Is used to create link.
  • The src attribute of <img> specifies the path to the image to be displayed in page. 
  • The width and height attributes of <img> provide size information for images.
  • The alt attribute of <img> provides an alternate text for an image.
  • The style attribute is used to add styles to an element, such as color, font, size etc.
  • The lang attribute of the <html> tag declares the language of the Web page.
  • The title attribute defines some extra information about an element.

Let’s Understand with examples:

  • <a href="https://www.abcsa.co.in">Visit our website</a>
  • <img src="Logo.jpg">
  • <img src="Logo.jpg" width="200" height="200">
  • <img src="Logo.jpg" alt="logo of abcsa">
  • <p style="color:blue;">Paragraph in blue color</p>
  • <html lang="en">
  • <p title="This is starting para">One of the best website.</p>

Lesson 3: Formatting HTML

Formatting elements were designed to display special types of text such as 

<b> for  Bold text

<strong> for Important text

<i> for Italic text

<em> for Emphasized text

<mark> for Marked text

<small> for Smaller text

<del> for Deleted text

<ins> for Inserted text

<sub> for Subscript text

<sup> for Superscript text


Test the above formatting like this:

Make the html document in NOTEPAD and type the below code to check results.

<b> ABCSA</b> 

<strong>My New Website</<strong>

<i> ABCSA</i>

<em> ABCSa</em>

<mark> Akhil Bhartiya Computer Shiksha Abhiyan</mark>

<small> ABCSA</small>

<del> 100</del>

<ins> checking</ins>

H<sub>2 </sub>O

10<sup> th</sup>

Test This Code in HTML Editor Here

Lesson 4: Working With Paragraph

We can write paragraph in simply by using this tag -

<p>This is my first paragraph.</p>

But while working with paragraph we have to use different types of tags as per need which are given below-

Tag With Description

  • <hr>   To draw a horizontal line
  • <br>    Inserts a single line break
  • <pre> Defines pre-formatted text
  • <style> To make the paragraph interesting and attractive.


Let’s check with practical example:

<!DOCTYPE html>

<html>

<head>

<title>Title of Page</title>

</head>

<p style="color:red;">text in red color</p>

<p style="color:blue;">text in blue color</p>

<p style="color:green;">text in green color</p>

<p style="font-size:70px;">changing font to big size.</p>

<p style="font-family:Times;">This will change the fonts to times.</p>

<p style="text-align:right;">This will change the alignment to right.</p>

</html>

Test This Code in HTML Editor Here

or

Students can make the HTML  file in notebook and test the above code in any browser.

Lesson 5: Working with colors

There are many types of colors we can use in our webpage directly with there name like as-

Green, yellow, red, Tomato, Orange, DodgerBlue, MediumSeaGreen, Gray,SlateBlue, Violet, LightGray etc.

Let’s Check With example:

HTMl code to set background with different colors-

<!DOCTYPE html>

<html>

<body>

<p style="background-color:Tomato;">Tomato</p>

<h2 style="background-color:Orange;">Orange</h2>

<h3 style="background-color:DodgerBlue;">DodgerBlue</h3>

<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>

<h2 style="background-color:Gray;">Gray</h2>

<h3 style="background-color:SlateBlue;">SlateBlue</h3>

<h4 style="background-color:Violet;">Violet</h4>

<h5 style="background-color:LightGray;">LightGray</h5>

<h1 style="background-color:yellow;">MediumSeaGreen</h1>


</body>

</html>

Test This Code in HTML Editor Here


HTML code to change text color:

<!DOCTYPE html>

<html>

<body>

<h3 style="color:yellow;">Testing text colors</h3>

<p style="color:green;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>


<p style="color:dodgerblue;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>


</body>

</html>

Test This Code in HTML Editor Here


HTML code to change color of borders:

<!DOCTYPE html>

<html>

<body>


<h1 style="border: 10px solid Tomato;">Welcome to ABCSA</h1>


<h1 style="border: 5px solid DodgerBlue;">Welcome to ABCSA</h1>


<h1 style="border: 20px solid Violet;">Welcome to ABCSA</h1>


</body>

</html>

Test This Code in HTML Editor Here

Lesson 6: Working With Links

HTML Links are used to visit another page or to execute any command. For example we can link any text, image, email or button. 

Let’s understand this with example-

<!DOCTYPE html>

<html>

<body>

<h1>HTML Links</h1>

<p><a href="https://www.acsa.co.in/">Visit our website</a></p>

<p><a href=https://www.acsa.co.in/ target="_blank">Visit our website</a></p>

<button type="submit" value="Submit">Submit</button>

  <button type="reset" value="Reset">Reset</button></body>

<a href="mailto:infoabcsa@gmail.com">Send email</a>

<a href="https://www.abcsa.co.in/"><img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;"></a>

</html>

Test This Code in HTML Editor Here


Bookmarking Linking:

This is very useful when your article or page is very long and you want that your visitor may jump to a specific part by clicking any text or image. 

To use this “id” is used.

Let’s understand with example:

<!DOCTYPE html>

<html>

<body>

<p><a href="#lesson9">Jump to lesson 9</a></p>

<p><a href="#lesson5">Jump to lesson 5</a></p>

<h3>Chapter 1</h3>

<h3 >Chapter 2</h3>

<h3>Chapter 3</h3>

<h3 >Chapter 4</h3>

<h3 id="lesson5">Chapter 5</h3>

<h3>Chapter 6</h3>

<h3>Chapter 7</h3>

<h3>Chapter 8</h3>

<h3 id="lesson9">Chapter 9</h3>

</body>

</html>

When you open this webpage then you can jump to lesson 5 and lesson 9 by clicking the links.

Test This Code in HTML Editor Here

This is used to make contents a the top of article or page to give easy access to visitors to jump on a specific section. 

Lesson 7: Working with Lists In HTMl

HTML lists are very helpful any web developer to group a set of related items in lists.

There are 2 types of lists:

  1. Ordered list – it is made by numbers.
  2. Unordered list - It is made by using dots or symbol

Let’s understand with example:

<!DOCTYPE html>

<html>

<body>

<h2>An Unordered HTML List</h2>

<ul>

  <li>Ujjain</li>

  <li>Ahmdabad</li>

  <li>Muymbai</li>

  <li>Indore</li>

  <li>Chennai</li>

</ul>  


<h2>An Ordered HTML List</h2>

<ol>

  <li>Ujjain</li>

  <li>Ahmdabad</li>

  <li>Muymbai</li>

  <li>Indore</li>

  <li>Chennai</li>

</ol> 

</body>

</html>


Test This Code in HTML Editor Here


Lesson 8:Working with Entities

These are Reserved characters in HTML which are used to write special character.

Let’s understand with example.

<!DOCTYPE html>

<html>

<body>

<h1>HTML Entity Example</h1>


<h2>The less-than sign: &lt;</h2>

<h2>A space character: &nbsp;</h2>

<h2>greaterthan sign: &gt;</h2>

<h2>ampersand sign: &amp;;</h2>

<h2>double quote : &quot;</h2>

<h2>single quotation mark: &apos;</h2>

<h2>copyright symbol: &copy;</h2>

<h2>trademark symbol: &reg;</h2>

</body>

</html>

Test This Code in HTML Editor Here


So this is the Basic HTML course 

In our ADVANCE COURSE we will learn more details. 

Want To Test Your Knowledge online Click Here

Do You Want Certificate of this Course Then Do Contact ABCSA Here.


End of Lessons
Labels:

Comments

Post a Comment

Popular posts from this blog

Page Maker Tutorial

Adobe PageMaker 7.0 learn page maker Chapter 1 - Basic Information - PageMaker  Basic Information: Adobe PageMaker is powerful and versatile page layout software. Professionals use PageMaker for its exceptional typographic controls, exacting page design capabilities, including layers, frames, and multiple master pages, and numerous customizing options.  PageMaker’s extensive importing and linking capabilities let you incorporate text, graphics, spreadsheets, charts, and movie frames from most popular programs. It also incorporates menu plug-ins that extend the program’s features and capabilities. It also supports advanced color printing technologies, including high-fidelity inks, color management support, automatic trapping, built-in imposition tools, and complete separation capabilities for text and graphics. Let us first understand the PageMaker Window with its various components. Fig 1 shows the important areas of the PageMaker window: To check f...
Read more

Kaise Khole Computer Center Bharat Mai

कैसे खोले कंप्यूटर सेन्टर, how to open computer center, franchise opportunity to run computer center. kaise khole computer center bharat me Kaise Khole Computer Center Bharat Mai क्या आप कंप्यूटर सेन्टर चला रहे हैं क्या आप ISO सर्टिफाइड संस्था से जुड़ना चाहते हैं. क्या आप कंप्यूटर के क्षेत्र में अपना नाम करना चाहते हैं. क्या आप बहुत ही कम लागत में अपना स्वयं का कंप्यूटर शिक्षण का कार्य करना चाहते हैं. अगर इन सवालों का जवाब हाँ है तो आप अपने सपने को आज ही साकार कर सकते है “अखिल भारतीय कंप्यूटर शिक्षा अभियान ” से जुड़कर. अखिल भारतीय कंप्यूटर शिक्षा अभियान राष्ट्रिय स्तर पर संचालित संस्था है जिसकी फ्रेंचाइसी लेके आप सफलता पूर्वक अपना कंप्यूटर सेन्टर चला सकते हैं.  आप भारत में कहीं भी कंप्यूटर सेन्टर खोल सकते हैं ABCSA की फ्रैंचाइज़ी लेके. आप किसी गाँव में कंप्यूटर सेन्टर खोल सकते हैं. आप किसी तहसील में कंप्यूटर सेन्टर खोल सकते हैं.  आप किसी शहर में कंप्यूटर सेन्टर संचालित कर सकते हैं.  बनिए भागीदार डिजिटल इंडिया मिशन में आज ही फ्रैंचाइज़ी लेके. ABCSA...
Read more

Career In Information Technology

Millions of vacancy comes out every year in Information technology sector. It is the fastest growing industry where scope will never end because of digitisation. A computer literate person is not only able to get job in nation but there is a great scope in international level. So there is a good chance of making career in this field. best career options in IT And if any one is entrepreneur then no doubt he or she can earn unlimited as per the calibre. Any student who have done course from Akhil Bhartiya Computer Shiksha Abhiyan Can Make Career In following ways: Student can open his or her own computer education center/computer training center of hardware and software. Student can become web designer. Student can become a network engineer. He or she can become faculty/teacher in any institute. Person can get job as a computer operator. Student can start career as a hardware professional. Person can become a programmer or software developer. Student can work as ...
Read more