Chapter 2 Web Page Elements Chapter 2 Web
Chapter 2 Web Page Elements
Chapter 2 Web Page Elements Overview • Overview of web elements • HTML basics • Color Formats • Image Format • Multimedia Formats • Interactive Formats
Chapter 2 Web Page Elements • HTML coding by hand • Contrasting colors in text and background • Best format for a given image • Images and Identity • Multimedia such as Audio, Video, and Animation • Interactive elements such as HTML forms, Java. Script scripts, PDF forms, Java Applets, and Shockwave files.
Chapter 2 History of HTML and W 3 C • 1961 - HTML • 1994 – HTML 2. 0 • 1996 – HTML 3. 2 • 1997 – HTML 4. 0 • 1999 – HTML 4. 01 • Today – XHTML • See http: //w 3 c. org/
Chapter 2 HTML and its Flavors • HTML – Hyper Text Markup Language • SGML – Standard Generalized Markup Language • XML – Extensible Markup Language • XHTML - Extensible Hypertext Markup Language • DHTML - Dynamic Hypertext Markup Language
Chapter 2 HTML Basics (Hierarchical Model) • HTML is structured in hierarchical order • Organized in hierarchical fashion such as File management in computer • DOM – Document Object Model
Chapter 2 HTML Basics (DOM) DOM standards for web browsers: ●Standardization method of HTML elements ●Standardization of how elements work harmoniously together ●Standard interface for making elements do what we want them to do no matter the browser or platform
Chapter 2 HTML Basics (Structure) • Basic structure <html> <head><title>…</head> <body>…</body> </html> • Syntax of the HTML language –Behind the scene tags –On screen tags
Chapter 2 HTML Basics (Structure) • • • Body Text Images Links Multimedia and Special Programmed Events (Shockwave, SWFs, and Java Applets)
Chapter 2 HTML Basics (Style) • Style in design –Background –Font –Link color • Cascading Style Sheet (CSS) –Inline Style –Embedded Style –Linked Style
Chapter 2 HTML Basics (Tag Guidelines) • All tags are contained within < and >. • No spaces between the <, >, and the tag text. Example: <html> • No spaces within tag text. • Both opening and closing tags should be used. • Use the same case for all tag text, preferably lowercase text. • Keep horizontal symmetry.
Chapter 2 HTML Basics (Elements, Attributes, and Tags) • Tags – Commands to do something • Elements – Set of tags with content in between • Attributes – Modify the tags
Chapter 2 HTML Basics (Nested Tags) • Nest one type of formatting inside another. • Bold and italicize a sentence. • Tags are closed in the opposite order that they were opened.
Chapter 2 HTML Basic (Image Tag) • Most used tag • Needs a source file • Should have “Alt” text • Close tag <img src=“guitar. gif” alt=“Guitar picture” /> • Image attributes
Chapter 2 HTML Basics (anchor tag) • Anchor tags and links <a>…</a> • href is an attribute – text between the opening and closing becomes a hypertext link • href=#identifier – Can refer to another anchor in the same document <a href=“document. html#glossary”>Glossary</a>
Chapter 2 HTML Basics (Table tag) • Layout control • Positioning of elements such as image and text • Basic tags <table>, <tr>, <td> • Basic table attributes: border, background, width, height, … • Basic cell attributes: align, valign, colspan, rowspan, …
Chapter 2 HTML Basics (lists) • Ordered List- Numbered List <ol><li>…</li></ol> • Unordered List – Bulleted List <ul><li>…</li></ul> • Definition List – Flush left <dl><dt>…</dt></dl>
Chapter 2 Basic HTML (frames) • Organization of the page layout • Fixed frames • Frameset and controlling HTML document • Similar to table having rows and columns
Chapter 2 Basic HTML (frames) • Frame tags –frameset –Noframes • Frame attributes –Frameborder –Marginwidth –Noresize –src -Marginheight -Name -Scrolling
Chapter 2 Basic HTML (Deprecated tags) • Tags not valid in HTML 4. 01 –applet –s –u –font –menu - center strike basefont dir isindex
Chapter 2 Color Formats • Subtractive Colors • Additive Colors • Computer Delivery Colors • Color Spaces • Hexadecimal Colors • Web-safe Colors
Chapter 2 Image Formats • Vector Images • Bitmap Images • Compression and algorithms • GIF – Graphics Interchange Format • JPG – Joint Photographic Experts Group
Chapter 2 Other Image Formats • EPS - Encapsulated Post. Script • TIFF - Tag Image File Format • BMP - Standard bit-mapped graphics • WMF - Windows Metafile Format • PICT – Originally an Apple Computer Format • PCX – Supported by most optical scanners
Chapter 2 Multimedia Formats • Analog • Digital Animation • Shockwave Flash • Video Formats –AVI –MOV –QT and VR –MPEG (MPEG-1, MPEG-2, MPEG-3, MPEG-4, MPEG-7)
Chapter 2 Multimedia Formats • Digital Audio • Audio Formats –WAV –AIFF –MIDI –MP 3 –AU (Sun Unix)
Chapter 2 Multimedia Formats • Streaming Media • Advantages of Streaming Media –Instant Play –Live Events –Long-Form Media –Multicasting –Random Access –Distribution Control
Chapter 2 Multimedia Formats • Added Streaming Types –Real Audio/Video –Windows Media –Quick. Time Streaming
Chapter 2 Interactive Elements (Server side) • • • CGI ASP Cold. Fusion PHP JSP SSI
Chapter 2 Interactive Elements • HTML Forms • PDF Forms • Form elements and attributes –Elements: <form>, <input>, <textarea>, <select>, <option>, </form> –Attributes: type, name, value, size, maxlength, checked, src, …
Chapter 2 Interactive Elements • Form Controls: –text –checkbox –submit –file –image - password radio reset hidden button
Chapter 2 Interactive Elements (Client side) • Java. Script • VBScript • ASP
Chapter 2 Interactive Elements (Java Applets) • Application written in Java • Can be accessed by HTML files • Are executed by browser or web server • Can be client or server side
Chapter 2 Java and Java. Script • Java is an application building language • Java. Script is a scripting language • Java. Script embedded in HTML • Java could be accessed via a browser • Java is a client- and server-side application. Java. Script is a client side scripting language
- Slides: 33