3. HTML: A Detailed Look

In the previous post we looked at how easy it is to actually create a webpage. Of course, not the most informational, content-rich or beautiful webpage, but one that is yours. By now you probably have a lot of questions. No worries, we will go through them one by one.

First and most importantly:

What is HTML?


HTML or Hyper Text Markup Language serves as the backbone that holds all of the content of any webpage. Literally all of them.

“Even giants like Facebook, Google, Amazon?”

Yes. They weren’t developed the way you are developing right now, but the technology to display content is the same.

Is there an <h2>?


Yes, not only <h2> but it goes all the way to <h6>. Let’s try it out and see for ourselves! In the same .html file you created when reading last post, just copy and paste the <h1> heading 5 more times, so you have 6 in total, then just change the numbering as follows:

<h1>Web Development: Day 1</h1>
<h2>Web Development: Day 1</h2>
<h3>Web Development: Day 1</h3>
<h4>Web Development: Day 1</h4>
<h5>Web Development: Day 1</h5>
<h6>Web Development: Day 1</h6>

How many elements are out there?

A lot. We’re going to go through the most important and commonly used ones in this post.

Lists


Most webpages list stuff. Be it the latest news, tops, e-shop items, pictures, you name it! So let’s list some stuff ourselves! Let’s begin with the unordered list, what does that mean? It means that the individual items are provided in no specific order.

For example, you could create a shopping list for groceries. To write a list, you have to start with the opening and closing tags:

<ul>
</ul>

(for unordered list)

Next up, lists contain list items. Each list item also has opening and closing tags:

<ul>
<li></li>
</ul>

That’s it! Now all you have to do is create as many list items and fill the area between the tags with groceries, like so:

<ul>
<li>Milk</li>
<li>Bread</li>
<li>Cheese</li>
</ul>

The result should look like this in the browser:

Ordered lists are made the same way, just edit the list tags themselves from <ul> to <ol> (for ordered list), like so:

<ol>
<li>Milk</li>
<li>Bread</li>
<li>Cheese</li>
</ol>

The result should look like this in the browser:

Links


What would the internet be without links? Obviously websites link to one another and they have links for other pages and even link to positions in the same page aswell! Let’s create a link right now. Just as with most HTML elements, links need opening and closing tags aswell. They are written like so:

<a></a>

“What does “a” stand for?”

It stands for “anchor”, don’t ask me why. We just roll with it. If you add a link element like above to your webpage and refresh the browser, nothing has appeared. Why?

It’s because a link element has multiple parts:

  • The link text
  • The link target
  • Additional elements

So let’s add the link text first:

<a>My first link!</a>

“Okay, the text appeared, but I can’t click it?”

Yes, because we’re still missing the link target. The link target is where you will be sent to after you click the link. Choose the full address to your favorite website, or just use “https://www.google.com/” and add it as a link target like so:

<a href="https://www.google.com/">My first link!</a>

Yay! It became active and is now clickable! How about the other additional link elements? Most important ones are the “target” and “title” elements, let’s add them:

<a href="https://www.google.com" target="_blank" title="Sends you to Google search!">My first link!</a>

As you see, the elements can be added within the tag, just by adding them before the “>” character.

The target element specifies what relation your page and the linked webpage have, in our case, we simply specify to open the link in a new (blank) tab.

The title element provides any additional information for when a user puts their cursor over the link but doesn’t click it yet, try it!

Tip:

Before clicking on a link, always check where it leads by looking at the lower left corner of the browser. Links, especially in e-mails might be dangerous, so compare the links whether they have the same starting part as the website you intend to go to, for example, if you receive a link that says it will go to Facebook, hover over it with your cursor and double-check whether the link really starts with “https://www.facebook.com/”. Nowadays you can easily put yourself in danger by clicking the wrong link.

Images


Ah yes, what would the internet be without cat pictures, memes and the sorts. Adding an image to your website is very easy. There are also multiple ways to do it, but I will show you the easiest for now. Let’s add an image:

<img src="https://s3-eu-west-1.amazonaws.com/onin.london/assets/macexplorer.com-puppy-dog-26.jpg">

“src” means “source”, where is the image located. You can change this part to whatever you like, just take note that the link should end with an image extension, like “.jpg” as in our case or for example: “.jpeg”, “.bmp”, “.gif” and others. 

You can get the link of any image on the internet by right clicking it and choosing “Copy image address” for Chrome.

You can also add images from your computer, just go to the folder where the image is located and copy the path from the address bar, add the image file name and extension, for example, like this:

Note, that the img element does not have a closing tag.

Summary


By now you should already feel comfortable using HTML elements. We gained a bit of knowledge about the most commonly used elements on the internet and tried them out for ourselves! Good job!

2. Good ol’ HTML

Ah, the good ol’ HTML. Open notepad, right now. We have your first website to build.  Write the following:

<html> 

Now save it somewhere with the name “index.html”. Don’t close notepad, just save the file.

What you just wrote is an html tag. This is an html opening tag, which means whe need a closing tag aswell. Press “Enter” once to create an empty line, then write:

</html>

So now you should have it like this:

<html>

</html> 

Great! Now you have defined the start and end of your website page! Wasnt that scary now was it?

Lets see how it looks!

  1. Save the file.
  2. Open your favorite browser.
  3. Drag the file into the browser.
  4. Press “Enter”.

If all you see now is blank white nothingness, you have succeeded! You are now looking at your first webpage!

“Its the most boring website I have ever seen, there is nothing in it?”

Correct, now lets make it look like a website. We will turn it into a diary page, so what we will need is:

  • A title.
  • Some text on how it went.
  • Information on when did we write it.

Fair enough, lets start with the title. Write the following, just under your opening html tag:

<h1> 

“What in the world is an h1?”

It stands for “heading 1”, in other words “a big title”. As you may have noticed, this seems similiar to the html opening tag. Its actually a “heading 1” opening tag! In the same way, it needs a closing tag. So lets write one literally just after the opening one, like this:

<h1></h1> 

Now comes the fun part, you can start creating content! Think of a good title about learning html today or just write: “Hello word!”, in between the opening and closing “heading 1” tags, like this:

<h1>Hello world!</h1>

Now your whole document should look like this:

<html>

<h1>Hello World!</h1>

</html> 

Great! Now you should be able to see your website.

  • Save the file.
  • Go back to the browser.
  • Pressing “F5” also known as – refresh. (Because it loads in all of the freshest data for the website. Sometimes pressing this helps if you see weird things happen on a website.)

Great! What youre seeing now is your very first website evolving into something that you will look back on with a wide smile.

Lets add more!!

Paragraphs are the main text containers in html. So lets create one. Write opening and closing paragraph tags, just under the title, like this:

<p></p> 

Easy enough! Now I would strongly suggest to write down descriptions for all html elements you used up to this point without scrolling the blog post up. This will help you remember better. Just look at the code and write up what you remember and then compare to what I wrote previously.

Once youre done, I will tell you about how to separate sections of a paragraph, so its easier to read.

Whenever you wish to break the text into the next line, just write:

<br> 

This one is special, because it doesnt need a closing one, it simply doesnt exist. The reason is because a line break doesnt have anything in it, also the common practice is to just add these elements (but only in between <p> and </p> tags) as much as needed.

For example, if you want to create an empty line between two paragraph lines, just write out two <br> tags.

Here is an example of a final document:


<html>

<h1>Hello world!</h1>

<p>

Today I started learning HTML. I found it pretty easy.

<br>First you have to write opening tags for stuff, then you write stuff, then you write closing tags.
<br>Not all elements have closing tags.
<br>I can also write titles now and move paragraph lines away one from another.

<br>
<br>

August 4th, 2018.

</p>

</html> 

Final Document Result (as seen in the browser):


Great! You’re very own first HTML document! It’s not the most beautiful or the most informative, but it’s a very important one, because it’s where it all started! Carry on now to the next post, where we take a more detailed look at HTML.

1. Programming: An Introduction

What is programming?


Let’s get right to it – programming. What is it? What does it take and what does it mean to be a programmer?

Merriam-Webster defines it as “the process of preparing an instructional program for a device (such as a computer)“. How on earth do you even get around to preparing an “instructional program for a device”? You write it. You write code. Just like you would write a poem, with a specific way of writing words, using punctuation and structure.

“Wait you don’t write out “01110010 01100001 01101110 01100100 01101111 01101101 00100000 01101111 01101110 01100101 01110011 00100000 01100001 01101110 01100100 00100000 01111010 01100101 01110010 01101111 01100101 01110011 00101100 00100000 01101100 01101111 01101100″ to the computer?”

You can do it if you really want to (you probably don’t), nowadays you write words in English. Then the computer takes it from there, it does at one point translate your code into ones and zeroes (binary code) because computers at their most deepest level are just electricity switches, where “1” means electricity can go a particular way and “0” means it can’t.

“So you want to tell me, programmers are wizards that bend electricity to their will?” 

Yep. Ain’t that cool? Let me tell you a few things that programming is not.

How to be a programmer?


I want to completely destroy the following stereotypes right here and now:

“You have to be a professional in mathematics in order to program.”

The most popular stereotype I’ve heard and it’s one of the most false ones. No. Your skill at mathematics does not affect when you can learn programming. I don’t even know where this came from, but think about it – computers are infinitely better at math than humans. Humans are infinitely better at solving tasks creatively. Computers cannot do anything without instructions. Of course, if you plan on joining the industry in a sector that’s specialized in mathematics, like companies that create massive reports or otherwise do a lot of number crunching, then of course you will need to know math.

Knowing math is useful in any life situation, but it definitely is not necessary to learn programming. If you will need it, you can learn it along the way (in case you want to do it right this moment, khanacademy.org is an amazing learning platform that has a lot of material on math for free, they’ve turned learning math into a game).

“You have to attend university to learn programming.”

Yes and no. Yes, because universities are ok when you do not know what you want and someone is ready to pay for your uncertainty. No, because most universities do not cover real life situations in programming. Students are not instructed to solve real life problems in real life situations, instead they are fed a bit from everything in hopes that something will stick, spreading their knowledge far and wide, and not supplying them with enough of practicality.

 I, personally, would suggest to learn off of the internet (like you are doing now, good job!) and when you have something to show, join an internship, a bootcamp, a meetup, jump into the real life programming environment and have professionals around you as soon as possible. Only people with real life experience will lead you into the right direction. I self-learned myself into joining an internship, then I was hired full-time. You can do it too!

“You have to be real good with computers to learn programming.”

I find this one pretty true, because obviously you have to know the machine you’re going to be writing poems for, but it’s not fully true. In reality the minimum of what you need to start is:

  • A computer connected to the internet.
  • Understanding of the English language (there are learning materials in other languages, but English has the most).
  • Willingness to learn.
  • Notepad.

That is all. In order to start learning programming, this is the minimum requirement list. With so much information on the internet about pretty much anything, the information you want to learn about computers is most likely just one Google search away. Even if you are not professional with computers as to how they work inside, you will learn this on the job.

“We’re going to write in notepad???”

Yes, we are going to start off with notepad.

How to be a good programmer?


In order to actually succeed as a programmer, you actually need 3 traits:

  • Patience
  • Eye for detail
  • Being communicable

Patience

In reality, you will get stuck a lot, especially in the beginning. I will give tips on how to get stuck less frequently and when you do, how to get back on track faster. It is inevitable, that you will have situations where everything “should work”, but doesn’t. You might be stuck on problems for days or even weeks. That is the reality of being a programmer. It is not because you’re bad, it is because there are a lot of moving parts to take care of and mainly – you are going to work with code others have written.

Eye for detail

You think a misplaced comma is a programmer joke? It isn’t. One small mistake hidden somewhere can, in fact, crash a system. There are tools and techniques that help you with finding problems like this, but it is also inevitable. In programming “myProgram” and “MyProgram” may have two entirely different meanings. Everything has to be precise for the program to run smoothly.

Being communicable

“What? But I thought i’m going to give instructions to the computer, not humans!?”

Of course, but you will work alongside other humans, you will be taught by other humans and you will participate in code reviews with other humans, where other humans will look at your code, then at you, then at your code again. Then they will ask questions as to why do you think your code is the way it is. It is very important to be able to speak your thoughts clearly, to explain why you think your code will work the way you intend it to. It is also very important to ask questions when you are stuck. Do not even imagine that sitting and staring at your screen will magically solve the problem. You are a problem solver, so solve it. If you can’t, you can ask for input from your colleagues or the internet.

One fun exercise is to have a toy on your desk and you ask it the questions you have. You might come up with an answer while vocalizing your problem. It is called “Rubber duck debugging“, because the origin of this is when someone explained the problem to a rubber duck and came up with an answer to their problem.

As Wikipedia states: “Many programmers have had the experience of explaining a problem to someone else, possibly even to someone who knows nothing about programming, and then hitting upon the solution in the process of explaining the problem.”

I myself have written questions to colleagues, only before hitting “Enter” I realize, that the answer is hidden in the question itself.

How to start learning programming?


Do You Want To Know What It Is Laurence Fishburne GIF - Find & Share on GIPHY

You’ve gotten this far. You have shown interest. I believe it is time for you to venture down this rabbit hole and see where it leads you, start with the Good ol’ HTML.

Hello Internet!

It’s me – Arthur and this is ground zero. The beginning of an exhilarating journey, which I hope will bring value and in the best case scenario – inspiration.

What am I on about?


Quite simply – I want to create enough content, to bring anyone and I mean anyone from 0 knowledge in programming, to becoming employable. Given that you have the interest and the willingness to allow me to guide you through the journey of tackling the most sought after profession of our time.

Why am I doing this?


Because just like you, I started off somewhere without anyone I knew that could guide me through the beginning, which in all honesty is the hardest part (just like in everything). I have to admit that at the time when I started, I had quite a lot of experience with computers and the internet in general. I had practically no clue about programming though.

What content can you expect?


I went out to search and research on what is what, where to start, which path to take, which language and so on, and so on. This is what I will serve to you on a silver platter, in laymans terms and hopefully in a format, that you will find comfortable to learn from. As of today, I am starting to produce the series in which we will tackle (but not limited to) the topics below:

  • What is programming?
  • Popular myth destruction.
  • The basics.
  • Your first webpage!
  • Your first beautiful webpage!
  • Your portfolio webpage!
  • Free learning materials.
  • Video tutorials.
  • Tools.
  • Mini-projects.
  • Sources where to learn more from.
  • How do professionals do it?

So as you see, theory intertwined with practical projects. If you want to learn from dry theory and tons of terminology that doesn’t make any sense, you will not find that format here. I will attempt to break down the concepts into actually consumable material and refrain from fancy-pansy vocabulary as much as possible.

Wait – you said “for free”, what is in it for you?


I went from 0 to employable by self-learning everything. From material available online for free. Quite honestly, becoming employable in this industry is what saved my life in a way. That’s why I have personal attachment to the subject. That is exactly why I will go the extra mile and offer all of it for free, because it’s how I received it and it is how I will pay back to the community.

I believe everyone regardless of their origin, financial situation, life situation or whatever else, should have the possibility to learn programming nowadays. This is the future and it is coming fast. I wish to provide value and a chance for anyone, who maybe has only the willingness to learn should have the chance to learn. (back when I started, 29$ for a course was unaffordable for me)

So where will this content be located?


Right here, on my website. It will definitely change alot during the next months, but everything will be front and center, so you cannot miss it. Bookmark my page and/or subscribe to my newsletter to be notified of the latest news.


The internet helped me when I most needed it, now it’s time to return the favor. 


Best regards,

Arthur