Question 1: You can either copy the jquery code in a separate file, e.g. called main.js, and include it in the head part of you html page with
<script src="main.js"></script>
in case the file would be next to your html-page. Better practice is to use separate folders for css, scripts and images, so e.g. in case you have a directory called scripts the include would be
<script src="/scripts/main.js"></script>
for a relative path (assuming your html-pages are on root level with scripts as subdirectory) or, just in case you're testing locally without a local server
<script src="scripts/main.js"></script>
Be sure to include your version of jquery before including a javascript file using jquery functions.
You can also include the script part in the html page (also after the include of jquery) as inline script: <script> /* your code */ </script>. For completeness - as I don't know the html in question (if it's HTML5 or HTML4) - it could be necessary to add the type attribute to the script tag: <script type="text/javascript"> This applies to the the script tag including ths js-file as well as to the script tag for the online script. The type attribute is optional in HTML5, but mandatory in HTML4.
Also for completeness: You could also consider to include the scripts before the closing body tag instead of into the head section - detailed explanation why it could be better to include css in the header and js at the end can be found here: Where to place Javascript in a HTML file?
For further reference for the question inline script vs. external script files: When should I use Inline vs. External Javascript?
Question 2: No. There has been the javascript function resizeTo() - called like e.g. window.resizeTo(400,400) - that made it possible to resize the browser window, but for good reasons this has been disabled by many browsers on default. Reference e.g. here: The javascript "resizeTo" function not working in Chrome and Opera and here: http://kb.mozillazine.org/Resizing_oversize_window#JavaScript_no_longer_allowed_to_resize_windows__through_the_Location_Bar. You can use e.g. a mask instead - probably you've already seen this on many pages, e.g. when images/slideshows/videos etc. are displayed in a modal window and the page below the modal window is covered with a grey, transparent div. Just as example a very simplified Fiddle. When you click the banner, the banner as well as the mask will be hidden. The jquery code in the Fiddle is already executed when the Fiddle is loaded and could be used wrapped in a $( document ).ready(function() {} to be executed when jquery is loaded to set the height of the mask to the document height:
$(document).ready(function() {
$("#banner").on("click", function() {
$("#banner, #mask").hide();
});
$('#mask').height($(document).height());
});
For reference as this is only one possible approach to set the mask to cover the screen (with additional CSS in the Fiddle like setting the width of the mask to 100%) you can check several approaches here: How to make a div 100% of page (not screen) height?
Question 3: One of several solutions to display a div centered is used in above Fiddle. You can check a variety of solutions provided here: Using jQuery to center a DIV on the screen
