My html stuff

Google
New Tab
html checker

How To's

• Add a link in html. use the <a> tag like this: <a href="google.com">click here </a>

• Add an internal link in html. same as above, except the href is linking to an id like this: href="#black"
• Add a space in html. use &nbsp

• Add a underline in html. use the <u> tag like this: <u> Hello World </u>
• Add processing java script into a webpage.
  1. save the js with a .pde extension
  2. create a webpage with this: <script src="processing.js"></script> in the head.
  3. add this at the end of the body tag: <canvas data-processing-sources="Bubblemil.pde"></canvas> the text in green being the path to the .pde previously saved
  4. add the top of the js .pde add a void setup function with the desired size of the canvas:

     void setup(){
       size( 400, 400 );
     }

• Center something. use the <center> tag like this: <center> <p> hello world </p> </center>
• Add a line in html. us the <hr> tag like this: <hr> hello world </p> <hr> <p> hello world </p>
• Add CSS. these are the list of styles I have learned
  • background-color: yellow;
  • font-family: "Helvetica", fantasy; (generic font families: sans-serif, serif, fantasy, monospace, cursive)
  • font-size: 13px;
  • font-style: italic;
  • line-height: 1.5em;
  • text-align: center;
  • color: purple;
  • font-weight: bold;
  • text-decoration: underline;
  • width: 70%;
  • height: 180px;
  • overflow-y: auto;
  • overflow-x: hidden;
  • overflow: visible;
  • in a pic (best to only specify one, otherwise it might squash the image)
    • width: 120px;
    • height:40%;
  • margin (top, bottom, left, right): (aligns center, auto) (10px) ((top) 15px (right) 0px (bottom) 10px (left) 6px);
  • border (top, bottom, left, right): (width) 2px (type, could be: solid, groove, double, ridge, dotted, dashed) dashed (color) rgb(161, 161, 161);
  • padding (top, bottom, left, right): 6px;
  • 
  • display: inline(-block); (takes the newline attribute away from tags, inline-block keeps the tag in its own box)
  • position: ((relative to old postition) relative, (relative to top of page) absolute, (relative to window) fixed);      used with:
    • top: 30px;
    • bottom: 20px;
    • left: 10px;
    • right: 10px;
  • z-index: (any whole number);   (tells the browser which things to draw first, 1 being on the bottom)
  • float: (left, right, bottom, top);     puts a something next to something else, best to use with width
  • clear: (left, right, both);     stops floating, like for a footer, forces it to go on the bottom or top of something
  • p.warning (find all the p tags with the class warning)
  • p .warning (find all the class warning inside a p tag, even if it is in a strong take under a p tag)
  • h1, h2 (apply styles to both h1 and h2 tags)
  • a:(link, visited, hover, active, focus) for selecting different states of link tag
  • hover and active work with other tags
  • box-shadow: 0px 30px 40px grey;
  • cursor: pointer (could be, pointer, crosshair, help, wait);

• Add a image in html. use the <img> tag like this: <img src="http://blog.formstack.com/wp-content/uploads/2010/06/html-css.png" alt="html img" width="203">
• how to display entities and other special characters in html

• how to do anything with a link in html

• how to align a img in html
• how to pick a color in html css (color picker and displayer)

• forms in html

• Add a table in html. use a whole bunch of tags. here is the code for one. leave out the table attribute for no lines

  
  <table border="10">
              <thead>
                  <tr>
                      <th>Meal</th>
                      <th>Ingredients</th>
                      <th>Price</th>
                  </tr>
              </thead>
              <tbody>
                  <tr>
                     <td>Steak</td>
                     <td>Juicy Cow</td>
                     <td>$10</td>
                      
                  </tr>
                  <tr>
                     <td>Applesause</td>
                     <td>Mushed Apples</td>
                     <td>50&cent</td>
                      
                  </tr>
                  <tr>
                     <td>Pudding</td>
                     <td>Choco, Sugar</td>
                     <td>$1</td>
                      
                  </tr>
              </tbody>
          </table>

  What the table looks like:

  Meal	Ingredients	Price
  Steak	Juicy Cow	$10
  Applesause	Mushed Apples	50¢
  Pudding	Choco, Sugar	$1

• Add a command in processing js that prints something out the a browsers developer console. use the command println in the void set up function. like this:

  void setup(){
    size( 400, 400 );
    println("hello world");
  }
  

• Add an unordered list in html. use the <ul> and the <li> tag like this (ul is unordered list, li is list item):
  <ul>
  <li> milk </li>
  <li> eggs </li>
  </ul>

• Add an ordered list in html. same as above, except use the <ol> tag instead of the <ul> tag.

Back to top