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 client 7
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 the browser 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 on 11
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> Opening Tag Content Closing Tag 12
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 and describe 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 section 16
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 documentformatting 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 body element 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, for example </html> There are several void elements that do not have end tags 19
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 only lowercase 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 text 22
HTML - Headings HTML provides 6 heading elements (h1 through h6) for specifying the relative importance of information 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 can distinguish 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 (hypertext reference); for example: If the Web server cannot locate a requested document, it returns a 404 error 25
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 are omitted, 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 synthesizer software 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 element 29
For example: HTML - Images 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 30
HTML - Lists 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 or number 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) element 31
HTML - Lists 32
HTML - Lists Ordered lists, represented in HTML as ol (orderedlist 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 browser 33
HTML - Lists 34
HTML - Lists 35
HTML - Tables 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 36
HTML - Tables 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 foot 37
HTML - Tables Table caption Table header Table body Table border Table footer 38
HTML - Tables 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 bold 39
HTML - Tables 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 footnotes 40
HTML - Tables 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 code 41
42
HTML - Tables 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 cell 43
HTML - Forms 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) 44
HTML - Forms 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 is submitted 45
HTML - Forms Whereas using the get method, the data in the form 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 46
HTML - Forms 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 attribute 47
HTML - Forms 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 with asterisks (*) Note: the actual value is sent to the Web server and not the asterisks (*) 48
HTML - Forms 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 49
HTML - Forms 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 50
HTML - Forms 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 51
HTML - Forms 52
HTML - Forms 53
Cascading Style Sheets (CSS)
What is CSS? Cascading Style Sheets 3 (CSS3) allows you to specify 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 presentation simplifies maintaining and modifying Web pages, especially on large-scale Websites 55
What is CSS? Although HTML has attributes that control presentation, 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 styles 57
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 sheet 58
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 is followed by a colon (:) and the property value Multiple properties are separated by semicolons (;) Style classes declarations define styles that can be applied to any element 59
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 a uniform 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 style changes 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 parallel 63
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 65