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>

%%html
<html>
<head>
    <title>Wireframe Example</title>
</head>
<body>
    <!-- Section 1 -->
    <div>
        <p>A cool paragraph talking about why you should click this 100% not sus button</p>
        <button>Click Me</button>
    </div>
    <!-- Section 2 -->
    <div>
        <a href="https://srijdude3416.github.io/student/">My Github Website</a>
        <a href="https://youtube.com">Youtube Link</a>
    </div>
</body>
</html>

Wireframe Example

A cool paragraph talking about why you should click this 100% not sus button

My Github Website Youtube Link

%%html

<!DOCTYPE html>
<html>
<head>
    <title>Wireframe Example</title>
</head>
<body>
    <!-- Section 1 -->
    <div>
        <p id="status">Text over a button</p>
        <button id="switchButton">Switch Links</button>
    </div>
    <!-- Section 2 -->
    <div>
        <a href="/student/" id="link1">Home page</a>
        <a href="/student/compsci" id="link2">Compsci home</a>
    </div>
    <script>
        // Get references to elements
        const statusParagraph = document.getElementById('status');
        const switchButton = document.getElementById('switchButton');
        const link1 = document.getElementById('link1');
        const link2 = document.getElementById('link2');
        // Function to switch links and update status paragraph
        switchButton.addEventListener('click', function() {
            const tempHref = link1.href;
            link1.href = link2.href;
            link2.href = tempHref;
            statusParagraph.innerHTML = 'Switched!';
        });
    </script>
</body>
</html>

<!DOCTYPE html>

Wireframe Example

Text over a button

Home page Compsci home

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