Name	Institution	e-mail (optional)
King Henry VIII	Hampton Court Palace Kingston	Henry8@rex.gov.uk

Template Method

What's this about?

You can use this template method to write your own method into HTML (HyperText Markup Language)

(Whoa! This is way too complex
take me to the simple page!)

OK, how do I do it?

(1) First of all you want to "view-source" for this page.

On a PC click the right mouse button around here on the page and a list of options comes up. Select "view-source" by clicking the left mouse button. A new window will open up showing the raw data that your browser program (Internet Explorer or Netscape) has retrieved and converted into the nice blue page. It is a simple text file and you can edit it and save it. When you save it be sure to select "all files" in the save file dialogue-box and name the file something like myfile.html
(in Netscape you may have to copy and paste the text into a new window in Notepad or Simpletext. Do not paste it into a normal word-processor program because it is difficult to save it as myfile.html - it ends up as myfile.html.doc)

(2) Try changing something now. Find this text, change it to something silly then save it and open the saved file with your browser program.

Either choose "open file" whilst in the browser program or find your saved file first and double-click on it to automatically open the browser.

(3) Straight away you notice a problem. It doesn't look right. Several things are wrong.

First, near the top of the document, just beneath the title, there is a tag commencing "<link rel="stylesheet...... This asks the browser program to locate a short file defining certain styles (the stylesheet). This file is supposed to be one directory up ( ../ ) and its called mbstyle.css
In the absence of this the browser program is unable to understand some of the commands and so it just ignores them and renders the page with no style at all.

Second, shortly after the stylesheet request there are two <iframe> tags. iframe stands for inline frame. These tags each ask for a file to go in a defined space at the top of the page. The files are not where the browser expects to find them (again, one directory up ( ../ ),called navbar.html and discpat.html)
(This will not be a problem for Netscape 4 because it does not recognise the <iframe> command anyway.)

(4) So, to make your page look nice you need a stylesheet (a file called something.css) (in this case called mbstyle.css) and you need to do something about the iframe spaces.

(5) You can learn about stylesheets elsewhere (Webmonkey) but just for now use the one below.

Copy and paste the lines below into a new page in notepad or simpletext (the free, basic text editor that comes with your computer). Then save it as mbstyle.css (be sure to save it as plain text and as "all-files" otherwise it will end up really being called mbstyle.css.txt and that won't work.)

<!-- this is my stylesheet, poor as it is -->
.sub1 { color: #555555; font-size: 10pt; padding-left: 5%; font-family: arial; line-height: 12pt; margin-bottom: 1px; margin-top: 0px; }
.subhead { font-family: arial; font-weight: bold; font-size: 10pt; }
.name { font-family: arial; font-size: 9pt; color: #2f4f4f; valign: top; }
.namehead { font-family: arial; font-size: 8pt; color: #d2691e; valign: bottom; }
.hd { font-family: arial; font-size: 12pt; letter-spacing: 3px; color: #006000; font-weight: bold; }
.title { font-family: georgia, "new york"; font-size: 12pt; text-decoration: underline; font-weight: bold; }
.navlinks { text-decoration: none; color: #385533; font-family: arial; font-size: 10pt; line-height: 14pt; }
a.navlinks:visited { color: #717c6e; }
a.navlinks:hover { font-style: italic; color: #ff8c00; }


(Whoa! This is way too complex
take me to the simple page!)

I have only included a few essentials to make a nice method that fits the existing methodbook style. The whole lot can be viewed here but you don't need most of these. (and it is a bit scary if this is the first time you have viewed-source).

"But it still doesn't work!" That is because the browser is looking one directory up for the stylesheet. Open your myfile.html file (using notepad or simpletext), find the stylesheet tag <link rel="stylesheet...... and delete the ../ in front of mbstyle.css so it just says; .... href="mbstyle.css">
Now, with your myfile.html file and your mbstyle.css file in the same directory, it will work. (Click the "refresh" or "reload" button on your browser to update the view after you have modified your myfile.css)

(6) The best thing to do with the <iframes> just now is to delete them.

There is an opening tag; <iframe size=blah postion=blah source=../blah_blah_blah.html>, and a closing tag; </iframe>
Delete both pairs of tags.

(7) Now the page looks better.

(8) All you have to do is write your method over this text. There is big writing.

and little writing

and subheadings

and <u>underlining</u> and <b>bold</b> and <i>italic</i>. If something goes wrong it is usually because you have forgotten to put in a close tag like </font>
<p> stands for paragraph and gives vertical space
<br> stands for line break

(9) I learned everything I know (gee!) from Davesite.com, Webmonkey and W3Schools.com

(10) I use a super HTML editor program called HTML-kit. It is free at http://www.chami.com/html-kit/ It is always telling me off for being slack and missing bits out but it is definitely the bees knees.

(11) You can leave all the top and bottom bits to me. Just get the body of the page to look the way you want it. I'll put in the META tags for keywords and description. By all means put in your own keywords and description if you want to.

(12) Finally, some useful template bits;

Protocol

Set up a PCR reaction like this one, use a proof-reading polymerase such as Pfu polymerase.

• 5ml 10 x Pfu polymerase buffer (inc Mg)
• 4ml 10mM dNTPs (i.e. a mixture of all four at 10mM each)
• 0.2 ml Primer 1 (primers are ~42 mers at 100pmol/ml)
• 0.2 ml Primer 2
• 1ml plasmid template (10ng)
• 37.6ml H₂O
• 2ml Pfu polymerase

The Pfu polymerase contains a 3'-5' exonuclease and it will start to chew up single-stranded DNA (the primers) from the 3' end making them shorter and less specific. Therefore assemble the reaction on ice and only add the enzyme last thing. Keep on ice until you put it into the PCR machine, already pre-heated to 94C.

PCR program

Duration	Temperature	Cycles
60 seconds	94C	1
30 seconds	94C	12
30 seconds	55C
12 minutes	68C

The extension temperature is 68C to minimize 'breathing' of the 5' end of primer. Then, when the polymerase has read all the way around the plasmid it is less likely to displace the primer and incorporate the 'old' sequence from the plasmid. The extension time is 2 minutes per kb of plasmid.

Cool the PCR reaction to room temperature and add 1ml of restiction enzyme DpnI.

Incubate at 37C for 1 hour.

DpnI is a 4-cutter which only cuts dam methylated DNA. The parental plasmid DNA will be cut to pieces whilst the nascent PCR DNA is left intact. All routine E.coli strains have an intact dam methylase system. Check in the back of the NEB catalogue if unsure.

Transform 5ml and 45ml of the reaction into competent E.coli.

There is no need to carry out a ligation before the transformation. The PCR product is a 'nicked' circle with the nicks in opposite strands displaced by 42bp. This is identical to a classical de-phosphorylated vector plus insert transformation (with a 42bp insert).

Miniprep some colonies, check that they are the expected size and screen 2 of them by sequencing.

I've done this twice and each time both colonies were the correct thing. I then subclone the gene out of the plasmid back into the vector in the classical way to avoid sequencing the whole vector for any PCR errors.