Webinar. The Lighthouse Studio Scripting Series. JavaScript Sawtooth Software, Inc.
|
|
- Buddy Burns
- 5 years ago
- Views:
Transcription
1 The Lighthouse Studio Scripting Series JavaScript
2 2 HTML
3 3 CSS
4 4 JavaScript
5 5 jquery (enhanced JavaScript)
6 6 Perl
7 7 HTML (Hyper Text Markup Language)
8 8 HTML
9 9 What is HTML? HTML is the language for creating web pages. View Source" on any web page to see HTML HTML tags Open, close tags. Identify sections of your page. Not displayed to user in browser. Optional attributes What is <b>your</b> name? <div class="question"> How old are you? </div>
10 10 CSS (Cascading Style Sheets)
11 11 CSS
12 12 What is CSS? CSS allows you to add style to your page (color, position, formatting, etc.) With CSS you can change the appearance of your page without having to change the underlying HTML (kind of like wall paper) Learning a bit of CSS can help you to modify the functionality of your web page together with JavaScript and jquery.
13 13 CSS - HTML The <div> tag defines a block on the page. An "id" identifies the tag. Unique name. One per page. A "class" defines a group of tags. Multiple per page.
14 14 CSS Rules /* CSS comment */ selector { property: value; property: value; } /* CSS example All <p> tags will have blue text and a black border around them. */ p { color: blue; border: 1px solid black; }
15 15 CSS Rules In addition to HTML tags "ids" and "classes" can be used The "#" is used for "ids" unique, one per page The "." for "classes" a group, multiple per page <div id="q1_div" class="question">...</div> <style> #Q1_div { color: blue; }.question { border: 2px solid red; } </style>
16 16 CSS Hooks in Lighthouse The HTML for every page and question in Lighthouse has classes and ids that you can write CSS for.
17 17 JavaScript
18 18 JavaScript
19 19 What is JavaScript? A scripting language Code executed by the browser (not on server) JavaScript and Java are not the same thing Enables you to interact with the web page without having to submit to the sever Popup boxes Display total of numeric input on screen while you are typing Custom verification Can be embedded directly into Lighthouse pages or imported from an outside file
20 20 Where can JavaScript be used in Lighthouse? Anywhere you can type text (almost) Questions, attributes and levels, list items, etc. Within a question s HTML <head> tag Under the Advanced button for most questions (this is on a specific page of the study) Within the survey s global HTML <head> tag On the Headers and Footers tab in Survey Settings (this is on all pages in the study)
21 21 Script Tags To enter JavaScript into Lighthouse Use an HTML <script> tag within Lighthouse <script> alert("hello world!"); </script> Use an external JavaScript file (library) <script src="[%graphicspath()%]mylibrary.js"> </script>
22 22 Variables "Containers" that store data var total = 0; // this declares one variable total = 3 + 4; // this assigns a value //The variable total can now be used. var GrandTotal = total ; // Words (non-numeric) must be surrounded in quotes. var BaseName = "Quest"; //QName below will be "QuestA" var QName = BaseName + "A";
23 23 Arrays List of values var MonthArray = ["Jan", "Feb", "Mar", "Apr"]; Jan Feb Mar Apr May MonthArray[0]; //returns "Jan" MonthArray[3]; //returns "Apr" var ScoresArray = [34, 23, 54, 23]; var OneValue = 0; /* Assign 2 nd value in array. Arrays are 0 based */ OneValue = ScoresArray[1];
24 24 Math Mathematical operators, similar to excel var Years = 38; var Total = 0; Total = (Years 13) * 20; //++ Quick way to add 1. Used in loops. Total++;
25 25 Branching with if var base_income = 70000; var income_level = 0; if (base_income < 50000) { // This code only runs if income < income_level = 1; } // This line always runs income_level = income_level * 4;
26 26 Branching with if, else if, else if (income < 50000) { IncomeLevel = 1; } else if ((income >= 50000) && (income < )) { IncomeLevel = 2; } else { IncomeLevel = 3; } /* IncomeLevel will only get assigned once, 1,2,or 3. && AND OR == Compare if two values are equal.!= Not Equal */
27 27 Looping with for Use when code should be run a known number of times var ScoresArray = [23, 45, 32, 12]; var ArraySize = ScoresArray.length; var Sum = 0; //Initialize, test, increment for (i = 0; i < ArraySize; i++) { //Same as Sum = Sum + ScoresArray[i]; Sum += ScoresArray[i]; } //Sum now contains 112 or
28 28 Functions Allows you to package up and reuse JavaScript code over and over function ComputeNums (Num1, Num2) { var Result = (Num1 + Num2) * 17; return Result; } var Result1 = ComputeNums(52, 43); var Result2 = ComputeNums(18, 68);
29 29 Objects Variables that give you access to different fields and functions The "." notation var ArraySize = ScoresArray.length; var CurDate = new Date(); var Year = CurDate.getFullYear(); //Write to screen the current year. document.write("year is " + Year);
30 30 Make sure it s a number Often you need to make sure what you are dealing with is a number parseint(); parsefloat(); var first_num = parseint(input);
31 31 Lighthouse built in JavaScript Lighthouse uses JavaScript graphics/system/ssi_javascriptx_x_x.js jquery and jquery UI built in Graphics folder tour "JavaScript in Lighthouse Studio" section in Lighthouse Help shows built-in functions SSI_GetValue, SSI_PriceFormat(), SSI_RadioReset()
32 32 Example //Get answer to Q1 on current page. var Q1Val = SSI_GetValue("Q1"); //Set answer on current page. //Useful to set a default. var Q2Obj = SSI_GetFormObject("Q2"); Q2Obj.value = 46; //Returns a number formatted as a price //Number,Thousand,Decimal,NumDecimalPlaces var Price = 3456; Price = SSI_PriceFormat(Price, ",", ".", 2); //returns 3,456.00
33 33 Example //Get an answer from a prior page by using //A bit of SSI Script. Remember, SSI Script //loads on server prior to coming down to browser. var PriorAnswer = "[%Name%]"; //The above is translated to var PriorAnswer = "Bob"; //and then sent down to the browser to run as JavaScript.
34 34 Graphical Select Graphical Select checkboxes and radio buttons add complexity making them harder to customize We have provided SSI_CustomGraphicalCheckbox and SSI_CustomGraphicalRadiobox to help //This gets called every time they click on a checkbox after system code runs. function SSI_CustomGraphicalCheckbox(GraphicalCheckboxObj, InputObj, blncheck) { //Add custom code here. } function SSI_CustomGraphicalRadiobox(GraphicalRadioboxObj, InputObj) { //Empty function. Redefine this function in custom code. }
35 35 Custom Verification Lighthouse verifies that questions are answered and that the answers are in the right format etc. using JavaScript You can customize question verification using "Custom JavaScript Verification" available behind the Advanced button of most questions If you detect an error set "strerrormessage" equal to an error message
36 36 Debugging Trying to debug a problem? Simplify, simplify, simplify. Make the problem simpler and try and isolate where the problem is coming from. Divide and conquer. Use Chrome Developer Tools. This allows you to step through JavaScript code. Right click, Inspect Print out values at certain points in the script alert( message here ); console.log( message here );
37 37 References Great JavaScript tutorial: "JavaScript in Lighthouse Studio" section in Lighthouse Help
38 38 jquery (JavaScript Library)
39 39 jquery (enhanced JavaScript)
40 40 What is jquery? jquery is a JavaScript library. It allows you to write powerful JavaScript in a simple way. jquery is compatible across multiple browsers. Included in Lighthouse Studio Learn jquery: Google: jquery addclass
41 41 jquery Objects jquery makes it simple to interact with HTML. Using a bit of CSS to select the HTML you can create a powerful jquery/javascript object. //Assume this HTML <input id="n1" name="n1" type="text"> $("#n1").attr("placeholder", "Please type here"); CSS Selector Function call
42 42 jquery Objects
43 43 jquery Objects jquery objects are not regular JavaScript DOM objects. To get the DOM object do this: $("#n1")[0].value(5); The HTML DOM objects are actually stored as an array inside of the jquery object. To check for jquery object existence: if($("#n1_div.footer").length) { //Item exists, change HTML in footer to "hello" $("#n1_div.footer").html("hello"); }
44 44 Wait for Page Load Often you will want to make sure the web page has loaded before your code runs. <script> $(document).ready(function() { //This code runs after full page load. $("#n1").attr("placeholder", "Please type here"); }); </script>
45 45 jquery Each (Looping) Using the Each function makes it easy to walk through all items on the page that match a certain selector. //Loop through all HTML with class "options" //Turn each one red. $(".options").each(function() { //"this" represents current instance. $(this).css("background-color", "red"); }); //Does the same thing, but cannot code for each instance. $(".options").css("background-color", "red"); All items matched with selector (".options" above) will be affected. "this" keyword represents current instance.
46 46 jquery - Traversing jquery makes it easy to get around in the HTML //Assume HTML <tr class="clickable"> <td class="input_cell"> <input id="s_1" type="text"> </td> </tr> //Get parent and turn it red ClickableObj = $("#s_1").closest(".clickable"); ClickableObj.css("background-color", "red"); Two great Traversing functions:.closest() Looks through HTML above you..find() Looks at HTML inside of you. See:
47 47 Change Existing HTML Rather than using Free Format, try changing an existing question by using jquery. Functions:.html(),.before(),.append(),.hide() $("#q1_div.header1").html( New text here"); $(".grid_row1").before("<tr><td style=\"padding-top: 20px; font-weight: bold;\" colspan=\"6\">restaurants</td></tr>");
48 48 jquery Events Events happen as the user interacts with the browser. (See //Change question background color when mouseover $(".question").on("mouseover", (function() { $(this).css("background-color", "blue"); }); //Change back to white on mouseout $(".question").on("mouseout", (function() { $(this).css("background-color", "white"); }); //This can also be done with addclass, removeclass $(".question").on("mouseover", (function() { $(this).addclass("highlight"); });
49 49 jquery UI Additional JavaScript library. Includes powerful prebuilt functionality. See: Sorting, Drag and Drop, Calendar, etc. Comes with Lighthouse Studio Framework icons are available //jquery UI comes with icons that you can use by referring to classes <div class="ui-state-default ui-corner-all" style="width:20px"> <span class="ui-icon ui-icon-circle-check"></span> </div>
50 50 Access our suite-holder exclusive jquery webinar here!
51 51 QUESTIONS? Justin Luster Product Manager Megan Peitz Ingenuity Ambassador
Webinar. The Lighthouse Studio Scripting Series. Part 2 - Perl Sawtooth Software, Inc.
The Lighthouse Studio Scripting Series Part 2 - Perl 2 HTML 3 CSS 4 JavaScript 5 jquery (enhanced JavaScript) 6 Perl 7 Sawtooth Script Scripting language provided by Sawtooth Software Consists of various
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 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 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 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 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 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 Recap on HTML and creating our template file Introduction
More informationINTRODUCTION TO JAVASCRIPT
INTRODUCTION TO JAVASCRIPT Overview This course is designed to accommodate website designers who have some experience in building web pages. Lessons familiarize students with the ins and outs of basic
More informationwelcome to BOILERCAMP HOW TO WEB DEV
welcome to BOILERCAMP HOW TO WEB DEV Introduction / Project Overview The Plan Personal Website/Blog Schedule Introduction / Project Overview HTML / CSS Client-side JavaScript Lunch Node.js / Express.js
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 informationTizen Web UI Technologies (Tizen Ver. 2.3)
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 02-820-0909 Mobile 010-7392-2220
More informationWELCOME TO JQUERY PROGRAMMING LANGUAGE ONLINE TUTORIAL
WELCOME TO JQUERY PROGRAMMING LANGUAGE ONLINE TUTORIAL 1 The above website template represents the HTML/CSS previous studio project we have been working on. Today s lesson will focus on JQUERY programming
More informationThe Structure of the Web. Jim and Matthew
The Structure of the Web Jim and Matthew Workshop Structure 1. 2. 3. 4. 5. 6. 7. What is a browser? HTML CSS Javascript LUNCH Clients and Servers (creating a live website) Build your Own Website Workshop
More informationDesigning the Home Page and Creating Additional Pages
Designing the Home Page and Creating Additional Pages Creating a Webpage Template In Notepad++, create a basic HTML webpage with html documentation, head, title, and body starting and ending tags. From
More informationStyles, Style Sheets, the Box Model and Liquid Layout
Styles, Style Sheets, the Box Model and Liquid Layout This session will guide you through examples of how styles and Cascading Style Sheets (CSS) may be used in your Web pages to simplify maintenance of
More informationGRAPHIC WEB DESIGNER PROGRAM
NH128 HTML Level 1 24 Total Hours COURSE TITLE: HTML Level 1 COURSE OVERVIEW: This course introduces web designers to the nuts and bolts of HTML (HyperText Markup Language), the programming language used
More informationWEB DESIGNING COURSE SYLLABUS
F.A. Computer Point #111 First Floor, Mujaddadi Estate/Prince Hotel Building, Opp: Okaz Complex, Mehdipatnam, Hyderabad, INDIA. Ph: +91 801 920 3411, +91 92900 93944 040 6662 6601 Website: www.facomputerpoint.com,
More informationCORE PHP CURRICULUM. Introductory Session Web Architecture Overview of PHP Platform Origins of PHP in the open source community
CORE PHP CURRICULUM What you will Be Able to Achieve During This Course This course will enable you to build real-world, dynamic web sites. If you've built websites using plain HTML, you realize the limitation
More informationIBM Forms V8.0 Custom Themes IBM Corporation
IBM Forms V8.0 Custom Themes Agenda 2 Overview Class Names How to Use Best Practice Styling Form Items Test Custom CSS Sample Overview 3 To create custom theme you must be familiar with the basic concept
More informationHow to lay out a web page with CSS
Activity 2.6 guide How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS4 to create a simple page layout. However, a more powerful technique is to use Cascading Style
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 informationIntroduction to Automation. What is automation testing Advantages of Automation Testing How to learn any automation tool Types of Automation tools
Introduction to Automation What is automation testing Advantages of Automation Testing How to learn any automation tool Types of Automation tools Introduction to Selenium What is Selenium Use of Selenium
More informationSiteforce Pilot: Best Practices
Siteforce Pilot: Best Practices Getting Started with Siteforce Setup your users as Publishers and Contributors. Siteforce has two distinct types of users First, is your Web Publishers. These are the front
More informationPIC 40A. Midterm 1 Review
PIC 40A Midterm 1 Review XHTML and HTML5 Know the structure of an XHTML/HTML5 document (head, body) and what goes in each section. Understand meta tags and be able to give an example of a meta tags. Know
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 informationWhite Paper April Using Cascading Style Sheets (CSS) with AR System 6.x
April 2004 Using Cascading Style Sheets (CSS) with AR System 6.x Copyright 2004 BMC Software, Inc. All rights reserved. Remedy, the Remedy logo, all other Remedy product or service names, BMC Software,
More informationCreating HTML files using Notepad
Reference Materials 3.1 Creating HTML files using Notepad Inside notepad, select the file menu, and then Save As. This will allow you to set the file name, as well as the type of file. Next, select the
More informationLesson 1 using Dreamweaver CS3. To get started on your web page select the link below and copy (Save Picture As) the images to your image folder.
Lesson 1 using Dreamweaver CS3 To get started on your web page select the link below and copy (Save Picture As) the images to your image folder. Click here to get images for your web page project. (Note:
More informationADOBE 9A Adobe Dreamweaver CS4 ACE.
ADOBE 9A0-090 Adobe Dreamweaver CS4 ACE http://killexams.com/exam-detail/9a0-090 ,D QUESTION: 74 You use an image throughout your Web site. You want to be able to add this image to various Web pages without
More informationTaking Fireworks Template and Applying it to Dreamweaver
Taking Fireworks Template and Applying it to Dreamweaver Part 1: Define a New Site in Dreamweaver The first step to creating a site in Dreamweaver CS4 is to Define a New Site. The object is to recreate
More informationFrontPage 2000 Tutorial -- Advanced
FrontPage 2000 Tutorial -- Advanced Shared Borders Shared Borders are parts of the web page that share content with the other pages in the web. They are located at the top, bottom, left side, or right
More informationBrief Intro to Firebug Sukwon Oh CSC309, Summer 2015
Brief Intro to Firebug Sukwon Oh soh@cs.toronto.edu CSC309, Summer 2015 Firebug at a glance One of the most popular web debugging tool with a colleccon of powerful tools to edit, debug and monitor HTML,
More informationCreating a Website: Advanced Dreamweaver
Creating a Website: Advanced Dreamweaver Optimizing the Workspace for Accessible Page Design 1. Choose Edit > Preferences [Windows] or Dreamweaver > Preferences [Macintosh]. The Preferences dialog box
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 informationWeb Programming and Design. MPT Senior Cycle Tutor: Tamara Week 1
Web Programming and Design MPT Senior Cycle Tutor: Tamara Week 1 What will we cover? HTML - Website Structure and Layout CSS - Website Style JavaScript - Makes our Website Dynamic and Interactive Plan
More informationCascading Style Sheets Level 2
Cascading Style Sheets Level 2 Course Objectives, Session 1 Level 1 Quick Review Chapter 6 Revisit: Web Fonts Chapter 8: Adding Graphics to Web Pages Chapter 9: Sprucing Up Your Site s Navigation Begin
More informationLesson 5 Introduction to Cascading Style Sheets
Introduction to Cascading Style Sheets HTML and JavaScript BASICS, 4 th Edition 1 Objectives Create a Cascading Style Sheet. Control hyperlink behavior with CSS. Create style classes. Share style classes
More informationComp 426 Midterm Fall 2013
Comp 426 Midterm Fall 2013 I have not given nor received any unauthorized assistance in the course of completing this examination. Name: PID: This is a closed book exam. This page left intentionally blank.
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 informationCREATING A WEBSITE USING CSS. Mrs. Procopio CTEC6 MYP1
CREATING A WEBSITE USING CSS Mrs. Procopio CTEC6 MYP1 HTML VS. CSS HTML Hypertext Markup Language CSS Cascading Style Sheet HTML VS. CSS HTML is used to define the structure and content of a webpage. CSS
More informationWebsite Development with HTML5, CSS and Bootstrap
Contact Us 978.250.4983 Website Development with HTML5, CSS and Bootstrap Duration: 28 hours Prerequisites: Basic personal computer skills and basic Internet knowledge. Course Description: This hands on
More informationStudent, Perfect Final Exam May 25, 2006 ID: Exam No CS-081/Vickery Page 1 of 6
Student, Perfect Final Exam May 25, 2006 ID: 9999. Exam No. 3193 CS-081/Vickery Page 1 of 6 NOTE: It is my policy to give a failing grade in the course to any student who either gives or receives aid on
More informationSCRIPT REFERENCE. UBot Studio Version 4. Action Commands
SCRIPT REFERENCE UBot Studio Version 4 Action Commands This script reference will cover the Action commands, which are located in the second sub-menu of the toolbox on the left side of the dev tool: In
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 informationThe course also includes an overview of some of the most popular frameworks that you will most likely encounter in your real work environments.
Web Development WEB101: Web Development Fundamentals using HTML, CSS and JavaScript $2,495.00 5 Days Replay Class Recordings included with this course Upcoming Dates Course Description This 5-day instructor-led
More informationWeb Site Development with HTML/JavaScrip
Hands-On Web Site Development with HTML/JavaScrip Course Description This Hands-On Web programming course provides a thorough introduction to implementing a full-featured Web site on the Internet or corporate
More informationLAST WEEK ON IO LAB. Install Firebug and Greasemonkey. Complete the online skills assessment. Join the mailing list.
LAST WEEK ON IO LAB If you haven t done these things already, please do them before we begin today s lecture Install Firebug and Greasemonkey. Complete the online skills assessment. Join the iolab@ischool
More informationCISC 1600 Lecture 2.4 Introduction to JavaScript
CISC 1600 Lecture 2.4 Introduction to JavaScript Topics: Javascript overview The DOM Variables and objects Selection and Repetition Functions A simple animation What is JavaScript? JavaScript is not Java
More informationPHP & My SQL Duration-4-6 Months
PHP & My SQL Duration-4-6 Months Overview of the PHP & My SQL Introduction of different Web Technology Working with the web Client / Server Programs Server Communication Sessions Cookies Typed Languages
More informationCOMP519 Web Programming Lecture 6: Cascading Style Sheets: Part 2 Handouts
COMP519 Web Programming Lecture 6: Cascading Style Sheets: Part 2 Handouts Ullrich Hustadt Department of Computer Science School of Electrical Engineering, Electronics, and Computer Science University
More informationOutline. Introduction to JavaScript Resources What is JavaScript? JavaScript in web pages
JavaScript CMPT 281 Outline Introduction to JavaScript Resources What is JavaScript? JavaScript in web pages Announcements Layout with tables Assignment 3 JavaScript Resources Resources Why JavaScript?
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 informationCOMS 359: Interactive Media
COMS 359: Interactive Media Agenda Project #3 Review Forms (con t) CGI Validation Design Preview Project #3 report Who is your client? What is the project? Project Three action= http://...cgi method=
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 informationCheckbox 5 - Style Guide
Checkbox 5 - Style Guide Survey Styles are style templates that can be applied to surveys and reports. This guide will show you how to create a new Survey Style and apply it (and other appearance configurations)
More informationCOPYRIGHTED MATERIAL. Contents. Chapter 1: Creating Structured Documents 1
59313ftoc.qxd:WroxPro 3/22/08 2:31 PM Page xi Introduction xxiii Chapter 1: Creating Structured Documents 1 A Web of Structured Documents 1 Introducing XHTML 2 Core Elements and Attributes 9 The
More informationBlock & Inline Elements
Block & Inline Elements Every tag in HTML can classified as a block or inline element. > Block elements always start on a new line (Paragraph, List items, Blockquotes, Tables) > Inline elements do not
More informationINTRODUCTION TO HTML5! HTML5 Page Structure!
INTRODUCTION TO HTML5! HTML5 Page Structure! What is HTML5? HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. The previous version of HTML came in 1999. The web has changed a lot since
More informationSOFTRONIICS Call:
Microsoft ASP.NET Programming Certification - Syllabus Section I - The Interface of Microsoft ASP.NET What Is ASP.NET, and Why Is It So Great? Understanding Web Servers and Browsers Understanding Static
More informationPage Layout Using Tables
This section describes various options for page layout using tables. Page Layout Using Tables Introduction HTML was originally designed to layout basic office documents such as memos and business reports,
More informationAIM. 10 September
AIM These two courses are aimed at introducing you to the World of Web Programming. These courses does NOT make you Master all the skills of a Web Programmer. You must learn and work MORE in this area
More informationHTML5. HTML5 Introduction. Form Input Types. Semantic Elements. Form Attributes. Form Elements. Month Number Range Search Tel Url Time Week
WEB DESIGNING HTML HTML - Introduction HTML - Elements HTML - Tags HTML - Text HTML - Formatting HTML - Pre HTML - Attributes HTML - Font HTML - Text Links HTML - Comments HTML - Lists HTML - Images HTML
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 informationAnatomy of an HTML document
Anatomy of an HTML document hello World hello World This is the DOCTYPE declaration.
More informationCOMSC-031 Web Site Development- Part 2
COMSC-031 Web Site Development- Part 2 Part-Time Instructor: Joenil Mistal December 5, 2013 Chapter 13 13 Designing a Web Site with CSS In addition to creating styles for text, you can use CSS to create
More informationCSS. Lecture 16 COMPSCI 111/111G SS 2018
CSS Lecture 16 COMPSCI 111/111G SS 2018 No CSS Styles A style changes the way the HTML code is displayed Same page displayed using different styles http://csszengarden.com Same page with a style sheet
More informationSections and Articles
Advanced PHP Framework Codeigniter Modules HTML Topics Introduction to HTML5 Laying out a Page with HTML5 Page Structure- New HTML5 Structural Tags- Page Simplification HTML5 - How We Got Here 1.The Problems
More informationIndex. Boolean value, 282
Index A AJAX events global level ajaxcomplete, 317 ajaxerror, 316 ajaxsend, 316 ajaxstart, 316 ajaxstop, 317 ajaxsuccess, 316 order of triggering code implementation, 317 display list, 321 flowchart, 322
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 informationDeep Dive into Apps for Office in Outlook
Deep Dive into Apps for Office in Outlook Office 365 Hands-on lab In this lab you will get hands-on experience developing Mail Apps which target Microsoft Outlook and OWA. This document is provided for
More informationAbout Codefrux While the current trends around the world are based on the internet, mobile and its applications, we try to make the most out of it. As for us, we are a well established IT professionals
More informationThis course is designed for web developers that want to learn HTML5, CSS3, JavaScript and jquery.
HTML5/CSS3/JavaScript Programming Course Summary Description This class is designed for students that have experience with basic HTML concepts that wish to learn about HTML Version 5, Cascading Style Sheets
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 informationExercise 1: Basic HTML and JavaScript
Exercise 1: Basic HTML and JavaScript Question 1: Table Create HTML markup that produces the table as shown in Figure 1. Figure 1 Question 2: Spacing Spacing can be added using CellSpacing and CellPadding
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 informationREADSPEAKER ENTERPRISE HIGHLIGHTING 2.5
READSPEAKER ENTERPRISE HIGHLIGHTING 2.5 Advanced Skinning Guide Introduction The graphical user interface of ReadSpeaker Enterprise Highlighting is built with standard web technologies, Hypertext Markup
More informationSPARK. User Manual Ver ITLAQ Technologies
SPARK Forms Builder for Office 365 User Manual Ver. 3.5.50.102 0 ITLAQ Technologies www.itlaq.com Table of Contents 1 The Form Designer Workspace... 3 1.1 Form Toolbox... 3 1.1.1 Hiding/ Unhiding/ Minimizing
More informationCS1046 Lab 4. Timing: This lab should take you 85 to 130 minutes. Objectives: By the end of this lab you should be able to:
CS1046 Lab 4 Timing: This lab should take you 85 to 130 minutes. Objectives: By the end of this lab you should be able to: Define the terms: function, calling and user-defined function and predefined function
More informationCSS Lecture 16 COMPSCI 111/111G SS 2018
No CSS CSS Lecture 16 COMPSCI 111/111G SS 2018 Styles Astyle changes the way the HTML code is displayed Same page displayed using different styles Same page with a style sheet body font-family: sans-serif;
More informationTelerik Test Studio. Web/Desktop Testing. Software Quality Assurance Telerik Software Academy
Telerik Test Studio Web/Desktop Testing Software Quality Assurance Telerik Software Academy http://academy.telerik.com The Lectors Iliyan Panchev Senior QA Engineer@ DevCloud Testing & Test Studio Quality
More informationCS144 Notes: Web Standards
CS144 Notes: Web Standards Basic interaction Example: http://www.youtube.com - Q: what is going on behind the scene? * Q: What entities are involved in this interaction? * Q: What is the role of each entity?
More informationGuidelines for doing the short exercises
1 Short exercises for Murach s HTML5 and CSS Guidelines for doing the short exercises Do the exercise steps in sequence. That way, you will work from the most important tasks to the least important. Feel
More informationUsing Development Tools to Examine Webpages
Chapter 9 Using Development Tools to Examine Webpages Skills you will learn: For this tutorial, we will use the developer tools in Firefox. However, these are quite similar to the developer tools found
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 information5 Snowdonia. 94 Web Applications with C#.ASP
94 Web Applications with C#.ASP 5 Snowdonia In this and the following three chapters we will explore the use of particular programming techniques, before combining these methods to create two substantial
More informationMinistry of Higher Education and Scientific Research
Morning Study Department of information technology Institute of Technical - Duhok. University of Polytechnic Duhok. Subject: Web Technology Course book for 2nd year. Lecturer s name: MSc. Ayman Nashwan
More informationSession 6. JavaScript Part 1. Reading
Session 6 JavaScript Part 1 Reading Reading Wikipedia en.wikipedia.org/wiki/javascript Web Developers Notes www.webdevelopersnotes.com/tutorials/javascript/ JavaScript Debugging www.w3schools.com/js/js_debugging.asp
More informationHCDE 530: Computational Techniques for HCDE Data Visualization in Web, Part 2
HCDE 530: Computational Techniques for HCDE Data Visualization in Web, Part 2 David McDonald, Sungsoo (Ray) Hong University of Washington Outline Before we start Download HCDE530_D3_part2.zip in the course
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 informationLayout with Layers and CSS
Layout with Layers and CSS Today we're going to make a Web site layout. Preparatory Step 1. Inside your folder create a new folder and name it layout. 2. Inside the layout folder create a new folder and
More informationNEW WEBMASTER HTML & CSS FOR BEGINNERS COURSE SYNOPSIS
NEW WEBMASTER HTML & CSS FOR BEGINNERS COURSE SYNOPSIS LESSON 1 GETTING STARTED Before We Get Started; Pre requisites; The Notepad++ Text Editor; Download Chrome, Firefox, Opera, & Safari Browsers; The
More informationE ECMAScript, 21 elements collection, HTML, 30 31, 31. Index 161
A element, 108 accessing objects within HTML, using JavaScript, 27 28, 28 activatediv()/deactivatediv(), 114 115, 115 ActiveXObject, AJAX and, 132, 140 adding information to page dynamically, 30, 30,
More informationHTML & CSS. Lesson 1: HTML Basics Lesson 2: Adding Tables Lesson 3: Intro to CSS Lesson 4: CSS in more detail Lesson 5: Review
HTML & CSS Lesson 1: HTML Basics Lesson 2: Adding Tables Lesson 3: Intro to CSS Lesson 4: CSS in more detail Lesson 5: Review Lesson 1: HTML Basics 1. Write main tile HTML & CSS 2. Write today s date Match
More informationWeb Development and HTML. Shan-Hung Wu CS, NTHU
Web Development and HTML Shan-Hung Wu CS, NTHU Outline How does Internet Work? Web Development HTML Block vs. Inline elements Lists Links and Attributes Tables Forms 2 Outline How does Internet Work? Web
More informationWeb Development. With PHP. Web Development With PHP
Web Development With PHP Web Development With PHP We deliver all our courses as Corporate Training as well if you are a group interested in the course, this option may be more advantageous for you. 8983002500/8149046285
More informationIntroduction to Dreamweaver CS3
TUTORIAL 2 Introduction to Dreamweaver CS3 In Tutorial 2 you will create a sample site while you practice the following skills with Adobe Dreamweaver CS3: Creating pages based on a built-in CSS page layout
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 Programming and Design. MPT Senior Cycle Tutor: Tamara Week 2
Web Programming and Design MPT Senior Cycle Tutor: Tamara Week 2 Plan for the next 4 weeks: Introduction to HTML tags, creating our template file Introduction to CSS and style Introduction to JavaScript
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 information