parm530
11/8/2017 - 3:37 PM

HTML

Beginner's guide to learning HTML

html.md
content_copyfile_download
  • Rendered
  • Source

Comments

<!-- COMMENTS are placed within these tags -->

Begin the HTML doc with

  • Always begin a document with the following:
<!DOCTYPE html> <!-- Tells the browser what language it is reading-->
  • Document structure
<html> <!-- Begins the HTML document-->
  <head> <!-- Contains information about the html file. Ex. title of the tab-->
    <title> </title> <!-- title of the tab-->
  </head>
  <body> <!-- Contains information about the content of the page, belongs directly under the closing head-->
    <!-- Body: Things that the user will be able to see-->
    <h1>Hello World!</h1> <!-- Called an h1 ELEMENT, purpose is for main heading styling-->
    <p>Nice to meet you!</p> <!-- paragraph element-->
    <a href="www.blah.com">BLAH</a> <!-- Anchor link element, used to contain a hyperlink to another website-->
    <!-- BLAH will be clickable and send the user to blah.com-->
    
    <img src="" /> <!-- Image elements are self closing. The src attribute tells where the content exists-->
  </body>
  
</html> <!-- ends the document-->

INSIDE THE BODY

  • You make an image clickable by placing the entire image within an anchor link:
<a href="blahblah.com">
  <img src="duck.png" />
</a>

Ordered Lists

<ol>
  <li>Food</li> <!--1. Food-->
  <li>Drinks</li> <!--2. Drinks-->
  ...
</ol>

<!-- Unordered List-->
<ul>
  <li></li> <!--dots -->
  <li></li> <!--dots-->
  ...
</ul>
  • You nest lists within lists for more organization
  • Structure tags: div's allow you to divide your page into containers (different pieces)
<div>
</div>
  • spans's can be used to apply style to certain elements
<p>Hi <span style="">WORLD!</span></p>