SCHOOL OF COMPUTING, ENGINEERING AND MATHEMATICS SEMESTER 2 EXAMINATIONS 2015/2016 CI135. Introduction to Web Development
|
|
- Alberta King
- 5 years ago
- Views:
Transcription
1 s SCHOOL OF COMPUTING, ENGINEERING AND MATHEMATICS SEMESTER 2 EXAMINATIONS 2015/2016 CI135 Introduction to Web Development Time allowed: TWO hours Answer: All FOURTEEN questions in section A (40%) All THREE questions in Section B (60%) Items permitted: A printed version of the Tutorial Workbook Items supplied: Electronic answer document Template files for Question 15 Source code for Question 16 Marks for whole and part questions are indicated in brackets ( ) CI135_2015/2016 Page 1 of 13 Printing date: 04 October 2016
2 Instructions 1. Note you are under exam conditions during the exam. You are not allowed to talk and you cannot leave during the first 30 minutes or the last 15 minutes. 2. Fill in the attendance slips. Make sure to provide your student number (on your student ID card), place number (e.g. exams123), course/module details, name and signature. 3. Open the answer document available at H:\CI135_<place number>\exam_answers.docx Hastings students should use the V:\ drive 4. Fill in your student number and place number at the top of the answer document 5. Save the answer document under the name <student number> in the same folder 6. Fill in your student number and place number at the top of your printed Tutorial Workbook. 7. Do not leave the exam room until your Tutorial Workbook and attendance slip has been collected by the invigilator. Section A (multiple choice) 8. Write your answer for each question into the Answer column. Only edit the Answer column, do not edit the grey columns. Section B 9. Use your preferred editor to develop the code for your answer. 10. Use the Firefox or Chrome browser to test and debug your code if you like. 11. Insert a screenshot of your solution into the answer space provided (e.g. by using the MS Word command Insert > Screenshot > Screen Clipping or by using the Print Screen keyboard button and the Paste command). Screenshots should be cropped as required and the positioning left as "In Line with Text". Only edit the Answer column, do not edit the grey columns. Note: Template files for Question 15 are available at H:\CI135_<place number>\question15\ Source code for Question 16 is available at H:\CI135_<place number>\question16\ Hastings students should use the V:\ drive CI135_2015/2016 Page 2 of 13 Printing date: 04 October 2016
3 Section A Attempt ALL questions in this section Question 1 Which one of the following statements is true about the class attribute? a) A class name must be unique in a web document b) A class name can be used any number of times in a web document c) A class attribute must be targeted by a CSS stylesheet selector d) A class is only useful for styling the HTML Question 2 Which one of the following statements is true about block-level and inline elements? a) A block-level element cannot contain other block-level elements b) A block-level element cannot be styled as an inline element c) An inline element cannot contain a block-level element d) An inline element cannot contain other inline elements Question 3 Which one of the following statements is true about the title element? a) The title element is displayed in the content of the web page b) A valid web document can have zero or more title elements in the head section c) A valid web document can have zero or more title elements in the body section d) A valid web document must have a title element in the head section Question 4 Which one of the following statements about the HTML5 <main> element is true? a) A web page can have zero or more <main> elements b) A web page must have exactly one <main> element c) A web page must have zero or one <main> element d) A web page must have one or more <main> elements CI135_2015/2016 Page 3 of 13 Printing date: 04 October 2016
4 Question 5 Which one of the following statements about the HyperText Transfer Protocol is true? a) An HTTP transaction consists of a pair of request and response messages b) More than one HTTP transaction is required to fetch a page containing images c) HTTP is a stateless protocol d) All of the above Question 6 Which one of the following statements about the HTML5 <header> element is true? a) The <header> element is a newer version of the <head> element b) A web page can have multiple <header> elements c) A web page can have only one <header> element d) A <header> element cannot be nested in an <article> element Question 7 Which of the following correctly includes a print stylesheet for an HTML page? a) <link rel="stylesheet" href="print.css" media="print" /> b) <link rel="print" src="print.css" media="stylesheet" /> c) <style rel="print" href="print.css" src="stylesheet"/> d) <style rel="stylesheet" link="print.css" media="print" /> Question 8 Which of the following statements about responsive web design is true? a) To be responsive a web page must have flexible images b) To be responsive a web page must have a fluid layout c) To be responsive a web page must be styled using CSS media queries d) All of the above CI135_2015/2016 Page 4 of 13 Printing date: 04 October 2016
5 Question 9 Consider the following HTML: 1. <nav class="global-nav"> 2. <ul> 3. <li>home</li> 4. <li>guide</li> 5. <li>contact</li> 6. </ul> 7. </nav> Which one of the following CSS selectors matches the <li> elements (highlighted in bold above) that occur within this specific <nav> element? a).nav li b).global-nav li c) li.global-nav d) #global-nav li Question 10 Consider the following CSS: screen and (min-width: 30em) { 2. body { 3. background-color: black; 4. } 5. } What types of device, and what are the capabilities of the devices targeted by this CSS media query? a) Any device with a screen width of 30 ems or more b) Computers, tablets or smartphones with a screen width of 30 ems or more c) Computer screens, tablets or smartphones with a viewport width of 30 ems or more d) Computer screens, tablets or smartphones with a viewport width of 30 ems or less CI135_2015/2016 Page 5 of 13 Printing date: 04 October 2016
6 Question 11 Consider the following folder structure: root index.html news images latest.html banner.png Which of the following would be the correct relative path to use to display banner.png in latest.html? a)../images/banner.png b) c)../root/images/banner.png d) images/banner.png CI135_2015/2016 Page 6 of 13 Printing date: 04 October 2016
7 Question 12 Examine the following JavaScript code: 1. var d = 2; 2. var n = 128; function half(x, y) { 5. var i; 6. for(i = 0; i < y; i++) { 7. x = x / d; 8. } 9. return x; 10. } n = half(n, 3); 13. console.log(n); What will be logged to the console when this script is run? a) The code contains a syntax error and wont execute b) 128 c) 64 d) 32 e) 16 f) 8 CI135_2015/2016 Page 7 of 13 Printing date: 04 October 2016
8 Question 13 Examine the following JavaScript code, contained in file script.js: 1. var spans = document.queryselectorall("span"); 2. console.log(spans.length); window.addeventlistener("load", function(){ 5. var span1 = document.queryselector("span"); 6. span1.textcontent = "Goodbye"; 7. }); And the following HTML: 1. <!doctype html> 2. <html> 3. <head> 4. <script src="script.js"></script> 5. </head> 6. <body> 7. <span>hello</span> <span>world</span> 8. </body> 9. </html> What will be logged to the console when this script is run? a) 2 b) 0 c) Hello World d) Goodbye World CI135_2015/2016 Page 8 of 13 Printing date: 04 October 2016
9 Question 14 Examine the following HTML: 1. <!doctype html> 2. <html> 3. <head></head> 4. <body> 5. <form name="myfrm" id="myfrm"> 6. <input type="password" name="pwd" id="pwd" /> 7. </form> 8. </body> 9. </html> Which one of the following lines of code could be used to get the user entered value contained in the <input> element on line 6? a) document.getelementsbytagname("input").value b) document.getelementbyid("pwd").value c) document.queryselectorall("#pwd").value d) document.forms["myfrm"].elements["pwd"].value e) Answers a) and c) f) Answers b) and d) CI135_2015/2016 Page 9 of 13 Printing date: 04 October 2016
10 Section B Attempt ALL questions in this section Question 15 (a) Write a function named divide that takes two arguments (x and y) and returns the result of dividing the first argument by the second argument. (b) Examine the following JavaScript code and answer each of the following: 1. var a = ["mary","bob"]; i. Write a line of code that inserts two elements "tom" and "jane" after the element "mary" and before the element "bob" ii. Write a line of code that adds the element "harry" at the end of array a iii. Write a line of code that logs the length of array a to the console. Note: you must not log a literal value but query the length of the array. (c) Write a function called validate that takes a single string argument. The function should return true if and only if the string starts with a "#" character followed by six (6) characters. E.g. validate("#123456")===true validate("#abcdef")===true validate("#ffffff")===true validate("ffffff")===false // Doesn t start with an # validate("#fffff")===false // Not long enough validate("#fffffff")===false // Too long (10 marks) CI135_2015/2016 Page 10 of 13 Printing date: 04 October 2016
11 Question 16 Examine the following HTML code, contained in file index.html: 1. <!doctype html> 2. <html> 3. <head> 4. <title>image Gallery</title> 5. <script src="script.js"></script> 6. </head> 7. <body> 8. <header> 9. <h1>image Gallery</h1> 10. </header> 11. <nav> 12. <ul id="images"> 13. <li> 14. <a href="img1.jpg" title="mixed fruit">fruit</a> 15. </li> 16. <li> 17. <a href="img2.jpg" title="blue flowers">flowers</a> 18. </li> 19. </ul> 20. </nav> 21. <img id="gallery" src="default.jpg" alt="gallery"/> 22. <ul id="viewlog"></ul> 23. </body> 24. </html> (question continues on next page) CI135_2015/2016 Page 11 of 13 Printing date: 04 October 2016
12 And the following JavaScript code, contained in file script.js: 1. window.addeventlistener("load", function() { 2. var i, links = document.queryselectorall("#images a"); 3. for(i = 0; i < links.length; i++){ 4. links[i].addeventlistener("click", function(evt){ 5. updateimage(this); 6. evt.preventdefault(); 7. }); 8. } 9. }); function updateimage(img) { 12. var href = img.getattribute("href"); 13. var target = document.getelementbyid("gallery"); 14. target.setattribute("src", href); 15. } (a) Extend the updateimage() function so that the alt attribute of the element with id="gallery" is changed to the clicked <a> element s title attribute text. (5 marks) (b) Further extend the updateimage() function so that it creates a list item (<li>) element containing the title text from the clicked link. This should be appended into the element with id="viewlog". Your answer must not use the innerhtml property. (15 marks) CI135_2015/2016 Page 12 of 13 Printing date: 04 October 2016
13 Question 17 (a) Write a sample XML document that represents a friend list. A friend list contains many friends. Friends have a first and last name, an address and multiple phone numbers. Phone numbers can be of type home, work or mobile. Make sure your friend list holds at least two friends. (10 marks) (b) Consider representing the information contained in a shopping cart. A shopping cart has many items. Each item has a name, id and quantity. An example of this is shown in the following XML document: 1. <cart> 2. <item id="f997"> 3. <name>bacon</name> 4. <quantity>1</quantity> 5. </item> 6. <item id="f998"> 7. <name>beans</name> 8. <quantity>3</quantity> 9. </item> 10. </cart> Write a JSON document that could be used to represent the same information. (10 marks) CI135_2015/2016 Page 13 of 13 Printing date: 04 October 2016
Introduction 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 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 informationTutorial 2 Editor Brackets
Tutorial 2 Editor Brackets Goals Create a website showcasing the following techniques - Content switch with Javascript Website - Create a folder on the desktop called tutorial 2 o - Open Brackets o - Open
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 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 informationIndex. alt, 38, 57 class, 86, 88, 101, 107 href, 24, 51, 57 id, 86 88, 98 overview, 37. src, 37, 57. backend, WordPress, 146, 148
Index Numbers & Symbols (angle brackets), in HTML, 47 : (colon), in CSS, 96 {} (curly brackets), in CSS, 75, 96. (dot), in CSS, 89, 102 # (hash mark), in CSS, 87 88, 99 % (percent) font size, in CSS,
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 information('cre Learning that works for Utah STRANDS AND STANDARDS WEB DEVELOPMENT 1
STRANDS AND STANDARDS Course Description Web Development is a course designed to guide students in a project-based environment, in the development of up-to-date concepts and skills that are used in the
More information1. The basic building block of an HTML document is called a(n) a. tag. b. element. c. attribute. d. container. Answer: b Page 5
Name Date Final Exam Prep Questions Worksheet #1 1. The basic building block of an HTML document is called a(n) a. tag. b. element. c. attribute. d. container. Answer: b Page 5 2. Which of the following
More information11. HTML5 and Future Web Application
11. HTML5 and Future Web Application 1. Where to learn? http://www.w3schools.com/html/html5_intro.asp 2. Where to start: http://www.w3schools.com/html/html_intro.asp 3. easy to start with an example code
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 informationHTML CS 4640 Programming Languages for Web Applications
HTML CS 4640 Programming Languages for Web Applications 1 Anatomy of (Basic) Website Your content + HTML + CSS = Your website structure presentation A website is a way to present your content to the world,
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 informationModule Contact: Dr Graeme Richards, CMP. Copyright of the University of East Anglia Version 1
UNIVERSITY OF EAST ANGLIA School of Computing Sciences Main Series UG Examination 2015/16 WEB BASED PROGRAMMING CMP-4011A Time allowed: 2 hours Answer BOTH questions in Section A and TWO questions from
More informationCSS. https://developer.mozilla.org/en-us/docs/web/css
CSS https://developer.mozilla.org/en-us/docs/web/css http://www.w3schools.com/css/default.asp Cascading Style Sheets Specifying visual style and layout for an HTML document HTML elements inherit CSS properties
More information1/6/ :28 AM Approved New Course (First Version) CS 50A Course Outline as of Fall 2014
1/6/2019 12:28 AM Approved New Course (First Version) CS 50A Course Outline as of Fall 2014 CATALOG INFORMATION Dept and Nbr: CS 50A Title: WEB DEVELOPMENT 1 Full Title: Web Development 1 Last Reviewed:
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 informationS. Rinzivillo DATA VISUALIZATION AND VISUAL ANALYTICS
S. Rinzivillo rinzivillo@is/.cnr.it DATA VISUALIZATION AND VISUAL ANALYTICS WEB APPLICATIONS ARCHITECTURE Outline Web Applica/on Architecture Crash courses on: HTML CSS Javascript Web Server Node.js and
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 informationAGENDA. HTML CODING YOUR HOMEPAGE [ Part IV ] :: NAVIGATION <nav> :: CSS CODING FOR HOMEPAGE [ <nav> & child elements ] CLASS :: 13.
:: DIGITAL IMAGING FUNDAMENTALS :: CLASS NOTES CLASS :: 13 04.26 2017 3 Hours AGENDA HTML CODING YOUR HOMEPAGE [ Part IV ] :: NAVIGATION home works
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 informationStatic Webpage Development
Dear Student, Based upon your enquiry we are pleased to send you the course curriculum for PHP Given below is the brief description for the course you are looking for: - Static Webpage Development Introduction
More informationWeb Site Design and Development. CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM
Web Site Design and Development CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM By the end of this course you will be able to Design a static website from scratch Use HTML5 and CSS3 to build the site you
More informationHTML + CSS. ScottyLabs WDW. Overview HTML Tags CSS Properties Resources
HTML + CSS ScottyLabs WDW OVERVIEW What are HTML and CSS? How can I use them? WHAT ARE HTML AND CSS? HTML - HyperText Markup Language Specifies webpage content hierarchy Describes rough layout of content
More informationPerfect Student Midterm Exam March 20, 2007 Student ID: 9999 Exam: 7434 CS-081/Vickery Page 1 of 5
Perfect Student Midterm Exam March 20, 2007 Student ID: 9999 Exam: 7434 CS-081/Vickery Page 1 of 5 NOTE: It is my policy to give a failing grade in the course to any student who either gives or receives
More informationINTERNET!!!11!1. Beyond the Mouse A Short Course on Programming. 10b. HTML/CSS or: I m on the. Ronni Grapenthin. November 13, 2011
1 / 15 Beyond the Mouse A Short Course on Programming 10b. HTML/CSS or: I m on the INTERNET!!!11!1 Ronni Grapenthin Geophysical Institute, University of Alaska Fairbanks Not Enough Work (panel 3), http://xkcd.com/554
More informationReview of HTML. Chapter Pearson. Fundamentals of Web Development. Randy Connolly and Ricardo Hoar
Review of HTML Chapter 3 Fundamentals of Web Development 2017 Pearson Fundamentals of Web Development http://www.funwebdev.com - 2 nd Ed. What Is HTML and Where Did It Come from? HTML HTML is defined as
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 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 informationHTML Organizing Page Content
HTML Organizing Page Content CSS for layout Examples http://www.shinybytes.com/newcss.html Generic Elements Used to create a logical grouping of content or elements on the page Can be customized to describe
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 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 informationLesson 1 HTML Basics. The Creative Computer Lab. creativecomputerlab.com
Lesson 1 HTML Basics The Creative Computer Lab creativecomputerlab.com What we are going to do today Become familiar with web development tools Build our own web page from scratch! Learn where to find
More informationUNIVERSITY OF TORONTO Faculty of Arts and Science APRIL 2016 EXAMINATIONS. CSC309H1 S Programming on the Web Instructor: Ahmed Shah Mashiyat
UNIVERSITY OF TORONTO Faculty of Arts and Science APRIL 2016 EXAMINATIONS CSC309H1 S Programming on the Web Instructor: Ahmed Shah Mashiyat Duration - 2 hours Aid Sheet: Both side of one 8.5 x 11" sheet
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 informationDiploma in Mobile App Development Part I
Diploma in Mobile App Development Part I Lesson 3 Intro to HTML & CSS MAD Educator: Tadhg Deeney @ShawMobileApp Webinar Interaction Any questions? - Our support team are here to help Chat box - Comment
More informationHTML. Hypertext Markup Language. Code used to create web pages
Chapter 4 Web 135 HTML Hypertext Markup Language Code used to create web pages HTML Tags Two angle brackets For example: calhoun High Tells web browser ho to display page contents Enter with
More informationWeb development using PHP & MySQL with HTML5, CSS, JavaScript
Web development using PHP & MySQL with HTML5, CSS, JavaScript Static Webpage Development Introduction to web Browser Website Webpage Content of webpage Static vs dynamic webpage Technologies to create
More informationHTML+ CSS PRINCIPLES. Getting started with web design the right way
HTML+ CSS PRINCIPLES Getting started with web design the right way HTML : a brief history ❶ 1960s : ARPANET is developed... It is the first packet-switching network using TCP/IP protocol and is a precursor
More informationWeb Design Course Syllabus and Planner
Web Design Course Syllabus and Planner Updated May, 2018 Course Overview The Web Design curriculum is a one-year (two-semester) course covering required topics in most introductory Web Design settings.
More informationLA TROBE UNIVERSITY SEMESTER ONE EXAMINATION PERIOD. Subject Name: WEB DEVELOPMENT CAMPUS AW BE BU MI SH ALLOWABLE MATERIALS
LIBRARY USE LA TROBE UNIVERSITY SEMESTER ONE EXAMINATION PERIOD 2015 Student ID: Seat Number: Subject Code: CSE2WD Paper No: 1 Subject Name: WEB DEVELOPMENT Paper Name: Final examination Reading Time:
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 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 informationAdvanced Web Tutorial 1 Editor Brackets / Visual Code
Advanced Web Tutorial 1 Editor Brackets / Visual Code Goals Create a website showcasing the following techniques - Liquid Layout - Z-index - Visibility Website - Create a folder on the desktop called tutorial
More informationERTH 401 / GEOP 501 Computer Tools. Lecture 12: Websites. Ronni Grapenthin MSEC 356 x5924. November 13, 2017
1 / 6 ERTH 401 / GEOP 501 Computer Tools Lecture 12: Websites Ronni Grapenthin rg@nmt.edu MSEC 356 x5924 November 13, 2017 ... get em while they re fresh 2 / 6 (latest edition I found was for 2010.) The
More informationINTRODUCTION TO CSS. Mohammad Jawad Kadhim
INTRODUCTION TO CSS Mohammad Jawad Kadhim WHAT IS CSS Like HTML, CSS is an interpreted language. When a web page request is processed by a web server, the server s response can include style sheets,
More informationIN Development in Platform Ecosystems Lecture 2: HTML, CSS, JavaScript
IN5320 - Development in Platform Ecosystems Lecture 2: HTML, CSS, JavaScript 27th of August 2018 Department of Informatics, University of Oslo Magnus Li - magl@ifi.uio.no 1 Today s lecture 1. 2. 3. 4.
More informationMPT Web Design. Week 1: Introduction to HTML and Web Design
MPT Web Design Week 1: Introduction to HTML and Web Design What will we do in this class? Learn the basics of HTML and how to create our own template Basic website structure Learn design concepts for a
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 informationCompuScholar, Inc. Alignment to Utah's Web Development I Standards
Course Title: KidCoder: Web Design Course ISBN: 978-0-9887070-3-0 Course Year: 2015 CompuScholar, Inc. Alignment to Utah's Web Development I Standards Note: Citation(s) listed may represent a subset of
More informationCSS for Page Layout Robert K. Moniot 1
CSS for Page Layout 2015 Robert K. Moniot 1 OBJECTIVES In this unit, you will learn: How to use style sheets for layout Controlling text flow, margins, borders, and padding Controlling visibility of elements
More informationWeb Development IB PRECISION EXAMS
PRECISION EXAMS Web Development IB EXAM INFORMATION Items 53 Points 73 Prerequisites COMPUTER TECHNOLOGY Grade Level 10-12 Course Length ONE YEAR Career Cluster INFORMATION TECHNOLOGY Performance Standards
More informationWEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5
WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 7 Key Concepts 1 In this chapter, you will learn how to... LEARNING OUTCOMES Code relative hyperlinks to web pages in folders within a website Configure
More informationCSS (Cascading Style Sheets)
CSS (Cascading Style Sheets) CSS (Cascading Style Sheets) is a language used to describe the appearance and formatting of your HTML. It allows designers and users to create style sheets that define how
More informationAGENDA. EMBEDDING FONTS [ Font Files & CSS font-family ] :: Online Font Converter :: ADD font-family css code to style.css
CLASS :: 12 05.04 2018 3 Hours AGENDA CREATE A WORKS PAGE [ HTML ] :: Open index.html :: Save As works.html :: Edit works.html to modify header, 3 divisions for works, then add your content :: Edit index.html
More informationYouTube Break. https://www.youtube.com/watch?v=lvtfd_rj2he
Layout Jeff Avery YouTube Break https://www.youtube.com/watch?v=lvtfd_rj2he Positioning Visual Components Previously, we learned about event handling and model-view-control architecture. Next, we need
More informationLab 1: Introducing HTML5 and CSS3
CS220 Human- Computer Interaction Spring 2015 Lab 1: Introducing HTML5 and CSS3 In this lab we will cover some basic HTML5 and CSS, as well as ways to make your web app look and feel like a native app.
More informationCss Manually Highlight Current Link Nav Link
Css Manually Highlight Current Link Nav Link way to automatically highlight the "current" link. And I can manually add the following CSS to each page to get them highlighted, but I want to avoid added.
More informationMultimedia Systems and Technologies Lab class 6 HTML 5 + CSS 3
Multimedia Systems and Technologies Lab class 6 HTML 5 + CSS 3 Instructions to use the laboratory computers (room B2): 1. If the computer is off, start it with Windows (all computers have a Linux-Windows
More informationweek8 Tommy MacWilliam week8 October 31, 2011
tmacwilliam@cs50.net October 31, 2011 Announcements pset5: returned final project pre-proposals due Monday 11/7 http://cs50.net/projects/project.pdf CS50 seminars: http://wiki.cs50.net/seminars Today common
More informationUnderstanding this structure is pretty straightforward, but nonetheless crucial to working with HTML, CSS, and JavaScript.
Extra notes - Markup Languages Dr Nick Hayward HTML - DOM Intro A brief introduction to HTML's document object model, or DOM. Contents Intro What is DOM? Some useful elements DOM basics - an example References
More informationHTML & CSS. Rupayan Neogy
HTML & CSS Rupayan Neogy But first My Take on Web Development There is always some tool that makes your life easier. Hypertext Markup Language The language your web browser uses to describe the content
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 informationPage 1 of 11 Units: - All - Teacher: WebPageDesignI, CORE Course: WebPageDesignI Year: 2012-13 Introduction to the World of Web Standards Why do web development standards play a key role in the proliferation
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 informationCS 1100: Web Development: Client Side Coding / Fall 2016 Lab 2: More HTML and CSS
Goals CS 1100: Web Development: Client Side Coding / Fall 2016 Lab 2: More HTML and CSS Practice writing HTML Add links and images to your web pages Apply basic styles to your HTML This lab is based on
More informationHTML Organizing Page Content
HTML Organizing Page Content HTML 5 Elements Well supported by current desktop and mobile browsers (known issues with IE 8 and earlier) May be used to divide pages into major sections
More informationMidterm 1 Review Sheet CSS 305 Sp 06
This is a list of topics that we have covered so far. This is not all inclusive of every detail and there may be items on the exam that are not explicitly listed here, but these are the primary topics
More informationDreamweaver CS6. Table of Contents. Setting up a site in Dreamweaver! 2. Templates! 3. Using a Template! 3. Save the template! 4. Views!
Dreamweaver CS6 Table of Contents Setting up a site in Dreamweaver! 2 Templates! 3 Using a Template! 3 Save the template! 4 Views! 5 Properties! 5 Editable Regions! 6 Creating an Editable Region! 6 Modifying
More informationFull file at New Perspectives on HTML and CSS 6 th Edition Instructor s Manual 1 of 13. HTML and CSS
New Perspectives on HTML and CSS 6 th Edition Instructor s Manual 1 of 13 HTML and CSS Tutorial One: Getting Started with HTML 5 A Guide to this Instructor s Manual: We have designed this Instructor s
More informationWeb Design & Dev. Combo. By Alabian Solutions Ltd , 2016
Web Design & Dev. Combo By Alabian Solutions Ltd 08034265103, info@alabiansolutions.com www.alabiansolutions.com 2016 HTML PART 1 Intro to the web The web Clients Servers Browsers Browser Usage Client/Server
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 informationADDING CSS TO YOUR HTML DOCUMENT. A FEW CSS VALUES (colour, size and the box model)
INTRO TO CSS RECAP HTML WHAT IS CSS ADDING CSS TO YOUR HTML DOCUMENT CSS IN THE DIRECTORY TREE CSS RULES A FEW CSS VALUES (colour, size and the box model) CSS SELECTORS SPECIFICITY WEEK 1 HTML In Week
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 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 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 informationUsing AJAX to Easily Integrate Rich Media Elements
505 Using AJAX to Easily Integrate Rich Media Elements James Monroe Course Developer, WWW.eLearningGuild.com The Problem: How to string together several rich media elements (images, Flash movies, video,
More informationGIMP WEB 2.0 MENUS. Web 2.0 Menus: Horizontal Navigation Bar. Hover Effect:
GIMP WEB 2.0 MENUS Web 2.0 Menus: Horizontal Navigation Bar WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR Hover Effect: Images required: 58 x 1 px high background image (black gloss gradient) for the nav bar
More informationChapter 7 BMIS335 Web Design & Development
Chapter 7 BMIS335 Web Design & Development Site Organization Use relative links to navigate between folders within your own site o Sometimes dividing your site into folders makes maintenance and updating
More informationWeb Publishing Basics I
Web Publishing Basics I Jeff Pankin Information Services and Technology Contents Course Objectives... 2 Creating a Web Page with HTML... 3 What is Dreamweaver?... 3 What is HTML?... 3 What are the basic
More informationGetting Started with HTML5 using BlackBerry WebWorks
Getting Started with HTML5 using BlackBerry WebWorks Lab # 1: Using New Options in the Latest Web Technologies The objective of this lab is to introduce some of the new concepts added in HTML5 by creating
More information8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) More on Relative Linking. Learning Objectives (2 of 2)
Web Development & Design Foundations with HTML5 Ninth Edition Chapter 7 More on Links, Layout, and Mobile Slides in this presentation contain hyperlinks. JAWS users should be able to get a list of links
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 informationWhat is a web site? Web editors Introduction to HTML (Hyper Text Markup Language)
What is a web site? Web editors Introduction to HTML (Hyper Text Markup Language) What is a website? A website is a collection of web pages containing text and other information, such as images, sound
More informationResponsive Design. Responsive design is it important? But typical is not enough. Some typical screen sizes
Responsive Design Responsive design is it important? For many years, screen sizes were growing Eventually, settled on fixed-width (e.g. 960px) But now with smart phones, tablets, television and many new
More informationHTML5 and CSS3: New Markup & Styles for the Emerging Web. Jason Clark Head of Digital Access & Web Services Montana State University Library
HTML5 and CSS3: New Markup & Styles for the Emerging Web Jason Clark Head of Digital Access & Web Services Montana State University Library Overview Revolution or Evolution? New Features and Functions
More informationAP CS P. Unit 2. Introduction to HTML and CSS
AP CS P. Unit 2. Introduction to HTML and CSS HTML (Hyper-Text Markup Language) uses a special set of instructions to define the structure and layout of a web document and specify how the document should
More informationCSE 154: Web Programming Autumn 2018
CSE 154: Web Programming Autumn 2018 Name: UWNet ID : TA (or section): Rules: @uw.edu You have 60 minutes to complete this exam. You will receive a deduction if you keep working after the instructor calls
More informationCSS: Responsive Design, CSS3 and Fallbacks
CSS: Responsive Design, CSS3 and Fallbacks CISC 282 October 4, 2017 What is a Mobile Browser? Browser designed for a not-desktop display Phones/PDAs, tablets, anything handheld Challenges and constraints
More informationINFS 2150 Introduction to Web Development
Objectives INFS 2150 Introduction to Web Development Create a media query Work with the browser viewport Apply a responsive design Create a pulldown menu with CSS Create a flexbox 5. Mobile Web INFS 2150
More informationINFS 2150 Introduction to Web Development
INFS 2150 Introduction to Web Development 5. Mobile Web Objectives Create a media query Work with the browser viewport Apply a responsive design Create a pulldown menu with CSS Create a flexbox INFS 2150
More informationWeek 13 Thursday (with Page 5 corrections)
Week 13 Thursday (with Page 5 corrections) Quizzes: HTML/CSS and JS available and due before 10 pm next Tuesday, May 1 st. You may do your own web research to answer, but do not ask classmates, friends,
More informationWeb UI. Survey of Front End Technologies. Web Challenges and Constraints. Desktop and mobile devices. Highly variable runtime environment
Web UI Survey of Front End Technologies Web UI 1 Web Challenges and Constraints Desktop and mobile devices - mouse vs. touch input, big vs. small screen Highly variable runtime environment - different
More informationResponsive Web Design (RWD)
Responsive Web Design (RWD) Responsive Web Design: design Web pages, so that it is easy to see on a wide range of of devices phone, tablet, desktop,... Fixed vs Fluid layout Fixed: elements have fixed
More informationDATABASE SYSTEMS. Introduction to web programming. Database Systems Course, 2016
DATABASE SYSTEMS Introduction to web programming Database Systems Course, 2016 AGENDA FOR TODAY Client side programming HTML CSS Javascript Server side programming: PHP Installing a local web-server Basic
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 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 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 informationCSS - Cascading Style Sheets
CSS - Cascading Style Sheets As a W3C standard, CSS provides a powerful mechanism for defining the presentation of elements in web pages. With CSS style rules, you can instruct the web browser to render
More informationClient Side JavaScript and AJAX
Client Side JavaScript and AJAX Client side javascript is JavaScript that runs in the browsers of people using your site. So far all the JavaScript code we've written runs on our node.js server. This is
More information