Footers and Headers

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 cover a little bit more elements and attributes that will be all for the HTML and then we will move on to web pen testing section. Let me come over here and have a break and I'm going to have another div over here. And I believe we are inside of the form still, and I'm going to show you another type of getting input from the user which is, let me just write the label first. I'm going to call this Text Area, and the Text Area is the thing that we are looking for. It's kind of an input but it's a little bit bigger and it can be adjusted in different browsers, in some specific browsers. So it goes like this; textarea, textarea. It's not a self-closing tag, you have to close it manually. Inside of the Text Area, you can change the attributes, still you can  just  write, "textarea" for example, for a name. And you can write whatever you want in here. So, I'm just going to write, 'Text text text.' You can just keep it long, because you will see what the text area is. This is the text area. As you can see it's multi-lined and we can adjust it in a way that we want. So, if you're getting a long text from the user for example like this, this will be much more suitable for you rather than the input, okay? If you see something like that right now when you do pen testing, you can say that this is a text area. Great. So, let me go out of the form because we are done with the forms now. Let me show you something with the images because these are pretty common as well. When was the last time you see a webpage without that image, right?. So, when we create images we can just write img. So, it stands for image, and we can just actually show the URL or the source of the bitmap or the picture that we are going to be displaying. So, first of all, I'm going to give a width, okay? So, let me say 200 pixels and of course, we can give a height as well. So, let's say 300 pixels. I'm just making this up. You can just do some random experiments over here, like 400 pixels, 300 pixels, 200 pixels. We're just going to test this and if we don't like it we can change it. And I'm going to specify a source which is written like this, 'src'. And this will be the URL or the location of the file that I will be displaying in here. So, let me find any image, okay?

I'm going to go for a Metallica image, and let me close this down and let me go into the images, and find one of the images over here, like a cool looking picture. And let me get the image location and see if we got it right. here you go. If we browse there, this is the thing that we are looking for. Just find any picture URL that will work fine, and come over here and paste it over there. So, here we go. Now, we managed to embed an image in our own website. So, let me open my own website and do a refresh, and here you go. So, as you can see, it's not very good looking right now, the width is too narrow for that. Height is, maybe it's a little bit different. Maybe we can just delete the height and just try like this with only the width and see how it looks like. As you can see it looks much better, okay? It adjusted itself according to the width. So, let me do some breaks over here and see how it looks like. Here you go. Now we see the image. So, that's how you embed the images and we're going to do some stuff with the images later on during the course as well. So, what can we do next?

We can come over here and do a little bit more break and we can do something with buttons, okay? So, buttons are widgets like this or views like this. So, if you write 'click me' over here, it will create a button like that. So this is a button, okay? So, if you want something to happen in here, you can just write it. Of course, we don't have any kind of functionalities right now, like a PHP file or some real website going on. So, I'm not going to do that. But if you see something like that it's a button. Another concept that you may want to be familiar with is the headers and footers. If we inspect the element in here, right now I don't have any footers over here. We only have body and head in this google.com, right? It's very simple website actually. If we are inspecting a more complicated side, we will have definitely see some footers. I thought this was a footer but it's apparently part of the body. So, when we see something like copyrights or site map or something like that, it's definitely most of the time in footer. So, if you want to have a footer in here we can just create it like this, and let me write something here with a paragraph and say copyright, something like that, okay? if you see something like that, it's generally located in the footer. So, let me refresh this. here you go. It looks like a normal paragraph, but it's actually inside of the footer tag in here. So, it's no different than a regular paragraph. But if you see a footer when you try to inspect a webpage then know what it is. So, it's for showing some information related to the website at the bottom of your page. And if you want to show something at the top of your page, like a header, there is a way to do that as well, okay? So, we have the head and we have the body in here, we don't have any kind of footer or header, as I said before, but if you see something like this, don't be alarmed, it's like a footer but it's a header. Maybe you may want to display some sort of a big image inside of every webpage that you're going to have. So, then you may want to create a header for that. So, these are headings. For example, let me just take the h1 and h2 inside of header tag, okay? It won't change anything, it won't change anything in the user interfaces, if we go back, if we refresh this, nothing will be changed. But if we inspect the element we will see that they are resided in a header tag right now. So, if you see a header and if you see a footer just know what are they. They can be used in purpose like this but don't be alarmed. It's no different than the rest of the HTML. So, that's pretty much it for us to continue learning about Web Pen testing or start learning about Web Pen testing, okay? So, just try to inspect the Webpages like that, and you're going to do a lot of practice for this. Believe me, we're about to. So, I'm going to stop here and we will continue in the next section where we start learning about Pentesting.

 

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