UTM CSSC
On this page
  • What Is HTML?
  • A Quick Example
  • HTML Element Examples
  • Document Object Model
  • What Can I Do With HTML?
  • Link to Resources

    • Introduction

    What Is HTML?

    An Image HyperText Markup Language, also known as HTML, is the building blocks of all websites. HTML is combined with CSS and Javascript to further enhance both the functionality and the appearance of the website.

    HTML is a markup languge, not to be confused as a programming language or a scripting language, composed of elements which are used to enclose different parts of the content to make it appear the way the user wishes. Each individual elements has attribute that helps specify the the design the element.

    A Quick Example

    This is a simple HTML document An Image

    As you can see, there are elements such as <body>, <h1>, <p> that encloses other elements or just general texts, and these elements are what structures and encodes the document. You will notice that the general texts that are enclosed by elements are the ones that appear on the page.

    For more examples, feel free to press F12 on any website and checkout the developer tools. You will notice that all the websites will have similar format as this simple HTML document.

    Don't be afraid to try things on the websites, the website will revert back to normal once you refresh the page! This is because the changes you make, will not affect the original source code the website is loaded from

    HTML Element Examples

    • <div> - A generic container
    • <head> - Contains metadata informations about the document
    • <title> - Defines the document title that appears in the page tab or title bar
    • <body> - The main container for the content
    • <p> - Used to create paragraphs
    • <a> - Anchor tag, mostly used to be combined with the href attribute to create hyperlinks to other web pages
    • <li> - Used to create an item list
    • <ul> - Unorder bullet list

    Document Object Model

    HTML follows the document object model, also known as DOM, which is an application programming interface that defines the logical structures for the elements within the HTML documents.The DOM is represented as a tree structure where each element and attribute is a node such that its parent node would be the element that is enclosing it. The model is extremely helpful the user is trying to access and modify elements within a script since users can look for elements by specifying parts of the model they wish to change.

    Structure Example:

    An Image

    Consider this Webpage Example:

    By using "getElementsByTagName("p")", you can find all the paragraph elements within the document.

    const paragraphs = document.getElementsByTagName("p");
paragraphs[0] is the first <p> element
paragraphs[1] is the second <p> element, etc.

    Then you are free to change the individual elements as you wish. You can read more about this in the Javascript resource page

    What Can I Do With HTML?

    • Create websites!

      • The website can be as complicated or as simple as the developer would like.
        • For example the developer can implement a dynamic web page by using Javascripts and other frameworks or just stick to a simple static website
      • You can even create a local hosted website for temporary uses!

      The only limit is your imagination. An Image

    • Internet navigation

      • Utilizing hyperlinks and hypertext, users can be redirected to other web pages, like this CSSC Website!

    • Multiple frameworks to choose from!!

    • Creating games!

      • Web base games by utilizing frameworks and scripts!