Web Page Basics

Building a Web page using HTML is easy. We’ll build a simple Web page to start off, and direct you to great resources on the Web for further instruction. Ready? Begin!

To start your Web page, open the Windows Notepad application. Select Start -> Programs -> Accessories -> Notepad.

Now type the following text in the open Notepad document:

</p> <p>My Very Own Web Page</p> <pre><code> <TITLE> <HEAD> </code></pre> <p>​ <BODY></p> <p>Welcome and thank you for visiting My Web Page!</p> <p>​ <P></p> <p>My Web page text goes here. </p> <p>​ <BODY></p> <p>​ <HTML> </p> <p>After you have completed typing the text save this file as “index.html” on your desktop. Now let’s see what our page looks like using our Web browser. To preview the file in your Web browser, open the browser; select File -> Open -> Browse -> Filename -> Open. </p> <p>Congratulations—you have just created your very first Web page! </p> <p>This Web page is essentially the same as many high end professional Web pages. It is created by a series of formatted text instructions, called tags, that essentially tell the browser where to place information and how it should appear. These tags come in pairs; the first one is called an open tag <> and the second is called a closed tag . </p> <p>Through the use of tags the most technologically advanced Web page (for the most part) uses the same technology as this simple Web page. </p> <p>There are many ways to create wonderful, engaging Web pages. You may choose to hand-code HTML (as you did in the exercise above) or you may choose to use a WYSIWYG program (What You See Is What You Get) Web-builder program. To learn more about Web design, go online and research the various resources available. For example, go to your favorite search engine site, and try keywords such as: Web, Web page, and Web.</p> </article> </div> </div> </main> <footer class="md-footer"> <nav class="md-footer__inner md-grid" aria-label="Footer"> <a href="Typing-Business-Letters/More-on-Business-Letters.html" class="md-footer__link md-footer__link--prev" aria-label="Previous: More on Business Letters" rel="prev"> <div class="md-footer__button md-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg> </div> <div class="md-footer__title"> <div class="md-ellipsis"> <span class="md-footer__direction"> Previous </span> More on Business Letters </div> </div> </a> <a href="Legal-Notices.html" class="md-footer__link md-footer__link--next" aria-label="Next: Legal Notices" rel="next"> <div class="md-footer__title"> <div class="md-ellipsis"> <span class="md-footer__direction"> Next </span> Legal Notices </div> </div> <div class="md-footer__button md-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11H4z"/></svg> </div> </a> </nav> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class="md-footer-copyright"> Made with <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener"> Material for MkDocs </a> </div> </div> </div> </footer> </div> <div class="md-dialog" data-md-component="dialog"> <div class="md-dialog__inner md-typeset"></div> </div> <script id="__config" type="application/json">{"base": "..", "features": ["navigation.indexes"], "translations": {"clipboard.copy": "Copy to clipboard", "clipboard.copied": "Copied to clipboard", "search.config.lang": "en", "search.config.pipeline": "trimmer, stopWordFilter", "search.config.separator": "[\\s\\-]+", "search.placeholder": "Search", "search.result.placeholder": "Type to start searching", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.term.missing": "Missing", "select.version.title": "Select version"}, "search": "../assets/javascripts/workers/search.b0710199.min.js", "version": null}</script> <script src="../assets/javascripts/bundle.76f349be.min.js"></script> <script src="../javascripts/extra.js"></script> <script src="../javascripts/jquery.min.js"></script> </body> </html>