1 / 23

HTML Authoring and Web Publishing

HTML Authoring and Web Publishing. HTML Authoring Tools/Editors. Web Publisher. External Applications Non-HTTP objects. Minder Chen, Ph.D. mchen@gmu.edu. CGI: Common Gateway Interface. Web Server. Web Browser. Internet Global Reach Broad Range. Client. Web Master.

morrie
Download Presentation

HTML Authoring and Web Publishing

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. HTML Authoring and Web Publishing HTML Authoring Tools/Editors Web Publisher External Applications Non-HTTP objects Minder Chen, Ph.D. mchen@gmu.edu CGI: Common Gateway Interface Web Server Web Browser Internet Global Reach Broad Range Client Web Master End User Server

  2. Key Elements of Web • Hypertext: Non-linear links to anchors of the same document, or to different documents on the same or different web site. • Using HTML (HyperText Markup Language) links and anchors • Relying on URL (Uniform Resource Locators) addressing scheme • Multimedia: graphics, video, sound, etc. • Web browser can access networked hypermedia. • Hypermedia access of the web browser is facilitated by helper applications, plug-ins, or document viewers. • Network: Global reach and "Universal" access • Based on TCP/IP protocol.

  3. Client-Server Model of http 1 • Requesting a document via a URL address • Connection open helper app helper app helper app helper app helper app Web Site Web Server Internet or Intranet Web Client • Web contents • HTML documents • Images • Animation • Video clips • Sound bites • Java applets • Java Scripts • CGI scripts • Database access 2 Static • Returning MIME-compliance document • Connection close Dynamic MIME: Multipurpose Internet Mail Extension

  4. HTTP • HTTP: HyperText Transfer Protocol • Characteristics: • Runs on top of TCP/IP • Has a comprehensive addressing scheme, i.e. URL • An extensible and open representation for data type, using MIME header • Has a stateless protocol. There is no memory between client connections. • Is efficient • Is portable • Possible extensions, Secure HTTP (SHPPT), SSL, HTTP-Next Generation

  5. The Extended Framework of WWW HTML Authoring Tools/Editors External Applications Non-HTTP objects Web Designer & Publisher • ColdFusion, • CGI (Perl) • ASP & ASP.NET • JAVA Servlet • Java Server Pages • Java Applet • JavaScript Web Programmer Web Browser Internet Global Reach Broad Range Web Server Client Web Master End User

  6. <html> <head> <title> HTML Sampler Web Page </title> </head> <body> <h1>HTML Sampler</h1> <img src="eyes.gif"><br> <b> List: </b> <ul> <li> Item 1 <li> <font size=+2>Item 2</font> <li> <i>Item 3</i> </ul> <table border=1> <tr> <th> Name</th> <th>Speciality </th> </tr> <tr> <td> Minder Chen</td> <td>MIS </td> </tr> <tr> <td> Justin Chen</td> <td>Aerospace </td> </tr> </table> <p> A sample of a form: <form method="post" action="http://hoohoo.ncsa.uiuc.edu/cgi-bin/post-query" > Name: <input type="text" size=20> <br> <input type="checkbox" name="html" value="YES"> Know HTML <br> <b><input type="submit" value="Submit your data"></b> </form> <hr> Developed by <a href="http://www.erols.com/aitc/"> Advanced IT Consulting</a> </body></html> image list table form link

  7. Anatomy of a Tag <H1 ALIGN="CENTER"> HTML Tutorial </H1> <H1 ALIGN='CENTER'> HTML Tutorial </H1> <H1 ALIGN=CENTER> HTML Tutorial </H1> <H1 ALIGN="CENTER" > HTML Tutorial </H1> Attribute=value Closing tag Opening tag Element

  8. Solution: Create a Web Page AITC Web Site • Company Introduction • Products • How to Contact us • Online HTML Resources Developed by Advanced IT Consulting contact us at aitc@erols.com Save it at c:\temp\index.htm <html><head><title>Advanced IT Consulting</title></head><body> <h1>AITC Web Site</h1> <ul> <li>Company Introduction <li>Products <li>How to Contact us <li>Online HTML Resources </ul> Developed by Advanced IT Consulting <br> Contact us by email at aitc@erols.com </body></html>

  9. Class Project C:\temp\index.htm • AITC Web Site • Company Introduction • Products • How to Contact us • Online HTML Resources • Developed by • Advanced IT Consulting contact • us at aitc@erols.com profile.htm AITC [Home | Intro | Product | Contact] AITC Introduction AITC is ….. Guest Book Entry: Name: Know HTML contact.htm product.htm • [Home | Intro | Product | Contact] • AITC Employees • Minder Chen • Bruce Johnson • Terry Smith • Minder Chen • 703-334-4566 • [Index] • Bruce Johnson • 703-334-4577 • [Index] Product Listing ID Name Price 100 TV $250 200 PC $999 210 XY $234 [Home | Intro | Product | Contact] Resume Submit Web Site Home Page Web Page

  10. Hypertext and Links • Introduction to hypertext • Intra-document Links and Anchors • Inter-document Links • URL • Images and Inline image • Image links • Image map

  11. Intra-document (Internal) Hypertext Links Intra-document hyperlink links Section 1: aaa This is section 1 ... Back to the Table of Content Section 2: bbb This is section 2 ... Viewing area of the document Table of contents Section 1: aaa Section 2: bbb Section 3: ccc

  12. Inter-document (External) Hypertext Links Document1 ... Link to document 2 ... Document2 ... ... Link to Section D of Doc3 ... ... A B C D an image map link an image link Document2 ... ... Section D ... ... Link to Document1 ... ... Toolbox Document Hammer ... Screw Driver ....

  13. Hypertext Links • A hypertext link is a pointer pointing to another document or another part of the current document. • These linked documents can be on the same WWW server or on WWW servers distributed globally. • Hypertext links are represented as a purple color and underlined texts, or as a graphic object (inline graphics). When you move the mouse cursor over a hypertext link, the mouse cursor will change from a pointer to a pointing hand. • You may useImage Maps such that different parts of the graphic representing links to different documents. Anchor: <a name="anchor"></a> Hyperlink: <a href="URL#anchor">Hot words</a>

  14. Linking and Anchoring y.htm x.htm <html> … <body> <h1>Section 1</h1> … <a href="#sec2"> Go to Section 2</a> … … <a name="sec2"></a> <h1>Section 2<h1> … </body> </htm> <html> … <body> … <a href="y.htm">Top of y</a> … … <a href="y.htm#sec2"> Section 2 of y</a> … </body> </htm>

  15. Example: Internal Link <ul> <li> <a href="#minder">Minder Chen</a> <li>Bob Johnson </ul> <a name="minder"></a>Minder Chen<br> 703-999-8888<br>

  16. External Link Using Relative URL index.htm Contact <a href="contact.htm#johnson">Bruce Johnson</a> for web problems. contact.htm <a name=" johnson "></a> Bruce Johnson<br> 703-334-4577<br>

  17. Contact.htm <html><head><title>AITC Contact Information</title></head> <body><a name="top"><a><h1>AITC Contacts</h1> <ul> <li><a href="#chen">Minder Chen</a> <li><a href="#johnson">Bruce Johnson</a> <li><a href="#smith">Robert Smith</a> </ul> <hr width=6> <a name="chen"></a> Minder Chen<br> 703-334-4566<br> [ <a href="#top">Index </a>] <p> <a name="johnson"></a> Bruce Johnson<br> 703-334-4577<br> [ <a href="#top">Index </a>] <p> <a name="smith"></a> Robert Smith<br> 703-334-5555<br> [ <a href="#top">Index </a>] <p><br><br><br><br><br><br><br><br><br><br><br><br> </body></html>

  18. Use a Relative URL • Examples: • <a href="http://www.aitc.com/~mchen/fileX.htm"> Another file in the same directory</a> • Can be written as <a href="fileX.htm">Another file in the same directory</a> • <a href="subdir/fileY.htm">Another file in the subdirectory under current document's directory</a> • Reasons to use relative URLs • Less typing is required to enter them. • If you move all the files to a different location but keep the same directory structure you don't have to revise the URLs. • The same file referred to by a relative URL can be accessed by different schemes (for example both 'http' and 'ftp').

  19. Document Directory Structure Web document root y.htm (in the html folder) <a href="/html/y.htm">Root relative path</a> <a href="../y.htm">Document relative path</a> x.htm (<a href="x.htm">in the same folder</a>) 10_link.htm (Current Document) 10_test.htm (<a href="webpub/10_test.htm"></a>) oracle.htm (<a href="../../nvcc/oracle.htm"></a>

  20. URL:Uniform Resource Locator • Uniform Resource Locator: A standard method of identifying any document or resource on the Internet. • The port number can generally be omitted. The default http port name is 80. Unless someone tells you otherwise, leave it out. • In http, if filename is omitted, a default file such as index.html may be retrieved. • http://www.aitc.com/mydoc/ • http://www.aitc.com:80/mydoc/index.html • Directory path name may be case sensitive.

  21. Resource Types • Resource types: • http: A file on a World Wide Web server • ftp: A file on an anonymous FTP server • mailto: Send an e-mail to an e-mail address • file: A file on your local system • gopher: A file on a Gopher server • WAIS: A file on a WAIS server • news: An Usenet newsgroup • telnet: A connection to a Telnet-based service • More examples: • ftp://ftp.ncsa.uiuc.edu/Web • gopher:make.up.something • news:comp.databases.oracle • mailto:aitc@erols.com • telnet://osf1.gmu.edu Send an email (aitc@erols.com) to <a href="mailto:aitc@erols.com"> Minder Chen</a>

  22. Tables: <TABLE > </TABLE> <HTML> <HEAD> <TITLE> Tables </TITLE> </HEAD> <H3>Tables </H3> <BODY> A basic table that has three columns and two rows. <TABLE BORDER> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE> </BODY> </HTML> • TD: Table Data • TR: Table Row • TH: Table Header (Header Cell)

  23. Product.htm <HTML><HEAD><TITLE> AITC Products </TITLE></HEAD> <BODY>Product Table <TABLE BORDER=3> <TR><TH>ID</TH> <TH width=150>Name</TH> <TH >Price</TH> <TH>Comment</TH></TR> <TR><TD>PC100</TD><TD>Compaq Computer</TD><TD align=right>$2,000</TD> <TD><a href="http://www.compaq.com/">Compaq's Web Site</a></TD> </TR> <TR> <TD>TV25</TD> <TD>25 " Sony TV</TD> <TD align=right>$300</TD> <TD>&nbsp;</TD> </TR> <TR valign=top> <TD>Pet001</TD> <TD>Little Lion</TD> <TD>$50</TD> <TD><img src="slion.gif"></TD> </TR> <TR><TD colspan=4>10% discount off the list price today</TD></TR> </TABLE> </BODY></HTML> • TH: Table Header (Header Cell)

More Related