How to Insert HTML Code into a Web Page with Expression Web

How to add HTML to your website either in the HEAD section or main body


How to Insert HTML Code into a Web Page with Expression Web

by Christopher Heng, thesitewizard.com

There are occasions when you need to insert some HTML code that you obtained from somewhere into your website. This tutorial shows you how to do this using the free Microsoft Expression Web editor.

Preliminary Matters

How to Insert HTML Code using Expression Web

If you were instructed to insert the HTML code into the <head> section of your web page, skip to the next section instead.

  1. Copy the code your want to paste into the clipboard. If you don't know what this means, select (ie, highlight) the HTML code that you are supposed to insert, click your right mouse button while the pointer is hovering over the selection, and click the "Copy" line in the menu that pops up.

  2. Start up Expression Web and open the web page in question.

  3. Place your text cursor at the spot on your page where you want the code inserted. You can do this by clicking that location with your mouse.

  4. Switch Expression Web into its Code mode. To do this, click the "Code" tab near the bottom of the Expression Web window. See the picture below if you can't find it.

    Design, Split and Code tabs
  5. You should now see the underlying HTML code for the page. Click "Edit" on the menu bar, followed by "Paste" in the sub-menu that appears.

    The code you copied earlier will be inserted at the cursor's location.

  6. Click the "Design" button at the bottom of the Expression Web window to switch the editor back into its Design mode.

    Design, Split and Code tabs
  7. If the code relies on an online service or resource (as is the case for Youtube videos and advertisements), you probably won't be able to see the final result from within Expression Web. Otherwise, if the code is functionally complete (such as the simple HTML code from my Link page), you will be able to see the desired effect immediately.

How to Insert HTML Code into the <HEAD> Section of a Web Page

This section is for those pieces of HTML code that are supposed to be inserted into the <HEAD> portion of a web page. Only follow the steps below if you have been explicitly asked to insert it there. If the instructions given make no mention of <head>, carry out the procedure given in the previous section instead.

  1. Copy the code your want to paste into the clipboard. For those who don't know what this means, select (ie, highlight) the HTML code that you are supposed to insert, click your right mouse button while the pointer is hovering over the selection, and click the "Copy" line in the menu that pops up.

  2. Start up Expression Web and open the relevant web page.

  3. Switch the editor into its Code mode. To do this, click the "Code" button near the bottom of the Expression Web window (see picture below).

    Design, Split and Code tabs
  4. You should now see the underlying HTML code for the page. Scroll to the very beginning of the document and click somewhere in the topmost line to put your text cursor there.

  5. Hit the "Home" key on your keyboard to make sure that the cursor is on the leftmost column of the page.

  6. Now look for the line that says </head>. Notice that I said </head> and not <head>. That is, look for the word "head" with a preceding slash ("/"). It will probably be many lines below the top of the page, and definitely after <head>. This means that you will have to scroll down again, line by line till you find it.

    For information only: The <head> line flags the beginning of the HEAD section, while </head> marks the end. The code you want to paste should be between these two lines. However, it's probably safer to paste it near the end of the section than at the beginning, since certain lines in the HEAD section (which are automatically inserted by Expression Web) should ideally be near the beginning and we want to avoid pushing it too far down the page. That's why we're scrolling down to look for the </head> end-marker.

  7. Once you have found </head>, put your cursor on the blank line just above it. If the line immediately above </head> is not blank, put the cursor at the beginning of the </head> line, and hit the ENTER key to create one. Then move the cursor to the blank line you just made.

  8. Click "Edit" from the menu, followed by "Paste" in the submenu that appears. Your code should appear on the screeen.

  9. Click the "Design" tab at the bottom of the Expression Web window to leave the Code mode.

    Design, Split and Code tabs

That's it. You're done. Whether or not you see anything on your page in Expression Web depends on the code you added. In many cases, you will need to publish the page to the Internet and view it in a browser to see the effect of the changes.

Copyright © 2017-2018 Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

Related Articles

New Articles

How to Link to This Page

It will appear on your page as:

How to Insert HTML Code into a Web Page with Expression Web





Home
Donate
Contact
Link to Us
No Spam Policy
Privacy Policy
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.