Web Programming Lecture Notes PDF

Web Programming DR. Rasha Elstohy What is a Web Site?  a Web site is a collection of related Web pages, images, videos or other digital assets that are addressed relative to a common Uniform Resource Locator (URL), often consisting of only the domain name, or the IP address, and...

Web Programming DR. Rasha Elstohy What is a Web Site?  a Web site is a collection of related Web pages, images, videos or other digital assets that are addressed relative to a common Uniform Resource Locator (URL), often consisting of only the domain name, or the IP address, and the root path ('/') in an Internet Protocol-based network. A Web site is hosted on at least one Web server, accessible via a network such as the Internet or a private local area network. Web site categories  Personal Web sites  Commercial Web sites  Organizational including government and non-profit organization Web sites, and  Entertainment Web sites Static pages. Content is served from the server’s file-system. Pages built using Server Side Includes or Common Gateway Interface (CGI). Frames and Tables used to position and align the elements on a pag Web 2.0  Web 2.0, also known as Library 2.0, is user-centred Web, where blogs, wikis, social networks, multimedia applications, dynamic programming scripts are being used for collection, contribution and collaboration on the Web. The web browser technologies are used in Web 2.0 development and it includes AJAX and JavaScript frameworks. Recently, AJAX and JavaScript frameworks have become a very popular means of creating web 2.0 sites.these 8 tools mentioned below: Podcasting Blogging Tagging Curating with RSS Social bookmarking Social networking Web 3.0  Web 3.0, also known as semantic Web, is smarter and can understand what you want. The searcher no longer needs to wade through a plethora of information or filter out search results but gets the target information straight by working on a combination of information based on his requirement as he understands and preferences he wants i.e. one needs to be less specific and more natural with his queries. This technology should aid the users obtain answers faster and accurately. This is particularly true from the perspective of machine conception as opposed to human understanding. The Semantic Web necessitates the use of a declarative ontological language like OWL to produce domain-specific ontologies that machines can use to reason about information and make new conclusions, not simply match keywords. can use to reason about information and make new conclusions, not simply match keywords. Artificial Intelligence 3D Graphics Types of Web sites Website dynamic static static Web site  In static Web site the information is displayed in the same format as they are stored in the server. Such information is primarily coded in HTML (and the address ends in.htm). Most of the Web sites are static as they present pre-defined, static information, in the sense the pages retrieved by different users at different times remain the same. To make a change to the content, the files need to be manually opened, data changed and the new version should be uploading to the Web. Dynamic Web site  Dynamic Web site pages are ones that retrieves fresh information each time you view (like the latest news you see or various games you play on the Web).  example familiar to all is the ‗seat availability‘ facility in the Indian Railways Web site. The information on seat availability is likely to change every second on fresh reservation or cancellation of reservations. Here, the data in the railway reservation database are updated in real time and the site /browser retrieves the latest status as a response to your search. Protocols  http  https  Fttp  SSL Web Server  The Web Server is a computer that holds and serves a Web site. The Web server includes the hardware, operating system, Web server software, TCP/IP protocols and site content (Web pages, images and other files). Using the HTTP protocol, the Web server delivers Web pages to browsers. If the Web server is used internally within an organization and is not exposed to the public, it is an intranet server and if it serves to external machines (outside the organization) it will be called an Internet (Web) server. Projects What is HTML?  HTML, otherwise known as HyperText Markup Language, is the language used to create Web pages  Using HTML, you can create a Web page with text, graphics, sound, and video Tags  The essence of HTML programming is tags  A tag is a keyword enclosed by angle brackets ( Example: )  There are opening and closing tags for many but not all tags; The affected text is between the two tags More Tags...  The opening and closing tags use the same command except the closing tag contains and additional forward slash /  For example, the expression Warning would cause the word ‘Warning’ to appear in bold face on a Web page Nested Tags  Whenever you have HTML tags within other HTML tags, you must close the nearest tag first  Example: The Nation Structure of a Web Page  All Web pages share a common Example structure  All Web pages should contain a This is where you would pair of , include the text and images on your Web page. , , and tags The Tag  Choose the title of your Web page carefully; The title of a Web page determines its ranking in certain search engines  The title will also appear on Favorite lists, History lists, and Bookmark lists to identify your page  Creating a Basic Starting Document ▪ The HEAD of your document point to above window part. The TITLE of your document appears in the very top line of the user’s browser. If the user chooses to “Bookmark” your page or save as a “Favorite”; it is the TITLE that is added to the list. ▪ The text in your TITLE should be as descriptive as possible because this is what many search engines, on the internet, use for indexing your site. 10  Setting Document Properties ▪ Document properties are controlled by attributes of the BODY element. For example, there are color settings for the background color of the page, the document’s text and different states of links. 11  Color Codes Colors are set using “RGB” color codes, which are, represented as hexadecimal values. Each 2-digit section of the code represents the amount, in sequence, of red, green or blue that forms the color. For example, a RGB value with 00 as the first two digits has no red in the color. 12 Main Colours 13 RGB Colour Model 14 16 Basic Colors 15  Color Codes 1. WHITE 1. #FFFFFF 2. BLACK 2. #000000 3. RED 3. #FF0000 4. GREEN 4. #00FF00 5. BLUE 5. #0000FF 6. MAGENTA 6. #FF00FF 7. CYAN 7. #00FFFF 8. YELLOW 8. #FFFF00 9. AQUAMARINE 9. #70DB93 10. BAKER’S CHOCOLATE 10. #5C3317 11. VIOLET 11. #9F5F9F 12. BRASS 12. #B5A642 13. COPPER 13. #B87333 14. PINK 14. #FF6EC7 16 15. ORANGE 15. #FF7F00  Color Codes ▪ If you require more information about color values, there is an excellent site entitled “VGDesign’s Interactive Color Cube” that displays the background color code when you put your cursor over a small color sample. The Web address is : http://www.vgdesign.com/color.html 17  The Body Element The BODY element of a web page is an important element in regards to the page’s appearance. Here are the attributes of the BODY tag to control all the levels: TEXT="#RRGGBB" to change the color of all the text on the page (full page text color.) ▪ This element contains information about the page’s background color, the background image, as well as the text and link colors. 18  Background Color ▪ It is very common to see web pages with their background color set to white or some other colors. ▪ To set your document’s background color, you need to edit the element by adding the BGCOLOR attribute. The following example will display a document with a white background color: 19  TEXT Color ▪ The TEXT attribute is used to control the color of all the normal text in the document. The default color for text is black. The TEXT attribute would be added as follows: In this example the document’s page color is white and the text would be red. 20  LINK, VLINK, and ALINK These attributes control the colors of the different link states: 1. LINK – initial appearance – default = Blue. 2. VLINK – visited link – default = Purple. 3. ALINK –active link being clicked–default= Yellow. The Format for setting these attributes is: 21  Using Image Background ▪ The BODY element also gives you ability of setting an image as the document’s background. ▪ An example of a background image’s HTML code is as follows: 22 Text Formatting  Manipulating text in HTML can be tricky; Oftentimes, what you see is NOT what you get  For instance, special HTML tags are needed to create paragraphs, move to the next line, and create headings Text Formatting Tags Bold Face Italics Underline New Paragraph Next Line Changing the Font  The expression … can be used to change the font of the enclosed text  To change the size of text use the expression …. where n is a number between 1 and 7 Changing the Font  To change the color, use …. ; The color can also be defined using hexadecimal representation ( Example: #ffffff )  These attributes can be combined to change the font, size, and color of the text all at once; For example, …. Headings  Web pages are typically organized into sections with headings; To create a heading use the expression …. where n is a number between 1 and 7  In this case, the 1 corresponds to the largest size heading while the 7 corresponds to the smallest size  Headings, ▪ Inside the BODY element, heading elements H1 through H6 are generally used for major divisions of the document. Headings are permitted to appear in any order, but you will obtain the best results when your documents are displayed in a browser if you follow these guidelines: 1. H1: should be used as the highest level of heading, H2 as the next highest, and so forth. 2. You should not skip heading levels: e.g., an H3 should not appear after an H1, unless there is an H2 between them. 27  Headings, Example Page Heading 1 Heading 1 Heading 2 Heading 2 Heading 3 Heading 4 Heading 3 Heading 5 Heading 4 Heading 6 Heading 5 Heading 6 28  Paragraphs, ▪ Paragraphs allow you to add text to a document in such a way that it will automatically adjust the end of line to suite the window size of the browser in which it is being displayed. Each line of text will stretch the entire length of the window. 29  Paragraphs, Example Page Heading 1 Paragraph 1,…. Heading 1 Paragraph 1, …. Heading 2 Heading 2 Paragraph 2, …. Paragraph 2,…. Heading 3 Paragraph 3, …. Heading 3 Paragraph 3,…. Heading 4 Paragraph 4, …. Heading 4 Heading 5 Paragraph 4,…. Paragraph 5, …. Heading 6 Heading 5 Paragraph 6, …. Paragraph 5,…. Heading 6 Paragraph 6,…. 30  Break, ▪ Line breaks allow you to decide where the text will break on a line or continue to the end of the window. ▪ A is an empty Element, meaning that it may contain attributes but it does not contain content. ▪ The element does not have a closing tag. 31  Break, Example Page Heading 1 Heading 1 Paragraph 1,…. Paragraph 1, Line 2 Line 3 …. Line 2 Line 3 …. 32  Horizontal Rule, ▪ The element causes the browser to display a horizontal line (rule) in your document. ▪ does not use a closing tag,. 33  Horizontal Rule, Attribute Description Default Value Height of the rule in SIZE 2 pixels pixels Width of the rule in WIDTH pixels or percentage 100% of screen width Draw the rule with a Not set NOSHADE flat look instead of a 3D look (3D look) Aligns the line (Left, ALIGN Center Center, Right) Sets a color for the COLOR Not set rule (IE 3.0 or later) 34  Horizontal Rule, Example Page Heading 1 Heading 1 Paragraph 1,…. Paragraph 1, Line 2 Line 2 Line 3 ______________________ _____ Line 3 35  Character Formatting In this chapter you will learn how to enhance your page with Bold, Italics, and other character formatting options. Objectives Upon completing this section, you should be able to 1. Change the color and size of your text. 2. Use Common Character Formatting Elements. 3. Align your text. 4. Add special characters. 5. Use other character formatting elements. 36  Bold, Italic and other Character Formatting Elements ▪ Two sizes bigger ▪ The size attribute can be set as an absolute value from 1 to 7 or as a relative value using the “+” or “-” sign. Normal text size is 3 (from -2 to +4). ▪ Bold ▪ Italic ▪ Underline ▪ Color = “#RRGGBB” The COLOR attribute of the FONT element. E.g., this text has color ▪ Preformatted Text enclosed by PRE tags is displayed in a mono-spaced font. Spaces and line breaks are supported without additional elements or special characters. 37  Bold, Italic and other Character Formatting Elements ▪ Emphasis Browsers usually display this as italics. ▪ STRONG Browsers display this as bold. ▪ TELETYPE Text is displayed in a mono-spaced font. A typewriter text, e.g. fixed- width font. ▪ Citation represents a document citation (italics). For titles of books, films, etc. Typically displayed in italics. (A Beginner's Guide to HTML) 38  Bold, Italic and other Character Formatting Elements One One Size Larger - Normal – One Size Larger - Normal Size Smaller – Bold - italics - Underlined - One Size Colored Smaller Emphasized - Strong - Tele Bold - italics - Type Underlined - Colored Emphasized - Strong - Tele Type 39 Aligning Text  The ALIGN attribute can be inserted in the and tags to right justify, center, or left justify the text  For example, The New York Times would create a centered heading of the largest size Comment Statements  Comment statements are notes in the HTML code that explain the important features of the code  The comments do not appear on the Web page itself but are a useful reference to the author of the page and other programmers  To create a comment statement use the