Web Development
Owen Sacco
ICS2205/ICS2230 – Web Intelligence
Introduction
Client-Side scripting involves using programming technologies to build web pages and applications that are run on the client (i.e. in the browser on the user’s device)
Client-side scripting can be used to: Validate user input
Interact with the browser
Enhance web pages
Add client/server communication between a browser and a web server
2
Introduction
Client-side scripting does have limitations such as: Browser dependency – the browser or scripting host must support the scripting language and capabilities
Client-side scripts are restricted from accessing the local hardware and file system
Client-side scripts can be viewed by the client by using the browser’s source-viewing capability
Sensitive information, such as passwords or other personally identifiable data should not be on the client
All client-side data validation should be mirrored on the server
3
Introduction
Client-side technologies: Hypertext Markup Language (HTML)
A markup language designed to specify the content and structure of web pages (also called Web documents)
Cascading Style Sheets (CSS)
Specify the presentation or styling, of elements on a web page (eg: fonts, spacing, sizes, colours, positioning)
JavaScript
JavaScript is an interpreted programming language that helps you build dynamic web pages in response to
events
4
5. HTML & CSS
Hypertext Markup
Language (HTML)
What is HTML?
Unlike programming languages, such as C, C++, C♯ and Java, HTML is a markup language that specifies the structure and content of documents that are displayed in web browsers
HTML5 is the latest HTML version
HTML documents are stored on a Web Server which are requested by the client
Once a client requests a particular HTML document (or other resources), the Web Server sends the file to the client7
What is HTML?
8
What is HTML?
9
What is HTML?
10
What is HTML?
When the browser reads your HTML code, it interprets all the tags that surround the text
Tags are just words or characters in angle brackets, such as <head>, <p>, <h1>, etc. that tell thebrowser about the structure of your text
Therefore, with HTML you can use tags to tell the browser what text is in a heading, what text is in a paragraph and so on11
How Tags Work
In order to tell the browser about the structure of your page, use pairs of tags around your content i.e. opening tag and closing tag:<h1> Hello World </h1>
12
Opening Tag Content Closing Tag
HTML Example
13
HTML Example:
<!DOCTYPE>
Document Type Declaration <!DOCTYPE> in line 1 is required at the start of the HTML document,before the <html> tag
It tells the browser which version of (X)HTML standard the web page coding is supposed to comply with
It tells the browser how to render the page in standards compliant mode
HTML 4.01 had three different <!DOCTYPE>whereas HTML5 has only one: <!DOCTYPE html>
14
HTML Example: Comments
Comments are used to improve readability anddescribe segments of the document, for example in line 2
The browser ignores comments when your document is rendered
Comments start with <!-- and end with -->15
HTML Example: html, head and body elements
HTML markup contains text (and images, graphics, animations, audios and videos) that represents the content of a document
HTML elements specify a document’s structure and“meaning”
The html element in line 3 encloses the head and body section16
HTML Example: html, head and body elements
The head section (represented by the head element in line 4) contains: Information about the HTML document, such as the character set (for example UTF-8, the most popular character-encoding scheme) that helps the browser to determine how to render the content
The title of the page (represented by the title element)
Can contain CSS3 style sheets for document- formatting instructions
Can contain scripts for creating dynamic web pages (for example JavaScript)
17
HTML Example: html, head and body elements
The body section (represented by the bodyelement in line 8) contains the page’s content, which the browsers displays when the user visits the web page
18
HTML Example: Start Tags and End Tags
HTML documents delimit most elements with a start tag and an end tag
A start tag consists of the element name in angle brackets, for example <html>
An end tag consists of the element name preceded by a forward slash (/) in an angle brackets, forexample </html>
There are several “void elements” that do not have end tags19
HTML Example: Start Tags and End Tags
Start tags have attributes that provide additional information about an element, which browsers use to determine how to process the element
Each attribute has a name and a value separated by an equals sign (=)
Although element and attribute names are case insensitive, it’s a good practice to use onlylowercase letters
20
HTML Example: title Element
Line 6 specifies a title element and it is a nested element because it is enclosed in the head element’s start and end tags
It is also enclosed in the html element’s start and end tags
Titles usually appear in:
the title bar at the top of the browser window
in the browser tab on which the page is displayed,
the text identifying a page when users add the page to their list of Favourites or Bookmarks
Search engines use the title for indexing purposes and when displaying results
21
HTML Example: Paragraph Element
Line 9 specifies the paragraph element denoted with <p> and </p>
All text placed between <p> and </p> tags forms one paragraph
When a browser renders a paragraph, it places extra space above and below the paragraph text22
HTML - Headings
HTML provides 6 heading elements (h1 through h6) for specifying the relative importance ofinformation
23
HTML - Linking
Hyperlink references (or links to) other resources such as documents and images
When a user clicks a hyperlink, the browser tries to execute an action associated with it (for example navigate to a URL or open an e-mail client)
Any displayed element can act as a hyperlink
Web browsers underline text hyperlinks and colour their text blue by default so that users candistinguish hyperlinks from plain text
24
HTML - Linking
Hyperlinks are created using the a (anchor) element
The location of a resource (i.e. the resource’s URL) is assigned to the attribute href (hypertextreference); for example:
If the Web server cannot locate a requested document, it returns a 404 error25
HTML - Linking
Anchors can link to e-mail addresses using a mailto
When a user clicks this type of anchored link, most browsers launch the user’s default e-mail program
The form of an e-mail anchor is:26
HTML - Images
The most popular image formats used by Web
developers today are PNG (Portable Network Graphics) and JPEG (Joint Photographic Experts Group)
The img element includes an image in the document
The image file’s location is specified with the src (source) attribute
When images are located in the same directory as the HTML documents, only the image’s file name is required
This is known as relative path
27
HTML - Images
Other optional attributes specify more information about how the image will be displayed
For example the attributes width and height specify the image’s dimensions – if these areomitted, the browser uses the image’s actual width and height
An example of including an image in an HTML document:28
HTML - Images
Every image must have an alt attribute so that if the browser cannot render the image, the browser displays the alt attribute value
The alt attribute is also important for the visually impaired users since the speech synthesizersoftware can “speak” the alt attribute’s value so that they can understand what the browser is
displaying
Images can be used as hyperlinks by nesting an img element in an anchor element29
HTML - Images
30
For example:
Clicking on an image hyperlink takes a user to the Web page specified by the surrounding href element
Images from other Web documents can also be referenced by the src attribute
If you refer to an image on another website, the browser has to request the image resource from that site’s server
HTML - Lists
31
Lists in a Web page are used to organise content
Lists may contain: unordered information and ordered information
Unordered lists displays text in a simple bullet-style list that does not order its items by letter ornumber
The unordered-list element ul creates a list in which each item begins with a bullet symbol and each entry in the unordered list is an li (list item) elementHTML - Lists
32
HTML - Lists
33
Ordered lists, represented in HTML as ol (ordered- list element) are lists in which each item begins with a number
Nested lists represent hierarchical relationships, as in a multilevel outline
A Web browser indents each nested list to indicate a hierarchical relationship and bullet styles used may vary by browserHTML - Lists
34
HTML - Lists
35
HTML - Tables
36
Tables are frequently used to organise data into rows and columns
Tables are defined with the table element
The border attribute with value “1” specifies that the browser should place borders around the table and table’s cells
The border attribute is a legacy attribute that you should avoid
The CSS border property is the preferred way to format a table’s border
HTML - Tables
37
The caption element specifies a table’s title and text in this element is typically rendered above the table
It’s good practice to include a general description of a table’s information in the table’s element’s summary attribute
A table has three distinct sections: head, body and footHTML - Tables
38
Table caption Table header Table body Table footer
Table border
HTML - Tables
39
The head section (or header cell) is defined with a thead element which contains header information such as column names
Each tr element defines an individual table row
The columns in the thead section are defined with th (table header column) elements
Most browsers center text formatted by th elements and display them in boldHTML - Tables
40
The body section is defined with a tbody element
The tr element specifies one data row
Data cells contain individual pieces of data and are defined with td (table data) elements in each row
The footer section is defined with a tfoot (table foot) element
The text placed in the footer commonly includes calculation results and footnotesHTML - Tables
41
The tfoot section can contain table rows, and each row can contain cells
Similar to the thead section, cells in the footer section are created using th elements, instead of the td elements used in the table body
Prior to HTML5, the tfoot section was required to appear above the tbody section of the table
As of HTML5, the tfoot section can be above or below the tbody section in the code42
HTML - Tables
43
Table cells are sized to fit the data they contain, but you can control a table’s formatting using CSS3
You can create cells that apply to more than one row or column using rowspan and colspan
The values assigned to these attributes specify the number of rows or columns occupied by a cellHTML - Forms
44
When browsing websites, users often need to provide information such as search queries, e-mail address and post codes
HTML5 provides a mechanism, called a form, for collecting data from a user
Data that users enter on a Web page is normally sent to a Web server after clicking the “submit” button
The server would process the data and send back the result as specified in the server-side code (for example in the PHP scripts)
HTML - Forms
45
A form element contains the method attribute that specifies how the form’s data is sent to the Web server
When using the post method, the data in the form is appended to the browser request (HTTP request) which is passed to the server transparently and the user does not see the data after the form issubmitted
HTML - Forms
46
Whereas using the get method, the data in theform is appended directly to the URL of the script which is being requested and is visible in the user’s address bar
The action attribute in the form specifies the URL of a script on the Web server that will be invoked to process the form’s data
The input elements specify the data to provide to the script (on the server) that processes the form These scripts are also called the form handlers
HTML - Forms
47
There are several types of input elements which are determined by its type attribute
The text input type inserts a text field in the form where users can fill in their data The size attribute specifies the number of characters visible in the text field
The maxlength attribute limits the number of characters input into the text field
The submit input type inserts a button that when clicked, the form data is passed to the location in the form’s action attributeHTML - Forms
48
The reset input type inserts a button that when clicked, resets all form elements to their default values as specified by the value attribute
The hidden input type allows to send form data that’s not an input by a user
The password input type inserts a password box with the specified size and allows users to enter sensitive information which are masked withasterisks (*)
Note: the actual value is sent to the Web server and not the asterisks (*)
HTML - Forms
49
The checkbox input type enables users to select an option and check marks appear in the checkbox Checkboxes can be used individually or in groups
Checkboxes that belong to a group are assigned the same name attribute
The radio input type enables users to select an option from radio buttons Radio buttons in a group all have the same name attribute and are distinguished by their value attributes
HTML - Forms
50
The select input type enables users to select an option from a drop-down list The name attribute identifies the drop-down list
The option element adds items to the drop-down list
The selected attribute specifies which item is initially displayed as the selected item
If not set, the browser selects the first option by default
HTML - Forms
51
The textarea element inserts a multiline text area box into the form The number of rows is specified with the rows attribute
The number of columns is specified with the cols attribute
HTML - Forms
52
HTML - Forms
53
Cascading Style
Sheets (CSS)
What is CSS?
Cascading Style Sheets 3 (CSS3) allows you tospecify the presentation of elements on a Web page (for example fonts, spacing, sizes colours,
positioning) separately from the document’s structure and content
The separation of structure from presentationsimplifies maintaining and modifying Web pages, especially on large-scale Websites
55
What is CSS?
Although HTML has attributes that controlpresentation, it’s better not to mix presentation with content
You can declare document styles: Inline in the HTML markup
In embedded style sheets
In separate CSS files
56
CSS – Inline Styles
Inline styles declare an individual element’s format using the HTML attribute style
Inline styles override any other styles57
CSS – Embedded Style Sheets
Embedded style sheets enable you to embed CSS3 document in an HTML5 document’s head section
The style element defines the embedded style sheet
Styles placed in the head apply to matching elements wherever they appear in the body
CSS documents use the MIME type text/css
The style sheet’s body declares the CSS rules for the style sheet58
CSS – Embedded Style Sheets
Each rule’s body is enclosed in curly braces: { and }
CSS rules in embedded style sheets use the same syntax as inline styles: the property name isfollowed by a colon (:) and the property value
Multiple properties are separated by semicolons (;)
Style classes declarations define styles that can be applied to any element59
CSS – Embedded Style Sheets
60
CSS – Embedded Style Sheets
61
CSS – External Style Sheets
Style sheets are a convenient way to create a document with a uniform theme
External style sheets are separate documents that contain only CSS rules (rather than embedding the style sheets in HTML documents)
With external style sheets you can provide auniform look and feel to an entire Website and you can reuse the same external style sheet across
different Web pages (and also Websites)
62
CSS – External Style Sheets
When changes to the styles are required, you need to modify only a single CSS file to make stylechanges across all the pages that use those styles (rather than having to change each style in each HTML document!)
Using external style sheets also adds the benefit that both the designer and the content author of a Web site can work in parallel63
CSS – External Style Sheets
64
CSS – External Style Sheets
The link element is used to reference an external style sheet and uses the rel attribute to specify the relationship between the current document and another document (in this case the relationship will be stylesheet)
type attribute to specify the related document’s MIME type as text/css
href attribute provides the style sheet document’s URL
