HTML (HyperText Markup Language) is a language used to visually structure websites. Unlike programming languages, HTML instructs the browser on the structure and content of the webpage, but it does not execute code itself. HTML is one of the fundamental pillars of web development (and testing) and is therefore very important to understand in this course.
HTML thus tells the browser what and how it should display the desired content visually, and this is done by using HTML elements. You can think of an HTML element as a lego piece, by combining them you can build anything.
For example, we can tell the browser that we want a large text, below which there is an image, and below this there is a link to Hakatemian's pages.
<html><!-- HTML sivun alkamista indikoiva elementti--><h1><!-- Isoa tekstiä indikoiva elementti--> Big text </h1><!-- h1 elementin lopetus --><!-- img elementti kertoo selaimelle, että tähän kohtaan halutaan kuva, kun taas src
attribuutti kertoo selaimelle, mistä kuva löytyy. width attribuutilla määritetään kuvan
leveys ja height attribuutilla korkeus --><img width=200 height=200 src="https://cdn.pixabay.com/photo/2013/07/13/11/43/tux-158547_960_720.png"></img><!-- a elementti kertoo selaimelle, että kyseessä on linkki ja href attribuutti kertoo,
minne selaimen pitää siirtyä linkkiä painettaessa --> <a href="https://www.hakatemia.fi/">Here's to Hakatemia!</a></html>You can copy the HTML code presented above to a file named testi.html and open it in your browser. You will see something similar.
You can also view and edit the HTML code of other pages in your own browser. For example, in Google Chrome, you can navigate to the desired page, right-click the mouse, and select Inspect.
CSS
CSS (Cascading Style Sheets) is a style language designed to support content defined with HTML. Both HTML and CSS are used to determine the visual appearance of a web page, where HTML defines the structure and content of the web page, while CSS tells the browser how to display that content.
You can, for example, use CSS to specify a background image for a web page.
<html><head><!-- style elementti kertoo selaimelle, että tämän sisältö on CSS tyylikieltä --><style>
body { background-image: url("https://cdn.pixabay.com/photo/2013/07/13/11/43/tux-158547_960_720.png"); }
</style></head><body><h1>Big text</h1> <a href="https://www.hakatemia.fi/">Hackathemia!</a></body></html>
In this module, only a basic understanding of what HTML is and how it works is provided. You can find more material on HTML topics, for example, here. Below is also an HTML playground where you can freely explore the secrets of the HTML language.
Ready to become an ethical hacker?
Start today.
As a member of Hakatemia you get unlimited access to Hakatemia modules, exercises and tools, and you get access to the Hakatemia Discord channel where you can ask for help from both instructors and other Hakatemia members.