HTML/XHTML:Basic tags

From virtualMV2015wiki
Jump to: navigation, search
 Home  HTML/XHTML <

Introduction

Overview

Icon Objective.png

Objective : Creating your first web page

By the end of this page you will be able to:

  • Create the following web page that includes headings and comments

one.htm

Task: Create a simple web page

Using notepad create the following web page. (replace the ** with your name)

<html> 
  <head> 
    <title>**’s first page</title>
  </head> 
  <body>
    <p>Hello world</p>
  </body> 
</html>

And save as one.htm in a suitable sub-directory (e.g. FirstSite) on your hard drive.

Notes on html structure

  • Every web page starts with an <html> tag and ends with </html>
  • The <head>.. </head> area is used to put information relating to the web page, for example the page’s title.
  • The <body> ..</body> area is used to put the stuff you want to display in the web browser.
  • HTML doesn’t require the <p> tag to have a </p> closing tag, but for XHTML this is required (In fact many browsers can ignore most tags and are very forgiving... but .. if you want to develop web pages that will work in the future it is best to get used to the XHTML standard).

Paragraph and basic font tags (bold, italic)

Change one.htm to

<html> 
<head> 
  <title>**’s first page</title>
</head> 
<body>
  <p>Hello <b>world</b></p>
  <p>Live long <i>and prosper</i></p>
</body> 
</html>
  • Notes
    • world is now in bold, and "Live long .." is on a new line.
    • What happens if you delete the </p> at the end of the Hello world line and <p> before "Live long .."?
    • By default <p> causes a double line spacing.
    • As well as bold, there is the <i> - italic and <u> - underline tags. You should avoid the use of the underline tag as in html this usually signals a hyperlink (link to another page).

Heading tags <h1> .. <h6>

Headings are easily placed in an html file using the heading tag. For example; modify your web page one.html to..

<html> 
  <head> 
    <title>**’s first page</title>
  </head> 
  <body>
    <h1>**’s web</h1> 
    <p>Hello <b>world</b></p>
    <h2>Favourite quotes</h2> 
    <p>Live long and prosper</p>
  </body> 
</html>

Experiment with the other heading tags <h3> to <h6>.

Comments

If you are markup that may be difficult to follow, it is a good idea to include explanatory comments You can add comments to your html file using the !- tag. For example

<!-- This is a comment -->

A comment may extend over more than one line: For example

<!-- This is a comment
extending over more than one line -->

Note that this has also been "borrowed" to enable Scripting (JavaScript and VB Script) to be included in an html document while still being readible in old browsers.


HTML/XHTML:Basic tags. (2017). In virtualMV's ( Michael Verhaart ) wiki. Retrieved December 13, 2017, from http://www.virtualmv.com/wiki/index.php?title=HTML/XHTML%3ABasic_tags    (zotero)