Web_Development

 Internet:

A computer interact with other computer using long wire.

Then can exchange data

certain computer ready to serve 24/7 hrs server and the other one is called client

If the client send request(google.com), then it go to ISP(Internet Service Provider) it send to Domain Name System(DNS) it act as a yellow page of phone book and find Ip address of thar particular website then it send the IP address for the particular website through the ISP and over the internet  to the client.

Each computer have its IP address , Computer identify another computer using IP address.

The data that you receive from server consist three types of files

                    HTML- give content/structure to web

                    CSS - Styling your website

                    JS - do things / Have functionally


---------------------------------------------------------------------------------------------------------------


HTML

HyperText -- The piece of text which can link another document in a web

Markup Language--- we markup which text to be show as bold(e.g. <b>hello</bold>


Structure of html


<!DOCUMENT html>-----------------tells the browser this is html5 version

<html></html>--------------------------actual root html element, every thig put inside this tag.

<html lang="en">-----------------------mention the language "English"

<head>-----------------------------------head of website

<meta charset="UTF-8">------------ which character set do using

<title>-----------------------------------title of the website

<body>----------------------------------


Heading element

<h1>---tag(opening tag)

</h1>----tag(closing tag)

<h1> hello</h1>----element(element has tag and content)

<h1>.......<h6>


Paragraph element

<p> this is paragraph </p>


Void element(Self closing element)


it don't have content .....not have open and close tag(element)

<hr />----horizontal tag 

<br />----break tag

[<hr> and <br> also valid form]


List element


unordered list:

<ul>
<li>hello</li>
<li>hello</li>
<li>hello</li></ul>



ordered list:

<ol>
<li>hello</li>
<li>hello</li>

<li>hello</li></ol>


Nested list indentation

A list in another list




Indentation-->

*right way to write code
*easy to identify the error
*identify flow of code





Anchor element

Anchor element allows to create hyperlink







we can drag the hyperlink too


Image Element

Its also self closing element(void element),,,,it doesn't have closing tag.

Syntax:



example:

get random image  from this site



200 = size

alt= alternative text


make image as a link:

 <a href ="Objective.html"><img src="./image/objectives.jpg"
alt="image doesnot show" width="200" height="180"></a>


---------------------------------------------------------------------------------------------------------------

CSS

Cascading Style Sheet----type of style sheet

e.g. for other style sheets are:

SASS--Syntactically Awesome Style Sheet

LESS-- Leaner CSS


Add CSS in html

1.Inline

<html style="background: blue"></html>

:. background--property

 blue--value


2.Internal

<html><head><style>

html------selector(we also put body, p, h1....selector is a place where we put our css code)

{

background : red;

}
</style></head></html>


3.External:

index.html

<html><head><link rel="stylesheet" href="./xx.css" />

</head></html>

xx.css

html{

background : red;

}

(:.rel--relation and href--location)


-------------------------------------------------------------------------------------------------------------


SELECTOR


1.Element Selector(h3)

Target a particular element

e.g. h1{background : red;}

        p{background : red;}

        h2{background : red;}


2.Class Selector(.classA)

Class  is an attribute and its used to group particular elements in a group




3. Id Selector(#txt)

*it selects a particular element with id
*Selects only one element(unique)



4. Attribute Selector([])

its target a group of attributes




5. Universal Selector(*)

Its select all the elements and attributes.




---------------------------------------------------------------------------------------------------------------


Colour properties:

h1{
background-color:red;                                  //for background colour
}


html{color:blue;                                          // for text colour
}


colorhunt.com-----for more colours and their hexacodes


Font properties:

Font size:




.classA
{
font-size:20px
}

Font weight:


.classA
{
font-weight:bold

}

Font family:

* Helvetica is the MAC's one
* sans-serif is the generic one (windows etc.)
* if its windows os then display in generic font type
* have space in family name then put inside the ""
* otherwise separated by comma ,

font.google.com  //for more font type

 

Font Align:

h1{

font-align:center

}


---------------------------------------------------------------------------------------------------------------


MARGIN, PADDING, BORDER



img{

height:30px;  //30%

width:20px;

}


BORDER

img{

border: 10px solid green;     //10px-thinkness of border......solid-style..... green-colour

}


  









PADDING

padding push the border to out


  




MARGIN

it is the space between border and other element




---------------------------------------------------------------------------------------------------------------



Which one has more priority






--------------------------------------------------------------------------------------------------------------

Combining CSS selector










----------------------------------------------------------------------------------------------------------


CSS Positioning




Static : display under another element only Its default




Relative: The item move down / left particular pixel the top item.



Absolute: The item move up / left particular pixel the top item.



Fixed: the circle is placed in a same position 
the other element change their position 
but circle is fixed even scroll down option cant change the position


---------------------------------------------------------------------------------------------------------

CSS Display (like news paper)


display: block;  





display: inline-block;


display: inline; ----doesn't change the height and width 



--------------------------------------------------------------------------------------------------------------


CSS Float:
wrapping the image by text




-------------------------------------------------------------------------------------------------------------


Change the layout(desktop view, mobile view, tab view)


4 ways:

1) Media Queries

2)CSS Flexbox

3)CSS Grid

4)Bootstrap

before minimize:

After Minimize:



1) Media Queries



2)CSS Flexbox



before:

After:
------------------------------------------------------------------------------------------------------------------------


Flex Direction

flex-direction: column;
flex-basis:100px  //height


flex-direction: row;
flex-basis:100px  //width



--------------------------------------------------------------------------------------------------------------




//////////slide show/////////


 <center>
        <div class="container">
            <div class="wrapper">
                <img src="./images/N_Stranger_Things__The_Experience.jpg" height="530px" width="1510px"/>
                <img src="./images/N_slide1.webp" height="530px" width="1510px"/>
                <img src="./images/N_toy.jpg" height="530px" width="1510px"/>
                <img src="./images/N_hotel.jpg" height="530px" width="1510px"/>
             
            </div>
        </div>
       </center>      
 

 .container{
    height:530px;
    width: 900px;
    position:relative;
    overflow: hidden;
   
}
.wrapper{
    width:960px;
    display: flex;
    animation: slide 10s infinite;
}
@keyframes slide{
  0%{
    transform: translateX(0);
}
25%{
    transform: translateX(0);
}
30%{
    transform: translateX(-100%);
}
50%{
    transform: translateX(-100%);
}
55%{
    transform: translateX(-200%);
}
75%{
    transform: translateX(-200%);
}
80%{
    transform: translateX(-300%);
}
100%{
    transform: translateX(-300%);
}
}
   











GIT HUB

* >cd c:.......

* git init (initialize the file)

* ls -a (list all the files)

* git status(check which files are not in the staging area)

* git add x.html (add file to staging area)

* git add . (add all the file to the staging area)

* git commit -m "initial commit"(-m type commit msg)

* git log (you can see what commit made)

* git remote add origin https:/......git(create a remote repo called origin)

* git push -u origin main



or create a new repository on the command line

echo "# webdevelopment" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/sumilibin/webdevelopment.git
git push -u origin main

…or push an existing repository from the command line

git remote add origin https://github.com/sumilibin/webdevelopment.git
git branch -M main
git push -u origin main







Comments

Post a Comment

Popular posts from this blog

React_JS

Image
  STEPS TO CREATE REACT APPLICATION :     * Open VS code      * Create a new folder (practice)     * Open terminal and check the node version by the cmd node -v     * To create a react app by the cmd npx create-react-app practicedemo      * Then change the directory by the cmd cd model in terminal.     * Now we can see the above packages in our application.     * To run your react application by the cmd npm start       * Then you can the default application of react like the above one.     * Do you what to stop running application by press ctrl+c     * Then go to Apps.js file and App.css delete the default code and your own. -----------------------------------------------------------------------------------------------------------------------------
Read more

Java_Script

Image
  Chapter 1 Introduction Client-side scripting language for web pages. Client-side (runs on users computer not web server) Scripting languages are easier than programming languages. Browser interprets JS statements. Its embedded (add a block of code(JS)in html page from outside) in html page. Its integrated with html. Quick development and easy maintenance. Well perform repetitive and event-invoked task(each time change data) Platform independent because of WWW. Its object-based language not object-oriented. Each web page as collection of several individual elements which are called objects( e.g.   image, link  etc) JS is not compiled like java. Variable data types not declared(loose typing). ------------------------------------------------------------------------------------------------------------------------ Chapter 2 Ways to put JS code in html Between the body tag of html Between the head tag of html External .js file   Between the body tag of html    ...
Read more

DSA

Image
DSA DATA STRUCTUTRE AND ALGORITHM 1.Printing Printing and then moving cursor to next line JS console.log("hello sharpnerians"); Python print("hello sharpnerians") C++ cout<<"hello sharpnerians"<<endl; Java System.out.println("hello sharpnerians"); Printing and cursor remaining same line JS not possible Python print("hello sharpnerians", end="") C++ cout<<"hello sharpnerians"; Java System.out.print("hello sharpnerians"); 2.Variables its a placeholder to store values x=3 //x is the variable Datatype its defined type of the data to be stored primitive data type=it has value Static defined datatype: In some language, datatype should be mention e.g. int x=5 //java Dynamic defined datatype: n some language, datatype should not be mention e.g. x=5 //python import java . util .*; public class Main {     public static void add ( int a , int b )     ...
Read more