DEV Community: Saurabh Sharma

Attributes in HTML - Web Development for Toddlers

Saurabh Sharma — Wed, 23 Mar 2022 06:57:13 +0000

Last we talked about HTML elements and their syntax!
We came across an odd looking piece of code, that went like this

<img src="https://picsum.photos/200/300" />

The syntax for an attribute goes like this:

<tag-name attribute-name="attribute-value"></tag-name>

And if you compare the syntax with that image example, we find an attribute, with attribute-name "src", and attribute-value as an URL to the image that's stored on the internet.

There can be multiple attributes associated with an element

Tons of them actually, and that's pretty common to see.
So how do you go about making that happen?
Here's a syntax breakdown

<tag-name attribute-name1="attribute-value1" attribute-name2="attribute-value2"></tag-name>

A real life example would look something like this:

<input type="password" name="userPassword" class="standard-input" />

And if none of these make sense, don't worry, we'll get there.
But you get my point, don't you?

From a surface level classification, we can categorise attributes on two sets of bases

Attributes which have some value

Like the ones we saw, there are some attributes that might contain some data, for example:

<button class="btn btn-primary">
 Click Me!
</button>

Now what does this class attribute do? We'll discuss that in the next chapter.

Attributes which don't have any value

There are some attributes that don't need any value, for example this bit of code with make the render the button as unclickable (try running it in JSBin)

<button disabled>
 You can't click me
</button>

Now the second way we can categorize attributes would be

Common attributes

These attributes can be applied on pretty much every element there is, some of them might be: "id", "class", "name" etc.

<button class="btn">Click Me</button>
<hr class="make-me-red" />
<div class="is-should-be-a-box">
I am not a box yet, we'll need to learn CSS to do so!
</div>

Although those class attributes and their values seems to do nothing in this example, we'll get to them when we start CSS in a few chapters.

Element specific attributes

There are some attributes which if applied with a combination of possible values, will direct the browser to function a bit differently.
For example the "type" attribute for "input" elements.
Run this code in the browser and see for yourself!

<input type="text" placeholder="This is a text input" />
<input type="password" placeholder="This is a password input" />

Try writing something in those inputs which just popped up! Did you see that?
The second input (password one) hides whatever you type, that's because we instructed the browser to do so (with the attribute type).
Also the attribute "placeholder" is "input" element specific. That means if you try to use this attribute on any other element, the browser wouldn't know what to do with it and won't make any difference.

Consider this

<div placeholder="Some value that makes no difference">
    See! "placeholder" is uselss here
</div>

Custom Attributes

The standards says if we ever want to store some of our values in the form of an attribute with an element, we do so with attributes prepended with "data-".
Now this won't make any difference, but it just helps us differentiate between native attributes (or the common + element specific ones) vs custom ones (the ones we create).

Now for example

<div custom-attribute="custom-value"></div>

<div data-custom-attribute="custom-value"></div>

Both of these are acceptable! But let's follow the standards (remember that animal analogy!).

That being said, why would we use custom attributes or to be more precise any attribute at all that does nothing in the browser output!?

Well, that's because element specific attributes only work because the browser's render engine is programmed to do something with it. Similarly we can use JavaScript to make use of these custom attributes or any attribute we'd like to do something that we want.
And we'll do so! in a couple of chapters, after a bit of CSS.

Elements in HTML - Web Development for Toddlers

Saurabh Sharma — Mon, 14 Mar 2022 11:34:56 +0000

As I talked about elements briefly in the last part of this series, they are the building blocks of what an HTML document is.

Though not a programming language (since there's no logic that you can implement with it, just an output layer), HTML still is a high level language.

What does that mean?

Simply put, the people behind it made sure to give us a lot of options to make sure we wouldn't struggle while working with it.

And elements are those ready-made stuff available for us to use however we'd like.
The combinations are endless (every website you've ever visited uses the same set of HTML elements to build it!)

Broadly speaking, elements can be divided in two types.

1. Elements that can bear children

We've seen them before!
Just to jog your memory a bit

<html>
  <body>
    Hello World!
  </body>
</html>

Do you see it yet?
We have two elements in this piece of code above. An "html" element and one "body" element.
They both seem to have a start tag that looks like <element-name> and ends with </element-name>.
And whatever resides inside or between those tags is called it's content of child or children (if there are more than one of them).

To explain it further, the element body is a child element of "html" element.
The text "Hello World!" is not an element, but it's still a child of "body" element!
So what is it if it's not an element?
It's that element's content! or to be more precise, it's a text node.

Wait ... what's a node?
Aaah, let's get back to compare it with some real life example.
In english we call them figure of speech right? And this example would be a "Simile" (correct me if I'm wrong).

The entire HTML element can be considered a tree (a real life tree, like a big one).
Everything in that tree can be considered a "node".
So whether it's leaves, the trunk (the huge body of the tree) or the branches, they're all nodes.

So ... an element is necessarily a node as well!
WAIT! What?
Yes, an element is a node. And the content that we write inside it could be another node (whether an element node or a text node).

So coming back to the example

<html>
  <body>
    Hello World!
  </body>
</html>

We start with an element node that's "html". It has a start and end tag.
It "contains" content. Content is whatever is inside those starting and ending tags.
And in this case, it's an element node "body".
Now comes the tricky part you see.
Body does have some content and it's a text node!

Did I explain that right?

Now the people who made HTML made tons of different kinds of elements for us to combine in whatever way we'd like.
And to be honest, most of them are replacable with each other. So why create so many of them?
To put it simply, it's for the sake of structuring our code to make it more readable.
To explain it better, consider an entire page of a newspaper in same font size, same color, nothing's bold, everything looks the same.
It'd work right? I mean you can still read it and get to know the news but it'd just confuse you.
You wouldn't be able to find when a paragraph ends, and a title begins easily.

And for that purpose, they made lots of these elements.
So let's see a few of these elements.

Open up JSBin, this online tool helps us write HTML code in the left panel and see the output on the right.
You may delete whatever's already there on the left, we'll write everything ourselves.

Let's start with this

<html>
  <body>
    <h1>
      This is very big heading
    </h1>

    <h2>
      Not as big
    </h2>

    <h3>
      This looks small
    </h3>

    <h4>
      This looks smaller
    </h4>

    <h5>
      This looks even smaller
    </h5>

    <h6>
      This is unreadable
    </h6>
  </body>
</html>

What are these elements?
These are what we call heading elements.
There are 6 of them that we can use. And as you might have noticed, "h1" has the largest text size while "h6" the least.

Now, spoiler alert!
You could make each and any of these heading elements to look like the other one or way different that they already look and that's all possible with CSS! That we'll soon get to.
But for now just understand that the HTML renderer (browser in this case) sometimes associates some basic styling with different kind of elements (like here it did, different font sizes for all 6 heading elements).

Take a look at this code now.

<html>
  <body>
    <p>
      Take a look at this
    </p>

    <div>
      This looks exactly the same as above right?
    </div>
  </body>
</html>

There's no visible font size difference here right!
Also what does "p" and "div" even mean?

"p" stands for a paragraph element while "div" for a division (there is one that's pretty similar to div, that's "section").

But why have two elements that look exactly the same?
Shouldn't we just use "p" to show some text?
Yes. We should. And if it's all so confusing right now, just know that we'll get there!

But there are two reasons as to why use multiple kinds of elements.

It helps with SEO. That's search engines.
It helps you structure your code better. "p" should contain text while "div" should be more like a wrapper or container that might contain other elements, for example tons of paragraphs!?

But what if what I'm trying to write is not a paragraph?
What if it's just a name that I'd like to show, technically in english it's not a paragraph right?
Should I still use the "p" element?
I mean you can, but then you should instead use a "div" element.
Take a look at this code below (write it out in the JSBin tool and see the output as well)

<html>
  <body>
    <h1>
      About me
    </h1>

    <div>
      Saurabh Sharma
    </div>

    <p>
      Saurabh Sharma writes code, makes applications, is struggling to learn piano and guitar. Also he likes to watch movies day and night.
    </p>
  </body>
</html>

Now, would it hurt if you used "p" instead of "div" or vice-versa?
No! But it just helps you organize your code in a better way!

Okay, okay, enough about it. We'll dive further some other time. Next.

2. Void elements, that can't have anything inside them

Unlike "h1", "p" or "body", these elements aren't supposed to have any child node (whether another element node or a text node).

For example, to show an image, HTML has a dedicated element that's called "img".
The syntaxt (the way it should be written) looks like

<img src="url-of-the-image" />

🤯 It hurts my brain! What is that? (You probably, or probably not, I don't know).

But this looks nothing alike the other elements we saw!
So let's go through that line of code bit by bit! (not actual computer bits :p)

We can see that the element does have a start tag but no end tag (that's the whole point of calling it a void or empty element).
But that start tag looks a bit off!
That's because unlike <img> it's <img/>.
But does it make any difference? Visually no, they'd both render the same thing (browsers are smart enough to recognize these void elements). Some might even not prefer to use that forward slash but I do! And since this is my guide, I'll ask you to use them as well!

Okay, next. What's that src="url-of-the-image" bit?
That's called an attribute! And we'll discuss and deep very dive into them in the next part of this series but for now just assume that you know what those are (fake it till you make it, right?).

There's this website picsum.photos that lets us use random images however we'd like. So in your JSBin code editor, put this in the left panel

<img src="https://picsum.photos/200/200" />

If you're wondering why didn't we use the entire

<html>
  <body>
    <img src="https://picsum.photos/200/200" />
  </body>
</html>

Well for two reasons, one, it's tiresome for me and second, since we don't really have a lot of code, it works the same.

Let's see the output! You should be seeing an image! Awesome!

But I wonder what would happen if I add an end tag to "img" element and put some content inside of it.
Okay, to feed your curiosity

<img src="https://picsum.photos/200/200">
  Is this text visible?
</img>

If you see a different image that mine, that's alright, that's the whole purpose of this picsum.photos server. It provides a random picture each time you request for one.

Now back to the point. It did show the text node inside the "img" element. But it wasn't how it was supposed to go!

And for that I have two explanations:

HTML is pretty loose about it's rules (it's not strict) and let's you make mistakes and the renderer or browser tries to do the best it can with whatever input you have given it.
Computers are dumb. So make sure to tell it precisely what you want it to do!

It worked right!?
An element that was supposed to be a void or empty element, that wasn't supposed to have any content or ending tag works the same way a container element would.
And you're right, but that does not mean that you should do it.
There are rules that we should follow, a structure we should maintain. I mean rules are what makes us different from animals right? You could go hunt a deer and eat it bare handed but should you do it?
Absolutely no. Don't do it.

And that's the same here. Void elements can work the same as a container element but you should avoid doing that.

That's it for this piece of writing. Next we'll talk about attributes (the fake it till you make it thingy I talked a bit earlier).

Introduction to HTML - Web Development for Toddlers

Saurabh Sharma — Sun, 13 Mar 2022 20:34:03 +0000

Computers are dumb.

They're senseless machines that will do exactly what we ask them to do. If you ask them to kill themselves, they'll do so (Linux users might get it).

Why did I say that?
Well to tell that the code you write will only work if it's correct.
And that's the mistake almost all beginner programmers make. They make very silly syntax errors (the format that the code should be written in) and end up losing their minds over it.

HTML is no exception. Though it's not really a programming language, it's a markup language.
Now I won't go into a dictionary to find out what it means but what writing it for a couple of years tells me is that it's a structured language that helps you tell the web browser that you're using what to show and how to show it. (Well CSS does that but we'll get to it in a few chapters).

HTML stands for HyperText Markup Language.
HyperText simply means a link if that's what you were wondering. A link to another page on the internet (but what is the internet? I might cover this in another chapter).

Now coming back to it, HTML is what a web browser uses to render (show) content to the user's screen.

Now over years, there have been multiple updates to the way HTML should be written and rendered (I mean just take a look at computers from 20 years ago and now, there have to be such updates).

The version that's being used these days is called HTML5.
And we'll be learning some of that here.

And as I said at the beginning of this article, computers are dumb. There has to be a structure for the code we write. And that structure is called syntax.
Each language has its own set of rules that we need to follow. And as to who makes those rules, well that's a discussion for another day. (Quick answer, it's https://www.w3.org/).

Now that being said, the way a piece of HTML code (or some might call it document) should be structured is very similar to that of a human body (or anatomy? I was always bad at biology).

<html>
  <head></head>
  <body></body>
</html>

Ugh, what is that?
That's HTML! (🍾)

Okay but what's with those angle brackets (< and >)?
Those my friends are part of the set of rules or syntax that we talked about earlier.
Computers are dumb, so we need to follow a pattern to make sure they do exactly what we want them to do.

So let's start by analyzing that piece of code bit by bit.

We first write <html>. That's a tag. Or more specifically it's the starting tag for the element that's "html". And it has a counterpart as well!
Did you get that yet?
Voila! it's </html>.
They look pretty similar, don't they? But the ending tag (the counterpart), has a forward slash (/) before the "html" element name.

Also, we'll discuss what "elements" are later on in detail.

So up to here, we've talked about following a structure when writing code and that there's something called starting and ending tags.

<html></html>

Every HTML document or code or file or whatever you'd like to call it should have a root element that's "html".
What does root mean?
Let's recall that anatomy I talked about.
Consider human body for example. It has parts. Mainly head and the rest of your body (well technically there are way too many parts, but just to understand we'll only count these two).

In terms of an HTML document, that <html></html> denotes the start of your human skeleton as well as the end.
You'd need to put your head inside of it (your head's inside your human frame is it not?).

So we could write something like

<html>
  <head></head>
</html>

That seems about right!
Now, what about the rest of your body?

<html>
  <head></head>
  <body></body>
</html>

Wait wait wait...
Can you notice that the body tag is adjacent to the head element and not inside it? That's the correct way to put it!
And now here's where we end that anatomy comparison.

Let's talk about what an "element" is!
Should we talk about chemistry a bit? Because element sure is a concept there.
Elements together make a compound (if I'm wrong, in my defense I hated my chemistry teacher, hate might be a strong word for it but yes I did).
And that's what elements do in HTML as well!
They're the building blocks of the entire HTML document.

The root element has a start and end tag <html> and </html> respectively.
And the root element has two elements inside of it, "head" and "body".

Now the people who made the rules decided that the elements that would eventually reside inside "head" shouldn't be displayed in the browser. They're there to store metadata (such as the document's title, other SEO-related elements).
And if these sound made-up things to you, well you can simply ignore the last part.

They also decided that whatever we write inside the "body" element's start and end tag should be displayed in the browser window.

Though these are the rules, browsers aren't very strict about that. If you end up writing something that should be in the body, inside the head element, it'd still render (but don't do it! 😠)

Okay, enough talk.
Open this JSBin link.
This tool lets us write HTML and render it as we write it.

If you open this link, it might look something like this.

(It might look white to you, I have the dark mode enabled).

Okay, so scary right!
There's a lot going on in the HTML code editor (the left panel).
Well, fear not!
You can delete the entire code that's there (select all, that's ctrl or cmd + "A" and delete).

Now write this instead.

<html>
  <body>
    Hello World!
  </body>
</html>

Woah! Did you see that?
That's your first piece of code! And it works (it did right? 😬)

If you're wondering why didn't we include "head" in this one, well that's because we don't need it yet.

Also why "Hello World!"? It's a tradition. Programmers all around the world write code that outputs "Hello World!" to get started with anything. 🙏

We'll continue with detailed explanation about "elements" in the next chapter!

Link to previous part #1 of this series

Some lines from me - Web Development for Toddlers

Saurabh Sharma — Sun, 13 Mar 2022 19:52:56 +0000

I know the title's clickbait, but since I've been writing web applications for a couple of years I think it's about time I give back to the community.

If you'd like to follow along with me through these guides, we'll end up writing apps in HTML, CSS, JavaScript, Vue.js, Laravel with MySQL and Firebase and will host them over Netlify, Firebase (yes it does that as well, in case you didn't know) as well as boot up an Ubuntu instance with LEMP (that's Linux, Nginx, MySQL, and PHP).
You could totally ignore these if they seem too foreign to you. We'll catch up with all of them as we progress.

So what's the purpose of this article

You could skip this if you'd like, but I'd like to present my views on why you should learn to make web applications and why to choose the stack that I work with.

I consider writing code a fun activity. People frequently ask what would you be doing if money wasn't a factor (which is a very unreal scenario considering that we live in a capitalist world), and my answer would be, ... I'd be writing code.

If writing code doesn't spark something in you, then it'd be just another maths class for you (assuming you didn't like all mathematics lessons lol).

And if you're still here, then why choose web development?
Why not Android, iOS, or systems applications?

Should you rather be designing web interfaces in Figma or Adobe Illustrator?
Should you rather be using WordPress to build the blog you want?
Should you rather use a landing page tool just to show some contact information or your photography portfolio?
Should you rather be using Shopify or WooCommerce to build your e-commerce store?

Or do you want to do it yourself? Want to go through writing thousands of lines of code, in various languages, staring at the screen for hours while stuck on a single bug.
Would it tire you? Do you still want to do it? Do you still have that spark left?

And if yes, then we'll start with HTML in the next part of this series!

Link to part #2 of this series

Sum of first "n" odd numbers with Python

Saurabh Sharma — Tue, 03 Sep 2019 13:19:26 +0000

It is my first post so ignore any silly mistakes.
Moving onto the topic. As it says I am going to make a python program to find the sum of first “n” odd numbers starting with 1.
Now before you go into my while loop if you are here for quick result. Here is the easiest way to do it.

Now if you are wondering why the heck I print “square of number”, then you may need to go through basic mathematics. Alas! I am a coder man. So head to this WikiHow post.

Now coming back to problem. If you are still reading probably you also don’t like such silly and short method.
Welcome to a large solution. (Still small xD)

HA! Now comes my favourite (favorite if you are American 😄) part.

Step 1. We take input and convert it to integer. Cause that is string right?

Step 2. We define some variables. “i” is iterator which will tell when we have reached “n” numbers (If you forgot “n” is the number of odd numbers we have to add). The “current” variable is our sum of numbers which gets updated at every loop (the loop we will write in next step). Initially set to 1, cause that’s our first odd number in Mathematics. And finally we got our lovely variable for which we are writing this all, “sum”. By the way it also gets updated at every loop.

Step 3. We got our very own while loop. You know what it is right. It keeps on repeating itself until its argument is true. And that argument my readers is the boolean value of “ i < n ”.
Now it means when i becomes equal to n, we stop our loop cause we added them. And print the result. I know what you are thinking. The inner of loop.
Here we have “some” variable being incremented by the value of “current” variable. Which in first iteration is 1 (first odd number), after that we update our “current” variable to next odd number which always is +2, or am I wrong?
Next thing we do is increment our iterator cause without that you know it goes “to infinity and beyond”.
Hope you like it, cause even if you don’t I can do nothing.