jQuerry issue with applying the format

Hi, I need help or explanation how to link CDN into your HTML code without downloading jQuerry on my pc. I run to a problem that code is not using jQuerry formating so at the end I have a simple html site.

I used in the head following final code:


<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>Mercure Hotel</title> 
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript">
<div data-role="header" data-position="fixed">
	<h1>Mercure Hotel</h1>
</div>

<div data-role="content">	
	<p>
	Situe a 30 km a l'ouest de Paris et en plein centre-ville de Montigny-le-Bretonneux
	</p>
	
	<ul data-role="listview" data-inset="true" data-divider-theme="b">
		<li><a href="#noustrouver" data-ajax="false">Nous trouver</a></li>
		<li><a href="#noschambres" data-ajax="false">Nos chambres</a></li>
		<li><a href="#nouscontacter" data-ajax="false">Nous contacter</a></li>
	</ul>	

		

</div>

<div data-role="footer" data-position="fixed">
<h4>&copy; Hotel Mercure 2016</h4>
</div>
<div data-role="header" data-position="fixed">
  	<h1>
  		<a href="#MercureHotel" data-icon="home" data-iconpos="left">Home</a> 
  		Nous trouver</h1>
</div>

<div data-role="content">
  	<p>A 50m de la gare de Saint-Quentin-en-Yvelines Navettes gratuites pour se rendre au siege dees entreprises</p>
  	<br>
  	<p>Hotel Mercure Saint-Quentin en Yvelines</p>
  	<p>9 place E.F Choiseul Avenues du centre</p>
  	<p>Montigny-le-Bretonneux</p>
  	<p>78000</p>


</div>

<div data-role="footer" data-position="fixed">
	<h4>&copy; Hotel Mercure 2016</h4>
</div>
<div data-role="header" data-position="fixed">
  	<h1>
  		<a href="#MercureHotel" data-icon="home" data-iconpos="left">Home</a>
  		Nos Chambres</h1>
</div>

<div data-role="content">
	<p>Selectioner une chambre pourvoir une photo</p>
  	<br>

	<ul data-role="listview" data-inset="true" data-divider-theme="b">
		<li><a href="#Elegante" data-ajax="false">Elegante</a></li>
		<li><a href="#StandardGold" data-ajax="false">Standard Gold</a></li>
		<li><a href="#SuiteEmpereur" data-ajax="false">Suite Empereur</a></li>
	</ul>

</div>

<div data-role="footer" data-position="fixed">
	<h4>&copy; Hotel Mercure 2016</h4>
</div>
<div data-role="header" data-position="fixed">
  <h1>
  	<a href="#MercureHotel" data-icon="home" data-iconpos="left">Home</a>	
  	Nous Contacter</h1>
</div>

<div data-role="content">
  <p>Phone: ........</p>
  <p>Email: ....@kohoi.fr</p>
</div>

<div data-role="footer" data-position="fixed">
	<h4>&copy; Hotel Mercure 2016</h4>
</div>

Simply put this either in the head of your document, or at the end of the HTML body. This gets the jQuery minified library from the official jQuery CDN.

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

Thank you! When I get home I’ll add your recommendation.

Unfortunately, this implementation didn’t solve the issue. Do you have any other suggestions that might cause it?

What is it doing, or not doing?

It doesn’t apply jquery and it stays like a long html code without the style applied.