 |
Home | HTML | Data Types | DOM | JavaScript | JS Debugging | Review Ticket |
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
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
%%html
<!-- put your HTML code in this cell, Make sure to press the Run button to see your results below -->
<div>
<p>Valorant is a dynamic and strategic first-person shooter developed by Riot Games, known for their massive success with League of Legends. Released in June 2020, Valorant quickly garnered a dedicated player base and established itself as a competitive esports title. Set in a near-futuristic world, the game pits two teams of five players against each other, with one team taking on the role of attackers trying to plant a Spike (a bomb) at designated sites, and the other team as defenders, striving to thwart their plans. What sets Valorant apart from other FPS games is its blend of precise gunplay reminiscent of Counter-Strike with a unique roster of "Agents," each possessing distinct abilities that add layers of strategy and team coordination to the gameplay. The diversity of agents allows for a wide range of playstyles, from stealthy and tactical to aggressive and explosive, ensuring that every player can find their niche. Valorant's competitive scene has flourished with numerous tournaments and leagues worldwide, offering substantial prize pools and attracting top-tier professional players. Riot Games' commitment to regularly updating the game, balancing agents and weapons, and introducing new content keeps the experience fresh and engaging for both casual and competitive players. The game's emphasis on communication, teamwork, and precise aiming skills makes it a thrilling and intellectually stimulating experience, as players constantly adapt and strategize to outmaneuver their opponents. Whether you're a newcomer or a seasoned FPS veteran, Valorant offers an exhilarating and challenging gaming experience that continues to evolve and captivate players around the globe.</p>
<p>Do you feel as if you're not good enough? Do you wish to get better? Do you want to aim better? Get better game sense? Learn how to master your agents? Click the button to begin ranking up!</p>
<button>Click Me to Get Better!</button>
</div>
<br>
<br>
<div>
<a href="https://tracker.gg/valorant">Valorant Tracker</a>
<br>
<a href="https://www.3daimtrainer.com/">Aim Trainer</a>
<p>These websites are beneficial to your progress in Valorant. Click on these websites for more information!</p>
Valorant is a dynamic and strategic first-person shooter developed by Riot Games, known for their massive success with League of Legends. Released in June 2020, Valorant quickly garnered a dedicated player base and established itself as a competitive esports title. Set in a near-futuristic world, the game pits two teams of five players against each other, with one team taking on the role of attackers trying to plant a Spike (a bomb) at designated sites, and the other team as defenders, striving to thwart their plans. What sets Valorant apart from other FPS games is its blend of precise gunplay reminiscent of Counter-Strike with a unique roster of "Agents," each possessing distinct abilities that add layers of strategy and team coordination to the gameplay. The diversity of agents allows for a wide range of playstyles, from stealthy and tactical to aggressive and explosive, ensuring that every player can find their niche. Valorant's competitive scene has flourished with numerous tournaments and leagues worldwide, offering substantial prize pools and attracting top-tier professional players. Riot Games' commitment to regularly updating the game, balancing agents and weapons, and introducing new content keeps the experience fresh and engaging for both casual and competitive players. The game's emphasis on communication, teamwork, and precise aiming skills makes it a thrilling and intellectually stimulating experience, as players constantly adapt and strategize to outmaneuver their opponents. Whether you're a newcomer or a seasoned FPS veteran, Valorant offers an exhilarating and challenging gaming experience that continues to evolve and captivate players around the globe.
Do you feel as if you're not good enough? Do you wish to get better? Do you want to aim better? Get better game sense? Learn how to master your agents? Click the button to begin ranking up!
Aim Trainer
These websites are beneficial to your progress in Valorant. Click on these websites for more information!