Yarmouk University Providing Fundamental ICT Skills for Syrian Refugees (PFISR) Web Design and Application Development Dr. Abdel-Karim Al-Tamimi altamimi@yu.edu.jo Lecture 01 A. Al-Tamimi 1
Lecture Overview Introduction to Web Development Introduction to Web Technologies HTML/XHTML and the difference between them CSS Client Side Scripting (JavaScript) Tools for Writing Web Pages Lecture 01 A. Al-Tamimi 2
Introduction to Web Development Web can be considered as a sea of documents Many documents on the web have strong similarities to the documents on real life Structure, contents Example: News websites have similar structure to the design of real life newspapers (columns, headlines etc) Your code tells the web browser (IE, Firefox, Chrome) the structure and contents of your information Using HTML/XHTML Lecture 01 A. Al-Tamimi 3
How the Web Works What happens when you type a web address such as http://www.yu.edu.jo into your web browser Every computer connected to the Internet is given a unique address made up of series of four numbers between 0 and 255 Example: 192.168.0.123 or 197.122.135.127 These numbers are known as IP (Internet Protocol) Address Lecture 01 A. Al-Tamimi 4
How the Web Works IP is the standard for how data is passed between machines on the Internet When you connect to the Internet using an ISP (Internet Service Provider), you will be allocated an IP address Usually allocated a dynamic IP address every time you connect Every website is a part of powerful computer known as web server or server Every domain name (www.yu.edu.jo) has a specific IP address of the computer/server that will host the site Lecture 01 A. Al-Tamimi 5
How the Web Works You do not enter the IP address of the website you want to visit The web uses domain name servers or DNS to translate the typed name (www.yu.edu.jo) to an IP address After knowing the IP address, the web browser sends a request to the server hosting the webpage using HTTP protocol (Hypertext Transfer Protocol) (that s why we start the address with http:// ) Lecture 01 A. Al-Tamimi 6
How the Web Works When the server receives the request it locates the requested document and returns it Usually logs all the requests and time of request The server locates the document and its resources using the supplied URL (uniform resource locator) A single web document is usually multiple of documents embedded together Images, style sheets (CSS files), Scripts (JavaScript files) and other resources Lecture 01 A. Al-Tamimi 7
How the Web Works A URL is a unique address on the web where the page, picture, or other resources can be found Example: www.yu.edu.jo/images/logo.gif Example: www.yu.edu.jo/index.html Not all web-pages end with.html/.htm extension After the web browser acquires the files, it inserts the images and other resources in their appropriate places to display the page correctly URL is formatted as: <protocol>://<server>/<path> Lecture 01 A. Al-Tamimi 8
Example A User Enters a URL into a browser (http://www.yu.edu.jo). This request is passed to domain name server first (DNS) The domain name server returns the IP address for the server that hosts the web site (in this case: 87.236.233.10) The browser requests the page from the web server using the IP address specified by the DNS The web server returns the page to the IP address specified by the browser requesting the page The page may also contain links to other files on the same server such as images, which the browser will also request Lecture 01 A. Al-Tamimi 9
Example Locate all the resources in the HTTP requests IP Address is 87.236.233.10 Web Server www.yu.edu.jo DNS Server I need to connect to www.yu.edu.jo Give me the contents of index.html Lecture 01 A. Al-Tamimi 10
HTTP Request Header Example Lecture 01 A. Al-Tamimi 11
Introduction to HTML HTML stands for Hypertext Markup Language Markup is adding extra hints to indicate more information (like highlighting your document) HTML is used to tell the web browser which parts are header, body, text, images etc Lecture 01 A. Al-Tamimi 12
Introduction to HTML Lecture 01 A. Al-Tamimi 13
In Class Assignment 1-Write down the exact HTML content from the previous example and save it to YourName.html or YourName.htm 2-Change the TITLE element content to YOUR NAME PAGE 3-Change the <H1> element to your full name Lecture 01 A. Al-Tamimi 14
What is the difference between HTML and XHTML There are several versions of HTML Each version adds new functionalities on top of the previous version XHTML or extensible HyperText Markup Langauge, is an XML (Extensible Markup Langauge) description of a web page XHTML is more strict than HTML since it requires the document to be well-formed Lecture 01 A. Al-Tamimi 15
XHTML Lecture 01 A. Al-Tamimi 16
Tags and Elements Opening Tag Closing Tag <TITLE>HIJJAWI FACULTY PAGE </TITLE> Element Lecture 01 A. Al-Tamimi 17
HTML Heads and Bodies The entire HTML page is contained in <HTML></HTML> tags The two main parts of the HTML pages are: The <HEAD> element: contains information about the page like title, keywords, meta-data.. etc The <BODY> element: contains the information that is usually illustrated in the web page Lecture 01 A. Al-Tamimi 18
Adding Style to Web Page W3C (World Wide Web Consortium), Microsoft and Netscape introduced new markup for style, to change the background, colors, fonts etc Examples: <FONT></FONT> <B></B> <I></I> <P></P> Lecture 01 A. Al-Tamimi 19
Attributes In order to specify the values of the different elements, attributes are used Example: <FONT face= Arial ></FONT> All attributes are made of : name and value The value of the attribute should be put inside either single quotations ( ) or double quotation ( ), and separated from attribute name by = Example: <FONT face= Arial color= RED > HELLO</FONT> Replace RED with #CC0000 Lecture 01 A. Al-Tamimi 20
Introduction to CSS CSS stands for Cascading Style Sheet CSS was introduced to separate style from content Instead of using attributes and values we use rules Each CSS rule consists of: Selector: indicates which element(s) the rule applies to Declarations: indicating the properties of an element you want to change (e.g. color), which are very similar to attribute name and value pairs Lecture 01 A. Al-Tamimi 21
Introduction to CSS Selector BODY Declarations { font-family: Arial; color : RED; } CSS Rule Lecture 01 A. Al-Tamimi 22
Introduction to CSS To instruct the web browser to use the separate CSS style file (with.css extension), we use <LINK> element <LINK> element is inserted in the <HEAD> section Example: <LINK rel= stylesheet type= text/css href= style.css ></LINK> <LINK rel= stylesheet type= text/css href= style.css /> Lecture 01 A. Al-Tamimi 23
HTML and CSS Test.html Style.css Lecture 01 A. Al-Tamimi 24
In Class Assignment 1-Rewrite your HTML file to use style sheet file [style.css] 2-Adjust the colors of fonts and backgrounds to your preference 3-View the source file of the web page Lecture 01 A. Al-Tamimi 25
XHTML As we discussed earlier, XHTML has stricter notation than HTML XHTML is written in XML XHTML document is technically an XML document To start an XHTML document, you include the XML declaration <?xml version= 1.0 encoding= UTF-8?> Lecture 01 A. Al-Tamimi 26
XHTML Encoding : (short for character encoding) represents how a program or operating system stores characters that you might want to display Because different languages have different characters, and indeed because some programs support more characters than others, there are several different encodings It is recommended to use UTF-8 encoding Lecture 01 A. Al-Tamimi 27
XHTML Rules Elements and Attributes use lower case names While HTML is case insensitive, XML is case sensitive You have to close all tags correctly Lecture 01 A. Al-Tamimi 28
XHTML Rules Lecture 01 A. Al-Tamimi 29
XHTML Rules All HTML code is enclosed inside <html></html> tags All attribute values must be enclosed in double quotation marks A value must be given for each attribute Whitespace (see the definition at the end of this section) is collapsed, and trailing spaces are removed Lecture 01 A. Al-Tamimi 30
Introduction to JavaScript JavaScript was invented by Netscape at 1996 Originally named LiveScript, but for the popularity of Java at that time, it was named JavaScript JavaScript is an object oriented dynamic language It has types and operators, objects, and methods Syntax is similar to Java and C languages Lecture 01 A. Al-Tamimi 31
Introduction to JavaScript JavaScript does not have classes, instead it uses object prototype Methods/Functions are considered as objects and can be passed like any other object JavaScript types are : Numbers Strings Booleans Objects Function Array Date Regular Expression Null Undefined Lecture 01 A. Al-Tamimi 32
Introduction to JavaScript JavaScript gives HTML designers a programming tool JavaScript can react to events JavaScript can manipulate HTML elements JavaScript can be used to validate data Lecture 01 A. Al-Tamimi 33
Tools that we will use in this class Simple Text Editors (notepad) Visual Studio 2005/2008/2010 W3Schools.com Firefox Plugins XAMPP (Apache Server+PHP+MySQL) Other online tools Lecture 01 A. Al-Tamimi 34
Resources Jon Duckett, Beginning Web Programming with HTML, XHTML, and CSS, Wrox 2004 http://archive.org/web/web.php http://en.wikipedia.org/wiki/xhtml http://www.w3.org/international/tutorials/bidixhtml/ https://developer.mozilla.org/en/a_reintroduction_to_javascript Lecture 01 A. Al-Tamimi 35
Questions Lecture 01 A. Al-Tamimi 36