Basics of HTML Guide • 15 min read

Home

HTML

Data Types

DOM

JavaScript

JS Debugging

%%html

<div>
    <h3>Novak Djokovic</h3>
    <p>Novak Djokovic (born 22 May 1987) is a Serbian professional tennis player who is currently ranked world No. 1 in singles by the Association of Tennis Professionals (ATP). Djokovic has been ranked No. 1 for a record total of 392 weeks in a record 12 different years, and finished as the year-end No. 1 a record seven times. Djokovic has won an all-time record 24 Grand Slam men's singles titles, including a record ten Australian Open titles. Overall, he has won 96 singles titles, including a record 69 Big Titles (24 majors, a record 39 Masters, and a joint-record six ATP Finals). Djokovic is the only man in tennis history to be the reigning champion of all four majors at once across three different surfaces. In singles, he is the only man to achieve a triple Career Grand Slam, and the only player to complete a career Golden Masters, a feat he has achieved twice.</p>
    <button onclick="goToDjokovicWebsite()">Go to Djokovic Website</button>
    <script>
        function goToDjokovicWebsite() {
            // Redirect to the Djokovic Website
            window.location.href = "https://novakdjokovic.com/en/";
        }
</script>
<br>
    <a href="https://en.wikipedia.org/wiki/Novak_Djokovic" > Djokovic Wikipedia </a>
    <img alt="NovakDjokovic" src="https://talksport.com/wp-content/uploads/sites/5/2023/09/novak-djokovic-serbia-celebrates-victory-843511995.jpg?strip=all&quality=100&w=1780&h=1187&crop=1" width="1780" height="1187">
<div>


<div>
    <h3>Roger Federer</h3>
    <p>Roger Federer (born 8 August 1981) is a Swiss former professional tennis player. Federer was ranked world No. 1 in singles by the Association of Tennis Professionals (ATP) for 310 weeks, including a record 237 consecutive weeks, and finished as the year-end No. 1 five times. He won 103 singles titles on the ATP Tour, the second most of all time, including 20 major men's singles titles, a record eight men's singles Wimbledon titles, an Open Era joint-record five men's singles US Open titles, and a joint-record six year-end championships.</p>
    <a href="https://en.wikipedia.org/wiki/Roger_Federer" >Federer Wikipedia</a>
    <br>
    <a href="https://www.rogerfederer.com/">Federer's Website</a>
    <img alt="RogerFederer" src="https://i.cbc.ca/1.6055365.1622992427!/fileImage/httpImage/federer-roger-210605-1180.jpg" width="1180" height="664">
<div>

Novak Djokovic

Novak Djokovic (born 22 May 1987) is a Serbian professional tennis player who is currently ranked world No. 1 in singles by the Association of Tennis Professionals (ATP). Djokovic has been ranked No. 1 for a record total of 392 weeks in a record 12 different years, and finished as the year-end No. 1 a record seven times. Djokovic has won an all-time record 24 Grand Slam men's singles titles, including a record ten Australian Open titles. Overall, he has won 96 singles titles, including a record 69 Big Titles (24 majors, a record 39 Masters, and a joint-record six ATP Finals). Djokovic is the only man in tennis history to be the reigning champion of all four majors at once across three different surfaces. In singles, he is the only man to achieve a triple Career Grand Slam, and the only player to complete a career Golden Masters, a feat he has achieved twice.

Djokovic Wikipedia

Roger Federer

Roger Federer (born 8 August 1981) is a Swiss former professional tennis player. Federer was ranked world No. 1 in singles by the Association of Tennis Professionals (ATP) for 310 weeks, including a record 237 consecutive weeks, and finished as the year-end No. 1 five times. He won 103 singles titles on the ATP Tour, the second most of all time, including 20 major men's singles titles, a record eight men's singles Wimbledon titles, an Open Era joint-record five men's singles US Open titles, and a joint-record six year-end championships.

Federer Wikipedia
Federer's Website

# 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](https://www.w3schools.com/html/html_headings.asp) and [paragraph](https://www.w3schools.com/html/html_paragraphs.asp). Click on links to see many more HTML examples. ```python %%markdown ### Markdown: This is a Heading This is a paragraph ``` ### Markdown: This is a Heading This is a paragraph ```python %%html

HTML: This is a Heading

This is a paragraph.

```

HTML: This is a Heading

This is a paragraph.

# Attributes - Learn about [attributes](https://www.w3schools.com/html/html_attributes.asp) - Tags can have additional info in the form of attributes - Attributes usually come in name/value pairs like: name="value" ```html inner html text ``` - href example with attribute for web link and inner html to describe link ```html Visit W3Schools HTML Page ``` ## Sample Markdown vs HTML Tags Image Tag - Markdown ```md  ``` Image Tag - HTML ```html ``` Link Tag - Markdown ```md [link text](link) ``` Link Tag - HTML ```html link text ``` Bolded Text - Markdown ```md **Bolded Text** ``` Bolded Text - HTML ```md Bolded Text ``` Italic Text - Markdown ```md *Italic Text* ``` Italic Text - HTML ```md Italic Text ``` # More tags (not really in markdown) P tag (just represeants a paragraph/normal text) ```html

This is a paragraph

``` Button ```html ``` Div (groups together related content) ```html

This is the first paragarph of section 1

This is the second paragraph of section 1

This is the first paragarph of section 2

This is the second paragraph of section 2

``` # 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  ```python %%html ```