How does HTML work?

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

  • HTML is based on beginning and closing tags content
    • 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>

  File "/tmp/ipykernel_8958/1482544360.py", line 1
    <tagname attribute_name="attribute_value" another_attribute="another_value">inner html text</tagname>
    ^
SyntaxError: invalid syntax
  • 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>

  File "/tmp/ipykernel_8958/2740664343.py", line 1
    <a href="https://www.w3schools.com/html/default.asp">Visit W3Schools HTML Page</a>
    ^
SyntaxError: invalid syntax

Sample Markdown vs HTML Tags

Image Tag - Markdown

![describe image](link to image)

/bin/bash: -c: line 1: syntax error near unexpected token `('
/bin/bash: -c: line 1: `[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">

  File "/tmp/ipykernel_8958/617500658.py", line 1
    <!-- no content so no end tag, width/height is optional (in pixels) -->
    ^
SyntaxError: invalid syntax

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

“p” tag (just represeants a paragraph/normal text)

<p>This is a paragraph</p>

Button

<p>This is a paragraph</p>

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

<html>
<head>
    <style>
        .div1 {
            border: none;
            background-color: white;
            text-align: left;
            color: black;
            padding-top: 5px;
            padding-bottom: 10px;
            padding-left: 15px;
            padding-right: 15px;
            margin-bottom: 10px;
        }

        .div2 {
            border: 5px outset blue;
            background-color: white;
            text-align: left;
            color: black;
            padding-top: 15px;
            padding-bottom: 5px;
            padding-left: 15px;
            padding-right: 15px;
        }
    </style>
</head>

<body>
    <div class="div1">
        <p id="toggleParagraph">Click this button to toggle visibility</p>
        <button onclick="toggleVisibility()">This is a button</button>
    </div>
    <div class="div2">
        <a target="_blank" href="https://frogpants.github.io/student/">Link to Spencer's page</a><br>
        <a target="_blank" href="https://seannakagawa.github.io/student/">Link to Sean's page</a><br>
        <a target="_blank" href="https://github.com/Trystan-Schmits/Student1">Link to Trystan's page</a><br>
        <a target="_blank" href="https://zafeera123.github.io/ZafeerA123/">Link to Zafeer's page</a><br>
        <a target="_blank" href="INPUT GAME LINK">Link to our game</a>
        <p>The name of our game is... </p>
    </div>

    <script>
        function toggleVisibility() {
            // Get the paragraph element
            var paragraph = document.getElementById('toggleParagraph');

            // Toggle visibility
            paragraph.style.display = (paragraph.style.display === 'none') ? 'block' : 'none';
        }
    </script>
</body>

</html>

<!DOCTYPE html>

Click this button to toggle visibility

Link to Spencer's page
Link to Sean's page
Link to Trystan's page
Link to Zafeer's page
Link to our game

The name of our game is..