In more modern times, the addition of specific doc-type data has become more and more common in the design of web pages. For us though, since we're only covering the basics here, your DocType will be the basic opening tag that indicates you are using HTML.
All you need to worry about for this chapter are the absolute basic necessities of a static web page, and the vocabulary associated with web design.
Vocabulary:
Tag: The tag consists of an open tag and close tag in 99% of instances. There are a few rare ones that do not include a separate close tag, but I'll address them as they come up. All Tags are indicated with Carrots '<' & '>' and Closing Tags are identical to Opening ones but include a '/' in the beginning of the tag.
Dynamic Page: A Dynamic Page is a web page that utilizes advanced dynamic elements that allow changes to take place on the page with viewer interaction.
Static Page: A Static Page is a simple web page that remains constant and unchanging without the page developer adjusting the code themselves. This is what you will be doing.
HTML: Hyper-Text Markup Language. This is the specific type of programming that you will be learning the basics for with this self-learning guide.
Title: Back in the older days when web browsers did not have multi-tab functionaility, the Title was the content contained in the blue [or other color] bar at the top of the browser. Now, the Title portion the page is displayed in the page's tab in your browser.
Body: This is the bulk / meat of the web page. Everything except the Meta Tags and Javascript tags are contained within the body of the page. Essentially, this IS the web page portion that appears in your browser.
Browser: That thing you navigate the world-wide web on, and the program that you will be using to view your web page in, since I'm assuming most of you do not have access to more advanced programs like Adobe Dreamweaver that allows you to view your page inside of the program.
Tags:
<html>, </html>
<title>, </title>
<body>, </body>
<p>, </p>
Self-Learning Assignment: Make your new web page
Unlike most folks, I'm not going to tell you how detailed to make the page, or what to include. I'm simply going to tell you how to use the tags, and let you play with them until you are confident enough to move on to your next lesson. Learning these tags should not take too much of your time.
The one major thing to note about web pages, is the syntax of the tag layout. The outer-most tag is the <html> tag. This is the first tag you open, and the last tag you close.
Next comes your <title> tag. This one can be opened and closed in a single line of code, or if you're including Meta tags [not something covered in this guidebook] it can take up several lines of code.
After that comes your <body> tag. This here is the meat of your web page. Anything contained within the <body> tag will appear as the web page in your browser.
The first tag that is commonly taught within the <body> tag is the <p> or Paragraph tag. This tag is exactly what its name means. It indicates the beginning and end of a paragraph. You need to close this tag at the end of your paragraph with its closing tag, or the browser is not likely to recognize the end of the paragraph.
Before you can even begin coding, you need to open your favorite text editor. Most of us programmers prefer things like Textpad or Notepad since they allow the fewest distractions from the task at hand.
Lesson 1: Using the Paragraph Tag correctly
This sample is incorrect use of the Paragraph tag.
<html>
<title></title>
<body>
<p>Hello, my name is Frank.
I work at the supermarket.
I have a cool motorcycle.
It drives fast.</p>
</body>
</html>
Your browser will display the above paragraph tag like so in your browser:
Hello, my name is Frank.I work at the supermarket.I have a cool motorcycle.It drives fast.
If you want it to show up correctly you have two options. To close your paragraph tag after each line, or insert the line-break tag [covered in the next chapter].
The Paragraph tag will give you a double-break before starting the next line, as is common between paragraphs. The line break will simply start your text at the next available line. The exact content you decide to include to practice is up to you.
Lesson 2: Saving and Viewing your web page.
First things first, you need to open your favorite text editor. Some preferred ones by coders are Textpad and Notepad since they offer the fewest distractions.
When you've finished typing in the code for your web page choose the Save As option, then save the file with the .html or .htm extension. You may need to type it in manually.
After you've saved your file as a .htm or .html file, its time to open it with your browser. Since some browsers are annoying about this (Google Chrome) you may need to navigate to where you saved the file [I suggest your desktop for simplicity's sake], then right-click on the file and select 'Open With'.
if you're on a windows machine it should default to Microsoft Internet Explorer. As bad as the browser is, it is still sufficient for what we are doing here. If you prefer a different browser, simply select your browser from the list that comes up.
You can make changes to your still open [unless you closed it] text file. It will not effect anything in your web browser though, until you've both saved your changes and refreshed the page [default refresh page key is: F5 while the browser is open and 'on top'].
YOU ARE READING
How to Code - A Beginner's Guide
RandomThis guidebook was compiled from most of what I've learned over the years. Since I'm writing this one with the complete newbie in mind, any of you who have a fair degree of prior knowledge and skill in the area of web programming should probably loo...
