Scribd
Upload
71 views

Doctype HTML Heading Title Title Heading Body h2 h2 P P Img A A

The document summarizes the basic structure and components of an HTML document. It discusses HTML tags like headings, paragraphs, images, links, lists, tables, forms, and how they are defined using opening and closing tag pairs. It also covers some common HTML attributes that can be included in tags like src, alt, href to specify URLs or open links in new tabs. CSS is introduced as a language used to style and lay out HTML elements on the page.

Uploaded by

Imran Ali
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
71 views

Doctype HTML Heading Title Title Heading Body h2 h2 P P Img A A

The document summarizes the basic structure and components of an HTML document. It discusses HTML tags like headings, paragraphs, images, links, lists, tables, forms, and how they are defined using opening and closing tag pairs. It also covers some common HTML attributes that can be included in tags like src, alt, href to specify URLs or open links in new tabs. CSS is introduced as a language used to style and lay out HTML elements on the page.

Uploaded by

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

• Web strcture consist of : WWW, Web Browser, Web Pages

• URLs (Uniform Resource Locators), Hypertext Markup Language (HTML), and Hypertext
Transfer Protocol (HTTP), Cascading Style Sheets(CSS)
• Tag Pairs: Opening tag (<tag>) and a closing tag (</tag>), anything b/w called content.
• Attributes: Tags can have attributes like "src" for images
• Few tags only have start, Anything within the start/end tag is called content

HTML5 Document

Attributes=2

<img src= "logo.gif" alt= "logo" />

<!DOCTYPE html>
<html>
<heading>
<title>
Html Structure
</title>
</heading>

<body>

<h2>HTML Images are following</h2>


<p>HTML images are defined with the img tag are there:</p>

<img src= "logo.gif" alt= "logo" />


<a href="https://www.facebook.com" target="_blank">Facebook</a>
“_self”
target="_blank (new page open)
<h2 id=“section"> Section
“_self” 4 </h2>
(link will page on same page)

<a href="#section"> Jump to Section </a>

<table border="solid">

<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
<li>First item</li>

<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
Ordered and Unordered List
<ul>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>

<form action="/action_page.php" method="post">


<fieldset>
<legend>Personal Info:</legend>
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" value="Talha"><br>
<label for="email"></label>Email: </label>
<input type="text" name="email" required><br>
<label for="country"></label>Country: </label>
<input type="text" name="country" value="PAK" readonly><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>

<a href="https://www.w3schools.com">Visit W3Schools</a>


<br>
<img src="https://media.istockphoto.com/id/104731717/photo/luxury-
resort.jpg?s=612x612&w=0&k=20&c=cODMSPbYyrn1FHake1xYz9M8r15iOfGz9Aosy9Db7mI="
style="height:50px;">
</body>
</html>
H1…..h6 Heading tags

action: Specifies the URL where the form data will be sent when the user submits the form.

method: Determines how the form data is sent to the server. Common methods are GET and POST.

Form fields: Various input elements like text fields, radio buttons, checkboxes, etc., go within the
form tag.
Name - ImranAli Registration - SP20-BCS-013 Web Theory – Assignment 01

Style attributes style="”,””; Tags With Attributes brief

color: blue alt="Girl with a jacket" Alt text will displd, when img not loads

font-size: 18px <a href="https://www.facebook.com" To open link


Facebook</a>
bgcolor=#f0f0f0 <img src= "logo.gif" alt= "logo" /> Absolute URL - Links to an external image
that is hosted on another website
width="200" height="150" <img src= "google/image.png" alt= "logo" /> Relative URL - Links to an image that is
hosted within the website.
border=“1" target="_blank"> Attribute for btn, image, link etc will open
on other blank page
text-align=right; center; left ; <h2 id=“section"> Section 4 </h2> Move to other section on click
justify
<a href="#section"> Jump to Section </a>
margin:auto;
gap:20px;
font-family:verdana
• Paragraph Tags

<address>
Box 564, Disneyland, USA<br>
</address>
<code> Hellow World </code> Defines a piece of computer code
<mark>milk</mark> Highlite with yellow text
<progress id="file" value="32" max="100"> 32% </progress> Progress of task with loading icon
<p> <small>This is some smaller text.</small> </p> Defines a smaller text
<strong> IMP text, Bold
<br> Empty line
&emsp; Four spaces gap
<section>
<div class="myDiv"> div
<fieldset>
<legend>Personal Info:</legend>
</fieldset>
<li>First item</li> bullet
<ol> Ordered list. i.e 1,2,3
<li>First item</li>
</ol>
<ul> UnOrdered list. i.e bullets
<li>Red</li>
</ul>
<iframe src="https://www.w3schools.com" title="W3Schools Free Any website small frame
Online Web Tutorials">
</iframe>
<video width="320" height="240" controls> video
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<audio controls> audio
<source src="horse.mp3" type="audio/mpeg">
</audio>
<figure> Image with figure caption below
<img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
<figcaption>Fig.1 - Trulli, Puglia, Italy</figcaption>
</figure>
<details>
<summary>Epcot Center</summary>
<p>click to open hidden text<p>
</details>
• Form Tags

<form action="/action_page.php" method="post">


</form>
<label for="name">Full Name:</label>
<input type="text" id="fname" name="fname">
required Mandatoty input
<input type="email" id="email" name="email" required > email
<input type="date" id="birthday" name="birthday"><br><br> date
<input type="password" id="pwd" name="pwd"><br><br> password
required Mandatoty input
<input type="email" id="email" name="email" required > email
<input type="date" id="birthday" name="birthday"><br><br> date
<input type="password" id="pwd" name="pwd"><br><br> password
<input type="radio" id="html" name="fav_language" Radio button
value="HTML">
<label for="html">HTML</label><br>
<input type="checkbox" id="vehicle1" name="vehicle1" Check boxes
value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<optgroup label="Swedish Cars"> List of items
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
<input type="typeName" id="favcolor" name="favcolor" color, number, file,
value="#ff0000"> image,month,datetime, week, time, tel,
url
<input type="range" id="vol" name="vol" min="0" max="50"> Range with icon
input type="submit" value="Submit"> submit
<input type="button" onclick="alert('Hello World!')" value="Click Alert on btn click
Me!">
<input type="reset" value="Reset"> Reset form btn
• Table

<table border="solid"> <td>Data 2</td>


<tr> </tr>
<th>Header 1</th> </table>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>

CSS *{ h1, h2, h3 {


Type Selector
color: #000000; color: #36C;
} }

Grouping Selector

h1.black { .black { <head>

color: #000000; color: #000000; <link rel="stylesheet" href="Stylesheet.css" media=" all" />

} } </head>
` Class Selector External CSS importing
Descendent Selector, Child Selector,

Attribute Selector.

Inline, External, Internal


.container {
<div class="container">
border: 5px solid rgb(0, 0, 0);
<div class="item">
background-color: rgb(245 197 221);
<p>1</p>
}
</div>
.item {
<div class="item">
border: 5px solid rgb(0, 0, 0);
<p>2</p>
background-color: rgb(141, 178, 226);
</div>
margin: 10px;
<div class="item">
padding: 20px;
<p>3</p>
height: 100px;
</div>
width: 100px;
<div class="item">
font-weight: bold;
<p>4</p>
font-size: 45px;
</div>
}
</div>
#intro {
font-size: 18px;
h1#intro {
color: blue; <h1 id=”intro”> I’m Intro
font-size: 18px;
</h1>
OR font-weight: bold;
color: blue;
Now only intro style will be
}
} apply to this heading

ID Selector
The ID selector in CSS is used to select and style a single unique element on a web page.

Flex. Parent: Flex-Container , Child:Flex-Items

Flexbox Elements

Flex Container Flex Item

align-content align-self

align-items order

Display flex-basis

flex-direction flex-grow

flex-flow flex-shrink

flex-wrap flex

justify-content
Bootstrap
<!-- Link to Bootstrap CSS via CDN -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- Optional: Link to Bootstrap JavaScript and jQuery via CDN -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

• Margins: m-0 ……..m-5 (4, 8, 16, 24, 48)


• Padding:p-0………..p-5
• border border-dark m-5 p-5"> m-5 p-5</div>

Text Color Classess Background clr Classes


Border color classes
<span class="border border-
primary"></span>
Border Classes
Color Classes

Color Classes

Text Alignment Classes:


Spacing Classes:

# is value of pixel

Bootstrap provides three different types containers:

• .container, which has a max-width at each responsive breakpoint.

• .container-fluid, which has 100% width at all breakpoints.

• .container-{breakpoint}, which has 100% width until the specified breakpoint.

Bootstrap Grid System:

12 columns available per row.


JavaScript
• For Output

console.log( “Hello, World!” );

let num = 10;


let str = "5";

console.log(num + str); // Output: "105" (coerced string)

let num = 10;


let str = "5";

let sum = num + Number(str); // Convert str to a number

console.log(sum); // Output: 15

, let: var limited to the block of code where thy are defined.
Control Flow and Conditionals

Operators and Expressions let hour = 14;


let x = 10; if (hour < 12) {
let y = 5; console.log("Good morning!");
console.log(x + y); // Output: 15 } else if (hour < 18) {
console.log(`Sum: ${x + y}`); console.log("Good afternoon!");

} else {
Loops and Iteration
console.log("Good evening!");
for (let i = 0; i < 5; i++) {
} else{
console.log(`Iteration ${i}`);
console.log("Good evening!");
}
}

Functions Objects
function greet(name) { let person = {
return `Hello, ${name}!`; firstName: "Alice",
} lastName: "Johnson",
console.log(greet("Bob")); age: 30,

greet: function() {

Arrays return `Hello, ${this.firstName}!`;

let colors = ["red", "green", "blue"]; }

colors.push("yellow"); };

console.log(colors); console.log(person.greet());

• In HTML, JavaScript code is inserted between <script> and </script> tags.


• Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both.

• Scripts can also be placed in external files:

Method Name Syntax in JavaScript Purpose

innerHTML element.innerHTML = content Sets or retrieves the HTML content within an


element.

document.write document.write(content)` Writes content directly to the HTML


document. Used for testing and simple demos

window.alert window.alert(message)` Displays an alert dialog with a message to the


user.

Method Name Syntax in JavaScript Purpose


window.prompt window.prompt(message, defaultValue) Displays a dialog box for user input.
Used for simple input gathering.

window.confirm window.confirm(message) Displays a confirmation dialog with


OK and Cancel buttons.

window.open window.open(url, windowName, features) Opens a new browser window or tab


with specified URL and options.

window.close window.close() Closes the current browser window


or tab (if allowed).

Method Name Syntax in JavaScript Purpose

window.scrollTo window.scrollTo(x, y) Scrolls the window to a specific


position on the page.

window.location window.location.href = newURL Manages the current URL and


performs navigation.

String.prototype.length “Hello".length Returns the length of a string.

String.prototype.indexOf "Hello".indexOf("lo") Returns the index of the first


occurrence of a substring.

String.prototype.slice "Hello".slice(1, 3)` Extracts a portion of a string.

String.prototype.replace "Hello".replace("H", "J") Replaces a substring with


another substring.
Method Name Syntax in JavaScript Purpose

String.prototype.toUpperCase `"hello".toUpperCase() Converts a string to uppercase.

String.prototype.toLowerCase `"Hello".toLowerCase() Converts a string to lowercase.

String.prototype.trim “Hello".trim()` Removes whitespace from the


beginning and end of a string.

Laravel
For unexpected errors
php artisan optimize

php artisan cache:clear

Open Xampp, Run mySQL

Open VS Code -> Terminal -> Navigate to the directory

cd c:\xampp\htdocs

Create Project

composer create-project --prefer-dist laravel/laravel webProject

Open Project

cd c:\xampp\htdocs\webProject

Create Database of the same name of project “webProject” in Apache Server

Migrate

php artisan migrate

Run server

php artisan serve

• Creating model

php artisan make:model Vehicle -m

• Creating Controller

php artisan make:controller vehicleController


• make changes in the schema of model

php artisan migrate

• Dropping All coloums

php artisan migrate:fresh

or: php artisan migrate:reset

Migration

$table->id();
$table->string('regNo',7);
$table->integer('engineCapacity');
$table->double('costPerHour',10);
$table->unsignedBigInteger('company_id');
$table->foreign('company_id')->references('id')->on('companies')-
>onDelete('cascade'); //cascade delete all records

• Creating, Reading, Updating, Deleting

//Creating
public function create() {
return view ("vehicle/create");
}
public function store(Request $request) {
$Vehicle = new vehicle; // Must import the Model file: use
App\Models\guest;
$Vehicle->id = $request->get('id');
$Vehicle->save();
return redirect('vehicle/create')->with('status', 'id'.$Vehicle->id.'
added Successfully!');
}

//read
public function read() {
$vehicles = vehicle::all();
return view('vehicle/read')->with(['vehicles' => $vehicles]);
}

public function delete($id) {


// Delete the row pointed to by this id
Vehicle::destroy($id);
return redirect('vehicle/read')
->with('status', 'ID'.$id.' deleted Successfully!');
// --------------------------------------
}
//edit
public function edit($id) {
$vehicles = vehicle::find($id);
return view('vehicle/update')->with(['vehicles' => $vehicles
}

//update
public function update(Request $request, $id) {
$vehicle = vehicle::find($id);
$vehicle->id = $request->get('id');
$vehicle->save();

return redirect('vehicle/read')->with('status', 'ID '.$id.' updated


Successfully!');
}

• Web.PHP

//create
Route::get('vehicle/create', [vehicleController::class,'create'])-
>name('vehicle.create');
Route::get('vehicle/store', [vehicleController::class,'store'])-
>name('vehicle.store');
//delete
Route::get('vehicle/delete/{id}', [vehicleController::class,'delete'])-
>name('vehicle.delete');
//edit
Route::get('vehicle/edit/{id}', [vehicleController::class,'edit'])-
>name('vehicle.edit');
//update
Route::post('vehicle/update/{id}', [vehicleController::class,'update'])-
>name('vehicle.update');

resources -> views -> vehicle

Create:

<form action="{{ route ('vehicle.store') }}" method="post">


@csrf

Read

@foreach ($vehicles as $vehicle)


{{$vehicle->regNo}}
@endforeach
Relationship

Vehicle Model

public function company()


{
return $this->belongsTo(company::class); //student belongs to departent
1to1 relatio
}

Company model

public function vehicles()


{
return $this->hasMany(Vehicle::class);
}

File Upload

public function store(Request $request)


{
$request->validate([
'file' => 'required|mimes:pdf,xlx,csv|max:2048',
]);

$fileName = time().'.'.$request->file->extension();

//$request->file->move(public_path('uploads'), $fileName);
$request->file->storeAs('uploads', $fileName);
//....................................................
$fileWriter = new filing;
$fileWriter->fileName = $fileName;
// $fileWriter->filePath = Storage::putFilesAs($fileName);
// $fileWriter->filePath = 'C:\xampp\htdocs\SP20-BCS-
013\storage\app\uploads\\'; or
$fileWriter->filePath = storage_path('app\uploads\\'.$fileName);
//C:\xampp\htdocs\SP20-BCS-013\storage\app\uploads
$fileWriter->save();
//....................................................
// return "File has been Uploaded Successfully!";
return back()->with('message_sent', 'File has been Uploaded
Successfully!')->with('file', $fileName);
}

Q1. What is DataTable in Laravel?


Datatables is basically jQuery plugins that allows you to add advanced interaction controls to
your HTML tables data. Datatables also provide ajax for data searching and getting. you can
give very quick layout for search and sorting using Datatables. You can also implement
Datatables in your laravel application.
Q2. What is JQuery?
jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.

You might also like