NetTech Solutions

Working with Web Elements

Lesson 6

NetTech Solutions

Agenda

• Understanding HTML• Looking at Word and Web

Pages• Using Some Advance Web

Features• Working with Frames• Understanding the Basics of

XML• Using XML Features in Word

NetTech Solutions

Understanding HTML

• A web site is a collection of pages written in HTML code that is stored on a Web Server.

• Structure of the pages look something like this:

NetTech Solutions

HTML tags

• Simple page viewed in Notepad

NetTech Solutions

Learn the Skill

• Open an HTML file– Page 126

NetTech Solutions

HTML and Pictures

• Pictures and other files are stored separately on the web server

NetTech Solutions

Adding Pictures

• You add pictures by using special code:<img src=“hole18.jpg”>

• Learn the Skill– Add a picture

• Page 130

NetTech Solutions

Cascading Style Sheets (CSS)

• This add features to the HTML code.

• Learn the Skill– Interpret a style sheet

• Page 131

NetTech Solutions

Looking at Word and Web Pages

• There are many web design tools available today.

• MS Word also allows you to edit web pages.

• MS Word allows you to save documents as web pages.

NetTech Solutions

Save as Web Page

NetTech Solutions

Problem with Word

• MS Word is not as efficient as FrontPage

• MS Word adds extra information

• FrontPage creates the tags needed in web page development.

NetTech Solutions

Learn the Skill

• Create a web page– Page 134

• Save a web page– Page 136

• Create a single file web page– Page 137

• Normally saving to a web server requires FTP services

• Publish a web page– Page 137 (optional)

NetTech Solutions

Using Some Advance Web Features

• In MS Word you have:– Setting web options– Adding hyperlinks– Inserting pictures– Attaching a style sheet– Use tables

NetTech Solutions

Set Web Options

• Tools, Options, General tab• Web Options

NetTech Solutions

Web Options

• Five tabs to manage web options:

NetTech Solutions

Hyperlinks

• Hyperlinks allow users to move from page to page or to different web sites.

NetTech Solutions

To Insert a Picture

• Picture properties allow you to manage your pictures

NetTech Solutions

Pictures

• The compress button lets you manage the size of your picture

NetTech Solutions

Cascading Style Sheets (CSS)

• Cascading Style Sheets are managed through Tools, Templates and Add-ins

NetTech Solutions

Learn the Skill

• Access and change web options– Page 139

• Insert Hyperlinks– Page 140

• Insert pictures– Page 142

• Apply CSS– Page 143

• Insert a table– Page 144

NetTech Solutions

Working with Frames

• Frames are really more than one web page combined

NetTech Solutions

Learn the Skill

• Look at a typical frames page– Page 146

• Create a frames page– Page 147

• Set Properties on a frames page– Page 148

• Links inside a frames page– Page 150

• Link to non-frame pages– Page 152

NetTech Solutions

Understanding the Basics of XML

• XML is Extensible Markup Language

• The organization that oversees XML is W3C or the World Wide Web Consortium

• Get more information fromhttp://www.w3c.org

NetTech Solutions

XML Data Tags

• They are similar to HTML• Example note.xml file

NetTech Solutions

Learn the Skill

• View XML data file– Page 155

NetTech Solutions

Using XML Features in Word

• Note that saving as XML is not creating an XML system; instead, it is a way of turning a Word document into an XML data file so that it could be used in different programs or systems.

NetTech Solutions

Learn the Skill

• Save a document as XML and view it.– Page 160

• Using Transforms with Word– Page 162

• Applying a transform – Page 164

• Using Schema– Page 166

• Adding data to an XML file– Page 168

NetTech Solutions

Summary

• Understanding HTML• Looking at Word and Web

Pages• Using Some Advance Web

Features• Working with Frames• Understanding the Basics of

XML• Using XML Features in Word

NetTech Solutions

Evaluations

• Now is the time to fill out the online Evaluation for the course.