© Copyright 2021 Agora - Bradford Simpson. All Rights Reserved.

HTML

Hyper Text Markup Language (HTML) uses different scripting options to create web pages as well as web-based apps. 

<head>

Used to contain background information on the webpage or app. This may contain referral information to other pages. 

<body>

Main portion of the web page or app. Key areas that we need to update for use with Agora services are contained in this section.

<script>

Typically contained within the body section, this makes calls to different JavaScript (JS) commands. We can also use it to refer to different JS pages containing scripts such as the SDK files. 

<head>

Our current index.html page contains three main elements within the header of the page. Let's explore these in greater detail. 

meta charset="UTF-8"
Used to set the type of character sets used in the web page or app. In this specific case, UTF-8 sets to use the universal character set that allows the browser display nearly all of the types of characters and symbols used globally. 

<title>
Sets the title of the page which, in this case is titled Voice Call. Note that everything contained between the title and /title elements makes up the title of the page. 

<link rel="stylesheet" href="./styles/style.css">
Signifies that we are using an external style page (style sheet) to control the formatting of the page. This page controls the look and feel of the web page or app that it is linked to. This is now pointed to our folder structure we created previously.  This page is the style.css which will create in our next step. More in this a bit. 



<body>

This portion makes up the page that you see online. There a number of different options that developers can use to create these pages or apps.   

The page would appear like this if opened in a browser:
____________________________________

Voice Call
Powered by Agora.io


Local video



Remote video

______________________

For our page, the following elements are present: 

<h1>
This sets the font size. Everything contained between the <h1> and </h1> will be Header 1 (or appear large in comparison to other text).  This is the Voice Call portion. 

<br>
Line break between the Voice Call text and the Powered by Agora.io subtext. 

<small style="font-size: 14pt;">
Override of the style from the style.css file to format the rest of the text to that size. 

<h4>
Similar to h1, this sets the text to be Header 4 in size. 

<div>
This allows us to create a division on the page that we can format differently as well as create an unique ID for. In this case, we have set the ID to me. 

<script src="./scripts/script.js>
This is where we are referencing our script.js page. 

<script>

Using the script element allows the developer to use different coding options outside of HTML. In our case, we will be using JavaScript (JS) to control different actions within the app. 

We will discover that we will need to update some of the placeholder text to successfully communicate with Agora for services. 

There will be a second JS page that will use with even more actions later in the process to complete the build of our web app.

© Copyright 2021 | Agora | Bradford Simpson  All Rights Reserved.