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.
I will assume here that you already have a website designed using Expression Web. If this is not true, please begin with How to Create a Website.
If you are reading this article because you want to insert a YouTube video or add Google AdSense advertisements to your site, please read the articles linked to in the preceding clause instead, since they were written with those things in mind and give additional tips specific to them.
If you were instructed to insert the HTML code into the <head>
section of your web page, skip to the
next section instead.
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.
Start up Expression Web and open the web page in question.
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.
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.
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.
Click the "Design" button at the bottom of the Expression Web window to switch the editor back into its Design mode.
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.
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.
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.
Start up Expression Web and open the relevant web page.
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).
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.
Hit the "Home" key on your keyboard to make sure that the cursor is on the leftmost column of the page.
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.
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.
Click "Edit" from the menu, followed by "Paste" in the submenu that appears. Your code should appear on the screeen.
Click the "Design" tab at the bottom of the Expression Web window to leave the Code mode.
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/.
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.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Insert HTML Code into a Web Page with Expression Web