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

wireframe for html hacks

%%html

<h1 style= "color: rgb(228, 41, 228)">  Hack for HTML</h1>

<div>
<p title="Lung Cancer "> <h4>Lung Cancer</h4></p>

  
</div>
<button type="button" title="The cancer vaccine OSE2101 has shown promising results in a phase 3 trial for patients with HLA-A2+ advanced NSCLC and secondary resistance to ICIs." onclick="alert('The cancer vaccine OSE2101 has shown promising results in a phase 3 trial for patients with HLA-A2+ advanced NSCLC and secondary resistance to ICIs.')">
  What's the latest in the world of cancer research?
</button>

<button type="button"> 
  <a href = "https://www.cancertherapyadvisor.com/home/cancer-topics/lung-cancer/ose2101-vaccine-outperforms-standard-care-in-certain-patients-with-nsclc/" > Link to cancer news article HERE </a>
</button> 

<p title="How does Cancer Develop?"> <h4>How does Cancer Develop?</h4></p>

<div>
<button type="button">
  <a href="https://www.khanacademy.org/science/ap-biology/cell-communication-and-cell-cycle/regulation-of-cell-cycle/a/cancer" title="Cell cycle+Cancer" style="color: rgb(32, 32, 91); border: none blue; padding: 5px 64px; background-color: rgba(131, 184, 209, 0.708)">
    Click This helpful Link To learn how Cancer develops!
  </a>
</button>
</div>
<!--this is a button which will be made to be diplayed and to be clicked on-->
<p style="color: darkcyan"> Prevention </p>
<button id="Onclick" onclick="addPTagOnButton()">How can you help to prevent lung cancer (click me)?</button>
    <div id="OnclickContainer"></div>

    <script>
        // Function to create a new paragraph element which will be used every single time the button is clicked because the new message should require a new paragraph!
        function createPTag(text) {
          //need to create a new element, p, which stands for paragraph. we use .document to do this
            var element = document.createElement("p");
            element.innerHTML = text;
            //  indicating what value the function should be produced as a result
            return element;
        }

        // Function to add a paragraph to the container when the button is clicked
        function addPTagOnButton() {
            var pTag = createPTag("QUIT SMOKING!");
            var div = document.getElementById("OnclickContainer");
            div.appendChild(pTag);
        }
    </script>

 

Hack for HTML

Lung Cancer

How does Cancer Develop?

Prevention

<script>
    // Function to create a new paragraph element which will be used every single time the button is clicked because the new message should require a new paragraph!
    function createPTag(text) {
      //need to create a new element, p, which stands for paragraph. we use .document to do this
        var element = document.createElement("p");
        element.innerHTML = text;
        //  indicating what value the function should be produced as a result
        return element;
    }

    // Function to add a paragraph to the container when the button is clicked
    function addPTagOnButton() {
        var pTag = createPTag("QUIT SMOKING!");
        var div = document.getElementById("OnclickContainer");
        div.appendChild(pTag);
    }
</script>

Hack for HTML!!!! • 13 min read

Description