Designing and Developing a Website. 7 May Marking Scheme
|
|
- Randall Clarke
- 5 years ago
- Views:
Transcription
1 Designing and Developing a Website 7 May 05 Marking Scheme This marking scheme has been prepared as a guide only to markers. This is not a set of model answers, or the exclusive answers to the questions, and there will frequently be alternative responses which will provide a valid answer. Markers are advised that, unless a question specifies that an answer be provided in a particular form, then an answer that is correct (factually or in practical terms) must be given the available marks. If there is doubt as to the correctness of an answer, the relevant NCC Education materials should be the first authority. Throughout the marking, please credit any valid alternative point. Where markers award half marks in any part of a question, they should ensure that the total mark recorded for the question is rounded up to a whole mark. Marker's comments: Moderator's comments: Mark: Moderated mark: Final mark: Penalties applied for academic malpractice:
2 Answer ALL questions Question Marks a) The W3C stands for the World Wide Web Consortium. A consortium is a collection of different individuals, companies and organisations working together for a common purpose. Why is it important that the W3C is a consortium? 3 Award mark for each bullet point up to a maximum of 3 marks. The members of the W3C consortium include major technology companies such as Apple and Google. When the W3C agrees new web technologies they have the support of the consortium members, which means that new web technologies will be supported by a wide range of web browsers and devices. The webpages we create using these technologies will work across many different platforms. b) A focus of accessible web design is to support users with deafness and hearing loss. State THREE (3) specific actions that web designers can take to support users with deafness and hearing loss. 3 Provide alternatives for audio/video ( mark) and audio ( mark) content. This can be in the form of transcripts for any audio content on a website e.g. podcasts and captions or subtitles for video content ( mark). Note: Credit valid alternative answers. e.g. the point that deaf users often have sign language as their first language. Therefore the written content of a website, not the first language for deaf users, should be presented in a concise, clear style. c) Consider the following diagram of the WWW: Figure : A model of the WWW i) What does HTTP stand for? Hypertext Transfer Protocol Question continues on next page Page of
3 ii) Briefly describe the roles of the client and server computers. Award mark for each bullet point up to a maximum of marks. Clients connect to web servers, make requests for web pages and display web pages for web users. Web servers store web pages and send web pages to the client. iii) The diagram represents the client machine as a desktop computer. Equally it could be a laptop or a smartphone. State ONE () other device that could be categorised as a client in this model of the WWW. Any suitable device e.g. tablet, smart watch, games console Total: 0 Marks Page 3 of
4 Question Marks a) Consider the following HTML document: <!DOCTYPE HTML> <html> <head> <title>add a title here</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> </head> <body> <section> <h>welcome</h> <p>lorem ipsum dolor sit amet.</p> <section> <h>about Us</h> <p>ut enim ad minim veniam.</p> </section> <section> <h>latest News</h> <p>duis aute irure dolor in reprehenderit.</p> </section> <section> </body> </html> This page contains examples of key HTML concepts. Briefly explain what is meant by each concept listed below and provide ONE () example of the concept from the HTML document shown above. Award mark for a correct definition and mark for correctly identifying an example from the above document. i) Tag ii) Tag instructions to the browser that specify the meaning of content e.g. <section>, <h>, <p> Content Content the text the user sees when they view the page e.g. Latest News Question continues on next page Page 4 of
5 iii) iv) Attribute Attribute defines additional information for a tag e.g. http-equiv is an attribute of the meta tag Empty Element Empty Element an element with no closing tag and no content e.g. <meta> is an empty element v) Nesting Nesting the application of multiple tag effects. When one element is placed inside another e.g. The elements <h> and <p> are nested inside the <section> element Total: 0 Marks Page 5 of
6 Question 3 Marks a) The following CSS has been applied to the HTML document shown in Question : *{ font-family:verdana; } section p{ background-color:red; } section section p { color:blue; } Describe the appearance of the text: i) Welcome Welcome Verdana font ii) Duis aute irure dolor in reprehenderit. Duis aute irure dolor in reprehenderit. Verdana font, background colour of red, and font colour of blue iii) Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. - Verdana font, background colour of red b) The W3C specifies two technologies for web page construction; HTML and CSS. i) Describe the different roles of HTML and CSS. Award mark for each bullet point up to a maximum of marks. HTML defines the structure and/or meaning of content. CSS defines the presentation of the content. ii) How does the use of two separate technologies support accessibility? Separating presentation from content supports accessibility because even if a user can t view a page because of its presentation, the page will still be understandable because the structure of the document is specified using a separate technology. Note: Award mark for a partially correct answer. Question 3 continues on next page Page 6 of
7 c) Consider the following HTML element: <p style="line-height:.0em">lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p> This is an example of inline CSS. i) Why is the use of inline CSS often considered bad practice in web design? ii) Award mark for each bullet point up to a maximum of mark. The use of inline CSS involves mixing CSS with HTML. This goes against the basic principles of the two technologies. This is a very inefficient method for applying CSS as rules have to be written for every individual element. State TWO () alternative ways of specifying CSS for a webpage. External CSS ( mark) and embedded or internal CSS ( mark) Total: 0 Marks Page 7 of
8 Question 4 Marks a) Consider the following web site structure: root companion working pug.html sheltie.html hunting guard index.html pointer.html whippet.html doberman.html i) A hyperlink in the page pug.html links to the page sheltie.html. What will be the value of the href attribute for this hyperlink? sheltie.html ii) A hyperlink in the page doberman.html links to the page whippet.html. What will be the value of the href attribute for this hyperlink?../hunting/whippet.html iii) A hyperlink in the page index.html links to the page pointer.html. What will be the value of the href attribute for this hyperlink? working/hunting/pointer.html iv) A hyperlink in the page pointer.html links to the page index.html. What will be the value of the href attribute for this hyperlink?../../index.html Question 4 continues on next page Page 8 of
9 b) Consider the following HTML 5 code. It represents a navigation bar with an image for each hyperlink: <div id="nav"> <a href="home.html"><img src="home.png" alt="home button"></a> <a href="about.html"><img src="about.png" alt="about button"></a> <a href="contact.html"><img src="contact.png" alt="contact button"></a> <a href="blog.html"><img src="blog.png" alt="blog button"></a> </div> i) Why is using images in this way considered bad practice? 3 Award mark for each bullet point up to a maximum of 3 marks. This is an example of an image inserted into HTML for design purposes. Images should only be inserted into HTML if they are part of the content of the page. For example, an illustrative photograph. The content of the site the links should be plain text. This assists search engines and improves the accessibility of the site. Using text instead of images will also improves the download speed of the page as images typically have larger file size than text and using images adds to the number of requests the browser makes. Again this impacts upon download speed. ii) Re-write the HTML code to show how it might be better structured. 3 <nav> <ul> </ul> </nav> <li><a href="home.html">home</a></li> <li><a href="about.html">about Us</a></li> <li><a href="contact.html">contact Us</a></li> <li><a href="blog.html">blog</a></li> Award mark for each bullet point up to a maximum of 3 marks. Replacing the images with text. Using the nav element. Structuring the links as a list. Total: 0 Marks Page 9 of
10 Question 5 a) Both 8-bit PNG and JPEG images can be displayed in web pages. Explain the difference between 8-bit PNG and JPEG images and state which types of images each file format is suited to displaying. Marks 4 Award mark for each bullet point up to a maximum of 4 marks. 8-bit PNGs display a limited number of colours, and are usually smaller in filesize than a JPEG image. Due to the limited number of colours, 8-bit PNGs are suited to displaying images such as icons, logos and diagrams. JPEG images can display millions of colours and tend to have a larger filesize that the equivalent 8-bit PNG. JPEGs are suited to images that feature many different colours such a photographs. b) An alternative to using PNG or JPEG images is to use SVG (Scalable Vector Graphics), an XML based, vector image format. State TWO () potential advantages of using SVG. Award mark for each bullet point up to a maximum of marks. SVG is vector based. The images will re-size with no loss of quality. SVG is XML, a text based format. This will reduce the total size of a webpage and improve the download speed. SVG can feature labels and descriptions; these can be used by search engines to help with the ranking of pages. Question 5 continues on next page Page 0 of
11 c) Consider the following HTML <object> tag. It is used to embed the Adobe Flash player into a webpage. Code like this is often used to display video in a webpage. 4 <object classid="clsid:d7cdb6e-ae6d-cf-96b " width="550" height="400" id="movie_name" align="middle"> <param name="movie" value="my-movie.swf"/> <object type="application/x-shockwave-flash" data="movie_name.swf" width="550" height="400"> <param name="movie" value="my-movie.swf"/> <a href=" <img src=" alt="get Adobe Flash player"/> </a> </object> </object> The video element feature of HTML 5 means that developers may no longer be dependent on using the <object> tag to insert media. State TWO () advantages and TWO () disadvantages of this approach to HTML 5. Award mark for each bullet point up to a maximum of 4 marks. Advantages Not reliant on 3 rd party plug-ins and technologies such as Flash. Simpler code. Disdvantages It is a new technology so won t have support from older browsers. Not all browsers support the same video codecs. Total: 0 Marks Page of
12 Question 6 Marks a) Consider the following HTML code. You should recognise most of the code. The stands for non breaking space. The browser simply inserts a space. <table border=""> <tr> <th> </th> <th> </th> <th> </th> <th> </th> </tr> <tr> <td> </td> <td rowspan="3"> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td colspan=""> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> i) Sketch out what this table will look like when rendered in a browser. Award mark for the correct number of rows/columns. Award mark for the correct rowspanning and column spanning. Question 6 continues on next page Page of
13 ii) State ONE () difference between <th> and <td> elements and briefly explain how the use of <th> element supports accessibility. Both <th> and <td> element define a table cell. <th> elements define cells that are table headers, titles for the columns ( mark). <td> elements define table data cells, the actual data in a table. <th> elements assist accessibility as screen readers will read out the content of <th> elements, the title of the column, before each <td> is read out ( marks). 3 iii) This table features a border attribute. What might be a more effective way of specifying the border for an HTML table? CSS b) The HTML 5 specification specifes some new attributes for HTML <input> elements. Describe the purpose of each attribute listed below in relation to the HTML 5 specification. i) Required Required indicates that the user must enter something into the form control. An error message will appear if the user attempts to submit the form without entering data. ii) Autofocus Autofocus When the page loads, the user s cursor will automatically be placed in this element, ready for the user to enter data. iii) Autocomplete Autocomplete Indicates that if the user has previously filled in a similar form control, the browser will automatically enter a value based on the user s previously entered value. iv) Placeholder Placeholder Specifies text that will appear in a text box to indicate its purpose. When the user focuses on the textbox the placeholder text will disappear. Total: 0 Marks Page 3 of
14 Question 7 Marks a) Many web developers never use id selectors in their CSS. i) What type of selector would a web developer use instead, when they prefer not to be limited by simple tag selectors? Class selector ii) Why is not using id selectors considered good practice? Award mark for each bullet point up to a maximum of marks. This is considered good practice as more than one element in an HTML page can feature the same class value. The same isn t true for id values. This means that CSS rules defined with the class selector can be re-used for many different elements. This makes the CSS code more efficient and maintainable. Question 7 continues on next page Page 4 of
15 b) Consider the following CSS and HTML code. The CSS has been applied to the HTML. Sketch out what the page will look like when rendered in a browser. header{ outline:px solid black; height:50px; width:00%; float:left; } nav{ outline:px solid black; height:50px; clear:left; width:5%; float:left; } section{ outline:px solid black; height:50px; width:75%; float:left; } footer{ outline:px solid black; height:50px; clear:left; width:00%; } <body> <header></header> <nav></nav> <section>3</section> <footer>4</footer> </body> 3 4 Award marks for a completely accurate sketch. Note: Award mark if the sketch demonstrates the right idea but contains some errors e.g. columns sizes are incorrect. Question 7 continues on next page Page 5 of
16 c) The above example uses percentages as a unit. What are the potential advantages of using percentages as units for specifying the width of elements in a page layout? Award mark for each bullet point up to a maximum of marks. Percentage values are calculated based on the browser window size. This means that as the browser resizes, so too does the page design. The advantage this offers is that the design will work across a wide range of screen sizes. d) The following HTML code shows the top part of an HTML document: 3 <!DOCTYPE HTML> <html> <head> <title>homepage</title> <link rel="stylesheet" media="(max-width: 480px)" href="style.css"> <link rel="stylesheet" media="(min-width: 480px)" href="style.css"> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> Identify and briefly describe TWO () link elements in this document and provide ONE () reason why there are these two link elements. Award mark for each bullet point up to a maximum of 3 marks. One CSS file, style.css, will be used for small screens, those with a maximum width of 480px. The other CSS file, style.css, will be used for large screens, those with a width greater than 480px. This means that different designs can be specified for mobile (small screen) and desktop (large screen) devices. Total: 0 Marks Page 6 of
17 Question 8 a) In the user centred web design process, research is often conducted into the intended users of a website. State THREE (3) different techniques for finding out about the intended users of a website. Marks 3 Award mark for each bullet point up to a maximum of 3 marks. Server logs Surveys Interviews Focus groups b) BB is the most common form of ecommerce. i) What does BB stand for? BB Business to Business ii) State THREE (3) other categories of ecommerce and provide ONE () example of a type of website that fits each category. Award mark for each bullet point up to a maximum of 3 marks. 6 BC Business to Consumer CC Consumer to Consumer PP Peer-to-Peer M-Commerce Award mark for each bullet point up to a maximum of 3 marks. BC Online shops /Social networking sites that generate revenue through advertising CC - Auction websites such as ebay where consumers sell items they own to other consumers PP - Film studios distributing films via peer to peer networks M-Commerce Mobile phone apps e.g. an iphone app for ebay or Amazon Total: 0 Marks Page 7 of
18 Question 9 a) Consider the following screen shot of a website. 8 Source: (accessed: Jan 05). Question 9 continues on next page Page 8 of
19 Analyse this page design from a usability point of view. You may describe positive design features that enhance the usability of the page. You may also describe aspects that you think are bad design features; e.g. features that could be confusing for users and impair the usability of the site. Briefly outline FOUR (4) design features. For each design feature explain why it is a good/bad design feature. Award mark for the design feature and mark for the explanation. For the following points: Examples Good design features The page has been split into clear areas [ mark] with good use of white space to separate different parts of the page [ mark] The page title English Breakfast Large Leaf Tea Bags is large and prominent [ mark] This, along with the large image, immediately tells the user the content of the page they are viewing [ mark]. Breadcrumb navigation [ mark] shows the users position in the site hierarchy and easy access back to other sections or the homepage [ mark] The site logo follows website conventions [ mark], it is visually prominent, and is clearly visible in the top-right of the page [ mark]. Bad design features The site may benefit from a You are here indicator on the main navigation bar ( mark); this would clearly show the user they are in the Tea section ( mark). Some text is small and in caps ( mark). It may be difficult for some users to read ( mark). Note: Please credit sensible answers that are based on established web design principles. b) Card sorting involves giving potential users of a website a collection of labels and asking them to organise them into groups and sub-groups. How is this useful in a web design project? Award mark for each bullet point up to a maximum of marks. Card sorting can be a good way of seeing how users understand the structure of content in a website. The groups users create can be used to define the site structure and the global navigation options in a website. Total: 0 Marks Page 9 of
20 Marks Question 0 a) i) What is meant by validating a webpage? Validating a webpage means checking it obeys all the rules of a markup language e.g. HTML 5 ii) Why is it considered good practice to validate webpages? Award mark for each bullet point up to a maximum of marks. It is considered good practice as W3C specifications such as HTML 5 are designed to support a wide range of users. If a webpage obeys the rules of the W3C specification it is the starting point for ensuring the pages are widely usable. b) Usability testing involves getting potential users of a website to perform typical tasks using a website or website design. i) Usability testing is best done as part of an iterative design process. Briefly explain what is meant by an iterative design process. ii) Award mark for each bullet point up to a maximum of marks. Testing isn t something that is done once the web project has been completed. It should be done throughout the design process. The designs or site should be tested, and using the results of the test, the design should be improved and tested again. Why should members of the web development team not be subjects for usability tests? Award mark for each bullet point up to a maximum of marks. Members of the web development team will be too familiar with the website content and design. Testing should be done with users that have no previous experience of the site as this will more accurately reflect the site s real use. Page 0 of
21 c) Web Accessibility Evaluation Tool (WAVE ) is an online tool that can check the accessibility of a website. State TWO () advantages and ONE () disadvantage of using a tool like WAVE? (WAVE copyright is 04 WebAIM) 3 Award mark for each bullet point up to a maximum of 3 marks. Advantages Speed. A tool can check HTML code automatically using accessibility principles that would take a human much longer to conduct No chance of human error. It is possible that real person performing the same checks would miss some potential problems Limitations The limitation is that tools like WAVE are still using principles of accessibility. The only way to really know if a design is accessible is by testing with real users. End of Examination Paper Total: 0 Marks Page of
22 Learning Outcomes matrix Question Learning Outcomes assessed 5, 6 Yes Yes 3 Yes 4 Yes 5 3 Yes 6, 3, 5 Yes 7 Yes 8 6 Yes 9,, 5 Yes 0,, 4, 5 Yes Grade descriptors Marker can differentiate between varying levels of achievement Learning Outcome Pass Merit Distinction Design a website to address looselydefined requirements Provide adequate design to address the specification Use web development tools to build (X)HTMLand CSS-based websites to address well-defined specifications Understand the technology and tools needed to use multimedia in the context of a website Develop test strategies and apply these to a website Understand the need for Web standards Understand the concepts associated with using the Internet and the World Wide Web for business Demonstrate adequate and appropriate ability to build artefact Demonstrate adequate level of understanding Show adequate development Demonstrate adequate level of understanding Demonstrate adequate level of understanding Provide detailed and appropriate design to address the specification Demonstrate sound and consistently appropriate ability to build artefact Demonstrate robust level of understanding Show sound and appropriate development Demonstrate robust level of understanding Demonstrate robust level of understanding Provide wholly appropriate and innovative design that meets the specification Demonstrate exceptional ability to build artefact Demonstrate highly comprehensive level of understanding Show innovative and highly appropriate development Demonstrate highly comprehensive level of understanding Demonstrate highly comprehensive level of understanding Page of
Designing and Developing a Website. 7 May Examination Paper. Time: 3 hours
Designing and Developing a Website 7 May 205 Examination Paper Answer ALL questions. Clearly cross out surplus answers. Time: 3 hours The maximum mark for this paper is 00. Any reference material brought
More informationDesigning and Developing a Website. December Sample Exam Marking Scheme
Designing and Developing a Website December 2015 Sample Exam Marking Scheme This marking scheme has been prepared as a guide only to markers. This is not a set of model answers, or the exclusive answers
More informationDesigning and Developing a Website. 6 August Marking Scheme
Designing and Developing a Website 6 August 015 Marking Scheme This marking scheme has been prepared as a guide only to markers. This is not a set of model answers, or the exclusive answers to the questions,
More informationDESIGNING AND DEVELOPING A WEBSITE MARKING SCHEME
DESIGNING AND DEVELOPING A WEBSITE 7 th NOVEMBER 01 MARKING SCHEME This Marking Scheme has been prepared as a guide only to markers. This is not a set of model answers, nor is the Marking Scheme exclusive,
More informationMicronet International College
Name: /50 Class: Micronet International College Level 4 Diploma in Computing Designing and Developing a Website (DDW) Test 2 (20%) QUESTION 1 a) JPEG is a commonly used image file format on the web. What
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 informationHTML for D3. Visweek d3 workshop
HTML for D3 Visweek d3 workshop What is HTML HTML is the language in which the web pages are encoded. What is HTML? HTML can be complicated But it doesn t have to be.
More informationWeb Programming Week 2 Semester Byron Fisher 2018
Web Programming Week 2 Semester 1-2018 Byron Fisher 2018 INTRODUCTION Welcome to Week 2! In the next 60 minutes you will be learning about basic Web Programming with a view to creating your own ecommerce
More informationCo. Louth VEC & Co. Monaghan VEC. Programme Module for. Web Authoring. leading to. Level 5 FETAC. Web Authoring 5N1910
Co. Louth VEC & Co. Monaghan VEC Programme Module for Web Authoring leading to Level 5 FETAC Web Authoring 5N1910 Web Authoring 5N1910 1 Introduction This programme module may be delivered as a standalone
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 informationUnit 20 - Client Side Customisation of Web Pages. Week 2 Lesson 4 The Box Model
Unit 20 - Client Side Customisation of Web Pages Week 2 Lesson 4 The Box Model So far Looked at what CSS is Looked at why we will use it Used CSS In-line Embedded (internal style-sheet) External
More informationDESIGN GUIDELINES. Use the following slides as a guide to make sure your presentation follows the PCS Plus brand.
Use the following slides as a guide to make sure your presentation follows the PCS Plus brand. LOGO PLACEMENT On white content slides the logo should appear in full colour on the bottom left of the screen
More informationIDM 221. Web Design I. IDM 221: Web Authoring I 1
IDM 221 Web Design I IDM 221: Web Authoring I 1 Week 1 Introduc)on IDM 221: Web Authoring I 2 Hello I am Phil Sinatra, professor in the Interac4ve Digital Media program. You can find me at: ps42@drexel.edu
More informationUnit 20 - Client Side Customisation of Web Pages. Week 2 Lesson 4 The Box Model
Unit 20 - Client Side Customisation of Web Pages Week 2 Lesson 4 The Box Model Last Time Looked at what CSS is Looked at why we will use it Used CSS In-line Embedded (internal style-sheet) External
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 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 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 informationChapter 3 CSS for Layout
Chapter 3 CSS for Layout Chapter two introduced how CSS is used to manage the style of a webpage, this chapter explores how CSS manages the layout of a webpage. Generally a webpage will consist of many
More informationIT Skills. September Marking Scheme
IT Skills September 205 Marking Scheme This marking scheme has been prepared as a guide only to markers. This is not a set of model answers, or the exclusive answers to the questions, and there will frequently
More informationANNEX VIII.2 New dangerous substances website. Safety and health at work is everyone s concern. It s good for you. It s good for business.
ANNEX VIII.2 New dangerous substances website Safety and health at work is everyone s concern. It s good for you. It s good for business. Information architecture 2 Information architecture Multilingual
More informationHTML and CSS a further introduction
HTML and CSS a further introduction By now you should be familiar with HTML and CSS and what they are, HTML dictates the structure of a page, CSS dictates how it looks. This tutorial will teach you a few
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 information[AVWSQ-ADWCS6]: WSQ ICDL Adobe Dreamweaver CS6
[AVWSQ-ADWCS6]: WSQ ICDL Adobe Dreamweaver CS6 Length : 2 Days Audience(s) : New or existing users Level : 3 Technology : Adobe Dreamweaver CS6 program Delivery Method : Instructor-Led (Classroom) Course
More informationCSC Web Programming. Introduction to HTML
CSC 242 - Web Programming Introduction to HTML Semantic Markup The purpose of HTML is to add meaning and structure to the content HTML is not intended for presentation, that is the job of CSS When marking
More informationMicronet International College
Micronet International College Level 4 Diploma in Computing Designing and Developing a Website (DDW) Test 1 (20%) Name: /50 Class: QUESTION 1 a) I) What are W3C standards? 1 Specifications or descriptions
More informationThis is an H1 Header. This is an H2 Header. This is an H3 Header
is a key element in web design. This templates delivers you sophisticated typography and various stylings. The style guide gives you an overview about all possible HTML tag stylings provided by the template.
More informationMark Scheme. Edexcel Level 2 Certificate in Digital Applications. Unit 5: Coding for the Web
Mark Scheme Edexcel Certificate in Digital Applications Unit 5: Coding for the Web General marking guidance All candidates must receive the same treatment. Examiners must mark the first candidate in exactly
More informationSoftware Development Techniques. December Sample Exam Marking Scheme
Software Development Techniques December 2015 Sample Exam Marking Scheme This marking scheme has been prepared as a guide only to markers. This is not a set of model answers, or the exclusive answers to
More informationThinking inside the box
Intro to CSS Thinking inside the box Thinking inside the box Thinking inside the box Thinking inside the box Thinking inside the box Thinking inside the box Thinking inside
More information16. HTML5, HTML Graphics, & HTML Media 웹프로그래밍 2016 년 1 학기 충남대학교컴퓨터공학과
16. HTML5, HTML Graphics, & HTML Media 웹프로그래밍 2016 년 1 학기 충남대학교컴퓨터공학과 목차 HTML5 Introduction HTML5 Browser Support HTML5 Semantic Elements HTML5 Canvas HTML5 SVG HTML5 Multimedia 2 HTML5 Introduction What
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 informationBlackboard staff how to guide Accessible Course Design
The purpose of this guide is to help online course authors in creating accessible content using the Blackboard page editor. The advice is based primarily on W3C s Web Content Accessibility Guidelines 1.0
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 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 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 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 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 informationSoftware Development Techniques. 26 November Marking Scheme
Software Development Techniques 26 November 2015 Marking Scheme This marking scheme has been prepared as a guide only to markers. This is not a set of model answers, or the exclusive answers to the questions,
More informationAGENDA :: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES
CLASS :: 13 12.01 2014 AGENDA SIMPLE CSS MENU W/ HOVER EFFECTS :: The Nav Element :: Styling the Nav :: UL, LI, and Anchor Elements :: Styling the UL and LI Elements TEMPLATE CREATION :: Why Templates?
More informationAll Adobe Digital Design Vocabulary Absolute Div Tag Allows you to place any page element exactly where you want it Absolute Link Includes the
All Adobe Digital Design Vocabulary Absolute Div Tag Allows you to place any page element exactly where you want it Absolute Link Includes the complete URL of the linked document, including the domain
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 informationSlightly more advanced HTML
Slightly more advanced HTML div and span Whereas most HTML tags apply meaning (p makes a paragraph, h1 makes a heading, etc.), the span and div tags apply no meaning but are still very useful in conjunction
More information1 of 7 8/27/2014 2:26 PM Units: Teacher: WebPageDesignI, CORE Course: WebPageDesignI Year: 2012-13 Designing & Planning Web Pages This unit will give students a basic understanding of core design principles
More informationUsing Dreamweaver CC. Logo. 4 Creating a Template. Page Heading. Page content in this area. About Us Gallery Ordering Contact Us Links
Using Dreamweaver CC 4 Creating a Template Now that the main page of our website is complete, we need to create the rest of the pages. Each of them will have a layout that follows the plan shown below.
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 informationADOBE VISUAL COMMUNICATION USING DREAMWEAVER CS5 Curriculum/Certification Mapping in MyGraphicsLab
ADOBE VISUAL COMMUNICATION USING DREAMWEAVER CS5 Curriculum/Certification Mapping in MyGraphicsLab OBJECTIVES- 1.0 Setting Project Requirement 1.1 Identify the purpose, audience, and audience needs for
More informationCertified HTML5 Developer VS-1029
VS-1029 Certified HTML5 Developer Certification Code VS-1029 HTML5 Developer Certification enables candidates to develop websites and web based applications which are having an increased demand in the
More informationCSC 337. Cascading Style Sheets. Marty Stepp, Rick Mercer
CSC 337 Cascading Style Sheets Marty Stepp, Rick Mercer Preview of a style sheet /* The good way, with a preview of cascading style sheet (css) that has class mystyle */ body { background-color: grey;.mystyle
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 information2 December NCFE Corporate Guidelines. Introduction
Introduction Introduction How we connect with people through our brand is essential to who we are, and plays a big part in the NCFE experience. We created this document (which is simpler than it looks)
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 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 information01 The logo design. Our logo is the touchstone of our brand and one of the most valuable assets. We must. Designed by KING DESIGN
01 The logo design Our logo is the touchstone of our brand and one of the most valuable assets. We must 1. The logo and its usage / 2. Black, white and grayscale / 3. Logo construction + clear space /
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 informationtemplate guidelines. 1. Visual identity 2. How to build an
Email template guidelines 1. Visual identity 2. How to build an email 1. Visual identity There are four main elements of an email s visual identity: University logo Typography Colour Imagery University
More informationMark Scheme. June Pearson Level 2 Certificate in Digital Applications. Unit 5: Coding for the Web
Mark Scheme June 016 Pearson Level Certificate in Digital Applications Unit 5: Coding for the Web General marking guidance All candidates must receive the same treatment. Examiners must mark the first
More informationDreamweaver Basics Workshop
Dreamweaver Basics Workshop Robert Rector idesign Lab - Fall 2013 What is Dreamweaver? o Dreamweaver is a web development tool o Dreamweaver is an HTML and CSS editor o Dreamweaver features a WYSIWIG (What
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 informationORB Education Quality Teaching Resources
These basic resources aim to keep things simple and avoid HTML and CSS completely, whilst helping familiarise students with what can be a daunting interface. The final websites will not demonstrate best
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 informationMichPA Content Guide. Table of Contents. Website Section Overview. Global Banner & Navigation. Content Area Client editable
Table of Contents Website Section Overview MichPA Content Guide Website Section Overview...1 FAQ...2 Content Area Styles...3 Client-side Right Navigation Styles...4 Font Index...5 Color Index...5 Rotating
More informationIDM 221. Web Design I. IDM 221: Web Authoring I 1
IDM 221 Web Design I IDM 221: Web Authoring I 1 Week 6 IDM 221: Web Authoring I 2 The Box Model IDM 221: Web Authoring I 3 When a browser displays a web page, it places each HTML block element in a 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 informationHTML. HTML Evolution
Overview stands for HyperText Markup Language. Structured text with explicit markup denoted within < and > delimiters. Not what-you-see-is-what-you-get (WYSIWYG) like MS word. Similar to other text markup
More informationWeb Accessibility Checklist
Web Accessibility Checklist = Web Content Accessibility Guidelines published by the World Wide Web Consortium (W3C) 508 = Section 508 of the Rehabilitation Act = Both CATE and Moodle take care of the rule
More informationUsing Dreamweaver CS6
Using Dreamweaver CS6 7 Dynamic HTML Dynamic HTML (DHTML) is a term that refers to website that use a combination of HTML, scripting such as JavaScript, CSS and the Document Object Model (DOM). HTML and
More information1.7 Uniform Resource Identifiers and Domain Names 13 URIs and URLs 13 Domain Names 13
Chapter 1 Introduction to the Internet and World Wide Web 1 1.1 The Internet and the Web 2 The Internet 2 Birth of the Internet 2 Growth of the Internet 2 Birth of the Web 2 The First Graphical Browser
More informationHTML Summary. All of the following are containers. Structure. Italics Bold. Line Break. Horizontal Rule. Non-break (hard) space.
HTML Summary Structure All of the following are containers. Structure Contains the entire web page. Contains information
More informationText and Layout. Digital Multimedia, 2nd edition Nigel Chapman & Jenny Chapman Chapter 11. This presentation 2004, MacAvon Media Productions
Text and Layout Digital Multimedia, 2nd edition Nigel Chapman & Jenny Chapman Chapter 11 This presentation 344 345 Text in Graphics Maximum flexibility obtained by treating text as graphics and manipulating
More informationKNOWLEDGE CENTER SERVICE. Customization Guide
KNOWLEDGE CENTER SERVICE Customization Guide TABLE OF CONTENTS PAGE Homepage Overview 1 Homepage Customization Options 1. Header 3 2. Engagement Tools 5 3. Search Box 8 4. Search Results 13 5. Footer 20
More informationDreamweaver Basics. Planning your website Organize site structure Plan site design & navigation Gather your assets
Dreamweaver Basics Planning your website Organize site structure Plan site design & navigation Gather your assets Creating your website Dreamweaver workspace Define a site Create a web page Linking Manually
More informationWeb Design and HTML. Web Page vs Web Site. Navigation. Links. A web page is a single page viewable using web browser. A web site is a set of web pages
Web Page vs Web Site Web Design and HTML Lecture 14 COMPSCI111/111G SS 2018 A web page is a single page viewable using web browser Should be visually appealing, informative A web site is a set of web pages
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 informationCreating Web Pages. Getting Started
Creating Web Pages Getting Started Overview What Web Pages Are How Web Pages are Formatted Putting Graphics on Web Pages How Web Pages are Linked Linking to other Files What Web Pages Are Web Pages combine
More informationHTML is a mark-up language, in that it specifies the roles the different parts of the document are to play.
Introduction to HTML (5) HTML is a mark-up language, in that it specifies the roles the different parts of the document are to play. For example you may specify which section of a document is a top level
More informationWebsite Development (WEB) Lab Exercises
Website Development (WEB) Lab Exercises Select exercises from the lists below to complete your training in Website Development and earn 125 points. You do not need to do all the exercises listed, except
More information8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives. Overall Design Is Related to the Site Purpose. Website Organization
Web Development & Design Foundations with HTML5 Ninth Edition Chapter 5 Web Design Slides in this presentation contain hyperlinks. JAWS users should be able to get a list of links by using INSERT+F7 Learning
More informationInteractive Media CTAG Alignments
Interactive Media CTAG Alignments This document contains information about eight Career-Technical Articulation Numbers (CTANs) for the Media Arts Career-Technical Assurance Guide (CTAG). The CTANs are:
More informationHIERARCHICAL ORGANIZATION
A clearly defined home page Navigation links to major site sections HIERARCHICAL ORGANIZATION Often used for commercial and corporate websites 1 Repetition DESIGN PRINCIPLES Repeat visual elements throughout
More informationCSC Web Technologies, Spring HTML Review
CSC 342 - Web Technologies, Spring 2017 HTML Review HTML elements content : is an opening tag : is a closing tag element: is the name of the element attribute:
More informationTennessee. Trade & Industrial Course Web Page Design II - Site Designer Standards. A Guide to Web Development Using Adobe Dreamweaver CS3 2009
Tennessee Trade & Industrial Course 655745 Web Page Design II - Site Designer Standards A Guide to Web Development Using Adobe Dreamweaver CS3 2009 ation Key SE Student Edition LE Learning Expectation
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 informationWireframe :: tistory wireframe tistory.
Page 1 of 45 Wireframe :: tistory wireframe tistory Daum Tistory GO Home Location Tags Media Guestbook Admin 'XHTML+CSS' 7 1 2009/09/20 [ ] XHTML CSS - 6 (2) 2 2009/07/23 [ ] XHTML CSS - 5 (6) 3 2009/07/17
More informationGetting Started with Eric Meyer's CSS Sculptor 1.0
Getting Started with Eric Meyer's CSS Sculptor 1.0 Eric Meyer s CSS Sculptor is a flexible, powerful tool for generating highly customized Web standards based CSS layouts. With CSS Sculptor, you can quickly
More informationWhen you complete this chapter, you will be able to:
Page Layouts CHAPTER 7 When you complete this chapter, you will be able to: Understand the normal fl ow of elements Use the division element to create content containers Create fl oating layouts Build
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 informationTEST NAME: MMWD 4.01 TEST ID: GRADE:09 - Ninth Grade Twelfth Grade SUBJECT:Computer and Information Sciences TEST CATEGORY: My Classroom
TEST NAME: MMWD 4.01 TEST ID:2416218 GRADE:09 - Ninth Grade - 12 - Twelfth Grade SUBJECT:Computer and Information Sciences TEST CATEGORY: My Classroom MMWD 4.01 Page 1 of 23 Student: Class: Date: 1. Which
More informationMark Scheme (Results)
Mark Scheme (Results) Pearson Edexcel Certificate in Digital Applications Unit 5: Coding for the Web Edexcel and BTEC Qualifications Edexcel and BTEC qualifications are awarded by Pearson, the UK s largest
More informationUnit code: J/601/1286 QCF Level 4: BTEC Higher National Credit value: 15
Unit 14: Website Design Unit code: J/601/1286 QCF Level 4: BTEC Higher National Credit value: 15 Aim To enable learners to understand the concepts of website design and apply their own creativity in designing
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 informationAdobe Dreamweaver CS6 Digital Classroom
Adobe Dreamweaver CS6 Digital Classroom Osborn, J ISBN-13: 9781118124093 Table of Contents Starting Up About Dreamweaver Digital Classroom 1 Prerequisites 1 System requirements 1 Starting Adobe Dreamweaver
More informationHtml 5 Basic structure. <!DOCTYPE html> HTML <!DOCTYPE> Declaration. Mansour
HTML Declaration This is an HTML document. To declare the language of a Web page Opening and closing of HTML Tag
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 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 informationSilverStripe - Website content editors.
SilverStripe - Website content editors. Web Content Best Practices In this section: Learn how to make your site search-engine friendly Learn how to make your content accessible Other web best practices
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 informationbrand rationale logo colour typography graphics & images GREEN BISHOP BRAND IDENTITY GUIDELINES
brand rationale logo colour typography graphics & images 1 BRAND RATIONALE THE STORY OF GREEN BISHOP Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
More informationA designers guide to creating & editing templates in EzPz
A designers guide to creating & editing templates in EzPz Introduction...2 Getting started...2 Actions...2 File Upload...3 Tokens...3 Menu...3 Head Tokens...4 CSS and JavaScript included files...4 Page
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 information