Skip main navigation

New offer! Get 30% off your first 2 months of Unlimited Monthly. Start your subscription for just £35.99 £24.99. New subscribers only T&Cs apply

Find out more

How the World Wide Web Works: HTML and JAVA

In this video you will learn about Hypertext Markup Language (HTML) and how HTML is used to display documents on web browsers.
7
HTML stands for Hypertext Markup Language, and it is used to describe documents to be displayed in a web browser. Let’s have a look how on a sample HTML page.
20.4
What we have here is a simple text file with some HTML. Enclosed within angle brackets, we have tag names. Each tag name has a special meaning, and the browser knows what to do with them to render a page. For example, H1, H2, and H3 are headings, and they should appear on the screen with different font sizes. Let’s have a look.
45.7
Here they are– our headings, H1, H2, and H3 from top to bottom. Nowadays, web pages are far more complex than simple text, and the HTML has several other elements. Let’s add some to our page so that we can welcome visitors.
96.3
We have just added an input textfield and a button with a “say hi” label. Let’s see how they look like in the browser.
106.4
We have both elements on the screen– an input field where we can type our name and the button. The button does nothing by default, but we will fix it later. First, let’s see how to add some colour to our page.
123.9
CSS stands for Cascading Style Sheets. It is a stylesheet language used for describing the presentation of a document written in a markup language like HTML. Let’s see how to use it. First, we will need to create a new stylesheet file.
143
We will save it as screen.css. Then we will need to link it to our HTML page.
166
To paint the word “Red” in red, we will enclose it within a span tag with class Red.
176.7
Then we will need to go back to our stylesheets and write the class definition.
184
In this case, we want elements with class Red to have the red colour. Let’s now see how it looks in the browser.
198.2
Now, just the button’s behaviour is missing. For that, we will need some JavaScript. JavaScript is a programming language that enables interactive web pages. The vast majority of websites use it for client-side page behaviour, and all major web browsers have a dedicated JavaScript engine to execute it.
220.1
Again, we will create a new file. This time we’ll call it main.js.
261.1
This simple JavaScript function gets the value typed in the input field and then shows a model saying, “Hello”, to our guests.
271.6
Using the Script tag, we’ll load the JavaScript file into our HTML page.
280.9
Then using the OnClick attribute in the Button tag, we can bind the “say hi” function we have just written.
289.9
Let’s now play with our button.
300.4
We’re done with the World Wide Web Fundamentals. You now have the basic knowledge of all web application building blocks. Remember that there’s a lot more about all these topics. In the next session, we will jump into the OWASP Top 10 with our first risk, Injection Flaws. See you there.

In this video, you will learn about Hypertext Markup Language (HTML) and how HTML is used to display documents on web browsers.

HTML is the standard markup language for documents that are going to be displayed on a web browser. In this video, you will learn more about HTML and about how Cascading Style Sheets (CSS) and JavaScript work with HTML.

This article is from the free online

Advanced Cyber Security Training: OWASP Top 10 and Web Application Fundamentals

Created by
FutureLearn - Learning For Life

Reach your personal and professional goals

Unlock access to hundreds of expert online courses and degrees from top universities and educators to gain accredited qualifications and professional CV-building certificates.

Join over 18 million learners to launch, switch or build upon your career, all at your own pace, across a wide range of topic areas.

Start Learning now