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

Save this PDF as:
 WORD  PNG  TXT  JPG

Size: px
Start display at page:

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

Transcription

1 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

2 Rationale Librarians need to learn how to plan, design and create their library s web pages The only way to learn is to create one UNESCO EIPICT M6. LESSON 3 2

3 Scope What is HTML? What are the tools for creating web pages using HTML? How to use HTML editors to create web pages and build a web site? How to add content and other elements on your web page? UNESCO EIPICT M6. LESSON 3 3

4 Learning Outcomes Define what is HTML Identify tools for creating web pages using HTML Use HTML editors to create web pages and build web sites Add content and other elements to your web page UNESCO EIPICT M6. LESSON 3 4

5 What is HTML? HyperText Markup Language As stated in the first lesson, HTML is the lingua franca for publishing hypertext on the World Wide Web. It is the language that defines the structure of information. It uses a variety of tags and attributes, which is designed to display text and other information and provide hyperlinks to other web documents UNESCO EIPICT M6. LESSON 3 5

6 Activity Read these introductions to HTML: What is HTML? InterNIC 15 Minutes Series ml/html/sld01.html HyperText Markup Language Home Page Dave Raggett. Getting Started with HTML UNESCO EIPICT M6. LESSON 3 6

7 Web Standards(1) The W3C (World Wide Web Consortium) develops specifications, (called Recommendations") as well as software and tools that enhance interoperability between web browsers, servers, and other web-enabling technologies. UNESCO EIPICT M6. LESSON 3 7

8 Web Standards(2) Web technologies and protocols like HTML, CSS, XHTML, XML, and HTTP are the web standards The HTML 4.01 specification is the latest HTML standard recommended by W3C UNESCO EIPICT M6. LESSON 3 8

9 What is HTML 4.01? HTML 4.01 specification defines the HyperText Markup Language (HTML) In addition to the text, multimedia, and hyperlink features of the previous versions of HTML (HTML 3.2 [HTML32] and HTML 2.0 [RFC1866]), HTML 4 supports more multimedia options, scripting languages, style sheets, better printing facilities, and documents that are more accessible to users with disabilities. (W3C) UNESCO EIPICT M6. LESSON 3 9

10 Activity To know more about how to use HTML to create web pages browse the following sites HTML Primer - HTML Basics - cs.html Introduction to HTMLhttp:// UNESCO EIPICT M6. LESSON 3 10

11 What are the Basic HTML Tags(1)? <html> <head> <title></title> </head> <body> <p> </p> </body> </html> Opening tag - identifies the document as HTML] Opens this area Contains information about the HTML document Closing tag for this area Opening tag for the body of the text Tags for the opening and closing of a paragraph Closing tag to indicate the end of the web page UNESCO EIPICT M6. LESSON 3 11

12 What are the basic HTML tags(2)? The basic HTML tags (written using Notepad and saved with a file extension.htm) create a simple web page shown beside it. This can be seen in the example below. UNESCO EIPICT M6. LESSON 3 12

13 What are the Basic HTML Rules (1)? HTML tags are enclosed by brackets < > for example <html> Most tags require a closing tag <html> </html> Tags must be nested correctly <head><title>my Library Web Site</title> </head> first tag on, last tag off HTML treats all white space as a single blank space UNESCO EIPICT M6. LESSON 3 13

14 What are the Basic HTML Rules (2)? Tags are not case sensitive but by convention are written in small letters like other programming languages Most tags have optional attributes with several possible values that modify the tags behavior Look inside the HTML element (Tag) TAG attribute value Closing Tag <body bgcolor="#ffffff" text="#000066"> </body> UNESCO EIPICT M6. LESSON 3 14

15 What are the Tools for Creating Web Pages Using HTML? HTML editor e.g. NotePad, NVu to write HTML documents Web browser to test and view the created web page (IE, Firefox etc.) HTML reference book to serve as guide for HTML tags Other utilities, tools and online resources Information and other materials about the library in electronic files UNESCO EIPICT M6. LESSON 3 15

16 How to Use Notepad to Create a Web Page Create a new folder Open Notepad Use the basic HTML tags discussed in slides 9-11 Save the file (basic.htm) in the new folder Use your browser to view the created page Use Notepad to add or edit content Save the file for every change made Refresh/reload your browser to see the changes UNESCO EIPICT M6. LESSON 3 16

17 Exercise 1 1. Follow the steps in the previous slide (slide 14) 2. The web page source (the file created using Notepad) should be the same as the illustration on the left side of slide If everything works, the finished web page should be the same as the one on the right side of slide If your work is not the same as illustrated read the step-by-step guide on how to use Notepad again. UNESCO EIPICT M6. LESSON 3 17

18 How to Add Content(1) To add headings use Header tags Header tags range from <h1> to <h6>, <h1> the largest and <h6> is the smallest. The headings size shows the hierarchy of importance on the page s layout. <h1> My Library </h1> (page title) <h2> Mission, Vision and Goals </h2> (main heading) <h3> Objectives </h3> (subheading) UNESCO EIPICT M6. LESSON 3 18

19 Exercise 2 1. Add headings to your web page (basic.htm) 2. Use the outline of information you gathered about your library / institution in lesson 2 as the basis for your headings 3. Save your file, then test/view using your browser 4. If you use the same tags and heading as in previous slides (basic.htm) your web page should be like the image in the next slide UNESCO EIPICT M6. LESSON 3 19

20 Result for Exercise 2 UNESCO EIPICT M6. LESSON 3 20

21 How to Add Content(2) To add more text use the <p> tag The <p> tag breaks the textual information on a page and inserts a single line space, which is useful for defining and separating paragraphs. <h2> Mission, Vision and Goals </h2> <p> MyLibrary aims to be the country's public virtual library with state-of-the art resources and associated services, accessible to anyone, anytime, anywhere. </p> UNESCO EIPICT M6. LESSON 3 21

22 Exercise 3 1. Open basic.htm using Notepad 2. Insert this text with the paragraph tag after <h2> Mission, Vision and Goals </h2> <p> MyLibrary aims to be the country's public virtual library with state-of-the art resources and associated services, available to anyone, anytime, anywhere. </p> 3. Save then View the result; it should be similar to next slide UNESCO EIPICT M6. LESSON 3 22

23 Exercise 3 (Continued) 4. Add more paragraphs using <p> tag 5. Encode or copy and paste the information you have gathered in lesson 2 about your library / institution for additional content UNESCO EIPICT M6. LESSON 3 23

24 Other HTML Tags(1) HTML also supports lists; unordered lists, ordered lists and, which is sometimes the best way to present information Unordered list is a bulleted list that uses <UL> and <LI> tags <h3> Objectives </h3> <ul><li> Acquire a comprehensive collection of multimedia materials</li> <li> Develop appropriate user education and training packages</li> </ul> UNESCO EIPICT M6. LESSON 3 24

25 Other HTML Tags(2) <h3> Objectives </h3> <ul><li> Acquire a comprehensive collection of multimedia materials</li> <li> Develop appropriate user education and training packages</li> </ul> UNESCO EIPICT M6. LESSON 3 25

26 Other HTML Tags(3) Ordered list is a numbered list that uses <ol> and <li> tags. Example: <h3> Library Resources </h3> <ol> <li> Library Collections </li> <li> Library Catalog </li> <li> Electronic Resources </li> </ol> UNESCO EIPICT M6. LESSON 3 26

27 Other HTML Tags(4) Lists can be nested, one within another <ol> <li> Library Collections </li> <ul> <li> Books </li> <li> Journals </li> </ul> <li> Library Catalog </li> <li> Electronic Resources </li> <ul> <li> CD-ROMs </li> <li> Abstracts & Indexes</li> </ul> </ol> UNESCO EIPICT M6. LESSON 3 27

28 Other HTML Tags(6) The list item type attribute can be used to change the bullets in <UL> disc, square or circle, and in <OL> from number 1 to lowercase (a) or uppercase (A) letters, or lowercase (i) or uppercase (I) roman numerals UNESCO EIPICT M6. LESSON 3 28

29 Other HTML Tags(7) <ol type= I > <li> Library Collections </li> <ul type= square > <li> Books </li> <li> Journals </li> </ul> <li> Library Catalog </li> <li> Electronic Resources </li> <ul type= disc > <li> CD-ROMs </li> <li>abstracts & Indexes</li> </ul> </ol> UNESCO EIPICT M6. LESSON 3 29

30 Exercise 4 1. Add more information to your basic web page about your library: mission, vision and goals, history, library hours, contact information, etc. 2. Create two more web pages - about your library collections, and about library services (one web page for each) 3. Save and name them accordingly, collection.htm and services.htm UNESCO EIPICT M6. LESSON 3 30

31 How to Add Images(1) Image and other graphical elements can be added on the web page through the <img> tag using the src (source) attribute that points to the image / graphics If the file (i.e. mylogo.gif) is in the same directory where the HTML files are saved use relative URL <img src = mylogo.gif > If not, the correct directory should be reflected in the src attribute <img src = /images/mylogo.gif > UNESCO EIPICT M6. LESSON 3 31

32 How to Add Images(2) Example: Insert the <img> tag where you want to place the image There are other attributes that can be used to organize how images are displayed on a web page <img src = mylogo.gif width= 100 height= 100 align= left alt= logo > UNESCO EIPICT M6. LESSON 3 32

33 Where to Get Images Graphic editors tools for creating and editing images are available for those who would like to make graphics on their own Learning how to use these tools requires time, dedication and creativity For those creatively and/or technologically challenged, there are online resources that provide free images, clip-arts, buttons etc. Also there are sites that provide tools for creating customized logos, headers or buttons on the fly UNESCO EIPICT M6. LESSON 3 33

34 Exercise 5 To make graphics or edit images Use any search engine to look for graphic editors with these keywords - Graphic editors freeware Search also for tutorials for the graphic editor of your choice Try these online graphics generator sites o Xara 3D Heading Maker o Button maker o o Cool Text: Logo and Graphics Generator o Proceed with placing images on web pages UNESCO EIPICT M6. LESSON 3 34

35 How to Create Hyperlinks(1) Hypertext links are created on web pages using the <a> anchor tag with the href (Hypertext Reference) attribute Hyperlinks connect your web pages together and point to other web documents (build your web site) <a href = collection.htm >Library Collection</a> <a href = > UNESCO Libraries Portal </a> UNESCO EIPICT M6. LESSON 3 35

36 How to Create Hyperlinks(2) <a href = collection.htm > Library Collection</a> <a href = d/portal_bib/ > UNESCO Libraries Portal </a> UNESCO EIPICT M6. LESSON 3 36

37 How to Create Hyperlinks(3) Hyperlinks are also used to connect to graphic and other media Icons and other graphic elements can be used as the the trigger (object) users click on to jump to the referred document <a href = mylibrary.jpg > MyLibrary </a> <a href = mylibrary.jpg > <img src mylibrary_sm.jpg > </a> <a href mylibrary.jpg border = 0 > <img src mylibrary_sm.jpg > </a> UNESCO EIPICT M6. LESSON 3 37

38 How to Create Hyperlinks(4) Examples <a href = mylibrary.jpg > MyLibrary </a> <a href = mylibrary.jpg > <img src = mylibrary_sm.jpg > </a> <a href = mylibrary.jpg > <img src = mylibrary_sm.jpg border = 0 > </a> UNESCO EIPICT M6. LESSON 3 38

39 How to Create Hyperlinks(5) Link to address can be created to automatically open the program on the system supplying the address Contact <a href = > </a> UNESCO EIPICT M6. LESSON 3 39

40 Exercise 6 1. Make basic.htm the library s home page 2. Link the other web pages collection.htm and services.htm to basic.htm 3. Create a link back to basic.htm on the other web pages 4. Place contact information at the bottom of each page ( , tel no#, etc) 5. View / Test the links / Edit and save UNESCO EIPICT M6. LESSON 3 40

41 What is WYSIWYG HTML Editor(1)? WYSIWYG editor provides an editing interface which resembles how the page will be displayed in a web browser and does not require prior knowledge of HTML It offer convenience and added functionality Can work not only with HTML, but also with related technologies such as CSS, XML and JavaScript or ECMAScript UNESCO EIPICT M6. LESSON 3 41

42 What is WYSIWYG HTML Editor(2)? May be able to manage the site and communicate with remote web servers via FTP However, it usually creates bloated HTML code and what you see while working on the page may not turn out the same way when you use a browser to view the same page You would need HTML knowledge to fix the page if it is not turning out the way you want it to while using WYSIWYG editor UNESCO EIPICT M6. LESSON 3 42

43 NVU a WYSIWYG HTML Editor NVU is an open source WYSIWYG HTML editor comparable to commercial software It has added functionalities that will ease up the process of creating and editing web pages in building a web site You can use NVU to create a web page without typing any HTML code NVU has a mode to edit HTML directly like a text HTML editor to fix errors on the rendered page that cannot be fixed using WYSIWYG interface It can manage the web site and communicate to a web server through FTP UNESCO EIPICT M6. LESSON 3 43

44 Exercise 7 1. Download and install NVU available for Windows or Linux 2. Open the web pages created on previous exercises basic.htm, collection.htm etc. 3. View the page in the different modes 4. Modify the page properties title, background color etc. 5. Use the color palette or consult with an HTML reference book or the Internet for the hexadecimal color codes you can use 6. Save the file for every changes made UNESCO EIPICT M6. LESSON 3 44

45 Exercise 7 (Continued) 7. Insert images and other elements 8. Create hyperlinks to and from the three web pages and to other documents on the Web 9. View the web pages using the preview mode 10. Use your browser to view the page to see if there is a difference 11. Read the provided NVU quick start guide. UNESCO EIPICT M6. LESSON 3 45

Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence

Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence Web Development Owen Sacco ICS2205/ICS2230 Web Intelligence Introduction Client-Side scripting involves using programming technologies to build web pages and applications that are run on the client (i.e.

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

Dreamweaver. Introduction to Editing Web Pages

Dreamweaver. Introduction to Editing Web Pages Dreamweaver Introduction to Editing Web Pages WORKSHOP DESCRIPTION... 1 Overview 1 Prerequisites 1 Objectives 1 INTRODUCTION TO DREAMWEAVER... 1 Document Window 3 Toolbar 3 Insert Panel 4 Properties Panel

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

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

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

Lesson Overview. Getting Started. The Internet WWW

Lesson Overview. Getting Started. The Internet WWW Lesson Overview Getting Started Learning Web Design: Chapter 1 and Chapter 2 What is the Internet? History of the Internet Anatomy of a Web Page What is the Web Made Of? Careers in Web Development Web-Related

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

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

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

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

Creating a Web Site with Adobe Dreamweaver

Creating a Web Site with Adobe Dreamweaver Creating a Web Site with Adobe Dreamweaver This tutorial will teach you how to: 1. Create a new web site using Adobe Dreamweaver 2. Create a new webpage using the Dreamweaver editor 3. Create numbered

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

Dreamweaver Tutorial #1

Dreamweaver Tutorial #1 Dreamweaver Tutorial #1 My first web page In this tutorial you will learn: how to create a simple web page in Dreamweaver how to store your web page on a server to view your page online what the Internet

More information

Contents. Introduction... 2. Downloading the Data Files... 2

Contents. Introduction... 2. Downloading the Data Files... 2 Creating a Web Page Using HTML Part 3: Multi-page Management and Uploading INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 1.1 Summer 2009 Contents Introduction... 2 Downloading

More information

Quick Guide for Dreamweaver CC Basics April 2016 Training:

Quick Guide for Dreamweaver CC Basics April 2016 Training: Dreamweaver CC Basics When you look at a web page, you might wonder how it is made. To display a web page, your internet browser reads and interprets a special set of instructions. These instructions are

More information

Microsoft Expression Web

Microsoft Expression Web Microsoft Expression Web Microsoft Expression Web is the new program from Microsoft to replace Frontpage as a website editing program. While the layout has changed, it still functions much the same as

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

Creating Web Pages with Netscape/Mozilla Composer and Uploading Files with CuteFTP

Creating Web Pages with Netscape/Mozilla Composer and Uploading Files with CuteFTP Creating Web Pages with Netscape/Mozilla Composer and Uploading Files with CuteFTP Introduction This document describes how to create a basic web page with Netscape/Mozilla Composer and how to publish

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

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

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

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

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

Internet Technologies_1. Doc. Ing. František Huňka, CSc.

Internet Technologies_1. Doc. Ing. František Huňka, CSc. 1 Internet Technologies_1 Doc. Ing. František Huňka, CSc. Outline of the Course 2 Internet and www history. Markup languages. Software tools. HTTP protocol. Basic architecture of the web systems. XHTML

More information

Virtual Exhibit 5.0 requires that you have PastPerfect version 5.0 or higher with the MultiMedia and Virtual Exhibit Upgrades.

Virtual Exhibit 5.0 requires that you have PastPerfect version 5.0 or higher with the MultiMedia and Virtual Exhibit Upgrades. 28 VIRTUAL EXHIBIT Virtual Exhibit (VE) is the instant Web exhibit creation tool for PastPerfect Museum Software. Virtual Exhibit converts selected collection records and images from PastPerfect to HTML

More information

Microsoft Expression Web Quickstart Guide

Microsoft Expression Web Quickstart Guide Microsoft Expression Web Quickstart Guide Expression Web Quickstart Guide (20-Minute Training) Welcome to Expression Web. When you first launch the program, you ll find a number of task panes, toolbars,

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

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

Dreamweaver CS5. Module 2: Website Modification

Dreamweaver CS5. Module 2: Website Modification Dreamweaver CS5 Module 2: Website Modification Dreamweaver CS5 Module 2: Website Modification Last revised: October 31, 2010 Copyrights and Trademarks 2010 Nishikai Consulting, Helen Nishikai Oakland,

More information

Adobe CQ5 Authoring Basics Print Manual

Adobe CQ5 Authoring Basics Print Manual Adobe CQ5 Authoring Basics Print Manual SFU s Content Management System SFU IT Services CMS Team ABSTRACT A summary of CQ5 Authoring Basics including: Setup and Login, CQ Interface Tour, Versioning, Uploading

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

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

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

Content Management System User Guide

Content Management System User Guide CWD Clark Web Development Ltd Content Management System User Guide Version 1.0 1 Introduction... 3 What is a content management system?... 3 Browser requirements... 3 Logging in... 3 Page module... 6 List

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

UH CMS Basics. Cascade CMS Basics Class. UH CMS Basics Updated: June,2011! Page 1

UH CMS Basics. Cascade CMS Basics Class. UH CMS Basics Updated: June,2011! Page 1 UH CMS Basics Cascade CMS Basics Class UH CMS Basics Updated: June,2011! Page 1 Introduction I. What is a CMS?! A CMS or Content Management System is a web based piece of software used to create web content,

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

Creating Web Pages With Dreamweaver MX 2004

Creating Web Pages With Dreamweaver MX 2004 Creating Web Pages With Dreamweaver MX 2004 1 Introduction Learning Goal: By the end of the session, participants will have an understanding of: What Dreamweaver is, and How it can be used to create basic

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

ITP 101 Project 3 - Dreamweaver

ITP 101 Project 3 - Dreamweaver ITP 101 Project 3 - Dreamweaver Project Objectives You will also learn how to make a website outlining your company s products, location, and contact info. Project Details USC provides its students with

More information

Creating a Web Presentation

Creating a Web Presentation 9.1 LESSON 9 Creating a Web Presentation After completing this lesson, you will be able to: Create an agenda slide or home page. Create a hyperlink to a slide. Create a Web presentation with the AutoContent

More information

Inspiring Creative Fun Ysbrydoledig Creadigol Hwyl. Web Design in Nvu Workshop Session Plan

Inspiring Creative Fun Ysbrydoledig Creadigol Hwyl. Web Design in Nvu Workshop Session Plan Inspiring Creative Fun Ysbrydoledig Creadigol Hwyl Web Design in Nvu Workshop Session Plan Workshop Schedule By failing to prepare, you are preparing to fail. Event Set Up 30 minutes Introduction Welcome/Pre-day

More information

Adobe Dreamweaver - Basic Web Page Tutorial

Adobe Dreamweaver - Basic Web Page Tutorial Adobe Dreamweaver - Basic Web Page Tutorial Window Elements While Dreamweaver can look very intimidating when it is first launched it is an easy program. Dreamweaver knows that your files must be organized

More information

Dreamweaver CS5. Module 1: Website Development

Dreamweaver CS5. Module 1: Website Development Dreamweaver CS5 Module 1: Website Development Dreamweaver CS5 Module 1: Website Development Last revised: October 29, 2010 Copyrights and Trademarks 2010 Nishikai Consulting, Helen Nishikai Oakland, CA

More information

Web Design Specialist

Web Design Specialist UKWDA Training: CIW Web Design Series Web Design Specialist Course Description CIW Web Design Specialist is for those who want to develop the skills to specialise in website design and builds upon existing

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

Building a Personal Website (Adapted from the Building a Town Website Student Guide 2003 Macromedia, Inc.)

Building a Personal Website (Adapted from the Building a Town Website Student Guide 2003 Macromedia, Inc.) Building a Personal Website (Adapted from the Building a Town Website Student Guide 2003 Macromedia, Inc.) In this project, you will learn the web publishing skills you need to: Plan a website Define a

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

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

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

Basic tutorial for Dreamweaver CS5

Basic tutorial for Dreamweaver CS5 Basic tutorial for Dreamweaver CS5 Creating a New Website: When you first open up Dreamweaver, a welcome screen introduces the user to some basic options to start creating websites. If you re going to

More information

CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions)

CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions) CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions) Step 1 - DEFINE A NEW WEB SITE - 5 POINTS 1. From the welcome window that opens select the Dreamweaver Site... or from the main

More information

Joomla! 2.5.x Training Manual

Joomla! 2.5.x Training Manual Joomla! 2.5.x Training Manual Joomla is an online content management system that keeps track of all content on your website including text, images, links, and documents. This manual includes several tutorials

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

ADOBE Dreamweaver CS3 Basics

ADOBE Dreamweaver CS3 Basics ADOBE Dreamweaver CS3 Basics IT Center Training Email: training@health.ufl.edu Web Page: http://training.health.ufl.edu This page intentionally left blank 2 8/27/2008 Contents Before you start with Dreamweaver....

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

04 Links & Images. 1 The Anchor Tag. 1.1 Hyperlinks

04 Links & Images. 1 The Anchor Tag. 1.1 Hyperlinks One of the greatest strengths of Hypertext Markup Language is hypertext the ability to link documents together. The World Wide Web itself consists of millions of html documents all linked together via

More information

HOW TO CREATE AND SEND AN EXACTTARGET TEMPLATE-BASED EMAIL

HOW TO CREATE AND SEND AN EXACTTARGET TEMPLATE-BASED EMAIL HOW TO CREATE AND SEND AN EXACTTARGET TEMPLATE-BASED EMAIL *For questions or requests for a custom template build, please contact the D2C Marketing Services Team at D2CMarketingServices@wmg.com Contents

More information

To change title of module, click on settings

To change title of module, click on settings HTML Module: The most widely used module on the websites. This module is very flexible and is used for inserting text, images, tables, hyperlinks, document downloads, and HTML code. Hover the cursor over

More information

Dreamweaver CS3 THE MISSING MANUAL. David Sawyer McFarland. POGUE PRESS" O'REILLY 8 Beijing Cambridge Farnham Koln Paris Sebastopol Taipei Tokyo

Dreamweaver CS3 THE MISSING MANUAL. David Sawyer McFarland. POGUE PRESS O'REILLY 8 Beijing Cambridge Farnham Koln Paris Sebastopol Taipei Tokyo Dreamweaver CS3 THE MISSING MANUAL David Sawyer McFarland POGUE PRESS" O'REILLY 8 Beijing Cambridge Farnham Koln Paris Sebastopol Taipei Tokyo Table of Contents The Missing Credits Introduction 1 Part

More information

Web Publishing Basics 2

Web Publishing Basics 2 Web Publishing Basics 2 HTML and CSS Coding Jeff Pankin pankin@mit.edu Information Services and Technology Contents Course Objectives... 2 Creating a Web Page with HTML... 3 What is Dreamweaver?... 3 What

More information

Dreamweaver CS6 Basics

Dreamweaver CS6 Basics Dreamweaver CS6 Basics Learn the basics of building an HTML document using Adobe Dreamweaver by creating a new page and inserting common HTML elements using the WYSIWYG interface. EdShare EdShare is a

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

Outline. CIW Web Design Specialist. Course Content

Outline. CIW Web Design Specialist. Course Content CIW Web Design Specialist Description The Web Design Specialist course (formerly titled Design Methodology and Technology) teaches you how to design and publish Web sites. General topics include Web Site

More information

WEBSITE CONTENT MANAGEMENT SYSTEM USER MANUAL CMS Version 2.0 CMS Manual Version 1.0 2-25-13

WEBSITE CONTENT MANAGEMENT SYSTEM USER MANUAL CMS Version 2.0 CMS Manual Version 1.0 2-25-13 WEBSITE CONTENT MANAGEMENT SYSTEM USER MANUAL CMS Version 2.0 CMS Manual Version 1.0 2-25-13 CONTENTS Things to Remember... 2 Browser Requirements... 2 Why Some Areas of Your Website May Not Be CMS Enabled...

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

IT3504: Web Development Techniques (Optional)

IT3504: Web Development Techniques (Optional) INTRODUCTION : Web Development Techniques (Optional) This is one of the three optional courses designed for Semester 3 of the Bachelor of Information Technology Degree program. This course on web development

More information

Adobe Dreamweaver CC 14 Tutorial

Adobe Dreamweaver CC 14 Tutorial Adobe Dreamweaver CC 14 Tutorial GETTING STARTED This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site

More information

If your site has already been set up and the theme added on the Drupal server, you are able to add content to the site.

If your site has already been set up and the theme added on the Drupal server, you are able to add content to the site. Updating a Site in Drupal If your site has already been set up and the theme added on the Drupal server, you are able to add content to the site. You should be able to find your site at a URL similar to

More information

PASTPERFECT-ONLINE DESIGN GUIDE

PASTPERFECT-ONLINE DESIGN GUIDE PASTPERFECT-ONLINE DESIGN GUIDE INTRODUCTION Making your collections available and searchable online to Internet visitors is an exciting venture, now made easier with PastPerfect-Online. Once you have

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

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

Adobe Dreamweaver Student Organizations Publishing Details Getting Started Basic Web Page Tutorial For Student Organizations at Dickinson College *

Adobe Dreamweaver Student Organizations Publishing Details Getting Started Basic Web Page Tutorial For Student Organizations at Dickinson College * Adobe Dreamweaver Student Organizations Publishing Details Getting Started Basic Web Page Tutorial For Student Organizations at Dickinson College * Some Student Organizations are on our web server called

More information

NJCU WEBSITE TRAINING MANUAL

NJCU WEBSITE TRAINING MANUAL NJCU WEBSITE TRAINING MANUAL Submit Support Requests to: http://web.njcu.edu/its/websupport/ (Login with your GothicNet Username and Password.) Table of Contents NJCU WEBSITE TRAINING: Content Contributors...

More information

Key Word Vocabulary. Web Site. Line Break. Web Page WWW HTML. Heading. Tags. Italic. Notepad. Bold. Underline Hyperlinks URL EOS

Key Word Vocabulary. Web Site. Line Break. Web Page WWW HTML. Heading. Tags. Italic. Notepad. Bold. Underline Hyperlinks URL EOS Unit 8.1 Web Design Key Word Vocabulary During this lesson you will hear the following key words. Make sure you listen carefully to the lesson as you may be asked questions at the end. WWW Tags Line Break

More information

II. Creating Your Website

II. Creating Your Website II. Creating Your Website In this part of Dazzle the Web with Dynamic Dreamweaver, we will learn the following skills: 1. Define a website 2. Create our home page 3. Add content to the home page 4. Format

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

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

How-to Guide: MIT DLC Drupal Cloud Theme

How-to Guide: MIT DLC Drupal Cloud Theme How-to Guide: MIT DLC Drupal Cloud Theme This guide will show you how to take your initial Drupal Cloud site... and turn it into something more like this, using the MIT DLC Drupal Cloud theme. See this

More information

WEB 140 WEB DEVELOPMENT TOOLS

WEB 140 WEB DEVELOPMENT TOOLS WEEK 2 Objectives: Website basics Planning a Website Setting up a site in KompoZer Resources: WEBSITE BASICS Websites and pages can have many forms but there are some basics that are generally on all sites

More information

Creating Personal Web Sites Using SharePoint Designer 2007

Creating Personal Web Sites Using SharePoint Designer 2007 Creating Personal Web Sites Using SharePoint Designer 2007 Faculty Workshop May 12 th & 13 th, 2009 Overview Create Pictures Home Page: INDEX.htm Other Pages Links from Home Page to Other Pages Prepare

More information

4.2 Understand Microsoft ASP.NET Web Application Development

4.2 Understand Microsoft ASP.NET Web Application Development L E S S O N 4 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 MTA Software Fundamentals 4 Test L

More information

Fireworks 3 Animation and Rollovers

Fireworks 3 Animation and Rollovers Fireworks 3 Animation and Rollovers What is Fireworks Fireworks is Web graphics program designed by Macromedia. It enables users to create any sort of graphics as well as to import GIF, JPEG, PNG photos

More information

Using econtentmanager s ewebeditpro Editor

Using econtentmanager s ewebeditpro Editor Using econtentmanager s ewebeditpro Editor econtentmanager comes with its own content editor, called ewebeditpro. With ewebeditpro, you can add and modify your page content with WYSIWYG ease-of-use. The

More information

Requirements for Developing WebWorks Help

Requirements for Developing WebWorks Help WebWorks Help 5.0 Originally introduced in 1998, WebWorks Help is an output format that allows online Help to be delivered on multiple platforms and browsers, which makes it easy to publish information

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

ITNP43 HTML Practical 1 Write Your Own Web Page

ITNP43 HTML Practical 1 Write Your Own Web Page ITNP43 HTML Practical 1 Write Your Own Web Page LEARNING OUTCOMES By the end of this practical you should be able to create a simple web page by writing HTML using a simple text editor, TextPad. You will

More information

Website Builder Documentation

Website Builder Documentation Website Builder Documentation Main Dashboard page In the main dashboard page you can see and manager all of your projects. Filter Bar In the filter bar at the top you can filter and search your projects

More information

Dreamweaver and Fireworks MX Integration Brian Hogan

Dreamweaver and Fireworks MX Integration Brian Hogan Dreamweaver and Fireworks MX Integration Brian Hogan This tutorial will take you through the necessary steps to create a template-based web site using Macromedia Dreamweaver and Macromedia Fireworks. The

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

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

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 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

Content Management System Help. basic tutorial on Evergreen s CMS

Content Management System Help. basic tutorial on Evergreen s CMS Content Management System Help cms.evergreen.edu Tips, tricks and basic tutorial on Evergreen s CMS Contents Vocabulary Login Opening a page Editing a page Creating a new page Inserting internal and external

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

CiviCRM for The Giving Circle. Bulk Mailing Tips & Tricks

CiviCRM for The Giving Circle. Bulk Mailing Tips & Tricks CiviCRM for The Giving Circle Bulk Mailing Tips & Tricks By Leo D. Geoffrion & Ken Hapeman Technology for the Public Good Saratoga Springs, NY Version 1.1 5/26/2013 Table of Contents 1. Introduction...

More information

Using your content management system EXPRESSIONENGINE CMS DOCUMENTATION UKONS

Using your content management system EXPRESSIONENGINE CMS DOCUMENTATION UKONS Using your content management system EXPRESSIONENGINE CMS DOCUMENTATION UKONS JOHN MOYLAN UKONS EXPRESSIONENGINE DOCUMENTATION 2 What is ExpressionEngine? ExpressionEngine is a flexible, feature-rich content

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

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