1 / 56

Lecture 11 Web Publishing I

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

gail-mccoy
Download Presentation

Lecture 11 Web Publishing I

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  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. 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. Visiting a Web Page • 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

  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. How to Upload Your Files • 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. How to Upload Your Files • 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

  19. How to Upload Your Files Courtesy of UIC • 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

  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. Viewing a HTML File • There are three ways to view a HTML file: • Off-line (Local) in a HTTP browser • On-line (live) in a HTML browser • 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%20Documents/html_first_look/index.html • The live location: http://www.uic.edu.hk/~cmarkaccess /html_first_look/index.html

  22. On-Line and Local View

  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. Locally in a HTML Editor

  25. The HTML Code • Every HTML file starts with '<html>' and ends with '</html>' • There are then two main sections to the file: • <head> ... </head> • <body> ... </body> • At any point within the code we can (and should!) write comments, like so: • <!-- this is a comment, for code-view only! -->

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

  27. <body> • The 'body' tag encapsulates, or wraps around a number of different elements too! These include: • <h1> A Big Heading</h1> • Hx – Heading# • Heading1 <h1> is the biggest • Heading6 <h6> is the smallest • <p> This is a paragraph. </p> • <a> ... </a>anchor or link • <img></img> an image • <hr /> a horizontal rule _____________

  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"></img>

  29. The Anatomy of a Tag - img • <img></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 widthare optional • align – left, centre and right – also optional

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

  31. Some More Tags • <p> This is a paragraph. <strong>This text is bold!</strong></p> • <p>This is another paragraph. <em>This text is emphasised, or 'italic'</em>.</p> • <h1 align=”center”>This is a Big Heading</h1> This is a paragraph. This text is bold! This is another paragraph. This text is emphasised, or 'italic'. This is a Big Heading

  32. HTML Lists • Two types of list: ordered lists('ol') and unordered lists('ul'). 'li' stands for list item • <ol><li> This is a list item </li><li> This is <strong>another item!</strong></li></ol> This is a list item This is another item!

  33. HTML Lists • <ul><li>This is a list item</li><li>This is <em>another item!</em></li></ul> • This is a list item • This is another item!

  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. Links • <a href=“http://www.google.com”>This is a link to Google</a> • <a href=“http://www.google.com” title=“Google”>This is a link to Google</a> • <a href=“http://www.google.com” title=“Google” target=“_blank”>This is a link to Google</a> This is a link to Google

  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. Links – Absolute vs. Relative • In our 'index.html‘, we place the code • <a href="images/mario_kart.jpg" title="Mario Kart picture">Click here to see the image!</a> • 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/~cmarkaccess • /html_first_look/ • because it is the same as index.html, it is 'relative to' index.html

  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. More on Relative Links

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

  41. Code Review – Link Inserted

  42. Adding A List • We will add an unordered list which will act as a navigation system • <ul><li><a href="index.html" title="Home Page">Home</a></li><li><a href="about_us.html" title="About Us">About Us</a></li><li><a href="contact.html" title="Contact Us">Contact Us</a></li></ul> • Here's how it looks: • Home • About Us • Contact Us

  43. Lists Within Lists • We will put an ordered listinside a list item to create a sub-item in our Main Menu • <ul><!-- home link is here --><li><a href="about_us.html" title="About Us">About Us</a> <!-- now we will insert an ordered list inside a <li> --><ol><li><a href="tables.html" title="More about Tables">Tables</a></li></ol><!-- now we have finished this list, we can close the </li> --></li><!-- contact link is here --></ul> • About Us • Tables

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

  45. The Anatomy of a Table • <table border="1"><tr><th> Staff Member</th><th> Home Page</th></tr><tr><td align="center">Mark Clulow</td><td><a href="http://www.uic.edu.hk/~cmarkaccess" target="_blank">http://www.uic.edu.hk/~cmarkaccess</a> • </td> </tr>

  46. The Anatomy of a Table <tr> <td align="center">Yanyan Ji </td><td> <a href="http://www.uic.edu.hk/~yyji" target="_blank">http://www.uic.edu.hk/~yyji</a> </td></tr> </table>

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

  48. Spanning Columns & Rows • 'rowspan' and 'colspan‘: multiple rows or columns • <table border="1" align="center"> <tr> <th colspan="3">UIC Staff</th> <!-- Just one <th> here because of colspan! --> </tr> <tr> <tdrowspan="2" align="center"><b>Computer Science<b></td> <td align="center">Mark</td> <td>(link)</td> </tr>

  49. Spanning Columns & Rows <tr> <!-- rowspan means that we only need two <td> here! --> <td align="center">Yanyan</td> <td>(link)</td> </tr> <tr> <td align="center"><b>English</b></td> <td>Dr. Dave Tower</td> <td> <a href=http://www.uic.edu.hk/~davetowey> http://www.uic.edu.hk/~davetowey</a> </td> </tr> </table>

  50. The HTML Output

More Related