1. Lecture 11 Web Publishing I Introduction to Information Technology With thanks to Dr. Amy H. Zhang & Mr. Mark Clulow Dr. Ken Tsang 曾镜涛 Email: kentsang@uic.edu.hk kentsang@uic.edu.hk http://www.uic.edu.hk/~kentsang/IT/IT3.htm Room E408 R9

2. Outline  What is web publishing? And why?  Fundamentals of visiting a web page  Web content management and Web publishing applications  How to publish? Steps of website publishing Web publishing tools: FTP An introduction to HTML (Content)  Software Tools  Tips and Tricks

3. 3 What and Why  Web Publishing literally means 'to publish content or information on the Internet'  Content or information most commonly include: Words, Pictures, Music or Video Or Downloadable content – PDF, Doc,.ZIP etc.  Why: Web Publishing...is cost-effective (no print costs) ‏...is time-efficient (publish one time only) ‏...is expandable (add more when needed) ‏...is changeable (update or fix errors any time!) ‏

4. Visiting a Web Page

5.  WWW, Website, webpage, homepage and link  Browser - A software tool that issues the request for the web page we want and displays it when it arrives, e.g. IE, Netscape, Firefox  HTTP (HyperText Transfer Protocol)  Web server - The computer that is set up to respond to web requests  Web address - The core part of a Uniform Resource Locator, or URL, which uniquely identifies the page you want out of all of the pages stored anywhere in the world

6. Visiting a Web Page  Ports Any server machine makes its services available to the Internet using numbered ports. Clients connect to a service at a specific IP address and on a specific port. For example, if a server machine is running a Web server and an FTP server, the Web server would typically be available on port 80, and the FTP server would be available on port 21.

7. Applications Online Banking Account management University website Course website Discussion forum, BBS Personal website Personal profile Community sites Blogger Online album Music or Images to download Company website E-Commerce Products and Services Online consulting Customer feedback Email newsletters Online Media Newspaper TV program Video show …

8. Steps of Publishing  Plan Plan the website function and content Research and collect information Design the website logical structure Plan the website document structure Design the layout of web pages  Implementation Make webpage functional elements Layout implementation Assign works, modulate the webpage content

9. Steps of Publishing  Upload your website Find web hosting ( e.g. www.uic.edu.hk/~davetowey) Upload website (Ftp)  Website support Update contents e.g. announcements, assignments, notes, etc. Update version e.g. design, function, etc.

10. Plan Web Content Management  Idea of web development  Separate three aspects Function – UIC Profiles, email, Lecture Note Downloads, etc; for developers Content – “United International College”, “High Table Dinner”, etc; for editors & authors Design – font, color, layout, etc; for designers

11. Plan  Website Structure Chained Tree Combined: Used by most websites

12. Plan It is strongly recommended that you plan out a web site on paper first, to make sure you know where everything will go This can save hours of development and re- development time! Changes on paper are quicker and easier than later, once the site is being built 12

13. How to Upload Your Files  FTP (File Transfer Protocol) FTP software: FileZilla, LeapFTP, CuteFtp  Steps for web publishing: Start FTP software (e.g. FileZilla ) Set the website & account information Connect to the website Once authenticated (your username and password have been checked to be OK), you gain direct access to the HTTP server Upload your website files to server Disconnect the website

14. How to Upload Your Files  Set address: uic.edu.hk Username Password

15. How to Upload Your Files

16.  Upload the files in local directory to directory on server Drag and drop To /public-html The online files are same as those offline  Download files: Drag and drop  Disconnect

17. How to Upload Your Files

18.  Publishing our first file A photo ‘mario_kart.jpg’ from our ‘local’ computer in a folder ‘images’ to the folder ‘image’ on the ‘live’ server 18 How to Upload Your Files

19. 19 How to Upload Your Files http://www.uic.edu.hk/skin/web5/header_right_en.png From this address we can tell: This is an image of PNG file-type It is called 'header_right_en.png' It is in a folder (directory) called 'web5' THAT folder is in a folder called 'skin' The image is on the UIC HTTP Server Courtesy of UIC

20. 20 Implementation (HTML fundamentals) HTML stands for Hypertext Mark-up Language The most common file-type used to present information on-line Other file-types commonly found on-line include: MP3, JPG, GIF, PHP, CFM, ASP, HTM, PNG, AVI, MP4, SWF, ICO, ASPX... Components in a HTML file: Title, Heading, Body, Hyperlink, Table, Image, List, etc.

21. 21 Viewing a HTML File There are three ways to view a HTML file: 1.Off-line (Local) in a HTTP browser 2.On-line (live) in a HTML browser 3.Off-line (Local) in a HTML editor 1 and 2: different locations, same appearance 1 and 3: same locations, different appearance The local location or 'address‘: file:///C:/Documents%20and%20Settings/Admin/My%20Docu ments/html_first_look/index.html file:///C:/Documents%20and%20Settings/Admin/My%20Docu ments/html_first_look/index.html The live location: http://www.uic.edu.hk/~cmarkaccess /html_first_look/index.htmlhttp://www.uic.edu.hk/~cmarkaccess /html_first_look/index.html

22. 22 On-Line and Local View

23. 23 Locally in a HTML Editor We will now see a very different view of the file – this is the 'raw code' We can make changes to this file that will be visible off-line the second we 'save‘ it These changes will not be visible in the on-line files until we upload the file again via FTP

24. 24 Locally in a HTML Editor

25. 25 The HTML Code Every HTML file starts with ' ' and ends with ' ' There are then two main sections to the file:... At any point within the code we can (and should!) write comments, like so:

26. 26 The 'head' tag encapsulates, or wraps around a number of different elements, include: Our First Web Page! Optional Tags:... Dynamic content... Search Engine content... More on this later! Adding extra files

27. 27 The 'body' tag encapsulates, or wraps around a number of different elements too! These include: A Big Heading H x – Heading# Heading1 is the biggest Heading6 is the smallest This is a paragraph.... anchor or link an image a horizontal rule _____________

28. 28 The Anatomy of a Tag A tag contains a number of different elements Different tags have different elements The elements are made up of: Attributes – a characteristic Values – the amount, or word for that attribute <img src="http://www.uic.edu.hk/~cmarkaccess /images/mario_kart.jpg" title="Mario Kart" alt="Mario Kart" border="0" height="250px" width="246px" align="right">

29. 29 The Anatomy of a Tag - img The basic tag src = source – the location of the image title - good for search engines! alt = alternative text – displays if image doesn't show border, height and width are optional align – left, centre and right – also optional

30. 30 The Anatomy of a Tag - img Courtesy of Nintendo

31. 31 Some More Tags This is a paragraph. This text is bold! This is another paragraph. This text is emphasised, or 'italic'. This is a Big Heading This is another paragraph. This text is emphasised, or 'italic'. This is a paragraph. This text is bold!

32. 32 HTML Lists Two types of list: ordered lists ('ol') and unordered lists ('ul'). 'li' stands for list item This is a list item This is another item! 1. This is a list item 2. This is another item!

33. 33 HTML Lists This is a list item This is another item! This is a list item This is another item!

34. 34 Links 'a' stands for 'anchor' Some attributes of a link include: href – where to link to target – this window or a new window? title – appears when you move your mouse over the link name – create a bookmark in a document

35. 35 Links This is a link to Google

36. 36 Links – Absolute vs. Relative There are two types of 'href' value: An absolute link uses 'http://www.' to define the 'absolute' URL (Uniform Resource Locator / Location) http://www.uic.edu.hk/~davetowey/index.html the URL and file name can be found from anywhere on the Web, not just from a single website. Relative links specifies the name of the file to be linked to only as it is related to the current document

37. 37 Links – Absolute vs. Relative In our 'index.html‘, we place the code Click here to see the image! The 'href' value tells our browser to link to a file in a folder called 'images' – it already knows the first part – http://www.uic.edu.hk/~cmarkaccesshttp://www.uic.edu.hk/~cmarkaccess /html_first_look/ because it is the same as index.html, it is 'relative to' index.html

38. 38 More on Relative Links There's just one more thing The 'images' folder isn't in the 'html_first_look' folder, but in the 'root' folder (the first folder in our web space) ‏ Therefore we need to tell the browser to go back one folder and THEN look for the 'images' folder We do this with '../' <a href=”../images/mario_kart.jpg”... etc.

39. 39 More on Relative Links

40. 40 Code Review – Link Inserted Head Title Body Paragraph Image A Paragraph with a link

41. 41 Code Review – Link Inserted

42. 42 Adding A List We will add an unordered list which will act as a navigation system Home About Us Contact Us Here's how it looks: Home About Us Contact Us

43. 43 Lists Within Lists We will put an ordered list inside a list item to create a sub-item in our Main Menu About Us --> Tables --> About Us 1.Tables

44. 44 HTML Tables Tables are used to store tabular data Examples of tabular data include: Lists of staff members, Time tables, Quiz Results, etc.

45. 45 The Anatomy of a Table Staff Member Home Page Mark Clulow http://www.uic.edu.hk/~cmarkaccess

46. The Anatomy of a Table Yanyan Ji http://www.uic.edu.hk/~yyji 46 Staff MemberHome Page Mark Clulowhttp://www.uic.edu.hk/~cmarkaccess Yanyan Jihttp://www.uic.edu.hk/~yyji

47. 47 Exploring the Code... - Starts and ends our table... - Table Row – contains or tags... - Table Heading – for the tops of columns... - Table Data – The content for the table! Adding 'align="center"' to makes the table appear in the middle of the page Adding 'align="center"' to makes the content of that cell appear in the middle

48. 48 Spanning Columns & Rows 'rowspan' and 'colspan‘: multiple rows or columns UIC Staff here because of colspan! --> Computer Science Mark (link)

49. Spanning Columns & Rows here! --> Yanyan (link) English Dr. Dave Tower http://www.uic.edu.hk/~davetowey 49

50. 50 The HTML Output

51. 51 The HTML Output

52. 52 Dividing The Work By creating more html files, our web site goes from one page to more pages By planning your web site out on paper you can quickly and easily see what content is required and where it will appear Work can be divided amongst various members of a group. For example: Contact Page – we need our contact details About Us – we need an introduction here Links Page – someone needs to collect 15 links

53. Tips and Tricks  How to be a better web publisher Formatting and comments Align tags in HTML files with same indents Comments e.g. Emphasis the headings and make your website attractive Naming Separating each word in the filename with ‘_’ e.g. services_a, services_b File system structure Categorize your files and put them into sub-directories

54. Software Tools  Adobe Dreamweaver – The 1 st choice for designing advanced web pages, supporting dynamic web pages.  Adobe Flash – A tool for designing interactive multimedia animation  Adobe Fireworks – A tool for creating and optimizing images for the web and rapidly prototyping websites.

55. Resources and Applications  Tutorials and resources www.developerz.com www.w3schools.com  Applications Web forum software DiscuZ (free, China): www.discuz.comwww.discuz.com Invision power board: www.invisionboard.comwww.invisionboard.com Web wiz Forum: www.webwizguide.comwww.webwizguide.com Web email system: Open Webmail openwebmail.orgopenwebmail.org

56. 56 Summary  What is web publishing  Web publishing applications  Steps of website publishing  Web publishing tools: FTP  An introduction to HTML (Content)  Tips and Tricks on how to be a better web publisher  Software Tools