Web Programming - Facultu of tourism · 2018. 8. 30. · WWW The World Wide Web (WWW) is an...

Web ProgrammingDr Ahmed A. Eltahawy

Short Bio.

Bachelor Computer Science.

Suez Canal University

Master Computer Science.

Ain Shams University

PhD. Medical Imaging.

University of Waterloo, Canada.

http://ahmedeltahawy.weebly.com/

https://www.facebook.com/ahmed.eltahawy.9

https://www.linkedin.com/in/ahmed-othman-eltahawy-46294b42?trk=hp-identity-name

https://www.researchgate.net/profile/Ahmed_Othman4?ev=hdr_xprf&_sg=LOjucimGfridyHKI3_HXDRnaNorlYLuoV9mz8jepjD5VyiH9Qdv3EbS4qwEPwhKT

mailto:[email protected]?subject=

Course Content

HTML

CSS

Java Script

PHP

Web Database

WWWThe World Wide Web (WWW) is an information space where documents and other web resources are located

Web is identified by URLs,

Web interlinked by hypertext links,

Web can be accessed via the Internet.

Invented by English scientist Tim Berners-Lee in 1989.

He wrote the first web browser in 1990

URl

Hyperlink

Web Design vs web development

Web Design The customer-facing part of

the website Layout

how the page looks Static

Photoshop HTML CSS

Javascript

Web development The back-end of the website

Programming interactions on the pages

Action Dynamic

HTML PHP

Python

Web Design- Selected steps for perfect web designing

1.Put your thoughts on paper first

2.Start draw what you think

3.Add a grid: for layout

4.Choose your typography: font

5.Select your Color theme

6. Divide the layout: Each section in your site needs to tell a story.

Web Design

1.What could be a part of the website layout:

1.Text: In what container: Text box, Label ,Combo

2.Button

3.Image

4.Video

5.Link

HTML: Hyper Text Markup Language

HTML

A markup language is a set of markup tags

described by HTML tags

Each HTML tag describes different document content

HTML Editor

1.Open your editor

2.write your HTML code

3.Save as .HTML

4.Open from browser

HTML

HTML tags are the hidden keywords within a web page

Define how the browser must format and display the content

Most tags must have two parts, an opening and a closing part

HTML Tags<tagname>content</tagname>

HTML tags normally come in pairs like <p> and </p>

The first tag in a pair is the start tag

The second tag is the end tag

The end tag is written like the start tag, but with a slash before the tag name

HTMLThe DOCTYPE declaration defines the document type to be HTML

The text between <html> and </html> describes an HTML document

The text between <head> and </head> provides information about the document

The text between <title> and </title> provides a title for the document

The text between <body> and </body> describes the visible page content

The text between <h1> and </h1> describes a heading

The text between <p> and </p> describes a paragraph

HTML StructureHTML Documents

All HTML documents must start with a type declaration:

<!DOCTYPE html>.

The HTML document itself begins with:

<html> and ends with </html>.

The visible part of the HTML document is between:

<body> and </body>.

HTML ElementsHTML Headings

HTML headings are defined with the <h1> to <h6> tags:

<h1>This is a heading</h1>



H1

H6

ParagraphHTML Paragraphs

HTML paragraphs are defined with the

<p> text </p> (ignore spacing or new line)

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<br> new line

<pre> </pre> specify with the same formatting

HTML Attributes Lang Attribute

The document language can be declared in the <html> tag.

The language is declared in the lang attribute.

<!DOCTYPE html> <html lang="en-US">

<body> <h1>My First Heading</h1>

<p>My first paragraph.</p> </body> </html>

HTML Attributes Title Attribute

HTML paragraphs are defined with the <p> tag.

In this example, the <p> element has a title attribute. The value of the attribute is “Paragraph title":

<!DOCTYPE html> <html lang="en-US">

<body> <h1>My First Heading</h1>

<p title=“Paragraph title”>My first paragraph.</p>

</body> </html>

HTML Attributes Quote Attribute

Double style quotes are the most common in HTML, but

single style can also be used.

When used both:

<p>”This is ‘single’”

HTML Attributes Quote Attribute

<b>bold</>

<I>Italic</I>

<U>underline<\u>

<hr> Horizontal line

HTML Attributes HTML Styles

style=“property:value;”

style="color:blue;"

style=“background-color:lightgrey;"

style=“font-family:verdana;"

style=“font-size:300%;"

style="text-align:center;"

<!DOCTYPE html> <html>

<body>

<h2 style="color:red;">I am red</h2>

<h2 style="color:blue;">I am blue</h2>

</body> </html>

Ref

https://en.wikipedia.org/wiki/World_Wide_Web

http://www.purelybranded.com/insights/web-design-or-web-development-whats-the-difference/

http://www.w3schools.com/html/html_intro.asp






Misr International University (MIU) School Of Computer Science

HTML-Comments


<body>

 <p>This is a paragraph.</p>



</body> </html>

To write a comment inside your HTML code:

What is the output of:

HTML-Comments


<body>



</body> </html>

What is the output of:

HTML-Links

The link in HTML is performed as:

Example:

<a href="url">link text</a>

Click here

Open this

<a href=“google.ca”>Open Google</a>

HTML-Links- ColorsWhat is the output:

What is the output:

<a href=“http://www.facebook.com”>Open Facebook now</a>

<a href=“http://www.facebook.com”>Open Facebook </a>now

HTML-Links- Proprieties

<a href=“http://www.facebook.com” target=“_blank”>Open Facebook </a>

HTML-imagesPut an image inside your web using:

<img src="url" alt=“some_text">

url: the location of the image (your computer or another website)

alt: Text that appear if image not available or could not be appear

<img src="2.png" alt="appear if image not available">

HTML-images

You can use image from another website:

<img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">

Control the size of the image

<img src="url" alt=“some_text" width="128" height="128">

http://W3Schools.com

HTML-images Float style

Style:: Float: Direct the location of the image left or right

<img src="url" alt=“some_text" width="128" height="128" style="float:right;">

<img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com"style="float:right;">

http://W3Schools.com

HTML-images image as links

<a href=“http://www.facebook.com”> <img src="2.png" alt="appear if image not available">

</a>

The image location link opened when image clicked

HTML-images image as links

<a href=“http://www.facebook.com”> <img src="2.png" alt="appear if image not available">

</a>

<a href=“http://www.facebook.com”> <img src="2.png" Facebook alt="appear if image not available">

</a>

What is the output:

Ref








HTML-table

Start with <table> and end with </table>

<tr> </tr> for each row:

<th>text</th> : the header

<td></td> for table data (column)

<caption>Monthly savings</caption>

<table style="width:100%"> <tr>

<td>text</td> <td>text</td> <td>50</td>

</tr> <tr>

<td>text</td> <td>text</td>

</tr> </table>

HTML-table - border

<table border="1" style="width:100%"> <tr>

<td>Ahmed</td> <td>50</td>

</tr> <tr>

<td>Mohamed</td> <td>60</td>

</tr> </table>

Set border at the table header will apply on all table

HTML-table - columnspan

<th colspan="2">Telephone</th>

Expand the column into two cells

<th rowspan="2">Telephone:</th>

expand into two rows

HTML-Lists

Unordered List:

Item

Item

Item

Item

HTML-Lists

Ordered List:

1.First item

2.Second item

3.Third item

4.Fourth item

HTML- Unordered Lists

<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>

Coffee

Tea

Milk


<ul style="list-style-type:disc">

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>

• Coffee

• Tea

• Milk


Style Description

list-style-type:disc:The list items will be marked with bullets (default)

list-style-type:circle The list items will be marked with circles

list-style-type:square The list items will be marked with squares

list-style-type:none The list items will not be marked

HTML- ordered Lists

<ol>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

1.Coffee

2.Tea

3.Milk


Type The list items will be

type="1" Numbered with numbers (default)

type="A" Numbered with uppercase letters

type="a" Numbered with lowercase letters

type="I" Numbered with uppercase roman numbers

type="i" Numbered with lowercase roman numbers

HTML- ordered Lists

<ol type="I">

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

I.Coffee

II.Tea

III.Milk

HTML- Description Lists

A description list is a list of terms, with a description of each term.

Term

- Description

• <dl> tag defines the description list,

• <dt> tag defines the term (name), and

• <dd> tag describes each term:

HTML- ordered Lists

<dl>

<dt>Coffee</dt>

<dd>- black hot drink</dd>

<dt>Milk</dt>

<dd>- white cold drink</dd>

</dl>

Coffee - black hot drink

Milk - white cold drink

HTML- Nested Lists

<ul>

<li>Coffee</li>

<li>Tea

<ul>

<li>Black tea</li>

<li>Green tea</li>

</ul>

</li>

<li>Milk</li>

</ul>

HTML- Span

<h1>My <span style="color:red">Important</span> Heading </h1>

Span make different block inline.

used in text

My Important Heading

Ref








<ol type="I">

<li>Coffee</li>

<ol type="1">

<li> a</li>

<li> b</li>

</ol>

<li>Tea</li>

<li>Milk</li>

</ol>

HTML- div

<div> </div> book a block in which you can include more HTML elements

<div style="background-color:black; color:white; padding:20px;">

<h2>London</h2>

<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>

</div>

a

table, th, td { border: 1px solid black;

}

We can customize using Style CSS:

border-collapse: collapse;

th, td {

padding: 15px;

}

HTML-table - CSS

table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 15px; } th,td { text-align: center; } table { border-spacing: 15px; }

HTML- CSS Cascading Style Sheets

CSS could be available using:

Inline - using a style attribute in HTML elements

Internal - using a <style> element in the HTML <head> section

External - using one or more external CSS files


1- Inline - using a style attribute in HTML elements:

The CSS will apply on that element only

<h1 style="color:blue;">This is a Blue Heading</h1>


Internal - using a <style> element in the HTML <head> section:

The style will be applied on the HTML page

<style>

body {background-color:lightgrey;}

h1 {color:blue;}

p {color:green;}

</style>


External - using one or more external CSS files The style will be applied on the HTML page:

Link a separate style sheet with your page

Allows you to link more than one page to the sheet

Allows you to change the style of more than one page by changing single file

<head>

<link rel="stylesheet" href="styles.css">

</head>


<head>

<link rel="stylesheet" href="styles.css">

</head>

—————————————Style.css sheet————————————

body {

background-color: lightgrey;

}

h1 {

color: blue;

}

p {

color:green;

}


h1 {

color: blue;

font-family: verdana;

font-size: 300%;

border: 1px solid black;

margin: 50px;

padding: 10px;

}


ID: using to link specific style to one element:

<p id="p01">I am different</p>

#p01 {

color: blue;

}

HTML- CSS iframes

insert a website inside your website:

<iframe src="URL"></iframe>

<iframe src="b.html"></iframe>

Ref








Web Programming

Dr Ahmed A. Eltahawy


HTML-Symbols

HTML-Form

Form are used to receive user input, And

Make some action based on input, Or

Submit the data

<form>

</form>

HTML-Form Input elements:

Text: write text on

Radio buttons: Select a choice

Submit Button: Click to do some action

Password

Checkbox

Button

others

<input type="text" name="lastname" options>

HTML-Form inputs

HTML-Form Text: <input type="text" name="firstname">

<form>

First name:<br>

<input type="text" name="firstname"><br>

Last name:<br>

<input type="text" name="lastname">

User password:<br>

<input type="password" name="psw">

Quantity (between 1 and 5): <br>

<input type="number" name="quantity" min="1" max="5">

</form>

HTML-Form Adding Restrictions

<form>

Enter a date before 1980-01-01:

<input type="date" name="bday" max="1979-12-31"> <br>

Enter a date after 2000-01-01:

<input type="date" name="bday" min="2000-01-02"> <br>

</form>

HTML-Form

Radio: <input type="radio" >

<form>

<input type="radio" name="gender" value="male" checked> Male <br>

<input type="radio" name="gender" value="female"> Female <br>

<input type="radio" name="gender" value="other"> Other

</form>

HTML-Form

checkbox: <input type="checkbox" >

<form>

<input type="checkbox" name="vehicle1" value="Bike">

I have a bike<br>

<input type="checkbox" name="vehicle2" value="Car">

I have a car

</form>

HTML-Form

button: <input type="button" >

<form>

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

</form>

HTML-Form Submit: <input type="submit">

<form action="action_page.php">

First name:<br>

<input type="text" name="firstname" value="Mickey">

<br>

Last name:<br>

<input type="text" name="lastname" value="Mouse">

<br><br>

<input type="submit" value="Submit">

</form>

When Click

Values sent here

HTML-Form

• <form action="action_page.php" method = "Get">

• Searching without secret information

• The values will appear at the title when submitting

• <form action="action_page.php" method = "Post">

• If contain secure information like password

HTML-Form

HTML-Form <form action="action_page.php">

<fieldset>

<legend>Personal information:</legend>

First name:<br>

<input type="text" name="firstname" value="Mickey"><br>

Last name:<br>

<input type="text" name="lastname" value="Mouse"><br><br>


</fieldset>

</form>

Group elements together

Give the group a name

HTML-Form Input attributes1.Value: specifies the initial value for an input

<form action="">

First name:<br>

<input type="text" name="firstname" value="John">

<br>

Last name:<br>


</form>

HTML-Form Input attributes2.Read only: the input field is read only (cannot be changed)

<form action="">

First name:<br>

<input type="text" name="firstname" value="John" readonly>

<br>

Last name:<br>


</form>

HTML-Form Input attributes3.Disable: the input field is disable

<form action="">

First name:<br>

<input type="text" name="firstname" value="John" disabled >

<br>

Last name:<br>


</form>

HTML-Form Input attributes4.The size : specifies the size (in characters) for the input

field:<form action="">

First name:<br>

<input type="text" name="firstname" value="John" size="40">

<br>

Last name:<br>


</form>

HTML-Form Input attributes5.The maxlength:specifies the maximum allowed length for the

input field:

<form action="">

First name:<br>

<input type="text" name="firstname" value="John" maxlength="10">

<br>

Last name:<br>


</form>

HTML-Form Input attributes6.The autocomplete attribute:

✤ specifies whether a form or input field should have autocomplete on or off.

✤When autocomplete is on, the browser automatically complete values based on values that the user has entered before.

✤Tip: It is possible to have autocomplete "on" for the form, and "off" for specific input fields, or vice versa.

✤The autocomplete attribute works with <form> and the following <input> types:

✤text, search, url, tel, email, password, datepickers, range, and color.

HTML-Form Input attributes6.The autocomplete attribute:

<form action="action_page.php" autocomplete="on">

First name:<input type="text" name="fname"><br>

Last name: <input type="text" name="lname"><br>

E-mail: <input type="email" name="email" autocomplete="off"><br>

<input type="submit">

</form>

HTML-Form Input attributes

7.The Nonvalidate attribute: is a form attribute. Means submit the data with no validation

<form action="action_page.php" novalidate>

E-mail: <input type="email" name="user_email">


</form>


8.Auto focus: <input> element should automatically get focus when the page loads

<form action="action_page.php" autofocus >

E-mail: <input type="email" name="user_email">


</form>

HTML-Form Input attributes9.Form: refere to form with specific id

<form action="action_page.php" id="form1">

First name: <input type="text" name="fname"><br>


</form>

Last name: <input type="text" name="lname" form="form1">


10.Height and Width:

<form action="action_page.php" id="form1">

First name: <input type="text" name="fname"><br>

<input type="image" src="2.png" alt="Submit" width="48" height="48">

</form>

HTML-Form Min-Max

<form>

Enter a date before 1980-01-01:

<input type="date" name="bday" max="1979-12-31"> <br>

Enter a date after 2000-01-01:

<input type="date" name="bday" min="2000-01-02"> <br>

</form>

HTML-Form Elements

1.The Select: drop down menu to select from

<select name="cars">

<option value="volvo">Volvo</option>

<option value="toyota">Toyota</option>

<option value="fiat" selected>Fiat</option>

<option value="audi">Audi</option>

</select>

HTML-Form Elements

1.Text area: multi line text input:

2.Textarea of ten rows and 30 columns:

<textarea name="message" rows="10" cols="30">

Initial Text here

</textarea>

HTML-Form Elements

1.Button: should linked with action when clicked

<button type="button" onclick="alert('Hello World!')">Click Me!

</button>

HTML5-Form Elements <form action="action_page.php">

<input list="browsers">

<datalist id="browsers">

<option value="Internet Explorer">

<option value="Firefox">

<option value="Chrome">

<option value="Opera">

<option value="Safari">

</datalist>

</form>

HTML5-Form Elements

Ref








Web Programming - Facultu of tourism · 2018. 8. 30. · WWW The World Wide Web (WWW) is an...

Documents

Transcript of Web Programming - Facultu of tourism · 2018. 8. 30. · WWW The World Wide Web (WWW) is an...