Introduction to HTML

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 start covering HTML. Okay, so if you don't have Kali Linux open, please open those because we're going to be working in the Kali Linux. Of course, we can write HTML and learn about HTML in any operating system, but since we're going to work with Kali Linux at the majority of this course, it will be a good practice for us. So, what is HTML and why are we trying to learn it, okay? So, HTML is a markup language. It's not a programming language actually, it's a markup language or a way of showing things. We're going to be working with HTML a lot when we do web pentesting, why? Because we get the responses back from hosting or servers like in an HTML form, HTML is what we see in our browsers. When we go to google.com or any other website, we get an HTML file back and that's what we see in a browser, okay? Let me show you what I mean. If you open your Firefox, for example, and if you go to google.com or any other website that you may think of, okay? So, let me make this a little bit bigger. So, this is HTML. This is the representation of the HTML so that we can see what's going on, right? So, there's an image, there is an input over here, there's some couple of buttons and that's it. So, if you right click over here, you can actually see the source yourself. You can say view page source and this is the HTML file of the google.com. So, as you can see there are a lot of things going on in here, there's some JavaScript here as well. We're not going to be covering JavaScript because JavaScript is a programming language and it's like maybe another subject for a whole course and we don't need a deep information about JavaScript in order to be a pentester, but we need at least the fundamentals of HTML because we're going to be dealing with those a lot and it's fairly easy to understand and it's very easy to implement as well, so we're going to be covering the fundamentals of the HTML so that we will understand what we are doing. And if you say inspect element after right click, you can see a fairly simple representation of the HTML over here. We're going to be using this inspector a lot during our pentesting, so it's good to understand how to use it right now. As you can see, there are a couple of things over here called div, body, maybe style, spence, center. So, maybe if you know HTML you know what I'm talking about right now and if you don't know it, you're going to learn it and you're going to understand what are all of these things in a minute, okay? But you need to understand what all of these things mean because if you don't understand then you're not going to understand how we pentest. So, I believe this is one of the things that are missing in a lot of pentesting courses online, okay? On the Internet. So, that's why I have decided to include this HTML section in the beginning of this course. We're going to learn HTML, we're going to understand how to read all of these things and of course, we're going to write all of these things as well, but at least you need to understand how to read all of these things so that you can understand what's going on over here as well. For example, we're going to be working with the inspector, the network storage, all of this stuff. I'm going to go in all of those things later on. First, we need to understand how to write HTML so that we can fluently read it at least. So, what I'm going to do, we're going to close this down actually, we don't need this anymore. We're going to open a text file, okay? You can write HTML in any kind of text file or in any kind of text editor. So, there are a couple of ways to do that and I'm going to show you every one of them, okay? So, let me go into the documents folder because we're going to create some text file or HTML file. If you write nano, nano is a script editor that comes with Kali, and if you write nano html101.html, it will create this file for you, okay? And you can just start writing stuff in here. But as you can see, nano is very simple and it's not very user friendly, but again we can use it. We can write whatever we want in here, okay? I'm going to show you more user friendly versions, like more script editors but right now, we can just write this, html, html and you close the tag with slash sign at the below. I'm going to show you what all of these things mean, I'm just doing this as an example. I'm writing Hello World as all programmers do when they first learn about stuff. When you type this, you can hit 'Ctrl O' and 'Enter' to save and 'Ctrl X' to get out of it. And again, I'm going to explain what all of those things mean, just do 'Ctrl O' and save this by hitting 'Enter' and hit 'Ctrl X' to go out of the nano. And here we go. Now you'll have this file created. So, if you open the documents folder right now from your Kali Linux, you will see the html101.html and you can actually open this in your browser, right? You can just say open with Firefox. And you can just open with any other web browser as well if you want. But as you can see this is an HTML file, this is something like a web page and we only have hello world text here as an example. So, you can use nano to follow along with me and learn about HTML. But again, it's not very user friendly. Maybe you may want something different, okay? So, in order to do that, I'm going to show you some other alternatives as well, like Geany. So, if you search for Geany, you can see geany.org. So, this is an IDE or a script editor where you can write a lot of different programming languages as well like you can write Python, you can write Java. I'm using Geany daily in Kali Linux. So, in order to download and use Geany, you can use this command apt - get install geany, okay? So, if it doesn't work or if you cannot download an open Geany for some reason, don't worry, you can use the other stuff that we're going to work. Just write geany and hit 'Enter' and it will pop up the Geany for you. I'm going to be using this Geany, okay? So, you're going to see how it's used, so let me show you some other alternatives as well. So, don't forget to make this open. You just create a new tab because the other tab is running the Geany for us. So, I'm going to go into the documents again and I'm going to call this command gedit, okay? gedit index.html. You can name the folder whatever you want or file whatever you want. And apparently, we don't have the gedit so let me just run this and say yes, apt get install gedit, it will install the gedit for you, okay? So, if it asks something at this point like why or no, just say yes and it will download this stuff for you. gedit is another script editor like nano but it's actually a little bit fancier and a little bit more user friendly, so this is another alternative for you to run or just learn about HTML, okay? So, let me clear this and write gedit index.html one more time. So, here we go. This is the gedit. As you can see, it's again a simple text editor but it's a little bit more user friendly. So, I'm writing some stuff but you cannot see it. I believe the font name or font color is white and background is white as well, so it's not very good, we can change this. So, let me try and see where we can see the options. Here we go. We have this three dots and preferences. So, we have the fonts and colors, maybe you can choose another color like this. Yes, that's pretty much it. We can now see, and let's try to actually increase the font size a little bit. So, let me change this, okay? And come over here and just increase the size a little bit so you can see it in a better way. Here we go. Now, this is again a text editor, you can just come over here and write html and html one more time. The exact same thing that I have written before an Hello World and hit 'Save'. Now, you have index.html, okay? I've used the index because index.html is the first page that is to be shown when you open a website, we're going to see about that and here we go, we see the Hello world. Again, you can use gedit, you can use nano and you can use Geany if you make it run. You can come over here and say nil and you can write whatever you want like html. But again, I believe we have to increase or just save it as something else over here. I'm going to override the html101, html101.html is a very good name actually because we're going to see the 101 of HTML. And did you see it when I type html? It close the tag automatically, that's what I'm talking about. It's much more user friendly. So, let me just find a way to increase the font size here as well. Let me go to properties. Yes, I cannot do that from here apparently. So, it only shows me the location and read and write files of stuff. So, let me come over here to maybe file page setup. No, no, I don't think so, it's for printing out, let me go to view and zoom in. Yes, that's going to do it. I'm going to zoom in so you can see it in a better way. So, I have opened the tag and write html and it automatically closed the tag, we had to do that manually before. So, if you hit 'Ctrl S', it will save it and if we double click on that or if you open it with Firefox, it will work one more time. So, choose either one of these, out of three actually, three alternatives, nano, Geany or gedit and follow along with me. I'm going to continue with the Geany as it is the most user friendly one. And we're going to stop here and start learning about HTML in 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