Introduction to Web Development with @royalrajpoot | Dairy Game | Steem Lifes | EP2

in Steem Lifes3 years ago (edited)

Introduction

Asslam-o-alaikum and Welcome back everyone, to the Episode 2 of Introduction to Web Development, this is series of episode or you can say a course for those who want to learn Website Development.

PicsArt_04-29-03.05.45.jpg

Quick Overview of Last Episode

So, in last episode we learnt about basics of web development, some basic elements or tags of HTML and we have also learnt about the format of web page, so if you haven't seen my last post first see that Episode 1

Today Topics

Today we will be taking a look at some more tags and some attributes of those tags. let's take a look at paragraph tag

Paragraph Tag

The paragraph tag is used when you are going to write some paragraph in your web page, the paragraph tag has an opening and a closing tag <p> Paragraph </p>, Lets use it in our previous code.

<html>
<head>
<title>Home </title>
</head>
<body>
<h1> Hello! World</h1>
<P> This is a paragraph, this is a paragraph. this is a paragraph, this is a paragraph. this is a paragraph, this is a paragraph. this is a paragraph, this is a paragraph. this is a paragraph, this is a paragraph. </p>
</body>
</html>

The Result is

Hello! World

This is a paragraph, this is a paragraph. this is a paragraph, this is a paragraph. this is a paragraph, this is a paragraph. this is a paragraph, this is a paragraph. this is a paragraph, this is a paragraph. so that was the paragraph tag lets move to next one, so if we want to add an image file in our web page how can we do that

Image Tag

The image tag is used to add images in web pages it has only opening tag as img but we need the source of a picture to add it source mean an address for an image.
Let's see how we can add it assume we have a folder named My Website and in this folder we have a home page file home.html and an image file as banner.png Like this.

PicsArt_04-30-09.01.09.png

So to add image we will write code in our html page

PicsArt_04-30-10.26.01.png

we have to use this code where we want to show image so use it in body tag.

if the image is not in that folder and it is an online image stored in some server how can we add it to our page lets assume we have a image file opened in our browser like

PicsArt_04-30-09.12.26.jpg

so we will copy its url like in our case it is

PicsArt_04-30-10.30.46.png

and paste it inside source in img tag
lets do it inside an html page.

<html>
<head>
<title> Home </title>
</head>
<body>
<h1> Hello! World</h1>
<P> This is a paragraph, this is a paragraph. this is a paragraph, this is a paragraph. this is a paragraph, this is a paragraph. this is a paragraph, this is a paragraph. this is a paragraph, this is a paragraph. </p>

PicsArt_04-30-10.24.59.png

</body>
</html>

Os that was the image tag.
So now lets talk on styling these html file

Styling

So There are three types of Styling an html file.
the first one is

Inline Style

The inline styling is that in which we add styling in the line of code of that line where we want to add styling.
We will only talk about inline styling today.
Lets learn some style attributes of a heading tag. We can change its font size, font style, make it bold or thin with font weight etc. lets use it in a h1 tag but first we need to know that to use styling in a tag we use attribute named style, lets implement it in h1.
<h1 style="font-size:32px, font-style:sans;">This is a Heading !</h1>
Result

This is a Heading !

Internal Styling

External Styling

I think so that's it for today Inshallah meet you in the next one.

Regards:

@royalrajpoot

Sort:  

Sir, your post is good, but you put up the diary game so that you can get good support.

ok sir Thanks😊

Your post is V nice bro

Thank you for the support

Coin Marketplace

STEEM 0.16
TRX 0.16
JST 0.032
BTC 59329.11
ETH 2528.70
USDT 1.00
SBD 2.47