How To: Web Development for Hackers 1.1: HTML,CSS,JS

hello hackers,newbies and followers of this great community, after some research here in our community, I noticed that there is not even one tutorial that teach Web Development. We have a lot of tutorials on how to hack web site but many do not know exactly how a web site is composed, then I decided, meeting the community's needs, begin to teach people how to develop web sites.

But differently from other tutorials around internet, i will be showing you in the next tutorials, mistakes that a lot of developers make when they are building a web site, the reason why we can hack them. As hacker when you do not understand how they work ,hardly you will successfully hack them and you will have many difficulties in building our own exploits.

Why Everyone Can Follow This Series?

I know that a lot of you guys already know all the languages or technology mentioned above, but in this sere i want to take it deep, i want to make it very clear, so you might learn a new detail even if you already know them, plus i want you to discuss in case you have a different opinion.

WHAT ARE WE GOING to LEARN DURING THIS SERIES?

1-BUILD A WEBSITE USING HTML,CSS AND JAVASCRIPT
1.1html
1.2 css
1.3 javascript
2-HACK OUR WEBSITE USING XSS AND HTML CODE INJECTION
3-INTRODUCTION TO SQL AND PHP
3.1 sql
3.2 php
4-BUILD A WEBSITE WITH LOGIN,LOGOUT AND FILE UPLOAD
4.1 login
4.2 logout
4.3 file upload
5-HACK OUR WEBSITE USING SQLI, SHELL UPLOAD AND RCE(remote code execution)

LETS BEGIN THEN!

As i explained above the first thing we are going to do is to build a website using html, css and javascript, but today we are going to have just a deep understanding about html, then css for the next class and finally javascript, hopefully at the end of this week.

What Is HTML

HTML is the language of the WWW(world wide web). If you want to put any content on the Internet HTML is the first thing you want to learn.In other words html is a worldwide standard to use HTML or xHTML for web page design. This markup language is the strict minimum requirement for any web browser, using something else would consequently be incompatible with many systems.

When you try to access a URL https://www.wonderhowto.com/ your computer sends a request to the server which hosts the site. Any technology can be running on the server (Java, PHP, etc.) to process your request. The server is a physical machine which can be running any OS (Windows, Linux, etc.) and software. Eventually, the server returns a response to your browser (oftentimes the response will contain an HTML page for the browser to display).

Are All Web Pages HTML?

We could probably say "yes" but the answer is "no" i don't know exactly but we can say that almost 80% of the web pages are html(i might be wrong).

As an example go to this link and you will notice thatif you go to this page and click on see the font-code, you won't see any html code there

also if you are visitor of deep web, you know that you can find a lot of websites that don't use html, website showing just plain text, without linking to any other page, or a website made just by pics and so on. so i think you can do Websites which don't use html technically true I suppose. You can render text-only documents via the web, you could make a website out of just images, or only using Flash animations - but it wouldn't be a good idea! If you want a website that is well-formatted and accessible, you have to use some variant of html.

WHAT WAS the FIRST HTML PAGE EVER?

The first html page was a website made by Tim Berners-Lee the creator of www, and the first ever website was published on August 6, 1991 and served up a page explaining the www project, you can still find a copy of this page here.

The MARKUP of HTML...Wait Is HTML a PROGRAMMING LANGUAGE?

If we say that HTML is a programming language, then we might as well include stuffs such as word documents as they are based on ML too.

So "no" is our answer, HTML is a not a programming language. It is called "markup", the ML inside HTML stand for MARKUP LANGUAGE.

HTML MARKUP

HTML markup consists of several key components, including those called tags (and their attributes), character-based data types, character references and entity references. HTML tags most commonly come in pairs like <html> and </html1>, although some represent empty elements and so are unpaired, for example <img>. The first tag in such a pair is the start tag, and the second is the end tag.

HELLO WORLD in HTML

As a good practice we will start our tutorial with a "hello word" page, for now you don't need to set any lab, all you need is an text editor, you could use dreamwever but i advice you to learn it by using text editor cause using softwares like dreamweaver will make you a lazy code writer as it will suggest you almost every single letter you enter, but at some point its good when you have some basic understanding of it and want to explore new codes, so open any text editor and copy and paste the code below and save it as index.html and open using any browser.

When we open it we got ou first webpage with the headline and paragraph

Understanding the code
<!DOCTYPE...> This tag defines the document type and HTML version.

<html> This tag encloses the complete HTML document and mainly comprises of document header which is represented by <head>...</head> and document body which is represented by <body>...</body> tags.

<head> This tag represents the document's header which can keep other HTML tags like <title>, <link> and so on,

<title> The <title> tag is used inside the <head> tag to mention the document title.

<body> This tag represents the document's body which keeps other HTML tags like <h1>, <div>, <p> etc.

<h1> This tag represents the heading, just like the same when we want to post here on null_byte and we click on headline, in html you can do it with a simple h tags.

<p> This tag represents a paragraph.

WHAT's NEXT?

As you can see todays lesson was more about the deep understanding about how html work, in the next tutorial i will introduce some useful tags and we will talk about CSS, then use both to make the page more beautiful, hopefully i will introduce you javascript soon.

that's all for today i wish you enjoyed the topic and the tutorial, any opinion,doubts and so on just leave a comment below.

Hacked by Mr_Nakup3nda