Frontend

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

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 cell that corresponds to the below wireframe.
• The “a tags” contain links to other content
• Pick any topic but try to match the plan

%%html
<!-- put your HTML code in this cell, Make sure to press the Run button to see your results below -->

<div>
    <p style="border: 2px solid #ff0000; color: #FFFF; paddding: 12px; border-radius: 5px;">
     paragraph
    </p>
     
    <button class="cta">
        <span>Button</span>
         <svg width="15px" height="10px" viewBox="0 0 13 10">
        <path d="M1,5 L11,5"></path>
        <polyline points="8 1 12 5 8 9"></polyline>
        </svg>
    </button>

</div>

<div style="margin-top: 22px;">
    <style>
.cta {
    position: relative;
    margin: auto;
    padding: 12px 18px;
    transition: all 0.2s ease;
    border: none;
    background: none;
    cursor: pointer;
  }
  
  .cta:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border-radius: 50px;
    background: #b1dae7;
    width: 45px;
    height: 45px;
    transition: all 0.3s ease;
  }
  
  .cta span {
    position: relative;
    font-family: "Ubuntu", sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #234567;
  }
  
  .cta svg {
    position: relative;
    top: 0;
    margin-left: 10px;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: #234567;
    stroke-width: 2;
    transform: translateX(-5px);
    transition: all 0.3s ease;
  }
  
  .cta:hover:before {
    width: 100%;
    background: #b1dae7;
  }
  
  .cta:hover svg {
    transform: translateX(0);
  }
  
  .cta:active {
    transform: scale(0.95);
  }
  
    </style>

    <a href="https://example.com/" style="border: 2px solid #1E90FF; color: #1e76cf; display: block; padding: 10px; border-radius: 5px; text-align: center; margin-bottom: 10px; text-decoration: none;">
        A
    </a>
    <a href="https://example.com/" style="border: 2px solid #1f8efd; color: #1E90FF; display: block; padding: 10px; border-radius: 5px; text-align: center; margin-bottom: 10px; text-decoration: none;">
        A
    </a>
    <p style="border: 2px solid #032d88; color: #FFFF; paddding: 12px; border-radius: 5px;">  
        paragraph
    </p>
</div>

paragraph

A A

paragraph