Contents

keyboard_tab
HTML Crash Course
1
Course Intro
PREVIEW42s
2
What is a Website?
PREVIEW6m 44s
4
Tags
9m 3s
6
Forms
12m 5s

The course is part of this learning path

Start course
Overview
Difficulty
Intermediate
Duration
58m
Students
25
Ratings
5/5
starstarstarstarstar
Description

This crash course in HTML starts off with some basic questions such as "What is a website?" and "How do websites work?" before moving on to look at the fundamentals of HTML. We recommend taking this course as part of the Web Penetration Testing & Bug Bounty Hunting learning path.

Learning Objectives

  • Understand the basics of what makes up a website
  • Learn the fundamentals of HTML

Intended Audience

This course is ideal for beginners who want to learn the fundamentals of HTML and its role in building a website.

Prerequisites

To get the most out of this course, you should be familiar with using Kali Linux since it will be used throughout this course.

Transcript

Hi, within this lecture, we're going to continue covering different kind of elements and attributes. So, let me copy one of the things over here. So, we have covered the paragraphs, now I'm going to paste it in here just to take notes. So, if you don't want you can just skip this, okay? I'm going to call this anchor tags. We generally see anchor tags in web pentesting when we deal with links. So, how do we create links with anchor tags? So, let me show you there is an attribute called href, okay? So, H-R-E-F. So, if you write it like this, you can write any URL in here, but we are writing it inside of quotation marks. For example, let me write "https://atilsamancioglu.com." So, this is my full name, okay? You have to spell it exactly like this or you can just write google.com if it's too complicated for you. And over here we write the text that will show this link. So, this is a link. Let me show you what it looks like if we refresh this, here we go. It says my link. If I click on that, it will just take us to my website, okay? You can just try it with any link you want. Here we go. This is my website. And as you can see, it opened in the same page, same tab actually. What if we want to open this in another tab? So, there is an attribute for that as well, right? We can use this. So, this is href attribute and this is the target attribute. So, if we change this target attribute, if we just come over here with single quotation marks this time, okay? Then this is double, this is single, this time I'm going to write something like this blank with an underscore, there's an underscore here, not a space, so _blank. So, if we test this, if I click on it, it will open this in a new tab. So, that's all you got to know about target and href. But how do you think I know about these attributes? So, do I know every attribute of every element inside of this code, inside of HTML in general? Of course, I don't know. I cannot know every attribute, I'm not even a fulltime web developer, okay? I'm a mobile application developer. So, how do I know about this stuff? I can search it, right? I can go to google.com and I can write something like this, html anchor tag attributes for example. If I need something like that, I can just search for it and see where it takes us. It takes us to html.com, okay? So, this is html.com and you can see all the documentation about anchor tags in here like the href and let's see what else we got here. Like we have the target, it actually shows us what we can use for what, like we have the title, we have the href, we have the name, okay? If you click one of those, you can see why they are used and how to use them and where it is supported, okay? So, I don't know all the attributes and you won't know, you can just look it up anytime you want, okay? So, that's how I know about the target blank. So, if you come across in a situation like that, you can just google it or go to html.com and read the documentation. Now, let's move onto some other elements that we're going to commonly see and use in web penetration tests, okay? So, I'm going to copy this command and paste it in here one more time. So, let me delete this and write Forms. So, forms are very common elements that we see or very common structures that we see. If you're asking for some inputs like name, surname, email, password, you generally do this with inputs structured around a form. So, we're going to see a lot of forms and work with a lot of forms. So, this is basically why we are doing this section at all, okay? We need to know about fundamentals of HTML and we need to know about definitely the fundamentals of the form. So, you create forms by typing this and right now, we cannot see anything but we're going to once we fill this form and what I want to do, I want to get the name and surname or password or email of the user by typing some stuff in here, and they will be structured altogether in here and they will be in a group, right? So, let me show you what I mean. When we deal with these group things, we definitely want to use something called div. So, when you use div, you want to group something together by its own, it doesn't mean anything actually. Okay, you cannot use div just to use div. You use div to have a good structure. If you go to google.com for example to our inspector, you can see all the divs over here. And then I open one of the divs, we can see they are collected together. They are structured together, so all the items that make sense to be together are grouped in here. It's not mandatory to use this actually. However, it makes sense and it would be much more good practice for you to use this. Of course, again, this is not a web development course at all but we're going to see a lot of divs when we deal with web penetration tests and we should know what it is. For example, I'm going to use div in my form and you will see why I'm doing that. So, inside of my div or inside of my form, what I want to do, I want to get some input from the user. So, I'm going to have a label, okay? So, label means some simple text. What do I mean? For example, if I want to use a username input text, okay? A text where I can get input from the user, I can have a label, I can have a title in front of that input, right? Like first name or username. It really doesn't matter, you can just use whatever you want. It will be like a title but not in bold fonts or not in strong positions, not in an emphasis way and after that, we close the tag and we go to input, okay? And as you can see input did not close its own tag because it's a self-closing tag. So, this is one of the rare situations that we come across when we deal with self-closing tags. Remember, we have seen break, we have seen the doc type and now this. So, we have to specify the type of this input which is going to be text in our case and I'm going to show you a couple of different types here as well. And then we're going to say name, username. So, the name of this input is going to be a username and I'm going to specify a placeholder as well. So, you will get to see what a placeholder is, okay? And that's it. That's all I want to do for my form right now, if I see how it looks like let me refresh. Here we go. This is what I'm looking for. This is the label, okay? And this is the input. So, I can write something in here and the placeholder disappears. So, this is my placeholder, username is my placeholder. If I write something over here, it will disappear. So, of course you don't have to use a label, you can just use the input itself but it's nice to use it, right? And they are very close to each other right now, so I'm going to use the break thing that we have learned before. So, we didn't get to practice it, so let me show you. If I say break over here and save this, and if I refresh this. nothing has changed so let me do one more break over here to see if that's the problem. So, two breaks and come over here. definitely, this time we got it. As you can see, it's not very close right now, you can do as many breaks as you want and it's a self-closing tag as well like input. And now I'm going to do the same thing but inside of a different div. So, I could have done this without divs but it's nice to do this with divs because they belong to each other like labels and inputs. They are a group, right? So, I can come over here and just say password and password in here as well and let's change the input type over here. Right now it's text and there is an input type called password as well. So, let me show you what happens when we change it to password. So, let me refresh this and here we go. We have the username and the password, so it's not very aligned, it's not very pretty but that's not what we're looking for, afterwards I'm going to show you how to align them. So, let me do a break in here. So, let's see. Yeah, here we go. We have the break. So, for the username I'm going to write something like atilsamancioglu, okay? And for the password, I will write something but it's not showing, right? So, this is for security purposes and how does it understand that I'm writing a password? Because I've changed the input type. So, if I did write text in here, it will still show me that. So, this is one of the common things that we're going to use in pentesting as well. For example, if you come across in a situation like this, you can see the password over here but you don't know what it is because it's like a sensor like this because the text type is different. So, I can just come over here to inspect element and I can change it from here because right now I know how to read HTML and I know a little bit about the attributes and stuff. For example, I can see this is a form. there are a couple of more divs over here, I can find the right div and I can come and see the type is password. So, what can I do? I can just double click on that, delete the password and say text, and here we go. I can see the password right now. So, this is one of the tricks that we're going to use when we try and do some web pentesting. Okay, this is why we are learning about HTML so that you get to do this in a very easy way, right? So, this is all for forms right now, we're going to do a little bit more stuff in the HTML101 then we will move onto the penetration testing and see other details and technicalities of HTML along the way. Let's stop here and continue within the next lecture.

 

About the Author
Students
420
Courses
55
Learning Paths
3

Atil is an instructor at Bogazici University, where he graduated back in 2010. He is also co-founder of Academy Club, which provides training, and Pera Games, which operates in the mobile gaming industry.

Covered Topics