Marco HTML Intro

by mrjordy

HTML

------------- Basics -------------

<h1> This is a big header</h1>

<h2> This is a smaller header</h2>

<h3> This is an even smaller header</h3>

<h4> This is barely a header</h4>

<p>This is a paragraph</p>

<p>This is another paragraph<br>
this is a new line within a paragraph</p>

<p>And here we have <span>a span inside of a paragraph,</span> which can be used for styling. You can see this styling over in the css pane, lines 1 to 3</p>

<p><a href="http://www.google.com">This</a> is a link to google.com</p>

<br>
------------- HTML STYLING -------------
<p>For the most part, all of your styles will be handled by CSS, however, these are a few acceptable counterexamples to that:</p>
<p>This is how you <strong>make something bold</strong> in html5 (used to be &lt;b&gt;)</p>

<p>This is how you <em>make something italic</em> in html5 (used to be 	&lt;i&gt;)</p>

<p>This is how you <u>underline something</u> in all html (hasn't changed)</p>
<br>
------------- LISTS -------------
<ul>
   <li>Unordered List</li>
   <li>Unordered List</li>
   <li>Unordered List</li>
</ul>

<ol type="1">
  <li>Ordered List</li>
  <li>Ordered List</li>
  <li>Ordered List</li>
</ol>
<br>
------------- DIVs -------------
<div class = "RedText">
<u>CLASS:</u> <br>This text is dark red, but there's no styling here in the html pane. To see why this has color, you'll have to look over at the CSS pane. Lines 5 to 7 are responsible for this styling. This particular div is a class <br><strong>class = "RedText"</strong><br>
Classes are used to denote divs, as well as most other elements (p, li, h1, etc), in which more than one element is being styled. To write this CSS, you simply put a period followed by your class name. Our class name here is RedText, so our css will look like this:

<br><br>.RedText {
<br>your styling here
<br>}
</div>
<br>
<div id = "GreenText">
<u>ID:</u> <br>This text is green, and again, we're using CSS to style our html. CSS lines 9 to 11 are responsible for this styling....

CSS

span {
  color: blue;
}

.RedText {
  color: darkred;
}

#GreenText {
  color: green;
}

#PurpleText {
  color: purple
}

.Margin {
  margin: 10px;
}

.Padding {
  padding: 10px;
}

.BackgroundWhite {
  background: white;
}

.Border {
  border: 1px solid purple;
}