Level no.6

Lecture 6

In this lecture we study about how to insert image in html, line separator and heading tags.


How to insert image in html?
For inserting image in html. The image tag is used with src (source) and alt (attribute).The image tag has no closing tag.The picture you are uploading in your website is should be downloaded in the folder where your are saving your html code. In src we placed image name and in alt we write an error message e.g. if image is not open due to internet load or incorrect image spelling name, the message in alt will be uploaded.

Syntax
<img src=" " alt=" ">.

Code
<!DOCTYP html>
<html>
<head> 
<title> Uploading image </title>
</head>
<body>
<p>
<img src="Cake1.jpg " alt=" error ">
</p>
</body>

</html>

Output


In this output you can see that the size of image is large.














How to use height and width attributes in html?

In image the we can two more kinds of attributes which can set the width and height of the image. For this width and height attributes are used.We cannot use both attributes together, the image get contrasted and expanded.


Height
<img src="Cake3.jpg " alt=" not found" height="70">.

Code
<!DOCTYP html>
<html>
<head> 
<title> Uploading image </title>
</head>
<body>
<p>
<img src="Cake3.jpg " alt=" error " height="70">
</p>
</body>

</html>

Output













Width
<img src="Cake3.jpg " alt=" not found" width="80">.


Code
<!DOCTYP html>
<html>
<head> 
<title> Uploading image </title>
</head>
<body>
<p>
<img src="Cake3.jpg " alt=" error "width="80">
</p>
</body>

</html>

Output












Line Separator in html

To add line separator the <hr> tag is used, known as horizontal ruler. It has no closing tag, appear at the end of the line where you want to add a line separator.


Center tags:

Center tag is used to keep a word or text in center.<center></center> are used in html.

Code:
<center> Hello Pakistan </center>

Example:
<!DOCTYPE html>
<html>
<head>
<title></tile>
<head>
<body>
<p>
<center> Hello world</center>
</p>
</body>
</html>

Output:
Hello World


Heading Tags: 

There are 6 types of heading tags in html. Each tag is different from each other, by their size.
<h1> </h1>  for Big heading, <h6></h6> for Small heading and so no.

Code:
<h1>Pakistan </h1>
<h2>America</h2>
<h3>Japan</h3>
<h4>China</h4>
<h5>England</h5>
<h6>Canada</h6>

Example:
<!DOCTYPE html>
<html>
<head>
<title></tile>
<head>
<body>
<p>
<center> Names of Country </center>
<h1>Pakistan </h1>
<h2>America</h2>
<h3>Japan</h3>
<h4>China</h4>
<h5>England</h5>
<h6>Canada</h6>
</p>
</body>
</html>

Output: 
 Names of Country

America

Japan

China

England
Canada
___________________________________________________________________________________________________________________

How to create Multiple Cursor in html ?

To create multiple cursor in html, we use alt key. Hold alt for a second html create multiple cursor.

I will explain you in example using heading tags.

Example: 

<!DOCTYPE html>
<html>
<head>
<title></tile>
<head>
<body>
<p>

<h1>Web Development  </h1>
<h2>Web Development </h2>
<h3>Web Development</h3>
<h4>Web Development</h4>
<h5>Web Development </h5>
<h6>Web Development </h6>
</p>
</body>
</html>


Output: 

Web Development

Web Development

Web Development

Web Development

Web Development
Web Development


 













Comments

Post a Comment

Popular posts from this blog

Level no.4

Image
Lecture 4 How to create Boilerplate Automatically in html? To create boilerplate automatically  in html. "Shift + 1" keyword is used. How to change color in html? <font></font> tags are used to change color in html. In font tag color attribute are used. How to use Font tag with color attribute? <font color="purple"> Hello World </font>. Hello World Difference between tags and attribute? Tags are used to hold the html element and attributes add additional information in tags.We can apply multiple attribute in tags. How to change size in html? To change size in html <font></font> tag with size attribute. How to use Font tag with size attribute? <font size="100">Pakistan</font>. Pakistan. How to change writing style  in html? The style of the writing is changed by using font tag with face attribute. How to use? To use font tag with face attribute we can change writing style. <font face="  Georgia &
Read more

Level no.21

Image
CSS Properties  In this lecture we will study about properties of CSS, that define  how HTML element should be displayed on web-page and how we make our web-page layout defined and manageable. Here are some CSS properties: border: It is used for defining the border around the element. syntax:  border: 5px solid black; border-width: It is used for setting width of the border around the element. Syntax:  border-width: 10px; border-style: It is used for setting style of border, in which style the border will appear. Syntax: border-style:solid; border-color:  It is used for changing the color of the border around the HTML element. syntax: border-color: 5px   solid black; border-radius:  It is used for making border corners round, giving them round shape.You can make any side of the border round just by assigning the exact position. Syntax: border-radius: 39px;  You can gradually increase the value according to your preference. Width and Height: This property sets the dimensions of the
Read more

Level no.3

Image
 Lecture 3 In this lecture I study about tags which are used in html. Bold:   To do text bold in html. we use tags <b> </b>. For example <b> Hello World </b>. Hello World Italic: To do text  italic in html.we use tags <i> </i>. For example <i> Hello World < /i>. Hello World     Underline: To place line under any text. we use tags <u> </u>. For example <u> Hello World </u>   Hello World Strike: To use Strike tag in html for unimportant and inaccurate text. For example <strike> 100 </strike>. 100   How to create random paragraph in html? We use "lorem" keyword to create random paragraph in html.           How to use ? <p> lorem <p>. To keep paragraph  on  one page: To keep paragraph on one page in html we use "Alt+Z" keyword.  Superscript and Subscript in html We use superscript and subscript in html to write any formula's and power of a number. Superscript:  Superscri
Read more