1. Session 1: Introduction to HTML Spring 2009
The LIS Web Team Presents
Basic HTML Workshop
Introduce web team
Stop me at any time if you have questions
During Exercise, if you get stuck please grab one of the web team for help – don’t get behind.
We are going to stick to the scheduled time so we will be wrapping things up at 12:20.
Please us if you have any questions.
Session 1: Introduction to HTML
Spring 2009

2. Introduction to HTML Spring 2009
Course contents
The internet
HTML and text editors
Exercise 1: setting up your UH web site & setting permissions
Exercise 2: Good Housekeeping
Best Practice in Web Design
Overview: the world wide web and html in relation to creating web pages Creating your web site and uploading files
Ex. 1: Teaching HTML- with an emphasis on creating your ePortfolio We will have you set up your web site, create a basic page, and set permissions.
Ex. 2: Create folders to keep files organized.
Talk about basic good web design practices.
Goals: to develop a basic understanding of html in order to create an ePortfolio You will have a page on your web site when you leave here today.
Introduction to HTML Spring 2009

3. Introduction to HTML Spring 2009
Learning Web Design
Practice
Trial and error
Other sites
These sessions will be much more useful if you practice before and after each class
Making mistakes is the best way to learn – we have all done it
If a site is using basic html you can look at their code to see how it’s done
Practice
Introduction to HTML Spring 2009

4. The Internet – What is it?
Inter-connection of computer networks
Computers access other computers and share information
A worldwide system of linked computer networks
Originally designed by the US Defense Department to serve military institutions worldwide.
These computer networks facilitates data communication services such as remote login, file transfer, electronic mail and newsgroups.
Basically this is a system for sharing information worldwide and has played a huge role in the LIS field
Introduction to HTML Spring 2009

5. Introduction to HTML Spring 2009
World Wide Web
Internet for the civilian world
Same purpose – different interface
Data storage and retrieval
Graphical interface
The original Military version of the internet was all text-based and not visually pleasing
The "World Wide Web" and internet browsers created a graphical interface that has permeated our culture, world wide.
Data was originally all text-based – now there are graphics, video and audio, and other forms of customization – all done through html
Data is stored on web servers, anyone with a computer and an internet connection can access information.
Documents can be accessed over the Internet using a web browser, such as Internet Explorer or Mozilla Firefox. Using html anyone can also create a web page and upload it to a web server that they have access to.
Introduction to HTML Spring 2009

6. Introduction to HTML Spring 2009
Web Servers
Computers that house the files
Server
The Process
Create an html file using a text editor or web page creation software
Upload the files to a web server – you will be uploading to the UH web server
Anyone on any computer anywhere can access your pages once they are uploaded and the permissions are set – as long as they have the correct url
You can upload HTML files to Web server (FTP)
Other computers request pages (download) through the server (HTTP)
Introduction to HTML Spring 2009

7. Uploading vs Downloading
The process of uploading and downloading is a circular process
First files need to be uploaded to a sever
Once there, files can be downloaded to a PC remotely
Introduction to HTML Spring 2009

8. Introduction to HTML Spring 2009
Web Page
An “HTML” file which contains both content (for people) and instructions (for computers)
Web page
Sound files
Video files
Image files
A web page consists of two parts
1. Is what you will be learning how to do in these sessions – write the html code that tells a web browser how to display the content
Introduction to HTML Spring 2009

9. Introduction to HTML Spring 2009
Creating Web Pages
A webpage can be written in:
HTML code
PHP code
JAVA script
Other!
We will be working specifically with html code
Learning PHP and JAVA is much more complicated and requires a basic knowledge of html
Introduction to HTML Spring 2009

10. HTML – Hypertext Markup Language
Programming language
Used to create Web pages
Hypertext
Markup = the “tags” that you add to the content
Language
HTML is a programming language – specific rules that tell an internet browser how to display information – colors, size, font, orientation
Consists of Hypertext = text that includes links, etc Markup = the “tags” that you add to the content Language = you are communicating with the browser!
It is basically instructions (for another computer) about how your webpage should look (for people)
Introduction to HTML Spring 2009

11. Introduction to HTML Spring 2009
Browsers
Software to view Web pages
Understand programming languages (read the instructions)
Display what is programmed
Internet Explorer
Firefox
Even though the language is the same and the instructions are the same – different web browsers can interpret those instructions differently
It is important to “check” your web pages in different browsers – especially if you are submitting assignments online for an instructor.
Opera
Safari
Introduction to HTML Spring 2009

12. Introduction to HTML Spring 2009
Editors
Software used to write HTML code
Text Editors
Text Editors with Features
Advanced Editors
Text Editors
Notepad, Wordpad, SimpleText, TextEdit
There are various methods of creating web pages
Text Editors - Notepad, Wordpad, SimpleText, TextEdit
Text Editors with Features - Homesite, BBEdit, Arachnophilia
Advanced Editors – Macromedia Dreamweaver, Microsoft Frontpage These are expensive programs – you would most likely use one of these if you were managing a web site for an organization
We will be using plain text editors for different reasons 1. everyone has access to these with their operating system
2. these are the best way to learn basic html
3. the LIS 670 class requires that you use basic html for your assignments
Introduction to HTML Spring 2009

13. URL – Uniform Resource Locator
www2.hawaii.edu/ ~yokokudo/ index.htm
a b c d
a: Protocol
b: Domain name (server name)
c: Directory name (the space in the server reserved for you)
d: File name
On the Internet "protocol" usually refers to a set of rules that define an exact format for communication between systems.
For example the HTTP protocol defines the format for communication between web browsers and web servers
The SSL protocol defines a format for encrypted communications over the Internet. This protocol would have https instead of http
Domain name is the name of the web server
Directory name is the name of your space on the UH web server
File name is the name of the file that you have stored within your directory
Introduction to HTML Spring 2009

14. URL – Uniform Resource Locator
www2.hawaii.edu
~yokokudo
601
694
bib.plan.htm
pathfinder.htm
Graphical representation of your web space in relation to the UH web server
Introduction to HTML Spring 2009

15. Change the permissions Plan and organize content
Exercise 1
Set up your web site
Create a basic page
Change the permissions
Plan and organize content
Set up your web site – create your space and get your url
Create a basic page and upload it to your web space. This page will be modified in later sessions so don’t feel bad if there isn’t really any content on there.
Permissions need to be set so that others can view your pages. If you do not do this users (including yourself) will get a message stating that they are not authorized to access your page.
It is important to try and keep your pages organized in a way that makes it easy for you to find content. This is not an issue now but will be once you start adding a lot of content. It’s best to do this from the start and be in the habit of organizing.

16. Introduction to HTML Spring 2009
Your URL (Home Page)
Set up your space on the UH server!
URL…
Hands on session – move to the computer workstations
Go to page 4 of the hand out
(Instructor: Open SSH on the PC and show on overhead)
This area needs to be expanded with discussion points
Introduction to HTML Spring 2009

17. Introduction to HTML Spring 2009
Create
To establish your space on the UH server and create a home page:
        Go to
1 Sign in with your UH username and password.
2 Under “Personal Home Page Options” click on the link “Create Home Page.”
3 Put in a title, choose a logo, and type in some text in the comment box. Press continue. Write down your home page URL address (e.g.
4 Open a new browser window. Type in the address of your new homepage.
5 Once you make your homepage, the address will be username. Notice that index.html is not added to the end of the address, but rather it is implied.
This area needs to be expanded with discussion points
Introduction to HTML Spring 2009

18. Introduction to HTML Spring 2009
Permissions
Introduction to HTML Spring 2009

19. Introduction to HTML Spring 2009
Changing Permissions
Introduction to HTML Spring 2009

20. Keeping files organized
Good Housekeeping
Keeping files organized
What we mean by keeping files organized is keeping like with like – in library lingo this would be colocation

21. Introduction to HTML Spring 2009
Folders
Create 2 folders
Documents
Images
Create 3 folders to store your content – you may want to create more folders later on, depending on the content of your web pages
Documents – store all your word, pdf, etc documents here
Images – store all pictures here
When documents, files, etc are in a different location, the links that you create will be different.
Introduction to HTML Spring 2009

22. Organizing considerations Design considerations Content considerations
Best Practice
Organizing considerations
Design considerations
Content considerations

23. Design Considerations
Consider the following:
Audience?
Message?
Clear and simple content
Simple navigation and structure
Small file size
Avoid too many visual effects
We’re creating a website so that you can put your resume (or Curriculum vitae) up on the internet.
Audience- employers and faculty - Don’t put drunk pictures of yourself from Spring Break
Message- Hire me!
Content – keep all of the class syllabi on your site and on your PC – these are useful when you are writing your resume because it reflects what you have learned Navigation – people should know where they are going and what type of information they will find when they click on a link Think about sites that you don’t like or that are difficult to navigate. Learn from other peoples’ mistakes.
Introduction to HTML Spring 2009

24. Naming Conventions Jobs Employment Opportunity Job-o-Rama
Looking for job listings?
Jobs
Employment Opportunity
Job-o-Rama
Obvious Less obvious Requires thought
Steve Krug, Don’t Make Me Think!: A Common Sense Approach to Web Usability (Indianapolis, Ind. : Que, c2000), 14.
Introduction to HTML Spring 2009

25. Introduction to HTML Spring 2009
Navigation
Resume
Resume
What to click?
Steve Krug, Don’t Make Me Think!: A Common Sense Approach to Web Usability (Indianapolis, Ind. : Que, c2000), 14.
Introduction to HTML Spring 2009

26. Suggestions for practice
Think about the design of your page
Colors
Content
Images or graphics
Look at other web sites for ideas
These sessions will be much more useful to you if you practice and review between now and next week.
Look at sites that you like – note the links have some ideas. And if possible, find a picture and bring it with you.
Introduction to HTML Spring 2009