HTML: the basics
Presented by Samantha Kannegiser & Meaghan Moody
What is HTML?
Ex. <title>This is a title tag that is marking up this content and labeling it as a title! Whoa!</title>
Why learn HTML?
What's next? What do we need to get started writing HTML and creating websites?
- Code Editor: A text program designed for editing source code. Some FREE code editors we like are Notepad++ (Windows) and TextWrangler (OSX and Windows).
To begin writing html, all you really need is the text editor, but you may want to eventually move your webpages online. Here's what you'll need:
- Web Hosting: A web hosting service provides space on its server for your website files and will connect them to the internet. This may involve some cost and certainly deserves some consideration.
- File Transfer Protocol (FTP): FTP will transfer files to and from a server. We like FileZilla. It's free.
- Domain Name: This will also involve some cost, but you'll want your domain name to be clear and representative of the content of your website.
HTML Tag Cheat Sheet
<meta charset="utf-8">Character encoding for HTML. You need it.
<head>Contains content about the page.</head><body>Content goes here.</body>
<title>Appears inside head and is the title of the page.</title>
<p>Paragraphs!</p> <br>Line breaks!</br> <em>Emphasis!</em> <strong>Bold!</strong>
<h1>Headings. H1 is most important. </h1> h2 through h6 Less important things. Order matters.
<img src="http://www.example.com/dog.jpg"> Don't forget width, height, alt attribute!
LINKS: <a href="http://www.htmldog.com">HTML Dog</a>
LISTS: Unordered (bullets): <ul> <li>list item here</li> </ul> Ordered (numbered): <ol> <li>list item here</li></ol>
TABLES: <table></table> Rows: <tr><td> tags hang out here. </tr> Table data: <td>Cell data hangs out here.</td>
Resources
- HTMLdog: Offers tutorials, techniques, and examples for HTML, CSS, and Javascript.
- W3Schools: Self-proclaimed world's largest web developer site. Offers definitions, examples, and try-it-yourself options.
- Code Academy: Learn to code. Free step-by-step tutorials on a variety of topics.
- Skillcrush: Offers a free 10-day coding bootcamp
- validator.nu: Free service that will check your html for errors.