"SyntaxError non capturée: jeton inattendu <" en première ligne
Je sais que cette question a été posée plusieurs fois mais je ne trouve pas de solution à mon problème.
Sur ma machine locale, tout va bien, mais lorsque je télécharge des fichiers sur le serveur (000webhost), j'ai six erreurs, et la description de ces erreurs est
SyntaxError non capturée: jeton inattendu <
Merci d'avance.
C'est mon HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="Welcome to my personal web site (web presentation). My name is Aleksandar Mitrović. I am frontend developer from Belgrade, Serbia.
I am interested in web development. My occupation is Professional Electrical and Computer Engineer.">
<meta name="keywords" content="Web presentation, Personal web site, Licni sajt, Frontend developer, Web sajt, Web developmenta, Personal web presentation">
<meta name="author" content="Aleksandar Mitrović">
<title>Personal web presentation | Aleksandar Mitrović</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!--Favicons-->
<link rel="Apple-touch-icon" sizes="57x57" href="/Apple-touch-icon-57x57.png">
<link rel="Apple-touch-icon" sizes="60x60" href="/Apple-touch-icon-60x60.png">
<link rel="Apple-touch-icon" sizes="72x72" href="/Apple-touch-icon-72x72.png">
<link rel="Apple-touch-icon" sizes="76x76" href="/Apple-touch-icon-76x76.png">
<link rel="Apple-touch-icon" sizes="114x114" href="/Apple-touch-icon-114x114.png">
<link rel="Apple-touch-icon" sizes="120x120" href="/Apple-touch-icon-120x120.png">
<link rel="Apple-touch-icon" sizes="144x144" href="/Apple-touch-icon-144x144.png">
<link rel="Apple-touch-icon" sizes="152x152" href="/Apple-touch-icon-152x152.png">
<link rel="Apple-touch-icon" sizes="180x180" href="/Apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/Android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">
<!--End of favicons-->
<!--Nav scroll-->
<script src="js/navScroll.js"></script>
<!--End nav scroll-->
<!--Section scroll-->
<script src="js/sectionScroll.js"></script>
<!--End section scroll-->
<!--Toggle button on click change FA icon scroll-->
<script src="js/ToggleButtonChanges.js"></script>
<!--End of Toggle button on click change FA icon scroll-->
<!--Contact map-->
<script src="js/contactMap.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<!--End contact map-->
<!--Aminations-->
<link rel="stylesheet" href="animation/animate.css">
<!--End of animations-->
<!--Font awesome-->
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<!--End of font awesome-->
<!--Style.css-->
<link rel="stylesheet" href="stylesheets/screen.css">
<!--End of style.css-->
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-bars" aria-hidden="true"></i>
</button>
<a class="navbar-brand" href="#hero"><img src="img/logo.png" width="110" height="23"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#hero">Home <span class="sr-only">(current)</span></a></li>
<li><a href="#aboutMe">About us</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#experience">Skills & Experience</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="hero" id="hero">
<div class="container-fluid">
<video autoplay loop class="hero-video" poster="img/hero.jpg">
<source src="video/Hello-World.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
<source src="video/Hello-World.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
<div class="row">
<div class="hero-content animated fadeIn">
<h1 class="hero-content-title">Welcome to my web presentation</h1>
<h2 class="hero-content-subTitle">My name is Aleksandar Mitrović, I'm a <span>frontend developer</span> living in Belgrade, Serbia.</h2>
</div>
</div>
<div class="row">
<a href="#aboutMe" class="hero-scroll animated fadeIn">
<i class="fa fa-angle-double-down fa-2x bounce" aria-hidden="true"></i>
Scroll down
</a>
</div>
</div>
</div>
<section id="aboutMe" class="aboutMe">
<div class="container">
<div class="row">
<div class="sectionTitle">
About me
</div>
</div>
<div class="row">
<div class="aboutMe-image">
<img src="http://s7.postimg.org/54pch8kyz/image.jpg">
</div>
</div>
<div class="row">
<div class="aboutMe-content">
<p>I am a student of final year school of electrical engineering and computer science of applied studies in Belgrade, majoring in new computer technology.</p>
<p>Occupation: Professional Electrical and Computer Engineer.</p>
<p>I finished middle electrical school in Belgrade.</p>
<p>I am a person with adventurous spirit and trips for me represent a kind of hobby.</p>
<p>Besides programming I have a great interest for history and social sciences.</p>
<p>In my free time I prefer drawing.</p>
<p>Knowledge of English and German language.</p>
<p>Active driver B category.</p>
</div>
</div>
</div>
</section>
<section class="portfolio" id="portfolio">
<div class="container-fluid">
<div class="row">
<div class="sectionTitle sectionTitle-color--white">
Portfolio
</div>
</div>
<div class="row">
<a href="http://sf1group.staging.creitiveapps.com/sr" target="_blank">
<div class="col-sm-4 portfolio-article">
<img src="img/sf1group.png">
<div class="portfolio-article-title">
SF1 Group
</div>
</div>
</a>
<a href="http://www.gradjevinar.rs/sr" target="_blank">
<div class="col-sm-4 portfolio-article">
<img src="img/gradjevinar.png">
<div class="portfolio-article-title">
Gradjevinar
</div>
</div>
</a>
<a href="http://globtour.staging.creitiveapps.com/hr" target="_blank">
<div class="col-sm-4 portfolio-article">
<img src="img/globtour.png">
<div class="portfolio-article-title">
Globtour
</div>
</div>
</a>
<a href="http://jadranekspres.staging.creitiveapps.com/en" target="_blank">
<div class="col-sm-4 portfolio-article">
<img src="img/jadranekspres.png">
<div class="portfolio-article-title">
Jadranekspres
</div>
</div>
</a>
<a href="#portfolio">
<div class="col-sm-4 portfolio-article">
<img src="http://www.snopes.com/wordpress/wp-content/uploads/2016/04/the-farm-below-the-mountain.jpg">
<div class="portfolio-article-title">
</div>
</div>
</a>
<a href="#portfolio">
<div class="col-sm-4 portfolio-article">
<img src="http://images.8tracks.com/cover/i/000/933/114/44813.original-6904.jpg?rect=128,0,768,768&q=98&fm=jpg&fit=max">
<div class="portfolio-article-title">
</div>
</div>
</a>
</div>
</div>
</section>
<section class="experience" id="experience">
<div class="sectionTitle">
Skills & Experience
</div>
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-2 experience-skill">
<div id="skill1" class="experience-skill-circle"></div>
<h2 class="experience-skill-title">Html5 / Bootstrap</h2>
</div>
<div class="col-xs-6 col-sm-4 col-md-2 experience-skill">
<div id="skill2" class="experience-skill-circle"></div>
<h2 class="experience-skill-title">Css3 / Sass</h2>
</div>
<div class="col-xs-6 col-sm-4 col-md-2 experience-skill">
<div id="skill3" class="experience-skill-circle"></div>
<h2 class="experience-skill-title">Javascript / Jquery</h2>
</div>
<div class="col-xs-6 col-sm-4 col-md-2 experience-skill">
<div id="skill4" class="experience-skill-circle"></div>
<h2 class="experience-skill-title">Php / Mysql</h2>
</div>
<div class="col-xs-6 col-sm-4 col-md-2 experience-skill">
<div id="skill5" class="experience-skill-circle"></div>
<h2 class="experience-skill-title">Wordpress</h2>
</div>
<div class="col-xs-6 col-sm-4 col-md-2 experience-skill">
<div id="skill6" class="experience-skill-circle"></div>
<h2 class="experience-skill-title">Photoshop</h2>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-3 experience-content">
<h1>Internship for Frontend developer ( 4 months )</h1>
<p>I had internship for frontend developer in digital agency "Creitive" in Belgrade.</p>
<p>On internship i was working with:</p>
<ul>
<li>-HTML5 ( BOOTSTRAP ) / CSS3 ( SASS, COMPASS, BEM Methodology )</li>
<br>
<li>-JAVASCRIPT (JQUERY)</li>
<br>
<li>-PHP</li>
</ul>
<p>Framework i was working with:</p>
<ul>
<li>-PHP FRAMEWORK LARAVEL</li>
</ul>
<p>OS i was working with:</p>
<ul>
<li>-LINUX</li>
</ul>
<p>Version control system i was working with:</p>
<ul>
<li>-GIT</li>
</ul>
</div>
</div>
</div>
</section>
<section class="contact" id="contact">
<div class="container">
<div class="row">
<div class="sectionTitle">
Contact
</div>
</div>
<div id="map" class="col-sm-12"></div>
<div class="row">
<div class="contact-info">
<a href="tel:+381656761810" class="contact-info-link">
<i class="fa fa-mobile" aria-hidden="true"></i> +381 65 6761 810
</a>
<a href="mailto:[email protected]" class="contact-info-link">
<i class="fa fa-envelope" aria-hidden="true"></i> [email protected]
</a>
</div>
<form name="contactform" method="post" action="send_form_email.php" class="form" id="forms">
<div class="col-sm-6">
<label for="name">Full name</label>
<input type="text" id="name" name="name" maxlength="50" size="50px" min="5" required>
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<label for="phone">Phone</label>
<input type="number" id="phone" name="phone" size="50">
</div>
<div class="col-sm-6 ">
<label for="comment">Comment</label>
<textarea id="comment" name="comment" minlength="5" maxlength="1000" cols="25" required></textarea>
<input type="submit" value="Send" class="btn btn-contact">
</div>
</form>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="footer-logo">
<a href="#hero"><img src="img/logo.png" width="110" height="23"></a>
</div>
</div>
<div class="row">
<div class="footer-social">
<a href="https://www.facebook.com/tadija.stefanovic.5" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="https://www.linkedin.com/in/aleksandar-mitrovic-155590b6?trk=nav_responsive_tab_profile_pic" target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
</div>
</div>
<div class="row">
<div class="footer-credits">
Copyright 2016 Aleksandar Mitrović
</div>
</div>
</div>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<!-- Script for circles percents on section skills & experiences -->
<script src="js/circlePercentProgress.js"></script>
<!-- End of script for circles percents on section skills & experiences -->
<!-- Script for options of circles percents on section skills & experiences -->
<script src="js/circlePercentProgressOptions.js"></script>
<!-- End of script for options for circles percents on section skills & experiences -->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
C'est simple: vous avez beaucoup de liens cassés dans votre code. Par exemple, vous essayez d'inclure un script appelé js/navScroll.js, mais le fichier s'appelle en fait js/navscroll.js
Chaque lien rompu entraîne une redirection vers la page d'erreur 404 de 000webhost, qui est un document HTML et commence donc par un <.
Le navigateur, qui attend des fichiers CSS ou JS, se plaint du jeton inattendu.