Module 6 Web Page Concept and Design: Getting a Web Page Up and Running
|
|
|
- Conrad Sparks
- 8 years ago
- Views:
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
![document as HTML] Opens this area Contains information about the HTML document Closing tag for this](/docs-images/53/11496743/images/page_11.jpg "area Opening tag for the body of the text Tags for the opening and closing of a paragraph Closing")
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 = mailto:me@mylibrary > me@mylibrary.edu </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 Introduction Client-Side scripting involves using programming technologies to build web pages and applications that are run on the client (i.e.
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
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
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
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
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
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
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...
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
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
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
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
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
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
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,
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
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
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
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.
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
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
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
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
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.
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
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...
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,
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
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
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
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
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
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
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
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,
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
How To Write A Cq5 Authoring Manual On An Ubuntu Cq 5.2.2 (Windows) (Windows 5) (Mac) (Apple) (Amd) (Powerbook) (Html) (Web) (Font
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
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,
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
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
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
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,
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
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
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
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,
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
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
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
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
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
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
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
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
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
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...
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
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
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
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
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...
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
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
NURSING 3225 NURSING INQUIRY WEB SITE DEVELOPMENT GUIDE BOOK
Nursing 3225 Web Dev Manual Page 1 NURSING 3225 NURSING INQUIRY WEB SITE DEVELOPMENT GUIDE BOOK Nursing 3225 Web Dev Manual Page 2 N3225: Nursing Inquiry Student Created Group Website Addresses (1 of 2)
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.
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
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
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
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
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
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
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
WYSIWYG Tips and FAQ
WYSIWYG Tips and FAQ Version 1.0 WYSIWYG: What you see is what you get. This is an abbreviation for the type of editor Acalog uses. You will layout your content in the editor, and when you hit preview,
Enduring Understandings: Web Page Design is a skill that grows and develops throughout the careful planning and study of software and design.
Curriculum Map for Web Design SEPTEMBER Targeted NJ Core Curriculum Content Standards: Design develop, test, implement, update, and evaluate web solutions Technology Use, Media Literacy, Responsible Use
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
HTML Templates Guide April 2014
HTML Templates Guide April 2014 Contents About These Templates How to Apply Templates to a New Content Topic How to Enable HTML Templates Which Template Page to Use How to Apply an HTML Template to a New
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
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
Knowing the Code. In this chapter
In this chapter What you need to know about HTML More about creating and coding style sheets Web scripting languages primer A few words about XML 23 Knowing the Code Itching to take your site to a whole
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
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
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 Website Maintenance Tutorial*
Basic Website Maintenance Tutorial* Introduction You finally have your business online! This tutorial will teach you the basics you need to know to keep your site updated and working properly. It is important
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
Cascade Server. End User Training Guide. OIT Training and Documentation Services OIT TRAINING AND DOCUMENTATION. oittraining@uta.
OIT Training and Documentation Services Cascade Server End User Training Guide OIT TRAINING AND DOCUMENTATION oittraining@uta.edu http://www.uta.edu/oit/cs/training/index.php 2013 CONTENTS 1. Introduction
collab.virginia.edu UVACOLLAB ECLPS: BUILDING COURSE PORTALS UVaCollab User Guide Series collab-support@virginia.edu
UVACOLLAB ECLPS: BUILDING COURSE PORTALS UVaCollab User Guide Series collab-support@virginia.edu Revised 4/28/2014 CONTENTS The eclps Overview... 3 Objectives... 3 Adding the Syllabus or Lessons Tool to
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
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
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
SEO Optimization A Developer s Role
Copyright 2010. www.anubavam.com. All Rights Reserved. Page 1 Contents Overview 3 What is SEO? 3 Role of a Developer in SEO 4 SEO friendly URLs 4 Page Title 5 Meta Tags 6 Page Heading 7 Amplify the First
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
Designing HTML Emails for Use in the Advanced Editor
Designing HTML Emails for Use in the Advanced Editor For years, we at Swiftpage have heard a recurring request from our customers: wouldn t it be great if you could create an HTML document, import it into
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
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
Lab 1.3 Basic HTML. Vocabulary. Discussion and Procedure
Lab 1.3 Basic HTML The World Wide Web (commonly just called the web ) is an enormous and rapidly growing collection of documents stored on computers all around the world connected by the Internet. In addition
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
JOB READY ASSESSMENT BLUEPRINT WEB DESIGN - PILOT. Test Code: 3750 Version: 01
JOB READY ASSESSMENT BLUEPRINT WEB DESIGN - PILOT Test Code: 3750 Version: 01 Specific Competencies and Skills Tested in this Assessment: Internet Basics Describe the process of information exchange between
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...
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
WP Popup Magic User Guide
WP Popup Magic User Guide Plugin version 2.6+ Prepared by Scott Bernadot WP Popup Magic User Guide Page 1 Introduction Thank you so much for your purchase! We're excited to present you with the most magical