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 finally going to start learning about HTML. So, first of all we actually have written our first code, right?

This is the first code. But it's not very complete or it's not very fancy code right now.

So, before we start, we need to declare that we're writing an HTML code. So, let me open google.com and see how they have started their HTML. So, if we open this and if we try to see the source, and you can do this in any other website as well. If you say view page source, you see this thing, DOCTYPE html. So, it means that we're writing with the HTML and we're writing with the latest version which is the HTML 5.0. So, before we write anything, we generally do this stuff. We open an angular brace or a smaller than or greater than sign, we're going to use those things a lot because these are called tags, and we work with tags in HTML. Okay, so get used to these things. And write this !DOCTYPE html. So, we are basically saying that this is an html file and we are writing an HTML code or comment. So, here we go. We are now ready to start. And the second thing that we're going to do is to use this tags again. So, we work with tags generally in HTML. We open tags and we close tags afterwards.

So, as you can see we opened the tag, and we didn't close the tag in DOCTYPE declaration. So, there's something called self-closing tags. This is one of the types and these are rare; we generally open the tags and close the tags, and I'm going to show you self-closing tags examples later on. But when you type or when you just write some tag, you must close it or else HTML won't understand what you're doing. For example, if you're writing a text, you need to say this is a text and for example, if you write html, then you should close it. So, this is a closing tag, and the left part is an opening tag. So, these are called tags again. So, here you go. It means that I'm starting my HTML code. And in HTML code, we generally have two different parts which are head and body. So, we can see this in every website because it defines some structure. So, body means body of the code or body of the page. It's what we see, actually. So, let me show you what I mean.

If you go to google again and say, "Inspect Element" we can see this body. And if you just close this down, as you can see there are two main parts under HTML tag which is the head and body. Okay, so when I hover over this head, it doesn't show me anything but when I hover over this body, it shows me the whole page. So, when you hover over items in this Inspector, it highlights the items that you're hovering on. For example, if you want to find the HTML code of this google image, you can hover over the items one by one until you see the code itself. And as you can see when I hover overhead, it doesn't show me anything, because in head we have general information like metadata, like the title of the page or the encryption of the page, something like that. Okay. But we don't have the items that user will see. For example, in the title we see the google, and this is the title. We see the google over here. Okay, so that kind of information, general information that we're not going to see in the web page itself. Like the title, like the Metadata content, UTF-8 encryption. Okay. We're going to actually use this in our HTML code as well.

If you don't give the title, if you don't specify a title, nothing will show up in the browser tabs and this is not what we want. So basically, in our HTML tag, we're going to have two separate text, first of which is head. So, in the head, we have seen we can specify the title, and again I'm writing what I have to write inside of these tags. Okay. If write something out of this tag, it won't be included in the head section. It will be included in something else. And similarly, if I write title over here, if I write something between these tags, okay, it will be included in the title section. If I write somewhere else, it won't be included in the title section. That's why we use text. So, here we go. So, I have written Kali Linux Website. If you save it, if you run it on your browser, okay? As you can see, now we don't see anything because we don't have anything in body but we see the Kali Linux Website as a title. So, before we didn't see that. Maybe, if you just delete it or cut this with 'Ctrl X' and save it with 'Ctrl S'. Okay, if you come over here and refresh this, as you can see, we don't see this, we don't have the title anymore. So, if you just replace it with 'Ctrl V', and save it with 'Ctrl S', then if you come back and refresh this, as you can see now I have this Kali Linux Website. So, that's it. That's why we use title.

So, in the  head section as I said before, it's not what user sees but it's the general information, we're not going to specify an encryption or something like content, maybe an image like the google logo icon in here. Okay, so it's enough for us to understand what head does, what we're going to do, we're going to focus on body to see different parts of the body. So, as you can see body is written in the same way like we did with the  head. So, that's it for the  head section. So, if I want to go into the body, then I will have to open another tag in here. But if I open it in here, it won't be body. Okay? So, if I write something in here, it will be included in the  head section, not body section. And by the way, you cannot write these random things. You have to specify. If you want to take notes for example, you can do this: < !-- Metadata for example,

Metadata is just a note that you take and close the tag like this. So, this is the syntax, if you want to take notes, you can write whatever you want in here. I have written down Metadata because that's what the head section does. You write the Metadata in here and it won't be shown in the content or to the user at all. Okay, if you want to take notes during this section, just use this syntax !-- and at the same thing at the end of this thing as well.

And you can do this like that with taps in order to make it a little bit more readable. Okay. For example, it's much better right now. So, under HTML we have the head, and don't forget to check every time you just make a change and it's working perfectly right now for us, and you can just do it like this. If you see something like this, it's exactly the same thing, but it's more readable, and you get all these nice things in GENIE as well. So okay, let's stop here. And within the next lecture, we're going to move on to body. So, I'm just writing body over here. Okay. We're going to fill this up 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