Scribd
Upload
15 views60 pages

Intro To Web Programming

Basic Web Programming • HTML • CSS • JavaScript For more Dynamic Web Programming we use, e.g., • ASP.NET • SQL • AJAX • PHP • etc. (But these are not part of this Tutorial) These are typically used together with a Database System, such as MySQL, SQL Server, etc.

Uploaded by

RUFAI OLUWASEGUN
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
15 views60 pages

Intro To Web Programming

Basic Web Programming • HTML • CSS • JavaScript For more Dynamic Web Programming we use, e.g., • ASP.NET • SQL • AJAX • PHP • etc. (But these are not part of this Tutorial) These are typically used together with a Database System, such as MySQL, SQL Server, etc.

Uploaded by

RUFAI OLUWASEGUN
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 60

AN INTRODUCTION TO

WEB PROGRAMMING

Dr. Hossein Hakimzadeh


Department of Computer and Information Sciences
Indiana University
South Bend, IN
CONTENTS
• Before you begin
• A simple HTML document
• The structure of an HTML document
• HTML (tags, elements, and attributes)

HTML 2
BEFORE YOU BEGIN
• You need a text editor:

– PC users:
• Download and install Notepad++ (http://notepad-plus-plus.org/)

– Mac users:
• Download TextWrangler
(http://www.barebones.com/products/textwrangler/)

HTML 3
BEFORE YOU BEGIN
• You need a few browsers to test out your HTML
code and make sure that it works in different
browsers:

– Google Chrome: www.google.com/chrome


– Mozilla Firefox: www.mozilla.org/firefox/new
– MS Internet Explorer: www.microsoft.com/ie
– Apple Safari: www.apple.com/safari
– Opera: www.opera.com

HTML 4
There are many different
standards, and document types
on the web, the <!DOCTYPE>

HTML declaration helps the browser to


identify and correctly display a
web page.
<IDOCTYPE html> identifies the
document as a HTML5
• HTML stands for Hyper Text Markup Example: document.
Language.
<!DOCTYPE html>
• It is a language for describing creating <html>
web pages. <body>
<center>
<h1>CSCI-A340 Introduction to Web Programming</h1>
• HTML consists of “normal text” and </center>
markup “tags”.
<p>P: CSCI-A 201 or CSCI-C 101 or INFO-I210. An introduction
to programming web documents, including HTML,
• Most “tags” have a open and close tag. JavaScript, and PHP. Creation of a simple website,
(but not all) including a home page with dynamic elements, using both
client-side and server-side techniques.</p>

– <html> …. </html>
</body>
</html>
– <body> …. </body>

– <p> ….. </p>

– <center> ….. </center>

HTML 5
OUTPUT

HTML 6
THE STRUCTURE OF AN HTML DOCUMENT
• An HTML document contains the following
basic elements:

• DOCTYPE tag defines the document type


(in this case HTML).

• <html> …. </html> tag which describes


the web page.

• <head>…. </head> tag describes the


header information of the web page.

• <body> …. </body> is the visible (render-


able) page content.

• <h1> …. </h1> is displayed as a heading.

• <p> …. </p> is displayed as a paragraph.

Image obtained from


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

HTML 7
THE DOCUMENT OBJECT MODEL?
• DOM is an Application Programming Interface
(API) for HTML and XML documents.

• It defines a structure of the document, and how it


can be accessed.

HTML 8
THE STRUCTURE OF AN HTML DOCUMENT
DOC

<html>

<head> <body>

<title> Other <style> <script> <h1> <p> <a>


tags
such as
<meta>,
Java
<link>, CSS
script
Etc.

HTML 9
AN INTRODUCTION TO
WEB PROGRAMMING

Dr. Hossein Hakimzadeh


Department of Computer and Information Sciences
Indiana University
South Bend, IN
THE STRUCTURE OF AN HTML DOCUMENT
DOC

<html>

<head> <body>

<title> Other <style> <script> <h1> <p> <a>


tags
such as
<meta>,
Java
<link>, CSS
script
Etc.

HTML 11
<HEAD> TAG
• What can be inside a <Head> Tag?

– <title> the title of the document </title>


– <meta> meta data about the document
– <base> the default address for all “relative” links on the
page
– <style> CSS style information </style>
– <link> mostly used to connect to a CSS style sheet
– <script> client-side script </script>

HTML 12
INSIDE A HEAD TAG:
<title> Tag

<!DOCTYPE html>
<html>

<head>
<title>A340 Introduction to Web Programming</title>
</head>

<body>

</body>
</html>

HTML 13
INSIDE A HEAD TAG:
<meta> Tag • Example:
– Default character set:
• The <meta> tag • <meta charset="UTF-8">
provides metadata
about the HTML – Define keywords for search engines:
• <meta name="keywords" content="HTML, CSS, JavaScript,
document. PHP, CSCI-A340, Indiana University South Bend">

Define a description of your web page:


• Metadata will not be –
• <meta name="description" content=“Introduction to Web
displayed on the page, Programming">
but it will be machine
readable. – Define the author of a page:
• <meta name="author" content=“Hossein Hakimzadeh">

• Metadata can be used – Refresh document every 60 seconds:


by browsers, search • <meta http-equiv="refresh" content=“60">
engines, or other web
services.

HTML 14
INSIDE A HEAD TAG:
<Base> Tag
• <base> the default address for all links on the page.

<!DOCTYPE html>
<html>

<head>
<base href="https://retain.iusb.edu/retain/public/images/" >
</head>

<body>
<img src= "1996_2012_Retention.jpg" width="320" height="240">
<img src= "campus7.jpg" width="320" height="240">
<img src= "https://retain.iusb.edu/retain/public/images/campus7.jpg"
width="320" height="240">
<a href="campus4.jpg">show this link</a>
</body>
</html>
HTML 15
INSIDE A HEAD TAG:
<!DOCTYPE html>
<html>

<Style> Tag
<head>
<style>
body
{
background-color:lightblue;
}

• <style> CSS style h1


{

information </style> color:red;


text-align:center;
}

p
{

• The <style> tag allows font-family:"Times New Roman";


font-size:20px;
}
you to insert the style </style>

information right into


</head>
<body>
<center>
<h1>CSCI-A340 Introduction to Web Programming</h1>

the HTML document. </center>

<p>P: CSCI-A 201 or CSCI-C 101 or INFO-I210. An introduction to programming web documents, including
HTML, JavaScript, and PHP. Creation of a simple website, including a home page with dynamic elements,
using both client-side and server-side techniques.</p>

</body>
</html>
HTML 16
INSIDE A HEAD TAG:
<LINK> Tag

• <link attribute=“value” attribute=“value” … >

Load an
external CSS
<head> style sheet

<link rel="stylesheet"
type="text/css"
href=“01_MyStyle.css">
</head> More Info:
http://www.w3.org/TR/html401/present/styles.html#style-external

HTML 17
INSIDE A HEAD TAG:
Example of <LINK> Tag /* 01_MyStyle.css */

<!DOCTYPE html>
<html> body
<head> {
background-color:lightblue;
<link rel="stylesheet" }
type="text/css"
href="01_MyStyle.css"> h1
{
</head> color:red;
<body> text-align:center;
<center> }
<h1>CSCI-A340 Introduction to Web Programming</h1>
</center> p
{
<p>P: CSCI-A 201 or CSCI-C 101 or INFO-I210. An introduction to font-family:"Times New Roman";
programming web documents, including HTML, JavaScript, and PHP.
Creation of a simple website, including a home page with dynamic font-size:20px;
elements, using both client-side and server-side techniques.</p> }

</body>
</html>

HTML 18
INSIDE A HEAD TAG:
<Script> Tag <!DOCTYPE html>
<html>
<head>
• Java Script can be placed <script>
in both the HEAD as well function myAlert()
as the BODY of the HTML {
file. In the HEADer, one alert("This is an alert box!");
can define a Java Script }
function which can be </script>
later called in the BODY of </head>
<body>
the file.
<input type="button"
<script> onclick="myAlert()"
value="Display Alert" />
client-side script
</script> </body>
</html>

HTML 19
AN INTRODUCTION TO
WEB PROGRAMMING

Dr. Hossein Hakimzadeh


Department of Computer and Information Sciences
Indiana University
South Bend, IN
THE STRUCTURE OF AN HTML DOCUMENT
DOC

<html>

<head> <body>

<title> Other <style> <script> <h1> <p> <a>


tags
such as
<meta>,
Java
<link>, CSS
script
Etc.

HTML 21
HTML TAGS
• Documentation

HTML 22
HTML TAGS
• Heading Element

HTML 23
HTML TAGS
• Paragraph Element

HTML 24
HTML TAGS
• Link Element

HTML 25
HTML TAGS
• Image Element

HTML 26
HTML ELEMENTS AND ATTRIBUTES
• Element: • Attribute:

– An HTML element is everything – An HTML elements can have one or


from the start tag to the end tag. more attributes. Attributes
provide additional information
– An HTML element starts with a about an element.
start tag, and ends with an end
tag. – Attributes are always specified in
the start tag.
– The element content is everything
between the start and the end tag. – Attributes come in name/value
pairs like: name="value“.

HTML 27
HTML TAGS
• Horizontal rule (in HTML 4, and Thematic Break in
HTML 5)

HTML 28
HTML TAGS
• Line Break (<br>)
• Use the <br> tag to start a new line without starting
a new paragraph.

HTML 29
FORMATTING TAGS
– Bold/Strong
– Italic/Emphasized
– Code
– Subscript and Superscript
– Pre (preformatted text)

HTML 30
TABLE TAG
• Tables start with
a <table> tag.

• Each row starts


with a <tr> tag.

• Each cell (table


data) starts with
a <td> tag.

HTML 31
TABLE HEADERS
• Header
information in a
table are defined
with the <th> tag.

• All major
browsers display
the text in the
<th> element as
bold and centered.

HTML 32
AN INTRODUCTION TO
WEB PROGRAMMING

Dr. Hossein Hakimzadeh


Department of Computer and Information Sciences
Indiana University
South Bend, IN
LISTS
• Unordered Lists: • Ordered Lists:
– <ul> – <ol>
<li>Coffee</li> <li>Coffee</li>
<li>Milk</li> <li>Milk</li>
</ul> </ol>

HTML 34
BLOCK VS. IN-LINE ELEMENTS
• Block Elements: • Inline Elements:

– A block-level element is – An inline element is an element that


an element that creates define text or data in the document
like <b>BOLD</b>
large blocks of content
like <p>paragraphs </p>
– Inline elements do not start new
or <div>divisions </div>. lines when you use them, and they
generally only contain other inline
tags and text or data, or they
– Block elements start new include nothing at all, like the <br>
lines of text when you use tag.
them, and can contain
other blocks as well as – Finally, inline elements may not be
inline elements and text displayed at all, they simply effect
or data. the rest of the document. Such as
<style>, <meta>, <head>.

HTML 35
DIV TAGS
<div> Element
• The HTML <div> element is a block-level element that can
be used as a container for grouping other HTML elements.

• The <div> element has no special meaning. Except that,


because it is a block level element, the browser will display a
line break before and after it.

• When used together with CSS, the <div> element can be


used to set style attributes to large blocks of content.

HTML 36
DIV TAGS
Example 1:

HTML 37
DIV TAGS
<div> Element:
• Another common use of the <div> element, is for document
layout. It replaces the "old way" of defining page-layout
using tables. Using tables is not the correct use of the
<table> element. The purpose of the <table> element is to
display tabular data.

• Multiple columns are created by using <div>


or <table> elements. (see next page)
• CSS can be used to position elements, or to
create backgrounds or colorful look for the
pages.

HTML 38
WEB PAGE LAYOUT See what happens if
you remove the
<!DOCTYPE html>
<html>
outside container!
<body>

<div id="container" style="width:500px">

<div id="header"
style="background-color:#FFA500;
text-align:center;
height:50px;
width:500px;">
<h1>Title of the page </h1>
</div>

<div id="leftnav";
style="background-color:#FFD700;
height:200px;
width:100px;
float:left;">

<b>LeftNav</b><br>
HTML<br>
CSS<br>
JavaScript<br>
PHP
</div>

<div id="content";
style="background-color:#EEEEEE;
height:200px;
width:400px;
float:left;">
Content goes here ........ ....... ......... ...... ....... .... ........ ......... ..... ..
..... ........
</div>

</div>

</body>
</html> HTML 39
PAGE LAYOUT
Adding another <div>
tag for the right nav.

<div id="rightnav";
style="background-color:#33D700;
height:200px;
width:100px;
float:right;">

<b>RightNav</b><br>
News<br>
FAQ<br>

</div>

HTML 40
ADDING MORE CONTENT…
<!DOCTYPE html> <div id="rightnav";
<html> style="background-color:#FFD700;
<body>
height:200px;
<div id="container" style="width:500px">
width:100px;
float:right;">
<div id="header" <b>RightNav</b><br>
style="background-color:#FFA500; News<br>
text-align:center; FAQ<br>
height:50px;
width:500px;">
<h1 style="margin-bottom:0;">Title of the page
</div>
<img src =
"https://retain.iusb.edu/retain/public/Slide3.JPG" <div id="content";
width = "60" height="50" align="left" > style="background-color:#EEEEEE;
<img src =
"https://retain.iusb.edu/retain/public/Slide3.JPG"
height:200px;
width = "60" height="50" align="right" > width:300px;
</h1> float:left;">
</div> Content goes here ........ ....... ......... ...... ....... .... ........ .........
..... ..
<div id="topnav"; ...... ........
style="background-color:#AAD700;
height:30px;
<video width="160" height="120" controls>
width:500px;
float:left;
text-align:center"> <source src="FransLanting_2005.mp4" type="video/mp4">
<b>TopNav:</b> Your browser does not support the video tag.
Choice 1 </video>
Choice 2
</div>
</div>

<div id="leftnav"; <div id="footer";


style="background-color:#FFD700; style="background-color:#FFA500;
height:200px; clear:both;
width:100px; text-align:center;">
float:left;">
<b>Footer</b>
</div>
<b>LeftNav</b><br>
HTML<br>
CSS<br> </div>
JavaScript<br>
PHP </body>
</div>
</html>

HTML 41
AN INTRODUCTION TO
WEB PROGRAMMING

Dr. Hossein Hakimzadeh


Department of Computer and Information Sciences
Indiana University
South Bend, IN
HTML FORMS
• HTML forms are used for
collecting data (input)
and interact with the
user.

• Such data is then


typically passed to the
server for processing or
storage in the database.

HTML 43
HTML FORMS
• A simple HTML form:
<!DOCTYPE html>
<html>
<body>

<form action="processform.php">
<p>some form elements…inside the
form</p>

<button> Submit Form </button>


</form>

</body>
</html>

HTML 44
HTML FORMS Who to call:
when the
form is
• Additional Form submitted.
Attributes:
What method to use to submit the
data:
<form action ="processform.php“ The form-data can be sent as URL
variables (with method="get") or as
method =“get/post“ HTTP post transaction (with
target =“_self/_blank/etc..“ method="post").
etc…
>
<p>some form elements…inside the
Where to display the response:
form</p> _self = current frame (default)
_blank = a new empty window
<button> Submit Form </button> or tab.

</form>

HTML 45
USE OF POST METHOD
<!DOCTYPE html> <!DOCTYPE html>
<html>
<html>
<body>
<body>
<form action = "processform.php" <p> Simple Processing of form data!</p>
method = "post"
target = "_blank” > </body>
</html>
<Label> Textbox: </lable>
<ul> <?php
<input
type ='text' echo ("Display Information Obtained from ");
name ='TextBoxName'
size ='5'
if (isset($_GET['TextBoxName']))
maxlength ='10‘ echo ("Built-in Get Array: " . $_GET['TextBoxName'] );
value ='123‘ > else if (isset($_POST['TextBoxName']))
</ul> echo ("Built-in Post Array: " . $_POST['TextBoxName'] );
<button> Submit Form </button>
else
echo("nothing sent...");
</form>
</body> ?>
</html>

HTML 46
USE OF GET METHOD
<!DOCTYPE html> <!DOCTYPE html>
<html>
<html>
<body>
<body>
<form action = "processform.php" <p> Simple Processing of form data!</p>
method = “get"
target = "_blank” > </body>
</html>
<Label> Textbox: </lable>
<ul> <?php
<input
type ='text' echo ("Display Information Obtained from ");
name ='TextBoxName'
size ='5'
if (isset($_GET['TextBoxName']))
maxlength ='10‘ echo ("Built-in Get Array: " . $_GET['TextBoxName'] );
value ='123‘ > else if (isset($_POST['TextBoxName']))
</ul> echo ("Built-in Post Array: " . $_POST['TextBoxName'] );
<button> Submit Form </button>
else
echo("nothing sent...");
</form>
</body> ?>
</html>

HTML 47
HTML FORM ELEMENTS

• A typical form can


consist of:

– Textboxes
– TextAreas
– RadioButtons
– CheckBoxes
– ComboBoxes
– Listboxes

HTML 48
TEXTBOX
Example:
• A TEXTBOX can be created
using an <input> element. <!DOCTYPE html>
<html>
<body>

• <input> elements are <p> Textbox: </p>


<ul>
typically used within a <input
<form> element to obtain type ='text'
name ='TextBoxName'
input from users. size ='5'
maxlength ='10'
value ='xxx'
>
• An input field can vary in </ul>
many ways, depending on </body>
the type attribute. </html>

HTML 49
THE TYPE OF INPUT
The TYPE attribute in the input element can be:

• Text Other:
• Textarea
• Email • Color
• url • Date
• Datetime
• Password • datetime-local
• Checkbox • File
• Radio • Hidden
• number • Image
• Range • month
• Search
• Button • Tel
• Reset • time
• Submit • week

HTML 50
firefox

HTML FORM Google


<!DOCTYPE html>
<html>
Chrome
<body>

<form action=“processform.php">
Last name: <input type="text" name="lname"><br>
Microsoft
Email: <input type="text" name="email"><br> IE
Your Homepage: <input type="url" name="homepage"><br>

Password: <input type="password" name="pwd" maxlength="8"><br>


<hr>
<label> Your Skills: </label> <br>
<input type="checkbox" name="skills" value="1"> Critical Thinking<br>
<input type="checkbox" name="skills" value="2"> Problem Solving <br>
<input type="checkbox" name="skills" value="3" CHECKED> Communication <br>
<hr>
<label> Your Gender: </label> <br>
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<hr>
Numeric Value (between 0 and 5):
<input type="number" name=“numbervalue" min="0" max="5">
<hr>
Numeric Range (between 1 and 10):
<input type="range" name="points" min="1" max="10" step="1" value = "5">
<hr>
<input type="submit">
<input type="reset">
</form>

</body>
</html>

HTML 51
AN INTRODUCTION TO
WEB PROGRAMMING

Dr. Hossein Hakimzadeh


Department of Computer and Information Sciences
Indiana University
South Bend, IN
FIELDSET
<form action=“processform.php">
• The <fieldset> tag is <fieldset>
used to group related Last name: <input type="text" name="lname"><br>
Email: <input type="text" name="email"><br>

elements in a form. Your Homepage: <input type="url" name="homepage"><br>


Password: <input type="password" name="pwd" maxlength="8"><br>
</fieldset>

<hr>

• The <fieldset> tag <fieldset>


<label> Your Skills: </label> <br>
<input type="checkbox" name="skills" value="1"> Critical Thinking<br>
draws a box around <input type="checkbox" name="skills" value="2"> Problem Solving <br>
<input type="checkbox" name="skills" value="3“> Communication <br>
the related elements. </fieldset>
<hr>
<input type="submit">
<input type="reset">
</form>

HTML 53
FIELDSET

HTML 54
LEGEND TAG
• The <legend> tag defines a caption for the <fieldset> element.

HTML 55
AN INTRODUCTION TO
WEB PROGRAMMING

Dr. Hossein Hakimzadeh


Department of Computer and Information Sciences
Indiana University
South Bend, IN
FRAME / FRAMESET
• The <frame> and <frameset> tags are not supported in
HTML5.

• The <frame> tag defines a window (frame) within a


<frameset>.

• Each <frame> in a <frameset> can have different attributes,


such as border, scrolling, the ability to resize, etc.

HTML 57
IFRAME
• An iframe is used to display a web page
within a web page.

<!DOCTYPE html>
<html>
<body>

<iframe
src=“05_Body_Form4.html"
width=“500"
height="200">
</iframe>

</body> Additional attributes


</html> such as frameborder,
align, scrolling, etc. can
be added to the iframe.

HTML 58
DISPLAYING VIDEOS (USING VIDEO TAG)
• The standards at this point are still a little loose.
(Below only seems to works in Chrome)

<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" controls autoplay>


<source
src="../Development/videos/FransLanting_2005.mp4“
type="video/mp4">
Your browser does not support the video tag.
</video>

</body>
</html>

HTML 59
DISPLAYING VIDEOS (USING EMBED)
• The <embed> tag defines a container for an external application or
interactive content (a plug-in).

<!DOCTYPE html>
<html>
<body>

<embed src="../Development/videos/FransLanting_2005.mp4“
width="640"
height="480"
autostart= “TRUE”
loop = “TRUE”
controller = “TRUE”
>

</body>
</html>

http://www.w3schools.com/tags/tag_embed.asp
HTML 60

You might also like