Home HTML JavaScript DOM Data Types js-debug

How does HTML work?

  • Similar function to Markdown, identifies how stuff should be displayed
  • HTML is based on tags <tagname>content</tagname>
    • Note the “/” on the ending tag
  • See a markdown to html example below

Markdown

# This is a title

HTML

<h1>This is a title</h1>

Attributes

  • Tags can have additional info in attributes
  • Attributes are in the following format below
<tagname attribute_name="attribute_value" another_attribute="another_value"></tagname>

Some useful tags to know that are similar to markdown

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>

Some new useful tags to know (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
<div>
    <p>Geoguesser is a game made by Google that give you an explorable real life generation of a real place on the world, and based on geographic attributes, you need to guess where the given place is on the world map.</p>
    <button type = "button">click me</button>
    <i>Geoguesser</i>
    <p>We will make a Geoguesser</p>
</div>

<div>
    <p>Links to github and idea sheet</p>
    <a href="https://github.com/will-w-cheng/Team-Influencer-Innovators">TEAM INFLUENCER INNOVATORS</a>
    <a href="https://docs.google.com/document/d/1zrdyzyfYjNBCcGR6giaNl64trvzqST6QLHkerMv3mzc/edit">Doc</a>
    <p>Although we definitely cannot replicate Geoguessr, we made pieces of code which related to Geoguessr, and could help you achieve success in the game.</p>
</div>

Geoguesser is a game made by Google that give you an explorable real life generation of a real place on the world, and based on geographic attributes, you need to guess where the given place is on the world map.

Geoguesser

We will make a Geoguesser

Links to github and idea sheet

TEAM INFLUENCER INNOVATORS Doc

Although we definitely cannot replicate Geoguessr, we made pieces of code which related to Geoguessr, and could help you achieve success in the game.