Internet Teaching myself HTML

MaverickSawyer

Acolyte of the Probe
Joined
Apr 11, 2011
Messages
3,918
Reaction score
5
Points
61
Location
Wichita
I have just gotten to HTML in my "Introduction to Computer Information Science" class at the community college. I looked at what it took to do HTML, and decided to give it a whirl. My goal is to make a small Operations Manual for Moach's G42-200, since it has the beginnings of an HTML-based documentation.

So far, I have the following:
Code:
<html>
<head>
<title>G42-200 Ops Manual</title>
</head>
<body>
<h1>G42-200 Starliner Operations Manual</h1>
<hr />
<br />
<p>Welcome to the Moachcraft G42-200 Starliner Operations Manual. This 

document will provide a rundown of how to fly your Starliner safely, 

efficiently, and reliably across a wide range of environments and 

missions.</p>
<br />
<br />
<h2>TABLE OF CONTENTS</h2>
<hr />
<br />
<ol><li>Introduction</li>
<li>Preflight Mission Planning</li>
<li>Pre-Takeoff Configuration</li>
<li>Engine Start Procedures</li>
<li>Taxi, Takeoff and Climbout</li>
<li>Initial Ascent</li>
<li>Transition to RAMCASTERs</li>
<li>Mid-Ascent</li>
<li>RAMCASTER Mode Switch</li>
<li>Late Ascent</li>
<li>Transition to Rocket Mode</li>
<li>Final Ascent</li>
<li>Orbital Insertion</li>
<li>Orbital Operations</li>
<li>Deorbiting</li>
<li>Initial Reentry</li>
<li>Mid-Reentry</li>
<li>Late Reentry and Supersonic Approach</li>
<li>Pattern Flight and Landing</li>
<li>Taxi, Shut Down, and Post-Flight</li>
<li>EMERGENCY PROCEDURES</li>
<li>Appendix A: Walkaround</li>
<li>Appendix B: Technical Specifications</li>
<li>Appendix C: Payload Management</li>
<li>Appendix D: Optional Equipment Packages</li>
<li>NOTES</li></ol>
<br />
<br />
<hr />
<p>Created for G42-200 WIP 303 by MaverickSawyer. Copyright 2013</p>

</body>
</html>

This turns into:
picture.php


Not bad for just about 20 minutes just banging away at the keyboard with no lessons other than what's in my textbook! :)
Couple of things that I intend to do with this:
-Make it into a multi-page document like dansteph does. (medium/long term)
-add pictures. (near-term)
-flesh out the actual content of the manual. (near/medium term)

If anyone has hints, tips, or crits, let me know. I'm always open to expert advice! :lol:
 
If anyone has hints, tips, or crits, let me know.
Add the page's encoding in the head, before title (if you don't use Apache/PHP to serve the content, from which you could send it in the HTTP headers, too):
HTML:
<meta http-equiv="Content-Type" content="text/html; charset=used-charset" />
I'd generally recommend using utf-8 charset, but if you write it in Notepad, enter your Windows' ANSI character set there (most likely Windows-1252), unless you already changed it to UTF-8 upon saving the file.

Additionally, personally I'd use CSS' padding-top and padding-bottom properties to define spaces between paragraphs / headers instead of using multiple <br /> tags, but you can always change it later when you will start using Cascading Style Sheets.
 
... If anyone has hints, tips, or crits, let me know. I'm always open to expert advice! :lol:

I don't know if you have discovered it already, but I have slightly started discovering coding with www.codecademy.com. I've started with HTML and JavaScript, and the courses are great.

The course called "Web Fundamentals" teaches HTML and CSS. You may learn something of what you are requesting there.
 
I'm no html guru (the Orbiter homepage is pretty much as far as I ever got), but for what it's worth, I would suggest

  • Learning to use cascading style sheets (CSS) right from the start. They make html pages a lot cleaner and more consistent once you start playing with element styles.
  • Using a html checker, such as http://validator.w3.org on your pages. Html browsers are quite permissive regarding syntax errors, so errors are not always obvious, but they can make pages less portable.
 
Ok, thanks for the suggestions, folks.

My goal right now is to get a functional set of pages first, then go back and make them look better. My opinion is one of "function, then form"; in other words, make it work, and if you have the time (and/or budget) you can go back and add finer details to the project.
 
That's the right way of thinking for html. After the content is all set down, you make it look good using CSS. That way, the content and the visuals are nicely separated and you can tweak one without breaking the other.

Cheers
 
Ok, thanks for the suggestions, folks.

My goal right now is to get a functional set of pages first, then go back and make them look better. My opinion is one of "function, then form"; in other words, make it work, and if you have the time (and/or budget) you can go back and add finer details to the project.

Not difficult with basic pages. However, if you want more visual organisation, like containers, it's best to integrate them immediately. A better workflow for HTML is "structure, then content, then style." Create your headers, footers, panels, sidebars, etc. Fill them afterward with content - text and images. Style can come last - colour scheme, font families, border styles. The nice part is that, especially if all of your styling was done in a separate CSS file, you can keep it for any future content you want to add, or include it in a next project. It can always be improved upon as well, without huge effort or damage to the work as a whole.
 
Back
Top