WEB DEVELOPMENT

DATE: 13TH

MARCH

 Building things that run on the internet.

 When you put on application online, fir anyone in the internet to access.

It’s a web application. For example, goggle docs.

 Website application, run in browser.

“It’s a lot trickier than it sounds”

Understanding the fundamental terms

1. The internet

2. The web

3. Web development vs Network Engineering

The INTERNET

 The internet us a global information highway.

 It’s a gigantic network of billions of devices – A connection of

billions of computers, phones, IOTs and more, which can talk to

each other over this network

 Refers to the infrastructure than the services.

 For example, telephone wire is also internet, unique number 87272

 Tyo unique number le identify network ma unique identifier cha.

  Telephone technology advance form of network.

 Internet hardware whereas internet software.

Fibre optic =

The WEB

Software/contracts running on the top of the internet that allows the

devices to communicate

There is a protocol device to able to communicate over the internet.

Web is collection of such protocols.

HTTPS, HTTP, RTC, WebSockets

Protocol mati build garni lai web

WEBDEVEL

OPLEMT

Protocols

INTERNET
PROTOCOLS

 TCP/IP
  SMTP

 PPP

 SFTP

 HTTPS

 FTP

 HTTP

 TELNET

WED development types

Frontend
Backend

 Focuses on layout animations, content,  Focuses on building code, debugging,

organization, navigations databases management

 UI/UX DESIGNN  Node.Js, Python, Java

 UI DEVELOPMENT

 HTML,CSS, JAVASCRPIT

o Cern = eu resreach

o First website use of html

o Css – deigning

HTML AND CSS IS NOT PROGRAMMING LANGAUGE HOINS

Broswe ma logic lagauna man lagyo bhane – javascript

TH
DATE: 17 MARCH

2024

Roles in Web Development

jQuery – almost every thing is internet is that

Library – koi aru le usle tyo problem solve to make lib,(source of code)

Framework – collection of libraries.

How web is work?

 Load kasre huncha – request response lifecycle. Sever bata information access garna

request.

 Then server check the request authentic request or not (.HTML/CSS/JS = bunden).

 WEB PAGE BITRA DATA HALCHA.

 Final web page

3-tier architecture

Client (presentation layer) ----Sever (logic tier) ----Database (data tier)

IP

Web host ---domain name —website users(dns)

How to buy domain name =

Domain name/Hosting ma sever huncha

Babal.host – Nepal ko

FULL -STACK DEVELOPMENT

Front-end /Backend/Database.

Other roles in the Web Dev

i. DevOps- handle deployment, sever configuration, monitoring

ii. QA= Quality Assurance-

iii. Security Q/A/ Analysts-

iv. Database Administrators

v. Team Lead

The browswr

Browse the internet

HTML VS CSS VS JAVASCRIPT

 HTML – Create the structure

1. Controls the layout the of the content

2. Provides structure for the web design

3. The fundamental building block of any web page

 CSS – Stylize the website

1. Applies style to the web page elements

2. Targets various screeensize to make web page

  JavaScript- increase Interactivity

HTML

o Hypertext Markup Language

o HTML is a markup language used to describe the structure of documents on

the web.

Hyper text

 A piece of text that can link other tests

 It’s basically text that support internal link or external page of documents

 Links are big part of HTML’s success.

Mark up

 Mark up is special syntax that uses marks to denote and identify pieces of

information in its contents.

 For example, bullet point

 It is not programming language@ regular text,,on steroid

 Example, HTML tag, XML, Md, LaTeX

HTML

 Created by Tim bernes lee in 1989

 Uses HTML “tags” to structure web pages.

Tags

Html tags are special marker enclosed with <>(angle bracket) that mark the structure

of the application.

Rules of HTML.

1. <>

2. <!DOCTYPEhtml> tag # yo tag first ma lekni

3. <a> </a>. For example <title> This is title </title>

 4. The document is divided into two parts, the head and the body

5. Tags can never be overlapped. <a > <b> overlap hudaina<b> < /a>. <a> <b> hunu

hudaina</b> </a>

6. You must work with valid HTML tags defing by W3C.

Basic HTML tags for this ! enter garyo bahne sabai aaucha

 <!DOCTYPE html>

 <html> </html>

 <Head> </head>

 <Title> </title>

 <Body> </body>

Basic formatting Tags

Bold <b> </b>

Italic <i> </i>

Underline <u> </u>

Basic Heading Tag

<H1> -- Large

<H2> </H2>

<H3> </H3>

<H4>

H5

H6> small

<p> </p>

<br> *

<hr> * -- horizontal ruler

List : <ul>, <ol>, <li>

Two type of list

1. Ordered<ol> (1,2,3, a, b, c)

2. Unordered <ul> ( bullet points, arrows)

W3 SCHOOLS

Hyper media

In Hyper text Markup Language.

Link Combining of image, video, audio, text

Basic HyperMedia Tags

There tags are used to insert hypertext or media to the document

 <a> for link a = anker

 <img> * for source “src” <img src/>

 Two important things in img tag

 Src and alt, width = “30” height = “30” unit in pixel

 Alt = picture load nabhako bela

 Img ma link

 <video>/< source>

 <a href = "https://www.support.kingscollege.edu.np/"> For class

routine</a>

Href = hypermedia references

 _blank for new link in folder

Aafno bita folder/index.htm

Two link

Dot .

Dot.dot - ../index.html

../products/prouducts.html- folder ko folder ko bitrra

HTML CSS JAVASCRIPT

<!-- selector
 rules
 properties -->
 <!-- internal stylesheet -->

H1 = slectiors

Rules = {}

Internal css ma head bitra<style>

CSS – INLINE , EXTERNAL, INTERNAL

INLINE

<!-- <!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<h1 style="color: red; font-size : 24px;" > Learning css </h1>
</head>
<body>

</body>
</html> -->

Internal

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-
scale=1.0">
 <title>Document</title>
 <!-- selector
 rules
 properties -->
 <!-- internal stylesheet -->
 <style>
 h1{
 color: rebeccapurple;
 font-size: 14px;
 }
 p{
 color: red;
 font-size: 16px;
 }
 </style>
 </head>

 <body>
 <h1>Now we are studying css </h1>
 <p>HELLO</p>
 <p>HI</p>
 <p>BYE BYE</p>
 <hr/>
 </body>
 </html>
EXTERNAL

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS CLASS </title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Cedarville+Cursive&display=swap" rel="stylesheet"/>

<link rel = "Stylesheet" href ="style.css"/>

</head>

<body>
<h1> HELLO WORLD</h1>
<p> Welcome to class of css </p>
</body>
<p>

This course is Taught by Rojan 😁

</p>
</html>
STYEL

body{
background-color: black;
}
h1 {
color: powderblue;
font-size: 30px;
background-color: purple;

}
p{
color :blueviolet;
font-size: 34px;
text-decoration: underline;
font-weight: bold;
font-style:italic;
/* font-family: monosapce; */
font-family: "Cedarville Cursive";
/* font-family: sans; */

}
BASIS CSS PROPERTIES

Color

Background-color

Font-family

Font-size- pixels -

Font-weight

Text-align

Test-decoration

Text-transformation

Text-
 Color

#ff0000;
Red

00ff00

Green

0000ff

Ffooff

body{
background-color: black;
for overall background color

fonts.google

import garni

font -by default –

 serif

 sans

 sans-serif

 monospace-coding font

fonts.google
import garni

embedded garni

code copy

css,html ma

garni

font-family: "Cedarville Cursive";

double ma “”

FONT-WEIGHT – ONLY BOLD

Font-wieght = bold;, bolder

Font-weight = normal

Font-weight = thin

Font-weight = bold

Font-weight = 100;

Font -weight = “400” to 800

TEXT ALIGH:
CENTER

LEFT

Right

text-align: center;
TEXT-DECORATION
UNDERLINE OR OVERLINE

text-decoration: underline;
TEXT-TRANSFORM

text-transform: uppercase;
all world in CAPITAL

LINE-HEIGHT
Paragraph spacing = 2 – line distance

Text-align: justify

BORDERS

Border -style

Border-width

Border –

border : 1px solid skyblue;

border – thinness

border = solid, dotted,

border : 1px dotted skyblue;

color

border: 1px solid balck;

background-color: white;
font-size :40px;
border-radius:50px; ----round haru garna

MISC PROPERTIES

CURSOR

cursor:pointer;
options

grabbing

not allowed

VISUAL EFFECTS

 opacity – for making transparent 0 and 0.5 1

 box-shadow

 text-show
SELECTIVE STYSLUNG USING CLASSES

CLASS- giving name

<p class = "first parapragh">

<p class="first"> Welcome to class of <b> css. </b>Learn about color,

bakcground color, font-size.font,weight, font-align, text-decoration, text-
transformation, text-transformation,line-height, border, border, border -
radius,cursor</p>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title>Document</title>
<link rel = "stylesheet" href ="boxshadow.css"/>
</head>
<body>
<p>
 My name is Sweta Sharma
</p>
</body>
</html>
CSS

p {
box-shadow : 2px 2px 2px 2px grey;
text-shadow: 2px 2px rgba(122, 98, 98, 0.618);
}

IMPORTANT

Inline And Block Elements

Inline
In-line” – these element take the smallest possible space onside their line.

<a, image, <I, u, b

Block Elements;

These elements take up whole line, even when there is minimal content minia. Takes at least

all of the horizontal space it can .

Block – hello

Inline – sweta Sharma

Block elements

Heading

List

Paragraph

Video

DIV

 Div defines a section in the document. It does not have specific purpose other than

labeling things.

 It is a block section.

 <div>
 Sweta
 </div>
 <div>
 Sweta Sharma
 </div>

Div – versatile, for we don’t uses div

SPAN CHHAI INLINE BITA

</head>
<body>
<div class = "name" > Sweta <span class = "golden">sharma </span> Show </div>

</p>
</body>
</html>
BOX MODEL

The most importanct css topic in the histoy of important CSS topics

It deals with tge spacing inside and outside an elements

Most of what we do in css is postioning elements-putting them together ir further apart,

aligning them ns making the age not look cramped or cluttered .

BOX MODEL

 PADDING

 BORDER

 MARGIN- border ko bahira spaccing margin use garchua

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel = "stylesheet" href = "boxmodel.css" />
</head>
<body>
<span>King's </span>
<span>College </span>
<span> Nepal</span>
</body>
</html>
span {
border: 1px solid red;
padding: 0.5px;
margin : 10px
}
 CARDS

EUTA TABLE MUTLIPLE

FLEX BOX,

.flex{
display: flex;
padding: 6px;
justify-content: center;
border: 1px solid rsybrown;
height: 100px;
align-items: center;

flex box always used in parent elements.

FLEX BOX KO DUITA AXIS HUNCHA

X(MAIN) AND Y (Cross axis)

Justify content- align-items

Justify – horizontally algin – center left right

For example, fkex-end, flex, content , space-around ,, space evenly

Align – item = tala, tala

 Flex direction
For column

.flex{
display: flex;
/* padding: 6px;
justify-content: center;
border: 1px solid rsybrown;
height: 100px;
align-items: center; */
flex-direction: column;

for row baata – axis haru align -item huncha

align-items:Center;

y axix and x-axis -----------exchange

to check element size

two options

Verticle size - screen size

Horzintal-size

Gap

Vw- viewpoibt
 Vh- viewheught

HERO-EYECATCHING PART

JAVASCRIPT

console.log("Hello World!, I am From external file");//console ma print huncha

document.write("Hello! I am <b> Sweta</b>");
document.write("<ul><li>List</li></ul>")
~
document.write(`Hello
I
Am
Sweta`)
// ASI= AUTOMATIC SEMICOLON INSTRUCTIONS
//static and dynamic programming types
//static language = harek varibale ko define- Tthis type sade. in C, int = 1
//dynamic language = variable type huncha-
// let name = prompt("HEllo what is your name")
// console.log(name)

// console.log(5>4)
// console.log(4===4)
// console.log(5 !== 4)

let isTodayHot = true

let isTodayWorkDay = true
let isTodayClass = true

let classcondition = isTodayClass && isTodayWorkDay && !isTodayHot

// let iWillComeClass = true

// if(iWillComeClass){
// console.log("Patho book")
// } else{
// console.log("Back to sleep")
// }

let stock = 1000

let age = 19
let ashutosh = true
let paisa = 120

if(stock >= 1 && age>= 19 && ashutosh && paisa > 190 ){
console.log("Your order is ready!")

}
else{
console.log("Not available")
}

DOCUMENT OBJECT MODEL

 Tag bitra ko kura lai element bancha

Organze garn

Document tree

const students = {
sweta: 'sweta.@gmail.'
}

DOM BANAUNI PROCESS

const doc= {
name: 'HTML',
children: [{
name:"head", children:[
{name :'title', children:[]},
{name: 'link', children:[]}
]
},
{
name: "body",
children:[
{name: "h1", children: []},

{
name: "div",
children:[
{name:"p", children: []},
{ name:"p", children: []}
]
} ,
{ name:'script', children:[]}
]
}
]
}

console.log(document)
yesma stor ehuncha mati ko

console.log(window)

to know url, ip address,

to capture sensitive information

cookies haru chalauni

 EVENTS

User ko feedback – for example buttom ma click garyo bhane tyo event.

Achromous activities

EVENT EMIITER--- on click , onscroll

EVENT START FROM ON

INNER HTML, INER TEXT—html ko code, hamile js bata change garni lai

Inter text, html ko value string