Basics of HTML Guide • 18 min read

Home

HTML

Data Types

DOM

JavaScript

JS Debugging

How does HTML work?

Similar function to Markdown, syntax defines how stuff should be displayed

• HTML is based on beginning and closing tags <tagname>content</tagname>
  • Note the “/” on the ending or closing tag of the pair

Compare markdown to html below

This below example shows comparison of a heading and paragraph. Click on links to see many more HTML examples.

%%markdown

### Markdown: This is a Heading

This is a paragraph

Markdown: This is a Heading

This is a paragraph

%%html

<h3>HTML: This is a Heading</h3>
<p>This is a paragraph.</p>

HTML: This is a Heading

This is a paragraph.

Attributes

• Learn about attributes
• Tags can have additional info in the form of attributes
• Attributes usually come in name/value pairs like: name=”value”

<tagname attribute_name="attribute_value" another_attribute="another_value">inner html text</tagname>

• href example with attribute for web link and inner html to describe link

<a href="https://www.w3schools.com/html/default.asp">Visit W3Schools HTML Page</a>

Sample Markdown vs HTML Tags

Image Tag - Markdown

![describe image](link to image)

Image Tag - HTML

<!-- no content so no end tag, width/height is optional (in pixels) -->
<img alt="describe image" src="link to image" width="100" height="200">

Link Tag - Markdown

[link text](link)

Link Tag - HTML

<a href="link">link text</a>

Bolded Text - Markdown

**Bolded Text**

Bolded Text - HTML

<strong>Bolded Text</strong>

Italic Text - Markdown

*Italic Text*

Italic Text - HTML

<i>Italic Text</i>

More tags (not really in markdown)

P tag (just represeants a paragraph/normal text)

<p>This is a paragraph</p>

Button

<button>some button text</button> 

Div (groups together related content)

<!-- first information -->
<div>
    <!-- notice how tags can be put INSIDE eachother -->
    <p>This is the first paragarph of section 1</p>
    <p>This is the second paragraph of section 1</p>
</div>

<!-- second information -->
<div>
    <!-- notice how tags can be put INSIDE eachother -->
    <p>This is the first paragarph of section 2</p>
    <p>This is the second paragraph of section 2</p>
</div>

Resources

• https://www.w3schools.com/html/default.asp
• I will show a demo of how to find information on this website

HTML Hacks

• Below is a wireframe for an HTML element you will create. A wireframe is a rough visual representation of HTML elements on a page and isn’t necessarily to scale or have the exact styling that the final HTML will have. Using the syntax above, try to create an HTML snippet that corresponds to the below wireframe.
• The “a tags” can contain any links that you want

%%html

<!-- put your HTML code in this cell, Make sure to press the Run button to see your results below -->
<!-- CODE WRITTEN BY RAYYAN DARUGAR AND Mateusz Rybczonec -->
<style> 
    body {
        font-family: sans-serif;
        display: grid;
        height: 100vh;
        place-items: center;
      }
      
      .base-timer {
        position: relative;
        width: 300px;
        height: 300px;
      }
      
      .base-timer__svg {
        transform: scaleX(-1);
      }
      
      .base-timer__circle {
        fill: none;
        stroke: none;
      }
      
      .base-timer__path-elapsed {
        stroke-width: 7px;
        stroke: grey;
      }
      
      .base-timer__path-remaining {
        stroke-width: 7px;
        stroke-linecap: round;
        transform: rotate(90deg);
        transform-origin: center;
        transition: 1s linear all;
        fill-rule: nonzero;
        stroke: currentColor;
      }
      
      .base-timer__path-remaining.green {
        color: rgb(65, 184, 131);
      }
      
      .base-timer__path-remaining.orange {
        color: orange;
      }
      
      .base-timer__path-remaining.red {
        color: red;
      }
      
      .base-timer__label {
        position: absolute;
        width: 300px;
        height: 300px;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 48px;
      }

</style>

<html>
    <!--<div id="stopwatch">00:00:00</div>
    <button onclick="startStopwatch()">Start</button>
    <button onclick="stopStopwatch()">Stop</button>
    <button onclick="resetStopwatch()">Reset</button> -->
  <!-- first information -->
  <button 
    onclick="getUserInput()">Input Time
    
  </button>
  <div id="app"></div>


  <div>
      <!-- notice how tags can be put INSIDE eachother -->
      <p>Click me to start a work timer</p>
      <p>Use this to time your assignments and input durations</p>
  </div>

  <!-- second information -->
  <div>
      <!-- notice how tags can be put INSIDE eachother -->
      <p>List out your homework subject, the time you spent working on it, and the importance of that classes homework (out of 5)  </p>
  </div>

  <form id ="Schedule">
      Subject:<br> <input type="text" name="subject" id ="subject">  <br><br>
      <br>
      Time Spent (Input as x:xx):<br> <input type="text" name="time" id ="time"> <br><br>
      <br>
      Homework Importance:<br> <input type="text" name="rank" id ="rank"> <br><br>
      
      <input type="submit" value="Create Object">
  </form>

 <!-- <div id="result"></div> -->

</html>

<script> 

  function getUserInput(){
    let timevalue = prompt("Enter Your Countdown Time");
    console.log(timevalue);
    TIME_LIMIT = timevalue;
    timePassed = 0;
    timeLeft = 0;
    startTimer();
  }
  /*
  function createSchedule(){
    event.preventDefault(); // Prevent the form from submitting

    var subject = document.getElementById("subject").value;
    var time = document.getElementById("time").value;
    var rank = document.getElementById("rank").value;

    var schedule = {
      subject: subject,
      time: time,
      rank: rank
    };

    // Display the created object
    var resultDiv = document.getElementById("result");
    resultDiv.innerHTML = "Created Object: " + JSON.stringify(schedule);

    var form = document.getElementById("Schedule");
    form.addEventListener("submit", createObject);
    
    console.log(schedule)

   }
  */
  
  
    // Credit: Mateusz Rybczonec

  const FULL_DASH_ARRAY = 283;
  const WARNING_THRESHOLD = 10;
  const ALERT_THRESHOLD = 5;

  const COLOR_CODES = {
    info: {
      color: "green"
    },
    warning: {
      color: "orange",
      threshold: WARNING_THRESHOLD
    },
    alert: {
      color: "red",
      threshold: ALERT_THRESHOLD
    }
  };

  let TIME_LIMIT = 0;
  let timePassed = 0;
  let timeLeft = TIME_LIMIT;
  let timerInterval = null;
  let remainingPathColor = COLOR_CODES.info.color;

  document.getElementById("app").innerHTML = `
  <div class="base-timer">
    <svg class="base-timer__svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <g class="base-timer__circle">
        <circle class="base-timer__path-elapsed" cx="50" cy="50" r="45"></circle>
        <path
          id="base-timer-path-remaining"
          stroke-dasharray="283"
          class="base-timer__path-remaining ${remainingPathColor}"
          d="
            M 50, 50
            m -45, 0
            a 45,45 0 1,0 90,0
            a 45,45 0 1,0 -90,0
          "
        ></path>
      </g>
    </svg>
    <span id="base-timer-label" class="base-timer__label">${formatTime(
      timeLeft
    )}</span>
  </div>
  `;
  
  function playSound () {
    let ding = new Audio('/student/images/ding.mp3');
    ding.play();
  }

  function onTimesUp() {
    clearInterval(timerInterval);
    timePassed = 0;
    timeLeft = 0;
    TIME_LIMIT = 0;
    playSound();
  }

  function startTimer() {
    timerInterval = setInterval(() => {
      timePassed = timePassed += 1;
      timeLeft = TIME_LIMIT - timePassed;
      document.getElementById("base-timer-label").innerHTML = formatTime(
        timeLeft
      );
      setCircleDasharray();
      setRemainingPathColor(timeLeft);

      if (timeLeft <= 0) {
        onTimesUp();
      }
    }, 1000);
  }

  function formatTime(time) {
    const minutes = Math.floor(time / 60);
    let seconds = time % 60;

    if (seconds < 10) {
      seconds = `0${seconds}`;
    }
    if (time <= 0) {
      
      return "0:00";

    }
    return `${minutes}:${seconds}`;
  }

  function setRemainingPathColor(timeLeft) {
    const { alert, warning, info } = COLOR_CODES;
    if (timeLeft <= alert.threshold) {
      document
        .getElementById("base-timer-path-remaining")
        .classList.remove(warning.color);
      document
        .getElementById("base-timer-path-remaining")
        .classList.add(alert.color);
    } else if (timeLeft <= warning.threshold) {
      document
        .getElementById("base-timer-path-remaining")
        .classList.remove(info.color);
      document
        .getElementById("base-timer-path-remaining")
        .classList.add(warning.color);
    }
  }

  function calculateTimeFraction() {
    const rawTimeFraction = timeLeft / TIME_LIMIT;
    return rawTimeFraction - (1 / TIME_LIMIT) * (1 - rawTimeFraction);
  }

  function setCircleDasharray() {
    const circleDasharray = `${(
      calculateTimeFraction() * FULL_DASH_ARRAY
    ).toFixed(0)} 283`;
    document
      .getElementById("base-timer-path-remaining")
      .setAttribute("stroke-dasharray", circleDasharray);
  }
</script>

Click me to start a work timer

Use this to time your assignments and input durations

List out your homework subject, the time you spent working on it, and the importance of that classes homework (out of 5)

Subject:



Time Spent (Input as x:xx):



Homework Importance:

// Assuming you have a function to handle profile selection
function selectProfile(userId) {
    fetch(`/api/user/${userId}`)
      .then(response => response.json())
      .then(data => {
        // Update the UI to display the user's profile data
        // data will contain the user-specific information
      })
      .catch(error => console.error(error));
  }
  

---
comments: true
layout: post
title: User Profile
description: User Profiles 
type: hacks
courses: { compsci: {week: 3} }
---