Friday, July 3, 2020

HTML IMAGES :- INSERT AN IMAGE IN HTML DOCUMENT


HTML IMAGES

Images are very important for any website. Think there is a webpage that does not have a single image in it. How will you feel? It will not be good to read at all. Images help the website to become more attractive to visitors.

Leave it to the visitor. If you also visit any website. To read any topic. There is not a single image appear in that website, only the text is written, so how would you feel that you would think that it would be better to read from a book or read from another website.

In today's time, no one spends his time studying, everyone wants to learn by watching. Why would you waste your time reading the topics that you can teach through images? That’s why nowadays YouTube and online teaching is so popular.

Back to the topic, if you want to add images on your Html webpages an Html element <img> is used with src attributes.

Example:-

<img src = “ address of the image”> 
Example:-
<html>
<head>
<title> Example of Links </title>
</head>
<body>
<img src = "C:\Users\Mad About Computer\Downloads\image.jpg">
</body>
</html>

Output:-




The SRC Attribute

The src attribute is used to give the address or URL of the image which you want to insert on your webpage.

src = “ Address of the Image ”

The Alt attribute

The alt attribute is used when your image doesn’t load or show on your Html webpage. Sometimes images may not load on the browser because of slow connection, a slow server, or wrong URL of images. The alt attribute shows an alternate text for images.

Example:- 




IMAGE SIZE:- HEIGHT AND WIDTH

So far we have seen how to insert an image on our HTML page. Now, suppose if you want to insert an image but the size of the image you have selected is very large, but you have to bring it in a small form on your webpage. What will you do for him?  For that, we will use the CSS style attribute. You can choose the height and width of your image by yourself.
To specify the height and width of the image use style attribute.

Example:- 

<html>
<head>
<title> Example of Links </title>
</head>
<body>
<img src = "C:\Users\Mad About Computer\Downloads\image.jpg" alt = "This is a HTML Image" style ="height:200px; width:200px;" >
</body>
</html>

Output:-



That’s it for today guys In this article, you learned about HTML IMAGES. If you have any queries regarding this article you can comment on it or DM on my social media account. If you like the article you can share it with your friends or relatives.  See you in the next articles.

Thanks for visiting here

Have a Good Day.

PEOPLE ALSO READ:- HTML LINKS : ( Visited, Unvisited, Images as a Link )
PEOPLE ALSO READ:- HTML COMMENTS:- Single line and Multiline


Continue Reading →

Thursday, July 2, 2020

HTML LINKS : ( Visited, Unvisited, Images as a Link )



HTML LINKS

In Html, Links are very useful for any website, Links are used to jumping from one webpage of the website to another webpage of the website as well as another website. Just click on the given link and reach the website whose link will be given. All website has links. To make a link we have to use <a> elements with <href> attribute that specify a URL of a page or website.

HTML LINK STRUCTURE

  • Start tag :- <a>
  • href attribute with URL ex:- href = “www.madaboutcomputer.com”
  • Element Content:-  Here you can write anything to describe the link you can also use an image here
  • End tag :- </a>


Example:

<html>
<head>
<title> Example of Links </title>
</head>
<body>
<a href = "https://www.madaboutcomputer.com"> Click Here to Reach Mad About Computer </a>
</body>
</html>

OUTPUT



Visited Links and Unvisited Links

Unvisited Link

Whenever you make a new link to your web page when you see it. It appears in the blue color with an Underline of your Text. This type of link is known as unvisited links.

Example:-


The above image is an example of an unvisited link.  

Visited Link

If you have ever created a link to your webpage. Initially, it will look blue, but if you click on it, it will show you a purple color with an underline on it. These types of links is known as visited link.

Example:-



By default, links will appear as follow in all browser:-

  • An Unvisited links appear in blue color with an underline.
  • A Visited links appear in Purple color with an underline.
  • An active link appear in Red color with underline.  

TARGET ATTRIBUTE IN HTML LINKS

By default, whenever you click on a link it will open in the same window. If you want to change the target of your link means if you want to open the link on a new window or anything else. Then you have to use the target attribute on your webpage. The target attribute specifies where your link has been open.

The target attribute have the following values are:-
  • _self – This value is used to open the link on the same window/tab. this is a default value means if you don’t give any specific target value on your link then your link is always open on the same window/tab.
  • _blank – This value is used to open your link in a new window/tab.
  • _parent – This value is used to open the link in the parent frame
  • _top – This value is used to open the link in the full body of the window


Use Image as a link

In Html links, you can also use any type of image as a link such as jpg, jpeg, png, gif, etc. Let us see how can we use an image as a link.

Example:-

<html>
<head>
<title> Example of Links </title>
</head>
<body>
<a href = "https://www.madaboutcomputer.com"> <img src = "C:\Users\Mad About Computer\Pictures\Smiley.png" style=" width: 79px;height: 68px;"></a>
</body>
</html>

OUTPUT:-


Whenever you click on the image, you will go directly to the website called www.madaboutcomputer.com

So, that is for today guys, I hope you liked the Html series if you have any quarries about Html or this article comment the below or DM on my social media handles.

Thanks For Visiting here.

PEOPLE ALSO READ:-  HOW TO CREATE AN FACEBOOK ACCOUNT.
Continue Reading →

Wednesday, July 1, 2020

HOW TO CREATE A FACEBOOK ACCOUNT ?

IMAGE SOURCE


In earlier times people used to say that only three things were required to live, which is roti cloth(Kapda) and house(makaan),(those who live in India must know about this). But in today's era, which is full of technology, the internet has become an essential thing to live in today. Now that everyone has access to the internet, they must have heard about Facebook from any person or anywhere else. Like we have to have a Gmail account to use Google and YouTube. Such people feel that they should also have a Facebook account.

Today if people want to know about someone, then they first check the id of the person on Facebook. And he also checks the type of posts posted on his Facebook timeline. Which shows what type of person he is. And what that person is like, what he likes etc, etc.
So, in this tutorial, we are going to discuss how to create a Facebook account? Let’s start

STEP TO CREATE ACCOUNT ON FACEBOOK 

Step 1 :- Open your web browser and Search Facebook.com Ex:- Google Chrome, Mozilla Firefox, etc.


Step 2:- Now, on the left side of your browser. There will be a Create Account option. Fill up all the detail correctly on the column shown on the page. And Click on Sign Up Button.


Step  3:- Now, an OTP was sent by Facebook on your mobile number check and type the OTP on the column correctly. Then click on the Continue button given below


Step 4:- Now your Facebook account has successfully created and you can log in using your phone number and password.



Now, you can search your relative, friends, family, etc on Facebook with his username and send them a friend's requests. If he/she accepts your friend's request then he/she added you on his friend's list on Facebook.

So, that is for today guys I hope you liked the article.

Thanks for visiting here

Have a good day you all.

PEOPLE ALSO READ:- WHAT IS FACEBOOK? HISTORY OF FACEBOOK
PEOPLE ALSO READ:- HOW TO INCREASE YOUR COMPUTER SPEED


Continue Reading →

Monday, June 29, 2020

WHAT IS FACEBOOK? HISTORY OF FACEBOOK.


In today day to day life, many websites are created and many websites are destroyed but there are some websites which are created just for an entertainment purpose. But overnight it becomes so popular that even the website creator will not be aware of it. Today we are going to talk about one such website which was created only for a small purpose but became so popular that everyone was surprised. We are going to talk about Facebook.

IMAGE SOURCE

What is FACEBOOK?

What is Facebook? I think today every person knows what is Facebook? If he does not know, then he is a great man or he has abandoned the world. Just Joking If a person belongs to today's generation, he must know about Facebook or he must have heard the name of Facebook by the other people.
Facebook one of the most popular and biggest social media website ever.  Facebook is an online social networking and media which is located in Menlo Park, California. The Founder of Facebook was Mark Zuckerberg along with their Harvard University roommate’s name, Andrew McCollum, Dustin Moskovitz, Eduardo Saverin, and Chris Hughes. In December 2018, Facebook claimed that it had more than 2.3 billion monthly active users. And now in the 2020 first quarter, Facebook recorded over 2.6 billion active users on his site.

History of Facebook 

In 2003, Mark Zuckerberg built a website called “FACEMASH” while he was at Harvard University. Face mash was a website in which there were photos of two girls comparing whether it is hot or not. Means two photos were placed at a time and asking the user to choose one hot picture and one not (means not hot) picture between them. Face mash attract around 400-450 users and 20000-22000 photo views+ in the first 4 hours. In the initial phase, when Facebook was made new, it was only for Howard's students, then as the popularity of Facebook grew, it was opened up to Columbia, Stanford, and Yale and gradually Ivy League, MIT, and higher education institutions in the Boston area and eventually it was also opened for high school. Since 2006, any person who is 13 years old can be a member of Facebook.

IMAGE SOURCE


So, that is for today guys I hope you like the article, one more thing Friends, I have not given complete information in this article, only some basic information has been shared through this article, if you want to know everything related to Facebook, then you can read from Wikipedia. We will discuss some other topics and information about Facebook in the second part of the article.

Thanks for visiting here

Have a good day you all

PEOPLE ALSO READ:- HOW TO INCREASE YOUR COMPUTER SPEED
PEOPLE ALSO READ:- WHAT IS VISUAL CODE STUDIO? 

Continue Reading →

Saturday, June 27, 2020

HTML COMMENTS :- Single line and Multiline


HTML COMMENTS

In Html, Comments are the text or sentence that is written in your Html documents.

They are not displayed by the browser. The browser would ignore it.

The comment appears only in your Html documents. They are not rendered or shown by the browser.

Why We Use Html Comments

It is good practice for both programmers and beginners to write comments in his Html documents.
The comment is a type of code that tells the programmer or web developers what this code is going to do or why this code is written.

How to write Html Comment?

An Html comment starts with <!-- and ends with -->. Notice that an exclamation point (!) on the starting tag but not on the ending tag. An exclamation point (!) is placed only on start-tag, not on the end tag.

<!-- Comment goes here -->

Single line comments

Comment which comes only on one line is known as Single line comments. Example of single-line comment is below:-

EXAMPLE:- 

<p> This is Paragraph tag. </p>  <!--  This is a Comment -->

OUTPUT:-


Multiline Comments

We have talked about single line comments so far, but you can also comment through multiple lines. Html also supports multi-line comments. You have just put <!-- on the start tag and --> on the end tag. Let’s see through an example

EXAMPLE:-

<body>
<p> This is Paragraph tag. And this is an example of  multiline comment.  </p> 
<!--  
This is an example of a multiline comment. 
-->
</body>

OUTPUT:-



So that it for today guys. I hope you liked the article as well as Html Series. Thank you for your huge support. If you have any quarries related to this article comment below or DM on my social media.

Have a Good day.

PEOPLE ALSO READ:- HTML TEXT FORMATTING
PEOPLE ALSO READ:- HTML STYLES : FULL EXPLAIN


Continue Reading →

Friday, June 26, 2020

HTML TEXT FORMATTING



HTML TEXT FORMATTING

In Html, there are several elements that define text with a special meaning. 

Examples:- 

<b>, <strong>, <sub>, <sup>, <i>, <em>, <mark>, <small>, <del>, <ins> 

<b> and <strong> elements in Html

 <b> tag is known as the Bold tag. It is used to make your text bold.

Example:-

<p> This is a <b> Bold (Adding some more text to show you) </b> tag. </p>

Output:-


<strong> tag is also used to do text bold. But <strong> element define text with strong importance

Example:-

<p> This is a <strong> Example of Strong Tag. </strong> </p>

Output:-

<sub> and <sup> elements in Html

Subscript tag

In Html, <sub> tag is known as Subscript text. It is used to appear text character smaller and below the normal text. It is used to write a chemistry formula like H2O, C6H12O6, etc. Let’s see through an example.

Example:-

<p>This is <sub> subscripted </sub> text. </p>

Output:-


Superscript tag

In Html, <sup> tag is known as Superscript text. It is used to appear text character smaller and above the normal text. It is used to write math equation like ax3 + by2 + c = 0 etc. Let’s see through an example.

Example:-

<p>This is <sup> superscripted </sup> text. </p>

Output:-



Some other formatting Html Elements:-

  • <b> - The <b> tag is known as bold tag. It is used to make text bold comparing to other normal text.
  • <strong> - It defines that text is Important text.
  • <i> - The <i> tag is used to make text italic.
  • <em> - The HTML em element marks text that has stress emphasis.
  • <mark> - It is used to make your text Marked or Highlight.
  • <small> - It indicates that your text is smaller text.
  • <del> - It indicated that your text is deleted from documents. The browser usually strikes a line through the text.
  • <ins> - It indicated that a text has been inserted into a  document. 
  • <sub> - It is used to text small and below the normal text.
  • <sup> - It is used to text small and above the normal text.


Friends, I have not told you about all the formatting in this article because there is nothing tough in it. Anyone can check the example and apply it by looking at one of those two examples.

See friends, the more you practice, the more you know about Html, then according to me, you should practice more and more.


Continue Reading →

Wednesday, June 24, 2020

HTML STYLES



HTML STYLE

In Html, the style attribute is used to add style to an element. Eg Color, background color, font size, weight, etc.

Syntax of the Html style

<tagname style= "property: value;">

The Property and value is the CSS property and value respectively.

Background Color

You can change your Html webpage background color. 
The CSS background-color property was used to change the background color of your webpages.

Example to change whole page background-color

<body style = "background-color:Yellow">

<h1> Example of HTML Styles </h1>

<p> This is a paragraph tag. </p>

</body>

Output:-


Example to change background color of two different elements:-

<h1 style=”background-color:red”> Example of HTML Styles </h1>

<p style=”background-color:yellow”> This is a paragraph tag. </p>

Output:-


TEXT COLOR

You can also change your text color by applying CSS color property. Let’s see through an example.

Example to change text color:-

<h1 style = "color: purple"> Example of HTML Styles </h1>

<p style = "color: Blue"> This is a paragraph tag. </p>

Output:-


TEXT SIZE

You can change your text size by applying font-size CSS property. Let’s see through an example.

Example to change font size

<h1 style = "font-size:48px"> Example of HTML Styles </h1>

<p style = "font-size:40px"> This is a paragraph tag. </p>

Output:-


FONTS

You can also change your fonts by applying font-family CSS property. Let’s see through an example.

Example to change fonts

<h1 style = "font-family:Algerian"> Example of HTML Styles </h1>

<p style = "font-family: Forte"> This is a paragraph tag. </p>

Output:-


So friends, today we learned about Html styles I hope you understand. If you have any quarries about this article comment below.

Thank you so much for visiting here.

Have a nice day you all.


Continue Reading →

Tuesday, June 23, 2020

HTML PARAGRAPH:- EXPLANATION


HTML Paragraph

In Html, you can write a paragraph by using <p> tag.

Remember that whenever you put <p> tag on your Html document. Your paragraph starts with a new line every time.

Example :-

<p> Example of html paragraph </p>

<p> Another example of html paragraph </p>

Output:-


HTML DISPLAY

With Html, you can’t add extra space or extra line in paragraph by yourself in your Html code.

The browser automatically removes the extra space or line.

Look at the Example below:-

<p> This is an Example

of HTML

paragraph.

</p>

<p> This      is         another

example        of                html

P       a       r     a    g      r     a     p   h .

</p>

OUTPUT:-


Now, doubt comes in your mind that if I want a space or a new line then how we could add them to a paragraph. So, friends, I have a solution to it. Let’s check how we can add space or a new line in our paragraph line.

To add new line use <br> tag

If you want to add a new line in your paragraph you have to use “<br>” tag (also known as break tag) from where you wanted to add a new line. It is also known as Line Break. Let's see an example of it.

And if you want to add some space in your paragraph just use the (&nbsp) entity in your Html file.

Example of a line break or add a new line:-

<p> This is an <br> Example of Break Tag <br> used in paragraph tag. </p>

Example of adding some space in your paragraph:-

<p> This is an E &nbsp X &nbsp A &nbsp MPLE of add space. </p>

Output:-

Break Tag



&nbsp

Now, some users doubt what they would do if they wanted the text to remain the same. So there is a way. Let’s talk about it

The <pre> Html Element

HTML <pre> tag is known as (preformatted text). I think you must know by its name. The preformatted text means which presented the text exactly written in your Html file.

Example:-

<pre>

                           Hey

This         is       Example    

                                                                of    the preformatted

                           Text.

</pre>

Output:-


That is for today guys. I hope you liked the article. If you have doubt comment them or DM me on my social media given on the website.

Thanks for visiting here

Have a good day.

People Also Read:- HTML HEADING :- FULL EXPLANATION WITH EXAMPLES

People Also Read:- HTML ATTRIBUTES :- Explanation with Example

Continue Reading →

HTML HEADING :- FULL EXPLANATION WITH EXAMPLES


Hey Friends
Moving on to the Html Series, today we are going to talk about Html Heading. HTML Heading is the Html tag that is usually used in the Html documents. So without wasting time, Let’s Begin



HTML Heading

Heading tags generally used to show title or subtitle of your Html Pages. 

This line (heading) appears above the paragraph of the webpage so that people can understand what this paragraph wants to tell us about.

Syntax of the heading tags are:-

<h1> ………….. </h1>
<h2> ………….. </h2>
<h3> ………….. </h3>
<h4> ………….. </h4>
<h5> ………….. </h5>
<h6> ………….. </h6>

<h1> heading tag defines the largest heading and <h6> define the smallest heading. 

Note: - You can only use tags from h1 to h6.


Aligning HTML Headings

You can also align the HTML Heading by yourself. You have to just put style on your heading. To align headings we need to use the text-align CSS property with value LEFT, RIGHT OR CENTER. By Default, your heading show on the left of your browser and if you want it somewhere else use the style shown on the example below

Example: -

<h1 style= "text-align: Right"> Example of Heading aligned Right. </h1>
<h2 style= "text-align: Center"> Example of Heading aligned Center. </h2>
<h3 style= "text-align: Left"> Example of Heading aligned Left </h3>

Output:-


Heading Color

You can also change your heading color by putting color property of CSS on your Heading Tag. To change the color of the heading use the style is shown in the example below.

Example:-

<h1 style= "color: red"> Example of Heading With Red Color. </h1>

<h2 style= "color: blue"> Example of Heading With Blue Color. </h2>

<h3 style= "color: purple"> Example of Heading with Purple Color. </h3>

Output:-

So, in this article, you have learned about the Html heading and its types. We have also used some CSS styles used on the heading tag. I hope you understand what I wanted to explain. If there are any quarries related to this article comment below or message me on my Instagram or Facebook or any other social media. I will try to explain it to you again. Hit the share button if you like the content. See you in the next article.


Thank you so much for visiting here
Have a good day you all.


Continue Reading →

Like us on facebook

blogger templatesblogger widgets

Follow on Twitter

Linkedin

Categories

Contact Form

Name

Email *

Message *

Mad About Computer. Powered by Blogger.