lesson 1 - what's a webpage? (the code version)
Here is the page you just read written in html code:
<h2>lesson 1 - what's a webpage?</h2>
<p>We all go online and we've probably seen thousands of webpages. But what is a webpage?</p>
<p>To start, consider any file on your computer. Each file contains information written in code, whether it is an image, spreadsheet, or word processor document. To read the file, the proper computer program must open the file and interpret the code. For instance, a Microsoft Document (.doc) file is read and interpretted by Microsoft Word. A jpeg (.jpg) image file can be read with Photoshop. In this way, a webpage is any file that can be read and interpretted by a web browser program, such as Internet Explorer, Firefox, or Safari. </p>
<p>For most files, a program is used to create the file. A program converts your actions into code which can be read a corresponding program. If you use photoshop, all the moves you make with the mouse are actually creating a file that is pure code. For webpages, the code can be hand written in any text program. As long as file ends in a web extension it will be read and interpretted by a web browser. The most basic and common web file is a <strong>.html</strong> file. </p>
<h3>html decoded </h3>
<p>Most of us have heard the acronym HTML, but what does that even mean? <em>Well</em>, technically speaking, it stands for <strong>"HyperText Markup Language"</strong>. Unfortunately, that definitely doesn't shed much light on the subject, so let's break it down in common english.</p>
<p>Let's take this acryonym word by word to really understand it:</p>
<dl>
<dt>Hypertext-</dt>
<dd>A computer-based text retrieval system that enables a user to access particular locations in webpages or other electronic documents by clicking on links within specific webpages or documents.</dd>
<dd> This means that through a simple code, you can access images, webpages, and other files from any location online. This is the key to putting it all together and making webpages that can link to other pages and display images.</dd>
<dt>Markup-</dt>
<dd>The collection of tags that describe the specifications of an electronic document, as for formatting. What this translates to is that markup simply means formatting using tags. We will talk about this more in a second.</dd>
<dt>Language-</dt>
<dd>Well this on is pretty self-explanatory. This means that HTML is a coding language, more specifically a markup language. Languages all have specific syntax (we will talk about this more later) and elements(also known as tags).</dd>
</dl>
<p>What all this means is that HTML is a way of formatting and creating a webpage by using a system of tags with the content to be displayed.</p>
<h3>How it works</h3>
<p>Imagine that you had to create a document that uses different size headings, multiple paragraphs, italics, bolds, and all the other formatting options we take for granted. Now imagine that you had to create this document in simple text with NO formatting options so that when a browser reads it, it knows to format it. This means that you can't make the text bold, or italic or bigger. How is this even possible? </p>
<p>Well, in HTML, we use tags to designate the format. For example, if I wanted to make the phrase <strong>"HTML is for winners"</strong> in stronger text, I would enclose it withing tags that tell the browser (internet explorer, safari, firefox, et al) to read it as strong. In the code, it would look like this:</p>
<p><code><strong>HTML is for winners</strong></code></p>
<p>Instead of actually making the text stronger, we simply enclose the text in code that tells the browser how to interpret it. We can use specific tags for almost anything! The way tags work is very simple, simply enclose the text you want to format within an open tag (<tag>) and a close tag (</tag>). In fact, this whole paragraph resides within paragraph tags (<p> and </p>)! Using tags follows a specific "syntax". By syntax, we are referring to the specific rules of writing code. For instance, all tags that are opened must be closed (some tags don't have written content within, so they are self closing). Another rule is that a tag within a tag (a child element) must be closed before its parent element is closed. There are a few solid rules to the form of HTML we will be learning called XTHML. Tags can also have attributes, but we will talk about that later.</p>
<h3>What is the point of all this?</h3>
<p>You may be wondering at this point, "why do I have to write everything in code?" Well there are many reasons for this. The most important reason is that by writing in a universal format, your web page can be read by ALL browsers, such as Internet Explorer, Firefox, Safari, Opera, Netscape, and Mozilla. Anyone who has used Microsoft Word before knows the frustration that comes with trying to open the document on a computer that doesn't have Word. Whatever tries to open it inevitably misinterprets the document. When writing HTML, all browsers will read your formatting in very similar ways (although not identical). Another reason to use HTML is its incredible design flexibility. By using style sheets, HTML can be styled to almost any look which again, can be read universally. In addition to this, HTML is the base formatting to which all other web languages fit in, including Flash and PHP. </p>
<p>And I guess the most obvious reason to use HTML is simple. To create a web page, you really don't have any other choices. All web sites are based in HTML and there's no way around it. The more proficient you are in HTML, the more control you will have over all aspects of your web page.</p>
<h3>Moving on...</h3>
<p>The only way to really understand the workings of HTML is to try them out. For fun, I wrote this entire page in HTML. As a matter of fact, all the formatting in this less is done through Markup using tags, this lesson is a valid webpage. There are over ten types of tags used in formatting this document, <a href="lesson1-code.php">click here</a> to see how it is all put together. </p>
<p><a href="lesson2.php">On to Lesson 2 </a></p>