I am new to JSF and am having issues getting JSF elements to display on the page.
Screenshot of my HTML page, the JSP information should be displayed on the left column.
My .xhtml code
<!DOCTYPE html>
<!--Learn media queries for responsive design-->
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<head>
<title>Homepage</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css"/>
<link href="https://fonts.googleapis.com/css?family=ZCOOL+KuaiLe|Cormorant+Garamond|Eczar|Gentium+Basic|Libre+Baskerville|Libre+Franklin|Proza+Libre|Rubik|Taviraj|Trirong|Work+Sans" rel="stylesheet"/>
</head>
<body>
<div class="container-fluid h10">
<div class="row h100 bg-lightgreen">
<h1>
Hello
</h1>
</div>
</div>
<div class="container-fluid h100">
<div class="row h100">
<div class="col-md-4 h100 bg-lightblue">
<h1>Teachers</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in libero vehicula, malesuada enim at, imperdiet diam. Nullam mattis non enim eu malesuada. Morbi interdum erat neque, ut aliquet est consequat ut. Proin augue enim, vehicula at erat non, maximus tempus nisi. Aliquam at auctor nisl. Praesent aliquet id nulla vel sollicitudin. Aenean eros ante, gravida id fringilla at, volutpat ut augue. Mauris nec feugiat nulla. Nullam mattis commodo justo, eget ullamcorper lorem imperdiet a. Nullam vitae felis leo. Etiam ac tincidunt neque. Donec eu scelerisque dui. Etiam laoreet metus tellus, quis porta ex tempus non. Nulla lacinia ipsum nibh, at tempor nulla eleifend sit amet. Quisque in diam in ex gravida convallis eu in nisl.</p>
<h:form>
<h:inputText id="name" value="#{theUserName}" />
<h:commandButton value="Submit" action="myresponse" />
</h:form>
</div>
<div class="col-md-4 bg-bp-grad centertext">
<div class="row">
<div class="col-md-12">
<h1><br/></h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="dot centertext">
<img src="images/duck2.png" style="height:50%;width:50%;margin:25%;" alt="Picture of a cute duck"/>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<br/><br/>
</div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Username</label>
<input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter username"/>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"/>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="rememberMe" style="align:left;"/>
<label class="form-check-label" for="exampleCheck1">Remember me</label>
</div>
<div>
<button type="Login" class="btn btn-primary">Login</button>
</div>
</form>
</div>
<div class="col-md-1"></div>
</div>
<div class="row">
<div class="col-md-12">
<h1><br/></h1>
</div>
</div>
</div>
<div class="col-md-4 bg-lightpink h100">
<h1 class="textright">Schools</h1>
<p class="textright">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in libero vehicula, malesuada enim at, imperdiet diam. Nullam mattis non enim eu malesuada. Morbi interdum erat neque, ut aliquet est consequat ut. Proin augue enim, vehicula at erat non, maximus tempus nisi. Aliquam at auctor nisl. Praesent aliquet id nulla vel sollicitudin. Aenean eros ante, gravida id fringilla at, volutpat ut augue. Mauris nec feugiat nulla. Nullam mattis commodo justo, eget ullamcorper lorem imperdiet a. Nullam vitae felis leo. Etiam ac tincidunt neque. Donec eu scelerisque dui. Etiam laoreet metus tellus, quis porta ex tempus non. Nulla lacinia ipsum nibh, at tempor nulla eleifend sit amet. Quisque in diam in ex gravida convallis eu in nisl.</p>
</div>
</div>
</div>
</body>
</html>
My file structure:
opt/
tomcat/
apache-tomcat-9.0.16/
webapps/
ROOT/
vysusWeb/
WebContent/
index.xhtml //this is the page I'm wanting to load
style.css //stylesheet, seems to be no problems
WEB-INF/
faces-config.xml
web.xml
lib/
javax-faces-2.2.8.jar
The path I am using the attempt to access the page is: http://localhost:8080/vysusWeb/WebContent/index.xhtml
