Module 6 Lesson 3 Web Page Design PDF

Module 6 Web Page Concept and Design: Getting a Web Page Up and Running Lesson 3 Creating Web Pages Using HTML UNESCO EIPICT M6. LESSON 3 1 Rationale
Librarians need to learn how to plan, design and create their library’s web pages
The only way to learn is to create one...

Module 6 Web Page Concept and Design: Getting a Web Page Up and Running Lesson 3 Creating Web Pages Using HTML UNESCO EIPICT M6. LESSON 3 1 Rationale
Librarians need to learn how to plan, design and create their library’s web pages
The only way to learn is to create one UNESCO EIPICT M6. LESSON 3 2 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 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 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  Activity 6.3.1 Read these introductions to HTML:
What is HTML? InterNIC 15 Minutes Series http://www.netskills.ac.uk/mirrors/15min/ht ml/html/sld01.html
HyperText Markup Language Home Page http://www.w3.org/MarkUp/
Dave Raggett. Getting Started with HTML http://www.w3.org/MarkUp/Guide/ UNESCO EIPICT M6. LESSON 3 6 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  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 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  Activity 6.3.2 To know more about how to use HTML to create web pages browse the following sites
HTML Primer - http://www.htmlgoodies.com/primers/html/
HTML Basics - http://www.ncsu.edu/it/edu/html_trng/html_basi cs.html
Introduction to HTML- http://www.w3schools.com/html/html_intro.asp UNESCO EIPICT M6. LESSON 3 10 What are the Basic HTML Tags(1)?
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 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 What are the Basic HTML Rules (1)?
HTML tags are enclosed by brackets < > for example
Most tags require a closing tag …
Tags must be nested correctly My Library Web Site first tag on, last tag off
HTML treats all white space as a single blank space UNESCO EIPICT M6. LESSON 3 13  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 … UNESCO EIPICT M6. LESSON 3 14 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 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  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 10 3. If everything works, the finished web page should be the same as the one on the right side of slide 10 4. 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 How to Add Content(1)
To add headings use Header tags
Header tags range from to , the largest and is the smallest.
The headings’ size shows the hierarchy of importance on the page’s layout. My Library (page title) Mission, Vision and Goals (main heading) Objectives (subheading) UNESCO EIPICT M6. LESSON 3 18 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 Result for Exercise 2 UNESCO EIPICT M6. LESSON 3 20 How to Add Content(2)
To add more text use the tag
The tag breaks the textual information on a page and inserts a single line space, which is useful for defining and separating paragraphs. Mission, Vision and Goals MyLibrary aims to be the country's public virtual library with state-of-the art resources and associated services, accessible to anyone, anytime, anywhere. UNESCO EIPICT M6. LESSON 3 21 Exercise 3 1. Open basic.htm using Notepad 2. Insert this text with the paragraph tag after Mission, Vision and Goals MyLibrary aims to be the country's public virtual library with state-of-the art resources and associated services, available to anyone, anytime, anywhere. 3. Save then View the result; it should be similar to next slide UNESCO EIPICT M6. LESSON 3 22 Exercise 3 (Continued) 4. Add more paragraphs using 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 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 and tags Objectives Acquire a comprehensive collection of multimedia materials Develop appropriate user education and training packages UNESCO EIPICT M6. LESSON 3 24 Other HTML Tags(2) Objectives Acquire a comprehensive collection of multimedia materials Develop appropriate user education and training packages UNESCO EIPICT M6. LESSON 3 25 Other HTML Tags(3) Ordered list is a numbered list that uses and tags. Example: Library Resources Library Collections Library Catalog Electronic Resources UNESCO EIPICT M6. LESSON 3 26 Other HTML Tags(4) Lists can be nested, one within another Library Collections Books Journals Library Catalog Electronic Resources CD-ROMs Abstracts & Indexes UNESCO EIPICT M6. LESSON 3 27 Other HTML Tags(6) The list item type attribute can be used to change the bullets in disc, square or circle, and in from number 1 to lowercase (a) or uppercase (A) letters, or lowercase (i) or uppercase (I) roman numerals UNESCO EIPICT M6. LESSON 3 28 Other HTML Tags(7) Library Collections Books Journals Library Catalog Electronic Resources CD-ROMs Abstracts & Indexes UNESCO EIPICT M6. LESSON 3 29 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 How to Add Images(1)
Image and other graphical elements can be added on the web page through the 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
If not, the correct directory should be reflected in the src attribute UNESCO EIPICT M6. LESSON 3 31 How to Add Images(2) Example:
Insert the 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 UNESCO EIPICT M6. LESSON 3 32  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 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 http://www.xara.com/referrer/headmaker_trial.asp o Button maker o http://www.coolarchive.com/buttonmaker.php o Cool Text: Logo and Graphics Generator o http://cooltext.com/ Proceed with placing images on web pages UNESCO EIPICT M6. LESSON 3 34 How to Create Hyperlinks(1)
Hypertext links are created on web pages using the anchor tag with the href (Hypertext Reference) attribute
Hyperlinks connect your web pages together and point to other web documents (build your web site) Library Collection UNESCO Libraries Portal UNESCO EIPICT M6. LESSON 3 35 How to Create Hyperlinks(2) Library Collection UNESCO Libraries Portal UNESCO EIPICT M6. LESSON 3 36 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 MyLibrary UNESCO EIPICT M6. LESSON 3 37 How to Create Hyperlinks(4) Examples MyLibrary UNESCO EIPICT M6. LESSON 3 38 How to Create Hyperlinks(5) Link to e-mail address can be created to automatically open the e-mail program on the system supplying the address Contact [email protected] UNESCO EIPICT M6. LESSON 3 39 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 (e-mail, tel no#, etc) 5. View / Test the links / Edit and save UNESCO EIPICT M6. LESSON 3 40 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 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 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 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 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