smhnickk
Notable Member
- Sep 1, 2020
- 667
- 3,451
For some reason i learned JS before HTML and have been using codeacademy before I get into a computer science class. any wrong notes?
<body>
<h1>The Brown Bear</h1>
<div id="Introduction">
<h2>About Brown Bears</h2>
<h3>Species</h3>
<h3>Features</h3>
</div>
<div id="Habitat">
<h2>Habitat</h2>
<h3>Countries with Large Brown Bear Populations</h3>
<h3>Countries with Small Brown Bear Populations</h3>
</div>
<div id="Media">
<h2>Media</h2>
</div>
</body>
<body> is basically the structure of a paragraph, making it easier to organize.
<div> helps add more things easier.
<h2>,<h1>,<h3>,<h4>,<h0> are basically text sizes.
Ids put into divs are attributes, such as <div id="wow">
<p> is basically print("something") but in html
The <em> tag will generally render as italic emphasis.
The <strong> will generally render as bold emphasis.
Example: <p><strong>The Nile River</strong> is the <em>longest</em> river in the world,
measuring over 6,850 kilometers long (approximately 4,260 miles).</p>
The spacing between code in an HTML file doesn’t affect the positioning of elements in the browser. If you are interested in modifying the spacing in the browser, you can use HTML’s line break element: <br>.
The line break element is unique because it is only composed of a starting tag. You can use it anywhere within your HTML code and a line break will be shown in the browser.
In addition to organizing text in paragraph form, you can also display content in an easy-to-read list.
In HTML, you can use an unordered list tag (<ul>) to create a list of items in no particular order. An unordered list outlines individual list items with a bullet point.
The <ul> element should not hold raw text and won’t automatically format raw text into an unordered list of items. Individual list items must be added to the unordered list using the <li> tag. The <li> or list item tag is used to describe an item in a list. example:
<ul>
<li>Limes</li>
<li>Tortillas</li>
<li>Chicken</li>
</ul>
Ordered lists (<ol>) are like unordered lists, except that each list item is numbered. They are useful when you need to list different steps in a process or rank items for first to last.
You can create the ordered list with the <ol> tag and then add individual list items to the list using <li> tags.
<ol>
<li>Preheat the oven to 350 degrees.</li>
<li>Mix whole wheat flour, baking soda, and salt.</li>
<li>Cream the butter, sugar in separate bowl.</li>
<li>Add eggs and vanilla extract to bowl.</li>
</ol>
<img> adds images to places you want them to be it closes like this <img src=https://wow.com />
<img src="#" alt="https://wowdude.org" /> to let users hover their mouse over the image and read it,
or the visually impaired gets the image read to them.
<video> is the same as img but with a closing tag example:
<video src="https://wowthisisvideo" width="330" height="520" controls>
video not supported
</video>
<!DOCTYPE html> Should be at the start of every HTML file.
<!DOCTYPE html>
<html>
</html> should be at the start of every HTML code so browsers dont misinterpret it.
<head> should go above <body>
same for </head>
<title> is the title of your webpage example:
<title>wowwowo</title>
It should show as the titlebar when on the page. should be between everything like this:
<!DOCTYPE html>
<html>
<head>
<title>awesome.</title>
</head>
</html>
You can add links to other pages by using the <a> tag
Example: <a href="https://en.wikipedia.org/">Link to wikipedia</a>
using the target attribute : <a href="https://en.wikipedia.org/"target="_blank">Link to wikipedia</a>
to make an image a link do this: <a href="https://en.wikipedia.org/wiki/Brown_bear" target="_blank"><img src="https://content.codecademy.com/courses/web-101/web101-image_brownbear.jpg"/></a>
to make a sentence scroll to a specific area do this: example: <ul>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#habitat">Habitat</a></li>
<li><a href="#media">Media</a></li>
</ul>
Tables:
Tables hold information.
Examples:
<table>
<tr>
<td>Woww!</td>
<td>Awesome!</td>
<td>Crazy</td>
</tr>
</table>
Table heading element: <th>
<table>
<tr>
<th></th>
<th scope="col">Saturday</th>
<th scope="col">Sunday</th>
</tr>
<tr>
<th scope="row">Temperature</th>
<td>73</td>
<td>81</td>
</tr>
</table>
Note, also, the use of the scope attribute, which can take one of two values:
row - this value makes it clear that the heading is for a row.
col - this value makes it clear that the heading is for a column.
Table Borders:
Example:
<table border="1">
<tr>
<td>73</td>
<td>81</td>
</tr>
</table>
Makes tables easier to read.
Spanning columns:
Example:
<table>
<tr>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
</tr>
<tr>
<td rowspan="2">Out of Town</td>
<td>Back in Town</td>
</tr>
</table>
Spanning rows:
You get the idea,
<table>
<tr>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
</tr>
<tr>
<td rowspan="2">Out of Town</td>
<td>Back in Town</td>
</tr>
</table>
<body>
<h1>The Brown Bear</h1>
<div id="Introduction">
<h2>About Brown Bears</h2>
<h3>Species</h3>
<h3>Features</h3>
</div>
<div id="Habitat">
<h2>Habitat</h2>
<h3>Countries with Large Brown Bear Populations</h3>
<h3>Countries with Small Brown Bear Populations</h3>
</div>
<div id="Media">
<h2>Media</h2>
</div>
</body>
<body> is basically the structure of a paragraph, making it easier to organize.
<div> helps add more things easier.
<h2>,<h1>,<h3>,<h4>,<h0> are basically text sizes.
Ids put into divs are attributes, such as <div id="wow">
<p> is basically print("something") but in html
The <em> tag will generally render as italic emphasis.
The <strong> will generally render as bold emphasis.
Example: <p><strong>The Nile River</strong> is the <em>longest</em> river in the world,
measuring over 6,850 kilometers long (approximately 4,260 miles).</p>
The spacing between code in an HTML file doesn’t affect the positioning of elements in the browser. If you are interested in modifying the spacing in the browser, you can use HTML’s line break element: <br>.
The line break element is unique because it is only composed of a starting tag. You can use it anywhere within your HTML code and a line break will be shown in the browser.
In addition to organizing text in paragraph form, you can also display content in an easy-to-read list.
In HTML, you can use an unordered list tag (<ul>) to create a list of items in no particular order. An unordered list outlines individual list items with a bullet point.
The <ul> element should not hold raw text and won’t automatically format raw text into an unordered list of items. Individual list items must be added to the unordered list using the <li> tag. The <li> or list item tag is used to describe an item in a list. example:
<ul>
<li>Limes</li>
<li>Tortillas</li>
<li>Chicken</li>
</ul>
Ordered lists (<ol>) are like unordered lists, except that each list item is numbered. They are useful when you need to list different steps in a process or rank items for first to last.
You can create the ordered list with the <ol> tag and then add individual list items to the list using <li> tags.
<ol>
<li>Preheat the oven to 350 degrees.</li>
<li>Mix whole wheat flour, baking soda, and salt.</li>
<li>Cream the butter, sugar in separate bowl.</li>
<li>Add eggs and vanilla extract to bowl.</li>
</ol>
<img> adds images to places you want them to be it closes like this <img src=https://wow.com />
<img src="#" alt="https://wowdude.org" /> to let users hover their mouse over the image and read it,
or the visually impaired gets the image read to them.
<video> is the same as img but with a closing tag example:
<video src="https://wowthisisvideo" width="330" height="520" controls>
video not supported
</video>
<!DOCTYPE html> Should be at the start of every HTML file.
<!DOCTYPE html>
<html>
</html> should be at the start of every HTML code so browsers dont misinterpret it.
<head> should go above <body>
same for </head>
<title> is the title of your webpage example:
<title>wowwowo</title>
It should show as the titlebar when on the page. should be between everything like this:
<!DOCTYPE html>
<html>
<head>
<title>awesome.</title>
</head>
</html>
You can add links to other pages by using the <a> tag
Example: <a href="https://en.wikipedia.org/">Link to wikipedia</a>
using the target attribute : <a href="https://en.wikipedia.org/"target="_blank">Link to wikipedia</a>
to make an image a link do this: <a href="https://en.wikipedia.org/wiki/Brown_bear" target="_blank"><img src="https://content.codecademy.com/courses/web-101/web101-image_brownbear.jpg"/></a>
to make a sentence scroll to a specific area do this: example: <ul>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#habitat">Habitat</a></li>
<li><a href="#media">Media</a></li>
</ul>
Tables:
Tables hold information.
Examples:
<table>
<tr>
<td>Woww!</td>
<td>Awesome!</td>
<td>Crazy</td>
</tr>
</table>
Table heading element: <th>
<table>
<tr>
<th></th>
<th scope="col">Saturday</th>
<th scope="col">Sunday</th>
</tr>
<tr>
<th scope="row">Temperature</th>
<td>73</td>
<td>81</td>
</tr>
</table>
Note, also, the use of the scope attribute, which can take one of two values:
row - this value makes it clear that the heading is for a row.
col - this value makes it clear that the heading is for a column.
Table Borders:
Example:
<table border="1">
<tr>
<td>73</td>
<td>81</td>
</tr>
</table>
Makes tables easier to read.
Spanning columns:
Example:
<table>
<tr>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
</tr>
<tr>
<td rowspan="2">Out of Town</td>
<td>Back in Town</td>
</tr>
</table>
Spanning rows:
You get the idea,
<table>
<tr>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
</tr>
<tr>
<td rowspan="2">Out of Town</td>
<td>Back in Town</td>
</tr>
</table>
