Creating your first HTML document


Open any text editor to type your code in.


Basic HTML Code Structure


           Whenever you start creating your code, make it a habit to type in all the basic tags first and then type in all the contents in between later on.  The code sample below shows the basic structure of an HTML document


<!DOCTYPE html>
<html>

<head>
  <title>My First Webpage</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <meta name="keywords" content="beginning html, learning,
  CS-3, PSHS-MC" />
  <meta name="description" content="A web page used for the Web Dev Course in Philippine Science High School - Main Campus" />
  <meta name="author" content="Sir Roy" />
  <meta name="revised" content="07/17/2023" />
  <link rel="icon" href="images/pshslogo.ico" type="image/ico" sizes="16x16"> <!-- to add a site tab icon -->
  <link href="style.css" rel="stylesheet" type="text/css" /> <!-- to add an external css file -->
</head>

<body>
  <header>
    <h1>Welcome to CS3 Web Development</h1>
  </header>
  <section>
            <p> Hello World </p>
  </section>
  <footer>
        <p>&copy; 2023 Computer Science 3</p>
  </footer>
  <script src="script.js"></script>
</body>

</html>

Code Explanation

  • All the special terms in blue and their contents are called HTML Elements. The entities enclosed in < > symbols are called HTML tags.


 

  • The <!DOCTYPE html> declaration defines that this document is an HTML5 document. This is very important since websites nowadays are coded in multiple languages, aside from HTML.
  • The <html> element is the root element of an HTML page. It signifies the beginning of the code.
  • The <head> element contains meta information about the HTML page. Everything inside the <head> tag will not be displayed in the main body of the web page.
  • The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
  • The <meta> tags contain all information related to the HTML document such as character typeset, author information, and keywords.

  Note: Practice proper documentation of your outputs. All your coding submissions should contain the proper meta tags.

  • The <link> element is used to connect the current html file to an external source. For the sample code above, the line defines an icon for the web page on the browser tab and the next one is connecting to an external .css file.
  • On the other hand the <script> element is used to incorporate a JavaScript (JS) inside your web page, in this example is a connecting to an external .js text file.

  • In later parts of CS3, you will learn to use <link> for other types of files.
  • The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
  • The <!-- --> is the comment tag. Everything inside the tag will not be displayed in the browser.
  • When a tag is indented, it means that it is inside the tag preceding it. For example, <title> is inside <head>. The parent of the <title> tag is the <head> tag.