1.264 Lecture 12. HTML Introduction to FrontPage

Size: px

Start display at page:

Download "1.264 Lecture 12. HTML Introduction to FrontPage"

Grant Sherman
5 years ago
Views:

1 1.264 Lecture 12 HTML Introduction to FrontPage

2 HTML Subset of Structured Generalized Markup Language (SGML), a document description language SGML is ISO standard Current version of HTML is version 4.01 See for latest drafts, standards, discussions New features in HTML 4.0 standard Style sheets, internationalization, access for disabled, frames, improved tables and forms

3 Hypertext markup language (html) example <HTML> <HEAD> <TITLE> Welcome to the Aircraft Parts System </TITLE> </HEAD> <BODY> <H1> Welcome to the Aircraft Parts System </H1> This system handles orders for aircraft and balloon parts. We handle aircraft parts, and parts for all balloon manufacturers. We comply with the latest US regulations. <P> The use of this system is subject to <A HREF= MITRule.html> MIT rules and regulations. </A> </BODY> </HTML> (Aircraft1.html)

4 HTML Tags (e.g. <TAG>) never display but direct the browser Often in pairs (e.g. <TAG> and </TAG>) to delimit section Some tags have attributes (e.g. <A HREF=abc.html> </A>) HTML document begins with <HTML>, ends with </HTML> Two sections within document: HEAD and BODY Head has identifying information not displayed Body is displayed, with formatting: Paragraph <P> Header levels 1 through 6 <H1> through <H6> Line break or carriage return <BR> Anchor <A>, placed around text or graphics; used for hyperlinks

5 (Aircraft2.html) Tag examples Control appearance of page Not as precise as MS Word or other editors Intended for pages that can be viewed on machines with very different graphics capabilities. Tags discourage specific assumptions. Opening tag Closing tag Definition <EM> </EM> Emphasis (often italic) <STRONG> </STRONG> Strong emphasis (often bold) <VAR> </VAR> Variable <CITE> </CITE< Citation (of an article or book) <ADDRESS> </ADDRESS> Address (identifying info at bottom of doc) <CODE> </CODE> Computer code fragment (tags ignored) <I> </I> Italic (as well as other physical styles)

6 Tag examples, cont Font size and color: <FONT>, <FONT COLOR= name> Special characters: > is > Paragraph format: <H2 ALIGN=CENTER> text </H2> Preformatted text: <PRE> (lines up columns exactly, etc.) Horizontal lines: <HR WIDTH=80% ALIGN= LEFT> Lists: can be multi-level, etc. Ordered (numbered) <OL> Unordered (bulleted) <UL> Definition (indented) <DL> Tables: <TABLE>, <CAPTION>, <TR> (row), etc. (Aircraft3.html)

7 HTML Filenames Relative names (UNIX conventions) MITRule1.html same folder (directory) as current doc Laws/MITRule2.html in subfolder (subdirectory) of current doc../mitrule3.html in folder above current doc Absolute names (also UNIX) /MITRule4.html in root folder (Web root or local root) Document sections MITRule1.html#sec1 points to target tag (sec1) in same doc Sections defined by <A NAME=sec1> </A> Documents on other sites <A HREF= (Next page: Aircraft4.html)

8 Images <H1> Welcome to the Aircraft Distributor system </H1> <A HREF=aircraft.gif> <IMG SRC=thumbnail_aircraft.gif ALT= Aircraft parts services > </A> Welcome to the Aircraft Parts System This shows a small picture of the aircraft parts but allows the user to download the large picture The HREF can point to other documents about aircraft, carriers, etc. (Aircraft4.html)

9 Frames Subdivide main browser window into several panels Developed by Netscape, supported by Microsoft IE also Framesets assign initial URLs to each of the panels Example of 2 equal, side-by-side panels <HTML><HEAD> <TITLE> Two frames side by side </TITLE> </HEAD> <FRAMESET COLS=50%,50%> <FRAME SRC=Aircraft5.html NAME=graphics> <FRAME SRC= MITRule.html NAME=text> </FRAMESET> <NOFRAME> This document contains frames. You need a frame-enabled browser to view it. </NOFRAME> </HTML> (Aircraft5.html)

10 HTTP and HTML HTTP Is only direct form of interaction between browser and server Was an extremely perceptive extension of , ftp protocols by Tim Berners-Lee to enable Web browsers Request-response paradigm Connection made for each request/response pair Most popular protocol on Internet, fairly stable definition HTML Text description language, based on tags High level description rather than specific formatting HTML is static, which is not sufficient for Web applications Many extensions and changes (scripting, Java) for dynamic content

11 HTML forms Used as front ends to server programs Active Server Pages, Java Server Pages, servlets, Forms are user interface controls to collect data from user and transmit it to the server application program Control is a child window within a parent window or page Forms are most common user interface method Forms are placed on Web pages that can also have other elements JavaScript (totally different than Java language!) can be used with HTML forms to enhance their operation Java applets provide a richer user interface, are more complex and have security features. Not used much. All of these run on the browser and are user interface components

12 How HTML forms transmit data Forms allow a series of controls to be placed on the page Each control has a name and a value Entire form is associated with the URL of a server side program that will process the input data Form data is sent when user presses Submit button (control) Data is sent to URL as string of form: Name1=Value1&Name2=Value2& NameN=ValueN If data is sent with HTTP GET command, it is appended to end of GET string after a?: GET /Index.html?Name1=Value1 If data is sent with HTTP PUT command, it is sent after the blank line as the original string Server programs (ASP, JSP, servlet, etc.) have methods to extract the data from the string and use it in the program

13 HTML 4.0 tags for forms Tag Type Definition <FORM> Start a form <INPUT TYPE= text Single line of text entry password Single line password entry file File to upload, with Browse button checkbox Checkbox radio Radio button (option box) image Image acting as button hidden track user, store predefined input, etc. submit Submit button for form reset Button to restore default values <SELECT> List box or combo box <OPTION> Item in scrolling list or popup menu <TEXTAREA> Start multiple-line text entry field

14 FrontPage demo of HTML controls Start FrontPage File->New Web (must create on CEE server) Choose One Page Web (or other) Insert Form Insert Components on Form Save Preview in browser Add navigation using Format->Shared Borders (frames) Use top and left, include navigation buttons Go to Navigation view, drag pages into workspace Save each page before viewing in browser

15 FrontPage active pages Hover button Java applet Banner ad manager Java applet Marquee (scrolling text) MS HTML extension Search form Jscript Hit counter VB Script Video ActiveX component Animation Jscript Other ActiveX controls Other Java applets Additional support for: Secure sockets layer (SSL)

16 FrontPage Creates structure, layout of Web site Navigation window Organizes files and folders Folders window Imports and exports files File->Import, don t copy Tests and repairs hyperlinks Hyperlinks view, Tools->Recalculate Hyperlinks Administers access and security (sort of) Publishes completed Web site (move from local to server) Manages Web page creation Has wizards for initial Web site creation (somewhat helpful) Limited support for database access via Active Server Pages We will demo this in class later, and use it in homework 6

CHAPTER 2 MARKUP LANGUAGES: XHTML 1.0

WEB TECHNOLOGIES A COMPUTER SCIENCE PERSPECTIVE CHAPTER 2 MARKUP LANGUAGES: XHTML 1.0 Modified by Ahmed Sallam Based on original slides by Jeffrey C. Jackson reserved. 0-13-185603-0 HTML HELLO WORLD! Document