Site icon Code Exercise

Lesson 4: Basic Webdesign Part-04

Md Rashidul Islam
How to learn Web design

Ladies and Gentlemen. how are you all? I hope you are well? I’m good for the grace of Allah.

Basic Webdesign Part 04

The fourth episode of Web Design,

How to learn Web design

I’m going to start a series of tutorials. We are in the last phase of HTML tags, line break-up, was discussed heading. Today we HTML paragraphs, lists and images will discuss. Design web pages to HTML paragraphs, lists and image is very important. first we will discuss HTML paragraphs . Then we will discuss the list of HTML and HTML images. However, we are now increasing our key to resume.

Also Check: Lesson 3: Basic Webdesign Part-Three

Also Check: Lesson 2: Basic Webdesign Part-Two

Also Check: Basic Webdesign Part-One

HTML paragraph

HTML paragraph tags are used generally for any text. Use the paragraph tag that we might be divided into several text. To give an example clear to you now. Now copy the following code in a text editor such as Notepad plus plus and save it with the name index.html;

<!DOCTYPE HTML>

<html>

<head>

 <title> HTML Paragraph </title>

</head>

<body>

 <p> Bangladesh is our Country. It is a very beautiful Country. </p>

 <p> It is a small country. But it has a Large Population. </p>

</body>

</html>

Now open it with a browser and the browser shows this….

How to learn Web design

We have used two paragraph tags. The first paragraph tag line at the beginning of the seven numbers. Then begins the second paragraph tag line eighth.

HTML List

Using HTML list you can do list of things. We are on the menu to create a list of commonly use HTML. In addition, some of the things we write in the form of HTML to use the list. There are generally two types of HTML list. As the two lists;

 

  1. Order List
  2. Unorder List

What is HTML Order List?

An order list is denoted by <ol>. This will utilize different plans of numbers to list your things.

Example:

Example of an order list tag in notepad++:

HTML Order List Code

Sample Example:

<!DOCTYPE HTML>
<html>
    <head>
        <title>HTML LIST</title>    
    </head>
    <body>
        <ul>
            <li>order list 1</li>
            <li>order list 2</li>
            <li>order list 3</li>
            <li>order list 4</li>
            <li>order list 5</li>
        </ul> 
    </body>
</html>

After processing in browser:

HTML Order List – Result

What is HTML Unorder List?

An unorder list is denoted by <ul> . This will list things utilizing plain slugs.

Example:

Example of an unorder list tag in notepad++:

Sample Example:

<!DOCTYPE HTML>
<html>
    <head>
        <title>HTML LIST</title>    
    </head>
    <body>
        <ul>
            <li>unorder list 1</li>
            <li>unorder list 2</li>
            <li>unorder list 3</li>
            <li>unorder list 4</li>
            <li>unorder list 5</li>
        </ul> 
    </body>
</html>

After processing in browser:

HTML image

Using the image is very important for website. Starting a website logo is used in various parts of the image. HTML images in order to use <img src = “” /> tag is used. src = “images with the extension name”. I have an example now you’ll understand the benefit.

Now copy the following code in a text editor such as Notepad plus plus and save it with the name index.html;

<!DOCTYPE HTML>

<head>

 <title> HTML Images </title>

</head>

<body>

 <img src="images.jpg" />

</body>

</html>

Now open it with a browser and the browser shows this….

HTML image browser Result

One thing to keep in mind, if your image and HTML files together in this way will work. If your index.html file and image files to a desktop folder inside of images, if you <img src = “images / images-name.png” /> like to write.

Hope, you will be helped by this post. For more information, stay with us & give your opinions. For contact Us or Email: tipusultan01611@gmail.com.

 

 

Exit mobile version