HTML Authoring and Web PublishingCourse OutlineReferencesThe Architecture of WWWInternet: The Virtual Network & Internal StructureHosts on the InternetDomain NameURL: Universal Resource LocatorKey Elements of WebClient-Server Model of httpHTTPThe Extended Framework of WWWIntroduction to HTMLAnatomy of a TagHTML Tags: Document StructureA Simple HTML DocumentBasic Tools and Editing ProcessSolution: Create a Web PageSample Web SiteHTML Elements' General SyntaxBasic Elements of HTML CodingHeadings: Level 1 to 6Slide 24Physical and Logical Styles in HTMLLogical StylesPhysical StylesLogical and Physical StylesParagraphParagraph: To Break or No To BreakHorizontal Lines <HR>ListingUnordered Lists: <UL>, <LI>, </UL>Ordered Lists: <OL>, <LI>, </OL>Document Meta TagsExercise: Contact Page contact.htmHypertext and LinksIntroduction to HypertextIntra-document (Internal) Hypertext LinksInter-document (External) Hypertext LinksHypertext LinksAnchor textLinking and AnchoringExample: Internal LinkExternal Link Using Relative URLContact.htmUse a Relative URLDocument Directory StructureRelative URLLinks Between DocumentsCreating Links from My Favorites in IEURL: Uniform Resource LocatorResource TypesDefining Absolute Hyperlinks: <a href="URL"> Hot words </a>Easy to Use and NavigateInclude Inline ImagesALIGNDownload Image FilesExample<img> syntaxUsing IMG TagImage File TypesExamples of Using ImagesHTML CodeLink to an External Image FileGraphic and Image ToolsTables: <TABLE > </TABLE>Product.htmMore Table ExamplesFormsProfile.htm: First VersionUsing Server-Side Script to Process User Inputs via FormForm ElementsINPUT TagSample Form HTML PageProfile.htm: HTML SourceContinue…Send Form Data to an E-Mail AccountHTML ExtensionsClient Pull Using the META TagPreventing a Document From Being CachedBGCOLORRGB ColorColor Name<font> and <basefont>Image-Tiled BackgroundFree Web HostingClass Project Solutionindex.htmcontact.htmcontact.htm (continued)resource.htm (Graphics examples)product.htmprofile.htmtable.htm (background Image)HTML Authoring and Web PublishingMinder Chen, Ph.D. [email protected] BrowserClientWeb Server HTML Authoring Tools/EditorsEnd UserWeb MasterWeb PublisherServerExternal ApplicationsNon-HTTP objects CGI: Common Gateway InterfaceInternet Global Reach Broad Range© Minder Chen, 1996-2011HTML & Web Publishing - 2Course Outline•Introduction to World Wide Web •HyperText Markup Language: Basic Tags•Publishing on the Web •Anchors, Links, and Uniform Resource Locator•Images and Image Links•Tables •Forms •CSS: Cascading Style Sheet •Class Project Solutions© Minder Chen, 1996-2011HTML & Web Publishing - 3References•Laura Lemay & Colburn, Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day: Includes New HTML5 Coverage (6th Edition), SAMS, 2010.•HTML Online Resources: –http://www.w3schools.com/html/–http://www.htmlcodetutorial.com/–http://www.htmlcodetutorial.com/quicklist.html–Steve Krug, Don't Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition, 2006–Web Style Guide, http://webstyleguide.com/wsg3/index.html –Guide to Accessing Student Web Space at http://www.csuci.edu/it/web/studentwebspace.htm –Guide to Editing Student Web Pages using Dreamweaver at http://www.csuci.edu/it/web/documents/HowToCreateAStudentWebSiteUsingDreamweaver-v4.doc–Creating a Student Website Using FrontPage at http://www.csuci.edu/it/web/documents/CreatingStudentWebSitesUsingFrontPage-v5.doc© Minder Chen, 1996-2011HTML & Web Publishing - 4The Architecture of WWWWeb BrowserClientWeb ServerEnd UserHTTPTCP/IPHTML documentsInternetor IntranetBenefits of the Web as a delivery mechanism: •Thin clients•Platform independence•Easy for deployment/upgrade•Based on standards© Minder Chen, 1996-2011HTML & Web Publishing - 5Internet: The Virtual Network & Internal StructureComputerRouterA Regional NetworkInternetNAPISPLANNAP: National Access Point ISP: Internet Service ProviderTELCO© Minder Chen, 1996-2011HTML & Web Publishing - 6Hosts on the Internet•IP Datagram–Datagram Header•Source: 15.127.9.12 (IP Address)•Destination: 254.231.15.129•American Registry for Internet Numbers https://www.arin.net/ Router Total about 4.3 billion IP addresses.© Minder Chen, 1996-2011HTML & Web Publishing - 7Domain Name•DNS (Domain Name Server): Mapping the four octets (32-bit numeric) IP address (such as 217.156.3.14) to a domain name such as student.csuci.edu•http://www.godaddy.com for domain name registration edu uiuccsucicsvaxThe name of a host computer with an IP addressstudentFirst LevelSecond LevelCSUCI.EDUTop country domain name.us.tv (30M).md© Minder Chen, 1996-2011HTML & Web Publishing - 8URL: Universal Resource Locatorhttp://www.aitc.com:80 /mydir/mysubdir/index.htmlWebResourcePortNumberDomainNameDirectory / Virtual Directory PathFile Namehttp://www.aitc.com/mydir/mysubdir/•Default Port Number for WWW Service is 80•Default file names are defined by the web administrator, the default file names for IIS are: Default.asp and Default.htm•The web root is the physical directory path C:\InetPub\wwwroot\ that is mapped to the web site's URL without a directory path.© Minder Chen, 1996-2011HTML & Web Publishing - 9Key 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 HTTP which is built on top of the TCP/IP protocol.© Minder Chen, 1996-2011HTML & Web Publishing - 10Client-Server Model of httpWeb ServerWeb Client•Requesting a document via a URL address•Connection open•Returning MIME-compliance document•Connection close helper apphelper apphelper apphelper apphelper appWeb contents•HTML documents•Images•Animation•Video clips•Sound bites•Java applets•Java Scripts•CGI scripts•Database accessWeb SiteInternet or Intranet12StaticDynamicMIME: Multipurpose Internet Mail Extension© Minder Chen, 1996-2011HTML & Web Publishing - 11HTTP•HTTP: HyperText Transfer Protocol•Characteristics: –Runs on top of TCP/IP (Transmission Control