HTML, CSS, and JavaScript in Pulsar

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 MyWebsiteFirstPage.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/administratorname/Developer/NewWebsite
Now that you have navigated inside your new website's developer directory you can use the touch command to create a new file: 
touch index.html
You can open your newly created index.html file that contains the code for the first page of your website with the below command: 
open index.html
or right-click on the file in your Finder and choose the Pulsar, Neovim or other text editor to open the file that way.

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>Title</title>
    <link rel="icon" type="image/png" href="AppIconSymmetricBrownCenter0.png">
    <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">
<p>Here is the first paragraph of text where all important thoughts
relating to your website go.<p>

    <style>
    <!--Here is where CSS code goes or in a separate .css file for an
    implementation that is applied to a set of .html files. CSS was created
    specifically for superficial purposes; making a website look better-->
    </style>

    <script>
    <!--Here is where JavaScript code goes or in a separate .js file for an
    implementation that is applied ot a set of .html files, in a way similar to
    that of a separate .css file mentioned above. Unlike HTML and, especially
    CSS, that dictate how the website look, JavaScript does much more and is
    the toolset for dynamic, interactive GUIs and functionality that goes beyond
    the superficial appeal of a website.-->
    </script>


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


</body>
</html>