Resources:
  1. Download Text Wrangler if you’re on the mac or Notepad++ if you’re on the PC. Or find a similar editor.
    — Seriously, please do it. I didn’t even know what I was missing out on until I tried out Notepad++ and found that I could use it to preview my elementary code in Chrome, Safari, IE, and Firefox. Just be sure to save your file in an appropriate file — .html
  2. HTML.net
    — Gives a pretty good overview of what you should know about HTML. Comes with examples.
  3. W3Schools
  4. — W3Schools has been criticized for being a go-to resource (see W3Fools.com), but it’s not a bad tutorial to start with if you want a quick way to scratch the surface of what HTML is about.

    My advice for you — as you scan through the recommended tutorials — is to type out the HTML you learn in Notepad++ or Text Wrangler. Learning by doing is the fastest route, and you’ll also familiarize yourself with typing out tags such as “<" or ">“.

    The first time I encountered HTML was probably in 2003, when I was playing around with Microsoft Frontpage, and noticing the funny code that popped up in “source view” whenever I did something in the visual editor. HTML is pretty easy to pick up, although the thing to learn if you really want to have some power over your site’s design is CSS.

    But to start, here’re some of the HTML basics you should probably know off the top of your head:

    1. The Hyperlink

    Link to google
    Demo:
    Link to google
    
    
    

    2. The list

    • List Item 1
    • List Item 2
    • List Item 3
    • Demo:

      • List Item 1
      • List Item 2
      • List Item 3

      Just change “ul” to “ol” and “/ul” to “/ol” if you want the list to have numbered points instead of bullet points.

      2. The bolded, italicized, underlined, and strikethrough fonts

      Bolded text
      Underlined text
      Italicized text
      <s>Strikethrough text</s>

      Demo:
      Bolded text
      Underlined text
      Italicized text

      3. The centered image with width and height defined

      
      
      
      Random Image I Found On Wikipedia
      Demo:

      Random Image I Found On Wikipedia

      4. The anchor link

      Up
      Click here to go right below the "down" anchor tag
      Paragraph Text Paragraph Text Paragraph Text Paragraph Text Paragraph Text Paragraph Text Paragraph Text Paragraph Text Paragraph Text Paragraph Text Paragraph Text Paragraph Text Paragraph Text Paragraph Text Paragraph Text Paragraph Text Paragraph Text Paragraph Text Paragraph Text Paragraph Text Paragraph Text Paragraph Text Paragraph Text Paragraph Text
      Down
      Click here to go right below the "up" anchor tag

      Demo:
      Up
      Click here to go right below the “down” anchor tag
      Paragraph Text Paragraph Text Paragraph Text Paragraph Text Paragraph Text Paragraph Text Paragraph Text Paragraph Text Paragraph Text Paragraph Text Paragraph Text Paragraph Text Paragraph Text Paragraph Text Paragraph Text Paragraph Text Paragraph Text Paragraph Text Paragraph Text Paragraph Text Paragraph Text Paragraph Text Paragraph Text Paragraph Text
      Down
      Click here to go right below the “up” anchor tag

      5. Creating a horizontal divisor line

      
      
      

      Demo:


      ^See the horizontal line?

      Of course, you probably want to do a lot more styling with your content, like change the colors of of your links, fine-tune the layout of your site, make your images move in a content slider, or even change the appearance of the horizontal line when you type in


      . That’s where CSS and Javascript come into play. But for now, browsing through the two resources above will help you understand HTML, which is the precursor to learning CSS and Javascript.

      When I started taking an interest in web design I knew no CSS at all, so the next post will be dedicated to a few of the resources I found helpful.

       

blog comments powered by Disqus
  • Hi, I'm Linda! I enjoy going to tech meetups, learning web development, and blogging about the learning path. Follow me @LPnotes

Subscribe to The Coding Diaries