Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence

Save this PDF as:
 WORD  PNG  TXT  JPG

Size: px
Start display at page:

Download "Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence"

Transcription

1 Web Development Owen Sacco ICS2205/ICS2230 Web Intelligence

2 Introduction Client-Side scripting involves using programming technologies to build web pages and applications that are run on the client (i.e. in the browser on the user s device) Client-side scripting can be used to: Validate user input Interact with the browser Enhance web pages Add client/server communication between a browser and a web server 2

3 Introduction Client-side scripting does have limitations such as: Browser dependency the browser or scripting host must support the scripting language and capabilities Client-side scripts are restricted from accessing the local hardware and file system Client-side scripts can be viewed by the client by using the browser s source-viewing capability Sensitive information, such as passwords or other personally identifiable data should not be on the client All client-side data validation should be mirrored on the server 3

4 Introduction Client-side technologies: Hypertext Markup Language (HTML) A markup language designed to specify the content and structure of web pages (also called Web documents) Cascading Style Sheets (CSS) Specify the presentation or styling, of elements on a web page (eg: fonts, spacing, sizes, colours, positioning) JavaScript JavaScript is an interpreted programming language that helps you build dynamic web pages in response to events 4

5 5. HTML & CSS

6 Hypertext Markup Language (HTML)

7 What is HTML? Unlike programming languages, such as C, C++, C and Java, HTML is a markup language that specifies the structure and content of documents that are displayed in web browsers HTML5 is the latest HTML version HTML documents are stored on a Web Server which are requested by the client Once a client requests a particular HTML document (or other resources), the Web Server sends the file to the client 7

8 What is HTML? 8

9 What is HTML? 9

10 What is HTML? 10

11 What is HTML? When the browser reads your HTML code, it interprets all the tags that surround the text Tags are just words or characters in angle brackets, such as <head>, <p>, <h1>, etc. that tell the browser about the structure of your text Therefore, with HTML you can use tags to tell the browser what text is in a heading, what text is in a paragraph and so on 11

12 How Tags Work In order to tell the browser about the structure of your page, use pairs of tags around your content i.e. opening tag and closing tag: <h1> Hello World </h1> Opening Tag Content Closing Tag 12

13 HTML Example 13

14 HTML Example: <!DOCTYPE> Document Type Declaration <!DOCTYPE> in line 1 is required at the start of the HTML document, before the <html> tag It tells the browser which version of (X)HTML standard the web page coding is supposed to comply with It tells the browser how to render the page in standards compliant mode HTML 4.01 had three different <!DOCTYPE> whereas HTML5 has only one: <!DOCTYPE html> 14

15 HTML Example: Comments Comments are used to improve readability and describe segments of the document, for example in line 2 The browser ignores comments when your document is rendered Comments start with <!-- and end with --> 15

16 HTML Example: html, head and body elements HTML markup contains text (and images, graphics, animations, audios and videos) that represents the content of a document HTML elements specify a document s structure and meaning The html element in line 3 encloses the head and body section 16

17 HTML Example: html, head and body elements The head section (represented by the head element in line 4) contains: Information about the HTML document, such as the character set (for example UTF-8, the most popular character-encoding scheme) that helps the browser to determine how to render the content The title of the page (represented by the title element) Can contain CSS3 style sheets for documentformatting instructions Can contain scripts for creating dynamic web pages (for example JavaScript) 17

18 HTML Example: html, head and body elements The body section (represented by the body element in line 8) contains the page s content, which the browsers displays when the user visits the web page 18

19 HTML Example: Start Tags and End Tags HTML documents delimit most elements with a start tag and an end tag A start tag consists of the element name in angle brackets, for example <html> An end tag consists of the element name preceded by a forward slash (/) in an angle brackets, for example </html> There are several void elements that do not have end tags 19

20 HTML Example: Start Tags and End Tags Start tags have attributes that provide additional information about an element, which browsers use to determine how to process the element Each attribute has a name and a value separated by an equals sign (=) Although element and attribute names are case insensitive, it s a good practice to use only lowercase letters 20

21 HTML Example: title Element Line 6 specifies a title element and it is a nested element because it is enclosed in the head element s start and end tags It is also enclosed in the html element s start and end tags Titles usually appear in: the title bar at the top of the browser window in the browser tab on which the page is displayed, the text identifying a page when users add the page to their list of Favourites or Bookmarks Search engines use the title for indexing purposes and when displaying results 21

22 HTML Example: Paragraph Element Line 9 specifies the paragraph element denoted with <p> and </p> All text placed between <p> and </p> tags forms one paragraph When a browser renders a paragraph, it places extra space above and below the paragraph text 22

23 HTML - Headings HTML provides 6 heading elements (h1 through h6) for specifying the relative importance of information 23

24 HTML - Linking Hyperlink references (or links to) other resources such as documents and images When a user clicks a hyperlink, the browser tries to execute an action associated with it (for example navigate to a URL or open an client) Any displayed element can act as a hyperlink Web browsers underline text hyperlinks and colour their text blue by default so that users can distinguish hyperlinks from plain text 24

25 HTML - Linking Hyperlinks are created using the a (anchor) element The location of a resource (i.e. the resource s URL) is assigned to the attribute href (hypertext reference); for example: If the Web server cannot locate a requested document, it returns a 404 error 25

26 HTML - Linking Anchors can link to addresses using a mailto When a user clicks this type of anchored link, most browsers launch the user s default program The form of an anchor is: 26

27 HTML - Images The most popular image formats used by Web developers today are PNG (Portable Network Graphics) and JPEG (Joint Photographic Experts Group) The img element includes an image in the document The image file s location is specified with the src (source) attribute When images are located in the same directory as the HTML documents, only the image s file name is required This is known as relative path 27

28 HTML - Images Other optional attributes specify more information about how the image will be displayed For example the attributes width and height specify the image s dimensions if these are omitted, the browser uses the image s actual width and height An example of including an image in an HTML document: 28

29 HTML - Images Every image must have an alt attribute so that if the browser cannot render the image, the browser displays the alt attribute value The alt attribute is also important for the visually impaired users since the speech synthesizer software can speak the alt attribute s value so that they can understand what the browser is displaying Images can be used as hyperlinks by nesting an img element in an anchor element 29

30 For example: HTML - Images Clicking on an image hyperlink takes a user to the Web page specified by the surrounding href element Images from other Web documents can also be referenced by the src attribute If you refer to an image on another website, the browser has to request the image resource from that site s server 30

31 HTML - Lists Lists in a Web page are used to organise content Lists may contain: unordered information and ordered information Unordered lists displays text in a simple bullet-style list that does not order its items by letter or number The unordered-list element ul creates a list in which each item begins with a bullet symbol and each entry in the unordered list is an li (list item) element 31

32 HTML - Lists 32

33 HTML - Lists Ordered lists, represented in HTML as ol (orderedlist element) are lists in which each item begins with a number Nested lists represent hierarchical relationships, as in a multilevel outline A Web browser indents each nested list to indicate a hierarchical relationship and bullet styles used may vary by browser 33

34 HTML - Lists 34

35 HTML - Lists 35

36 HTML - Tables Tables are frequently used to organise data into rows and columns Tables are defined with the table element The border attribute with value 1 specifies that the browser should place borders around the table and table s cells The border attribute is a legacy attribute that you should avoid The CSS border property is the preferred way to format a table s border 36

37 HTML - Tables The caption element specifies a table s title and text in this element is typically rendered above the table It s good practice to include a general description of a table s information in the table s element s summary attribute A table has three distinct sections: head, body and foot 37

38 HTML - Tables Table caption Table header Table body Table border Table footer 38

39 HTML - Tables The head section (or header cell) is defined with a thead element which contains header information such as column names Each tr element defines an individual table row The columns in the thead section are defined with th (table header column) elements Most browsers center text formatted by th elements and display them in bold 39

40 HTML - Tables The body section is defined with a tbody element The tr element specifies one data row Data cells contain individual pieces of data and are defined with td (table data) elements in each row The footer section is defined with a tfoot (table foot) element The text placed in the footer commonly includes calculation results and footnotes 40

41 HTML - Tables The tfoot section can contain table rows, and each row can contain cells Similar to the thead section, cells in the footer section are created using th elements, instead of the td elements used in the table body Prior to HTML5, the tfoot section was required to appear above the tbody section of the table As of HTML5, the tfoot section can be above or below the tbody section in the code 41

42 42

43 HTML - Tables Table cells are sized to fit the data they contain, but you can control a table s formatting using CSS3 You can create cells that apply to more than one row or column using rowspan and colspan The values assigned to these attributes specify the number of rows or columns occupied by a cell 43

44 HTML - Forms When browsing websites, users often need to provide information such as search queries, address and post codes HTML5 provides a mechanism, called a form, for collecting data from a user Data that users enter on a Web page is normally sent to a Web server after clicking the submit button The server would process the data and send back the result as specified in the server-side code (for example in the PHP scripts) 44

45 HTML - Forms A form element contains the method attribute that specifies how the form s data is sent to the Web server When using the post method, the data in the form is appended to the browser request (HTTP request) which is passed to the server transparently and the user does not see the data after the form is submitted 45

46 HTML - Forms Whereas using the get method, the data in the form is appended directly to the URL of the script which is being requested and is visible in the user s address bar The action attribute in the form specifies the URL of a script on the Web server that will be invoked to process the form s data The input elements specify the data to provide to the script (on the server) that processes the form These scripts are also called the form handlers 46

47 HTML - Forms There are several types of input elements which are determined by its type attribute The text input type inserts a text field in the form where users can fill in their data The size attribute specifies the number of characters visible in the text field The maxlength attribute limits the number of characters input into the text field The submit input type inserts a button that when clicked, the form data is passed to the location in the form s action attribute 47

48 HTML - Forms The reset input type inserts a button that when clicked, resets all form elements to their default values as specified by the value attribute The hidden input type allows to send form data that s not an input by a user The password input type inserts a password box with the specified size and allows users to enter sensitive information which are masked with asterisks (*) Note: the actual value is sent to the Web server and not the asterisks (*) 48

49 HTML - Forms The checkbox input type enables users to select an option and check marks appear in the checkbox Checkboxes can be used individually or in groups Checkboxes that belong to a group are assigned the same name attribute The radio input type enables users to select an option from radio buttons Radio buttons in a group all have the same name attribute and are distinguished by their value attributes 49

50 HTML - Forms The select input type enables users to select an option from a drop-down list The name attribute identifies the drop-down list The option element adds items to the drop-down list The selected attribute specifies which item is initially displayed as the selected item If not set, the browser selects the first option by default 50

51 HTML - Forms The textarea element inserts a multiline text area box into the form The number of rows is specified with the rows attribute The number of columns is specified with the cols attribute 51

52 HTML - Forms 52

53 HTML - Forms 53

54 Cascading Style Sheets (CSS)

55 What is CSS? Cascading Style Sheets 3 (CSS3) allows you to specify the presentation of elements on a Web page (for example fonts, spacing, sizes colours, positioning) separately from the document s structure and content The separation of structure from presentation simplifies maintaining and modifying Web pages, especially on large-scale Websites 55

56 What is CSS? Although HTML has attributes that control presentation, it s better not to mix presentation with content You can declare document styles: Inline in the HTML markup In embedded style sheets In separate CSS files 56

57 CSS Inline Styles Inline styles declare an individual element s format using the HTML attribute style Inline styles override any other styles 57

58 CSS Embedded Style Sheets Embedded style sheets enable you to embed CSS3 document in an HTML5 document s head section The style element defines the embedded style sheet Styles placed in the head apply to matching elements wherever they appear in the body CSS documents use the MIME type text/css The style sheet s body declares the CSS rules for the style sheet 58

59 CSS Embedded Style Sheets Each rule s body is enclosed in curly braces: { and } CSS rules in embedded style sheets use the same syntax as inline styles: the property name is followed by a colon (:) and the property value Multiple properties are separated by semicolons (;) Style classes declarations define styles that can be applied to any element 59

60 CSS Embedded Style Sheets 60

61 CSS Embedded Style Sheets 61

62 CSS External Style Sheets Style sheets are a convenient way to create a document with a uniform theme External style sheets are separate documents that contain only CSS rules (rather than embedding the style sheets in HTML documents) With external style sheets you can provide a uniform look and feel to an entire Website and you can reuse the same external style sheet across different Web pages (and also Websites) 62

63 CSS External Style Sheets When changes to the styles are required, you need to modify only a single CSS file to make style changes across all the pages that use those styles (rather than having to change each style in each HTML document!) Using external style sheets also adds the benefit that both the designer and the content author of a Web site can work in parallel 63

64 CSS External Style Sheets 64

65 CSS External Style Sheets The link element is used to reference an external style sheet and uses the rel attribute to specify the relationship between the current document and another document (in this case the relationship will be stylesheet) type attribute to specify the related document s MIME type as text/css href attribute provides the style sheet document s URL 65

Introduction to XHTML. 2010, Robert K. Moniot 1

Introduction to XHTML. 2010, Robert K. Moniot 1 Chapter 4 Introduction to XHTML 2010, Robert K. Moniot 1 OBJECTIVES In this chapter, you will learn: Characteristics of XHTML vs. older HTML. How to write XHTML to create web pages: Controlling document

More information

ECDL / ICDL Web Editing Syllabus Version 2.0

ECDL / ICDL Web Editing Syllabus Version 2.0 ECDL / ICDL Web Editing Syllabus Version 2.0 Purpose This document details the syllabus for ECDL / ICDL Web Editing. The syllabus describes, through learning outcomes, the knowledge and skills that a candidate

More information

Basics of Web Design: HTML5 & CSS Author: Terry Ann Felke-Morris, Ed.D.

Basics of Web Design: HTML5 & CSS Author: Terry Ann Felke-Morris, Ed.D. Chapter 1 Internet and Web Basics The Internet and the Web Web Standards and Accessibility Information on the Web Web Browsers and Web Servers Internet Protocols Uniform Resource Identifiers and Domain

More information

Garfield Public Schools Fine & Practical Arts Curriculum Web Design

Garfield Public Schools Fine & Practical Arts Curriculum Web Design Garfield Public Schools Fine & Practical Arts Curriculum Web Design (Half-Year) 2.5 Credits Course Description This course provides students with basic knowledge of HTML and CSS to create websites and

More information

Introduction to Web Design Curriculum Sample

Introduction to Web Design Curriculum Sample Introduction to Web Design Curriculum Sample Thank you for evaluating our curriculum pack for your school! We have assembled what we believe to be the finest collection of materials anywhere to teach basic

More information

HTML, XHTML and CSS for Web Designers & Developers

HTML, XHTML and CSS for Web Designers & Developers HTML, XHTML and CSS for Web Designers & Developers Course ISI-1254 - Five Days - Instructor-led - Hands on Introduction This course will give any web programmer an extra edge of effectiveness on the job.

More information

Short notes on webpage programming languages

Short notes on webpage programming languages Short notes on webpage programming languages What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is a markup language A markup language is a set of

More information

Lesson Review Answers

Lesson Review Answers Lesson Review Answers-1 Lesson Review Answers Lesson 1 Review 1. User-friendly Web page interfaces, such as a pleasing layout and easy navigation, are considered what type of issues? Front-end issues.

More information

Web Authoring. www.fetac.ie. Module Descriptor

Web Authoring. www.fetac.ie. Module Descriptor The Further Education and Training Awards Council (FETAC) was set up as a statutory body on 11 June 2001 by the Minister for Education and Science. Under the Qualifications (Education & Training) Act,

More information

Using Adobe Dreamweaver CS4 (10.0)

Using Adobe Dreamweaver CS4 (10.0) Getting Started Before you begin create a folder on your desktop called DreamweaverTraining This is where you will save your pages. Inside of the DreamweaverTraining folder, create another folder called

More information

Contents. Downloading the Data Files... 2. Centering Page Elements... 6

Contents. Downloading the Data Files... 2. Centering Page Elements... 6 Creating a Web Page Using HTML Part 1: Creating the Basic Structure of the Web Site INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 2.0 Winter 2010 Contents Introduction...

More information

EUROPEAN COMPUTER DRIVING LICENCE / INTERNATIONAL COMPUTER DRIVING LICENCE WEB EDITING

EUROPEAN COMPUTER DRIVING LICENCE / INTERNATIONAL COMPUTER DRIVING LICENCE WEB EDITING EUROPEAN COMPUTER DRIVING LICENCE / INTERNATIONAL COMPUTER DRIVING LICENCE WEB EDITING The European Computer Driving Licence Foundation Ltd. Portview House Thorncastle Street Dublin 4 Ireland Tel: + 353

More information

HTML Forms and CONTROLS

HTML Forms and CONTROLS HTML Forms and CONTROLS Web forms also called Fill-out Forms, let a user return information to a web server for some action. The processing of incoming data is handled by a script or program written in

More information

Website Planning Checklist

Website Planning Checklist Website Planning Checklist The following checklist will help clarify your needs and goals when creating a website you ll be surprised at how many decisions must be made before any production begins! Even

More information

Module 6 Web Page Concept and Design: Getting a Web Page Up and Running

Module 6 Web Page Concept and Design: Getting a Web Page Up and Running Module 6 Web Page Concept and Design: Getting a Web Page Up and Running Lesson 3 Creating Web Pages Using HTML UNESCO EIPICT M6. LESSON 3 1 Rationale Librarians need to learn how to plan, design and create

More information

Introduction to Web Development with Dreamweaver

Introduction to Web Development with Dreamweaver ITS Training Introduction to Web Development with Dreamweaver In this Workshop In this workshop you will be introduced to HTML basics and using Dreamweaver to create and edit web files. You will learn

More information

Web Editing Basics 2: Reference

Web Editing Basics 2: Reference Web Editing Basics 2: Reference We will be using the sample pages as a reference point for this training. They can be found on the Web Policy site: http://www.umkc.edu/web-policy/downloads.asp TOPICS 1.

More information

Course Information Course Number: IWT 1229 Course Name: Web Development and Design Foundation

Course Information Course Number: IWT 1229 Course Name: Web Development and Design Foundation Course Information Course Number: IWT 1229 Course Name: Web Development and Design Foundation Credit-By-Assessment (CBA) Competency List Written Assessment Competency List Introduction to the Internet

More information

Fast track to HTML & CSS 101 (Web Design)

Fast track to HTML & CSS 101 (Web Design) Fast track to HTML & CSS 101 (Web Design) Level: Introduction Duration: 5 Days Time: 9:30 AM - 4:30 PM Cost: 997.00 Overview Fast Track your HTML and CSS Skills HTML and CSS are the very fundamentals of

More information

Web Developer Jr - Newbie Course

Web Developer Jr - Newbie Course Web Developer Jr - Newbie Course Session Course Outline Remarks 1 Introduction to web concepts & view samples of good websites. Understand the characteristics of good website Understand the importance

More information

We automatically generate the HTML for this as seen below. Provide the above components for the teaser.txt file.

We automatically generate the HTML for this as seen below. Provide the above components for the teaser.txt file. Creative Specs Gmail Sponsored Promotions Overview The GSP creative asset will be a ZIP folder, containing four components: 1. Teaser text file 2. Teaser logo image 3. HTML file with the fully expanded

More information

HTML Forms. Pat Morin COMP 2405

HTML Forms. Pat Morin COMP 2405 HTML Forms Pat Morin COMP 2405 HTML Forms An HTML form is a section of a document containing normal content plus some controls Checkboxes, radio buttons, menus, text fields, etc Every form in a document

More information

HTML5 & CSS 8 th Edition. Chapter 3 Enhancing a Website with Links and Images

HTML5 & CSS 8 th Edition. Chapter 3 Enhancing a Website with Links and Images HTML5 & CSS 8 th Edition Chapter 3 Enhancing a Website with Links and Images Chapter Objectives 1. Describe types of hyperlinks 2. Create relative links, absolute links, email links, and telephone links

More information

Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence

Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence Web Development Owen Sacco ICS2205/ICS2230 Web Intelligence Brief Course Overview An introduction to Web development Server-side Scripting Web Servers PHP Client-side Scripting HTML & CSS JavaScript &

More information

Essential HTML & CSS for WordPress. Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com

Essential HTML & CSS for WordPress. Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com Essential HTML & CSS for WordPress Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com HTML: Hypertext Markup Language HTML is a specification that defines how pages are created

More information

Taking your HTML Emails to the Next Level. Presented by: Joey Trogdon, Asst. Director of Financial Aid & Veterans Affairs Randolph Community College

Taking your HTML Emails to the Next Level. Presented by: Joey Trogdon, Asst. Director of Financial Aid & Veterans Affairs Randolph Community College Taking your HTML Emails to the Next Level Presented by: Joey Trogdon, Asst. Director of Financial Aid & Veterans Affairs Randolph Community College Purpose This past spring, the NCCCS delivered a financial

More information

The Essential Guide to HTML Email Design

The Essential Guide to HTML Email Design The Essential Guide to HTML Email Design Index Introduction... 3 Layout... 4 Best Practice HTML Email Example... 5 Images... 6 CSS (Cascading Style Sheets)... 7 Animation and Scripting... 8 How Spam Filters

More information

Dreamweaver Cascading Style Sheets

Dreamweaver Cascading Style Sheets Dreamweaver Cascading Style Sheets Email: training@ ufl.edu Web Page: http://training.health.ufl.edu 2 This page intentionally left blank. Dreamweaver Cascading Style Sheets What are Cascading Style Sheets?...

More information

HTML, CSS, XML, and XSL

HTML, CSS, XML, and XSL APPENDIX C HTML, CSS, XML, and XSL T his appendix is a very brief introduction to two markup languages and their style counterparts. The appendix is intended to give a high-level introduction to these

More information

XHTML Forms. Form syntax. Selection widgets. Submission method. Submission action. Radio buttons

XHTML Forms. Form syntax. Selection widgets. Submission method. Submission action. Radio buttons XHTML Forms Web forms, much like the analogous paper forms, allow the user to provide input. This input is typically sent to a server for processing. Forms can be used to submit data (e.g., placing an

More information

HTML Kit: A User Manual. by Paul Strickberger

HTML Kit: A User Manual. by Paul Strickberger HTML Kit: A User Manual by Paul Strickberger HTML Kit User Manual Contents Introduction... 1 The Main Screen... 1 Displaying or Hiding Elements of the Screen...1 Getting Around the Main Screen... 3 The

More information

CREATING WEB PAGE WITH NOTEPAD USING HTML AND CSS

CREATING WEB PAGE WITH NOTEPAD USING HTML AND CSS CREATING WEB PAGE WITH NOTEPAD USING HTML AND CSS The following exercises illustrate the process of creating and publishing Web pages with Notepad, which is the plain text editor that ships as part of

More information

Appendix H: Cascading Style Sheets (CSS)

Appendix H: Cascading Style Sheets (CSS) Appendix H: Cascading Style Sheets (CSS) Cascading Style Sheets offer Web designers two key advantages in managing complex Web sites: Separation of content and design. CSS gives developers the best of

More information

What is HTML? a)hyper Text Marking Language b) Hyper Text Machine Language c)hyper Text Middle Language d)hyper Text Markup Language

What is HTML? a)hyper Text Marking Language b) Hyper Text Machine Language c)hyper Text Middle Language d)hyper Text Markup Language ONE MARKS QUESTIONS What is HTML? a)hyper Text Marking Language b) Hyper Text Machine Language c)hyper Text Middle Language d)hyper Text Markup Language 1. In email address character is essential a) _

More information

Advanced Web Development SCOPE OF WEB DEVELOPMENT INDUSTRY

Advanced Web Development SCOPE OF WEB DEVELOPMENT INDUSTRY Advanced Web Development Duration: 6 Months SCOPE OF WEB DEVELOPMENT INDUSTRY Web development jobs have taken thе hot seat when it comes to career opportunities and positions as a Web developer, as every

More information

Web Development I & II*

Web Development I & II* Web Development I & II* Career Cluster Information Technology Course Code 10161 Prerequisite(s) Computer Applications Introduction to Information Technology (recommended) Computer Information Technology

More information

Web Editing Basics 1 TOPICS

Web Editing Basics 1 TOPICS Web Editing Basics 1 TOPICS 1. Opening your site.1 2. What you see.1 3. Navigate to your Web page 2 4. Make text edits...2 5. Prepare documents and images for the Web 3 6. Move documents and images from

More information

WEB DEVELOPMENT IA & IB (893 & 894)

WEB DEVELOPMENT IA & IB (893 & 894) 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 development of today s websites.

More information

Getting Started with KompoZer

Getting Started with KompoZer Getting Started with KompoZer Contents Web Publishing with KompoZer... 1 Objectives... 1 UNIX computer account... 1 Resources for learning more about WWW and HTML... 1 Introduction... 2 Publishing files

More information

Further web design: HTML forms

Further web design: HTML forms Further web design: HTML forms Practical workbook Aims and Learning Objectives The aim of this document is to introduce HTML forms. By the end of this course you will be able to: use existing forms on

More information

Introduction to Drupal

Introduction to Drupal Introduction to Drupal Login 2 Create a Page 2 Title 2 Body 2 Editor 2 Menu Settings 5 Attached Images 5 Authoring Information 6 Revision Information 6 Publishing Options 6 File Attachments 6 URL Path

More information

Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates

Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates What is a DIV tag? First, let s recall that HTML is a markup language. Markup provides structure and order to a page. For example,

More information

Designing and Implementing Forms 34

Designing and Implementing Forms 34 C H A P T E R 34 Designing and Implementing Forms 34 You can add forms to your site to collect information from site visitors; for example, to survey potential customers, conduct credit-card transactions,

More information

WYSIWYG Toolbar. File Functions. Cut, Copy, Paste, Find Functions. Undo Redo Functions. Page 1 of 7

WYSIWYG Toolbar. File Functions. Cut, Copy, Paste, Find Functions. Undo Redo Functions. Page 1 of 7 File Functions Save Save As Revert to Last Save Click on the "Save" button to save the current file on the staging server and exit the WYSIWYG editor. Remember, it will not be live on the production server

More information

Web Authoring CSS. www.fetac.ie. Module Descriptor

Web Authoring CSS. www.fetac.ie. Module Descriptor The Further Education and Training Awards Council (FETAC) was set up as a statutory body on 11 June 2001 by the Minister for Education and Science. Under the Qualifications (Education & Training) Act,

More information

Enduring Understandings: Web Page Design is a skill that grows and develops throughout the careful planning and study of software and design.

Enduring Understandings: Web Page Design is a skill that grows and develops throughout the careful planning and study of software and design. Curriculum Map for Web Design SEPTEMBER Targeted NJ Core Curriculum Content Standards: Design develop, test, implement, update, and evaluate web solutions Technology Use, Media Literacy, Responsible Use

More information

HTML Fundamentals IN THIS APPENDIX

HTML Fundamentals IN THIS APPENDIX 13_0672328437_AppA.qxd 10/24/05 11:29 AM Page 223 A HTML Fundamentals IN THIS APPENDIX Plain Text Documents and HTML Tags Understanding the Overall HTML Document Structure HTML Structural Elements Within

More information

Course Duration: One hour Theory and 3 hours practical per week for 15weeks. As taught in 2010/2011 Session

Course Duration: One hour Theory and 3 hours practical per week for 15weeks. As taught in 2010/2011 Session ICS 202 Web Site Design 2 Credits The use of web design software in creating Web Pages. Available options for hosting Web pages. Design of web pages. Program interactive websites. Use of multimedia. Group

More information

07 Forms. 1 About Forms. 2 The FORM Tag. 1.1 Form Handlers

07 Forms. 1 About Forms. 2 The FORM Tag. 1.1 Form Handlers 1 About Forms For a website to be successful, it is important to be able to get feedback from visitors to your site. This could be a request for information, general comments on your site or even a product

More information

Umbraco v4 Editors Manual

Umbraco v4 Editors Manual Umbraco v4 Editors Manual Produced by the Umbraco Community Umbraco // The Friendly CMS Contents 1 Introduction... 3 2 Getting Started with Umbraco... 4 2.1 Logging On... 4 2.2 The Edit Mode Interface...

More information

SAULT COLLEGE OF APPLIED ARTS AND TECHNOLOGY SAULT STE. MARIE, ONTARIO COURSE OUTLINE

SAULT COLLEGE OF APPLIED ARTS AND TECHNOLOGY SAULT STE. MARIE, ONTARIO COURSE OUTLINE SAULT COLLEGE OF APPLIED ARTS AND TECHNOLOGY SAULT STE. MARIE, ONTARIO COURSE OUTLINE COURSE TITLE: Introduction to Web Development CODE NO. : SEMESTER: 1 PROGRAM: AUTHOR: IT Studies Dennis Ochoski DATE:

More information

Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University

Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University Web Design Basics Cindy Royal, Ph.D. Associate Professor Texas State University HTML and CSS HTML stands for Hypertext Markup Language. It is the main language of the Web. While there are other languages

More information

^/ CS> KRIS. JAMSA, PhD, MBA. y» A- JONES & BARTLETT LEARNING

^/ CS> KRIS. JAMSA, PhD, MBA. y» A- JONES & BARTLETT LEARNING %\ ^/ CS> v% Sr KRIS JAMSA, PhD, MBA y» A- JONES & BARTLETT LEARNING Brief Contents Acknowledgments Preface Getting Started with HTML Integrating Images Using Hyperlinks to Connect Content Presenting Lists

More information

HTML and CSS. Elliot Davies. April 10th, 2013. ed37@st-andrews.ac.uk

HTML and CSS. Elliot Davies. April 10th, 2013. ed37@st-andrews.ac.uk HTML and CSS Elliot Davies ed37@st-andrews.ac.uk April 10th, 2013 In this talk An introduction to HTML, the language of web development Using HTML to create simple web pages Styling web pages using CSS

More information

Web Portal User Guide. Version 6.0

Web Portal User Guide. Version 6.0 Web Portal User Guide Version 6.0 2013 Pitney Bowes Software Inc. All rights reserved. This document may contain confidential and proprietary information belonging to Pitney Bowes Inc. and/or its subsidiaries

More information

CREATING WEB PAGES USING HTML INTRODUCTION

CREATING WEB PAGES USING HTML INTRODUCTION CREATING WEB PAGES USING HTML INTRODUCTION Web Page Creation Using HTML: Introduction 1. Getting Ready What Software is Needed FourSteps to Follow 2. What Will Be On a Page Technical, Content, & Visual

More information

Quick Guide to the Cascade Server Content Management System (CMS)

Quick Guide to the Cascade Server Content Management System (CMS) Quick Guide to the Cascade Server Content Management System (CMS) Waubonsee Community College Cascade Server Content Administration January 2011 page 1 of 11 Table of Contents Requirements...3 Logging

More information

Web Development 1 A4 Project Description Web Architecture

Web Development 1 A4 Project Description Web Architecture Web Development 1 Introduction to A4, Architecture, Core Technologies A4 Project Description 2 Web Architecture 3 Web Service Web Service Web Service Browser Javascript Database Javascript Other Stuff:

More information

Web Development CSE2WD Final Examination June 2012. (a) Which organisation is primarily responsible for HTML, CSS and DOM standards?

Web Development CSE2WD Final Examination June 2012. (a) Which organisation is primarily responsible for HTML, CSS and DOM standards? Question 1. (a) Which organisation is primarily responsible for HTML, CSS and DOM standards? (b) Briefly identify the primary purpose of the flowing inside the body section of an HTML document: (i) HTML

More information

Voluntary Product Accessibility Template (VPAT) for Thomson Reuters Web of Science

Voluntary Product Accessibility Template (VPAT) for Thomson Reuters Web of Science (VPAT) for Thomson Reuters Web of Science The purpose of the, or VPAT, is to assist Federal contracting officials and other buyers in making preliminary assessments regarding the availability of commercial

More information

Ingeniux 8 CMS Web Management System ICIT Technology Training and Advancement (training@uww.edu)

Ingeniux 8 CMS Web Management System ICIT Technology Training and Advancement (training@uww.edu) Ingeniux 8 CMS Web Management System ICIT Technology Training and Advancement (training@uww.edu) Updated on 10/17/2014 Table of Contents About... 4 Who Can Use It... 4 Log into Ingeniux... 4 Using Ingeniux

More information

CIS 467/602-01: Data Visualization

CIS 467/602-01: Data Visualization CIS 467/602-01: Data Visualization HTML, CSS, SVG, (& JavaScript) Dr. David Koop Assignment 1 Posted on the course web site Due Friday, Feb. 13 Get started soon! Submission information will be posted Useful

More information

Mastering the JangoMail TinyMCE HTML Editor

Mastering the JangoMail TinyMCE HTML Editor JangoMail Tutorial Mastering the JangoMail TinyMCE HTML Editor With JangoMail, you have the option to use our built-in WYSIWYG HTML Editors to compose and send your message. Note: Please disable any pop

More information

BASICS OF WEB DESIGN CHAPTER 2 HTML BASICS KEY CONCEPTS COPYRIGHT 2013 TERRY ANN MORRIS, ED.D

BASICS OF WEB DESIGN CHAPTER 2 HTML BASICS KEY CONCEPTS COPYRIGHT 2013 TERRY ANN MORRIS, ED.D BASICS OF WEB DESIGN CHAPTER 2 HTML BASICS KEY CONCEPTS COPYRIGHT 2013 TERRY ANN MORRIS, ED.D 1 LEARNING OUTCOMES Describe the anatomy of a web page Format the body of a web page with block-level elements

More information

WYSIWYG Manual Ironcities Stadt Kolbermoor 2012

WYSIWYG Manual Ironcities Stadt Kolbermoor 2012 WYSIWYG Manual Ironcities Stadt Kolbermoor 2012 WYSIWYG Editor Manual TinyMCE used on http://www.ironcities.net is a WYSIWYG (what you see is what you get) editor that allows users a familiar word-processing

More information

CST 150 Web Design and Development I Midterm Exam Study Questions Chapters 1-3

CST 150 Web Design and Development I Midterm Exam Study Questions Chapters 1-3 CST 150 Web Design and Development I Midterm Exam Study Questions Chapters 1-3 Multiple Choice Identify the choice that best completes the statement or answers the question. 1. A host that provides storage

More information

The Web Web page Links 16-3

The Web Web page Links 16-3 Chapter Goals Compare and contrast the Internet and the World Wide Web Describe general Web processing Write basic HTML documents Describe several specific HTML tags and their purposes 16-1 Chapter Goals

More information

Guide to B2B email marketing. Part Three: Building great emails

Guide to B2B email marketing. Part Three: Building great emails Guide to B2B email marketing Part Three: Building great emails Executive Summary of Recommendations Take a look at our guidelines for building great emails in this quick, at-a-glance format Technical Email

More information

IAS Web Development using Dreamweaver CS4

IAS Web Development using Dreamweaver CS4 IAS Web Development using Dreamweaver CS4 Information Technology Group Institute for Advanced Study Einstein Drive Princeton, NJ 08540 609 734 8044 * helpdesk@ias.edu Information Technology Group [2] Institute

More information

An overview of designing HTML emails for Hotmail, Yahoo, Outlook, Lotus Notes and AOL

An overview of designing HTML emails for Hotmail, Yahoo, Outlook, Lotus Notes and AOL An Emailcenter briefing: Can your customers read your email newsletters? An overview of designing HTML emails for Hotmail, Yahoo, Outlook, Lotus Notes and AOL November, 2004 Emailcenter research has shown

More information

4 Understanding. Web Applications IN THIS CHAPTER. 4.1 Understand Web page development. 4.2 Understand Microsoft ASP.NET Web application development

4 Understanding. Web Applications IN THIS CHAPTER. 4.1 Understand Web page development. 4.2 Understand Microsoft ASP.NET Web application development 4 Understanding Web Applications IN THIS CHAPTER 4.1 Understand Web page development 4.2 Understand Microsoft ASP.NET Web application development 4.3 Understand Web hosting 4.4 Understand Web services

More information

JISIS and Web Technologies

JISIS and Web Technologies 27 November 2012 Status: Draft Author: Jean-Claude Dauphin JISIS and Web Technologies I. Introduction This document does aspire to explain how J-ISIS is related to Web technologies and how to use J-ISIS

More information

Creating Web Pages with HTML Simplified. 3rd Edition

Creating Web Pages with HTML Simplified. 3rd Edition Brochure More information from http://www.researchandmarkets.com/reports/2248215/ Creating Web Pages with HTML Simplified. 3rd Edition Description: Are you new to computers? Does new technology make you

More information

How to Edit Your Website

How to Edit Your Website How to Edit Your Website A guide to using your Content Management System Overview 2 Accessing the CMS 2 Choosing Your Language 2 Resetting Your Password 3 Sites 4 Favorites 4 Pages 5 Creating Pages 5 Managing

More information

Using the Content Management System 05-02-12

Using the Content Management System 05-02-12 Using the Content Management System 05-02-12 Using the Content Management System Introduction 2 Logging In 3 Using the Editor 4 Basic Text Editing 5 Pasting Text 7 Adding Hyperlinks 8 Adding Images 9 Style

More information

KOMPOZER Web Design Software

KOMPOZER Web Design Software KOMPOZER Web Design Software An IGCSE Student Handbook written by Phil Watkins www.kompozer.net CONTENTS This student guide is designed to allow for you to become a competent user* of the Kompozer web

More information

IE Class Web Design Curriculum

IE Class Web Design Curriculum Course Outline Web Technologies 130.279 IE Class Web Design Curriculum Unit 1: Foundations s The Foundation lessons will provide students with a general understanding of computers, how the internet works,

More information

HTML Tables. IT 3203 Introduction to Web Development

HTML Tables. IT 3203 Introduction to Web Development IT 3203 Introduction to Web Development Tables and Forms September 3 HTML Tables Tables are your friend: Data in rows and columns Positioning of information (But you should use style sheets for this) Slicing

More information

BLACKBOARD 9.1: Text Editor

BLACKBOARD 9.1: Text Editor BLACKBOARD 9.1: Text Editor The text editor in Blackboard is a feature that appears in many different areas, but generally has the same look and feel no matter where it appears. The text editor has changed

More information

Learning Web Design. Third Edition. A Beginner's Guide to (X)HTML, Style Sheets, and Web Graphics. Jennifer Niederst Robbins

Learning Web Design. Third Edition. A Beginner's Guide to (X)HTML, Style Sheets, and Web Graphics. Jennifer Niederst Robbins Learning Web Design Third Edition A Beginner's Guide to (X)HTML, Style Sheets, and Web Graphics Jennifer Niederst Robbins O'REILLY Beijing- Cambridge Farnham Koln Paris Sebastopol -Taipei -Tokyo CONTENTS

More information

By Glenn Fleishman. WebSpy. Form and function

By Glenn Fleishman. WebSpy. Form and function Form and function The simplest and really the only method to get information from a visitor to a Web site is via an HTML form. Form tags appeared early in the HTML spec, and closely mirror or exactly duplicate

More information

SOCS Javascript Editor

SOCS Javascript Editor Javascript Editor Tool Bar and Buttons Insert Article Redirect Use the Article Redirect icon when you want a Section to redirect to another website, to a webpage or file within your site. The article containing

More information

Introduction to Ingeniux Forms Builder. 90 minute Course CMSFB-V6 P.0-20080901

Introduction to Ingeniux Forms Builder. 90 minute Course CMSFB-V6 P.0-20080901 Introduction to Ingeniux Forms Builder 90 minute Course CMSFB-V6 P.0-20080901 Table of Contents COURSE OBJECTIVES... 1 Introducing Ingeniux Forms Builder... 3 Acquiring Ingeniux Forms Builder... 3 Installing

More information

Inspiring Creative Fun Ysbrydoledig Creadigol Hwyl. Web Design in Nvu Workbook 1

Inspiring Creative Fun Ysbrydoledig Creadigol Hwyl. Web Design in Nvu Workbook 1 Inspiring Creative Fun Ysbrydoledig Creadigol Hwyl Web Design in Nvu Workbook 1 The demand for Web Development skills is at an all time high due to the growing demand for businesses and individuals to

More information

HTML5 and CSS3 Part 1: Using HTML and CSS to Create a Website Layout

HTML5 and CSS3 Part 1: Using HTML and CSS to Create a Website Layout CALIFORNIA STATE UNIVERSITY, LOS ANGELES INFORMATION TECHNOLOGY SERVICES HTML5 and CSS3 Part 1: Using HTML and CSS to Create a Website Layout Fall 2011, Version 1.0 Table of Contents Introduction...3 Downloading

More information

Web Design and Development ACS-1809. Chapter 13. Using Forms 11/30/2015 1

Web Design and Development ACS-1809. Chapter 13. Using Forms 11/30/2015 1 Web Design and Development ACS-1809 Chapter 13 Using Forms 11/30/2015 1 Chapter 13: Employing Forms Understand the concept and uses of forms in web pages Create a basic form Validate the form content 11/30/2015

More information

CS412 Interactive Lab Creating a Simple Web Form

CS412 Interactive Lab Creating a Simple Web Form CS412 Interactive Lab Creating a Simple Web Form Introduction In this laboratory, we will create a simple web form using HTML. You have seen several examples of HTML pages and forms as you have worked

More information

This document will describe how you can create your own, fully responsive. drag and drop email template to use in the email creator.

This document will describe how you can create your own, fully responsive. drag and drop email template to use in the email creator. 1 Introduction This document will describe how you can create your own, fully responsive drag and drop email template to use in the email creator. It includes ready-made HTML code that will allow you to

More information

Umbraco v6 Editors Manual

Umbraco v6 Editors Manual Umbraco v6 Editors Manual Produced by the Umbraco Community Umbraco // The Friendly CMS Contents 1 Introduction... 3 2 Getting Started with Umbraco... 4 2.1 Logging On... 4 2.2 The Edit Mode Interface...

More information

ICT 6012: Web Programming

ICT 6012: Web Programming ICT 6012: Web Programming Covers HTML, PHP Programming and JavaScript Covers in 13 lectures a lecture plan is supplied. Please note that there are some extra classes and some cancelled classes Mid-Term

More information

State of Nevada. Ektron Content Management System (CMS) Basic Training Guide

State of Nevada. Ektron Content Management System (CMS) Basic Training Guide State of Nevada Ektron Content Management System (CMS) Basic Training Guide December 8, 2015 Table of Contents Logging In and Navigating to Your Website Folders... 1 Metadata What it is, How it Works...

More information

Resolving Accessibility Issues in Word 2010/2011

Resolving Accessibility Issues in Word 2010/2011 Resolving Accessibility Issues in Word 2010/2011 Use the Accessibility Checker 1. Click File > Info > Check for Issues 2. If the Accessibility Checker sees any potential issues, you will see a message

More information

Mobile Web Design with HTML5, CSS3, JavaScript and JQuery Mobile Training BSP-2256 Length: 5 days Price: $ 2,895.00

Mobile Web Design with HTML5, CSS3, JavaScript and JQuery Mobile Training BSP-2256 Length: 5 days Price: $ 2,895.00 Course Page - Page 1 of 12 Mobile Web Design with HTML5, CSS3, JavaScript and JQuery Mobile Training BSP-2256 Length: 5 days Price: $ 2,895.00 Course Description Responsive Mobile Web Development is more

More information

Introduction to Web Development

Introduction to Web Development Introduction to Web Development Week 2 - HTML, CSS and PHP Dr. Paul Talaga 487 Rhodes paul.talaga@uc.edu ACM Lecture Series University of Cincinnati, OH October 16, 2012 1 / 1 HTML Syntax For Example:

More information

Adobe Dreamweaver CS4: Learning the Tools

Adobe Dreamweaver CS4: Learning the Tools Adobe Dreamweaver CS4: Learning the Tools Dreamweaver is an HTML (Hypertext Markup Language) editor, authoring tool, and Web site management tool. Dreamweaver is a WYSIWYG (what you see is what you get)

More information

Introduction... 3. Designing your Common Template... 4. Designing your Shop Top Page... 6. Product Page Design... 8. Featured Products...

Introduction... 3. Designing your Common Template... 4. Designing your Shop Top Page... 6. Product Page Design... 8. Featured Products... Introduction... 3 Designing your Common Template... 4 Common Template Dimensions... 5 Designing your Shop Top Page... 6 Shop Top Page Dimensions... 7 Product Page Design... 8 Editing the Product Page layout...

More information

Getting Started with Google Sites

Getting Started with Google Sites Getting Started with Google Sites Getting Started with Google Sites 1 Background Information Google Sites is an online application that makes creating a team web site as easy as editing a document. With

More information

Cascade Server. End User Training Guide. OIT Training and Documentation Services OIT TRAINING AND DOCUMENTATION. oittraining@uta.

Cascade Server. End User Training Guide. OIT Training and Documentation Services OIT TRAINING AND DOCUMENTATION. oittraining@uta. OIT Training and Documentation Services Cascade Server End User Training Guide OIT TRAINING AND DOCUMENTATION oittraining@uta.edu http://www.uta.edu/oit/cs/training/index.php 2013 CONTENTS 1. Introduction

More information

Content Management System

Content Management System OIT Training and Documentation Services Content Management System End User Training Guide OIT TRAINING AND DOCUMENTATION oittraining@uta.edu http://www.uta.edu/oit/cs/training/index.php 2009 CONTENTS 1.

More information

USER GUIDE. Unit 4: Schoolwires Editor. Chapter 1: Editor

USER GUIDE. Unit 4: Schoolwires Editor. Chapter 1: Editor USER GUIDE Unit 4: Schoolwires Chapter 1: Schoolwires Centricity Version 4.2 TABLE OF CONTENTS Introduction... 1 Audience and Objectives... 1 Getting Started... 1 How the Works... 2 Technical Requirements...

More information