Scribd
Upload
15 views

Web Developement

Uploaded by

sharitika9116
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
15 views

Web Developement

Uploaded by

sharitika9116
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 17

HTML

---HYPERTEXT MARKUP LANGUAGE


It is basically a standard markup language for giving a static skeleton to
web application and websites.
Its a well standardized system.

CSS
---CASCADING STYLE SHEET
It is a sheet language that used to handle the presentation of the web page
containing HTML.
It makes are websites beautiful and modern looking.

JS
---JAVASCRIPT
It is a high-level dynamic interpreted programming language.
It allows client-side scripting to create completely dynamic web applications
and websites.

___________________________________________________________________________________
_______________________________________________
HTML
===================================================================================
===============================================

<!DOCTYPE html> //document type is html


<!--Our HTML code starts here--> //comment writing style in HTML which is
note exectuable (only for notes) {CTRL+/ is shortcut key}
<html lang="en"> //opening tag, lang is attribute
<head> //opening head, includes metatags, titile, to link external
sheet
<meta charset="UTF-8"> //meta is tag, charset is attribute
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head> //closing head
<body> //opening body, include content on webpage

</body> //closing body


</html> //closing tag

HEADINGS---------------------------------------------------------------------------
---------------------------------------------
<h1>Ritika</h1> //Biggest Heading Tag, should be use only once in a webpage
<h2>Ritika</h2>
<h3>Ritika</h3>
<h4>Ritika</h4>
<h5>Ritika</h5>
<h6>Ritika</h6> //Lowest Heading Tag

<p>Lorem4</p> //Paragraph Tag, 4 digits

p*34 //34 paragraphs

<strong></strong> //To bold the content

<em></em> //To Emphasized(Italic by default which can be changed by CSS)

<br> //It is a self closing tag used to break the line {HTML ignores extra
space in program)

<hr> //Horizontal Rural [To draw a line]

<b>Bold</b> <i>Italic</i> //also used to BOLD and ITALIC the content (old,
not used)
-----------------------------------------------------------------------------------
----------------------------------------------

CTRL+ENTER //To jump into the new line


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

LINKS AND
IMAGES-----------------------------------------------------------------------------
------------------------------------

<a href="https://google.com">Go to google</a>


<a href="https://facebook.com">Go to Facebook</a>
<a href="https://google.com" target="_blank">Go to google</a> //To open link
in new TAB
<a href="/ritika.css" target="_blank">CSS</a> //For external links

<img src="ritika.jpg" alt="ERROR LOADING IMAGE"> //Image is not present HENCE


alt text is shown
<img src="https://www.w3schools.com/600x400/images/img_girl.jpg" alt="remote
image"> //we can also change the size of image(600x400)
Also, <img src="https://www.w3schools.com/images/img_girl.jpg" alt="remote
image" width="233" height="34"> //NOT RECOMENDED

TABLES AND
LISTS------------------------------------------------------------------------------
--------------------------------------------

--LISTS--

<ul> //unorderd list(bullets)


<li>This is first item of my unorderd list</li>
<li>This is second item of my unorderd list</li>
<li>This is third item of my unorderd list</li>
</ul>
<ol> //ordered list(1,2,3...serial wise)
<li>This is first item of my orderd list</li>
<li>This is second item of my orderd list</li>
<li>This is third item of my orderd list</li>
</ol>

<ol type="I"> //for roman no. serial list {also, i,a,A}


ul type="disc"> // {disc,square,circle}

--NESTED LIST--
<li>This is second item of my unorderd list</li>
<li>
<ul>
<li>Another one</li>
<li>Another two</li>
<li>Another three</li>
<li>Another four</li>
</ul>
</li>
<li>This is third item of my unorderd list</li>

--TABKLES--

<table>
<thead> //table heading
<tr> //rows
<th>Nmae</th>
<th>Employe ID</th>
<th>Employe Role</th>
</tr>
</thead>
<tbody> //table body
<tr>
<td>Ritika</td> //data
<td>142384</td>
<td>Programmer</td>
</tr>
<tr>
<td>Aman</td> //data
<td>142385</td>
<td>Data Scientist</td>
</tr>

<tr>
<td>Riya</td> //data
<td>142386</td>
<td>xyz</td>
</tr>

</tbody>
</table>

FORMS------------------------------------------------------------------------------
-----------------------------------------

<body>

<h2>This is a Form</h2>

<form action="backend.php">
<label for="name"> Name</label>
<div>
<input type="text" name="myName" id="name">
</div>
<br> //NOT RECOMENDED
<div>
Role: <input type="text" name="myRole">
</div>
<br>
<div>
Email: <input type="email" name="myEmail" id="">
</div>
<br>
<div>
Date: <input type="date" name="myDate">
</div>
<br>
<div>
Bonus: <input type="number" name="myNumber">
</div>
<br>
<div>
Are you eligible: <input type="checkbox"name="myCheckbox"checked>
</div>
<br>
<div>
Gender: MALE<input type="radio"name="myRadio"> FEMALE<input
type="radio"name="myRadio">
OTHER<input type="radio"name="myRadio">
</div>
<br>
<div>
Write about yourself:<br> <textarea name="myText" cols="30"
rows="10"></textarea>
</div>
<br>
<div>
<label for="car"> Car</label>
<select name="myCar" id="car">
<option value="Indica"selected> Indica</option>
<option value="swift"> Swift</option>
</select>
</div>
<br>
<div>
Submit: <input type="submit" value="Submit Now">
Reset: <input type="reset" value="Reset Now">
</div>
</form>

</body>

INLINE AND BLOCK


ELEMENTS---------------------------------------------------------------------------
-----------------------------
<p>this is a paragraph </p> <p>this is also a paragraph</p> //BLOCK
elements (take full width)
<span>this is a span </span> <span>this is also a span</span> //INLINE
elements (take only there width)
<li></li> //BLOCK element (used for list itmes)
<em></em> //INLINE element (used for emphasizing text)
<div></div> //BLOCK element (used for dividing a page into sections)
<img></img> //INLINE element (used for inserting images into web page)

IDs and
CLASSES----------------------------------------------------------------------------
------------------------------------
ID (Identifier)

<h3>IDs and CLASSES</h3>


<div id="mainBox" class="redBg blackBorder">
This is Mainbox
</div>

<!-- Emmet -->


<!-- . is for class and # is for id -->
<span class="redBg"></span>
<span id="mainSpan"></span>
<div class="redBg blacBorder anotherClass"></div>

<!-- emmet takes div tag as default -->


<div class="blackBaackground">

<!-- creating multiple elements using Emmet -->


<!-- span.myClass.myClass2.myClass3 + <tab> -->
<span class="myClass myClass2 myClass3"></span>

<!-- span.myClass.myClass2.myClass3*4 + enter (to print 4 similar elements


using emmet) -->
<span class="myClass myClass2 myClass3">first</span>
<span class="myClass myClass2 myClass3">second</span>
<span class="myClass myClass2 myClass3">third</span>
<span class="myClass myClass2 myClass3">fourth</span>

ENTITIES---------------------------------------------------------------------------
---------------------------------------------
&nbsp; //Non breaking space (used for extra space)
&lt; &gt; //LOWER and GREATER than (used to write <>) {Eg:- &lt;p&gt;
//<p>}
//MANY MORE available on internet [https://tools.w3cub.com/html-
entities]//

<div class="container">
<p>This is a paragraph</p>
</div>
<div class="container">
<p>This is another &nbsp;&nbsp;paragraph</p> //two space is used
<p>paragraph is written like this &lt;p&gt;</p> //<>
<p>pound is written like this &pound;</p> //pound symbol (£)
<p>copyright is written like this &copy;</p> //copyright symbol (©)
<p>this is written like this &rAarr;</p> //arrow symbol (⇛)
<p>Empty Character is written like this &#8203;</p> //Empty Character

</div>

SEMANTIC
TAGS-------------------------------------------------------------------------------
---------------------------------
These are some of the roughly 100 semantic elements available:
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<form>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>
<div>,<span> are non Semantic Elements

<h1>Semantic Elements</h1>
<details>
<summary>I have keys but no doors. I have space but no room. You can
enter but can't leave. What am I?</summary>
A Keyboard
</details>

___________________________________________________________________________________
_______________________________________________
CSS
===================================================================================
===============================================
~CSS gives style to raw HTML
~CSS stands for Cascading Style Sheet
~CSS is used to give style to our web pages
~CSS is used to make websites responsive
~HTML is used to structure a website
~CSS takes responsibility of design
------------------------------------------------------

CSS SYNTAX:- p { color : blue; } // p = Selector(WHERE), color =


Property(THIS), blue = Value(SET THIS VALUE) \\
-----------------------------------------------------------------------------------
------------------------------------------------

THREE WAYS TO ADD CSS TO THE MARKUP:-


//markup(HTML Code)
~Inline CSS-CSS is added to the elements dirctly using style attribute
~Internal CSS-CSS is kept inside the head tags in <style> tags
~External CSS-CSS is kept seperately inside the css style sheet
-----------------------------------------------------------------------------------
------------------------------------------------------

~INLINE CSS:- <body>


<h3>THIS IS CSS</h3>
<p style="color: red; background-color: yellow;">This will teach you
everything you need to know about HTML/CSS</p>
</body>

~INTERNAL CSS;-
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS</title>

<style>
p{
color:rgb(0, 128, 11);
background-color:beige !important;
}
</style>
<link rel="stylesheet" href="ritika.css">
</head>
<body>
<h3>THIS IS CSS</h3>
<!-- <p style="color: red; background-color: yellow;">This will teach you
everything you need to know about HTML/CSS</p> -->
<p>This will teach you everything you need to know about HTML/CSS</p>
</body>
</html>
---------------------------
p{
color: greenyellow
background-color:hotpink;
}
-----------------------------------------------------------------------------------
------------------------------------------------

WHAT IS A CSS SELECTOR:- p


~CSS selectors are used to find the element whose property will be set
~Selectors are used to target HTML elements
~Selectors make it easy for us to easily target single/multiple HTML elements
in the markup

TYPES OF BASIC CSS SELECTORS:-


~CSS Element Selector
~CSS Id Selector
~CSS Class Selector
~The CSS grouping Selector
-------------------------------------------
<title>CSS Selectors</title>
<style>
/* ELEMENT SELECTOR */
P{
border: 2px solid red;
}
/* ID SELECTOR */
#firstPara{
color: green;
}
/* CLASS SELECTOR */
.bgBlue{
color: blue;
background-color: yellow;
}

/* comment in css {CTRL+/} */


/* GROUPING SELECTOR */
footer, span{
background-color: pink;
}
</style>
</head>
<body>
<h3>CSS Selectors</h3>
<p id="firstPara">This is a simple paragraph to demonstrate css selectors</p>
<p id="secondPara" class="redElement bgBlue">This is a another paragraph to
demonstrate css selectors</p>
<div>
<p>This is a yet another paragraph inside div to demonstrate css
selectors</p>
<span>This is span</span>
</div>
<footer>This is footer</footer>
</body>
-----------------------------------------------------------------------------------
---------------------------------------

DEVELOPER TOOLS:- {chrome browser> right click on content> select inspect}

<title>DEVELEPOR TOOLS</title>
<style>
p{
color: purple;
font-style: italic;
background-color: rosybrown;
}
.bgYellow{
background-color: yellow;
}
</style>
</head>
<body>
<h3 class="bgYellow">Developer Tools</h3>
<p>This is a tutorial for Chrome web developer tools</p>
</body>
-----------------------------------------------------------------------------------
-----------------------------------------

CSS FONTS:-

WEB SAFE FONTS: These are fonts that are pre-installed by many operating systems.
While not all systems have the same fonts installed, you can use a web
safe font stack to chooose
several fonts that look similar, and are installed on the various
systems that you want to support.
If you want to use ones pre-installed, as of CSS3, you can use Web
Fonts

----------------------------
<title>CSS FONTS</title>
<!-- <link rel="preconnect" href="https://fonts.googleapis.com"> -->
<style>
p{
font-family:'Open Sans', sans-serif;
font-size: 33px; /* 1/96th of an inch*/
line-height: 0.3em; /*em is parent font siza ka multiplier*/
font-weight: ;
}

span{
font-weight: bold;
font-style: italic;
}
</style>
</head>
<body>
<h3>Css F onts</h3>
<p>Lets play with <span>FONTS</span>. It is very exciting</p>
</body>
-----------------------------------------------------------------------------------
-----------------------------------------------------

COLORS IN CSS:-

<title>COLORS IN CSS</title>
<style>
/* THREE TYPES TO ADD COLOR */
#firstPara{
color :blueviolet; /*color by name*/
}
#secondPara{
color :#9f2a78; /*color by hex value(not much recommended)*/
}
#thirdPara{
color :rgb(43, 153, 89); /*color by rgb value(recommended)*/
background-color: black;
}
</style>
</head>
<body>
<h2>This is my first box</h2>
<p id="firstPara">This is a paragraph from first box</p>

<h2>This is my first box</h2>


<p id="secondPara">This is a paragraph from second box</p>

<h2>This is my first box</h2>


<p id="thirdPara">This is a paragraph from third box</p>

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

HEIGHT, WIDTH, BORDERS AND BACKGROUND:-

<title>Height, Width, Borders and Backgrounds</title>


<style>
#firstPara{
background-color: red;
height: 100px;
width: 455px;
border: 4px solid green;
/* border-width: 4px;
border-color: green;
border-style: solid; */
border-radius: 11px;
}

#secondPara{
background-color: rgb(244, 215, 0);
height: 100px;
width: 455px;
border-top: 4px solid blue;
border-bottom: 4px solid black;
border-left: 4px solid purple;
border-right: 4px solid darkred;
border-top-left-radius: 4px;
border-top-right-radius: 5px;
border-bottom-left-radius: 16px;
border-bottom-right-radius: 25px;
}

#thirdPara{
height: 400px;
width: 455px;
background-image:url('https://source.unsplash.com/random/200x200?
sig=1');
border: 3px solid maroon;
background-repeat: no-repeat;
/* background-repeat: repeat-x;
background-repeat: repeat-y; */
background-position: center center;
/*(bottom left);(12px 15px);(top top);(top center)
(top left);..so on*/
}
</style>
</head>
<body>
<h3>This is heading</h3>
<p id="firstPara">This is a paragraph</p>

<h3>This is second heading</h3>


<p id="secondPara">This is my second paragraph</p>

<h3>This is third heading</h3>


<p id="thirdPara">This is my third paragraph</p>
</body>
-----------------------------------------------------------------------------------
------

BOX MODEL:-
(PADDING & MARGING)

<title>BOX MODEL</title>
<style>
* {
box-sizing: border-box;/*will adjust according to its width*/
margin: 0; /*we can set by default till we override it*/
padding: 0;
}
body{
background-color: rgb(210, 244, 242);
}
.container{
background-color: rgb(161, 239, 230);
border: 3px solid rgb(6, 31, 226);

/* we can set padding & margin for top,bottom,left,right like this */


/* padding-top: 50px;
padding-bottom: 50px;
padding-left: 50px;
padding-right: 50px; */

/* padding/margin: 20px 30px 20px 30px; */


/* padding/margin= top right bottom left; */

/* padding/margin: y(top/bottom) x(left/right); */


padding: 24px 14px;
margin: 15px 19px;
border-radius: 23px;
width: 300px;

}
</style>
</head>
<body>
<div class="container">
<h3>This is my heading</h3>
<p id="first">Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Modi rerum odio placeat impedit maxime corrupti distinctio sed ratione nulla eum?
</p>
</div>

<div class="container">
<h3>This is my heading</h3>
<p id="second">Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Modi rerum odio placeat impedit maxime corrupti distinctio sed ratione nulla eum?
</p>
</div>

<div class="container">
<h3>This is my heading</h3>
<p id="third">Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Modi rerum odio placeat impedit maxime corrupti distinctio sed ratione nulla eum?
</p>
</div>
</body>
-----------------------------------------------------------------------------------
---------------------------------------

ALIGNMENT:-
(FLOAT & CLEAR are not much recommended)

<title>ALIGNMENT</title>
<link href="https://fonts.googleapis.com/css2?
family=Open+Sans:ital,wght@1,600&display=swap" rel="stylesheet">
<style>
* {
box-sizing: border-box;
}

body {
font-family: 'Open Sans', sans-serif;
}

.container {
width: 900px;
border: 3px solid black;
margin: auto;
background-color: rgb(188, 236, 92);
}

.item {
border: 2px solid red;
margin: 12px 2px;
padding: 12px 3px;
background: rgb(218, 246, 141);
}

#fruit {
float: left;
width: 48%;
}

#computer {
float: right;
width: 48%;
}

#stationary {
/* float: left; */
width: 100%;
clear: both;
/*clear removes overlapping of float*/
/*both means left and right*/
}

p, h3 {
/* text-align: right;
text-align: left;
text-align: center; (only last command will work) */
text-align: justify;
}

h1 {
margin: auto;
width: 350px;
}
</style>
</head>

<body>
<div class="container">
<h1>Welcome To My Store</h1>
<div id="fruit" class="item">
<h3>Fruit</h3>
<p id="fruitpara" class="para">Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Sequi, animi! Non
eaque repellendus vero molestiae dolorem dolorum possimus fugit
facere et earum, eos nostrum illum, quod
nobis, exercitationem qui fuga! Lorem ipsum, dolor sit amet
consectetur adipisicing elit. Aut,
laudantium.</p>
</div>

<div id="computer" class="item">


<h3>Computer</h3>
<p id="copara" class="para">Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Sequi, animi! Non
eaque repellendus vero molestiae dolorem dolorum possimus fugit
facere et earum, eos nostrum illum, quod
nobis, exercitationem qui fuga! Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Id, explicabo?
</p>
</div>
<div id="stationary" class="item">
<h3>Stationary</h3>
<p id="stationarypara" class="para">Lorem ipsum dolor sit amet
consectetur, adipisicing elit. Sequi, animi!
Non eaque repellendus vero molestiae dolorem dolorum possimus fugit
facere et earum, eos nostrum illum,
quod nobis, exercitationem qui fuga!</p>
</div>

<div id="glasses" class="item">


<h3>Glasses</h3>
<p id="glassespara" class="para">Lorem ipsum dolor sit amet
consectetur, adipisicing elit. Sequi, animi! Non
eaque repellendus vero molestiae dolorem dolorum possimus fugit
facere et earum, eos nostrum illum, quod
nobis, exercitationem qui fuga!</p>
</div>
</div>
</body>
-----------------------------------------------------------------------------------
----------------------------

PSEUDO SELECTORS & MORE DESIGNING:-

<title>PSEUDO SELECTORS & MORE DESIGNING</title>


<style>
.container{
border: 2px solid red;
background-color: rgb(185, 250, 228);
padding: 34px;
margin: 34px auto;
width: 666px;
}

a{
text-decoration: none;
color: black;
}

a:hover{
color: rgb(246, 10, 10);
background-color:bisque
}
a:visited{
background-color: rgb(116, 252, 12);
}
a:active{
background-color: black;
}
.btn{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
background-color: pink;
padding: 6px;
margin: auto;
border: none;
cursor: pointer;
font-size: 13px;
border-radius: 4px;
}
.btn:hover{
color: blue;
background-color: aqua;
border: 2px solid black;
}

</style>
</head>
<body>
<div class="container" id="cont1">
<h3>This is my heading </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum
velit eveniet voluptatibus illum minus fuga earum deleniti nobis, perferendis
ipsum, eius porro molestiae iure suscipit, id esse repellat repellendus sunt! Id
vitae facere fuga.</p>
<a href="https://facebook.com"class="btn">Read more</a>
<button class="btn">Contact us</button>
</div>
</body>
-----------------------------------------------------------------------------------
-----------------------------------------

NAVIGATION:-

<title>NAVIGATION</title>
<style>
.navbar{
background-color: black;
border-radius: 20px;
}
.navbar ul{
overflow: auto;
}
.navbar li{
float: left;
list-style: none;
margin: 13px 20px;
}
.navbar li a:hover{
color: red;
}
.navbar li a{
padding: 3px 3px;
text-decoration: none;
color: yellow;
}
.search{
float: right;
color: azure;
padding: 7ps 7px;
}
.navbar input{
border: 2px solid black;
border-radius: 4px;
padding: 5px;
width: 190px;
}
</style>
</head>
<body>
<header>
<nav class="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
<div class="search">
<input type="text" name="search" id="search"
placeholder="Search this website">
</div>
</ul>
</nav>
</header>
</body
-----------------------------------------------------------------------------------
----------------------------------------

DISPLAY PROPERTY:-

<title>DISPLAY PROPERTY</title>
<style>
*{
box-sizing: border-box;
}
header{
border: 2px solid black;
margin: auto;
width: 10%;
}
img{
margin: auto;
display: block;
width: 234px;
}
h3{
text-align: center;
font-family: cursive;
margin: 0px;
}
.box{
border: 2px solid blue;
background-color: skyblue;
margin: 4px;
padding: 14px;
display: inline-block;
width: 30%;
box-sizing: border-box;
display: inline-block;
}
.container{
margin: auto;
width: 1200;
}
</style>
</head>
<body>
<header class="top">
<img src="https://th.bing.com/th/id/R.8d1981a"alt="">
<h3>Welcome to Ritika's World</h3>
</header>
<div class="container">
<div class="box">
<h4 class="heading">Heading</h4>
<p>Lorem ipsum dolor </p>
</div>
<div class="box">
<h4 class="heading">Heading</h4>
<p>Lorem ipsum dolor </p>
</div>
<div class="box">
<h4 class="heading">Heading</h4>
<p>Lorem ipsum dolor </p>
</div>
</div>
</body>
-----------------------------------------------------------------------------------
-----------------------------------------------

POSITIONS:-

<title>Position</title>
<style>
.container{
border: 2px solid black;
background-color: tan;
height: 1200px;
}
/*CSS position: static(default) ,absolute ,relative ,fixed ,sticky */
.box{
display: inline-block;
border: 2px solid black;
width: 150px;
height: 150px;
margin: 2px;
}
#box3{
/* position: relative; */
/*relative to its normal position & will leave a gap at its normal position*/
/* absolute:relative to the position to its first parent*/
/* top: 34px;
left: 34px; */

/* fixed: Positions the element relative to the browser window


position: fixed;
right: 4px;
bottom: 2px; */

/* sticky: */
position: sticky;
top: 3px;
}
</style>
</head>
<body>
<div class="container">
<div class="box" id="box1">1</div>
<div class="box" id="box2">2</div>
<div class="box" id="box3">Chat with us</div>
<div class="box" id="box4">4</div>
</div>
</body>
-----------------------------------------------------------------------------------
-------------------------------------------

You might also like