 |
Home | HTML | Data Types | DOM | JavaScript | JS Debugging |
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
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
<html>
<head>
<style>
.box {
width: 150px;
height: 50px;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
color: black;
position: relative;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
50% {background-color:yellow; left:200px; top:0px;}
100% {background-color:red; left:0px; top:0px;}
}
.p1 {
font-family: "Lucida Console", "Courier New", monospace;
text-align: center;
line-height: 50px;
font-size: 30px;
text-shadow: 2px 2px 5px greenyellow;
}
</style>
</head>
<body>
<div class='p1'>
<div class='box'>
<p>Tennis</p>
</div>
<strong>I been playing for 5 years</strong>
<button type="button">Click Me!</button>
<p><a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<p>Tennis</p>
</div>
</body>
<script>
// create a function => takes in text, returns created p
function createPTag(text) {
// creates a new element
var pElement = document.createElement("p")
// using the parameter like a variable
pElement.innerHTML = text
return pElement;
}