Chapter 1 - A Big Picture: How the Web Works
Chapter 2 - The Basics of Hypertext Markup Language (HTML)
Chapter 3 - Cascading Style Sheets (CSS) Tutorial
Chapter 5 - Summary
During this course, the four chapters will cover topics such as:
Chapter 1 - A Big Picture: How the Web Works
To start off, what is the 'World Wide Web' anyway? Commonly known as the Web, The World Wide Web or WWW is an information system where documents and other web resources are identified by Uniform Resource Locators (aka URLs), which may be interlinked by hyperlinks, and are accessible over the Internet.
There are some primary components that the web is based on. This includes URLs, HTML documents, images, audio, or other files/resources that are hosted on a Web server.
For URLs, which are addresses attached to uniquely named resources and points directly to your web server address. For example https://example.com.
As for HTTP, short for Hypertext Transfer Protocol, it's the base for exchanging and sending documents to your Web browser, or the protocol that transfers information from the server side to client side. Nowadays, HTTPS, Hypertext Transfer Protocol Secure - an extension of the Hypertext Transfer Protocol (HTTP), is widely used for secure communication over a computer network, and is widely used on the Internet.
This basically is the structure of a complete URL.
A web server contains special software and a unique URL (Uniform Resource Locator) that enables it to serve up the HTML documents. All resources will have unique names so that they can be identified on the Internet.
At present, with web browsers ranging from mobile phones browsers to desktop computers, they require the Internet to serve up a specific document that exists at a given URL.
For HTTP and HTTPS (Hypertext Transfer Protocol Secure), imagine you're sitting in a restaurant.
Think of the customers that are ordering food as they browse the web, where codes waiter transferring the data from the server to the users, and the food brought covered with a lid is HTTPS, where S is secure, demonstrated by the lid that's covering the dish.
Chapter 2 - The Basics of Hypertext Markup Language (HTML)
Hi, welcome back, in this chapter, you'll learn what HTML is, what it looks like, how it is likely to progress in the near future, Also, how and what options are there for you to design HTML. Now, let's jump in.
Start with an example, here is how you see a web page. This is an online shopping web application mockup where you can use it to implement a PoC, proof of concept, or to learn Test Automation. It is a simple web application with pages that display text and images, and every page can be accessed by a unique URL, like this.
As this URL is unique throughout the internet, it has in turn enabled my web browser, in this case, Google Chrome, to navigate to this page.
All of this is HTML, contains URLs or links to other web pages, like this product page. And, on the browser, when I right click, then select 'View page source' to actually see the HTML that this page is made of. It consists of elements with attributes, which we'll talk about that more later on. As for now, having seen what HTML actually is, let's get started on defining it.
The definition of HTML is the standard markup but not a programming or scripting language for creating the web pages and applications. In other words, HTML is used to control the data presentation including texts and images. The things that you see in websites and web applications are rendered by the web browser from HTML documents, which ends in the .HTM or .HTML. HTML documents contained various elements that are specified and supported by all web browsers.
Now let's take an example of this structure in HTML. In the head element, a title tag defining the page title will appear at the top of the browser. And in the body element, it has <h1> and <p> tags, which indicates that everything in this tag belongs together. This has a heading 1 and a paragraph that contain text.
When a web browser renders this HTML document, it looks like this, including a heading and a sentence, and the title that is visible in the browser tab.
Next, the HTML element is everything from the start tag to the end tag. The first element in any HTML document is often the !DOCTYPE element. All of the basic HTML elements are here. This is definitely not a part of the HTML standard, but it does tell the browser which version of HTML it is written in. In this case, the !DOCTYPE element here is for HTML5.
Next, we have HTML elements, each of them has an open (start tag) and a close element (end tag). Moving on, there is the head element that can include a title for the document, scripts, styles, meta information, and more. Last but not least, there is the body element that contains everything to be displayed on the screen.
There are a lot more elements and tags in HTML than just the standard ones. Especially with the introduction of HTML5, elements have become much more expressive on their own AS they explain what they are used for. Therefore, the browser and search engines can have a better understanding to determine if parts of the document are actual data or meta information.
There are other elements that support the interaction between users and the browser. For instance, the audio tag. You can use this to display an audio control bar on your page and have the browser play audio.
In addition, the canvas element will provide a place in your page that you use to paint on in order to display custom shapes.
Also, the form element, which is the basis for most interactive applications and websites. You can use this element to post information from the browser to the server, for instance, text that is entered in a text field. Within the form, you can also see a button where users click on when he or she wants to send information to the server.
Let's look at an example on Youtube of this to give you some more context. Using one of Katalon's public videos, this web application has provided a player to control the video.
I can look at the HTML of this page by opening the web browser tools, it is often called devtools, which you can do by pressing F12 in most web browsers or right-click on the web then click on Inspect.
And in the devtools, when I select the video that is currently playing, it snaps to the HTML of the video. In there it has attributes that tell it what the source of the video is and also how large it is. The video element is an example of an advanced HTML element.
The takeaway of this is that HTML is a markup language with many elements, tags, and attributes that web browsers understand however, not all of them.
Now that we know what HTML is, let's take a look at how it works and how we can create it.
Then, it responds to the users as the same route. All of the HTMLs and related files like audio and images will be transferred to the user's browser. After that, this browser will render everything and display the web content for users to view.
Writing a website using HTML will not involve knowing about HTTP, nor the client computers. If you've scripted a simple HTML page on your local device, you'd be able to view it with any common browsers. However, this is only accessible to you. Allowing others to have access to it would require deploying it on a web server, where all internet users can go on and view it publicly.
When it comes to writing HTML documents and necessary elements, you can do this from scratch by using any scripting or text editor tools like Sublime Text or Notepad++, my all-time favorite.
However, these don't provide smart and advanced features like checking if your tags are correct. Using an integrated development environment, often called IDE, can give you a lot of extra features like suggesting HTML tags to use and error checking.
There are lots of IDEs out there. Some are free. Some are commercial products that you need to pay for. A few examples include VS Code, IntelliJ, Webstorm, and Eclipse IDE.
Writing from scratch, however, would require lots of manual efforts in scripting each line of code. To avoid this hassle and speed up your web application development process, using frameworks to generate HTML for back end and front end is a very common option.
Many of the websites and applications on the Internet are built this way. When using programming languages like C# or Java when writing software codes, you often are writing bits of HTML with frameworks like NodeJS or React. All of the code that you write and the ones on the framework live on the Web server.
Using any given web browsers, users can request a HTML document from a URL. The framework will then generate HTMLs for the requested document and send that to the browser to be displayed on the screen. So instead of having plain HTML documents, applying frameworks, or using premade packages and folders of standardized code will allow you to do more advanced things like communicating with the databases.
Now, let's sum up everything we've covered. First, HTML is the basic markup for the Web and a standard, interpreted by Web browsers, that defines elements and attributes that browsers understand and can display on the screen, which can range from files to more interactive elements, like the audio element.
And last, having seen what makes up a website, including the header, body to the footer, with corresponding tags like <title>, <h1<, or <p> inside, we've also looked at how to work with HTML with many ways like text editors and integrated development environments to write from scratch, or have more advanced features with frameworks like NodeJS.
Up next, we'll learn about what CSS is and how it can style HTML.
Chapter 3 - Cascading Style Sheets (CSS) Tutorial
Hi, welcome back, in this chapter we will talk about Cascading Style Sheets or just call it 'CSS.'
In the previous chapter, we know that HTMLs also allow color and font modifications on a website to help improve the readability of the displayed text on the web. Specifically, we will use HTML with CSS, the language made for changing colors or fonts - in other words, to style presentation of the web.
I will walk you through what CSS is, working with CSS, the last but not least, CSS libraries and preprocessors.
First of all, we need to understand what CSS is. CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts that is adaptable to different types of devices, such as large screens, small screens, or printers. Or just simple, CSS styles the HTML.
CSS is independent of HTML and can be used with any XML-based markup language.
Let's take a look at how it works. This is what a typical HTML looks like. This HTML here results in this web page with an unordered list with text. Now, how can we go about styling this? What about changing their colors and their typographical emphasis, like italicizing them?
I could do that with a HTML that looks like this. Here I've added a style to the div that contains the list and the text and told it to use the color blue. Next, on the list item, add a style to display it as italic.
Here, I'm writing HTML and CSS using Sublime Text (as mentioned in the previous video, it's a Text Editor) on my local machine. Now let's copy the code to an online HTML tool, I'm using Tryit Editor of W3C. With the CSS inline added along with HTML elements, you could also reuse this to write CSS in any other place in an HTML file.
A second method that also works is as follows. In the head element of this HTML, a style has been set, in which signals that every div should be displayed in blue for the rest of the HTML document. Additionally, a CSS class will be declared to be used on items that require italicization.
A point to note here is that these styles, unlike inline styles, could be reused regardless of the place in the HTML document. Similar to the HTML shown before, this webpage would also be a product of this HTML. To create an email as shown, this would require programming using HTML, and inline CSS.
Another different approach to manage CSS is using external style sheets. With the same webpage, now I'm moving this style to an external file. Let's call it 'my style [dot] CSS.'
Then link the my_style.css file with the given styles of blue and italicized texts to the current HTML file. So, when this HTML is loaded on the browser, the my_style CSS file would simultaneously be loaded using the styles on the HTML as well, thus turning the color in the div blue.
On top of that, provided with a separate document that only contains the given styles, we can in turn apply that same style to a different web page by just linking it to other HTML documents to ensure optimal maintainability, readability, and reusability since the styles no longer are put in the HTML document anymore.
Up until now, you should know that CSS is simply dealing with attributes and properties like the text's color or style. However, it also acts as an indicator to know which elements should be applied into the property.
As we saw, CSS consists of properties and attributes like the color being blue or the text being italic, and, as you might have noticed already, CSS can indicate to what elements the property should be applied. You do this with selectors. This part is most important for you as you want to work with UI automated testing. You need to interact with the web elements using scripts such as Selenium Driver.
Let's see some examples of CSS syntax selectors. Like this one that selects all of the div elements in an HTML page, or this selector that selects all elements in an HTML page that have an ID of paragraph_name. And this one that selects all of the elements that have a class attribute set to class_name.
Nesting could also be done. In this case, the selector has selected all paragraph elements with a div element as their parent, and this one with multiple elements selected on an HTML page. This includes the heading1, heading2, and paragraph elements.
These are just to name a few. There is a wide range of selectors within CSS for you to choose from.
Take a look at this HTML, where both have the class specific assigned to them and one of them has an ID of more_important. Now this CSS will be applied to the HTML and we'll end up with this web page. 'What just happened' you might ask.
To help you easily picture what had just occurred, let's start with the first thing that happened. For an HTML file like this, this would be the displayed result on your browser when CSS has been applied.
You can see the text is white on the gray background because there are CSS settings assigned to ALL <p> elements. It means that all <p> tags in this web page are applied to the same settings.
If you want to have more specific settings for some paragraphs (using <p> elements), you should use a 'specific class name' to define specific CSS settings for them.
For instance, in this example I set background BLUE for two paragraphs with the class name 'specific.' Despite assigning the background color to be gray, none of the paragraphs has been applied into since there's a higher priority for the class attribute on the paragraph element.
The same idea with this, but you can assign an ID to an element to make it appear with differ color. The ID attribute has an even higher priority and overrides the background color to GREEN and the black thin border as well.
And now, the black border around the second paragraph has disappeared because it has been overwritten by this property, important. As the specific class applies to both paragraphs, none of them have borders around it. The text color is white as there isn't any higher priority CSS to overwrite these settings.
With that being said, the order of CSS priorities would be from tags, to classes, to the ID then the important attribute.
In addition, the call padding, the white text color and space in between the paragraphs, comes from the paragraph selector due to the fact that none of the higher priority selectors have overwritten these properties. To maintain and read your CSS easier, creating large and complex hierarchies within CSS would make this possible.
We've seen some of the most common capabilities of CSS already, like changing color, applying borders, and so forth. There are also more advanced features that can be found in the newer CSS properties. One of those is the media query property.
In this example, I will tell the browser that whenever we are displaying HTML on the screen, with a width of 800 pixels, I will want the body element to have the background color gray. This will give us something like this.
The default background color would be displayed if the width of the page is lower than 800 pixels, but it will change and respond to adjustments made. We call this a responsive web page as it allows you to see different UI elements on different screen resolutions and browsers' sizes.
As a whole, CSS just specifies the standard of what they should do when they interpret a certain property. However, similar to HTML, not every CSS property is supported by every browser. On W3C, you can visit CSS Reference Browser Support site to check if a particular property is supported.
As I mentioned before in the Chapter 'How the web works,' understanding how HTML and CSS work is important. Just a reminder, the web has HTML documents that can optionally be styled with CSS documents where they are identified by unique URLs. As you can link documents to any HTML document, its location doesn't matter, whether on the web server or on different web servers.
Afterwards, they are then transported through the HTTP protocol to the clients' web browsers. When styling the HTML, the browser takes the HTML file, interprets, and applies these styles as said in the CSS document. That is the way CSS works cooperatively with HTML.
Similar to writing HTML, creating CSS could be done from scratch using any text editor like Sublime Text or Notepad++, or even by using an integrated development environment, or IDE, like VS Code, Eclipse, or WebStorm.
And once I start typing, you can see its prompts for autocompletion as shown. For instance, when looking for font-style, when I type font, it shows me all of the possible properties that have the word 'font' in them, then all the font-styles for this property. This is really helpful to speed up my work.
Another way of using CSS is to use CSS from a library. These are ready to use CSS files with styles that have been scripted by other people. They already contain a lot of styles that you can use in your HTML document.
A very popular option is Bootstrap, but there are others like Tailwind CSS. Each of these provides different styles and different capabilities, all of which are designed to make life easier for you as you don't have to create the styles. You just use them. But, you need to learn how to use them and what they provide.
Let's look at how you could use Bootstrap to code a simple web page. To get Bootstrap linked to your HTML, you could point to a URL like this. This URL points to a Bootstrap CSS file, which is hosted on a CDN server, so somebody else's server. When you use a URL like this, you don't have to worry about hosting the CSS file on your own web server. But you do need to beware that this server that you don't control can sometimes be unavailable.
Anyways, once you have the CSS file, you can start using the Bootstrap styles. One simple example is to use rows and columns to style your information on the website. This would look like this where you'd have one div with a row class attached to it, which contains multiple div that have the col class.
I pasted a piece of code that I wrote in the Sublime Text editor. There are many options for col class to support multiple devices from mobile phone, tablets, to desktop devices. Bootstrap will collapse columns when the screen size is under, and your column will be horizontal when the screen size is above breakpoints.
For instance, the option .col-sm- is for tablets - small devices, the breakpoint is 768px. Similarly, .col-md- is for desktop - medium devices, and its breakpoint is 992px. This results in a web page that looks like this, two columns and a row with some dummy list items.
As I just mentioned, these columns are responsive, which means that if you are on a smaller screen, the columns would move under each other automatically. Using something like Bootstrap can save you a lot of time, but you do have to learn how to use it.
Using CSS preprocessors, an advanced version of CSS, is also an option. It essentially is a framework or language that is used to create CSS styles with and can help in maintaining CSS documents more efficiently.
Some examples of a CSS preprocessor would be LESS, Myth, Stylus, and Sass. Your style code would subsequently vary to your preferred type of CSS preprocessors, like having variables with LESS, which stands for Leaner Style Sheets, a language extension that's very similar to CSS, but just with a few additional features.
In this example, I use a variable named color that defines the color instead of having to type the actual color value in the properties of the style. You can use this for all places in your web application. Once you change the value of this variable, it will affect all elements that use this variable.
In case you want to have a special color for other elements, just use another variable. Here, I've used @specialColor for heading 3 texts.
When you are done writing your styling code in your preprocessor, you'd have to compile it to generate CSS files. This can be done with a tool that comes with the preprocessor.
Once compiled, you'll end up with the color value written out for each property, a regular CSS in other words. Similar to using CSS libraries, even though this approach could be efficient, it would require some time to get used to. If you want to update the color, just update the variable value.
Now you know what CSS is, and how you can create it, let's recap the key things that you should remember.
CSS, or Cascading Style Sheets, is the styling mechanism for the web and a standard that describes selectors to select HTML elements, properties and value attributes to assign styles to HTML elements.
CSS is useful to separate style from content, where style is described in the CSS documents and content in HTML documents, with many other capabilities included.
We've seen that there are different ways to use CSS. One of them is to write it from scratch, just as you can write HTML from scratch using text editors or integrated development environments such as VS Code.
Other ways of using CSS is by using a CSS library like Bootstrap, which provides premade styles, or to use CSS preprocessors like Less, which provides more dynamic features to write CSS in and simply gather into regular CSS files when you are done.
From this, I can now perform data binding, or synchronizing the text of this paragraph element to the data in the name model of Angular, which comes from the textbox. This subsequently results in this behavior. When I enter text 'Katalon' in the textbox, it immediately shows up in the paragraph as I type it out. Having loaded in the browser, Angular has actually done this for me but I wouldn't be able to see it.
In this case, I attached this event to the XMLHttp object. This fires when the state of the object changes, which usually happens when it makes a call to an external server. When it does that, and when all goes well, it changes the text of the HTML object demo, which is a div here. It gets the text to put in the div from a document that it gets here. In this case, the document is located on the same server as the HTML document. But from here, I can call any URL to get info or to post something to.
Chapter 5 - Summary
And thank you for learning this course. Your next course should be about using Selenium or Katalon to develop automated tests. See you in another course.