-
Notifications
You must be signed in to change notification settings - Fork 0
/
beginner-html-1.html
62 lines (40 loc) · 5.27 KB
/
beginner-html-1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A Beginner's Guide to HTML, part 1</title>
<link rel="stylesheet" type="text/css" media="Screen" href="styles.css" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
</head>
<body>
<h1>A Beginner's Guide to HTML, part 1</h1>
<p>If you don't already understand the markup language known as HTML, there's not necessarily a compelling reason for you to learn. However, if you'd like a better idea of how web pages work, then it's worth taking some time to understand the underlying concepts. In today's post, and the ones that follow in this series, I'm going to introduce the basics of how to create HTML documents.</p>
<p>Of course, here at ProfHacker, we've published on topics related to this. Julie offered "<a href="http://chronicle.com/blogs/profhacker/a-pleasant-little-chat-about-xml/22746">a pleasant little chat about XML</a>." Lincoln provided <a href="http://chronicle.com/blogs/profhacker/markdown-the-syntax-you-probably-already-know/35295">an informative post about Markdown</a>, which is a user-friendly "syntax invented by John Gruber for marking up plain text." Mark discussed "<a href="http://chronicle.com/blogs/profhacker/writing-in-markdown-with-gonzo/41597">writing in Markdown with Gonzo</a>," a free open-source editor. I explained "<a href="http://chronicle.com/blogs/profhacker/get-clean-html-from-ms-word-files/31455">how to get clean HTML from Microsoft Word documents</a>." Amy considered <a href="http://chronicle.com/blogs/profhacker/why-use-an-html-editor/24182">why you might want to use an HTML editor</a> and <a href="http://chronicle.com/blogs/profhacker/learning-html-with-mozilla-thimble/40947">introduced us to Mozilla Thimble</a>.</p>
<p>What we haven't done so far, though, is provide an easy-to-follow explanation of HTML. That's what I plan to do with this relatively short series of posts, covering the following topics:</p>
<ol>
<li>Suggested software</li>
<li>Standards-compliant HTML</li>
<li>Stylesheets and HTML</li>
<li>Accessibility and HTML</li>
<li style="margin-bottom: 1em;">Mobile devices and HTML</li>
</ol>
<p>Once this series of posts is finished, I'll move on to an intermediate guide and eventually, with any luck, an advanced guide. My goal will be to explain these topics in a way that's most useful to those who create online content in a higher ed setting: syllabi, handouts, departmental web pages and the like. For those readers interested in a more detailed (and already completed) guide to this subject, I'd suggest purchasing <em><a href="http://www.thickbook.com/books-2/sams-teach-yourself-html-css-in-24-hours/">Sams Teach Yourself HTML & CSS in 24 Hours</a></em> by ProfHacker alum Julie Meloni, or exploring the tutorials at <em><a href="http://htmldog.com">HTML Dog</a></em> and <em><a href="http://reference.sitepoint.com/html">Sitepoint</a></em>.</p>
<h2>Suggested software</h2>
<p>Okay, on to the first topic: software. You'll need two (and possibly three) software applications: a text editor for writing and editing your HTML; a standards-compliant browser for viewing the pages you create; and something that will transfer the documents you create to a web server (if, in fact, you have access to one for putting your pages online). Here, I'm going to repeat Karl Stolley's advice from the <a href="http://sustainablewebdesign.com/book/resources/">companion site</a> (licensed Creative Commons!) for his book <a href="http://sustainablewebdesign.com/book/#book"><em>How to Design and Write Web Pages Today</em></a>:</p>
<p><strong>Mac OS X users</strong> should download and install these:</p>
<ul style="margin-left: 0; padding-left: 2.5em;">
<li><a href="http://www.barebones.com/products/textwrangler/">TextWrangler</a>: A text editor; also <a href="http://itunes.apple.com/us/app/textwrangler/id404010395?mt=12">available via the Mac App Store</a></li>
<li><a href="http://www.mozilla.com/firefox">Mozilla Firefox</a>: An open-source Web browser</li>
<li><a href="http://cyberduck.ch/">Cyberduck</a>: an FTP/SFTP client for transferring files to and from a web server</li>
</ul>
<p><strong>Windows users</strong> should download and install these:</p>
<ul style="margin-left: 0; padding-left: 2.5em;">
<li><a href="http://notepad-plus-plus.org/">Notepad++ ("Notepad plus")</a>: A text editor; download the zip package; run the version in the <code>unicode</code> folder</li>
<li><a href="http://www.mozilla.com/firefox">Mozilla Firefox</a>: An open-source Web browser</li>
<li><a href="http://winscp.net/">WinSCP</a>: an FTP/SFTP client for transferring files to and from a web server</li>
</ul>
<p>Once you have these software applications downloaded and installed, you'll be reader for part 2: "Standards-Compliant HTML." Stay tuned.</p>
<p><strong>Those of you with some experience on this topic, what are your favorite software applications for working with HTML? What have been the most useful guides for you? Please share in the comments.</strong></p>
<p>[<a href="http://www.flickr.com/photos/laihiu/3935342049/">Creative Commons-licensed flickr photo by LAI Ryanne</a>]</p>
</body>
</html>