Ms Word Web

Posted By admin  On 02.05.21



Microsoft Word is normally used to create documents such as memos, letters, or reports. However, you can also use Word to create Web pages. A special template, Web Pages, contains the formatting necessary to get you well on your way to completing a Web page. To create a Web page in Word, you simply design the page as a document, using a Web page template if you like, and then save the document as an HTML document. When you save an HTML document, a folder is saved along with it. The folder, containing images and information relevant to the formatting of the Web page, is placed on the same disk and in the same folder location as the HTML document.

Word for the web Microsoft Word for the web lets you make basic edits and formatting changes to your document in a web browser. For more advanced features, use Word for the web’s Open in Word command. When you save the document in Word, it is saved on the website where you opened it in Word for the web. MS Word is more powerful than you may think. The popular word processing tool is used for all sorts of tasks. Not everyone knows this but it can also be used to open web pages in HTML format. In this post, you’ll discover how you can open HTML files in Word and save them in one of the supported file formats.

Creating a Home Page

A home page is the first page that visitors will see when they access your Web site. In many cases, the home page is the entire Web site, but you have the option of including other pages that can be linked to the home page. To create a home page using Word, you will probably want to use either a Web page template or the Web Page Wizard. Both items are available when you select the Web Page option from the General Templates area.

To create a home page:
  1. Open Word (Click Start, All Programs, Microsoft Word).
  2. Click File, New. In the New Document task pane, click General Templates. Click the Web Pages tab, as shown in Figure C.1.
    Figure C.1
    A Web Page template provides assistance with developing a Web page.
  3. Choose a Web page style or let the Web Page Wizard guide you through the steps of creating a Web page. The page shown in Figure C.2 was based on the Left Aligned Column style.
    Figure C.2
    This Web page was developed using Word’s Left Aligned Column style.
  4. A Web page structure appears, in which you can click and drag to select a section to change, and then type text to replace the selection. Change the heading, and replace existing text with your own. Delete any existing text that you no longer need as a placeholder.
  5. Change the attributes of any text. You can change text’s font size, type, or color, and apply any attributes, such as boldface, italics, or underline.
  6. To add a background color, click Format, Background and choose a color. If you want to include a fill effect instead of a solid-color background, click Format Background, Fill Effects.
  7. Periodically save the page as a Web page. Click File, Save As. Click Web Page, give the page a name, indicate the location (disk and folder) where the file should be saved, and click Save. A Web page filename cannot contain spaces (2004Reunion is OK; 2004 Reunion is not.)

Including Images
Seldom is a Web page entirely text. Most include images and even animation to make the page more appealing and eye-catching. You will most likely want to include one or more images on your page, as well. Web page images can be pictures from your digital camera; clip art that you collect from Word or from other sources, such as the Internet; or scanned pictures. If you are using a Word Web page template that includes an image, you will need to remove the image and replace it with one of your own, or leave the space empty.
To include an image on a Web page (using a Word Web page template):
  1. Click the image to be removed or replaced, and press Delete.
  2. If the image to be placed on the Web page is a picture, it should be saved as a JPEG file. The JPEG file format is best for displaying photographs, whereas the GIF format is more often used for line drawings, large blocks of color, and animation. If you have an image editor, you can open the image in that software and save it as a JPEG file. Your image editor might give you the option of saving a file as a Web-ready picture. When you choose the Web-ready option, the picture is automatically saved as a JPEG file in an appropriate size for display on a Web page. If you don’t have an image editor, you can open the picture in Paint (Click Start, All Programs, Accessories, Paint), and change the file type to JPEG, if necessary, before saving it. To change the file type, click File, Save As, and then select JPEG from the drop-down list beside the file type area.
  3. To place the image on the Web page that you are developing, click where you want the picture to go, and click Insert, Picture, From File (or Insert, Picture, Clip Art if you are selecting from Word’s clip art inventory). Navigate to the disk and folder containing the picture to be inserted, and double-click the image file.
  4. Resize the image by clicking to select it and then clicking and dragging a corner handle.
  5. If you are using a Word Web page template, you will probably be able to type text beside and beneath the inserted image. If, for some reason, you are not able to type beside the image, you must format the image to allow that to occur. Right-click the image, and select Format Picture from the context menu. Click the Layout tab. Click Square. Click OK. At that point, you can type text beside and beneath the picture.

Linking Web Pages
The next time you are on the Internet, take a careful look at any Web page. More likely than not, you will be able to identify several graphic or text hyperlinks. You can tell that a picture or text is a link because the mouse pointer becomes an arrow or pointing hand when you move over the link. Links connect to other Web pages so that you can easily move among pages without typing new page addresses. When creating a Web page using Word, you can create links to other pages that you plan to create or to other pages already on the Internet.
To link pages (using Word):
  1. Create as many pages as you want to include in your Web site. Each Web page is a Word file.
  2. To link the Web pages that you have created, or to link to another Web page, you must include one or more hyperlinks on your home page.
  3. On the home page, type text for a hyperlink. For example, if you want to include a link on your home page to the Reunions.com page, type some text, such as “For reunion recipe ideas, click here,” as shown in Figure C.4a. Then click and drag to select the link text, and click Insert, Hyperlink. At the dialog box, shown in Figure C.3, click Existing File or Web Page. Type the Web address of the Web page to link. Click OK.
    Figure C.3
    Using the Insert Hyperlink dialog box, you can link text in a Word document to a Web site, so that the text becomes a hyperlink.
  4. If you are linking between two pages that you have created, type text to indicate the link, such as that shown in Figure C.4a. Then, create a hyperlink by selecting the text and clicking Insert, Hyperlink. Click Existing File or Web Page. Navigate to the disk and folder holding the page to be linked, and double-click the page file. The linked page is shown in Figure C.4b.
    Figure C.4
    1. Text linking to another Web page on your Web site
    2. Text linking to another Web Site

    Text on one page (a) can be used to link to another page (b).
    Previewing Your Web Pages
    It is common practice to design a Web page offline, which means that you can spend as much time as necessary perfecting its design before you actually place it on the Internet. If you are using Word to design the page, you will complete the document and save it as an HTML file. At that point, you will certainly want to check on how it will look when displayed online. However, you don’t need to be online to check its appearance. You can simply use your browser, even offline, to open and preview the Web page.
    To preview a Web page:
    1. Open your browser by double-clicking the icon on the desktop or by locating it on the Start, All Programs menu. Click File, Open, as shown in Figure C.5.
      Figure C.5
      Open your Web page file in your browser to preview it.
    2. Click Browse, and navigate to the disk and folder in which your home page is stored (Figure C.6). Click OK.
      ure C.6
      You must indicate where the home page file is stored.
    3. The page will be displayed exactly as it would look on the Internet. Click to test any hyperlink. Click Back to return to the home page from a linked page.
    4. Close your browser.
      Copyright © 1995 - 2010 Pearson Education.All rights reserved. Pearson Prentice Hall is an imprint of Pearson .
      Legal Notice|Privacy Policy|Permissions
-->

Applies to: Word 2016 or later on Windows, and Word on iPad and Mac

In this article, you'll walk through the process of building a Word task pane add-in.

Create the add-in

You can create an Office Add-in by using the Yeoman generator for Office Add-ins or Visual Studio. The Yeoman generator creates a Node.js project that can be managed with Visual Studio Code or any other editor, whereas Visual Studio creates a Visual Studio solution. Select the tab for the one you'd like to use and then follow the instructions to create your add-in and test it locally.

Tip

To use the Yeoman generator to create an add-in that uses single sign-on (SSO), see instructions in the Single sign-on (SSO) quick start.

Version

Prerequisites

Web

Note

If you aren't familiar with Node.js or npm, you should start by setting up your development environment.

  • Node.js (the latest LTS version)

  • The latest version of Yeoman and the Yeoman generator for Office Add-ins. To install these tools globally, run the following command via the command prompt:

    Note

    Even if you've previously installed the Yeoman generator, we recommend you update your package to the latest version from npm.

Create the add-in project

Run the following command to create an add-in project using the Yeoman generator:

Note

When you run the yo office command, you may receive prompts about the data collection policies of Yeoman and the Office Add-in CLI tools. Use the information that's provided to respond to the prompts as you see fit.

When prompted, provide the following information to create your add-in project:

  • Choose a project type:Office Add-in Task Pane project
  • Choose a script type:Javascript
  • What do you want to name your add-in?My Office Add-in
  • Which Office client application would you like to support?Word

After you complete the wizard, the generator creates the project and installs supporting Node components.

Tip

You can ignore the next steps guidance that the Yeoman generator provides after the add-in project's been created. The step-by-step instructions within this article provide all of the guidance you'll need to complete this tutorial.

Ms Word Webinar

Ms Word Web

Explore the project

The add-in project that you've created with the Yeoman generator contains sample code for a very basic task pane add-in. If you'd like to explore the components of your add-in project, open the project in your code editor and review the files listed below. When you're ready to try out your add-in, proceed to the next section.

  • The ./manifest.xml file in the root directory of the project defines the settings and capabilities of the add-in.
  • The ./src/taskpane/taskpane.html file contains the HTML markup for the task pane.
  • The ./src/taskpane/taskpane.css file contains the CSS that's applied to content in the task pane.
  • The ./src/taskpane/taskpane.js file contains the Office JavaScript API code that facilitates interaction between the task pane and the Office client application.

Try it out

  1. Navigate to the root folder of the project.

  2. Complete the following steps to start the local web server and sideload your add-in.

    Note

    Office Add-ins should use HTTPS, not HTTP, even when you are developing. If you are prompted to install a certificate after you run one of the following commands, accept the prompt to install the certificate that the Yeoman generator provides.

    Tip

    If you're testing your add-in on Mac, run the following command before proceeding. When you run this command, the local web server starts.

    • To test your add-in in Word, run the following command in the root directory of your project. This starts the local web server (if it's not already running) and opens Word with your add-in loaded.

    • To test your add-in in Word on a browser, run the following command in the root directory of your project. When you run this command, the local web server will start (if it's not already running).

      To use your add-in, open a new document in Word on the web and then sideload your add-in by following the instructions in Sideload Office Add-ins in Office on the web.

  3. In Word, open a new document, choose the Home tab, and then choose the Show Taskpane button in the ribbon to open the add-in task pane.

  4. At the bottom of the task pane, choose the Run link to add the text 'Hello World' to the document in blue font.

Next steps

Congratulations, you've successfully created a Word task pane add-in! Next, learn more about the capabilities of a Word add-in and build a more complex add-in by following along with the Word add-in tutorial.

Ms Word Web Application

Prerequisites

Ms Word Web Template

  • Visual Studio 2019 with the Office/SharePoint development workload installed

    Note

    If you've previously installed Visual Studio 2019, use the Visual Studio Installer to ensure that the Office/SharePoint development workload is installed.

  • Office 2016 or later

    Note

    If you don't already have Office, you can join the Microsoft 365 developer program to get a free, 90-day renewable Microsoft 365 subscription to use during development.

Create the add-in project

  1. In Visual Studio, choose Create a new project.

  2. Using the search box, enter add-in. Choose Word Web Add-in, then select Next.

  3. Name your project and select Create.

  4. Visual Studio creates a solution and its two projects appear in Solution Explorer. The Home.html file opens in Visual Studio.

Ms Word Website Template

Explore the Visual Studio solution

When you've completed the wizard, Visual Studio creates a solution that contains two projects.

ProjectDescription
Add-in projectContains only an XML manifest file, which contains all the settings that describe your add-in. These settings help the Office application determine when your add-in should be activated and where the add-in should appear. Visual Studio generates the contents of this file for you so that you can run the project and use your add-in immediately. You change these settings any time by modifying the XML file.
Web application projectContains the content pages of your add-in, including all the files and file references that you need to develop Office-aware HTML and JavaScript pages. While you develop your add-in, Visual Studio hosts the web application on your local IIS server. When you're ready to publish the add-in, you'll need to deploy this web application project to a web server.

Update the code

  1. Home.html specifies the HTML that will be rendered in the add-in's task pane. In Home.html, replace the <body> element with the following markup and save the file.

  2. Open the file Home.js in the root of the web application project. This file specifies the script for the add-in. Replace the entire contents with the following code and save the file.

  3. Open the file Home.css in the root of the web application project. This file specifies the custom styles for the add-in. Replace the entire contents with the following code and save the file.

Update the manifest

  1. Open the XML manifest file in the add-in project. This file defines the add-in's settings and capabilities.

  2. The ProviderName element has a placeholder value. Replace it with your name.

  3. The DefaultValue attribute of the DisplayName element has a placeholder. Replace it with My Office Add-in.

  4. The DefaultValue attribute of the Description element has a placeholder. Replace it with A task pane add-in for Word.

  5. Save the file.

Try it out

  1. Using Visual Studio, test the newly created Word add-in by pressing F5 or choosing the Start button to launch Word with the Show Taskpane add-in button displayed in the ribbon. The add-in will be hosted locally on IIS.

  2. In Word, choose the Home tab, and then choose the Show Taskpane button in the ribbon to open the add-in task pane. (If you are using the one-time purchase version of Office, instead of the Microsoft 365 version, then custom buttons are not supported. Instead, the task pane will open immediately.)

  3. In the task pane, choose any of the buttons to add boilerplate text to the document.

Note

To see the console.log output, you'll need a separate set of developer tools for a JavaScript console. Visit Debug add-ins using developer tools on Windows 10 to learn more about F12 tools and the Microsoft Edge DevTools.

Next steps

Congratulations, you've successfully created a Word task pane add-in! Next, learn more about developing Office Add-ins with Visual Studio.

See also