Introduction To Web Development : Basic

Hey guys, Welcome back to my blog and today is another tutorial there are some people who like making websites without giving money but making money yes this tutorial is for those only today We are going to do "Introduction To Web Development " yes today we will start of with the basics so making any website we using HTML and PHP. We use HTML for making any basic website or any dynamic website but when we talk about PHP 

its a we big website like amazon , Hotstar ,etc. So when come to CSS (Cascading Style Sheets) So basically we design with CSS but there are more in like SCSS and SAAS. We convert this file into CSS to link it with the designing part. we add button which work according to their "functions" yes by the name function's it means JAVA the difference Between JAVASCRIPT and JAVA is that  one is publishable on the internet but one is not. Anyways today we will make basic website using basic HTML , CSS , and a little bit of JAVA.

What we did: We built and designed web page

Before I start please sign in to codepen.io 

today we are gonna talk about a SPAN TAG & A DIV TAG

So, what is a Span tag and Div tag???

These tag are like an alignment SPAN tag is a horizontal alignment which align things horizontally with automatic margin and padding.

the way to write the SPAN tag is: <span></span>

Do you think the span tag is same well no for the opening we use <> and while closing the tag we use </> if u don't close the tag every thing will not come as excepted

Now we have to add the things in the span tag like 

<span>

<img src = img.png>

<img src = img1.png>

</span>

and the result will be

Since I have the dark the background it come black outside the image

Now have u heard of a DIV tag???

a div is completely opposite here it aligns the items in it vertically

and we write like:

<div>

<img src = img.png>

<img src = img1.png>

</div>

and the result is almost the opposite of this:

Tip To Know: not all tags have closures some tags are auto-closed like <img>

We use Codepen.io to practice but when to publish it We use code editors

We can use 

Sublime Text is a Sophisticated code editor for markup and prose

Sublime Text is available on Windows , Mac os and Linux

or we can can use Visual Studio a better code platform this is also available on Windows , Mac and Linux. 

If u want to design an item we use id's and classes  id's are used to design one element and classes can be be applied on all of them but make sure that u code them properly in CSS we use id's like #code and for classes we use .code after that we add this {} to start then enter the designing element  u want to .Remember that use end that with a ; otherwise it will be wrong and the design wont be applied . if u want a hover u dont need JAVA for that we use CSS we do it like

.code : hover {

    background-color: black;

    color: white;

}

.

The HTML Body is divided into 4 sections with paragraphs tags used as headers of the sections.

                                                1 SPAN 2 SPAN

                                                       3 DIV 

                                                       4 DIV 

span tag with class name sp has an on click functionality which triggers the spanelem() function which displays an alert when the span element clicked span tag or span containers is used to group two images side by side with any random photos using their URL taken from Pexels Unsplash

similarly div tag or div container is used to group images vertically with class name di and triggers the divelem() function when clicked which displays and alert 

CSS 

Here in CSS all the elements inside the body are aligned in the centre with font size of 18 px. now the span elements has class name sp so in css this is specified by (dot)sp. which style all the elements inside span tags, here we have images so the margin between the images is set to 10 px. same properties are is applied to di class as well for images in div component we can write it as

JS 

Here we declare functions with name spanelem() and divelem with same methods of displaying an alert message when a SPAN and DIV element is clicked. 

Difference between span and div tags: 

span tag is used to place elements one after another horizontally called in-line alignment whereas div is used to place elements one below another vertically also called block alignment

How to host a website free

First go to 

  Drive to Web

then open your drive in a new window,

after that

upload the folder in drive

then right-click and share 

after that change the private one to any one with this link

then press done 

now come come to Drive to Web

then host with google drive sign-in 

then click allow then your website is ready

then now u can send it in the comments section below 

I hope u like this educational and lengthy tutorial until then Bye!!