Lecture 3 Creating a Web Page with HTML

Objectives §Hypertext Document in WWW p §The HTML language p l Definition l Web browsers and HTML l Versions of HTML l Tools for creating HTML documents l HTML syntax l Examples of HTML tags l Basic tags

Objectives (con’t) §Creating: p Headings Paragraphs Lists Character tags Special characters Horizontal lines Graphic images §Exercises

Hypertext Document in WWW A hypertext document is an electronic file that contains elements that a user can select, usually by clicking a mouse, to open another document. Liner VS. hypertext document

Hypertext Markup Language (HTML) §Definition: Language used to create and format Web pages, using a set of special codes, called tags §HTML doesn’t describe how text looks §HTML uses a code that describes the function the text has

Web browser & HTML §A Web browser interprets the codes to determine a document’s appearance §Different browsers might display a document differently

An Example: A HTML file displayed by two browsers [ref.] [ref.]

Why different browsers display a web document differently ? §Portability l different computer platforms l different types of fonts supported e.g. Arial, Gothic l different I/O devices: chunky teletypes high-end workstations non visual media such are speech and Braille §Advantage: frees web page authors worrying about compatibility on different computers and operating systems

Why different browsers display a web document differently ? (con’t) §Speed l exact specification on how to display each character dramatically increase file size the time to transfer

Versions of HTML §HTML has a grammar or set of rules called syntax §The specifications or standards have been developed by a consortium of web authors, software companies and interested users (World Wide Web Consortium W3C) §Extensions are supported by some browsers to add new possibilities to HTML

Versions of HTML (con’t) §5 versions of HTML [ref.][ref.] l HTML 0.0 l HTML 1.0 l HTML 2.0 l HTML 3.2 l HTML 4.01

HTML 4.01 Adds support for style sheets, new features to tables and forms...

Tools for Creating HTML Documents §HTML documents: text files §Tools: l Text editor e.g. MS note pad l HTML convertor e.g. MS Word l HTML editor l Other design tools: MS FrontPage, Macromedia Dreamweaver

HTML syntax §2 elements: l Document content Parts that the user sees l Tags HTML codes that indicate the document content

HTML syntax (con’t) Document Content §e.g. Mary Taylor §A tag contains l brackets ( ) that enclose the tag name l properties (optional) additional information that defines the tag’s appearance §Document content: parts the user sees

HTML syntax: Two-side tags §Two-sided tags l require both opening and closing tags e.g. Mary Taylor opening tag: tells the browser to turn on the feature and apply it to the document content that follows closing tag: turns off the feature

HTML syntax: One-sided tags §require only the opening tag e.g., Graduated May, M.A. International Grade Point Average: 3.5 overall, 3.9 in major

HTML syntax characteristics §Tags are NOT case sensitive l H1=h1 §HTML ignores extra blank space, blank lines or tabs

HTML syntax characteristics (con’t) The following HTML statements are the same: To be or not to be. That is the question. To be or not to be. That is the question.

Examples of HTML tags

Examples of HTML tags (con’t)

Basic Tags (example) Displayed at the title line : surround information about the Web page : surround the part that appears in the browser

Example Result: Basic Tags

Creating Headings §6 levels § Heading text where y is a heading numbered 1- 6

Example: Headings

Example: Creating headings

Example Result: Headings in the browser

Creating a paragraph §Syntax: l text

Example: paragraph text (no tag)

Example Result: Text Not separated into paragraphs

Example: tag for paragraphs Satellite Technician (Front Range Media Inc ): Monitored satellite uplink/downlink procedures to assure quality video transmissions. Aided technicians with transmission problem. Associated in the assembly and maintenance of uplink facility. Technical Assistant(Mountain View Bank ):Managed data cessing system. Handled user requests anf\d discussed programming option Managed delivery service Salesperson(Computer Visions 1991): Sales and customer support in computers and electronics. Managed commercial accounts in Mountain View and Crabtree locations.

Example result: paragraphs with tag

Creating lists: Ordered list §List in numeric order Example: Graduated May, M.A. International Telecommunications Grade Point Average: 3.5 overall, 3.9 in major Dean’s List: September 1994-May 1996 Member, Phi Alpha Omega Honor Society Result: 1.Graduated May, M.A. International Telecommunications 2.Grade Point Average: 3.5 overall, 3.9 in major 3.Dean’s List: September 1994-May Member, Phi Alpha Omega Honor Society

Creating list: Unordered list §List in which list items have no particular order. Example: Graduated May, M.A. International Telecommunications Grade Point Average: 3.5 overall, 3.9 in major Dean’s List: September 1994-May 1996 Member, Phi Alpha Omega Honor Society Result:  Graduated May, M.A. International Telecommunications  Grade Point Average: 3.5 overall, 3.9 in major  Dean’s List: September 1994-May 1996  Member, Phi Alpha Omega Honor Society

Character tags §Definitions: §Character tag: A tag that is applied to an individual character §Logical tag: Indicates how you want to use text, not necessarily how want it displayed §Physical tag: Indicates exactly how characters are to be formatted

Common Logical tags §It indicates how you want it displayed.

Example: Logical tags

Common Physical tags

Example: Physical Character tags

Example: Applying character tags

Example result: Applying character tags

Special characters

Example: Special characters 11 Kemper Ave. &#183 Lake View, CO &#183 ( Result:

Horizontal lines §

Example: Horizontal line §After the end of Mary’s address line, press Enter §type §Result:

Inserting a graphic §Two types l Inline image l External image

Inline image §appears directly on the Web page §loaded when the page is loaded §2 types supported by all browsers: l GIF (Graphical Interchange Format) l JPEG (Joint Photographic Experts Group) §Syntax: e.g.

External image §Not displayed with the Web page §Browser must have a file viewer §e.g. Shockwave