TUTORIAL #2: BASIC HTML CMPT100 : INTRODUCTION TO COMPUTING UNIVERSITY OF SASKATCHEWAN. By Wendy Sharpe
|
|
|
- Rhoda Stevenson
- 7 years ago
- Views:
Transcription
1 TUTORIAL #2: BASIC HTML CMPT100 : INTRODUCTION TO COMPUTING UNIVERSITY OF SASKATCHEWAN By Wendy Sharpe
2 BEFORE WE GET GOING... If this is your FIRST tutorial, please review the slides from Tutorial 1 If you have not done so already... Go to your H:/ drive and create a CMPT100 folder Start My Computer Winhome on Samba. Then go to File New Folder to create your CMPT100 folder Log into Go to today s tutorial and save one of the tutorial images to your CMPT100 folder. Remember the Mad Serious Hugely Important Disclaimer from tutorial #1? DO NOT SAVE FILES TO YOUR DESKTOP. EVER. SERIOUSLY. Open Kompozer Start Course Specific Applications CMPT-100 Kompozer
3 OVERVIEW OF TUTORIAL #2 Elements and tags (HTML lingo) Creating and saving the Excellent Scuba Adventure Headings and paragraphs Horizontal rules and breaks Creating hyperlinks Inserting images Using comment tags RGB colour codes Adding styles and formatting to index.html Uploading web pages to Ehandin
4 HTML LINGO: TAGS VS. ELEMENTS
5 HTML TERMINOLOGY: TAGS VS. ELEMENTS Tags the commands that give HTML documents their functionality basic Tag structure: <tagname> E.g., <p> indicates a new paragraph Opening and Closing Tags some tags need to be closed otherwise they won t work such as: text formatting tags, document formatting tags, graphics formatting tags, linking tags Basic opening/closing tag structure: <openingtag> element </closingtag> E.g., <i>my italic text</i>
6 HTML TERMINOLOGY: TAGS VS. ELEMENTS Elements an element is everything from the opening tag to the closing tag E.g., opening and closing tag (with element) for a link <a href= s Site</a>
7 CREATING AND SAVING FILES IN KOMPOZER HTML terminology: head vs. body
8 CREATING & SAVING THE SCUBA DIVING PAGE IN KOMPOZER Create a new page in Kompozer File New Blank Doc Save your new page Name your page index Save the file to your CMPT100 folder Save any files related to your webpage in the same folder Remember the rule about naming files: NO SPACES
9 HTML TERMINOLOGY: HEAD VS. BODY Head if you click on the Source tab in Kompozer you can look at the source code for the scuba site Kompozer automatically creates your website s head section indicated with an opening/closing tag Body E.g., <head> head element </head> a head element can be, for example, your webpage title defines the documents body includes all the contents of an HTML document such as text, hyperlinks, images, tables, lists, etc. indicated with opening and closing tags: E.g., <body> HTML document content </body>
10 HEADINGS & PARAGRAPHS HTML terminology: headings vs. title
11 HEADINGS IN KOMPOZER Add a heading 1 to your index.html file H1, h2, h3, h4, h5, h6 smaller the number = the bigger/more important the heading
12 HTML TERMINOLOGY: HEADINGS VS. TITLE Headings search engines use headings to index the structure and content of web pages show the structure of the document, allows users to skim content don t use headings to make text BIG or bold syntax: open tag element content close tag E.g., <h1>this is my most important header</h1>
13 HTML TERMINOLOGY: HEADINGS VS. TITLE Title tag defines the title of the document title element is required in all HTML and XHTML documents syntax: <title>sep and Jerry s Excellent Scuba Adventure</title> Title attribute completely unrelated to title tag gives more information about an element syntax: <element title= value > I coded a title attribute into the index of my homepage, see if you can find it in the source code go to in your web browser: View Source HINT: read the green comments!
14 CREATING PAGE2 OF OUR SCUBA ADVENTURE WEBPAGE
15 CREATING PAGE2.HTML we re just going to reuse what we ve done so far for index.html File Save As page2.html make sure you are saving to the same place as index.html and your image file Modify the heading on page2.html to: My Scuba Adventure Page 2 FYI: Kompozer will be open to page2.html NOT index.html but you can tell which page you re working on by looking at the top of Kompozer see next slide for details
16 KEEPING TRACK OF WHICH PAGE YOU RE EDITING: INDEX OR PAGE2
17 AND MOVING ON... close page2.html open index.html we re going to add a paragraph of info to index.html change Body Text to Paragraph add some information about your unwavering love for scuba diving. it can be anything
18 TWO MAD SERIOUS HUGELY IMPORTANT DISCLAIMERS Always, always save your page after you are satisfied with a change Small changes are easier to fix if you make a mistake Always view new changes in a refreshed web browser to make sure they look okay Force refresh of your web browser Control+F5 is the keyboard shortcut Forces a complete refresh of each and every file associated with your website. A simple refresh on your browser WILL NOT force a refresh of every file associated with your website
19 VIEWING YOUR KOMPOZER PAGE IN A BROWSER go to where you have your index.html file saved right mouse click on the file, and select Open from the list of options the file should now be opened in a browser Note: nobody else can see your page, it is local
20 INSERTING IMAGES
21 INSERTING AN IMAGE pretty simple with Kompozer click the Image icon, or Insert image find the image on your file directory NOTE: the image MUST be in the same folder as your index.html file pretty easy to do by modifying source code too just make sure the file names match exactly images are defined with the <img> tag to display an image on a page, you need the src tag (src = Source) src lets a browser know the URL of where the image The URL points to the location where the image is stored for more info:
22 IMAGE ALTERNATE TEXT A note on the alternate text option alt= My image s info always add alternate text to your images provides additional information for people who have slow connections or who use a screen reader Some information on screen readers if you re interested: Screen_reader
23 TROUBLESHOOTING IMAGES Troubleshooting image issues make sure that your image file is in the same folder as the rest of your webpage ALWAYS hand in your image files with your assignments into Ehandin img style="width: 400px; height: 265px; alt="fishes and corals" src="tutorial1_underwater2.jpg >
24 ADD ANOTHER HEADING AND PARAGRAPH TO INDEX.HTML
25 ADDING MORE STUFF TO INDEX.HTML create a subheading of size h2 underneath the image Call the new subheading Details create a paragraph under the subheading tell the world about your first scuba diving adventure
26 CREATING HORIZONTAL RULES & BREAKS
27 HORIZONTAL RULE A.K.A. HORIZONTAL LINE Pretty straight forward in Kompozer put the cursor where you want your line to go Insert Horizontal Line
28 INSERTING A BREAK In Kompozer just press the Enter key HTML tag: <br> inserts a single line break <br> is an empty tag, meaning that it doesn t have a closing tag go to the Source tab in Kompozer and you can see the corresponding breaks
29 CREATING HYPERLINKS
30 ADDING LINKS SECTION TO INDEX.HTML add a heading of size h2 called Links add a paragraph describing the links We re going to add three types of links: relative link to page2.html absolute link to PADI website: internal link to the top of the page a.k.a. an anchor needs two components to work If you re still confused after the tutorial is over, you can watch an online tutorial via Youtube
31 USING COMMENT TAGS
32 COMMENTING YOUR CODE Why? Indicate who created the HTML document, get easy marks, organize your source code you won t be able to see comments in the Kompozer Design tab the browser will ignore any comments enclosed in the comments tag: <!-- this is my comment --> Commenting as explained by xkcd. The actual format with // is used in the C++ language, but all languages, including HTML have some form of commenting
33 COMMENTING IN KOMPOZER Insert Comment type what you want your comment in the dialog box click OK your comment will appear as a question mark icon in Kompozer you can view the details of your comment in the Source tab
34 RGB COLOUR CODES Adding a background colour to index.html
35 HTML COLOURS HTML colours are defined using a hexidecimal (HEX) notation Colours are displayed by combining Red, Green, and Blue (RGB) colour values The lowest value a colour can have is 0 (HEX: 00) The highest value a colour can have is 255 (HEX: FF) E.g., #99CCCC Ever heard of web safe colours? Not as big of an issue anymore because not very many computer users view the web in 256 colors anymore But this is still an issue in some circles
36 CHANGE THE BACKGROUND COLOUR OF INDEX.HTML Changing HTML colours in Kompozer is easy Format Page colors and background... Select the colour you want What a background colour looks like in the source code: style="color: rgb(0, 0, 0); background-color: rgb(204, 255, 255);" alink="#000099" link="#000099" vlink="#990099">
37 ADDING STYLES AND FORMATTING TO INDEX.HTML HTML terminology: CSS and Styles
38 HTML TERMINOLOGY: CASCADING STYLE SHEETS (CSS) uses styles to define how to display HTML elements CSS were added to HTML 4.0 so all formatting could be removed from the HTML document and stored in a CSS file VERY useful, can save you a ton of work by allowing you to change the appearance/layout of your HTML document in one place online demo of CSS and styles:
39 HTML TERMINOLOGY: CSS syntax of CSS a CSS rule (a list of the formatting) has two main parts: a selector one or more declarations E.g., h1 {colour:blue;font-size:12px;} big arrow: selector (usually the HTML element you want to style) medium arrow: value small arrow: property each property has a value associated with it
40 USING KOMPOZER S CSS EDITOR TO DEFINE A CSS CLASS (.HEADINGS) AND A CSS RULE (LINKHOVER)
41 USING KOMPOZER S CSS EDITOR TO CREATE THE.HEADINGS CLASS First, center the webpage text we ll select everything from the first heading to the horizontal rule Click the CaScadeS button Kompozer s CSS editor create a class.heading set font to arial, italicize, change font colour to # apply this class to the h1 and h2 headings
42 CREATING THE.HEADINGS CLASS Click Create Style Rule
43 CREATING THE LINK HOVER RULE Click the CaScadeS button like before This changes the state of the links on your page
44 CREATE TEXT BOX CLASS Use CaScadeS the same was as with the.headings class set Background to white set text box border set padding (5 pixels should be enough) click ok apply the class to your index.html file highlight the areas you want in the text box, use the pull down menu to access the class
45 UPLOADING WEBPAGES TO EHANDIN
46 SUBMITTING ASSIGNMENTS TO EHANDIN add each file one at a time don t forget to upload image files make sure your file names don t have spaces double check that your webpage displays properly in a browser
47 QUESTIONS?
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,
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
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
Website Development Komodo Editor and HTML Intro
Website Development Komodo Editor and HTML Intro Introduction In this Assignment we will cover: o Use of the editor that will be used for the Website Development and Javascript Programming sections of
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
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
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
Go Kiwi Internet Content Management System Version 5.0 (K5) TRAINING MANUAL
Go Kiwi Internet Content Management System Version 5.0 (K5) TRAINING MANUAL K5 CMS The K5 Content Management System (CMS), previously known as Kwik-Az Updating, is a small downloadable program that permits
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
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...
How To Use Dreamweaver With Your Computer Or Your Computer (Or Your Computer) Or Your Phone Or Tablet (Or A Computer)
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
Digital Marketing EasyEditor Guide Dynamic
Surveys ipad Segmentation Reporting Email Sign up Email marketing that works for you Landing Pages Results Digital Marketing EasyEditor Guide Dynamic Questionnaires QR Codes SMS 43 North View, Westbury
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,
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
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...
Sage Accountants Business Cloud EasyEditor Quick Start Guide
Sage Accountants Business Cloud EasyEditor Quick Start Guide VERSION 1.0 September 2013 Contents Introduction 3 Overview of the interface 4 Working with elements 6 Adding and moving elements 7 Resizing
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
Creating Web Pages with Dreamweaver CS 6 and CSS
Table of Contents Overview... 3 Getting Started... 3 Web Page Creation Tips... 3 Creating a Basic Web Page Exercise... 4 Create a New Page... 4 Using a Table for the Layout... 5 Adding Text... 6 Adding
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
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)
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
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
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
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
Step 2 Open Kompozer and establish your site. 1. Open Kompozer from the Start Menu (at the Polytechnic) or from the downloaded program.
Kompozer User Guide KompoZer is web authoring software that combines web file management and easy-to-use WYSIWYG web page editing. It is designed to be easy to use, making it ideal for non-technical computer
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
Working with the Ektron Content Management System
Working with the Ektron Content Management System Table of Contents Creating Folders Creating Content 3 Entering Text 3 Adding Headings 4 Creating Bullets and numbered lists 4 External Hyperlinks and e
Create a Poster Using Publisher
Contents 1. Introduction 1. Starting Publisher 2. Create a Poster Template 5. Aligning your images and text 7. Apply a background 12. Add text to your poster 14. Add pictures to your poster 17. Add graphs
Using Style Sheets for Consistency
Cascading Style Sheets enable you to easily maintain a consistent look across all the pages of a web site. In addition, they extend the power of HTML. For example, style sheets permit specifying point
How To Create A Web Page On A Windows 7.1.1 (For Free) With A Notepad) On A Macintosh (For A Freebie) Or Macintosh Web Browser (For Cheap) On Your Computer Or Macbook (
CREATING WEB PAGE WITH NOTEPAD USING HTML AND CSS The following exercises illustrate the process of creating and publishing Web pages with Notepad, which is the plain text editor that ships as part of
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...
RADFORD UNIVERSITY. Radford.edu. Content Administrator s Guide
RADFORD UNIVERSITY Radford.edu Content Administrator s Guide Contents Getting Started... 2 Accessing Content Administration Tools... 2 Logging In... 2... 2 Getting Around... 2 Logging Out... 3 Adding and
How to Create an HTML Page
This is a step-by-step guide for creating a sample webpage. Once you have the page set up, you can add and customize your content using the various tags. To work on your webpage, you will need to access
css href title software blog domain HTML div style address img h2 tag maintainingwebpages browser technology login network multimedia font-family
technology software href browser communication public login address img links social network HTML div style font-family url media h2 tag handbook: id domain TextEdit blog title PORT JERVIS CENTRAL SCHOOL
Basic Web Development @ Fullerton College
Basic Web Development @ Fullerton College Introduction FC Net Accounts Obtaining Web Space Accessing your web space using MS FrontPage Accessing your web space using Macromedia Dreamweaver Accessing your
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
Getting Started with WebSite Tonight
Getting Started with WebSite Tonight WebSite Tonight Getting Started Guide Version 3.0 (12.2010) Copyright 2010. All rights reserved. Distribution of this work or derivative of this work is prohibited
How To Insert Hyperlinks In Powerpoint Powerpoint
Lesson 5 Inserting Hyperlinks & Action Buttons Introduction A hyperlink is a graphic or piece of text that links to another web page, document, or slide. By clicking on the hyperlink will activate it and
Sample Table. Columns. Column 1 Column 2 Column 3 Row 1 Cell 1 Cell 2 Cell 3 Row 2 Cell 4 Cell 5 Cell 6 Row 3 Cell 7 Cell 8 Cell 9.
Working with Tables in Microsoft Word The purpose of this document is to lead you through the steps of creating, editing and deleting tables and parts of tables. This document follows a tutorial format
ITCS QUICK REFERENCE GUIDE: EXPRESSION WEB SITE
Create a One-Page Website Using Microsoft Expression Web This tutorial uses Microsoft Expression Web 3 Part 1. Create the Site on your computer Create a folder in My Documents to house the Web files. Save
WYSIWYG Editor in Detail
WYSIWYG Editor in Detail 1. Print prints contents of the Content window 2. Find And Replace opens the Find and Replace dialogue box 3. Cut removes selected content to clipboard (requires a selection) 4.
css href title software blog domain HTML div style address img h2 tag maintainingwebpages browser technology login network multimedia font-family
technology software href browser communication public login address img links social network HTML div style font-family url media h2 tag handbook: id domain TextEdit blog title CANAJOHARIE CENTRAL SCHOOL
Jadu Content Management Systems Web Publishing Guide. Table of Contents (click on chapter titles to navigate to a specific chapter)
Jadu Content Management Systems Web Publishing Guide Table of Contents (click on chapter titles to navigate to a specific chapter) Jadu Guidelines, Glossary, Tips, URL to Log In & How to Log Out... 2 Landing
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
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
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
Microsoft Word 2010 Basics
Microsoft Word 2010 Basics 1. Start Word if the Word 2007 icon is not on the desktop: a. Click Start>Programs>Microsoft Office>Microsoft Word 2007 b. The Ribbon- seen across the top of Microsoft Word.
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
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
ART 379 Web Design. HTML, XHTML & CSS: Introduction, 1-2
HTML, XHTML & CSS: Introduction, 1-2 History: 90s browsers (netscape & internet explorer) only read their own specific set of html. made designing web pages difficult! (this is why you would see disclaimers
Content Author's Reference and Cookbook
Sitecore CMS 6.2 Content Author's Reference and Cookbook Rev. 091019 Sitecore CMS 6.2 Content Author's Reference and Cookbook A Conceptual Overview and Practical Guide to Using Sitecore Table of Contents
Creating Accessible Documents in Word 2011 for Mac
Creating Accessible Documents in Word 2011 for Mac NOTE: Word 2011 for Mac does not offer an Accessibility Checker. After creating your document, you can double-check your work on a PC, to make sure your
Google Drive Create, Share and Edit Documents Online
Revision 3 (1-31-2014) Google Drive Create, Share and Edit Documents Online With Google Drive, you can easily create, share, and edit documents online. Here are a few specific things you can do: Convert
Making a Website with Hoolahoop
Making a Website with Hoolahoop 1) Open up your web browser and goto www.wgss.ca/admin (wgss.hoolahoop.net temporarily) and login your the username and password. (wgss.ca is for teachers ONLY, you cannot
Creating a website using Voice: Beginners Course. Participant course notes
Creating a website using Voice: Beginners Course Topic Page number Introduction to Voice 2 Logging onto your website and setting passwords 4 Moving around your site 5 Adding and editing text 7 Adding an
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
Microsoft Outlook Introduction
Microsoft Outlook Introduction Division of Information Technology February 2016 Contents Document Management History... 3 Introduction... 4 Getting Started... 4 Using MS Outlook... 4 What MS Outlook looks
Use e-mail signatures in Outlook 2010
Use e-mail signatures in Outlook 2010 Quick Reference Card Download and use a signature template Note This procedure will take you away from this page. If necessary, print this page before you follow these
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,
Windows 95. 2a. Place the pointer on Programs. Move the pointer horizontally to the right into the next window.
Word Processing Microsoft Works Windows 95 The intention of this section is to instruct basic word processing skills such as creating, editing, formatting, saving and closing a new document. Microsoft
Umbraco v4 Editors Manual
Umbraco v4 Editors Manual Produced by the Umbraco Community Umbraco // The Friendly CMS Contents 1 Introduction... 3 2 Getting Started with Umbraco... 4 2.1 Logging On... 4 2.2 The Edit Mode Interface...
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
WebEx Sharing Resources
WebEx Sharing Resources OTS PUBLICATION: WX0 REVISED: 4/8/06 04 TOWSON UNIVERSITY OFFICE OF TECHNOLOGY SERVICES =Shortcut =Advice =Caution Introduction During a WebEx session, the host has the ability
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
Introducing our new Editor: Email Creator
Introducing our new Editor: Email Creator To view a section click on any header below: Creating a Newsletter... 3 Create From Templates... 4 Use Current Templates... 6 Import from File... 7 Import via
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
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...
WORDPAD TUTORIAL WINDOWS 7
WORDPAD TUTORIAL WINDOWS 7 Quick Access bar Home Tab Triangles = More Commands Groups on the Home tab Right paragraph margin Left paragraph Margin & Indent Paragraphs Ruler Hover the mouse pointer over
MICROSOFT POWERPOINT STEP BY STEP GUIDE
IGCSE ICT SECTION 16 PRESENTATION AUTHORING MICROSOFT POWERPOINT STEP BY STEP GUIDE Mark Nicholls ICT Lounge Page 1 Contents Importing text to create slides Page 4 Manually creating slides.. Page 5 Removing
Introduction. Inserting Hyperlinks. PowerPoint 2010 Hyperlinks and Action Buttons. About Hyperlinks. Page 1
PowerPoint 2010 Hyperlinks and Action Buttons Introduction Page 1 Whenever you use the Web, you are using hyperlinks to navigate from one web page to another. If you want to include a web address or email
Last week we talked about creating your own tags: div tags and span tags. A div tag goes around other tags, e.g.,:
CSS Tutorial Part 2: Last week we talked about creating your own tags: div tags and span tags. A div tag goes around other tags, e.g.,: animals A paragraph about animals goes here
Terminal 4 Site Manager User Guide. Need help? Call the ITD Lab, x7471
Need help? Call the ITD Lab, x7471 1 Contents Introduction... 2 Login to Terminal 4... 2 What is the Difference between a Section and Content... 2 The Interface Explained... 2 Modify Content... 3 Basic
DRUPAL WEB EDITING TRAINING
LOGIN AND VIEW CONTENT Work in Firefox DRUPAL WEB EDITING TRAINING the black logo in the upper right corner to log into Drupal The User Work Area will come up: General Information My Recent Edits the content
Build a New Website Using the UB Content Management System (UBCMS)
Build a New Website Using the UB Content Management System (UBCMS) Support Website Online training, help and support, UBCMS status and more. ubcms.buffalo.edu Training Feedback Survey https://www.surveymonkey.com/s/mm-dd-yyyy
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
introduces the subject matter, presents clear navigation, is easy to visually scan, and leads to more in-depth content. Additional Resources 10
STYLE GUIDE Style Guide for Course Design Think of your Moodle course page as the homepage of a website. An effective homepage: introduces the subject matter, presents clear navigation, is easy to visually
Excel macros made easy
IT Training Excel macros made easy Jane Barrett, IT Training & Engagement Team Information System Services Version 1.1 Scope Learning outcomes Understand the concept of what a macro is and what it does.
Your Blueprint websites Content Management System (CMS).
Your Blueprint websites Content Management System (CMS). Your Blueprint website comes with its own content management system (CMS) so that you can make your site your own. It is simple to use and allows
Wellesley College Alumnae Association. Volunteer Instructions for Email Template
Volunteer Instructions for Email Template Instructions: Sending an Email in Harris 1. Log into Harris, using your username and password If you do not remember your username/password, please call 781.283.2331
Responsive Web Design for Teachers. Exercise: Building a Responsive Page with the Fluid Grid Layout Feature
Exercise: Building a Responsive Page with the Fluid Grid Layout Feature Now that you know the basic principles of responsive web design CSS3 Media Queries, fluid images and media, and fluid grids, you
General Electric Foundation Computer Center. FrontPage 2003: The Basics
General Electric Foundation Computer Center FrontPage 2003: The Basics September 30, 2004 Alternative Format Statement This publication is available in alternative media upon request. Statement of Non-discrimination
State of Nevada. Ektron Content Management System (CMS) Basic Training Guide
State of Nevada Ektron Content Management System (CMS) Basic Training Guide December 8, 2015 Table of Contents Logging In and Navigating to Your Website Folders... 1 Metadata What it is, How it Works...
Recreate your Newsletter Content and Layout within Informz (Workshop) Monica Capogna and Dan Reade. Exercise: Creating two types of Story Layouts
Recreate your Newsletter Content and Layout within Informz (Workshop) Monica Capogna and Dan Reade Exercise: Creating two types of Story Layouts 1. Creating a basic story layout (with title and content)
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
Terminal Four (T4) Site Manager
Terminal Four (T4) Site Manager Contents Terminal Four (T4) Site Manager... 1 Contents... 1 Login... 2 The Toolbar... 3 An example of a University of Exeter page... 5 Add a section... 6 Add content to
University of East Anglia Liferay Training Admissions, Recruitment and Marketing Department
University of East Anglia Liferay Training Admissions, Recruitment and Marketing Department i Version 3.4 Contents Overview...iii Introducing Liferay... iv 1. Logging in and accessing your site... 1 2.
Mastering the JangoMail EditLive HTML Editor
JangoMail Tutorial Mastering the JangoMail EditLive 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
Using Microsoft Word. Working With Objects
Using Microsoft Word Many Word documents will require elements that were created in programs other than Word, such as the picture to the right. Nontext elements in a document are referred to as Objects
Depending on your role, this might mean adding and editing, for example, events, blog entries or news stories.
website guide guide for adding and editing web content Introduction The MS Society website uses a content management system (CMS) called Drupal. As a contributor to the site, you ll receive training in
Chapter 6. Formatting Text with Character Tags
Chapter 6 Formatting Text with Character Tags 143 144 FrameMaker 7: The Complete Reference In many desktop publishing applications, you use a single style sheet for both paragraph and character formatting.
Drupal Training Part One
Drupal Training Part One In this tutorial, we will cover: Content editing, Uploading images, Revisions tab, and the Masquerade tool. Overview of Main Tools The main tools in Drupal are on the left side
Google Docs Basics Website: http://etc.usf.edu/te/
Website: http://etc.usf.edu/te/ Google Docs is a free web-based office suite that allows you to store documents online so you can access them from any computer with an internet connection. With Google
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
Microsoft PowerPoint 2010 Handout
Microsoft PowerPoint 2010 Handout PowerPoint is a presentation software program that is part of the Microsoft Office package. This program helps you to enhance your oral presentation and keep the audience
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
UCL INFORMATION SERVICES DIVISION INFORMATION SYSTEMS. Silva. Introduction to Silva. Document No. IS-130
UCL INFORMATION SERVICES DIVISION INFORMATION SYSTEMS Silva Introduction to Silva Document No. IS-130 Contents What is Silva?... 1 Requesting a website / Web page(s) in Silva 1 Building the site and making
NDSU Technology Learning & Media Center. Introduction to Google Sites
NDSU Technology Learning & Media Center QBB 150C 231-5130 www.ndsu.edu/its/tlmc Introduction to Google Sites Get Help at the TLMC 1. Get help with class projects on a walk-in basis; student learning assistants
Advanced Online Media Dr. Cindy Royal Texas State University - San Marcos School of Journalism and Mass Communication
Advanced Online Media Dr. Cindy Royal Texas State University - San Marcos School of Journalism and Mass Communication Using JQuery to Make a Photo Slideshow This exercise was modified from the slideshow
How to Edit Your Website
How to Edit Your Website A guide to using your Content Management System Overview 2 Accessing the CMS 2 Choosing Your Language 2 Resetting Your Password 3 Sites 4 Favorites 4 Pages 5 Creating Pages 5 Managing
Adobe Illustrator CS6. Illustrating Innovative Web Design
Overview In this seminar, you will learn how to create a basic graphic in Illustrator, export that image for web use, and apply it as the background for a section of a web page. You will use both Adobe