Tizen Web UI Technologies (Tizen Ver. 2.3)
|
|
- Caitlin Hall
- 6 years ago
- Views:
Transcription
1 Tizen Web UI Technologies (Tizen Ver. 2.3) Spring 2015 Soo Dong Kim, Ph.D. Professor, Department of Computer Science Software Engineering Laboratory Soongsil University Office Mobile
2 Web Technologies for Tizen Web UI HTML Markup language to form building blocks of web pages CSS Style sheet to define how HTML elements are to be displayed JavaScript Programming language to define behaviors of web pages JQuery JavaScript library to simplify JavaScript programming 2
3 Unit 5-1. HTML & CSS 3
4 What is HTML? Stands for Hyper Text Markup Language A markup language for describing web documents To describe HTML documents Each HTML tag describes different document content. 4
5 Key Usage of HTML tags Layout Text Style Element Form List HTML Tags 5
6 HTML Tags - Layout To define a structure of an HTML document Key Tags <header> To represent a container for introductory content <section> To define a section in a document <div> To define a division or a section in an HTML document <footer> To define a footer for a document or section 6
7 HTML Tags Text Style To define text styles of an HTML documents Key Tags <p> To define a paragraph <h1> - <h6> To define HTML headings <i> To define a part of text in an alternate voice or mood 7
8 HTML Tags - Element To define widgets in an HTML document Key Tags <a> To define a hyperlink, which is used to link from one page to another <button> To define a clickable button <canvas> To draw graphics via scripting JavaScript <img> To define an image in an HTML page 8
9 HTML Tags - Form To specify a field where the user can enter data Key Tags <form> To contain one or more form elements <input> To specify an input field where the user can enter data <select> To create a drop-down list <option> To define an option in a select list <textarea> To define a multi-line text input control. 9
10 To show items as a list Key Tags <ul> HTML Tags - List To define an unordered (bulleted) list <ol> To define an ordered list <li> To define a list item Used in ordered lists(<ol>), unordered lists (<ul>) 10
11 What is CSS? Stands for Cascading Style Sheets Define how HTML elements are to be displayed Linked Style Sheets <link rel= stylesheet type= text/css href= mystyle.css > Embedded Style Sheet <style> body { background-color: #d0e4fe; } </style> 11
12 Selector CSS Grammar To select and manipulate HTML elements Property To indicate which aspect of the element are modified Value Value of property selector property body { background-color: #FFFFFF; } value 12
13 Element Selector Selector ID Selector Class Selector Attribute Selector 13
14 Selector (Element Selector) To select elements based on the element (HTML Tag) name Example) To select all <p> elements on a page p { text-align: center; color: red; } Example) To select all <p>, <h1>, and <h2> elements on a page p, h1, h2 { text-align: center; color: red; } 14
15 Selector (ID Selector) To use the id of an HTML element to select a specific element To use # character Example) To select a specific element by given id, id_1 #id_1 { text-align: center; color: red; } 15
16 Selector (Class Selector) To select elements with a specific class name To use. symbol Example) To select elements by given class name, center.center { text-align: center; color: red; } Example) To select <p> elements having class name, center p.center { text-align: center; color: red; } 16
17 Selector (Attribute Selector) To select elements with a specific attribute To use [] symbol Example) To select <a> elements which have target attribute a[target] { background-color: yellow; } Example) To select <a> elements of which target attribute is _blank a[target= _blank ] { background-color: yellow; } 17
18 Key Categories of Property Background Border Text Formatting Margin & Padding Property 18
19 Property (Background) To define the background effects of an element Key Properties Background-color To specify the background color of an element Background-image To specify an image to use as the background of an element Background-repeat To specify repetition of the background image Background-position To specify position of the background image 19
20 Property (Border) To define the border effects of an elements Key Properties Border-style To specify what kind of border do display Dotted, Dashed, Solid, etc. Border-width To set the width of the border Border-color To set the color of the border 20
21 Property (Text Formatting) To specify format of text Key Properties Color To set the color of the text Text-align To set the horizontal alignment of a text Text-decoration To set or remove decorations from text To mostly used to remove underlines from links for design purposes Text-transform To specify uppercase and lowercase letters in a text 21
22 Property (Margin & Padding) To define the space related to HTML elements Key Properties Margin To define the space around elements Padding To define the space between the element border and the element content 22
23 Embedded CSS Code Example Output <!DOCTYPE html> <html> <head> <style> body { background-color: #d0e4fe; } h1 { color: orange; text-align: center; } p { font-family: "Times New Roman"; font-size: 20px; } </style> </head> <body> <h1>my First CSS Example</h1> <p>this is a paragraph.</p> </body> </html> 23
24 Unit 5-2. Javascript & jquery 24
25 What is JavaScript? Programming language of HTML and the Web To define behaviors of web pages To alter the document content that is displayed To interact with the user 25
26 Linked JavaScript In HTML document; JavaScript Placement <head> <script src= myjavascript.js"></script> <head> Embedded JavaScript In HTML document; <head> <script> //JavaScript Statements </script> </head> 26
27 Variables (1) 5 data types that can contain values; String Number Boolean Object Function 27
28 To use var keywords Variables (2) var str = Hello JS // Assigns string var i = 5; // Assigns number var b = true; // Assigns boolean var obj = {name: John, age: 28 } // Assigns object var date = new Date() // Assigns object var arr = [1,2,3,4] // Assigns object var func = function(){ } // Assigns function To use typeof to find the data type typeof str typeof i typeof b typeof obj typeof date typeof arr typeof func // Returns string // Returns number // Returns boolean // Returns object // Returns object // Returns object // Returns function 28
29 Operator (1) Arithmetic Operators To perform arithmetic on numbers Assignment Operators To assign values to JavaScript variables Operator Description Operator Example Same As + Addition - Subtraction * Multiplication / Division % Modules ++ Increment = x = y x = y += x += y x = x + y = x = y x = x y *= x *= y x = x * y /= x /= y x = x / y %= x %= y x = x % y -- Decrement 29
30 Comparison Operators Operator (2) To determine equality or difference between variables or values Given that x=5; Operator Description Comparing Returns == Equal to x == 8 false x == 5 true === Equal value and equal type x === 5 false x === 5 true!= Not equal x!= 8 true!== Not equal value and equal type x!== 5 true x!== 5 false > Greater than x > 8 false < Less than x < 8 true >= Greater than or equal to x >= 8 false <= Less than or equal to x <= 8 true 30
31 Examples of JavaScript To change contents of HTML elements To change CSS of HTML elements To react events in a web page 31
32 Example Content Change To replace text of a specific Source Code Output <script> function myfunction() { Gets element of which id is demo var paragraph = document.getelementbyid("demo"); paragraph.innerhtml = "Hello JavaScript!"; } <body> Sets text of the element to Hello JavaScript! <p id="demo">click the button to replace text.</p> Click Button! <button onclick="myfunction()">try it</button> </body> Invoked when the button is clicked 32
33 Example CSS Change To change CSS styles of a specific element Source Code... <script> function changetextcolor(color){ var paragraph = document.getelementbyid("p1"); paragraph.style.color= color; } <body> <p id="p1"> This is a text. </p> <button onclick="changetextcolor('red')">red</button> <button onclick="changetextcolor('blue')">blue</button> </body> Changes text color Invoked to change text color as red Invoked to change text color as blue Gets element of which id is p1 Output Click Red! Click Blue! 33
34 Example Event Handling To react to an click event occurred in a specific button Source Code Output <script> function onload() { var b1= document.getelementbyid("b1"); b1.onclick= function(){ alert('the element is clicked!'); } } </script> Gets element of which id is b1 Invoked when the page has been loaded Shows an alert page with the message Click Button! <body onload="onload()"> <button id="b1">hello JavaScript</button> </body> 34
35 OOP in JavaScript To define classes, private attributes/functions, and public attributes/functions function MyClass() { var _privateattr = "value"; function _privatemethod1() { } var _privatemethod2 = function() {}; } var self = { publicattr: "value", publicmethod: function() { console.log("publicattr: "+self.publicattr); } }; return self; 35
36 What is jquery? A JavaScript library to simplify JavaScript programming To make it much easier to use JavaScript on your website To take a lot of common tasks that require many lines of JavaScript code 36
37 JQuery Syntax Basic Syntax $ sign to access jquery (selector) to query or find HTML elements action() to be performed on the element Examples $(selector).action() $("p").hide(); //Hides all <p> elements. $(".test").hide(); // Hides all elements with class="test". $("#test").hide(); // Hides the element with id="test". 37
38 Document Ready Event To prevent jquery or JavaScript code from running before a HTML document is ready $(document).ready(function(){ //jquery or JavaScript code go here }); $(function () { //jquery or JavaScript code go here }); 38
39 jquery Selector (1) To find HTML element(s) Based on the existing CSS Selectors Element Selector ID Selector Class Selector Attribute Selector Value Selector 39
40 Element Selector jquery Selector (2) To select HTML elements based on the element name $( p").hide(); //Hides all <p> elements on a page ID Selector To use id attribute of an HTML tag to find a specific element To use # character $("#test").hide(); // Hides an element with id= test asp?filename=tryjquery_hide_show 40
41 Class Selector jquery Selector (3) To find elements with a specific class To use. character Attribute Selector $(.test").hide(); // Hides all elements with class= test To select element with a specific attribute $("p[attr=hello]").hide(); //Hides all <p> elements with attr= hello 41
42 Other Selectors jquery Selector (4) Syntax Description $("*") Selects all elements $(this) $("p.intro") $("p:first") $("ul li:first") $("ul li:first-child") $("[href]") $("a[target='_blank']") $("a[target!='_blank']") $(":button") $("tr:even") $("tr:odd") Selects the current HTML element Selects all <p> elements with class="intro" Selects the first <p> element Selects the first <li> element of the first <ul> Selects the first <li> element of every <ul> Selects all elements with an href attribute Selects all <a> elements with a target attribute value equal to "_blank" Selects all <a> elements with a target attribute value NOT equal to "_blank" Selects all <button> elements and <input> elements of type="button" Selects all even <tr> elements Selects all odd <tr> elements 42
43 jquery Action To be performed on the selected elements To get/set contents and attributes To add/remove HTML elements To manipulate CSS To handle events 43
44 jquery Action - Contents and Attributes (1) text() To set/return text of the element(s) html() To set/return html contents of the element(s) val() To set/return a value of form fields //Returns text of a element with id= id var text = $( #id").text(); //Returns HTML contents of a element with id= id var html = $( #id").html(); //Returns value of a form fields with id= id var val = $( #id").val(); //Sets text of a element with id= id as Hello jquery! $( #id").text( Hello jquery! ); //Sets HTML contents of a element with id= id as Hello jquery! $( #id").html( <p>hello jquery!</p> ); //Returns value of a form fields with id= id as value $( #id").val( value ); 44
45 jquery Action - Contents and Attributes (2) attr() To set/return attribute values //Returns a value of the href attribute var attr = $( #id").attr( href ); //Sets the value of the href attribute $( #id").attr( href, ); //Sets multiple attributes $( #id").attr( { href : title : Software Engineering Laboratory } ); 45
46 jquery Action - HTML Element (1) append() To insert content at the end of the selected element prepend() To insert content at the beginning of the selected element after() To insert content after the selected element before() To insert content before the selected element $( p ).append( some appended text. ); $( p ).prepend( some prepended text. ); $( p ).after( some text after. ); $( p ).before( some text before. ); 46
47 jquery Action - HTML Element (2) remove() To remove the selected elements and its child element(s) empty() $("#div1").remove(); To remove the child element of the selected element(s) $("#div1").empty(); 47
48 jquery Action - CSS Manipulation (1) addclass() To add one or more classes to the selected elements removeclass() To remove one or more classes from the selected elements toggle(class) To toggle between adding/removing classes from the selected elements $( div ).addclass( important ) $( div ).addclass( important blue ) // Adds an important value to a class attribute // Adds important and blue values to a class attribute $( div ).removeclass( important ) // Removes an important value from a class attribute $( div ).removeclass( important blue ) // Removes important and blue values from a class attribute $( div ).toggleclass( important ) $( div ).toggleclass( important blue ) // Adds or Removes an important value from a class attribute // Adds or Removes important and blue values from a class attribute ame=tryjquery_dom_toggleclass 48
49 jquery Action - CSS Manipulation (2) css() To set/return on or more style properties for the selected element(s) // Returns the background-color value var bgcolor = $( p ).css( background-color ) // Sets the background-color value as yellow $( p ).css( background-color, yellow ) // Sets multiple style properties $( p ).css( { background-color : yellow }, { font-size : 200% } ) 49
50 jquery Action - Event Handling Event Method Syntax Key Event Methods $(selector).eventmethod(function(){ // Event handling code goes here! }); Mouse Events Keyboard Events Form Events click() keypress() submit() dblclick() keydown() change() mouseenter() keyup() focus() mouseleave() blur() ame=tryjquery_event_blur_alert 50
51 Example (1) To handle click events To Change CSS Style and text of a HTML element Source Code JavaScript <script> $(document).ready(function(){ $("#btn1").click(function(){ $("#p1").text("hello world!"); }); Sets text as Hello world! $("#btn2").click(function(){ $("#p1").css("color", "blue"); }); Changes text color as blue }); </script> Invoked when #btn1 button clicked Invoked when #btn2 button clicked HTML <body> <p id="p1">this is a paragraph.</p> <button id="btn1"> Set Text </button> <button id="btn2"> Set CSS Style </button> </body> 51
52 Example (2) Output Initial Screen Case 1: After Set Text button clicked Case 2: After Set CSS Style button clicked 52
53 Thank You! 53
SEEM4570 System Design and Implementation Lecture 04 jquery
SEEM4570 System Design and Implementation Lecture 04 jquery jquery! jquery is a JavaScript Framework.! It is lightweight.! jquery takes a lot of common tasks that requires many lines of JavaScript code
More informationJQUERY. jquery is a very popular JavaScript Library. jquery greatly simplifies JavaScript programming. jquery is easy to learn.
JQUERY jquery is a very popular JavaScript Library. jquery greatly simplifies JavaScript programming. jquery is easy to learn. JQuery 1/18 USING JQUERY Google CDN:
More informationCS7026. Introduction to jquery
CS7026 Introduction to jquery What is jquery? jquery is a cross-browser JavaScript Library. A JavaScript library is a library of pre-written JavaScript which allows for easier development of JavaScript-based
More informationIntroduction to. Maurizio Tesconi May 13, 2015
Introduction to Maurizio Tesconi May 13, 2015 What is? Most popular, cross- browser JavaScript library Focusing on making client- side scripcng of HTML simpler Open- source, first released in 2006 Current
More informationProgrammazione Web a.a. 2017/2018 HTML5
Programmazione Web a.a. 2017/2018 HTML5 PhD Ing.Antonino Raucea antonino.raucea@dieei.unict.it 1 Introduzione HTML HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text
More informationCS197WP. Intro to Web Programming. Nicolas Scarrci - February 13, 2017
CS197WP Intro to Web Programming Nicolas Scarrci - February 13, 2017 Additive Styles li { color: red; }.important { font-size: 2em; } first Item Second
More informationChapter 9 Introducing JQuery
Chapter 9 Introducing JQuery JQuery is a JavaScript library, designed to make writing JavaScript simpler and so it is useful for managing inputs and interactions with a page visitor, changing the way a
More informationSession 17. jquery. jquery Reading & References
Session 17 jquery 1 Tutorials jquery Reading & References http://learn.jquery.com/about-jquery/how-jquery-works/ http://www.tutorialspoint.com/jquery/ http://www.referencedesigner.com/tutorials/jquery/jq_1.php
More informationNetworks and Web for Health Informatics (HINF 6220) Tutorial 8 : CSS. 8 Oct 2015
Networks and Web for Health Informatics (HINF 6220) Tutorial 8 : CSS 8 Oct 2015 What is CSS? o CSS (Style Sheet) defines how HTML elements are formatted and displayed. o It helps you easily change an HTML
More informationPHP / MYSQL DURATION: 2 MONTHS
PHP / MYSQL HTML Introduction of Web Technology History of HTML HTML Editors HTML Doctypes HTML Heads and Basics HTML Comments HTML Formatting HTML Fonts, styles HTML links and images HTML Blocks and Layout
More informationB. V. Patel Institute of Business Management, Computer & Information Technology, UTU
Bachelor of Computer Application (Sem - 6) 030010602 : Introduction to jquery Question Bank UNIT 1 : Introduction to jquery Short answer questions: 1. List at least four points that how jquery makes tasks
More informationChapter 1 Getting Started with HTML 5 1. Chapter 2 Introduction to New Elements in HTML 5 21
Table of Contents Chapter 1 Getting Started with HTML 5 1 Introduction to HTML 5... 2 New API... 2 New Structure... 3 New Markup Elements and Attributes... 3 New Form Elements and Attributes... 4 Geolocation...
More informationIntroduction to WEB PROGRAMMING
Introduction to WEB PROGRAMMING Web Languages: Overview HTML CSS JavaScript content structure look & feel transitions/animation s (CSS3) interaction animation server communication Full-Stack Web Frameworks
More informationMake a Website. A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1
Make a Website A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1 Overview Course outcome: You'll build four simple websites using web
More informationWeb Engineering CSS. By Assistant Prof Malik M Ali
Web Engineering CSS By Assistant Prof Malik M Ali Overview of CSS CSS : Cascading Style Sheet a style is a formatting rule. That rule can be applied to an individual tag element, to all instances of a
More informationCSC 337. jquery Rick Mercer
CSC 337 jquery Rick Mercer What is jquery? jquery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
More informationGIMP WEB 2.0 MENUS WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR CREATING AN HTML LIST
GIMP WEB 2.0 MENUS Web 2.0 Menus: Horizontal Navigation Bar WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR Hover effect: CREATING AN HTML LIST Most horizontal or vertical navigation bars begin with a simple
More informationGIMP WEB 2.0 MENUS. Web 2.0 Menus: Horizontal Navigation Bar with Dynamic Background Image
GIMP WEB 2.0 MENUS Web 2.0 Menus: Horizontal Navigation Bar with Dynamic Background Image WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR DYNAMIC BACKGROUND IMAGE Before you begin this tutorial, you will need
More informationIntroduction to using HTML to design webpages
Introduction to using HTML to design webpages #HTML is the script that web pages are written in. It describes the content and structure of a web page so that a browser is able to interpret and render the
More informationjquery Lecture 34 Robb T. Koether Wed, Apr 10, 2013 Hampden-Sydney College Robb T. Koether (Hampden-Sydney College) jquery Wed, Apr 10, / 29
jquery Lecture 34 Robb T. Koether Hampden-Sydney College Wed, Apr 10, 2013 Robb T. Koether (Hampden-Sydney College) jquery Wed, Apr 10, 2013 1 / 29 1 jquery 2 jquery Selectors 3 jquery Effects 4 jquery
More informationData Visualization (CIS/DSC 468)
Data Visualization (CIS/DSC 468) Web Programming Dr. David Koop Definition of Visualization Computer-based visualization systems provide visual representations of datasets designed to help people carry
More informationThe internet is a worldwide collection of networks that link millions of computers. These links allow the computers to share and send data.
Review The internet is a worldwide collection of networks that link millions of computers. These links allow the computers to share and send data. It is not the internet! It is a service of the internet.
More informationHyper Text Markup Language HTML: A Tutorial
Hyper Text Markup Language HTML: A Tutorial Ahmed Othman Eltahawey December 21, 2016 The World Wide Web (WWW) is an information space where documents and other web resources are located. Web is identified
More informationHTML and CSS COURSE SYLLABUS
HTML and CSS COURSE SYLLABUS Overview: HTML and CSS go hand in hand for developing flexible, attractively and user friendly websites. HTML (Hyper Text Markup Language) is used to show content on the page
More informationCIS 228 (Spring, 2012) Final, 5/17/12
CIS 228 (Spring, 2012) Final, 5/17/12 Name (sign) Name (print) email I would prefer to fail than to receive a grade of or lower for this class. Question 1 2 3 4 5 6 7 8 9 A B C D E TOTAL Score CIS 228,
More informationWeb Programming and Design. MPT Junior Cycle Tutor: Tamara Demonstrators: Aaron, Marion, Hugh
Web Programming and Design MPT Junior Cycle Tutor: Tamara Demonstrators: Aaron, Marion, Hugh Plan for the next 5 weeks: Introduction to HTML tags, creating our template file Introduction to CSS and style
More informationWebomania Solutions Pvt. Ltd. 2017
Introduction JQuery is a lightweight, write less do more, and JavaScript library. The purpose of JQuery is to make it much easier to use JavaScript on the website. JQuery takes a lot of common tasks that
More information3.1 Introduction. 3.2 Levels of Style Sheets. - The CSS1 specification was developed in There are three levels of style sheets
3.1 Introduction - The CSS1 specification was developed in 1996 - CSS2 was released in 1998 - CSS2.1 reflects browser implementations - CSS3 is partially finished and parts are implemented in current browsers
More information- The CSS1 specification was developed in CSS2 was released in CSS2.1 reflects browser implementations
3.1 Introduction - The CSS1 specification was developed in 1996 - CSS2 was released in 1998 - CSS2.1 reflects browser implementations - CSS3 is partially finished and parts are implemented in current browsers
More informationJQuery and Javascript
JQuery and Javascript Javascript - a programming language to perform calculations/ manipulate HTML and CSS/ make a web page interactive JQuery - a javascript framework to help manipulate HTML and CSS JQuery
More informationBIM222 Internet Programming
BIM222 Internet Programming Week 7 Cascading Style Sheets (CSS) Adding Style to your Pages Part II March 20, 2018 Review: What is CSS? CSS stands for Cascading Style Sheets CSS describes how HTML elements
More informationUI development for the Web.! slides by Anastasia Bezerianos
UI development for the Web slides by Anastasia Bezerianos Divide and conquer A webpage relies on three components: Content HTML text, images, animations, videos, etc Presentation CSS how it will appear
More informationrecall: a Web page is a text document that contains additional formatting information in the HyperText Markup Language (HTML)
HTML & Web Pages recall: a Web page is a text document that contains additional formatting information in the HyperText Markup Language (HTML) HTML specifies formatting within a page using tags in its
More informationSyllabus - July to Sept
Class IX Sub: Computer Syllabus - July to Sept What is www: The World Wide Web (www, W3) is an information space where documents and other web resources are identified by URIs, interlinked by hypertext
More informationBEFORE CLASS. If you haven t already installed the Firebug extension for Firefox, download it now from
BEFORE CLASS If you haven t already installed the Firebug extension for Firefox, download it now from http://getfirebug.com. If you don t already have the Firebug extension for Firefox, Safari, or Google
More informationHTML5 and CSS3 The jquery Library Page 1
HTML5 and CSS3 The jquery Library Page 1 1 HTML5 and CSS3 THE JQUERY LIBRARY 8 4 5 7 10 11 12 jquery1.htm Browser Compatibility jquery should work on all browsers The solution to cross-browser issues is
More informationParashar Technologies HTML Lecture Notes-4
CSS Links Links can be styled in different ways. HTML Lecture Notes-4 Styling Links Links can be styled with any CSS property (e.g. color, font-family, background, etc.). a { color: #FF0000; In addition,
More informationCSC 121 Computers and Scientific Thinking
CSC 121 Computers and Scientific Thinking Fall 2005 HTML and Web Pages 1 HTML & Web Pages recall: a Web page is a text document that contains additional formatting information in the HyperText Markup Language
More information1. Cascading Style Sheet and JavaScript
1. Cascading Style Sheet and JavaScript Cascading Style Sheet or CSS allows you to specify styles for visual element of the website. Styles specify the appearance of particular page element on the screen.
More informationHtml basics Course Outline
Html basics Course Outline Description Learn the essential skills you will need to create your web pages with HTML. Topics include: adding text any hyperlinks, images and backgrounds, lists, tables, and
More informationCascading Style Sheets
4 TVEZEWXYHMNR LSTVSKVEQY-RJSVQEXMOENITSHTSVSZ RETVSNIOXIQ RERGSZER Q^)ZVSTWO LSWSGM PR LSJSRHYEVS^TS XYLPEZR LSQ WXE4VEL] 4VELE)9-RZIWXYNIQIHSZE% FYHSYGRSWXM CSS Cascading Style Sheets Lukáš Bařinka barinkl@fel.cvut.cz
More informationWEBSITE PROJECT 2 PURPOSE: INSTRUCTIONS: REQUIREMENTS:
WEBSITE PROJECT 2 PURPOSE: The purpose of this project is to begin incorporating color, graphics, and other visual elements in your webpages by implementing the HTML5 and CSS3 code discussed in chapters
More informationLecture : 3. Practical : 2. Course Credit. Tutorial : 0. Total : 5. Course Learning Outcomes
Course Title Course Code WEB DESIGNING TECHNOLOGIES DCE311 Lecture : 3 Course Credit Practical : Tutorial : 0 Total : 5 Course Learning Outcomes At end of the course, students will be able to: Understand
More informationDeccansoft Software Services
Deccansoft Software Services (A Microsoft Learning Partner) HTML and CSS COURSE SYLLABUS Module 1: Web Programming Introduction In this module you will learn basic introduction to web development. Module
More informationITNP43: HTML Lecture 4
ITNP43: HTML Lecture 4 Niederst, Part III (3rd edn) 1 Style versus Content HTML purists insist that style should be separate from content and structure HTML was only designed to specify the structure and
More informationCOMS W3101: SCRIPTING LANGUAGES: JAVASCRIPT (FALL 2017)
COMS W3101: SCRIPTING LANGUAGES: JAVASCRIPT (FALL 2017) RAMANA ISUKAPALLI RAMANA@CS.COLUMBIA.EDU 1 LECTURE-1 Course overview See http://www.cs.columbia.edu/~ramana Overview of HTML Formatting, headings,
More informationCascading Style Sheet
Extra notes - Markup Languages Dr Nick Hayward CSS - Basics A brief introduction to the basics of CSS. Contents Intro CSS syntax rulesets comments display Display and elements inline block-level CSS selectors
More informationStudy Guide 2 - HTML and CSS - Chap. 6,8,10,11,12 Name - Alexia Bernardo
Study Guide 2 - HTML and CSS - Chap. 6,8,10,11,12 Name - Alexia Bernardo Note: We skipped Study Guide 1. If you d like to review it, I place a copy here: https:// people.rit.edu/~nbbigm/studyguides/sg-1.docx
More informationCOMS 359: Interactive Media
COMS 359: Interactive Media Agenda Review CSS Preview Review Transparent GIF headline Review JPG buttons button1.jpg button.psd button2.jpg Review Next Step Tables CSS Introducing CSS What is CSS? Cascading
More information2005 WebGUI Users Conference
Cascading Style Sheets 2005 WebGUI Users Conference Style Sheet Types 3 Options Inline Embedded Linked Inline Use an inline style sheet to modify a single element one time in a page.
More informationWeb Programming HTML CSS JavaScript Step by step Exercises Hans-Petter Halvorsen
https://www.halvorsen.blog Web Programming HTML CSS JavaScript Step by step Exercises Hans-Petter Halvorsen History of the Web Internet (1960s) World Wide Web - WWW (1991) First Web Browser - Netscape,
More informationjquery Tutorial for Beginners: Nothing But the Goods
jquery Tutorial for Beginners: Nothing But the Goods Not too long ago I wrote an article for Six Revisions called Getting Started with jquery that covered some important things (concept-wise) that beginning
More informationA Balanced Introduction to Computer Science, 3/E
A Balanced Introduction to Computer Science, 3/E David Reed, Creighton University 2011 Pearson Prentice Hall ISBN 978-0-13-216675-1 Chapter 2 HTML and Web Pages 1 HTML & Web Pages recall: a Web page is
More informationCIS 228 (Fall, 2012) Exam 2, 11/20/12
CIS 228 (Fall, 2012) Exam 2, 11/20/12 Name (sign) Name (print) email Question 1 2 3 4 5 6 7 8 9 10 TOTAL Score CIS 228, exam 2 1 11/20/12 True or false: Question 1 Unordered lists can contain ordered sub-lists.
More informationAs we design and build out our HTML pages, there are some basics that we may follow for each page, site, and application.
Extra notes - Client-side Design and Development Dr Nick Hayward HTML - Basics A brief introduction to some of the basics of HTML. Contents Intro element add some metadata define a base address
More informationCOMP519 Web Programming Lecture 3: HTML (HTLM5 Elements: Part 1) Handouts
COMP519 Web Programming Lecture 3: HTML (HTLM5 Elements: Part 1) Handouts Ullrich Hustadt Department of Computer Science School of Electrical Engineering, Electronics, and Computer Science University of
More informationHTML and CSS: An Introduction
JMC 305 Roschke spring14 1. 2. 3. 4. 5. The Walter Cronkite School... HTML and CSS: An Introduction
More informationITS331 Information Technology I Laboratory
ITS331 Information Technology I Laboratory Laboratory #11 Javascript and JQuery Javascript Javascript is a scripting language implemented as a part of most major web browsers. It directly runs on the client's
More informationof numbers, converting into strings, of objects creating, sorting, scrolling images using, sorting, elements of object
Index Symbols * symbol, in regular expressions, 305 ^ symbol, in regular expressions, 305 $ symbol, in regular expressions, 305 $() function, 3 icon for collapsible items, 275 > selector, 282, 375 + icon
More informationCSS CSS how to display to solve a problem External Style Sheets CSS files CSS Syntax
CSS CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem External Style Sheets can save a lot of work External Style Sheets
More informationWelcome Please sit on alternating rows. powered by lucid & no.dots.nl/student
Welcome Please sit on alternating rows powered by lucid & no.dots.nl/student HTML && CSS Workshop Day Day two, November January 276 powered by lucid & no.dots.nl/student About the Workshop Day two: CSS
More information<style type="text/css"> <!-- body {font-family: Verdana, Arial, sans-serif} ***set font family for entire Web page***
Chapter 7 Using Advanced Cascading Style Sheets HTML is limited in its ability to define the appearance, or style, across one or mare Web pages. We use Cascading style sheets to accomplish this. Remember
More informationZen Garden. CSS Zen Garden
CSS Patrick Behr CSS HTML = content CSS = display It s important to keep them separated Less code in your HTML Easy maintenance Allows for different mediums Desktop Mobile Print Braille Zen Garden CSS
More informationICT IGCSE Practical Revision Presentation Web Authoring
21.1 Web Development Layers 21.2 Create a Web Page Chapter 21: 21.3 Use Stylesheets 21.4 Test and Publish a Website Web Development Layers Presentation Layer Content layer: Behaviour layer Chapter 21:
More information3.1 Introduction. 3.2 Levels of Style Sheets. - HTML is primarily concerned with content, rather than style. - There are three levels of style sheets
3.1 Introduction - HTML is primarily concerned with content, rather than style - However, tags have presentation properties, for which browsers have default values - The CSS1 cascading style sheet specification
More informationCSS Cascading Style Sheets
CSS Cascading Style Sheets site root index.html about.html services.html stylesheet.css images boris.jpg Types of CSS External Internal Inline External CSS An external style sheet is a text document with
More informationNAVIGATION INSTRUCTIONS
CLASS :: 13 12.01 2014 NAVIGATION INSTRUCTIONS SIMPLE CSS MENU W/ HOVER EFFECTS :: The Nav Element :: Styling the Nav :: UL, LI, and Anchor Elements :: Styling the UL and LI Elements CSS DROP-DOWN MENU
More informationCS 350 COMPUTER/HUMAN INTERACTION. Lecture 6
CS 350 COMPUTER/HUMAN INTERACTION Lecture 6 Setting up PPP webpage Log into lab Linux client or into csserver directly Webspace (www_home) should be set up Change directory for CS 350 assignments cp r
More informationAssignments (4) Assessment as per Schedule (2)
Specification (6) Readability (4) Assignments (4) Assessment as per Schedule (2) Oral (4) Total (20) Sign of Faculty Assignment No. 02 Date of Performance:. Title: To apply various CSS properties like
More informationData Visualization (DSC 530/CIS )
Data Visualization (DSC 530/CIS 602-01) HTML, CSS, & SVG Dr. David Koop Data Visualization What is it? How does it differ from computer graphics? What types of data can we visualize? What tasks can we
More informationCOMS W3101: SCRIPTING LANGUAGES: JAVASCRIPT (FALL 2018)
COMS W3101: SCRIPTING LANGUAGES: JAVASCRIPT (FALL 2018) RAMANA ISUKAPALLI RAMANA@CS.COLUMBIA.EDU 1 LECTURE-1 Course overview See http://www.cs.columbia.edu/~ramana Overview of HTML Formatting, headings,
More informationCSS. M hiwa ahamad aziz Raparin univercity. 1 Web Design: Lecturer ( m hiwa ahmad aziz)
CSS M hiwa ahamad aziz www.raparinweb.fulba.com Raparin univercity 1 What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve
More information- The CSS1 specification was developed in CSSs provide the means to control and change presentation of HTML documents
3.1 Introduction - The CSS1 specification was developed in 1996 - CSS2 was released in 1998 - CSS3 is on its way - CSSs provide the means to control and change presentation of HTML documents - CSS is not
More informationCOMP519 Web Programming Lecture 7: Cascading Style Sheets: Part 3 Handouts
COMP519 Web Programming Lecture 7: Cascading Style Sheets: Part 3 Handouts Ullrich Hustadt Department of Computer Science School of Electrical Engineering, Electronics, and Computer Science University
More informationFinal Exam Study Guide
Final Exam Study Guide 1. What does HTML stand for? 2. Which file extension is used with standard web pages? a..doc b..xhtml c..txt d..html 3. Which is not part of an XHTML element? a. Anchor b. Start
More informationWeb Development & Design Foundations with HTML5
1 Web Development & Design Foundations with HTML5 CHAPTER 14 A BRIEF LOOK AT JAVASCRIPT Copyright Terry Felke-Morris 2 Learning Outcomes In this chapter, you will learn how to: Describe common uses of
More informationCSS is applied to an existing HTML web document--both working in tandem to display web pages.
CSS Intro Introduction to Cascading Style Sheets What is CSS? CSS (Cascading Style Sheets) is a supplementary extension to allowing web designers to style specific elements on their pages and throughout
More informationChapter 4 CSS basics
Sungkyunkwan University Chapter 4 CSS basics Prepared by J. Lee and H. Choo Web Programming Copyright 2000-2018 Networking Laboratory 1/48 Copyright 2000-2012 Networking Laboratory Chapter 4 Outline 4.1
More informationintroduction to XHTML
introduction to XHTML XHTML stands for Extensible HyperText Markup Language and is based on HTML 4.0, incorporating XML. Due to this fusion the mark up language will remain compatible with existing browsers
More information- HTML is primarily concerned with content, rather than style. - However, tags have presentation properties, for which browsers have default values
3.1 Introduction - HTML is primarily concerned with content, rather than style - However, tags have presentation properties, for which browsers have default values - The CSS1 cascading style sheet specification
More informationHTML & CSS. SWE 432, Fall 2017 Design and Implementation of Software for the Web
HTML & CSS SWE 432, Fall 2017 Design and Implementation of Software for the Web HTML: HyperText Markup Language LaToza Language for describing structure of a document Denotes hierarchy of elements What
More informationTable Basics. The structure of an table
TABLE -FRAMESET Table Basics A table is a grid of rows and columns that intersect to form cells. Two different types of cells exist: Table cell that contains data, is created with the A cell that
More informationCSCE 101. Creating Web Pages with HTML5 Applying style with CSS
CSCE 101 Creating Web Pages with HTML5 Applying style with CSS Table of Contents Introduction... 1 Required HTML Tags... 1 Comments... 2 The Heading Tags... 2 The Paragraph Tag... 2 The Break Tag... 3
More informationUnit 20 - Client Side Customisation of Web Pages. Week 2 Lesson 3 Introduction to CSS
Unit 20 - Client Side Customisation of Web Pages Week 2 Lesson 3 Introduction to CSS Last Time Looked at what CSS is Looked at why we will use it Used in-line CSS
More informationUNIT -II. Language-History and Versions Introduction JavaScript in Perspective-
UNIT -II Style Sheets: CSS-Introduction to Cascading Style Sheets-Features- Core Syntax-Style Sheets and HTML Style Rle Cascading and Inheritance-Text Properties-Box Model Normal Flow Box Layout- Beyond
More informationHTML TAG SUMMARY HTML REFERENCE 18 TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES MOST TAGS
MOST TAGS CLASS Divides tags into groups for applying styles 202 ID Identifies a specific tag 201 STYLE Applies a style locally 200 TITLE Adds tool tips to elements 181 Identifies the HTML version
More informationYear 8 Computing Science End of Term 3 Revision Guide
Year 8 Computing Science End of Term 3 Revision Guide Student Name: 1 Hardware: any physical component of a computer system. Input Device: a device to send instructions to be processed by the computer
More informationGIMP WEB 2.0 MENUS. Web 2.0 Menus: Horizontal Navigation Bar
GIMP WEB 2.0 MENUS Web 2.0 Menus: Horizontal Navigation Bar WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR Hover effect: You may create your button in GIMP. Mine is 122 pixels by 48 pixels. You can use whatever
More informationUnit 10 - Client Side Customisation of Web Pages. Week 5 Lesson 1 CSS - Selectors
Unit 10 - Client Side Customisation of Web Pages Week 5 Lesson 1 CSS - Selectors Last Time CSS box model Concept of identity - id Objectives Selectors the short story (or maybe not) Web page make-over!
More informationDownloads: Google Chrome Browser (Free) - Adobe Brackets (Free) -
Week One Tools The Basics: Windows - Notepad Mac - Text Edit Downloads: Google Chrome Browser (Free) - www.google.com/chrome/ Adobe Brackets (Free) - www.brackets.io Our work over the next 6 weeks will
More informationIntroduction to HTML & CSS. Instructor: Beck Johnson Week 2
Introduction to HTML & CSS Instructor: Beck Johnson Week 2 today Week One review and questions File organization CSS Box Model: margin and padding Background images and gradients with CSS Make a hero banner!
More informationINFORMATICA GENERALE 2014/2015 LINGUAGGI DI MARKUP CSS
INFORMATICA GENERALE 2014/2015 LINGUAGGI DI MARKUP CSS cristina gena dipartimento di informatica cgena@di.unito.it http://www.di.unito.it/~cgena/ materiale e info sul corso http://www.di.unito.it/~cgena/teaching.html
More informationWEBSI TE DESIGNING TRAINING
WEBSI TE DESIGNING TRAINING WHAT IS WEB DESIGN? We b s ite design m e a n s p l a n n i n g, c r e a t i o n and u p d a t i n g of websites. We bsite design also involves i n f o r m a t i o n a rchitecture,
More informationWeb Designing HTML5 NOTES
Web Designing HTML5 NOTES HTML Introduction What is HTML? HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages
More informationBy Ryan Stevenson. Guidebook #2 HTML
By Ryan Stevenson Guidebook #2 HTML Table of Contents 1. HTML Terminology & Links 2. HTML Image Tags 3. HTML Lists 4. Text Styling 5. Inline & Block Elements 6. HTML Tables 7. HTML Forms HTML Terminology
More informationjquery Basics jquery is a library of JavaScript functions which contains the following functions: HTML Element Selections
jquery Basics jquery is a library of JavaScript functions which contains the following functions: 1 - HTML element selections 2 - HTML element manipulation 3 - CSS manipulation 4 - HTML event functions
More informationWeb and Apps 1) HTML - CSS
Web and Apps 1) HTML - CSS Emmanuel Benoist Spring Term 2017 Berner Fachhochschule Haute cole spcialise bernoise Berne University of Applied Sciences 1 HyperText Markup Language and Cascading Style Sheets
More informationCE212 Web Application Programming Part 2
CE212 Web Application Programming Part 2 22/01/2018 CE212 Part 2 1 JavaScript Event-Handlers 1 JavaScript may be invoked to handle input events on HTML pages, e.g.
More informationICT IGCSE Practical Revision Presentation Web Authoring
21.1 Web Development Layers 21.2 Create a Web Page Chapter 21: 21.3 Use Stylesheets 21.4 Test and Publish a Website Web Development Layers Presentation Layer Content layer: Behaviour layer Chapter 21:
More information