Creating a Webpage - A Beginner's Guide (HTML, CSS, JavaScript)

Creating a Webpage - A Beginner's Guide (HTML, CSS, JavaScript)

By Naomi A.

Prerequisites:

Before diving in, make sure you have access to a reliable text editor or integrated development environment (IDE) to create your HTML code. I personally recommend Visual Studio Code, an incredibly versatile tool that supports multiple programming languages. It's an excellent choice, especially for web development projects.

Introduction:

Welcome to this beginner-friendly demonstration of creating a simple web page using HTML, CSS, and JavaScript. In just 70 lines of code (with most of it dedicated to styling), you'll witness the possibilities that can be achieved!

Please note that this is not an in-depth tutorial for HTML, CSS, or JavaScript. However, it serves as a great starting point for those who are curious about the potential of these languages.

Here's a summary of what is covered here:

  1. The code starts with a document type declaration (<!DOCTYPE html>) specifying that it's an HTML5 document.
  2. The HTML structure consists of the <html>, <head>, and <body> elements.
  3. The <head> section contains the title of the page and the embedded CSS code for styling.
  4. The CSS code defines styles for various elements, such as the body, headings, paragraphs, and buttons.
  5. Inside the <body> section, we have a heading (<h1>), a paragraph (<p>), and a button (<button>).
  6. The button has a class name "button" for styling purposes and an onclick attribute that triggers the displayMessage() JavaScript function when clicked.
  7. The JavaScript code defines the displayMessage() function, which displays an alert with the message "Hello, World!".
    ^^^^^^ How the web page looks when run (viewing in browser) ^^^^^^

This code provides a simple example of how HTML, CSS, and JavaScript can be combined to create a basic web page. It covers the essential elements and concepts required to get started with web development.

Note:
- The full code is included after the explanation and on the SQL Noggin Github.
- There is also information on how to view the code locally.

 EXPLAINING THE CODE:

Step 1: Document Type Declaration

<!DOCTYPE html>

The <!DOCTYPE html> declaration at the beginning specifies the document type and version as HTML5, which is the latest version of HTML.

Step 2: HTML Structure

<html>
<head>
  <title>Simple Web Page</title>
  <style>
    /* CSS code for styling */
    ...
  </style>
</head>
<body>
  ...
</body>
</html>

The <html> element is the root element of the HTML document. It contains the <head> and <body> sections.

  • The <head> section contains metadata about the document and external resources. In this case, it includes the title of the page (<title>) and the <style> tags for embedding CSS code.
  • The CSS code within the <style> tags is used to define the styles for various elements on the page.

 Step 3: Styling with CSS

/* CSS code for styling */
body {
  font-family: Arial, sans-serif;
  background-color: #f2f2f2;
  margin: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
h1 {
  color: #333333;
  font-size: 36px;
  text-align: center;
  margin-bottom: 20px;
}
p {
  color: #666666;
  font-size: 18px;
  text-align: center;
  margin-bottom: 40px;
}
.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 12px 24px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: #45a049;
}
  • The CSS code is used to style various elements of the web page.
  • body styles define the overall look of the page, including the font family, background color, margin, and padding.
  • Styles for h1 and p elements define the appearance of the heading and paragraph texts.
  • The .button class styles the button element with specific background color, text color, padding, font size, border radius, and more.
  • The .button:hover selector applies a different background color when the button is hovered over, creating a visual effect.
 Step 4: Content in the Body

<h1>Welcome to My Web Page</h1>

<p>This is a demonstration of a simple web page created using HTML, JavaScript, and CSS.</p>

<button class="button" onclick="displayMessage()">Click me</button>

  • The <h1> element displays a heading with the text "Welcome to My Web Page".
  • The <p> element displays a paragraph with a description of the page.
  • The <button> element creates a clickable button with the text "Click me" and a class name "button" for applying the defined styles from CSS.
  • The onclick attribute specifies that the displayMessage() JavaScript function should be executed when the button is clicked.
  • As a bonus I included and <textarea>

    <div>
      <label for="testarea1"> <br> This is an example of a text area
      <br>
      <textarea name="test1area" id="test1" cols="30" rows="3"></textarea>
      </label>
    </div>
Step 5: JavaScript Code

<script>
  // JavaScript code for functionality
  function displayMessage() {
    alert("Hello, World!");
  }
</script>

In this code snippet, we embed JavaScript within the <script> tags. Here's what each part does:

  • The function displayMessage() line defines a JavaScript function called displayMessage(). Functions are reusable blocks of code that perform specific tasks when called.
  • Inside the function body, we have a single statement: alert("Hello, World!");. The alert() function displays a pop-up dialog box with the message "Hello, World!" when called.
  • This function is triggered when the button is clicked, as defined by the onclick="displayMessage()" attribute in the button element.

In summary, when the button with the onclick="displayMessage()" attribute is clicked, it executes the displayMessage() function, which in turn displays an alert box with the message "Hello, World!".

This JavaScript code adds functionality to the web page by defining a function that performs a specific action. It showcases how JavaScript can be used to interact with and manipulate the content of a web page.

SEE THE FULL CODE HERE: (save this as a .html file)

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
  <title>Webpage</title>
  <style>
    /* CSS code for styling */
    body {
      font-family: Arial, sans-serif;
      background-color: #f2f2f2;
      margin: 0;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
    }
    h1 {
      color: #333333;
      font-size: 36px;
      text-align: center;
      margin-bottom: 20px;
    }
    p {
      color: #666666;
      font-size: 18px;
      text-align: center;
      margin-bottom: 40px;
    }
    .button {
      background-color: #4CAF50;
      border: none;
      color: white;
      padding: 12px 24px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    .button:hover {
      background-color: #45a049;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Webpage</h1>
 
  <p>This is a demonstration of a simple webpage created using HTML, JavaScript, and CSS.</p>
 
  <button class="button" onclick="displayMessage()">Click me</button>
  <!-- Add a text area for user typing -->
  <div>
  <label for="testarea1"> <br> This is an example of a text area
    <br>
  <textarea name="test1area" id="test1" cols="30" rows="3"></textarea>
</label>
</div>
  <script>
    // JavaScript code for functionality
    function displayMessage() {
      alert("Hello, World!");
    }
  </script>
</body>
</html>

To access an HTML file using a web browser in Windows, you can follow these steps:

  1. Locate the HTML file you want to open using a web browser. The file may be saved on your desktop, in a specific folder, or in the File Explorer.

  2. Right-click on the HTML file. A context menu will appear.

  3. In the context menu, hover over the "Open With" option. This will display a list of programs that can be used to open the file.

  4. In the "Open With" submenu, select your preferred web browser from the list. Common web browsers include Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, and Opera. If your desired web browser doesn't appear in the list, you can click on the "Choose another app" or "Choose default program" option to browse for the browser executable file manually.

  5. After selecting the web browser, Windows will open the HTML file in the chosen browser, and the web page will be displayed.

Alternatively, if you want to set a default web browser for all HTML files, you can follow these additional steps:

  1. Right-click on the HTML file and select "Properties" from the context menu.

  2. In the Properties window, click on the "Change" button next to the "Opens with" label.

  3. Choose your preferred web browser from the list of available programs or click on the "Browse" button to manually locate the browser executable file.

  4. Once you have selected the web browser, click "OK" to set it as the default program for opening HTML files.

From now on, when you double-click on an HTML file, it will automatically open in the default web browser you have set.

By using the "Open With" option in Windows, you can easily open HTML files in your preferred web browser, allowing you to view and interact with the web page directly on your computer.

Thanks for reading & stay tuned techies!

Best,
Naomi A.

Comments

Post a Comment

Popular posts from this blog

Teaching Computers to Play Tic Tac Toe: A Reinforcement Learning Approach

Image
Teaching Computers to Play Tic Tac Toe: A Reinforcement Learning Approach by Naomi A.  You can see the full code on GitHub: https://github.com/SQLNoggin/Smart-TicTacToe-RL_NaomiA.git This Python script implements a reinforcement learning agent to play the game of Tic Tac Toe. The agent is trained through Q-learning, a type of model-free reinforcement learning that uses a Q-table to estimate the value of taking specific actions in particular states. Let's break down the key aspects:   Overview The script uses the Tkinter library to create a graphical user interface (GUI) where the Tic Tac Toe game can be played. NumPy is used for numerical operations, and the pickle library is used to save and load the Q-table to/from a file. Constant and Hyperparameter Definitions PLAYER_X and PLAYER_O : Constants representing the two players (1 for X and -1 for O). EMPTY : Constant representing an empty cell on the Tic Tac Toe board. ALPHA : The learning rate used in the Q-learning updates. GAMMA
Read more

Run Queries in SQL Server Using Python!

Run Queries in SQL Server Using Python! By Naomi A. This is a fairly quick one - all of the info needed on how the script works is in the comments! The full script is ready for download on GitHub: (LINK) # Import the pyodbc module. #This module allows Python to connect to an ODBC database, like SQL Server. import pyodbc # The variables hold the server name, database name, username, and password. # This is necessary in order to connect to the SQL Server database. server = 'ServerName' database = 'DBName' username = 'user' password = 'password' # Connection string: # This is a formatted string that the ODBC driver uses to know who is connecting (username and password), # where they are connecting to (server and database), # and what driver they are using to make the connection (ODBC Driver 17 for SQL Server). connection_string = f 'DRIVER= {{ ODBC Driver 17 for SQL Server }} ;SERVER= { server } ;DATABASE= { database } ;UID= { username } ;PWD
Read more