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 e-mail us if you have any questions. Session 1: Introduction to HTML Spring 2009

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

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

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

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

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

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

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

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

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

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

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

URL – Uniform Resource Locator http:// 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

URL – Uniform Resource Locator http://www2.hawaii.edu/~yokokudo/601/pathfinder.htm 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

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.

Introduction to HTML Spring 2009 Your URL (Home Page) Set up your space on the UH server! URL… http://www2.hawaii.edu/~[youruserID] 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

Introduction to HTML Spring 2009 Create To establish your space on the UH server and create a home page:         Go to http://www.hawaii.edu/account/ 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. http://www2.hawaii.edu/~yourusername). 4 Open a new browser window. Type in the address of your new homepage. 5 Once you make your homepage, the address will be http://www2.hawaii.edu/~your 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

Introduction to HTML Spring 2009 Permissions Introduction to HTML Spring 2009

Introduction to HTML Spring 2009 Changing Permissions Introduction to HTML Spring 2009

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

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

Organizing considerations Design considerations Content considerations Best Practice Organizing considerations Design considerations Content considerations

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

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

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

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