Start up Notepad. This will present you with a completely empty document.
The first thing you will need to learn is the concept of tags. What's a tag? These are simply instructions to the browser (like Internet Explorer or Netscape) which tell it what to do. Most tags have a beginning element and an ending element. All tags must begin with the less than sign (<) and end with the greater than sign (>).
The first tag you will use is the one that defines the whole document. This is the tag. Simply add the following to your blank document:
This simply says you have a document written in the HTML language, and it defines the start and end of the page.
Next you need to add a header section to your document by inserting the and tags. This defines information that the browser uses to define characteristics about your page. These include the title of the document and lots of other information that you do not need to concern yourself with now.
Once you insert your heading, your Notepad HTML document will appear as follows.
</h2> <p>Okay, now you want to give your page a title. This appears in the upper left hand corner of your browser, and it is used by many search engines to define the name of your page.</p> <p>To define the title, simply insert the <a href="http://www.html-reference.com/TITLE.asp"><title></a> tag between the <head> and </head> tags. An example is included below. </p> <p style="border-style: dotted; border-color: gray; padding: 5px; margin-left: 40px; font-family: Courier;"> <html>
<br /> <head>
<br /> <title>My document is about roller coasters
Finally, you need to define the main portion of the document, known as the body. This is began by the tag and ended by the tag. This section will contain everything that your visitors will see.
My document is about roller coasters
This is a simple HTML document with some text in the body.
Your document should look like this at this point.
That's about it for lesson one. You have created a simple HTML document.
To see your creation, save the document to your hard drive. If you are using Notepad, choose the file menu and select "Save As...". Enter a file name such as "lesson1.htm" (without the quotation marks). To make finding the sample document easier, I would suggest you just save it to the desktop.
If you double-click on this file your browser will start up and display your new creation. It should look something like the sample below.
Of course, if you are using Netscape or another browser this will look slightly different.
Notice the title in the upper left "My document is about roller coasters" which you created with the
tag. </p></p>
<div style='clear: both;'></div>
</div>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
</span>
<span class='post-timestamp'>
</span>
<span class='reaction-buttons'>
</span>
<span class='star-ratings'>
</span>
<span class='post-comment-link'>
</span>
<span class='post-backlinks post-comment-link'>
</span>
<span class='post-icons'>
<span class='item-control blog-admin pid-1873823504'>
<a href='https://www.blogger.com/post-edit.g?blogID=6976247695145447476&postID=3464845258015680127&from=pencil' title='Edit Post'>
<img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</span>
</div>
<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
</span>
</div>
<div class='post-footer-line post-footer-line-3'>
<span class='post-location'>
</span>
</div>
</div>
</div>
<div class='comments' id='comments'>
<a name='comments'></a>
</div>
</div>
</div></div>
</div>
<div class='blog-pager' id='blog-pager'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' href='https://blog-x-tips.blogspot.com/2009/05/formatting-text.html' id='Blog1_blog-pager-newer-link' title='Newer Post'>Newer Post</a>
</span>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' href='https://blog-x-tips.blogspot.com/2009/05/html-helper-ring.html' id='Blog1_blog-pager-older-link' title='Older Post'>Older Post</a>
</span>
<a class='home-link' href='https://blog-x-tips.blogspot.com/'>Home</a>
</div>
<div class='clear'></div>
<div class='post-feeds'>
</div>
</div></div>
</div>
<div id='rightsidebar-left'>
<div class='sidebar section' id='sidebar2'><div class='widget HTML' data-version='1' id='HTML5'>
<h2 class='title'>Google</h2>
<div class='widget-content'>
<script type="text/javascript"><!--
google_ad_client = "pub-0862239979333781";
google_ad_host = "pub-1556223355139109";
google_ad_host_channel="00000";
/* 160x600, dibuat 09/05/25 */
google_ad_slot = "0552616023";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script
src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script>
</div>
<div class='clear'></div>
</div></div>
</div>
<div id='rightsidebar-right'>
<div class='sidebar no-items section' id='sidebar3'>
</div>
</div>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'>
</div>
</div>
<!-- end content-wrapper -->
<div id='footer-wrapper'>
<div class='footer no-items section' id='footer'></div>
</div>
</div></div>
<!-- end outer-wrapper -->
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/344097953-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'APlU3lwSUBTKvEvjEXuIqMbTfqxV:1776565205965';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d6976247695145447476','//blog-x-tips.blogspot.com/2009/05/creating-your-first-html-document.html','6976247695145447476');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '6976247695145447476', 'title': 'Tips', 'url': 'https://blog-x-tips.blogspot.com/2009/05/creating-your-first-html-document.html', 'canonicalUrl': 'http://blog-x-tips.blogspot.com/2009/05/creating-your-first-html-document.html', 'homepageUrl': 'https://blog-x-tips.blogspot.com/', 'searchUrl': 'https://blog-x-tips.blogspot.com/search', 'canonicalHomepageUrl': 'http://blog-x-tips.blogspot.com/', 'blogspotFaviconUrl': 'https://blog-x-tips.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'en-US', 'localeUnderscoreDelimited': 'en', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Tips - Atom\x22 href\x3d\x22https://blog-x-tips.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Tips - RSS\x22 href\x3d\x22https://blog-x-tips.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Tips - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/6976247695145447476/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Tips - Atom\x22 href\x3d\x22https://blog-x-tips.blogspot.com/feeds/3464845258015680127/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseClientId': 'pub-0862239979333781', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': false, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/541fe93e01a44244', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Share to X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Read more', 'pageType': 'item', 'postId': '3464845258015680127', 'postImageUrl': 'http://www.html-helper.net/images/lesson01a.jpg', 'pageName': 'Creating Your First HTML Document', 'pageTitle': 'Tips: Creating Your First HTML Document'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard!', 'ok': 'Ok', 'postLink': 'Post Link'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Custom', 'isResponsive': false, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'Creating Your First HTML Document', 'description': 'Start up Notepad. This will present you with a completely empty document. The first thing you will need to learn is the concep...', 'featuredImage': 'https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vBSxS4F_8x-P27UcLp_lZ03NYvSw8vXrPehKOespuymYlChza5oadvSvbld8DXM_4ioMuq5JQef78f1qoH4RkwgtkMRtAl5qK3NibVDLKwENop', 'url': 'https://blog-x-tips.blogspot.com/2009/05/creating-your-first-html-document.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 3464845258015680127}}]);
_WidgetManager._RegisterWidget('_NavbarView', new _WidgetInfo('Navbar1', 'navbar', document.getElementById('Navbar1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', document.getElementById('Header1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML4', 'crosscol', document.getElementById('HTML4'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML3', 'sidebar', document.getElementById('HTML3'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_TextView', new _WidgetInfo('Text1', 'sidebar', document.getElementById('Text1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogArchiveView', new _WidgetInfo('BlogArchive1', 'sidebar', document.getElementById('BlogArchive1'), {'languageDirection': 'ltr', 'loadingMessage': 'Loading\x26hellip;'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/2626028960-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/828616780-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML5', 'sidebar2', document.getElementById('HTML5'), {}, 'displayModeFull'));
</script>
</body>
</html> 