Web Development

unit -4

📘 Microsoft FrontPage: Introduction

A beginner-friendly web design tool by Microsoft with WYSIWYG support for creating websites
without coding.

✅ Use Cases (Easy & Very Short):

 Simple websites

 School projects

 Small business pages

⚠️Limitations (Easy & Very Short):

 No modern features

 Not for dynamic sites

 Stopped in 2006

1. Structured design and layout – Organized content

2. User-friendly interface – Easy to use

3. Custom formatting options – Style control

4. Web standards compatibility – Cross-platform

5. Content-design separation – Separate style/content

6. Manual & visual editing – Code + visual

7. Reusability – Repeat elements

8. Proper structure & hierarchy – Tag order

9. Visual control & interactivity – Look + interaction

10. Web/data utility – For web/data use

step to create a webpage in MS FrontPage:

creating an eBook using Microsoft FrontPage

 1. Open FrontPage – Start a new page.

2. Choose Template – Use template or blank page.

3. Add Content – Insert text, images, links.

4. Format Page – Apply fonts, colors, alignments.

5. Add Navigation – Link pages or sites.

6. Insert Media – Add tables, forms

7. Preview – View in browser.

8. Save – Save as .htm/.html.

9. Publish – Upload to server.

1. Title Bar

 Description: Displays the name of the current file or page. If unsaved, it shows "Untitled."

 Tools/Parts:

o File Name: Displays the project name.

o Window Controls: Close, Minimize, and Maximize buttons for window

management.

2. Menu Bar

 Description: Located below the Title Bar, Command access

 Tools/Parts:

o File Menu: New, Open, Save, Print.

o Edit Menu: Cut, Copy, Paste, Undo, Redo.

o View Menu: Change layout, Page Preview, Code View.

o Insert Menu: Insert text, images, tables, links.

o Format Menu: Format text, paragraphs, apply CSS.

o Tools Menu: Spell Check, Site Management

o Help Menu: Access documentation and support.

3. FrontPage Tool Bar

 Description: Below the Menu Bar, it provides shortcuts to frequently used tools.

 Tools/Parts:
 o Bold, Italic, Underline: Text formatting options.

o Font Family and Size: Select font and size.

o Text Alignment: Left, Center, Right, Justify.

o Undo/Redo: Undo or redo actions.

o Insert Table/Image/Link: Add table, image, or hyperlink.

4. Style

 Description: Apply predefined or custom CSS styles to ensure consistent design.

 Tools/Parts:

o Predefined Styles: Standard styles for headings and paragraphs.

o Custom Styles: Create and manage custom CSS rules.

o Style List: View and manage applied styles.

5. FontFace and Formatting Bar

 Description: Provides controls to modify text appearance

 Tools/Parts:

o FontFace: Select font type (e.g., Arial, Times New Roman).

o Font Size: Adjust text size.

o Font Color: Choose text color.

o Bold, Italic, Underline: Text formatting options.

o Text Alignment: Align text (left, center, right, justify).

6. Scroll Bars

 Description: Helps scroll the page up, down, or sideways.

 Tools/Parts:

o Vertical Scroll Bar: Scroll up or down.

o Horizontal Scroll Bar: Scroll left or right.

o Scroll Thumb: Draggable part for quick navigation.

Additional Parts of the FrontPage Interface:

   Workspace: Area to add and view web content.
  Status Bar: Shows current view, page size, and status.
  Navigation Bar: Switch between site pages.
  Properties Bar: Edit properties of selected items.
  Task Panes: Show tools for formatting and site tasks.

🔗 Steps to Insert / Remove / Edit Hyperlinks in FrontPage (Easy & Very Short):

✅ Insert Hyperlink:

1. Select the text or image.

2. Click Insert → Hyperlink.

3. Enter the URL.

4. Click OK.

❌ Remove Hyperlink:

1. Right-click the hyperlink.

2. Click Remove Hyperlink.

✏️Edit Hyperlink:

1. Right-click the hyperlink.

2. Click Hyperlink Properties.

3. Change the URL.

4. Click OK.

 XML Basics: Introduction, Features, XML Support and Usage

 XML Document Structure: Structure of XML Documents, Structures in XML, Creating

Document Type Declarations

 XML Elements and Styling: Flow Objects, Working with Text and Font, Color and Background
Properties (Note: These styling elements are usually handled through external technologies
like XSLT or CSS, not directly in XML).

XML (Extensible Markup Language)

1. Introduction to XML

 XML is a markup language designed to store and transport data.

 It is both human-readable and machine-readable.

 HTML focuses on how data looks, XML focuses on what data is.

 Example:
  <student>

 <name>Vansh</name>

 <roll>101</roll>

 </student>

2. XML Support and Usage

 Supported by most web technologies, browsers, and programming languages.

 Used for:

o Data exchange between systems (e.g., Web services).

o Configuration files.

o Storing structured data.

o Mobile and web applications for back-end communication.

3. Structure of XML Documents

 XML has a tree-like structure with a single root element.

 It contains:

o Prolog (optional)

o Root element

o Child elements

o Attributes

 Example:

 <?xml version="1.0" encoding="UTF-8"?>

 <student id="101" course="BCA">

 <name>Vansh</name>

 <roll>101</roll>

</student>

4. Structures in XML

 Key components:

o Elements: Represent data (e.g., <name>Vansh</name>).

o Attributes: Give extra information (e.g., <student id="101">).

o Nested Elements: XML allows hierarchy.

o CDATA: Used to include text blocks without parsing.

CDATA = Character Data
5. Creating Document Type Declarations (DTD)

 DTD defines the structure and rules of an XML document.

 Can be internal or external.

 Example:

 <!DOCTYPE note [

 <!ELEMENT note (to, from, heading, body)>

 <!ELEMENT to (#PCDATA)>

 <!ELEMENT from (#PCDATA)>

 <!ELEMENT heading (#PCDATA)>

 <!ELEMENT body (#PCDATA)>

 ]>

6. Flow Objects

 Flow objects describe how the content is displayed (mostly used in XML formatting tools like
XSL-FO).

 Not commonly used unless working with formatted documents.

 Examples:

o fo:block: for block text.

o fo:table: for tables.

7. Working with Text and Font

 You can control text appearance using XSL-FO or CSS.

 Attributes include:

o font-family

o font-size

o font-weight

o text-align

 Example in XSL-FO:

 <fo:block font-family="Arial" font-size="12pt">Hello XML</fo:block>

8. Color and Background Properties

 You can control colour appearance using XSL-FO or CSS.

 Properties:
 o color: for text color.

o background-color: for background.

 Example:

 <fo:block color="red" background-color="yellow">Important!</fo:block>