Bryan's web programming progress

Going Live with my First Web Page

Okay, not a useful page, but there is now something at makefriendswithalgebra.com

This has been fun and I have learned a lot so far.  I already knew a little about HTML and the whole process, but I was fuzzy on the details.

The html exercise was very useful. Memorizing the code really forced me to get a better understanding of the structure of a basic web page.  I had seen it before, but know it better now.

Choosing a text editor was also a useful exercise.  Left to my own devices, I probably would have just downloaded the first free one I found.  By going through the drill, I learned more about features that are available, and made a better choice.

The “HTML is All Around You” exercise helped me learn more about some of the structures, which gave me a start at getting good at HTML.

Choosing a domain name helped me focus on what I wanted my website to be.  Although I’m not sure it is the best name, I think it is a good one to start with.  I already have several ideas for the site, which the domain name has helped to bring into focus.  This was also a big motivating step.

In getting a webspace up and running on a hosting service, I learned a lot of the details involved in making it all work.  I had some acquaintance with it already, but much more capable now.

I am looking forward to getting into all the details of html, css, and javascript.  I have been studying javascript for awhile.  I have a lot of ideas for the website, and am eager to get started.

 

Hosting & DNS

I chose 000webhost.com.  They are a free web hosting service.  They do have some of the features of a paid hosting service, and they have a paid service as well.  If you search, you will probably find some complaints about them.  I don’t know if the complaints are accurate or not. Of course their free service does not have all the features of a paid service.  I plan to switch to host the site on my own server at some point, and I think that for the time being the free one will work well for me, so I decided to start with it.

Configuring the DNS to point to my hosting account turned out to be easy (although I made some mistakes).

I had a choice to make right off.  The hosting company gave me the names of its nameservers, so I could have used those nameservers by putting them into my domain registrar (Namecheap.com) account.  Then I think there might have been some configuration to do in my hosting company account.  I don’t know for sure, because I didn’t take that route.  However, on one occasion (setting this stuff up for the website of my family’s business), we did go that route, and all I had to do was put in the hosting company’s nameserver names into our account with the registrar, and the hosting company took care of the rest.  I think it would also work like that for 000webhost.com.

First I’ll show how to find 000webhost.com’s nameserver names, if you want to use it’s nameservers. 

Here is the screen upon logging into the members area of 000.webhost.com (see the address  bar for the url to get to the members area.

Image

In the Action column, click Go to CPanel.  Then you get this:

Image

 

From here you click “View account details”.  Which gives you this:

Image

 

“Nameserver details” gives the nameservers.  They can be entered into your registrar account.

 

Instead, I am using my domain registrar’s (Namecheap.com) nameservers, so I entered the IP address of the server that my hosting account (with 000webhost.com) is located on into the DNS record located at my domain registrar.  This is the method indicated in the task on P2PU.  I decided to do it this way, because I will probably be using Namecheap longer than I will be be using 000webhost.com.  Also, I thought I would learn a little more that way.

So first I went to members.000webhost.com to find the ip address.  I went to CPanel (see screenshot above), and the IP address was found at the right under “Account Information”.

Armed with the IP address, I went to my domain registrar’s (Namecheap.com) website and logged in:

Image

 

To the right are a bunch of links.  I found “How to setup DNS/Host Records.

Image

 

Then “How can I set up an A (address) record for my domain?

ImageThis showed exactly how to do it.  So I:

  • Login to your Namecheap account
  • Click Manage Domains and click on the domain you wish to set the A (address) record for
  • Click on All Host Records on the left (missing All Host Records option?)
  • Enter an IP address for both WWW and @ fields and choose the record type as A (Address).

After following the above to get to the place to enter the IP address, and entering the IP address, the screen looks like this:

Image

The hostname it shows as @ is just my domain name (makefriendswithalgebra.com).  The one it shows as www is http://www.makefriendswithalgebra.com.  By entering the IP address into the A records for both it takes care of it.

There are other types of records to add (including the CNAME mentioned in the task in P2PU) accessible through the drop down.  It turned out that in this case, I only had to put the IP address into the A record.  When I tried to also modify the CNAME record of http://www.makefriendswithalgebra.com, it messed it up.  I think you can either put the ip address into the A record of www or modify the CNAME record of www, but doing both seemed to cause problems.  P2PU said to use the CNAME, and Namecheap.com said to do it the first way.  I went with the way that Namecheap.com said to use.  Once I got it right, it worked pretty quickly (a few minutes).  I think the up to 24 hours only applies if you already had nameservers set up, and you are changing something.  Then the old info will be cached in various places around the country (or world), and it will take awhile for all the cached info to go away.

 

A Dialog Explaining DNS

Here is a dialog that attempts to explain how DNS works. I put this together for a challenge in the Webcraft 101 class on P2PU.com. I think a dialog form is a natural way to explain DNS. I already knew a little about DNS, and used Wikipedia for further information. The disclaimer is that I am not sure that this dialog is completely correct. I would appreciate it if you let me know about any errors.

Here goes:

“I have to find out what name servers my web hosting company uses, so I can put them in this form for my domain name registrar. Something about DNS. What is DNS anyway, and what are Name Servers?”

“DNS stands for Domain Name System. It is a system that looks up domain names, and translates them into IP addresses.”

“Okay, I think I kind of know what an IP address is. It is the unique number applied to each computer on the internet, right?”

“That is pretty much it. Sometimes there can actually be more than one computer sharing an IP address, but we don’t need to get into that. Other resources on the internet also have IP addresses. It is really more like an ID number than an address. It is the way you contact a computer – kind of like a phone number is the way you contact a person.”

“Okay…So the IP address is like a phone number, the domain name is like a name, and DNS is like a phone book – it looks up the number that goes with the name.”

“Yes, but it is more complicated than that. It is hierarchical and distributed. It works like this: When you type in a domain name into a browser, your system (probably your router) sends out a request to particular computer (that it is configured to use) to ‘start the ball rolling’ so to speak, to find out the ip address of the computer that corresponds to the domain name you entered.”

“You say ‘start the ball rolling’. Why don’t we just have a big computer, ran by Google or the government, that does the lookup. Why do they make it complicated?”

“It is way too many requests for one computer to handle. It would not be efficient. Also, it would not be reliable. They make it both efficient and reliable by spreading out the work among many computers.”

“Okay, so that first computer that my router contacts, what does it do?”

“It just looks at the last part of the domain name (.com, for example), and sends back to your router the ip address of the server that manages the lookup for all requests for domains ending in .com”

“That computer must be a monster. There are a lot domain names that end with .com”

“I’m sure it is a monster. However, after we go over the basic system, I’ll tell you about a shortcut that actually ends up handling most requests.”

“Okay, but save that for later. I’m having a hard enough time following this already. So my router gets back the address of the computer that manages the lookup for the .com domains, and then my router sends the request to that computer, I guess. You say ‘manages the lookup’, so I’m guessing that this computer doesn’t look it up either. It just sends back another address right?”

“You are definitely catching on.”

“I guess the word ‘hierarchical’ kind of clued me in. So it gives my router another ip address, and my router will send the request to that new address. It is sounding a bit like a wild goose chase.”

“Well, your router is actually closing in on the information it needs. The address it gets back from the server managing the .coms is the address of the name server for the domain you typed in. For example, if you typed in khanacademy.com, the address your router gets back is the address of the name server for khanacademy.com. So when your router sends the request to that address, it is getting closer.”

“Name server — we finally got to that. So what exactly is a name server? I’m thinking it is the one that is finally going to give my router the ip address of the domain name I typed in.

“You are right again. The name server is designated as a computer that can resolve that particular name. There will typically be more than one, in case one is not working, or can’t be contacted. So once your router gets the address of the correct name server, it can send one last request. If all goes well, the name server will give your router the address it was looking for. Then it is done with DNS, and can use that IP address to contact the computer that corresponds to the domain name you typed in.”

“So how does the computer that manages the .com requests know what name server has the IP address of the particular domain name that I typed in?”

“Well, I guess someone has to tell that computer that information. The one that communicates that to the computer managing the .com requests is the registrar for that domain name.”

“Oh…so that is why I have to type in the name servers into that form for my domain registrar. Part of registering the domain name for me is that they tell the .com server which name server can resolve my domain name into an ip address. That way the .com computer can send the ip address of that name server to computers that want to go to my website.”

“I think you’ve got it.”

“Well, kind of. I’m sure it is more complicated than that, though.”

“You’re right, but we have discussed the essence of how it works. Now about that shortcut I mentioned earlier: Whenever your router (or other ‘DNS resolver’ on the local network) finds an IP address by the above sequence, wouldn’t it make sense for your router to remember that for awhile (in a cache), in case you or someone else on your local network wants to look at the same website later?”

“Yeah, I guess that would make sense.”

“It would indeed. And in fact, that is what your router does. Also, sometimes when your router sends a request, the computer that answers doesn’t just send back the next address it gets, but instead keeps sending out the requests itself, until it finds the final ip address, then sends that to your router. An intermediate computer that does that also goes ahead and remembers that info for awhile, in case it gets a similar request later from someone else. Then it can quickly send the final ip address right back, instead of doing the cycle of requests to resolve the name.”

“Wow, I can see how that could save a lot of time.”

“Yes, so actually most requests get resolved that way. But whenever a computer does not have the information in its cache, it will go through the long process.”

Next Task in Webcraft 101 – #4 HTML hunting in the world around you

This task involved taking pictures of things that relate to some html tags.  Here goes:

<div>

ImageIt is a generic container.

<blockquote>

ImageOkay, I wasn’t real clever on this one.  But a block quote is a blockquote, right?

<p>

ImageA few paragraphs.  Again, not too clever, but I think it will do.

<ol>

Didn’t find anything in my local neighborhood for this one, so branched out a little farther:

Mercury, Venus, Earth, Mars, Jupiter, Saturn, Uranus, Neptune

<ul>

ImageThe suggestion was excellent, so I took it.  Any brick could have been used in any spot, so they could be considered unordered.  As mentioned in the example, this could also be a <div>

<li>

Imagea list item

<nav>

ImageTook this one off the web.  My neighborhood doesn’t have any public transport.  The sign contains “links” than help you get where you want to go.

<menu>

ImageAgain, not in my neighborhood.  Wish it was, though.

<span>

ImageA span is a generic in line container.  I don’t know yet exactly what inline means, but I’m thinking it is smaller than one that is not inline.  Wil learn more about that later.  Anyway, since lots of bricks could be a <div>, maybe fewer could be a <span>.

<time>

ImageOkay, so the chess clock my not be in machine readable form, but other than that, it is something like a <time>.

<q>

ImageSome quotes.  What can I say?

<img>

ImageAn image.

My Choice of Text Editor for html

I am using a Macbook Pro.  I decided to use Sublime Text 2 for the time being.  It is not free, but has a free evaluation period.  If I think it is worth it I will buy it.

I thought Text Wrangler was good as a free option.  Sublime Text has some neat things like popping up choices when it can tell you are typing in a tag (such as <body>).  Then when you choose which one you want, it enters it and the corresponding end tag (such as </body>).  To get that behavior you have to tell it (in the view menu) that you are typing html.  It also color codes the text according to how it is parsing what you are typing.  If you make a mistake like leaving off a < or something, it won’t be able to figure out what you are doing, and the colors won’t be right, which gives you a clue that something is wrong.  You can also tell it that you are typing JavaScript, and it will have similar help for you.  As far as I can tell, Text Wrangler does not have much (if any) of that kind of stuff.  If you found neat features like that in Text Wrangler, feel free to leave me a short comment.

Sublime Text 2 also has a bunch of nifty shortcuts that they show you in a demo on their website.  Looks like you have to take some time to learn how to use them, and I didn’t try any of that.

html exercise

This is my completed exercise for Challenge 2 in the WebCraft 101 class on P2PU. I found this to be a very useful exercise. The challenge was to reproduce a short piece of html code from memory. In the process my understanding of the syntax and structure of html improved. It took me about 8 tries, including those that were stopped early after I realized I had made a mistake. It also took me about 28 minutes altogether, which I didn’t think was too bad, considering that I did a re-write for even small errors.Photo on 2013-06-11 at 21.40

First Post

This blog will document my web programming efforts.  I have always been interested in computer programming.  Many years ago I graduated from college with a mathematics major, and a minor in computer science.  I started a Masters degree program in computer science, but did not finish.  I did not find a job in computing at the time, so I did other things.  Over the years I have maintained an interest, learning C++ and Java in my spare time.  Now at age 52 I am making a study of JavaScript, HTML, and CSS.  For server side programming I intend to use Node.js.  My goal is to have a part time or full time career in programming.