Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence

Transcription

1 Web Development Owen Sacco ICS2205/ICS2230 Web Intelligence

2 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

3 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

4 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 5. HTML & CSS

6 Hypertext Markup Language (HTML)

7 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

8 What is HTML? 8

9 What is HTML? 9

10 What is HTML? 10

11 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

12 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

13 HTML Example 13

14 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

15 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  15

16 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

17 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

18 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

19 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

20 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

21 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

22 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

23 HTML - Headings HTML provides 6 heading elements (h1 through h6) for specifying the relative importance of information 23

24 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 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

25 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

26 HTML - Linking Anchors can link to addresses using a mailto When a user clicks this type of anchored link, most browsers launch the user s default program The form of an anchor is: 26

27 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

28 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

29 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

30 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

31 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

32 HTML - Lists 32

33 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

34 HTML - Lists 34

35 HTML - Lists 35

36 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

37 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

38 HTML - Tables Table caption Table header Table body Table border Table footer 38

39 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

40 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

41 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 42

43 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

44 HTML - Forms When browsing websites, users often need to provide information such as search queries, 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

45 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

46 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

47 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

48 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

49 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

50 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

51 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

52 HTML - Forms 52

53 HTML - Forms 53

54 Cascading Style Sheets (CSS)

55 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

56 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

57 CSS Inline Styles Inline styles declare an individual element s format using the HTML attribute style Inline styles override any other styles 57

58 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

59 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

60 CSS Embedded Style Sheets 60

61 CSS Embedded Style Sheets 61

62 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

63 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

64 CSS External Style Sheets 64

65 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