EEE 3112 Introduction to Multimedia Application Technology Chapter
- Slides: 41
EEE 3112 Introduction to Multimedia Application & Technology Chapter 4: Web Development – Part 1: HTML, CSS & The Composer by Muhazam Mustapha, October 2012
Learning Outcome • By the end of this chapter, students are expected to be ready to demonstrate the required first part skills for CO 4: – Writing HTML file in raw text – Understanding of CSS formatting – Develop web pages using a composer
Chapter Content • Basic Theory on Raw HTML • Basic Theory on CSS • Adobe Dreamweaver CS 6: – Workspace and Tools – Templates
World Wide Web
Definitions • World Wide Web: the international connection of networks – also called internet • Hypertext Markup Language (HTML): the standard for defining web pages • Web page: the browser render-able files written in HTML • Web site: the portal/host that houses web pages
Hypertext Markup Language • HTML is the standard language for defining web pages • Current version of HTML is HTML 5 • Web developers adopt MVC (model-viewcontrol) design pattern in their approach • In MVC approach HTML plays the role of model • Due to MVC approach, some HTML tags have been deprecated and some are added in HTML 5
Hypertext Markup Language
Hypertext Markup Language • HTML is merely a text file • You can edit HTML directly as raw using any text editors • Browsers are the translators / compilers of the HTML files, but the rules of HTML standard is not imposed so strictly by them – Means browsers still can display (render) the content as correct HTML with some non-adherence – If they are so picky, they will get less users • Current version of HTML 5 is moving toward a more strict rule of XHTML – but this is still in transition period
Tags • The core of HTML contents are TAGS • Part of the rules imposed by XHTML is that every content must be part of a tag [*] • However, the XHTML part of HTML content are not following the proper HTML tag standard • For example, XHTML requires HTML to start with the following: – <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Hello World</title> </head> [*] This means we are not going to follow this rules strictly. Not HTML
Tags Anatomy • Tags follow this format: – Opening tag: <tag_name> – Closing tag: </tag_name> • Tags can be nested but not overlapped • Many tags can have text content: – <tag_name>. . . text. . . </tag_name> • If the tag doesn’t need any text content, it can be simplified as follows: – Line break tag: </br>
HTML Skeletal Anatomy • Now that you know about tags, this is the simplest HTML file that can be built using tags: <html> <head> <title>Page Title</title> </head> <body>. . . Page Content. . . </body> White spaces are space bar, tabs and line breaks (enter / return key) </html> • The way we structure or format the HTML text is not important – any white space used formatting will be collapsed into just one single white space
Tags Attribute • Besides content (text between opening and closing tags), tags can also be modified with attribute values an attribute • Syntax: – <tag_name attr_name="value"></tag_name> • For example the image tag as follows: – Image tag: <img src="pic. jpg" /> – The above src attribute is given the value of pic. jpg which is the filename of the image to use
URL Referencing Syntax • Many tag attributes are references to resources • URL (Uniform Resource Locator) is the way to reference resources in the internet • There many types of resources and ways to reference them: – HTTP (Hypertext Transfer Protocol): [http: //en. wikipedia. org/wiki/Uniform_resource_identifier] – FTP (File Transfer Protocol): [http: //en. wikipedia. org/wiki/File_Transfer_Protocol] – Email: [http: //en. wikipedia. org/wiki/Email_address] – File: [http: //en. wikipedia. org/wiki/File_URI_scheme]
URL Referencing Syntax • For our class we will only cover HTTP • Syntax: – http: //subdomain. primary_domain. TLD: port_no/subfolder/. . . more subfolder. . . /filename. ext#anchor • Subdomain – domains created within the primary domain – default is www • Primary domain – a realm of administrative autonomy, authority, or control on the Internet [Wikipedia definition]
URL Referencing Syntax • TLD (top level domain): . net, . com. my, etc • Subfolders are optional – specify when needed • Anchor is a specific location in a web page • URL can be specified as absolute (in full) or relative (starting from a point) – can use ". . " to move up or down
Syntax of Some Common Tags • Minimal image tag: – <img src="source_URL" /> • Minimal hyperlink tag: – <a href="target_URL">Display Text</a> • Minimal table: Define table rows – <table> <tr><td>content</td><td>content</td></tr> </table> Define table cells and content
List of Important Tags • • • <!-- --> <p> <img /> <table>, <tr>, <td> <a> <strong> <em> <hr /> • • <html> <body> <head> <title> <iframe> <div> <span> <script> • <ol>, <ul>, <li> • <form> • <h 1>, <h 2>, <h 3>, <h 4>, <h 5>, <h 6>
Tags in HTML 5 • New – – – <video> <svg> <mathml> <button> <canvas> etc • Deprecated – – – <center> <b> <i> <font> <frame> etc
Entity • Specifying entity in HTML is the way to include hard-to-type characters • Syntax: &entity_name; or &#x 4_digit_hex_unicode; • Example: Since the character “<” and “>” are used as tag markers, then the only way to specify them literally in the web content is by entities – < and > respectively • Example: Since the character & is used as entity marker, then the best way to specify it literally is & – most browsers are smart enough to understand a standalone ampersand though
Unicode on the Web • Unicode is the standardization of encoding of possibly all characters or symbols ever existed • Unicode of characters can be found in: – [http: //www. unicode. org/] • Examples: – Arabic: [http: //www. unicode. org/charts/PDF/U 0600. pdf] – Hebrew / Jewish: [http: //www. unicode. org/charts/PDF/U 0590. pdf] – Rejang (Bengkulu Indonesia): [http: //www. unicode. org/charts/PDF/UA 930. pdf] – Thai: [http: //www. unicode. org/charts/PDF/U 0 E 00. pdf] – Box Drawing: [http: //www. unicode. org/charts/PDF/U 2500. pdf] – Chemistry: [http: //www. unicode. org/charts/PDF/U 1 F 700. pdf]
Unicode Entity • HTML entity can be added in HTML text anywhere content can be put • Should one need to put special characters in HTML, predefined entity can be used – List and syntax: [http: //en. wikipedia. org/wiki/List_of_XML_and_HTML_character_entity_references] • Or, custom Unicode characters can be used • Example: To put Greek character lambda (λ) and division sign (÷) – &#x 03 BB; and &#x 00 F 7; respectively
Cascading Style Sheet
Cascading Style Sheet • In the MVC pattern, CSS plays the role as View • In the modern approach to web design, HTML file should contain only the structure of the web page and NOT the formatting • Formatting is left to CSS • The current version of CSS is 4. 0 but the currently supported is 3. 0 • The formatting with CSS 3. 0 is virtually unlimited: color, background, font size, drop shadow, rotating, etc
Location to put style (CSS) • As style attribute in tags: – All tags can have style attribute – Example: <p style="font-size: x-large; ">My name is</p>
Location to put style • As <style> tag section nested in <head>: – This will centralize styles in one place in the same file – Example: <html xmlns="http: //www. w 3. org/1999/xhtml"> <head> <style type="text/css">. Main. Title { font-family: Tahoma, Geneva, sans-serif; font-weight: bold; text-align: center; } </style> </head> <body> <p class="Main. Title">Muhazam</p> <body> </html> CSS
Location to put style • As separate CSS text file: – This enables many files to have standard formatting across one portal – Linking syntax: <html xmlns="http: //www. w 3. org/1999/xhtml"> <head> <link rel=Style. Sheet href="My. Style. css" External CSS type="text/css" /> </head> <body> <p class="Main. Title">Muhazam</p> <body> </html>
Selector • A SELECTOR is needed if we put CSS as <style> tag or as separate. css files because browser needs to be told which style to be applied where • If the style is to be repeated on many tags, use class (attribute) selector in the tags – denoted as ‘. ’ (dot) in CSS • If the style is to be used by only one specific tag, use id (attribute) selector in the tag (one id cannot be repeated in one HTML file) – denoted as ‘#’ in CSS
Selector • style. css: #main. Title { text-align: center; font-weight: bold; }. pop. Up. Link { border-bottom: 1 px dotted; } • sample. html: . . . <body>. . . <p id="main. Title">Hello!!!</p> <a class="pop. Up. Link" href="pop 1. html">Pop Up Link 1</a> <a href="normal. html">Normal Link</a> <a class="pop. Up. Link" href="pop 2. html">Pop Up Link 2</a>. . . </body>. . .
Redefining Tags Formatting • We can redefine and standardize the default formatting of tags by using CSS at style tag or external one • For example, by default a hyperlink would be formatted as underlined blue colored text – we can redefine them to become dotted blue underline as follows in a CSS file: – a { text-decoration: none; border-bottom: 1 px dotted; } remove underlining put dotted underlining
DIV and SPAN • There are many times that web developers need to have special tags for customization that are not provided by the standard HTML tags • <div> and <span> tags can be used as generic tags that can be customized according to its id or class • <div> – generic tag that is customizable formatting that has line break before and after it (like <table> tag) • <span> – generic tag that is customizable formatting that follows the line flow (like <p> tag)
Cascading Effect • As mentioned before, CSS styles can be defined at different locations • If styles at different locations define different formatting parameters for the same class, id or tag, the effect is additive (accumulated) • If styles at different locations define the same and clashing formatting parameters for the same class, id or tag – Definitions at style attribute take the highest precedence – Definitions in style tag overwrite the ones in separate CSS files
Cascading Effect • Example of accumulated style of different parameters: – style. css content: #test. Style { font-weight: bold; } – HTML file: <style> #text. Style { font-style: italic; } </style>. . . <p id="test. Style" style="text-decoration: underline"> Test Text </p> Formatted with bold, . . . italic & underline
Cascading Effect • Example of overwritten style of the same parameter: – style. css content: #test. Style { font-size: 18 px; } – HTML file: <style> #text. Style { font-size: 20 px; } </style>. . . <p id="test. Style" style="font-size: 24 px"> Test Text </p> Font size will be. . . 24 px
CSS Format Categories • For this class, you are expected to learn the vast options of CSS formatting yourselves by Googling the right keyword • So far we have seen formatting of text as follows: – – – – (italic): text-style (bold): font-weight (underline): text-decoration (text color): color (text size): font-size (text alignment): text-align etc
CSS Format Categories • There are many other formatting can be found as the following categories • Bordering – – – border size 3 D style: inset, outset, groove, etc color style: dotted, dashed, solid, doubled, etc Look in: http: //www. w 3 schools. com/css_border. asp
CSS Format Categories • Positioning & Sizing of Block Elements (DIV) – – Positioning mode: static, absolute, relative, fixed Location: top, bottom, left, right Sizing: width, height Suggested URL to read: • http: //www. w 3 schools. com/css_positioning. asp • http: //www. alistapart. com/articles/css-positioning-101/ • Shading/Background & Shadowing • Shadowing: http: //www. w 3 schools. com/cssref/css 3_pr_boxshadow. asp • Background: http: //www. w 3 schools. com/css_background. asp • Alpha channel: http: //stackoverflow. com/questions/12216572/addalpha-channel-to-a-given-color
CSS Format Categories • Padding & Margining – Padding is the gap between the content and its border • http: //www. w 3 schools. com/css_padding. asp – Margin is the gap between the border and the outside content • http: //www. w 3 schools. com/css_margin. asp
Templates • With the knowledge you have about HTML and CSS you can create your own web page from scratch • However, the best, fastest and recommended way to get a cool-looking website is by starting with a template then editing the content and images (CSS normally doesn’t need to adjust) • There are thousands of free templates out there; examples: – http: //www. templatesbox. com/templates. htm – http: //www. quackit. com/html/templates/ – http: //www. templateworld. com/free_templates. html
Adobe Dreamweaver CS 6
Workspace Create new HTML
Workspace To see both HTML and its rendering, click View Code and Design Code Design Rendering Autogenerated content Property Panels
Chapter 1 introduction to multimedia
Multimedia becomes interactive multimedia when
Linear multimedia presentation
Esa multimedia.esa.int./multimedia/virtual-tour-iss
Eee kuet
Eee 360
Ankara university
Eee 121
Eee 431
Eee 302
Eee 302
Tahvel.edu.eee
Eee 431
Eee 431
Eee 431
Eee 431
Eee 145
Lecc
Eee
Eee 431
Eee 431
Eee g
Quality factor of rlc circuit
Vectoral
Eee
ëëë
Eee
Android asus eee pc
Hku eee lab
Pdfcute
Diu eee faculty
String conversion
Eee components
Eee office
Asus xgu2008
Eee metu
Eee components
Eee 202
Is text multimedia
Advantages and disadvantages of multimedia
Issues for multimedia authoring
Identify media and graphic software
