Lab Session: 1: Client Side vs. Server Side

Lab Session: 1
Lecture Outline:
Introduction to Course:
We will cover
HTML
CSS
PHP
AJAX
Tool:
Net beans
Sublime
The Web Browser (Responsiveness)
Chrome
IE
Firefox
Opera
Static v Dynamic Website Design
A dynamic site is one that is written using a server-side scripting language such as PHP,
ASP. In such a site the content is called in by the scripting language from other files or from
a database depending on actions taken by the user.
Client Side vs. Server Side
Website scripts run in one of two places – the client side, also called the front-end, or the
server side, also called the back-end. The client of a website refers to the web browser that
is viewing it. The server of a website is, of course, the server that hosts it.
Most web coding languages are designed to run on either the server side or the client side.
1
What is HTML?
HTML is the standard markup language for creating Web pages.
HTML tags label pieces of content such as "heading", "paragraph", "table", and so on.
HTML stands for Hypertext Markup Language.
A Simple HTML Document
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>

<p>My first paragraph.</p>
</body>
</html>
HTML Headings
<h1> defines the most important heading.

<h6> defines the least important heading.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
HTML Paragraphs
The HTML <p> element defines a paragraph:

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Styles
2
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>
HTML Formatting Elements
HTML <b> and <strong> Elements

<b>This text is bold</b>
HTML <i> and <em> Elements

<i>This text is italic</i>
HTML Comment Tags


Background Color
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.
</p>
HTML Links - Syntax
<a href="https://www.google.com/">Click here </a>
HTML Image
<img src="pic_trulli.jpg" alt="Trulli" width="500" height="333">

HTML Lists
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>An Unordered HTML List</h2>
<ul>
3
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>An Ordered HTML List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
4
HTML Table
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
5
}
</style>
</head>
<body>
<h2>HTML Table</h2>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
6
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
</body>
</html>
HTML File Paths
7
Path Description
<img src="picture.jpg"> picture.jpg is located in the same
folder as the current page
<img src="images/picture.jpg"> picture.jpg is located in the images
folder in the current folder
<img src="/images/picture.jpg"> picture.jpg is located in the images
folder at the root of the current web
<img src="../picture.jpg"> picture.jpg is located in the folder
one level up from the current folder
HTML Table
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
</style>
</head>
<body>
<h2>HTML Table</h2>
8
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
9
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
</body>
</html>
CSS ( Cascading Style Sheets )
10
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p{
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>My First CSS Example</h1>

</body>
</html>
Second Example:
11
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: purple;
}
.hello
{
color:green;
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<div class="hello">This is another paragraph.</div>
</body>
</html>
12

Lab Session: 1: Client Side vs. Server Side

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lab Session: 1: Client Side vs. Server Side

Uploaded by

Copyright:

Available Formats

Lab Session: 1

Static v Dynamic Website Design

Client Side vs. Server Side

<h1>My First Heading</h1>

<h1> defines the most important heading.

The HTML <p> element defines a paragraph:

HTML <b> and <strong> Elements

HTML <i> and <em> Elements

HTML Comment Tags

<img src="pic_trulli.jpg" alt="Trulli" width="500" height="333">

<h2>An Ordered HTML List</h2>

CSS ( Cascading Style Sheets )

<h1>My First CSS Example</h1>

You might also like