-
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 -
HTML.net
— Gives a pretty good overview of what you should know about HTML. Comes with examples. - W3Schools
- List Item 1
- List Item 2
- List Item 3 </pre>
- List Item 1
- List Item 2
- List Item 3
— 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. </ol> </div>
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 google2. The list
Demo:
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
Demo: _running.jpg)
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?
</div>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.
</li> </ul> </span>