Web Site Design & Multimedia Systems Basic Lecturer: Dr. EMAD OTHMAN 1 Course Aim This course prepares students with necessary skills for building web sites. These skills help students apply business objectives to the different components of a business Web site. The course builds on skills and concepts from other courses on programming, E-business, Databases, Systems and analysis and design, etc. This course prepares students with necessary skills for Categorization of multimedia, Usage / Application, Commercial Uses, Entertainment and fine arts, JournalismDr.and Document Imaging.4 Emad Osman Lecture Schedule This course covers everything from basic website to banner ads and interactive ecommerce sites. The course covers basic web site design, navigation, and construction. Course Objectives 2 Course Aim (Cont d) This course covers everything from basic media to the content that uses a combination of different content forms. The term Multimedia can be used as a noun (a medium with multiple content forms) or as an adjective describing a medium as having multiple content forms. The term is used in contrast to media which use only elementary computer display such as text-only, or traditional forms of printed or handproduced material. Multimedia includes a combination of Text, Audio, Still Images, Animation, Video, Or Interactivity Content 3 Forms. Introduction to usability Web user experience Usability navigation convention Tabs and pull down menus Drop Down Menus Page layout and visual design usability guideline Homepage guideline Homepage guideline continued Form design, search and feedback Writing style and web content guideline Flash usability guideline Usability testing Accessibility guideline 5 Project Presentation Tutorial (Lab) Schedule Introduction the flash authoring tool Creating and modifying simple and complex graphics Understanding animation (shape, frame by frame technique) Building button for interactivity Basic interactivity using behaviors Adding sound,adding video Building complexity animation Advanced buttons and event detection Controlling multiple timelines Managing outside communication, Controlling movie clip and sound 6 Multimedia Systems 1 Categorization of multimedia 2 Major characteristics of multimedia 3 Terminology 3.1 History of the term 3.2 Word usage and context 4 Usage / Application 4.1 Creative industries 4.1.1 Commercial Uses 4.1.2 Entertainment and fine arts 4.1.3 Education 4.1.4 Journalism 4.1.9 Document imaging 7 Tutorial With you can create your own Web site. This tutorial teaches you everything about. is easy to learn - You will enjoy it. 8 Tutorial HOME Introduction Get Started Basic Elements Attributes Headings Paragraphs Formatting Fonts Styles Links Images Tables Lists Forms Frames Iframes Colors Colornames Colorvalues Quick List 9 1
Rough Timeline of Web Technologies Documents = Web Pages documents describe web pages documents contain tags and plain text documents are also called web pages 10 13 What We need to Build a Web Site?????!!!!! Introduction What is? 16 The purpose of a web browser (like Internet Explorer or Firefox) is to read documents and display them as web pages. The browser does not display the tags, but uses the tags to interpret the content of the page: <h1>my First Heading</h1> <p>my first paragraph.</p> 11 14 Tags 5 Web Development to the next level Documents = Web Pages Artisteer Xampp SWISH Max Photoshop Dreamweaver Hosting Server $$$$$ is a language for describing web pages. stands for Hyper Text Markup Language is not a programming language, it is a markup language A markup language is a set of markup tags uses markup tags to describe web pages 12 17 Example Explained markup tags are usually called tags tags are keywords surrounded by angle brackets like tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag is the end tag Start and end tags are also called opening tags and closing tags 15 The text between and describes the web page The text between and is the visible page content The text between <h1> and </h1> is displayed as a heading The text between <p> and </p> is displayed as a paragraph 18 2
Basic - 4 Examples Headings What You Need You don't need any tools to learn You don't need an editor You don't need a web server You don't need a web site 19 Editing Paragraphs Examples headings are defined with the <h1> to <h6> tags. Example <h1>this is a heading</h1> <h2>this is a heading</h2> <h3>this is a heading</h3> tags are not case sensitive: <H> means the same as <h> 22 Headings Examples 25 Links can be written and edited using many different editors like Dreamweaver and Visual Studio. links are defined with the <a> tag. Example <a href="http://www.google.com">this is a link</a> However, in this tutorial we use a plain text editor (like Notepad) to edit. Note: The link address is specified in the href attribute. Using a plain text editor is the best way to 20 learn..htm or. File Extension? 23 Paragraphs When you save an file, you can use either the.htm or the.html file extension. There is no difference, it is entirely up to you. 21 26 Links Example paragraphs are defined with the <p> tag. Example <p>this is a paragraph.</p> <p>this is another paragraph.</p> 24 27 3
Images Element Syntax images are defined with the <img> tag. Example <img src="w3schools.jpg" width="104" height="142" /> <img src="images/ w3schools.jpg " width="104" height="142" /> Note: The name and the size of the image are provided as attributes. 28 Images Example Example Explained An element starts with a start tag / opening tag An element ends with an end tag / closing tag The element content is everything between the start and the end tag Some elements have empty content Empty elements are closed in the start tag Most elements can Dr. Emad Osmanhave attributes 31 Nested Elements Elements 32 Document Example documents are defined by elements. 30 34 35 Example Explained The element: <p>this is my first paragraph.</p> <p>this is my first paragraph.</p> The element content is: This is my first paragraph. The element: <p>this is my first paragraph.</p> The element defines the body of the document. The element has a start tag and an end tag. documents consist of nested elements. 29 The element has a start tag <p> and an end tag </p>. Example Explained Most elements can be nested (can contain other elements). The <p> element: <p>this is my first paragraph.</p> The <p> element defines a paragraph in the document. The example above contains 3 elements. The element defines the whole document. The element has a start tag and an end tag. 33 The element content is another element (the body 36 element). 4
Don't Forget the End Tag Some elements might display correctly even if you forget the end tag: <p>this is a paragraph <p>this is a paragraph The example above works in most browsers, because the closing tag is considered optional. Never rely on this. Many elements will produce unexpected results and/or Dr. Emad Osman errors if you forget the end tag. Attribute Example Headings links are defined with the <a> tag. The link address is specified in the href attribute: Example <a href="http://www.google.com">this is a link</a> Tip: Use Lowercase Attributes 37 Empty Elements Attribute names and attribute values are case-insensitive. 40 Always Quote Attribute Values elements with no content are called empty elements. Attribute values should always be enclosed in quotes. <br> is an empty element without a closing tag (the <br> tag defines a line break). Double style quotes are the most common, but single style quotes are also allowed. Tip: In X, all elements must be closed. Adding a slash inside the start tag, like <br />, is the proper way of closing empty elements in X (and XML). Tip: In some rare situations, when the attribute value itself contains quotes, it is necessary to use single quotes: name='john "ShotGun" Nelson' 38 Attributes 41 39 43 Headings Examples 44 Headings Are Important in documents Attributes Reference Use headings for headings only. Don't use headings to make text BIG or bold. elements can have attributes Attributes provide additional information about element Attributes are always specified in the start tag Attributes come in name/value pairs like: name="value" Headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading. Example <h1>this is a heading</h1> <h2>this is a heading</h2> <h3>this is a heading</h3> Note: Browsers automatically add some empty space (a margin) before and after each heading. Search engines use your headings to index the structure and content of your web pages. Since users may skim your pages by its headings, it is important to use headings to show the document structure. 42 H1 headings should be used as main headings, followed by H2 headings, then the less important H3 45 headings, and so on. 5
Lines Comments Example Paragraphs The <hr /> tag creates a horizontal line in an page. documents are divided into paragraphs. Paragraphs are defined with the <p> tag. Example <p>this is a paragraph</p> <p>this is another paragraph</p> The hr element can be used to separate content: Example <p>this is a paragraph</p> <hr /> <p>this is a paragraph</p> <hr /> <p>this is a paragraph</p> Note: Browsers automatically add an empty line before and after a paragraph. 46 49 Tip - How to View Source Lines Example 52 Paragraphs Examples Have you ever seen a Web page and wondered "Hey! How did they do that?" To find out, right-click in the page and select "View Source" (IE) or "View Page Source" (Firefox), or similar for other browsers. 47 Comments This will open a window containing the code of the page. 50 Tag Reference 53 Line Breaks Use the <br /> tag if you want a line break (a new line) without starting a new paragraph: Example <p>this is<br />a para<br />graph with line breaks</p> Comments can be inserted into the code to make it more readable and understandable. Comments are ignored by the browser and are not displayed. Comments are written like this: Example <!-- This is a comment --> Note: There is an exclamation point after the opening bracket, but Dr.not before the closing bracket. Emad Osman 48 51 The <br /> element is an empty element. It has no end tag. 54 6
Line Breaks Example Formatting Tags "Computer Output" Tags uses tags like <b> and <i> for formatting output, like bold or italic text. These tags are called formatting tags. Remark Often <strong> renders as <b>, and <em> renders as <i>. 55 58 61 Citations, Quotations, and Definition Tags Formatting Tags Tag Reference However, there is a difference in the meaning of these tags: <b> or <i> defines bold or italic text only. 56 Text Formatting <strong> or <em> means that you want the text to be rendered in a way that the user understands as "important". Today, all major browsers render strong as bold and em as italics. However, if a browser one day wants to make a text highlighted with the strong feature, it might be cursive for example and not bold! 59 62 Preformatted Text Text Formatting Tags 57 This example demonstrates how you can control the line breaks, spaces, and character widths with the <pre> tag. 60 <pre> This is preformatted text. It preserves both spaces and line breaks and shows the text in a monospace font. </pre> <p>the pre tag is good for displaying computer code:</p> <pre> for i = 1 to 10 print i next i </pre> 63 7
Text Direction Computer Output Tags This example demonstrates how to change the text direction. This example demonstrates how different computer output tags will be displayed. <code>computer code</code> <br /> <kbd>keyboard input</kbd> <br /> <tt>teletype text</tt> <br /> <samp>sample text</samp> <br /> <var>computer variable</var> <br /> <p> <b>note:</b> These tags are often used to display computer/ programming code on the page. </p> 64 67 70 Deleted and Inserted Text Address This example demonstrates how to mark a text that is deleted (strikethrough) or inserted (underscore) to a document. This example demonstrates how to write an address in an document. <address> Donald Duck<br> BOX 555<br> Disneyland<br> USA </address> Fonts Example <p> If your browser supports bidirectional override (bdo), the next line will be written from the right to the left (rtl): </p> <bdo dir="rtl"> Here is some backward text </bdo> 65 <p> a dozen is <del>twenty</del> <ins>twelve</ins> pieces </p> <p> Most browsers will <del>overstrike</del> deleted text and <ins>underscore</ins> inserted text. </p> <p> Some older browsers will display deleted or inserted text as plain text. </p> Styles - CSS CSS is used to style elements. 68 Abbreviations and Acronyms This example demonstrates how to handle an abbreviation or an acronym. 71 CSS is used to style elements Example Fonts <abbr title="united Nations">UN</abbr> <br /> <acronym title="world Wide Web">WWW</acronym> <p>the title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.</p> The <font> Tag Should NOT be Used The <font> tag is deprecated in 4, and removed from 5. The World Wide Web Consortium (W3C) has removed the <font> tag from its recommendations. In 4, style sheets (CSS) should be used to define the layout and display properties for many elements. The example below shows how the could look by using the <font> tag: 66 69 72 8
Style Example Font, Color and Size Styling with CSS CSS was introduced together with 4, to provide a better way to style elements. CSS can be added to in the following ways: in Cascading Style Sheet files (CSS files) in the <style> element in the head section in the style attribute in single elements 73 Link Tags The font-family, color, and font-size properties defines the font, color, and size of the text in an element: Example <h1 style="font-family:verdana;">a heading</h1> <p style="font-family:arial;color:red;fontsize:20px;">a paragraph.</p> Tag Description <a> Defines an anchor 76 Using the Style Attribute 79 Hyperlinks (Links) It is time consuming and not very practical to style elements using the style attribute. The preferred way to add CSS to, is to put CSS syntax in separate CSS files. However, in this tutorial we will introduce you to CSS using the style attribute. This is done to simplify the examples. It also makes it easier for you to edit the code and try it yourself. 74 The text-align property specifies the horizontal alignment of text in an element: Example <h1 style="text-align:center;">center-aligned heading</h1> <p>this is a paragraph.</p> 77 Style Example Background Color Links are found in nearly all Web pages. Links allow users to click their way from page to page. A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or a new section within the current document. When you move the cursor over a link in a Web page, the arrow will turn into a little hand. Links are specified in using the <a> tag. The <a> tag can be used in two ways: 1. To create a link to another document, by using the href attribute 2. To create a bookmark inside a document, by using the name attribute 80 Link Syntax The background-color property defines the background color for an element: Example The code for a link is simple. It looks like this: <a href="url">link text</a> The href attribute specifies the destination of a link. <body style="background-color:yellow;"> <h2 style="background-color:red;">this is a heading</h2> <p style="background-color:green;">this is a paragraph.</p> <body background="images\wallpaper1.jpg"> 75 78 81 9
Links - The target Attribute Create a link attached to an image The target attribute specifies where to open the linked document. <p>create a link attached to an image: <a href="http://www.google.com.eg"> <img src="images\102.gif" alt=" tutorial" width="32" height="40" /> </a></p> The example below will open the linked document in a new browser window or a new tab: 82 Image Tags Tag <img /> <map> <area /> Description Defines an image Defines an image-map Defines a clickable area inside an image-map <a href="lastpage.htm" target="_blank">last 85 Page</a> 88 <map> Tag Example The <map> tag is used to define a client-side image-map. An image-map is an image with clickable areas. <a href="http://www.youtube.com" target="_blank">visit Youtube to download Clips!</a> <p>if you set the target attribute to "_blank", the link will open in a new browser window/tab.</p> Example <p>click on the sun or on one of the planets to watch it closer:</p> <img src="planets.gif" width="145" height="126" alt="planets" usemap="#planetmap" /> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="sun" href="sun.htm" /> <area shape="circle" coords="90,58,3" alt="mercury" href="mercur.htm" /> <area shape="circle" coords="124,58,8" alt="venus" href="venus.htm" /> </map> 83 86 Images - The <img> Tag and the Src Attribute Creating a mailto: Link In, images are defined with the <img> tag. The <img> tag is empty, which means that it contains attributes only, and has no closing tag. To display an image on a page, you need to use the src attribute. Src stands for "source". Example: 84 The value of the src attribute is the Uniform Resource Locator (URL) of the image you want 87 to display. 89 <area> Tag The <area> tag defines an area inside an image-map (an image-map is an image with clickable areas). The <area> element is always nested inside a <map> tag. Attribute Values Value Description x1,y1,x2,y2 Specifies the coordinates of the left, top, right, bottom corner of the rectangle (for shape="rect") x,y,radius Specifies the coordinates of the circle center and the radius (for shape="circle") Specifies the coordinates of the edges of the polygon. If the first and last coordinate pairs are x1,y1,x2,y2,.. not the same, the browser will add the last,xn,yn coordinate pair to close the polygon (for shape="poly") 90 10
Assignment #1 (Solve) Table Example 91 92 Tables 93 94 97 Assignment #2 Define table cells that span more than one row or one column, as shown in the Figure 95 98 Assignment #2 (Solve) <table border="1"> <td> <p>this is a paragraph</p> <p>this is another paragraph</p> </td> Define table cells that span more than one row or one column, as shown in the Figure <td>this cell contains a table: <table border="1"> <td>a</td> <td>b</td> <th>first Name:</th> <td>bill Gates</td> <th rowspan="2">telephone:</th> <td>555 77 854</td> <td>555 77 855</td> </table> <td>bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> Assignment #1 Tables are defined with the <table> tag. A table is divided into rows (with the tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc. <th>name</th> <th colspan="2">telephone</th> <table border="1"> <th>header 1</th> <th>header 2</th> <td>row 1, cell 1</td> <td>row 1, cell 2</td> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </table> <table border="1"> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </table> </table> <h4>cell that spans two rows:</h4> <table border="1"> <h4>cell that spans two columns:</h4> <table border="1"> <table border="1"> <td>row 1, cell 1</td> <td>row 1, cell 2</td> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </table> Tables and the Border Attribute Table Tags 96 <td>c</td> <td>d</td> </table> </td> <td>this cell contains a list <ul> <li>apples</li> <li>bananas</li> <li>pineapples</li> </ul> </td> <td>hello</td> </table> 99 11
Ordered list How to create an ordered list in an document Assignment # 3 An un ordered list starts with the <ol> tag. Each list item starts with the <li> tag. <h4>an Ordered List:</h4> <ol> <li>coffee</li> <li>tea</li> <li>milk</li> </ol> 100 103 You can display different kinds of bullets in an unordered list by using the type attribute. Lists <h4>disc bullets list:</h4> <ul type="disc"> <li>apples</li> <li>bananas</li> <li>lemons</li> </ul> The most common lists are : An ordered list: 1.The first list item 2.The second list item 3.The third list item An unordered list: List item List item List item 106 Assignment # 3 (Solve) <h4>circle bullets list:</h4> <ul type="circle"> <li>apples</li> <li>bananas</li> <li>lemons</li> </ul> <h4>square bullets list:</h4> <ul type="square"> <li>apples</li> <li>bananas</li> <li>lemons</li> </ul> 101 Unordered list How to create an unordered list in an document. 104 107 105 108 List tags An un ordered list starts with the <ul> tag. Each list item starts with the <li> tag. <h4>an Unordered List:</h4> <ul> <li>coffee</li> <li>tea</li> <li>milk</li> </ul> 102 12
2- Check Boxes Forms and Input 5- Buttons A user can select or deselect a check box. Buttons are common items on a form. Forms are used to select different kinds of user input. <form action=""> <input type="button"value="hello world!"> </form> Form elements are elements that allow the user to enter information in a form (like text fields, text area fields, drop-down menus, radio buttons, check boxes, and so on). 109 112 3- Radio Buttons Input tag and attributes 115 6- Field set When a user clicks a radio button, that button becomes selected, and all other buttons in the same group become deselected. A field set is a grouping of data fields. The most used form tag is the <input> tag. The type of input is specified with the type attribute. The following types are the most commonly used input types. 110 1- Text Fields 113 4- Drop-Down List Text fields are used when you want the user to type letters, numbers, and so on in a form. 111 <form action=""> <select name="cars"> <option value="volvo">volvo</option> <option value="saab">saab</option> <option value="fiat">fiat</option> <option value="audi">audi</option> </select> </form> </html 116 117 Form tags A drop-down list is a selectable list. In most browsers, the width of the text field is 20 characters by default. 114 13
<marquee behavior="scroll" direction="left" scrollamount="1">slow scroll speed</marquee> <marquee behavior="scroll" direction="left" scrollamount="10">medium scroll speed</marquee> <marquee behavior="scroll" direction="left" scrollamount="20">fast scroll speed</marquee> 118 You can create a scrolling marquee (i.e. scrolling text or scrolling images) by using the <marquee> tag. You can make the text/images scroll from right to left, left to right, top to bottom, or bottom to top - it's your choice! 119 <marquee behavior="slide" direction="left">your slide-in text goes here</marquee> <marquee behavior="scroll" direction="left">your scrolling text goes here</marquee> <marquee behavior="alternate">your bouncing text goes here</marquee> <marquee behavior="scroll" direction="up">your upward scrolling text goes here</marquee> 120 121 <marquee behavior="scroll" direction="left"><img src="/pix/smile.gif" width="100" height="100" alt="smile /> </marquee> 122 <marquee behavior="scroll" direction="left" id="mymarquee"> <p>go on... press the button!</p> </marquee> <input type="button" value="stop Marquee" onclick="document.getelementbyid('mym arquee').stop();"> <input type="button" value="start Marquee" onclick="document.getelementbyid('mym arquee').start();"> 123 124 ON Line Web based <embed src="http://www.clocktag.com/cs/d144.swf" width="335" height="232" wmode="transparent" type="application/xshockwave-flash"></embed> </hr> <embed src="http://www.clocktag.com/cs/dtclassic.swf" width="165" height="55" wmode="transparent" type="application/xshockwave-flash"></embed> 125 OFF Line Your System <script language="javascript"> var date = new Date(); document.write("<b>system date and Time is:</b> "+ date); </script> 126 14
Q&A Dr. EMAD OSMAN emad91@hotmail.com 127 15