Skip main navigation

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

Our purpose is to transform access to education.

We offer a diverse selection of courses from leading universities and cultural institutions from around the world. These are delivered one step at a time, and are accessible on mobile, tablet and desktop, so you can fit learning around your life.

We believe learning should be an enjoyable, social experience, so our courses offer the opportunity to discuss what you’re learning with others as you go, helping you make fresh discoveries and form new ideas.
You can unlock new opportunities with unlimited access to hundreds of online short courses for a year by subscribing to our Unlimited package. Build your knowledge with top universities and organisations.

Learn more about how FutureLearn is transforming access to education