Using HTML to create a web page

Save this PDF as:
 WORD  PNG  TXT  JPG

Size: px
Start display at page:

Download "Using HTML to create a web page"

Transcription

1 S.3 Computer Literacy Using HTML to create a web page To create web pages it is best to know HyperText Markup Language (HTML). Markup tags tell the browser how to display text and images on web pages. For example, to make the text bold or italic, to change the text into title format, or to create a hyperlink to another file, When we browse the web page, the raw data obtained from the server is a HTML document. The browser has the ability to interpret HTML commands and display the data, or to obtain further information from hyperlinks according to these HTML codes. Using HTML to create a web page HTML documents are pure text files and thus general text editing tools (like Notepad) can be used to create web pages. When you complete the web page design, save the file as an *.htm or *.html file. <html> <head> <title>this is the title of the web page. </title> </head> <body> This is a simple web page. <!---This is a reference annotation and will not be shown in the browser.---!> </body> </html> Markup Tags <html> and </html> <head> and </head> Define a document as a HTML document. Describe the title area of a HTML document. Functions <title> and </title> Display a document title in the window title bar. <body> and </body> <!---and ---> Define HTML text including the web content to be displayed. Record the reference annotation in the HTML document or temporarily hide some parts for future use. The various markups in the HTML document use <markup tag> and </markup tag> format to define the function areas. If you need to set attributes for a specific text in the web page, you may use <font attribute>concerned text</font> to handle. Here is an example: 1

2 Web Page Design <html> <body> <font face = Arial >This is Arial font text.</font> <font size = 4 >This is 4 points size text.</font> <font color = #0000FF >This is blue colour text.</font> <font face = Arial size = 4 color = #0000FF >This three attributes can be completed within 1 markup.</font> </body> </html> Attributes Attribute Commands Examples Result Font Face = Font name <font face = Arial >Arial font text</font> Arial font text Size Size = value <font size = 4 >4 points size 4 points size text text</font> Color Color = color <font color = #0000FF >Blue Blue colour text [blue] colour text</font> We can use some simple markup codes to set the font style. Markup Tags Styles Examples Results <b> and </b> Bold <b>bold</b> Bold <i> and </i> Italic <i>italic</i> Italic <u> and </u> Underline <u>undeline</u> Underline <sub> and </sub> Subscript <sub>subscript</sub> Subscript <sup> and </sup> Superscript <sup>superscript</sup> Superscript Note that in the above activity, no line break is found in the HTML document of the web page. Use the following simple markup tags to add line breaks to the web page. <br> Break a line <p> Start a new paragraph Insert a blank new row for each <br> inserted. A blank new row will be inserted to separate the next paragraph with the previous one. However a series of <p> will only generate one blank new row. 2

3 S.3 Computer Literacy Knowing JavaScript Try this example of JavaScript: <html><body> Below is a simple <i>javascript</i> demonstration.<p> <script language= JavaScript > document.write( This sentence is suing <i>javascript</i> language to present. ) </script> </body></html> JavaScript can create an interactive effect in web pages. For example, we may add buttons to the web page, so that when a user clicks the button, a reaction created by JavaScript will be initiated. <html> <head> <script> function AlertMessage() { alert( This alert message method is initiated by using Javascript ) } </script> </head> <body> Click this <b>button.</b><p> <form> <input type = button name = button1 value = Alert message onclick = AlertMessage() > </form> </body> </html> Note the first 3 attribute commands <input type = button name = button1 value = Alert message onclick = AlertMessage() >, in the sentence <input type = button name = button1 value = Alert message onclick = AlertMessage() >, will give a button and onclick = AlertMessage() means that by clicking this button the AlertMessage() function written with JavaScript will run. AlertMessage() is defined by starting with { and ending with } and alert is an alert message initiation method using JavaScript. 3

4 Web Page Design Workflow of Web Page Production (Textbook 3A p.95) Before we start really working on any web page building application softwares (e.g. Microsoft Frontpage, Macromedia Dreamweaver), we should have an overall plan so that we can set up a consistent style, collect information, and decide on ways of presentation before bringing them into truth. All you need is pencil and paper and make up a plan like this: FIRST PAGE ABOUT MYSELF ABOUT MY FRIENDS ABOUT MY INTEREST ABOUT MY PET SCHOOL DIARY PHOTO ALBUM ACTORS / ACTRESSES MUSIC Defining the site (Textbook 3A p.97-98) Remember saving all the working files for the proposed web pages in the same folder on your computer. After completing the web page, all the content in the folder can be uploaded to the proposed web server. Working out the web page (Textbook 3A p ) You can create your own web pages with texts and images with the help of the Insert Bar, and the Properties Inspector. 4

5 S.3 Computer Literacy Typical working environments in Dreamweaver MX 2004 Insert Bar Document Toolbar Standard Toolbar Properties Inspector: Handling images Web page browsers basically support images in *.jpg (Joint Photographic Experts Group) and *.gif (Graphic Interchange Format). Browsers of latest version, e.g. Internet Explorer 6.0 or above, will support the third type of image: *.png (Portable Network Graphics) You can insert picture by clicking this button and Dreamweaver will ask for the location of the image file you prepare to insert. If you have not saved the web page before, a dialogue box will pop up and remind you that the image file is temporarily saved as absolute path until you save the web page. Then Dreamweaver will correct the path of the image file to the relevant folders holding the web page. Hyperlinks It is useful to have a brief idea of URL protocol before going to the discussion of hyperlinks. URL is uniform resource locator, which is an address of the objects in the Internet. For example: 5

6 Web Page Design protocol host resource path Protocol may vary on different services, we may find protocols as: file, ftp, gopher, http, mailto, news, telnet. There are four types of hyperlinks: Absolute path brings you to another web site in the Internet, e.g. Relative path brings you to another page within a web site, e.g. /images/page_1.htm; link evokes the programme in the local computer (e.g. Outlook or Outlook Express) and send to the address quoted, e.g. insert an link by typing the address to the link box or click ; Anchors help user to navigate in a lengthy web page swiftly, by adding anchors to help better navigation on the web. You can add anchor to the planned position by clicking in the Insert Toolbar and give a proper name to each of them. Then you can call the anchors by their name in the link box using #name_of_anchor. Using table Table is not only useful in presenting tabular data, it is frequently used in web page design as a tool for layout. Try to make the good use of the cell functions like: merge/delete cells, column width, cell pad, cell space, background colours of cells, and other function involving the table to create a clean and tidy web page. Table can be inserted by clicking this button: Building frames Frames divide a single browser into several areas, allowing different web contents to be displayed on different areas in the browser. All the frames are kept and managed in a frameset. You can create a frameset by File > New > Frameset, a list of different combinations of frames is available. Special attention should be given when you want to display some web page content on certain frame, you have to define the target frame clearly in the Frame properties panel, e.g. displaying the web page on the _mainframe,_parent, _blank, _self,_top of the frame. [example: Using Behaviours in Dynamic/Interactive web page Dreamweaver helps creating behaviours by using embedded javascripts, making the web page becoming more 6

7 S.3 Computer Literacy interesting. Behaviours involve events and action. The tags for behaviour are usually embedded in the <body> tags or any objects in HTML. Creating a pop-up message box At the Window Menu, please call out the Behaviour panel. At a selected text or image, then click the + in Behaviour and choose Pop-up message. Enter Hello! How are you? and choose the event as onclick. Test the effect by previewing the page (F12). If you read the code window, you will see the embedded codes as followed: <a href="#" onclick="mm_popupmsg('hello! How are you?')">pop-up</a>. For a pop-up message box displayed on leaving, the event onunload should be chosen. Creating a browser without any toolbar This interesting effect is very useful when the monitors of users are of different resolution. In the design process of web page, the size of the browser is fixed. To create this, selected a text or image to be linked to the planned web page to be placed in the browser without toolbar. Add a pound sign # at the link box in the properties panel. Then click + in Behaviour panel and select Open Browser Window, a dialogue box appears showing the attributes of the browser. Fix the value of width and height of the browser and click F12 to preview the web page. Using Timeline Dreamweaver creates a animation/moving object on the web page by using timeline. Browser will carry out different instructions along the flow of the timeline. Ways of making an animation is as followed: 1. Animation element should be placed in Layer in Dreamweaver. Handle of the layer 2. Right-click the handle of the layer on the top-left hand corner, and select Add to Timeline on the quick menu. Click OK to the pop-up box and a Timeline properties panel appears. 3. As setting a simple animation with Flash, select the layer and extent the length of the animation to desired length. At the end frame, move the Layer with Animation element to a new position. Add keyframes if necessary to change the path from straight line to curve by dragging the Layer to other position. 7

8 Web Page Design Timeline Panel 4. To start the movement of the Layer manually by the user, unselect the Autoplay and Loop boxes in the Timeline properties panel. Go the Behaviour and select Timeline > Play Timeline. Choose the timeline on the pop-up box and confirm. At the <img> action, select onclick. 5. To end the movement at the last frame, select the last frame, and go to Behaviour panel > Timeline > Stop Timeline. Choose the timeline to be stopped and confirm. Set the <Timeline> action with the number of the last frame, e.g. onframe45, manually. Embedded background music Putting the following codes between the section <head> and </head> ['Perfidia _ Xavier Cugat.mp3' is the name of the music file] and the music will be looped. Make sure the music file is in the same level with the *.htm. Try altering the parameter to observe the effect. <embed src = 'Perfidia _ Xavier Cugat.mp3' loop=true autostart = start mastersound hidden = true hidden = true width = 0 height = 0> </embed> Remark: besides adding music or background sound as embedded objects, you can add plug-in on the web to evoke corresponding external application to run the files for you. Conclusion Web pages can be anything, anything can make web pages, all you have to use is the orchestration of HTML with the help of different softwares and proper structure. 8

Microsoft FrontPage. 1. Introduction

Microsoft FrontPage. 1. Introduction 1. Introduction Microsoft FrontPage is a full featured HTML editor. A Web site is a group of HTML pages and graphics that are interconnected with hyperlinks. A FrontPage Web site is a site created in FrontPage.

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

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

HTML CREATOR. HTML Creator

HTML CREATOR. HTML Creator HTML CREATOR The HTML Creator is an HTML editing tool that allows you to create content in HTML without having to enter HTML tags. Similar to a word processor, you can easily create and maintain content

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

A Microsoft Expression Tutorial

A Microsoft Expression Tutorial A Microsoft Expression Tutorial Contents Page (click page numbers to move to the page) Page 1-2..Things to do and know before we start Page 3 How to save your web pages Page 4 Opening an existing web page

More information

Web Design. Links and Navigation

Web Design. Links and Navigation Web Design Links and Navigation Web Design Link Terms HTTP, FTP, Hyperlink, Email Links, Anchor HTTP (HyperText Transfer Protocol) - The most common link type and allows the user to connect to any page

More information

TUTORIAL 4 Building a Navigation Bar with Fireworks

TUTORIAL 4 Building a Navigation Bar with Fireworks TUTORIAL 4 Building a Navigation Bar with Fireworks This tutorial shows you how to build a Macromedia Fireworks MX 2004 navigation bar that you can use on multiple pages of your website. A navigation bar

More information

Contents. Launching FrontPage... 3. Working with the FrontPage Interface... 3 View Options... 4 The Folders List... 5 The Page View Frame...

Contents. Launching FrontPage... 3. Working with the FrontPage Interface... 3 View Options... 4 The Folders List... 5 The Page View Frame... Using Microsoft Office 2003 Introduction to FrontPage Handout INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 1.0 Fall 2005 Contents Launching FrontPage... 3 Working with

More information

Dreamweaver Introduction -- Creating Web Pages with Dreamweaver

Dreamweaver Introduction -- Creating Web Pages with Dreamweaver Dreamweaver Introduction -- Creating Web Pages with Dreamweaver This workshop covers the basics of web authoring with Dreamweaver. Learn how to create and format a webpage including creating tables, inserting

More information

Creating Web Pages with Microsoft FrontPage

Creating Web Pages with Microsoft FrontPage Creating Web Pages with Microsoft FrontPage 1. Page Properties 1.1 Basic page information Choose File Properties. Type the name of the Title of the page, for example Template. And then click OK. Short

More information

Steps in Creating Web Pages

Steps in Creating Web Pages 5 M i n u t e W e b P a g e s - M o z i l l a 1 of 6 A basic web page is a plain text file that has been marked up with tags around a word or phrase to describe how it should be displayed by the web browser.

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

Below is the toolbar for the Rich Text Editor on the SharePoint Portal.

Below is the toolbar for the Rich Text Editor on the SharePoint Portal. Rich Text Editor Below is the toolbar for the Rich Text Editor on the SharePoint Portal. You will find instructions for using each of these functions on the following pages. 1. Cut 2. Copy 3. Paste 4.

More information

Your Personal Homepage

Your Personal Homepage Your Personal Homepage You can use your Personal Homepage to share information about yourself, something that interests you, or a course topic. Your classmates can view your home page from the Classlist

More information

DREAMWEAVER BASICS. A guide to updating Faculty websites Created by the Advancement & Marketing Unit

DREAMWEAVER BASICS. A guide to updating Faculty websites Created by the Advancement & Marketing Unit DREAMWEAVER BASICS A guide to updating Faculty websites Created by the Advancement & Marketing Unit Table of content Tip: Click on the links below to go straight to the desired section The W (Web Services)

More information

Dreamweaver Chapter 1 Review Questions

Dreamweaver Chapter 1 Review Questions Dreamweaver Chapter 1 Review Questions Multiple Choice Identify the choice that best completes the statement or answers the question. 1. is the current standard language used to create Web pages. a. HTML

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

Lab6: Creating a Web page with Macromedia Dreamweaver

Lab6: Creating a Web page with Macromedia Dreamweaver Lab6: Creating a Web page with Macromedia Dreamweaver I. Introduction When you need to find a specific recipe or when you want to visit somewhere you ve never been to before, what do you do? Most of you

More information

What is WWW? WWW and HTML. How to make a web page. Two Basic Steps. HTML Tags. .html. Review what is WWW Description of HTML

What is WWW? WWW and HTML. How to make a web page. Two Basic Steps. HTML Tags. .html. Review what is WWW Description of HTML WWW and HTML Review what is WWW Description of HTML HyperText Markup Language What is WWW? Via Internet, computers can contact each other Public files on computers can be read by remote user usually HyperText

More information

Flash MX Image Animation

Flash MX Image Animation Flash MX Image Animation Introduction (Preparing the Stage) Movie Property Definitions: Go to the Properties panel at the bottom of the window to choose the frame rate, width, height, and background color

More information

CREATING WEB PAGES WITH MACROMEDIA DREAMWEAVER 8. University Computing and Information Services. Training Guide

CREATING WEB PAGES WITH MACROMEDIA DREAMWEAVER 8. University Computing and Information Services. Training Guide CREATING WEB PAGES WITH MACROMEDIA DREAMWEAVER 8 University Computing and Information Services Training Guide For additional help, contact the UCIS Help Desk at (910) 5216260 or helpdesk@uncp.edu, or visit

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

Saving work in the CMS... 2. Edit an existing page... 2. Create a new page... 4. Create a side bar section... 4

Saving work in the CMS... 2. Edit an existing page... 2. Create a new page... 4. Create a side bar section... 4 CMS Editor How-To Saving work in the CMS... 2 Edit an existing page... 2 Create a new page... 4 Create a side bar section... 4 Upload an image and add to your page... 5 Add an existing image to a Page...

More information

Item Editor Reference Guide

Item Editor Reference Guide Item Editor Reference Guide This reference guide is intended for all iwebfolio users. The item editor is the editing tool that appears when a user is editing an item within a portfolio or template. This

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

Computers Tools for an Information Age

Computers Tools for an Information Age Before You Start Writing Your Own Web Page Chapter 9 Using HTML or FrontPage This chapter offers beginning instruction in HyperText Markup Language (HTML) Microsoft FrontPage 2000. 1 2 Requirements Where

More information

Chapter 14: Links. Types of Links. 1 Chapter 14: Links

Chapter 14: Links. Types of Links. 1 Chapter 14: Links 1 Unlike a word processor, the pages that you create for a website do not really have any order. You can create as many pages as you like, in any order that you like. The way your website is arranged and

More information

CONTENTM WEBSITE MANAGEMENT SYSTEM. Getting Started Guide

CONTENTM WEBSITE MANAGEMENT SYSTEM. Getting Started Guide CONTENTM WEBSITE MANAGEMENT SYSTEM Getting Started Guide Table of Contents CONTENTM WEBSITE MANAGEMENT SYSTEM... 1 GETTING TO KNOW YOUR SITE...5 PAGE STRUCTURE...5 Templates...5 Menus...5 Content Areas...5

More information

Creating Webpages in Dreamweaver MX for PC

Creating Webpages in Dreamweaver MX for PC Creating Webpages in Dreamweaver MX for PC Getting Started Before you can create a webpage you need to think about where the page will be stored both locally (i.e., hard drive, CD, disk) and remotely (i.e.,

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

HTML Editor Contents. User Guide Updated August 22, 2008

HTML Editor Contents. User Guide Updated August 22, 2008 HTML Editor 8.3.0 User Guide Updated August 22, 2008 Contents About this guide Audience Related guides HTML Editor Overview Accessing the HTML Editor HTML Editor tabs HTML Editor Views HTML Editor Icons

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

Even More Dreamweaver Nadalia Yuehong Liu IT Lab School of Information University of Texas at Austin Spring 2003

Even More Dreamweaver Nadalia Yuehong Liu IT Lab School of Information University of Texas at Austin Spring 2003 Even More Dreamweaver Nadalia Yuehong Liu IT Lab School of Information University of Texas at Austin Spring 2003 Objectives Create your Web page in layout view Insert Flash Text and Flash Button objects

More information

UNPAN Portal Content Management System (CMS) User Guide

UNPAN Portal Content Management System (CMS) User Guide UNPAN Portal Content Management System (CMS) User Guide www.unpan.org User Manual Version 1.0 260309 Page 1 of 36 Table of Contents A. UNPAN Sitemap... 3 B. DPADM Sitemap... 4 C. Introduction to UNPAN

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

Simple Edit Masterclass

Simple Edit Masterclass Squiz Australia Pty. Ltd. A 92 Jarrett Street, Leichhardt NSW 2040 P +61 2 8507 9900 F +61 2 8507 9988 W www.squiz.net Simple Edit Masterclass University of Western Sydney 20 July, 2010 AUSTRALIA UNITED

More information

ADOBE DREAMWEAVER CS3 TUTORIAL

ADOBE DREAMWEAVER CS3 TUTORIAL ADOBE DREAMWEAVER CS3 TUTORIAL 1 TABLE OF CONTENTS I. GETTING S TARTED... 2 II. CREATING A WEBPAGE... 2 III. DESIGN AND LAYOUT... 3 IV. INSERTING AND USING TABLES... 4 A. WHY USE TABLES... 4 B. HOW TO

More information

How to add rich media to a web page

How to add rich media to a web page Adobe Dreamweaver CS6 Project 3 guide How to add rich media to a web page To add interest and interactivity, you can easily add rich media to web pages. Rich media includes most kinds of video, Flash videos,

More information

Understanding the Advanced Template Editor

Understanding the Advanced Template Editor Understanding the Advanced Template Editor The Sage E-marketing for Sage CRM Advanced Template Editor is a tool for customers with a working knowledge of HTML design. It is a WYSISYG editor that can modify

More information

Client Admin Site Adding/Editing Content Under Site Builder/Site Navigation Tutorial by Commerce Promote

Client Admin Site Adding/Editing Content Under Site Builder/Site Navigation Tutorial by Commerce Promote SiteBuilder (Adding/Editing Content) Enable web pages on your website Add and format text and images Upload images Create Image Links Create Sub Levels Create Hyperlinks Upload Data files (ppt,xls,word

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

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

Understanding the Advanced Template Editor

Understanding the Advanced Template Editor Quick Start Guide to: Understanding the Advanced Template Editor The basic template editor in Swiftpage is used to create templates that began as imported templates or global advanced templates. (One function

More information

Dreamweaver: Getting Started Website Structure Why is this relevant?

Dreamweaver: Getting Started Website Structure Why is this relevant? Dreamweaver: Getting Started Dreamweaver is a Graphic Designer s tool to create websites as he or she designs. As part of the Adobe Creative Suite, Dreamweaver is able to work in conjunction with Photoshop,

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

In Depth Introduction to HTML and CSS (5 days)

In Depth Introduction to HTML and CSS (5 days) In Depth Introduction to HTML and CSS (5 days) Course Description This course helps beginners and experienced students establish working knowledge of best practices in creating functional web pages using

More information

Microsoft FrontPage Step by Step Training

Microsoft FrontPage Step by Step Training Toolbars Menu Standard Formatting Quick Tag Selector Views Toolbar Type a Question for Help Box Task Pane Microsoft FrontPage Step by Step Training Views Design allows you to design and edit web pages

More information

ITD 210 EXAM 1 STUDY GUIDE

ITD 210 EXAM 1 STUDY GUIDE ITD 210 EXAM 1 STUDY GUIDE FINAL EXAM: ADOBE WEB COMMUNICATION USING DREAMWEAVER CS3 OBJECTIVES Domain 1.0 Setting Project Requirements 1.1 Identify the purpose, audience, and audience needs for a website.

More information

Table of contents. Universal Data Exporter PHP DMXzone.com

Table of contents. Universal Data Exporter PHP DMXzone.com Table of contents About Universal Data Exporter PHP... 2 Features in Detail... 3 Before you begin... 9 Installing the extension... 9 The Basics: Exporting an HTML table... 10 Introduction... 10 How to

More information

Microsoft FrontPage 2003

Microsoft FrontPage 2003 Information Technology Services Kennesaw State University Microsoft FrontPage 2003 Information Technology Services Microsoft FrontPage Table of Contents Information Technology Services...1 Kennesaw State

More information

Communicate: In Print

Communicate: In Print Communicate: In Print Getting Started 1. Launch Communicate in Print 2 Double-click on the desktop icon, or go to Start, All Programs, Widgit, Communicate: in Print 2. A work area like the one below should

More information

B.V. Patel Institute of Business Management, Computer & Information Technology, Uka Tarsadia University : Web Technology-HTML

B.V. Patel Institute of Business Management, Computer & Information Technology, Uka Tarsadia University : Web Technology-HTML Unit-1 Introduction to Internet Fill in the blanks. (1 mark) 1. In 1969, the Department of Defense (DOD) of the United States (US) started a network called the ARPAnet. 2. In 1970, networks like BITNET

More information

User Guide. Appendix A. RADEditor

User Guide. Appendix A. RADEditor User Guide Appendix A RADEditor Table of Contents About this Chapter... 4 What is RadEditor?... 4 Section 1: RadEditor at a Glance... 5 Publishing Options... 9 Keyboard Shortcuts Quick Reference... 9 Section

More information

Creating Your Personal Website

Creating Your Personal Website Creating Your Personal Website These instructions will show you how to create a personal webpage for CSULB students using Dreamweaver MX 2004. The page will consist of a title, background image, text,

More information

MS Word 2007 practical notes

MS Word 2007 practical notes MS Word 2007 practical notes Contents Opening Microsoft Word 2007 in the practical room... 4 Screen Layout... 4 The Microsoft Office Button... 4 The Ribbon... 5 Quick Access Toolbar... 5 Moving in the

More information

JustEdit WYSIWYG Toolbar

JustEdit WYSIWYG Toolbar JustEdit WYSIWYG Toolbar Overview When entering JustEdit, users will encounter the JustEdit toolbar, which has a variety of functions available in order to make editing the page easier. The icons present

More information

Web Candy Design Inc. 1 JCE Editor Manual

Web Candy Design Inc. 1 JCE Editor Manual Web Candy Design Inc. 1 JCE Editor Manual Table of Contents What is JCE? 3 What is an Article? 3 Sections & Categories Explained 3 Why use Sections & Categories 3 Sections and Categories vs. Menu Organization

More information

Caldes CM12: Content Management Software Introduction v1.9

Caldes CM12: Content Management Software Introduction v1.9 Caldes CM12: Content Management Software Introduction v1.9 Enterprise Version: If you are using Express, please contact us. Background Information This manual assumes that you have some basic knowledge

More information

How to Build a More Effective XSite

How to Build a More Effective XSite How to Build a More Effective XSite presented by a la mode Course Highlights Take advantage of advanced design and content features Enable XSite access and features for your employees and colleagues Introduction

More information

Dreamweaver 8 Basics

Dreamweaver 8 Basics Dreamweaver 8 Basics Software: Dreamweaver 8 Platform: Mac/PC Overview Dreamweaver is a great tool for producing Web sites. It provides an array of options and functions that speed up the development process

More information

HTML Notes. How HTML is structured. Sections of an HTML Document. Paired tags. Tag attributes. Page attributes

HTML Notes. How HTML is structured. Sections of an HTML Document. Paired tags. Tag attributes. Page attributes HTML Notes How HTML is structured HTML consists of standard ASCI (American Standard Character Interchange) text surrounded by html tags. Tags are instructions which tell a web browser how to display a

More information

Chapter 12 Creating Web Pages

Chapter 12 Creating Web Pages Getting Started Guide Chapter 12 Creating Web Pages Saving Documents as HTML Files Copyright This document is Copyright 2010 2012 by its contributors as listed below. You may distribute it and/or modify

More information

User Guide. Appendix A. RadEditorAjax

User Guide. Appendix A. RadEditorAjax User Guide Appendix A Table of Contents About this Chapter... 3 What is?... 3 Section 1: at a Glance... 5 Publishing Options... 11 Keyboard Shortcuts Quick Reference... 12 Section 2: Formatting Tools...

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

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

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

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

Expression Web 4 Tutorial

Expression Web 4 Tutorial Expressions Web 4 Tutorial This is a basic look at the interface and workings of Expression Web. Here is the opening screen. It is divided into five windows which include; 1. A folder window top left 2.

More information

User Guide. Chapter 6. Teacher Pages

User Guide. Chapter 6. Teacher Pages User Guide Chapter 6 s Table of Contents Introduction... 3 Tips for s... 4 Pitfalls... 5 Key Information... 6 I. How to add a... 6 II. How to Edit... 9 SharpSchool s WYSIWYG Editor... 10 Publish a... 17

More information

(These instructions are only meant to get you started. They do not include advanced features.)

(These instructions are only meant to get you started. They do not include advanced features.) FrontPage XP/2003 HOW DO I GET STARTED CREATING A WEB PAGE? Previously, the process of creating a page on the World Wide Web was complicated. Hypertext Markup Language (HTML) is a relatively simple computer

More information

How to use the WYSIWYG

How to use the WYSIWYG How to use the WYSIWYG The WYSIWYG Editor is a text editor, similar to MS Word, that is used to produce program brochures in Web page format. WYSIWYG is pronounced whizzy-wig and stands for, What You See

More information

How to Use the Text Editor in Blackboard

How to Use the Text Editor in Blackboard How to Use the Text Editor in Blackboard The image below is the text editor in Blackboard. No matter you add an item or discussion forum for your course as an instructor, post threads and replies on a

More information

Contents - This is Dept. of Surgery modified version of the manual. Missing pages were removed intentionally.

Contents - This is Dept. of Surgery modified version of the manual. Missing pages were removed intentionally. Contents - This is Dept. of Surgery modified version of the manual. Missing pages were removed intentionally. 1 Introduction... 3 2 Getting Started with Umbraco... 4 2.1 Logging On... 4 2.2 The Edit Mode

More information

MICROSOFT POWERPOINT 2011 SHOW YOUR PRESENTATION

MICROSOFT POWERPOINT 2011 SHOW YOUR PRESENTATION MICROSOFT POWERPOINT 2011 SHOW YOUR PRESENTATION Lasted Edited: 2012-07-10 1 Use Speaker Notes... 4 Add speaker notes... 4 Change or format a note on a slide... 5 Print slides including speaker notes...

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

Chapter 3: The Schoolwires Editor

Chapter 3: The Schoolwires Editor : By the end of this chapter you will be able to: Insert and format text. Insert and format images. Insert and format tables. Insert links. Use ActiveBlocks to enhance your pages. Introduction to the Schoolwires

More information

Table of contents. Advanced HTML Editor 3 Manual DMXzone.com

Table of contents. Advanced HTML Editor 3 Manual DMXzone.com Table of contents Table of contents... 1 About Advanced HTML Editor 3... 2 Features in Detail... 3 Tutorial: Using Advanced HTML Editor 3 with Insert Record Behavior... 20 Tutorial: Using Advanced HTML

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

Introduction to Drupal 6

Introduction to Drupal 6 Ready Reference 063014 Introduction Introduction to Drupal 6 This page provides instructions for using the Drupal Web Content Management System. Drupal makes publishing content relatively easy and allows

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

Basic Website Creation. General Information about Websites

Basic Website Creation. General Information about Websites Basic Website Creation General Information about Websites Before you start creating your website you should get a general understanding of how the Internet works. This will help you understand what goes

More information

Chapter 12 Creating Web Pages

Chapter 12 Creating Web Pages Getting Started Guide Chapter 12 Creating Web Pages Saving Documents as HTML Files Copyright This document is Copyright 2010 2014 by the LibreOffice Documentation Team. Contributors are listed below. You

More information

Dreamweaver Domain 1: Setting Project Requirements

Dreamweaver Domain 1: Setting Project Requirements Dreamweaver Domain 1: Setting Project Requirements TRUE/FALSE 1. A new work using copyrighted work can be copyrightable in and of itself, but it must differ sufficiently from the original or it must contain

More information

Macromedia Dreamweaver Tutorial

Macromedia Dreamweaver Tutorial Macromedia Instructions: Work through this tutorial Ask when you need help Complete all tasks set in the tutorial Refer back to this tutorial when you design your own website Enjoy 1 Macromedia SET UP

More information

Chapter 12 Creating Web Pages

Chapter 12 Creating Web Pages Getting Started Guide Chapter 12 Creating Web Pages Saving Documents as HTML Files Copyright This document is Copyright 20102016 by the LibreOffice Documentation Team. Contributors are listed below. You

More information

Intro to Web Development

Intro to Web Development Intro to Web Development For this assignment you will be using the KompoZer program because it free to use, and we wanted to keep the costs of this course down. You may be familiar with other webpage editing

More information

WORDPRESS MANUAL WEBSITEDESIGN.CO.ZA

WORDPRESS MANUAL WEBSITEDESIGN.CO.ZA WORDPRESS MANUAL WEBSITEDESIGN.CO.ZA All information presented in the document has been acquired from http://easywpguide.com/wordpress-manual/ to assist you with your website 1 WORDPRESS MANUAL WEBSITEDESIGN.CO.ZA

More information

Microsoft Word 2007 (Getting Started) Screen Layout

Microsoft Word 2007 (Getting Started) Screen Layout Microsoft Word 2007 (Getting Started) Screen Layout Menus When you begin to explore Word 2007 you will notice a new look to the menu bar. There are three features that you should remember as you work within

More information

Developing Website Using Tools

Developing Website Using Tools 7 Developing Website Using Tools 7.1 INTRODUCTION A number of Software Packages are available in market for creating a website. Among popular softwares are Dreamweaver, Microsoft FrontPage and Flash. These

More information

Fireworks CS4 Tutorial Part 1: Intro

Fireworks CS4 Tutorial Part 1: Intro Fireworks CS4 Tutorial Part 1: Intro This Adobe Fireworks CS4 Tutorial will help you familiarize yourself with this image editing software and help you create a layout for a website. Fireworks CS4 is the

More information

HOW TO USE THIS GUIDE

HOW TO USE THIS GUIDE HOW TO USE THIS GUIDE This guide provides step-by-step instructions for each exercise. Anything that you are supposed to type or select is noted with various types and colors. WHEN YOU SEE THIS Click Help

More information

Revision in computer and information technology

Revision in computer and information technology Official Future Language School Revision in computer and information technology For preparatory 2 First term 2016/2017 By Mr. Mohamed Ramadan Lesson (1) Web site concepts Web site: is a web page or more

More information

Introduction. Steps in Creating Web Pages

Introduction. Steps in Creating Web Pages 1 of 7 Introduction A basic web page is a plain text file that has been marked up with tags around a word or phrase to describe how it should be displayed by the web browser. To see the HTML codes of any

More information

ID Studio. Help. DOC0017 Version 4.0. 2015... Nortech Control Systems Ltd

ID Studio. Help. DOC0017 Version 4.0. 2015... Nortech Control Systems Ltd ID Studio Help DOC0017 Version 4.0 ID Studio Table of Contents Part I Product Overview 1 Part II Installation and Settings 2 1 Installation... 2 2 Settings... 4 Part III Card Printing 6 1 Card Printing...

More information

Using Wikis Student Guide

Using Wikis Student Guide Using Wikis Student Guide Library and Learning Support 1. Overview 9. Creating anchors and anchors links 2. Accessing a wiki in mybu 10. Inserting images 3. The wiki page 11. Uploading and embedding videos

More information

Advanced Presentation Features and Animation

Advanced Presentation Features and Animation There are three features that you should remember as you work within PowerPoint 2007: the Microsoft Office Button, the Quick Access Toolbar, and the Ribbon. The function of these features will be more

More information

Word Processing with Microsoft Word 2000

Word Processing with Microsoft Word 2000 Word Processing with Microsoft Word 2000 1. Launch Microsoft Word by clicking on the Start button in the Task Bar. 2. Click on Programs. 3. Choose Microsoft Word from the list of programs. 4. The Office

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