Let's explore some of the basic features of the Qt WebEngine:

1. Open mainwindow.ui and add a vertical layout under the progress bar. Add a Plain Text Edit widget (under the Input Widgets category) and a push button to the vertical layout. Change the display of the push button to Load HTML and set the plaintext property of the Plain Text Edit widget to the following:

<Img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"></img>
<h1>Hello World!</h1>
<h3>This is our custom HTML page.</h3>
<script>alert("Hello!");</script>

This is how it should look after you have added the code on top of the Plain Text Edit:

2. Go to File | New File or Project. A window will pop up and ask you to choose a file template. Select Qt Resource File under the Qt category and click on the Choose… button. Type in your desired filename and click Next, followed by Finish:

3. Open the resource file we just created by right-clicking on it in the Projects pane and selecting the Open in Editor option. Once the file is opened by the editor, click on the Add button, followed by Add Prefix. Set the prefix as / and click Add, followed by Add Files. The file browser window will appear and we will select the tux.png image file and click Open. The image file is now added to our project, where it will be embedded into the executable file (.exe) once it's compiled:

4. Open mainwindow.h and add the following headers to it:

#include <QMainWindow>
#include <QtWebEngineWidgets/QtWebEngineWidgets>
#include <QDebug>
#include <QFile>

5. Make sure the following functions and pointers have been declared in mainwindow.h:

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();
    void loadUrl();
private slots:
    void on_goButton_clicked();
    void on_address_returnPressed();
    void on_backButton_clicked();
    void on_forwardButton_clicked();
    void startLoading();
    void loading(int progress);
    void loaded(bool ok);
    void on_loadHtml_clicked();
private:
    Ui::MainWindow *ui;
    QWebEngineView* webview;

6. Open mainwindow.cpp and add the following code to the class constructor:

MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow) {
    ui->setupUi(this);
    webview = new QWebEngineView;
    ui->horizontalLayout_2->addWidget(webview);
    //webview->page()->settings()->setAttribute(QWebEngineSettings::JavascriptEnabled, false);
    //webview->page()->settings()->setAttribute(QWebEngineSettings::AutoLoadImages, false);
    //QString fontFamily = webview->page()->settings()->fontFamily(QWebEngineSettings::SerifFont);
    QString fontFamily = webview->page()->settings()->fontFamily(QWebEngineSettings::SansSerifFont);
    int fontSize = webview->page()->settings()->fontSize(QWebEngineSettings::MinimumFontSize);
    QFont myFont = QFont(fontFamily, fontSize);
    webview->page()->settings()->setFontFamily(QWebEngineSettings::StandardFont, myFont.family());

7. Load the image file and place it on the webview:

    QFile file("://tux.png");
    if (file.open(QFile::ReadOnly)) {
        QByteArray data = file.readAll();
        webview->page()->setContent(data, "image/png");
    } else {
        qDebug() << "File cannot be opened.";
    }
    connect(webview, QWebEngineView::loadStarted, this, MainWindow::startLoading()));
    connect(webview, QWebEngineView::loadProgress, this, MainWindow::loading(int)));
    connect(webview, QWebEngineView::loadFinished, this, MainWindow::loaded(bool)));
}

8. The MainWindow::loadUrl() function stays the same as in the previous example in the Introducing Qt WebEngine section, which sets the URL scheme to HTTP before loading the page:

void MainWindow::loadUrl() {
    QUrl url = QUrl(ui->address->text());
    url.setScheme("http");
    webview->page()->load(url);
}

9. The same goes for the following functions, which also remain the same as the previous example in the Introducing Qt WebEngine section:

void MainWindow::on_goButton_clicked() {
    loadUrl();
}
void MainWindow::on_address_returnPressed() {
    loadUrl();
}
void MainWindow::on_backButton_clicked() {
    webview->back();
}
void MainWindow::on_forwardButton_clicked() {
    webview->forward();
}

10. Add both the MainWindow::startLoading() and MainWindow::loaded() slot functions, which will be called by the loadStarted() and loadFinished() signals. These two functions basically show the progress bar when a page is starting to load, and hide the progress bar when the page has finished loading:

void MainWindow::startLoading() {
    ui->progressBar->show();
}
void MainWindow::loading(int progress) {
    ui->progressBar->setValue(progress);
}
void MainWindow::loaded(bool ok) {
    ui->progressBar->hide();
}

11. Call webview->loadHtml() to convert the plain text to HTML content when the Load HTML button is clicked:

void MainWindow::on_loadHtml_clicked() {
    webview->setHtml(ui->source->toPlainText());
}

12. Build and run the program and you should see something like the following: