Nikhil Palanki

I've always been fascinated by the intersection between human phenomena and computing, specifically in fields of education, financial markets, and creative design. My programming interests are in machine learning, artificial intelligence, neural networks, cryptography, blockchain infrastructure, market making, simulation and modeling, and quantum computing. Outside of ByteRevel, I co-founded and spent four years working on a software consulting company, Quadral Apps (It's now defunct as the founders have all left). My interests outside of computer science are poverty alleviation, humanitarian engineering, education, financial markets and economics research.

HTML Tutorial I – The Basics

2 minute read

Regardless of what people tell you, HTML (Hyper Text Mark-up Language) is not hard to learn. It is arguably the easiest of the 4 major Web Development languages (HTML, Javascript, CSS, and PHP) to learn. In the following tutorial, you’ll learn how to create a webpage that says “Hello World!”

You can use any plain text editor to write the webpage. If you use a Mac, TextEdit works well. If you use a PC, Notepad works. If you want to try a very good HTML Text Editor, use Notepad++ or HTML Notepad. They both support many features (such as code highlighting) in Python, Perl, CSS, Javascript, and More!

In order to compile your HTML page, simply go to File -> Save As and save it as a .html file. If given the options choose UTF-8 encoding and save as ‘all files’. Saving procedures differ from program to program. Now that you’ve saved it, drag and drop that .html file onto your favorite web browser (assuming you have content on your page, it will appear). If you are using a non-HTML specific editor, ensure that Rich Text Formatting is turned off.

When you create a simple HTML page, you can use the following template. In most HTML web pages, you need to include the following.

<HTML> <!-- Required-->
<HEAD> <!-- This shows the title of the page-->
<TITLE>--Include Name Here--</TITLE> <!-- This is the Title of your page-->
</HEAD>
<BODY>
--You include all the Webpage content here--
</BODY>
</HTML>

 

The first thing you should know about HTML, is that it uses things called “Tags.” The Tags in the template are <BODY>, <HEAD>, <HTML>…You get what they are. They are pieces of code included in the <>.

When you start a tag, you write the tag above what you’re including in your tag. After you finish what you wanted to include in your tag, you end it with a tag that looks like this </BODY>. It doesn’t have to say BODY. It is supposed to say whatever the Tag you specified says.

For Hello World!, you use the template above. But where it says <BODY>, you hit return once. Then type “Hello World!” The code should look like this. What you should type is italicized.

<HTML>
<HEAD>
<TITLE>My Hello World! Page</TITLE>
</HEAD>
<BODY>
Hello World!
</BODY>
</HTML>

In order to test out your program, save your program as an html file by typing in .html after the document’s name. Then drag and drop the .html file into your browser and watch the magic!

And now you have mastered the basics: Remember the following

  1. HTML uses Tags. i.e. <BODY>, </BODY>

  2. You have to include the ending tag. You know it is the ending tag because it contains the same letters as the previous tag, as well as a forward slash before the word.

  3. You can incorporate Javascript if you are feeling adventurous.

  4. And finally, you can use basic Text Editing software. Word won’t work, but even more basic ones that are pre-installed on the computer will. Try Notepad and Text Edit (for PC and Mac, respectively). Also, try out HTML Notepad. It works beautifully, and lets you incorporate Javascript, Perl…

Enjoy!

Leave a Comment

You May Also Enjoy

The Growth of Sharing Services

2 minute read

Over the past few years, the tech sector has seen an emergence of, for lack of a better term, “sharing services,” or companies that network and rent out dist...