1 / 23

HTML Authoring and Web Publishing

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 anchorsRelying on URL (Uniform Resource Locators) addressing scheme Multimedia: graphics, video, sound, e

verna
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 Minder Chen, Ph.D. mchen@gmu.edu

    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

    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

    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>

    7. Anatomy of a Tag <H1 ALIGN="CENTER" > HTML Tutorial </H1>

    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

    9. Class Project

    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

    12. Inter-document (External) Hypertext Links

    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 use Image Maps such that different parts of the graphic representing links to different documents.

    14. Linking and Anchoring

    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

    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

    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

    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>

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

More Related