HTML Tutorial: Getting Started

HTML. Hyper-Text Markup Language. The programming language that changed the web as we know it. Every since the early days of the internet, this programming language has been used on all web pages, and it is what all web browser use to display web pages. But that is just an overview. How do you actually start using it to create websites? Simple.

Start by downloading a text editor, such as Brackets. This is a common, cross-platform text editor designed to build websites. After you finish downloading the installer for your computer, open it up. You will be presented with an interface like this:

Brackets.PNG

The interface is much simpler than most other code editors out there. You may be looking at the text in the middle and being confused, but the rest of the interface is simple enough for most people to figure out. The lightning bolt figure at the right of the screen is what you use to display the page that you code. If you click on it now, you will see that the text in the middle is now being displayed in a webpage, inside your selected browser, or in most people’s case, Google Chrome.

You have just displayed your first web page. Now let us code a really basic one. Create a new file within Brackets by hitting the New button under the File menu. Now copy this code, I will explain it step by step.

<html>
    <head>
        <title>Document</title>
    </head>
    <body>

    </body>
</html>

First thing that you may see is the greater than and less than symbols everywhere. Don’t worry, they are quite simple to understand. When a computer looks at the code, it needs something to know where the content is located within the text. So, it scans for certain symbols, such as <, or >, and gives them importance based on the text between them.

The < and > define tags. Here is an example of a tag: <p>Some Info</p>
The <sometag> part defined the “opening” of a tag. The one with a slash in it defines the end of the tag, </sometag>. The info in between the < and > tell what to do with the information in between the <> and the </>.

So, the first line. <html> means that this document is an HTML document, and that the browser should process it as such. The second line defines the <head> of an HTML document. The head is like the extra information that doesn’t get displayed on the page. Many extra things, such as font styles and website styles go in the head.

Next we have the <title> tag. This sets the tab name to the text in between the opening and closing tag. In this case, the tab name in the upper left area will be set to Document. As you can see, we then close the tag, because the entire document is not a title, only that area is. It is still part of the head, which is still part of the html.

Now we have the <body>. This is the most important tag, because this is where all of the information will go. All of the content is here! So, we can simply type in text to that area, and it will show up in the web page. Try it now. Type in something to that area, then hit the lightning button on the right to see the result.

webpage.PNG

Pretty cool, eh! After that line of code, we end each of the tags that we opened up above, in this case the html tag and the body tag.

I will cover more in the next part of this series, which will be mostly video based. If you have any questions, ask me in the comments. Enjoy!

Building a Robotic Arm for Cheap: Part 1

This year, I am participating in Science Olympiad. Science Olympiad is basically a yearly competition, where students from around the country compete to do the best in their event. This year I picked robotic arm.

I haven’t done many things like this before. The arm hasn’t been built yet, so this blog will be like progress updates. Each update I will share pictures, possible parts, and later, video of the arm in action.

So, back to the arm. There are a few main components: motors, microprocessor, battery, and frame. All of these fit together to create one cohesive product that can be very efficient, and powerful. I’ll explain them one by one.

Motors. You have definitely have heard of these and used these in your life. However, what you may not know is that there are different types of motors. The different types of motors are servo, DC, and stepper. DC is the kind most people are familiar with. Give it power and it spins. More power = faster spin. Unfortunately, using this in a robotic arm is very unwieldy. You cannot keep it steady, because it would start to fall down the moment it stopped spinning. They are unwieldy, and not suited to a fragile arm.

Source: https://upload.wikimedia.org/wikipedia/commons/f/f4/DC_Motor.jpg

The best motor to use is the servo motor, or servo for short. Servos are good for an arm because instead of giving it power and it spins according to power, you give it power and an angle. This lets you have infinite control over the motor, because while it has power, it will try to stay at that angle, useful when you go to pick something up. Then when the arm dips down, it will be able to hold that position without jittering.

Source: https://upload.wikimedia.org/wikipedia/commons/d/d2/Servomotor_01.jpg

What is a microprocessor? If you have read my previous post, you may recall that a processor is in a computer, and that it does calculations. Well, a microprocessor is just a smaller weaker processor. Why do you need one? To control the position of each motor as it receives data from the controller.

The microcontroller I am using in my arm is the Arduino board. It is cheap if you buy it off brand, and it is reliable. The huge community built around it means that someone else has already done what you might be struggling with. The Arduino board is programmed in a language called Arduino-lang, which is very similar to C. C is an advanced programming language, along with being one of the oldest.

Arduino_Uno_-_R3.jpg
Source: https://upload.wikimedia.org/wikipedia/commons/3/38/Arduino_Uno_-_R3.jpg

There is one more thing which I haven’t covered quite yet: what a shield is for an Arduino. An Arduino shield is like an accessory that lets the Arduino do more. In our case, I bought a servo shield, which lets me plug in servos without doing and complicated soldiering or splicing. The shield automates the power distribution, and it makes it easier to control the servos.

Source: https://upload.wikimedia.org/wikipedia/commons/0/02/Arduino_Protoboard_Shield.jpg

I will write another post as I get closer and closer to finishing the arm. It will cover the frame, the battery, and some of the code required to use the arm. See you all next post!