Top Blog Pk

Consider the following list, if user enters 5 then display “2 times” because “5” occurs 2 times in the list

2020-12-08T04:12:00.015-08:00

Write pseudo code to count occurrence of a given number in the list. For example, consider the following list, if user enters 5 then display “2 times” because “5” occurs 2 times in the list.

Given Array

int A[] = {5, 3, 6, 8, 5, 1};

Write pseudo code to count occurrence of a given number in the list. For example, consider the following list, if user enters 5 then display “2 times” because “5” occurs 2 times in the list.

Solution :

By using C Language.

#include <stdio.h>

int BinarySearch(int A[], int N, int x, int searchFirst)
{

int low = 0, high = N - 1;


int result = -1;

while (low <= high)
{

int mid = (low + high)/2;

if (x == A[mid])
{
result = mid;


if (searchFirst)
high = mid - 1;


else
low = mid + 1;
}


else if (x < A[mid])
high = mid - 1;


else
low = mid + 1;
}


return result;
}

int main(void)
{
int A[] = {5, 3, 6, 8, 5, 1};
int target = 5;

int n = sizeof(A)/sizeof(A[0]);

int first = BinarySearch(A, n, target, 1);


int last = BinarySearch(A, n, target, 0);

int count = last - first + 1;

if (first != -1)
printf("Element %d occurs %d times.", target, count);
else
printf("Element not found in the array.");

return 0;
}

Output : Element 5 occurs 2 times

Question :

Write pseudo code to count occurrence of a given number in the list. For example, consider the following list, if user enters 5 then display “2 times” because “5” occurs 2 times in the list.

Solution:

As above mentioned.

ATTENTION

Please let me know if you have any questions. I hope the above is useful to you.

How to Make a Pricing Section Card / Price box with a Luxury and Attractive Style

2020-11-03T23:08:00.005-08:00

Hi Web Developers! this time the BlogPk

teacher will share a tutorial on how to make a Pricing Section Card / Price box in a luxurious and attractive style that is simple to look at, not boring for sure.

0h yeah, for those of you who want to know
how to create a profile card page, click here
Let's start the tutorial, follow it to the end,
okay?

first prepare your computer or your
smartphone and don't forget a cup of warm
coffee water to accompany you coding later

if the ingredients are ready, we will continue to the tutorial:

Please open your worksheet, add the
following code in your worksheet.

🔥 HTML

Please add the following HTML code:

You can adjust the content yourself.

<div class="pricing-section">

<div class="pricing-container">

    <div class="pricing-column">

        <div class="pricing-title">Basic</div>

        <div class="pricing-tag">Discount 20%</div>

        <div class="pricing-price">Pkr 80.000</div>

        <div class="service-info">

        <ul>

        <li>Documentation</li>

        <li>Premium Template</li>

        <li>1 License</li>

        <li>Full Optimization</li>

        <li>1 Month Full Support</li>

        <li>Easy Customize</li>

        <li>-</li>

        </ul>

        </div>

        <a class="pricing-order-btn" href="#" title="#" target="_blank">Order Now</a>

    </div>

    <div class="pricing-column">

        <div class="pricing-title">Personal</div>

        <div class="pricing-tag">Best Value</div>

        <div class="pricing-price">Pkr 510.000</div>

        <div class="service-info">

        <ul>

        <li>Documentation</li>

        <li>Premium Template</li>

        <li>3 License</li>

        <li>Full Optimization</li>

        <li>3 Month Full Support</li>

        <li>Easy Customize</li>

        <li>-</li>

        </ul>

        </div>

        <a class="pricing-order-btn" href="#" title="#" target="_blank">Order Now</a>

    </div>

    <div class="pricing-column">
<div class="pricing-title">Developer</div>

<div class="pricing-tag">For Business</div>

<div class="pricing-price">Pkr 1.000.000</div>

<div class="service-info"> <ul>

<li>Documentation</li> <li>Premium Template</li> <li>Unlimited License</li> <li>Full Optimization</li> <li>6 Month Full Support</li> <li>Easy Customize</li>

<li>1 Bonus Template</li> </ul>

</div>

<a class="pricing-order-btn" href="#" title="#" target="_blank">Order Now</a>

</div>

 </div></div>

🔥 CSS
Please add the following css code:
You can adjust the color yourself

<style type="text/css">

/* Pricing Section Card by TopBlog Pk(topblogpk.blogspot.com) */

.pricing-section{font-family:'Google Sans',Arial,sans-serif;position:relative;overflow:hidden;display:block;margin:15px 0;line-height:1.7}

.pricing-section .pricing-title{font-size:1.1rem;margin:1rem 0 0;font-weight:700}

.pricing-container{display:flex;max-width:1000px;margin:0 auto}

.pricing-tag{margin:.5rem 0 1rem;font-size:13px;display:inline-block;background:#333;color:#fff;padding:3px 15px;border-radius:20px}

a.pricing-order-btn{font-size:14px;text-transform:uppercase;text-decoration:none;background:#333;color:#fff;display:inline-block;padding:7px 20px;border-radius:20px;transition:all .3s ease-in-out}

a.pricing-order-btn:hover{transform:scale(1.1)}

.pricing-column{background:#fff;padding:30px 15px;box-sizing:border-box;border-radius:10px;text-align:center;width:33%;margin:10px;box-shadow:0 7px 7px rgba(0,0,0,0.06);border:2px solid #fff;transition:all .3s ease-in-out}

.pricing-column ul{list-style:none;padding:10px 0;margin:0;font-size:14px;line-height:2.2}

.pricing-column img{width:50px}

.pricing-section i{font-size:3rem}

.pricing-price{font-weight:700;font-size:22px}

.service-info{opacity:.7}

.pricing-2-column .pricing-column{width:50%}

.pricing-column:nth-child(1) .pricing-price,.pricing-column:nth-child(1) i{color:#f87200}

.pricing-column:nth-child(2) .pricing-price,.pricing-column:nth-child(2) i{color:#ff5483}

.pricing-column:nth-child(3) .pricing-price,.pricing-column:nth-child(3) i{color:#2b73f6}

.pricing-column:nth-child(1):hover{border-color:#f87200}

.pricing-column:nth-child(2):hover{border-color:#ff5483}

.pricing-column:nth-child(3):hover{border-color:#2b73f6}

.pricing-column:nth-child(1) .pricing-tag,.pricing-column:nth-child(1) a.pricing-order-btn{background:#f87200}

.pricing-column:nth-child(2) .pricing-tag,.pricing-column:nth-child(2) a.pricing-order-btn{background:#ff5483}

.pricing-column:nth-child(3) .pricing-tag,.pricing-column:nth-child(3) a.pricing-order-btn{background:#2b73f6}

@media screen and (max-width:580px){

.pricing-column,.pricing-2-column .pricing-column{width:auto}

.pricing-container{display:block}}

</style>

The tutorial has been completed, later we will link back with another interesting tutorial of course. Continue to monitor this blog or follow this blog so that when Mimin makes new articles you get notifications.

HTML Complete Course A to Z By TopBlog Pk

2020-10-19T10:29:00.004-07:00

In this article, I am going to share some of the best, free online courses to learn Web Development using HTML and CSS. If you are new to web development space then you can use these courses to start your journey in the beautiful world of websites.

It’s one of my favorite course and the only courses you need to learn web development HTML, CSS, JS, Node, and many More!

Online Courses to learn Web Development using HTML and CSS By TopBlog Pk

Here is my collection of some of the best web development courses for programs which are available free of cost. You can learn them from these courses from the comfort of your office and home and you can also learn at your own pace. You can slow down, do some coding and then start again.

HTML Couse [3 weeks Course]

(Week 1)

Access	Topic Name
View	Introduction to HTML
View	HTML Building Blocks
View	HTML Tags
View	HTML Attributes
View	HTML Elements
View	HTML Formatting
View	HTML Heading
View	HTML Paragraph
View	HTML Anchor

(Week 2)

Access	Topic Name
View	HTML Image
View	HTML Table
View	HTML Lists
View	HTML Ordered List
View	HTML Un-Ordered List
View	HTML with CSS
View	HTML Classes
View	HTML Id
View	HTML Iframes

(Week 3)

Access	Topic Name
View	HTML JavaScript
View	HTML Comments
View	HTML File Path
View	HTML Head
View	HTML Layout
View	HTML Responsive
View	HTML Entities
View	HTML Charset
View	HTML Global Attributes

Thanks for reading this article. If you like these free web development courses then please share with your friends and colleagues. If you have any questions ❓or feedback then please drop a note.

Learn Basic HTML Complete Course part 1

2020-10-16T02:17:00.003-07:00

Introduction of HTML

HTML – HyperText Markup Language – The Language of Web Pages on the World Wide Web.

🔹HTML is a text formatting language.

URL – Uniform Resource Locator.

Browser – A software program which is used to show web pages.

W W W – World Wide Web

Brief History of HTML

HTML was created by Berners-Lee in late 1991.

Tim Berners-Lee is known as father of HTML. The first available description of HTML was a document called "HTML Tags" proposed by Tim in late 1991. The latest version of HTML is HTML5, which we will learn later in this tutorial.

"HTML 2.0" was the first standard HTML specification which was published in 1995. HTML 4.01 was a major version of HTML and it was published in late 1999. Though HTML 4.01 version is widely used but currently we are having HTML-5 version which is an extension to HTML 4.01, and this version was published in 2012.

Choosing Text Editor

There are many different programs that you can use to create web documents. 🔹HTML Editors enable users to create documents quickly and easily by pushing a few buttons. Instead of entering all of the HTML codes by hand. These programs will generate the HTML Source Code for you.

🔹NotePad is the standard text editor that comes with the microsoft windows operating system. To start NotePad in windows 9x or XP follow the steps bellow: Click on the “Start” button located on your Windows task bar. Click on “Programs” and then click on the directory menu labeled “Accessories”. Locate the shortcut “NotePad” and click the shortcut once.

Upon completing this section, you should be able to

1. Choose a Text Editor.

2. Create a Basic Starting Document.

3. Understand and set Document Properties.

4. View Your Results in a Browser.

Features of HTML

🔹It is a very easy and simple language. It can be easily understood and modified.
🔹It is very easy to make effective presentation with HTML because it has a lot of formatting tags.
🔹It is a markup language so it provides a flexible way to design web pages along with the text.
🔹It facilitates programmers to add link on the web pages (by html anchor tag) , so it enhances the interest of browsing of the user.
🔹It is platform-independent because it can be displayed on any platform like Windows, Linux and Macintosh etc.
🔹It facilitates the programmer to add Graphics, Videos, and Sound to the web pages which makes it more attractive and interactive.
🔹HTML is case-insensitive language, which means we can use tags either in lower-case

Learn Basic HTML Complete Course part 2

2020-10-16T01:50:00.002-07:00

Building blocks of HTML

An HTML document consist of its basic building blocks which are:

Tags: An HTML tag surrounds the content and apply meaning to it. It is written between < and > brackets.
Attribute: An attribute in HTML provides extra information about the element, and it is applied within the start tag. An HTML attribute contains two fields: name and value.

Syntax

<tag_name attribute_name="attr_value">content</tag_name>

Example

<!DOCTYPE html>
<html>
<head>
    <title>The basic building blocks of HTML</title>
</head>
<body>
    <h2>The building blocks</h2>
    <p>This is a paragraph tag</p>
    <p style="color: red">The style is attribute of paragraph tag</p>
    <span>The element contains tag, attribute and content</span>
</body>
</html>

output:

The building blocks

This is a paragraph tag

The style is attribute of paragraph tag

The element contains tag, attribute and content

One important thing In above example is,

<!DOCTYPE html>

The Purpose of <!DOCTYPE html>
🔹The very first line in every web document should contain a <!DOCTYPE html> declaration. Even though it's wrapped in angle brackets, it is not a tag but a statement.

🔹Doctype stands for Document Type Declaration. It informs the web browser about the type and version of HTML used in building the web document. This helps the browser to handle and load it properly.

The HTML5 word <!DOCTYPE html> means "this page is written in HTML5" as opposed to, say HTML 4.01.

Unlike earlier versions of HTML, in HTML5 the doctype declaration is case-insensitive.
In other words <!doctype html> works as well as <!DOCTYPE html>.

Hope you understand <!DOCTYPE html>😊!

Learn Basic HTML Complete Course part 3

2020-10-16T01:43:00.006-07:00

HTML Tags

HTML tags are like keywords which defines that how web browser will format and display the content. With the help of tags, a web browser can distinguish between an HTML content and a simple content. HTML tags contain three main parts: opening tag, content and closing tag. But some HTML tags are unclosed tags.

When a web browser reads an HTML document, browser reads it from top to bottom and left to right. HTML tags are used to create HTML documents and render their properties. Each HTML tags have different properties.

An HTML file must have some essential tags so that web browser can differentiate between a simple text and HTML text. You can use as many tags you want as per your code requirement.

All HTML tags must enclosed within < > these brackets.
Every tag in HTML perform different tasks.
If you have used an open tag , then you must use a close tag (except some tags)

HTML Tag Examples

Unclosed HTML Tags

Some HTML tags are not closed, for example br and hr.

br Tag: br stands for break line, it breaks the line of the code.

hr Tag: hr stands for Horizontal Rule. This tag is used to put a line across the webpage.

HTML uses various tags to create the structure of the web page. Every tag is written inside angular brackets <>. Almost every tag also has a corresponding closing tag. Tags are also known as elements.

Tags are of two types-
(a) Container Tags/Elements
(b) Empty Tags/Elements

The tags are discussed below:

(i) <!DOCTYPE html>
This tag is used to tell the web browser that the following text document is a HTML document. There's no need to mention the HTML version.

(ii) <html>
This tag comprises of the complete HTML document and everything in a HTML document needs to be written inside these angular brackets.

(iii) <head>
This tag is used for document's header.

(iv) <title>
This tag is used to mention the title of the document and is placed inside <head> tag.

(v) <body> This tag consists of body of HTML document. It includes other HTML tags like <h1> and <p>.

(vi) <h1>
This tag represents the main heading of the document. A document can have multiple headings and can be denotes as <h2>, <h3>,...,etc.

(vii) <p>
This is a container element and is used to represent the paragraph of the HTML document.

Remaining Tags are as follow...

HTML Meta Tags

DOCTYPE, title, link, meta and style

HTML Text Tags

<p>, <h1>, <h2>, <h4>, <h4>, <h5>, <h6>,
<strong>, <em>, <abbr>, <acronym>, <address>,
<bdo>, <blockquote>, <cite>, <q>, <code>, <ins>,
<del>, <dfn>, <kbd>, <pre>, <samp>, <var> and <br>

HTML Link Tags

<a> and <base>

HTML Image and Object Tags

<img>, <area>, <map>, <param> and <object>

HTML List Tags

<ul>, <ol>, <li>, <dl>, <dt> and <dd>

HTML Table Tags

<table>, <tr>, <td>, <th>, <tbody>,<thead>,
<tfoot>, <col>, <colgroup> and <caption>

HTML Form Tags

<form>, <input>, <textarea>, <select>, <option>,
<optgroup>, <button>, <label>, <fieldset> and
<legend>

HTML Scripting Tags

<script> </script> and <noscript>

Learn Basic HTML Complete Course part 4

2020-10-16T00:45:00.003-07:00

HTML Attribute

HTML attributes are special words which provide additional information about the elements or attributes are the modifier of the HTML element.

🔹Each element or tag can have attributes, which defines the behaviour of that element.

🔹Attributes should always be applied with start tag.
The Attribute should always be applied with its name and value pair.

🔹The Attributes name and values are case sensitive, and it is recommended by W3C that it should be written in Lowercase only.

🔹You can add multiple attributes in one HTML element, but need to give space between two attributes.

Syntax

<element attribute_name="value">content</element>

Example

<!DOCTYPE html>
<html>
    <head>
    </head>

    <body>
        <h4> This is Style attribute</h4>
        <p style="height: 50px; color: blue">It will
add style property in element</p>
        <p style="color: red">It will change the color of content</p>
    </body>
</html>

output:

This is Style attribute

It will add style property in element

It will change the color of content

Explanation of above example:
<p dir="ltr"><span style="font-size: 1em;"><span style="background-color: #fcff01;"><p style="height: 50px; color: blue">It will add style property in element</p></span>  </span> </p>

In the above statement, we have used paragraph tags in which we have applied style attribute. This attribute is used for applying CSS property on any HTML element. It provides height to paragraph element of 50px and turns it colour to blue.

<p dir="ltr"><span style="font-size: 1em;"><span style="background-color: #fcff01;"><p style="color: red">It will change the color of content</p>  </span> </span><br /></p>

In the above statement we have again used style attribute in paragraph tag, which turns its colour red.

There are some commonly used attributes are given below, and the complete list and explanation of all attributes are given in HTML attributes List.

The title attribute in HTML

Description: The title attribute is used as text tooltip in most of the browsers. It display its text when user move the cursor over a link or any text. You can use it with any text or link to show the description about that link or text. In our example, we are taking this with paragraph tag and heading tag.

<!DOCTYPE html>
<html>
    <head>
    </head>

    <body>
        <h4 title="This is heading tag">Example of title attribute</h4>
        <p title="This is paragraph tag">Move the cursor over the heading
and paragraph, and you will see a description as a tooltip</p>
    </body>
</html>

output:

Example of title attribute

Move the cursor over the heading and paragraph, and you will see a description as a tooltip

The href attribute in HTML

Description: The href attribute is the main attribute of anchor tag. This attribute gives the link address which is specified in that link. The href attribute provides the hyperlink, and if it is blank, then it will remain in same page.

<!DOCTYPE html>
<html>
    <head>
    </head>

    <body>
        <h4>Display of href attribute</h4>
        <p>Below is the link of anchor tag, click the link and see the next page</p>
        <a href="https://touchtogain.blogspot.com">This is a link</a>
    </body>
</html>

output:

Display of href attribute

Below is the link of anchor tag, click the link and see the next page

This is a link

The src Attribute

The src attribute is one of the important and required attribute of element. It is source for the image which is required to display on browser. This attribute can contain image in same directory or another directory. The image name or source should be correct else browser will not display the image.

<!DOCTYPE html>
<html>
    <head>
    </head>

    <body>
        <h4>Example of src attribute</h4>
        <p>HTML images can be diplayed with the help of image tag and
its attribute src gives the sourc for that image</p>

        <img src="../image/html.jpg" height="200" width="300">
    </body>
</html>

output:

Example of src attribute

HTML images can be diplayed with the help of image tag and its attribute src gives the sourc for that image

😊 Your image is here 😊

Learn Basic HTML Complete Course part 5

2020-10-16T00:29:00.001-07:00

HTML Elements

An HTML file is made of elements. These elements are responsible for creating web pages and define content in that webpage. An element in HTML usually consist of a start tag , close tag and content inserted between them. Technically, an element is a collection of start tag, attributes, end tag, content between them.

Some elements does not have end tag and content, these elements are termed as empty elements or self-closing element or void elements.

Void element: All the elements in HTML do not require to have start tag and end tag, some elements does not have content and end tag such elements are known as Void elements or empty elements. These elements are also called as unpaired tag.

Some Void elements are <br> (represents a line break) , <hr>(represents a horizontal line), etc.

Nested HTML Elements: HTML can be nested, which means an element can contain another element.

Block-level element:

These are the elements, which structure main part of web page, by dividing a page into coherent blocks.
A block-level element always start with new line and takes the full width of web page, from left to right.
These elements can contain block-level as well as inline elements.

Following are the block-level elements in HTML.

    <address>, <article>, <aside>, <blockquote>, <canvas>,
    <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>,
    <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>,
    <li>, <main>, <nav>, <noscript>, <ol>,<output>, <p>,
    <pre>, <section>, <table>, <tfoot>, <ul> and <video>.

Example

<!DOCTYPE html>
<html>
    <head>
    </head>

    <body>
        <div style="background-color: lightblue">This is first div</div>
        <div style="background-color: lightgreen">This is second div</div>
        <p style="background-color: pink">This is a block level element</p>
    </body>
</html>

output:

This is first div

This is second div

This is a block level element

In the above example we have used tag, which defines a section in a web page, and takes full width of page.

We have used style attribute which is used to styling the HTML content, and the background color are showing that it's a block level element.

Inline elements:

Inline elements are those elements, which differentiate the part of a given text and provide it a particular function.
These elements does not start with new line and take width as per requirement.
The Inline elements are mostly used with other elements.

<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>,
    <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>,
    <label>, <map>, <object>, <q>, <samp>, <select>, <small>,
    <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>,
    <var>.

Example

<!DOCTYPE html>
<html>
    <head>
    </head>

    <body>
        <a href="https://touchtogain.blogspot.com">Click on link</a>

        <span style="background-color: lightblue">this is inline element</span>
        <p>This will take width of text only</p>
    </body>
</html>

output:

Click on link this is inline element

This will take width of text only

Learn Basic HTML Complete Course part 6

2020-10-16T00:16:00.001-07:00

HTML Formatting Tags

HTML Formatting is a process of formatting text for better look and feel. HTML provides us ability to format text without using CSS. There are many formatting tags in HTML. These tags are used to make text bold, italicized, or underlined. There are almost 14 options available that how text appears in HTML and XHTML.

In HTML the formatting tags are divided into two categories:

Physical tag: These tags are used to provide visual appearance to the text.
Logical tag: These tags are used to add some logical or semantic value to the text.

There are some physical and logical tags which may give same visual appearance but they will be different in semantics.

List of HTML Formatting Tags

Element name	Description
<b>	This is physical tag, which is used to bold the text written between it.
<strong>	This is a logical tag, which is tells the browser that the text is important.
<i>	This is physical tag which is used to make text italic.
<em>	This is a logical tag which is used to display content in italic.
<mark>	This tag is used to highlight a text.
<u>	This tag is used to underline text written between it.
<tt>	This tag is used to appear a text in teletype. (not supported in HTML5)
<strike>	This tag is used to draw a strikethrough on a section of text. (Not supported in HTML5)
<sup>	It display the content slightly above the normal line.
<sub>	It display the content slightly below the normal line.
<del>	This tag is used to display the deleted content.
<ins>	This tag display the content which is added
<big>	This tag is used to increase the font size by one conventional unit.
<small>	This tag is used to decrease the font size by one unit from base font size.

Example

<!doctype html>
<html>
    <head>
    </head>

    <body>
        <p>
    <b>Write Your First Paragraph in bold text.</b><br><br>

    <strong>This is an important content</strong><br><br>

<em>This is an important content</em><br><br>

<h2> I want to put a <mark> Mark</mark> on your face</h2><br><br><br>

<u>Write Your First Paragraph in underlined text.</u><br><br>

<strike>Write Your First Paragraph with strikethrough</strike><br><br>

Hello <tt>Write Your First Paragraph in monospaced font.</tt><br><br>

Hello <sup>Write Your First Paragraph in superscript.<br><br>

Hello <sub>Write Your First Paragraph in subscript.</sub><br><br>

Hello <del>Delete your first paragraph.</del><br><br>

<del>Delete your first paragraph.</del><ins>Write another paragraph.</ins><br><br>

Hello <big>Write the paragraph in larger font.</big><br>
        </p>
    </body>
</html>

output:

Write Your First Paragraph in bold text.

This is an important content

This is an important content

I want to put a Mark on your face

Write Your First Paragraph in underlined text.

~~Write Your First Paragraph with strikethrough~~

Hello Write Your First Paragraph in monospaced font.

Hello Write Your First Paragraph in superscript.

Hello Write Your First Paragraph in subscript.

Hello ~~Delete your first paragraph.~~

~~Delete your first paragraph.~~Write another paragraph.

Hello Write the paragraph in larger font.

📍If you write anything within <b>............</b> element, is shown in bold letters.

📍If you write anything between <strong> ??????. </strong>, is shown important text.

📍If you write anything within <i>............</i> element, is shown in italic letters.

📍The HTML <em> tag is a logical element, which will display the enclosed content in italic font, with added semantics importance.

Learn Basic HTML Complete Course part 7

2020-10-16T00:07:00.002-07:00

HTML Heading

A HTML heading or HTML h tag can be defined as a title or a subtitle which you want to display on the webpage. When you place the text within the heading tags <h1>.........</h1>, it is displayed on the browser in the bold format and size of the text depends on the number of heading.

There are six different HTML headings which are defined with the <h1> to <h6> tags, from highest level h1 (main heading) to the least level h6 (least important heading).

h1 is the largest heading tag and h6 is the smallest one. So h1 is used for most important heading and h6 is used for least important.

Headings in HTML helps the search engine to understand and index the structure of web page.

The main keyword of the whole content of a webpage should be display by h1 heading tag.

Heading elements (h1....h6) should be used for headings only. They should not be used just to make text bold or big.

Example

<!doctype html>
<html>
    <head>
    </head>

    <body>
        <h1>Heading no. 1 By TopBlog Pk</h1>
        <h2>Heading no. 2 By TopBlog Pk</h2>
        <h4>Heading no. 3 By TopBlog Pk</h4>
        <h4>Heading no. 4 By TopBlog Pk</h4>
        <h5>Heading no. 5 By TopBlog Pk</h5>
        <h6>Heading no. 6 By TopBlog Pk</h6>
    </body>
</html>

output:

Heading no. 1 By TopBlog Pk

Heading no. 2 By TopBlog Pk

Heading no. 3 By TopBlog Pk

Heading no. 4 By TopBlog Pk

Heading no. 5 By TopBlog Pk

Heading no. 6 By TopBlog Pk

Learn Basic HTML Complete Course part 8

2020-10-15T23:54:00.005-07:00

HTML Paragraph

HTML paragraph or HTML p tag is used to define a paragraph in a webpage. Let's take a simple example to see how it work. It is a notable point that a browser itself add an empty line before and after a paragraph. An HTML <p> tag indicates starting of new paragraph.

If we are using various tags in one HTML file then browser automatically adds a single blank line between the two paragraphs.

Space inside HTML Paragraph

If you put a lot of spaces inside the HTML p tag, browser removes extra spaces and extra line while displaying the page. The browser counts number of spaces and lines as a single one.

Let’s take an example

<!doctype html>
<html>
    <head>
    </head>

    <body>
    <p>
    I am
    going to provide
    you a tutorial on HTML[By TopBlog Pk]
    and hope that it will
    be very beneficial for you.
    </p>

    <p>
    Look, I put here a lot
    of spaces but I know, Browser will ignore it.
    </p>

    <p>You cannot determine the display of HTML</p>

    <p>because resized windows may create different result.</p>
    </body>
</html>

output:

I am going to provide you a tutorial on HTML[By TopBlog Pk] and hope that it will be very beneficial for you.

Look, I put here a lot of spaces but I know, Browser will ignore it.

You cannot determine the display of HTML

because resized windows may create different result.

As you can see, all the extra lines and unnecessary spaces are removed by the browser.

Learn Basic HTML Complete Course part 9

2020-10-15T23:38:00.004-07:00

HTML Anchor

The HTML anchor tag defines a hyperlink that links one page to another page. It can create hyperlink to other web page as well as files, location, or any URL. The "href" attribute is the most important attribute of the HTML a tag. and which links to destination page or URL.

href attribute of HTML anchor tag

The href attribute is used to define the address of the file to be linked. In other words, it points out the destination page.

The syntax of HTML anchor tag is given below.

<a href = "..........."> Link Text </a><br>

Specify a location for Link using target attribute

If we want to open that link to another page then we can use target attribute of tag. With the help of this link will be open in next page.

<!DOCTYPE html>
<html>
<head>
</head>

<body>
<h4>Display of href attribute</h4>
<p>Below is the link of anchor tag, click the link and see the next page</p>
<a href="https://touchtogain.blogspot.com" target="_blank">This is a link</a>
</body>
</html>

output:

Display of href attribute

Below is the link of anchor tag, click the link and see the next page

This is a link

The target attribute can only use with href attribute in anchor tag.

If we will not use target attribute then link will open in same page.

Appearance of HTML anchor tag

An unvisited link is displayed underlined and blue.
A visited link displayed underlined and purple.
An active link is underlined and red.

Learn Basic HTML Complete Course part 10

2020-10-15T07:13:00.002-07:00

HTML Image

HTML img tag is used to display image on the web page. HTML img tag is an empty tag that contains attributes only, closing tags are not used in HTML image element.

Let's see an example of HTML image.

Attributes of HTML img tag

1) src

It is a necessary attribute that describes the source or fileName of the image. It instructs the browser where to look for the image on the server.
The location of image may be on the same directory or another server.

2) alt

The alt attribute defines an alternate text for the image, if it can't be displayed. The value of the alt attribute describe the image in words. The alt attribute is considered good for SEO prospective.

3) width

It is an optional attribute which is used to specify the width to display the image. It is not recommended now. You should apply CSS in place of width attribute.

4) height

It h4 the height of the image. The HTML height attribute also supports iframe, image and object elements. It is not recommended now. You should apply CSS in place of height attribute.

Example

<!DOCTYPE html>
<html>
    <head>
    </head>

    <body>
        <h1>Example of src attribute</h1>
        <p>HTML images can be diplayed with the help of image tag and
its attribute src gives the sourc for that image</p>

        <img src="../image/img98.png" height="200" width="300">
    </body>
</html>

output:

Example of src attribute

HTML images can be diplayed with the help of image tag and its attribute src gives the sourc for that image

😊 Your Image will be displayed here 😊

Always try to insert the image with height and width, else it may flicker while displaying on webpage.

How to get image from another directory/folder?

To insert an image in your web, that image must be present in your same folder where you have put the HTML file. But if in some case image is available in some other directory then you can access the image like this:

<img src="E:/images/animal.png" height="180" width="300">

In above statement we have put image in local disk E >> images folder >> topblogpk.png or anyname.png as you have.

If src URL will be incorrect or misspell then it will not display your image on web page, so try to put correct URL.

Learn Basic HTML Complete Course part 11

2020-10-15T06:58:00.002-07:00

HTML Table

HTML table tag is used to display data in tabular form (row * column). There can be many columns in a row.

We can create a table to display data in tabular form, using <table> element, with the help of <tr> , <td>, and <th> elements.

In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table data is defined by <td> tags.

HTML tables are used to manage the layout of the page e.g. header section, navigation bar, body content, footer section etc. But it is recommended to use div tag over table to manage the layout of the page.

HTML Table Tags

Tag	Description
<table>	It defines a table.
<tr>	It defines a row in a table.
<th>	It defines a header cell in a table.
<td>	It defines a cell in a table.
<caption>	It defines the table caption.
<colgroup>	It specifies a group of one or more columns in a table for formatting.
<col>	It is used with <colgroup> element to specify column properties for each column.
<tbody>	It is used to group the body content in a table.
<thead>	It is used to group the header content in a table.
<tfooter>	It is used to group the footer content in a table.

HTML Table Example

<!DOCTYPE>
<html>
<body>
<table border="1px" cellpadding="10px" width="100%">
        <tr>
<th>Name</th>
<th>Branch</th>
<th>Semester</th>
</tr>
        <tr>
<td>Mubassir Ali</td>
<td>CS</td>
<td>5</td>
</tr>
        <tr>
<td>Nasir Ali</td>
<td>Physics</td>
<td>8</td>
</tr>
        <tr>
<td>Azlan Khan</td>
<td>Civil</td>
<td>2</td>
</tr>
        <tr>
<td>Haseeb Khan</td>
<td>EC</td>
<td>7</td>
</tr>
    </table>
</body>
</html>

output:

Name	Branch	Semester
Mubassir Ali	CS	5
Nasir Ali	Physics	8
Azlan Khan	Civil	2
Haseeb Khan	EC	7

HTML Table Attributes

HTML Attributes are assign by two methods :
1) Using HTML Attribute
2) By CSS Property

Various attributes of table tag are descibe below :

1) Table Border
You can use border attribute of table tag in HTML to specify border. But it is not recommended now.

2) Cell padding
You can specify padding for table header and table data by using cell padding. The cellpadding attribute of HTML table tag is obselete now.

3) Width
We can specify the HTML table width using the CSS width property. It can be specify in pixels or percentage.

Table Example by tag attribute

Example :

<!DOCTYPE>
<html>
<body>
<table border="1px" cellpadding="10px" width="100%">
        <tr>
<th>Name</th>
<th>Branch</th>
<th>Semester</th>
</tr>
        <tr>
<td>Atif</td>
<td>CE</td>
<td>5</td>
</tr>
        <tr>
<td>Mubassir</td>
<td>IT</td>
<td>8</td>
</tr>
        <tr>
<td>Nasir</td>
<td>Civil</td>
<td>2</td>
</tr>
        <tr>
<td>Ali</td>
<td>EC</td>
<td>7</td>
</tr>
    </table>
</body>
</html>

output:

Name	Branch	Semester
Atif	CE	5
Mubassir	IT	8
Nasir	Civil	2
Ali	EC	7

Table Example by CSS Property

<!DOCTYPE>
<html>
   <head>
    <style>
     table, th, td {
   text-align: center;
   width: 300px;
   border: 1px solid black;
   border-collapse: collapse;
      }

      th, td {
          padding: 10px;
     }
    </style>
   </head>
   <body>
<table>
        <tr>
<th>Name</th>
<th>Branch</th>
<th>Semester</th>
</tr>
        <tr>
<td>Mansoor</td>
<td>CE</td>
<td>5</td>
</tr>
        <tr>
<td>Haleem</td>
<td>IT</td>
<td>8</td>
</tr>
        <tr>
<td>Haseeb</td>
<td>Civil</td>
<td>2</td>
</tr>
        <tr>
<td>Azlan</td>
<td>EC</td>
<td>7</td>
</tr>
    </table>
</body>
</html>

output:

Name	Branch	Semester
Mansoor	BBA	5
Haleem	IT	8
Haseeb	Civil	2
Azlan	EC	7

Table with colspan

If you want to make a cell span more than one column, you can use the colspan attribute.

It will divide one cell/row into multiple columns, and the number of columns depend on the value of colspan attribute.

Let's see the example that span two columns.

<!DOCTYPE>
<html>
    <head>
    <style>
        table, th, td {
           border: 1px solid black;
           border-collapse: collapse;
       }

       th,td {
          padding: 5px;
          text-align: left;
       }
    </style>
    </head>

    <body>
    <table style="width:100%">
        <tr>
           <th>Name</th>
           <th colspan="2">Mobile No.</th>
        </tr>

        <tr>
           <td>Mubassir Ali</td>
           <td>923063855</td>
           <td>923451590</td>
        </tr>
    </table>
    </body>
</html>

output:

Name	Mobile No.
Mubassir Ali	923063855	923451590

Table with rowspan

If you want to make a cell span more than one row, you can use the rowspan attribute.

It will divide a cell into multiple rows. The number of divided rows will depend on rowspan values.

Let's see the example that span two rows.

<!DOCTYPE>
<html>
    <head>
    <style>
        table, th, td {
           border: 1px solid black;
           border-collapse: collapse;
       }

       th,td {
          padding: 5px;
          text-align: left;
       }
    </style>
    </head>

    <body>
    <table style="width:100%">
        <tr>
           <th>Name</th>
           <th colspan="2">Mobile No.</th>
        </tr>

        <tr>
           <td>Mubassir Ali</td>
           <td>923063855</td>
           <td>923451590</td>
        </tr>
    </table>
    </body>
</html>

output:

Name	Mubassir Ali
Mobile No.	923063855
Mobile No.	923451590

Styling HTML table even and odd cells

Example :

<!DOCTYPE>
<html>
    <head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
table#alter tr:nth-child(even) {
background-color: #eee;
}
table#alter tr:nth-child(odd) {
background-color: #fff;
}
table#alter th {
color: white;
background-color: gray;
}
</style>
    </head>

    <body>
    <table id="alter">
        <tr>
<th>Name</th>
<th>Branch</th>
<th>Semester</th>
</tr>
        <tr>
<td>Mubassir</td>
<td>CS</td>
<td>5</td>
</tr>
        <tr>
<td>Nasir</td>
<td>Physics</td>
<td>8</td>
</tr>
        <tr>
<td>Haleem</td>
<td>Civil</td>
<td>2</td>
</tr>
        <tr>
<td>Haseeb</td>
<td>EC</td>
<td>7</td>
</tr>
    </body>
</html>

output:

Name	Branch	Semester
Mubassir	CS	5
Nasir	Physics	8
Haleem	Civil	2
Haseeb	EC	7

Learn Basic HTML Complete Course part 12

2020-10-15T06:26:00.003-07:00

HTML Lists

HTML Lists are used to specify lists of information. All lists may contain one or more list elements.

There are three different types of HTML lists:

Ordered List or Numbered List (ol)
Unordered List or Bulleted List (ul)
Description List or Definition List (dl)

HTML Ordered List or Numbered List

In the ordered HTML lists, all the list items are marked with numbers by default. It is known as numbered list also. The ordered list starts with <ol> tag and the list items start with <li> tag.

HTML Unordered List or Bulleted List

In HTML Unordered list, all the list items are marked with bullets. It is also known as bulleted list also. The Unordered list starts with <ul> tag and list items start with the <li> tag.

HTML Description List or Definition List

HTML Description list is also a list style which is supported by HTML and XHTML. It is also known as definition list where entries are listed like a dictionary or encyclopedia.

The definition list is very appropriate when you want to present glossary, list of terms or other name-value list.

The HTML definition list contains following three tags:

<dl> tag defines the start of the list.
<dt> tag defines a term.
<dd> tag defines the term definition (description).

Example of all HTML List

<!DOCTYPE>
<html>
    <body>
        <h4>Ordered List : </h4>
           <ol>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
          </ol>

<h4>Unordered List</h4>
           <ul>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
           </ul>

<h4>Description List</h4>
<dl>
<dt>Aries</dt>
<dd>-One of the 12 horoscope sign.</dd>
<dt>Bingo</dt>
<dd>-One of my evening snacks</dd>
<dt>Leo</dt>
<dd>-It is also an one of the 12 horoscope sign.</dd>
<dt>Oracle</dt>
<dd>-It is a multinational technology corporation.</dd>
</dl>
    </body>
</html>

Output:

Ordered List :

Aries
Bingo
Leo
Oracle

Unordered List

Aries
Bingo
Leo
Oracle

Description List

Aries: -One of the 12 horoscope sign.
Bingo: -One of my evening snacks
Leo: -It is also an one of the 12 horoscope sign.
Oracle: -It is a multinational technology corporation.

Learn Basic HTML Complete Course part 13

2020-10-15T06:16:00.003-07:00

HTML Ordered List | HTML Numbered List

HTML Ordered List or Numbered List displays elements in numbered format. The HTML ol tag is used for ordered list. We can use ordered list to represent items either in numerical order format or alphabetical order format, or any format where an order is emphasized. There can be different types of numbered list:

Numeric Number (1, 2, 3)
Capital Roman Number (I II III)
Small Roman Number (i ii iii)
Capital Alphabet (A B C)
Small Alphabet (a b c)

To represent different ordered lists, there are 5 types of attributes in <ol> tag.

Type	Description
Type "1"	This is the default type. In this type, the list items are numbered with numbers.
Type "I"	In this type, the list items are numbered with upper case roman numbers.
Type "i"	In this type, the list items are numbered with lower case roman numbers.
Type "A"	In this type, the list items are numbered with upper case letters.
Type "a"	In this type, the list items are numbered with lower case letters.

Start attribute

The start attribute is used with ol tag to specify from where to start the list items.

<ol type="1" start="5"> : It will show numeric values starting with "5".

<ol type="A" start="5"> : It will show capital alphabets starting with "E".

<ol type="a" start="5"> : It will show lower case alphabets starting with "e".

<ol type="I" start="5"> : It will show Roman upper case value starting with "V".

<ol type="i" start="5"> : It will show Roman lower case value starting with "v".

Reversed Attribute:

This is a Boolean attribute of HTML tag, and it is new in HTML5 version. If you use the reversed attribute with tag then it will numbered the list in descending order (7, 6, 5, 4......1).

Orderlist Example

<!doctype html>
<html>
    <body>
<h4>Order List</h4>
<ol>
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ol><hr>

<h4>Order List of type "I"</h4>
<ol type="I">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ol><hr>

<h4>Order List of type "i"</h4>
<ol type="i">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ol><hr>

<h4>Order List of type "A"</h4>
<ol type="A">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ol><hr>

<h4>Order List of type "a"</h4>
<ol type="a">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ol><hr>

<h4>Order List by predefine starting</h4>
<ol type="i" start="5">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ol><hr>

<h4>Reverse order list</h4>
<ol reversed>
        <li>HTML</li>
        <li>Java</li>
        <li>JavaScript</li>
        <li>SQL</li>
        </ol>
    </body>
</html>

output:

Order List

HTML
Java
JavaScript
SQL

Order List of type "I"

HTML
Java
JavaScript
SQL

Order List of type "i"

HTML
Java
JavaScript
SQL

Order List of type "A"

HTML
Java
JavaScript
SQL

Order List of type "a"

HTML
Java
JavaScript
SQL

Order List by predefine starting

HTML
Java
JavaScript
SQL

Reverse order list

HTML
Java
JavaScript
SQL

Learn Basic HTML Complete Course part 14

2020-10-15T05:38:00.005-07:00

HTML Unordered List | HTML Bulleted List

HTML Unordered List or Bulleted List displays elements in bulleted (▫️) format . We can use unordered list where we do not need to display items in any particular order. The HTML ul tag is used for the unordered list.

There can be 4 types of bulleted list:

disc
circle
square
none

To represent different ordered lists, there are 4 types of attributes in <ul> tag.

Type	Description
Type "disc"	This is the default style. In this style, the list items are marked with bullets.
Type "circle"	In this style, the list items are marked with circles.
Type "square"	In this style, the list items are marked with squares.
Type "none"	In this style, the list items are not marked .

Example

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<h4>Unorder list of type="none"</h4>
<ul type="none">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul><hr>

<h4>Unorder list of default type</h4>
<ul>
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul><hr>

<h4>Unorder list of type="square"</h4>
<ul type="square">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul><hr>

<h4>Unorder list of type="circle"</h4>
<ul type="circle">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
</body>
</html>

Output:

Unorder list of type="none"

HTML
Java
JavaScript
SQL

Unorder list of default type

HTML
Java
JavaScript
SQL

Unorder list of type="square"

HTML
Java
JavaScript
SQL

Unorder list of type="circle"

HTML
Java
JavaScript
SQL

Learn Basic HTML Complete Course part 15

2020-10-15T03:45:00.003-07:00

HTML style using CSS

Let's suppose we have created our web page using a simple HTML code, and we want something which can present our page in a correct format, and visibly attractive. So to do this, we can style our web page with CSS (Cascading Stylesheet) properties.

CSS is used to apply the style in the web page which is made up of HTML elements. It describes the look of the webpage.

CSS provides various style properties such as background color, padding, margin, border-color, and many more, to style a webpage.

Each property in CSS has a name-value pair, and each property is separated by a semicolon (;).

🔺In this chapter, we have given a small overview of CSS. You will learn everything in depth about CSS in our CSS tutorial.

Best Example as:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h4 style="color: red;">Welcome to TopBlog Pk. ..</h4>
<p style="color: blue; font-size: 25px; font-style: italic ;">It is a great Blog to Learn HTML and CSS technology. </p>
</body>
</html>

Welcome to, TopBlog Pk !

It is a great blog to Learn HTML and CSS technology.

In the above example, we have used a style attribute to provide some styling format to our code.

Three ways/types to apply CSS

To use CSS with HTML document, there are three ways:

Inline CSS : Define CSS properties using style attribute in the HTML elements.
Internal or Embedded CSS : Define CSS using tag in section.
External CSS : Define all CSS property in a separate .css file, and then include the file with HTML file using tag in section.

Inline CSS :

Inline CSS is used to apply CSS in a single element. It can apply style uniquely in each element.

To apply inline CSS, you need to use style attribute within HTML element. We can use as many properties as we want, but each property should be separated by a semicolon (;).

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h3 style="color: red;
            font-style: italic;
            text-align: center;
            font-size: 50px;
            padding-top: 25px;">Learning HTML using Inline CSS</h3>
</body>
</html>

output:

Learning HTML using Inline CSS

Internal CSS :

An Internal stylesheets contains the CSS properties for a webpage in <head> section of HTML document. To use Internal CSS, we can use class and id attributes.

We can use internal CSS to apply a style for a single HTML page.

<!DOCTYPE html>
<html>
<head>
<style>
/*Internal CSS using element name By TopBlog Pk*/
h4.test{font-style: italic;
font-size: 30px;
color: #f08080;}

/*Internal CSS using class name By TopBlog Pk*/
.blue{color: blue;}
.red{color: red;}
.green{color: green;}
</style>
</head>
<body>
   <h4 class="test"> Learning HTML with internal CSS</h4>
    <p class="blue">This is a blue color paragraph</p>
    <p class="red">This is a red color paragraph</p>
    <p class="green">This is a green color paragraph</p>
</body>
</html>

output:

Learning HTML with internal CSS

This is a blue color paragraph

This is a red color paragraph

This is a green color paragraph

External CSS :

An external CSS contains a separate CSS file which only contains style code using the class name, id name, tag name, etc. We can use this CSS file in any HTML file by including it in HTML file using <link> tag.

If we have multiple HTML pages for an application and which use similar CSS, then we can use external CSS.

There are two files need to create to apply external CSS

First, create the HTML file
Create a CSS file and save it using the .css extension (This file only will only contain the styling code.)
Link the CSS file in your HTML file using tag in header section of HTML document.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="external_css.css">
</head>

<body>
   <h2>Learning HTML with External CSS</h2>
   <p class="blue">This is a blue color paragraph</p>
   <p class="red">This is a red color paragraph</p>
   <p class="green">This is a green color paragraph</p>
</body>
</html>

output:

Learning HTML with External CSS

This is a blue color paragraph

This is a red color paragraph

This is a green color paragraph

Learn Basic HTML Complete Course part 16

2020-10-15T03:22:00.005-07:00

HTML Classes

Class Attribute in HTML

The HTML class attribute is used to specify a single or multiple class names for an HTML element. The class name can be used by CSS and JavaScript to do some tasks for HTML elements. You can use this class in CSS with a specific class, write a period dot(.) character, followed by the name of the class for selecting elements.

A class attribute can be defined within <style> tag or in separate file using the (.) character.

In an HTML document, we can use the same class attribute name with different elements.

We have define style for a class name "headings", and we can use this class name with any of HTML element in which we want to provide such styling. We just need to follow the following syntax to use it.

<tag class="ghf"> content </tag>

Example

<!DOCTYPE html>
<html>
<head>
<style>
.headings{
color: lightgreen;
font-family: cursive;
background-color: black; }
</style>
</head>

<body>
<h1 class="headings">This is first heading</h1>
<h2 class="headings">This is Second heading</h2>
<h3 class="headings">This is third heading</h3>
<h4 class="headings">This is fourth heading</h4>
</body>
</html>

output:

This is first heading On TopBlog Pk

This is Second heading On TopBlog Pk

This is third heading On TopBlog Pk

This is fourth heading On TopBlog Pk

Another Example with different class name

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>

<style>
.fruit {
    background-color: orange;
    color: white;
    padding: 10px;
}
</style>
</head>

<body>
<h2 class="fruit">Mango</h2>
<p>Mango is king of all fruits.</p>

<h2 class="fruit">Orange</h2>
<p>Oranges are full of Vitamin C.</p>

<h2 class="fruit">Apple</h2>
<p>An apple a day, keeps the Doctor away.</p>
</body>
</html>

output:

Mango

Mango is king of all fruits.

Orange

Oranges are full of Vitamin C.

Apple

An apple a day, keeps the Doctor away.

🔺You can use class attribute on any HTML element. The class name is case-sensitive.

Multiple Classes

<!DOCTYPE html>
<html>
<style>
.fruit {
    background-color: orange;
    color: white;
    padding: 10px;
}

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

<body>
<h2>Multiple Classes</h2>
<p>All three elements have the class name "fruit". In addition, Mango also have the class name "center", which center-aligns the text.</p>

<h2 class="fruit center">Mango</h2>
<h2 class="fruit">Orange</h2>
<h2 class="fruit">Apple</h2>
</body>
</html>

output:

Multiple Classes

All three elements have the class name "fruit". In addition, Mango also have the class name "center", which center-aligns the text.

Mango

Orange

Apple

Same class with Different Tag

<!DOCTYPE html>
<html>
<style>
.fruit {
background-color: orange;
color: white;
padding: 10px;
}
</style>
<body>
<h2>Same Class with Different Tag</h2>
<h2 class="fruit">Mango</h2>
<p class="fruit">Mango is the king of all fruits.</p>
</body>
</html>

output:

Same Class with Different Tag

Mango

Mango is the king of all fruits.

Learn Basic HTML Complete Course part 17

2020-10-15T02:51:00.007-07:00

HTML Id Attribute

The id attribute refers to a unique value for an HTML element. This HTML id value can be used with CSS and JavaScript to perform certain task.

HTML id with CSS

In CSS, if you want to select an element with a specific id, write a hash (#) character, followed by the id of the element.

Syntex

<style>
#myid {
    background-color: lightpink;
    color: black;
    padding: 40px;
    text-align: center;
}
</style>
<h1 id="myid">Example of HTML id</h1>

📍Here the id attribute is "myid" which can be used on any HTML element. The HTML id value is case-sensitive and it must contain at least one character, and must not contain whitespace (spaces, tabs, etc.).

Difference between HTML Class and ID

An HTML class name can be used by multiple elements while An HTML element can only have one unique id that belongs to that single element.

Example

<!DOCTYPE html>
<html>
<head>
<style>
/* Style the element with the id "myid" This tutorial is provided By topblogpk.blogspot.com*/
#myid {
background-color: pink;
color: black;
padding: 40px;
text-align: center;
}
/* Style all elements with the class name "fruit" */
.fruit {
background-color: orange;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2>Difference Between Class and ID</h2>
<h1 id="myid">My Favorite Fruits</h1>
<h2 class="fruit">Mango</h2>
<p>The Kinkg of all fruits.</p>
<h2 class="fruit">Orange</h2>
<p>Full of Vitamin C</p>
<h2 class="fruit">Apple</h2>
<p>An apple a day, keeps the doctor away.</p>

</body>
</html>

output:

Difference Between Class and ID

My Favorite Fruits

Mango

The Kinkg of all fruits.

Orange

Full of Vitamin C

Apple

An apple a day, keeps the doctor away.

HTML id with JavaScript

<!DOCTYPE html>
<html>
<body>
<h2>HTML id with JavaScript</h2>
<h1 id="hello">Hello Friends on TopBlog Pk!!!</h1>
<button onclick="displayResult()">Change text</button>
<script>
function displayResult() {
document.getElementById("hello").innerHTML = "All the best for future By TopBlog Pk!";
}
</script>
</body>
</html>

output:

HTML id with JavaScript

All the best for future By TopBlog Pk!

Click Here On Change text Button

📍

Learn Basic HTML Complete Course part 18

2020-10-15T02:19:00.007-07:00

HTML iframes

HTML Iframe is used to display a nested webpage (a webpage within a webpage). The HTML <iframe> tag defines an inline frame.

Iframe Syntax

An HTML iframe is defined with the <iframe> tag:

<iframe src="URL"></iframe>

Here, "src" attribute specifies the web address (URL) of the inline frame page.

Set Width and Height of iframe

You can set the width and height of iframe by using "width" and "height" attributes. By default, the attribute?s values are specified in pixels but you can also set them in percent. i.e. 50%, 60% etc.

Remove the border of iframe

By default, an iframe contains a border around it. You can remove the border by using <style> attribute and CSS border property.

Iframe Target for a link

You can set a target frame for a link by using iframe. Your specified target attribute of the link must refer to the name attribute of the iframe.

Example

<!DOCTYPE html>
<html>
<body>
<h2>You need to make Internet connection for output : </h2><br>
<h4>HTML Iframes example By Pixels</h4><br>
<iframe src="https://touchtogain.blogspot.com" height="400" width="300"></iframe><br><hr>

<h4>HTML Iframes example By Percentage</h4><br>
<iframe src="https://quizdoor.blogspot.com" height="50%" width="70%"></iframe><br><hr>

<h4>Remove the Iframe Border</h4><br>
<p>This iframe example doesn't have any border</p><br>
<iframe src="https://touchtogain.blogspot.com"
style="border:none;"></iframe><br/><hr>

<h4>Iframe - Target for a Link</h4><br>
<iframe height="300px" width="250px"
src="new.html" name="iframe_a"></iframe>
<p><a href="https://topblogpk.blogspot.com"
target="iframe_a">TopBlog Pk</a></p>
<p>The name of iframe and link target must have
same value else link will not open as frame. </p>

</body>
</html>

outputs are:

You need to make Internet connection for output :

HTML Iframes example By Pixels

HTML Iframes example By Percentage

Remove the Iframe Border

This iframe example doesn't have any border

Iframe - Target for a Link

TopBlog Pk

The name of iframe and link target must have same value else link will not open as frame.

Learn Basic HTML Complete Course part 19

2020-10-15T01:45:00.008-07:00

HTML JavaScript

A Script is a small program which is used with HTML to make web pages more attractive, dynamic and interactive, such as an alert popup window on mouse click. Currently, the most popular scripting language is JavaScript used for websites.

Example

<!DOCTYPE html>
<html>
<body>
<h4>JavaScript Date and Time example</h4>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>

Output is:

JavaScript Date and Time example click on below button to show output

JavaScript Date and Time example

HTML <script> Tag

The HTML <script> tag is used to specify a client-side script. It may be an internal or external JavaScript which contains scripting statements, hence we can place <script> tag within <body> or <head> section.

It is mainly used to manipulate images, form validation and change content dynamically. JavaScript uses document.getElementById() method to select an HTML element.

<!DOCTYPE html>
<html>
<body>
<h4>Use JavaScript to Change Text</h4>
<p id="test"></p>
<script>
document.getElementById("test").innerHTML =
"Hello Technoapps Development";
</script>
</body>
</html>

Output is:

Use JavaScript to Change Text

Hello Technoapps Development

HTML events with JavaScript

An event is something which user does, or browser does such as mouse click or page loading are examples of events, and JavaScript comes in the role if we want something to happen on these events.

HTML provides event handler attributes which work with JavaScript code and can perform some action on an event.

Example is:

JavaScript click button example to show output as below

<!DOCTYPE html>
<html>
<body>
<h4>Click Event Example</h4>
<p>Click on the button and you csn see a pop-up window with a message</p>
<input type="button" value="Click" onclick="alert('Hi,how are you')">
</body>
</html>

Click Event Example

Click on the button and you csn see a pop-up window with a message

HTML can have following events such as:

Form events : reset, submit, etc.
Select events : text field, text area, etc.
Focus event : focus, blur, etc.
Mouse events : select, mouseup, mousemove, mousedown, click, dblclick, etc.

Following are the list for Window event attributes:

Event Name	Handler Name	Occurs when
onBlur	blur	When form input loses focus
onClick	click	When the user clicks on a form element or a link
onSubmit	submit	When user submits a form to the server.
onLoad	load	When page loads in a browser.
onFocus	focus	When user focuses on an input field.
onSelect	select	When user selects the form input filed.

Learn Basic HTML Complete Course part 20

2020-10-15T00:22:00.004-07:00

HTML Comments

Comments are some text or code written in your code to give an explanation about the code, and not visible to the user. Comments which are used for HTML file are known as HTML comments. Anything written between these tags will be ignored by the browser, so comments will not be visible on the webpage.

Comments of any code make code easy to understand and increase readability of code.

Comments are also part of the code, which gives an explanation of the code.

How to add comment In HTML

You can add comments in your HTML file using <! -- ... --> tag. So if you will write anything between theses comment tag that will be treated as comment and browser will not read it.

Syntax

<! -- Write commented text here -->

📍The commented code will not be visible to a webpage, and hence you can use comment tag for documentation purpose, and debugging purpose:

Example

<!DOCTYPE html>
<html>

<head>
    
    <style>
        h2.test, p.test{
            text-align: center;
            background-color: #f0f8ff;
            font-size: 30px;
            color: red;
        }
    </style>
</head>


<body>
    
<h2 class="test">First WebPage</h2>


<p class="test">Write your Content here!!!</p>
</body>
</html>

output:

First WebPage

Write your Content here!!!

Learn Basic HTML Complete Course part 21

2020-10-15T00:13:00.005-07:00

HTML File Paths

An HTML file fileName is used to describe the location of a file in a website folder. File paths are like an address of file for a web browser. We can link any external resource to add in our HTML file with the help of file paths such as images, file, CSS file, JS file, video, etc.

The src or href attribute requires an attribute to link any external source to HTML file.

Following are the different types to specify file paths:

<img src="picture.jpg"< It specifies that picture.jpg is located in the same folder as the current page.
<img src="images/picture.jpg"< It specifies that picture.jpg is located in the images folder in the current folder.
<img src="/images/picture.jpg"< It specifies that picture.jpg is located in the images folder at the root of the current web.
<img src="../picture.jpg"< It specifies that picture.jpg is located in the folder one level up from the current folder.

File paths are used on webpages to link external files like:

Web pages
Images
Style sheets
JavaScript

There are two types of File Paths:

Absolute File Paths
Relative File Paths

Absolute File Paths

Absolute file fileName specifies full URL address.

<!DOCTYPE html>
<html>
<body>
<h4>Using a Full URL File Path</h4> <br>
<img src="https://blogs.nasa.gov/spacestation/wp-content/uploads/sites/240/2019/03/exp59_spacewalker_mcclain_hague_032219.jpg" alt="image" style="width:300px">
</body>
</html>

output:

Using a Full URL File Path

Relative File Paths

The relative file fileName specifies to a file which is related to the location of current page.

<!DOCTYPE html> <html> <body> <h4>Using a Relative File Path</h4><br> <img src="../image/html.jpg" alt="Mountain" style="width:300px"> </body> </html>

output:

Using a Relative File Path

Mountain image here

📍Always remember to use proper URL, file name, image name, else it will not display on the webpage.

Try to use relative file paths, so that your code will be independent of URL.

Learn Basic HTML Complete Course part 22

2020-10-15T00:08:00.005-07:00

HTML Head

The HTML <head> element is used as a container for metadata (data about data). It is used between <html> tag and <body> tag.

The head of an HTML document is a part whose content is not displayed in the browser on page loading. It just contains metadata about the HTML document which specifies data about the HTML document.

An HTML head can contain lots of metadata information or can have very less or no information, it depends on our requirement. But head part has a crucial role an HTML document while creating a website.

Metadata defines the document title, character set, styles, links, scripts, and other meta information.

Following is a list of tags used in metadata:

<title>
<style>
<meta>
<link>
<script>
<base>

We will learn about this all tag in details in this tutorial.