HTML, CSS, and JavaScript in Visual Studio Code

It is important to know that all websites and webpages in them, including this one, are built using HTML, CSS, and JavaScript. HTML, which stands for HyperText Markup Language, is not actually considered a programming language, it is, appropriately enough, a markup language. It uses tags which are code words contained within the < and > symbols. All HTML files start with <!DOCTYPE html> and end with </html>. The content of the webpage goes between these two tags. There is usually a <head> section which contains metadata and can possibly contain links to stylesheets and scripts, followed by a <body> section which contains the content of the webpage.

If CSS, which stands for Cascading Style Sheets, is used and exists within the <style> and </style> tags. CSS is really used strictly for improving the superficial appeal of the webpage and a user of CSS (and HTML to some extent also) should consider themselves to be a kind of website and webpage graphic designer. CSS code looks separate and distinct from HTML code and is sometimes written in a separate file with the .css extension. In either a .css file or within the <style> tags, CSS code is written in a syntax that includes things like selectors, functions, and variables that exist within the curly braces { and }. CSS is used to style the webpage and make it visually appealing, but it does not add any interactivity or dynamic behavior to the webpage.

JavaScript is the most powerful programming language used in website and webpage development. It is used to add interactivity and dynamic behavior to webpages. JavaScript code can be written within <script> and </script> tags, or it can be written in a separate file with the .js extension. JavaScript code can manipulate the HTML and CSS of a webpage, allowing for things like form validation, animations, and interactive elements. It is an essential part of modern web development and is used to create engaging and interactive user experiences.

If you have any questions on how to use these languages it is highly recommended that you use either Google Gemini, ChatGPT or Anthropic's Claude to ask for help. These AI language models are very powerful and can provide detailed explanations and code examples to help you understand how to use HTML, CSS, and JavaScript effectively in your web development projects.

Below is an example of a simple HTML page with embedded CSS and JavaScript. You can copy and paste this into any text editor (like BBEdit on macOS or Pulsar on either macOS or Windows) file, save it with the .html extension, and open it in a web browser just by double-clicking on the file to see how it looks. It is easy to see in the below example the <html>, <head>, and <body> tags, as well as the <style> and <script> tags where CSS and JavaScript are implemented.

To use the program below copy and paste the code into a text editor and save the file with a name that is something like MultiMediaWebpage.html to either your home directory or your Documents directory. Use either the Finder or the Terminal to find the file. If using the Terminal you would have to enter the following commands:

cd /Users/raymondstone/NewWebsite
followed by
open index.html

There are three main things to notice when running the example program below. First, at the top is an image that when clicked on will take you to Google. Second, there is a video element that allows you to play a video directly on the webpage. Third, there is an audio player with a play button and a volume slider that will play an audio sample.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Brand New Website!</title>
    <link rel="icon" type="image/svg+xml" href="favicon.svg?v=7">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
</head>
<body>

<nav>
    <div class="nav-links">
        <a href="index.html">Home</a>
    </div>
</nav>

<div class="container">My Brand New Website!

    <style>

    </style>

    <script>

    </script>


<footer>
    <p>© 2026 My Name. All Rights Reserved.</p>
</footer>

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-c.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-matlab.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-latex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-csound.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-c.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-cpp.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-objectivec.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-matlab.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-latex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-csound.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-html.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-coffeescript.min.js"></script>

<script src="script.js"></script>
</body>
</html>