HTML HTML. Chris Seddon CRS Enterprises Ltd 1

Size: px

Start display at page:

Download "HTML HTML. Chris Seddon CRS Enterprises Ltd 1"

Harvey Bridges
5 years ago
Views:

1 Chris Seddon CRS Enterprises Ltd 1

2 CRS Enterprises Ltd 2

3 Reference Sites W3C W3C w3schools DevGuru Aptana GotAPI Dog Copyright CRS Enterprises Ltd CRS Enterprises Ltd 3

4 HTTP Requests and Responses Web browsers and Web servers communicate by using HTTP requests and responses HTTP request HTTP response Web browser Web server The Web browser can request A static resource, such as a fixed page A server-side application, such as Java servlet or JSP Copyright CRS Enterprises Ltd CRS Enterprises Ltd 4

5 Client-Server Interaction Server Server side side processing creates and returns Copyright CRS Enterprises Ltd CRS Enterprises Ltd 5

6 Creating Web Server Applications Java Java Servlets Java Server Pages (JSPs) Typically a combination of both Common Gateway Interface (CGI) CGI scripts in Perl, C, C++, etc. Microsoft technologies Active Server Pages (ASPs), using JScript or VBScript ASP.NET, using any.net language (C#, VB.NET, J#, etc.) Proprietary APIs, targeted at a specific Web server Internet Information Services API (ISAPI) Copyright CRS Enterprises Ltd CRS Enterprises Ltd 6

W3C Founded in 1994 World Wide Web Consortium Creates pecifications and guidelines that are intended to promote the web s evolution and ensure that

7 W3C Founded in 1994 World Wide Web Consortium Creates pecifications and guidelines that are intended to promote the web s evolution and ensure that web technologies work well together Specifications for:, CSS, XML, X, DOM, etc Copyright CRS Enterprises Ltd CRS Enterprises Ltd 7

8 Sockets and Ports P1 sockets port port P1 machine 1 machine 2 Copyright CRS Enterprises Ltd CRS Enterprises Ltd 8

9 A Basic Web Page <html> <html> <head> <title>hello World</title> </head> <body> Hello, Hello, world! world! </body> </html> home.html Copyright CRS Enterprises Ltd CRS Enterprises Ltd 9

10 Basic X Web Page home.xhtml <!DOCTYPE html html PUBLIC "-//W3C//DTD X Strict//EN" " <html lang="en" dir="ltr" xmlns=" <head> <meta http-equiv="content-type" content="text/xml;charset=utf-8" /> /> <title>my HOME HOME PAGE</title> </head> <body> Hello, Hello, world! world! </body> </html> Copyright CRS Enterprises Ltd CRS Enterprises Ltd 10

11 Doctypes 3 types to choose from: Transitional (loose) more easy going and flexible. Most people are using this Strict everything must be perfect and there is no flexibility. Frameset allows you to use frames on your page <!DOCTYPE PUBLIC "-//W3C//DTD Transitional//EN" " <html> <head> Copyright CRS Enterprises Ltd CRS Enterprises Ltd 11

12 Page Structure Elements Head tag contains header information metadata, CSS styles, JavaScript code <html> <head> <title> <body> defines entire page header title title visible content Copyright CRS Enterprises Ltd CRS Enterprises Ltd 12

13 Structural Elements <h1>,<h2> <p> <p> <br> <br> <span> <div> 5 heading levels paragraph line line break grouping fragments grouping blocks span is in-line and usually used for a small in-line div is block-line and used to group larger pieces of code. <div <divid="scissors"> <p>this is is <span <spanclass="paper">crazy</span></p> </div> </div> Copyright CRS Enterprises Ltd CRS Enterprises Ltd 13

14 Lists Ordered lists <ol> <ol> <li>coffee</li> <li>tea</li> <li>milk</li> </ol> </ol> Unordered lists <ul> <ul> <li>coffee</li> <li>tea</li> <li>milk</li> </ul> </ul> Copyright CRS Enterprises Ltd CRS Enterprises Ltd 14

15 Tables Tables can be produced using CSS alone opions differ on whether you should use or CSS <table <table border="1"> <tr> <tr> <th>name</th> <th>telephone</th> </tr> </tr> <tr> <tr> <td>john Smith</td> <td>45914</td> </tr> </tr> <tr> <tr> <td>sue Pritchard</td> <td>56321</td> </tr> </tr> </table> Copyright CRS Enterprises Ltd CRS Enterprises Ltd 15

16 Links Links can be used to change pages <a> <a> anchor link link Use name attribute for bookmarks Use # to jump to part of a page <a <ahref=" Visit Visit the the Useful Useful Tips Tips Section Section </a> </a> Copyright CRS Enterprises Ltd CRS Enterprises Ltd 16

17 Forms Form fields sent to server on submit <form <form action="results.html" method="get"> First First name: name: <input <input type="text" value="john" name="first" /><br /><br/>/> Last Last name: name: <input <inputtype="text" value="smith" name="last" /><br /><br/>/> <input <inputtype="submit" value="click" /> /> </form> Copyright CRS Enterprises Ltd CRS Enterprises Ltd 17

18 Web Graphic Formats GIF Graphic Information Format best for charts, graphics: ads, logos etc. - can contain up to 256 colors support transparency can be animated not good for photographs JPG Joint Photographic Experts Group best for images with many colors - can contain up to 16 million colors scanned artwork and photos can set the compression for each image to reduce the file size PNG - Progressive Network Graphics newest web graphics format - compact and versatile can combine features of GIF & JPG transparent backgrounds & contain millions of colors supported by all modern browsers Copyright CRS Enterprises Ltd CRS Enterprises Ltd 18

19 Images Images should define alternative text for a text only browser Size can be specified <img src="images/kids_hug.jpg" alt="kids hug" height="400" width="400" /> /> Copyright CRS Enterprises Ltd CRS Enterprises Ltd 19

20 Other Components 5 adds further widgets e.g. for multimedia <button> <input> <label> <textarea> buttons text text input boxes text text or or image labels multi-line text text input box box <textarea rows="5" cols="20"> This This is is a multi-line text text input input box box </textarea> Copyright CRS Enterprises Ltd CRS Enterprises Ltd 20

21 Entities To display a special character in a web page use entities < > && non non breaking space less than greater than ampersand copyright trademark < > & Copyright CRS Enterprises Ltd CRS Enterprises Ltd 21

CHAPTER 2 MARKUP LANGUAGES: XHTML 1.0

WEB TECHNOLOGIES A COMPUTER SCIENCE PERSPECTIVE CHAPTER 2 MARKUP LANGUAGES: XHTML 1.0 Modified by Ahmed Sallam Based on original slides by Jeffrey C. Jackson reserved. 0-13-185603-0 HTML HELLO WORLD! Document