Why does explicitly navigating to index.php cause my css to fail - php

I have a very basic webpage with two files, index.php and style.css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
Example text
</body>
</html>
body {
text-align: center;
}
If I navigate to www.example.com this page loads correctly. WAMP automatically takes me to index.php. However if I navigate explicitly to www.example.com/index.php the css fails and everything reverts back to the default of being left-aligned.
EDIT: I originally blamed this on a GET variable but I have realised that's not the issue

Related

GET http://localhost/bootstrap.min.css net::ERR_ABORTED 404 (Not Found)

In Php when I try to load the page and this error appears in the console: GET http://localhost/bootstrap.min.css net::ERR_ABORTED 404 (Not Found). || js and css don't work on my web page
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page</title>
<link rel="stylesheet" href="/bootstrap.min.css">
<link rel="stylesheet" href="/style.css">
</head>
but the path is correct, even though i had a 404 problem...
what'the problem?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
In CDN It worked, but in local files(downloaded files) not worked.

After every require_once it's adding a blank text element followed by 1

...
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>**********</title>
<link href="css/main.css" rel="stylesheet" />
<link href="css/home.css" rel="stylesheet" />
</head>
<body>
<?php
// top navigation
require_once("require/top_navigation.php");
// header
require_once("require/header.php");
// main
require_once("require/main.php");
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/main.js"></script>
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v5.0&appId=411386782258918&autoLogAppEvents=1"></script>
</body>
</html>
...
I haven't done much direct php for a while, but when I seem to use the require_once it adds a blank text element followed by 1. I've looked all over google and everyone that I've come across says it's because of BOM. So I checked on the editor that I use 'Visual Studio Code', and it's not enabled, by default it's UTF-8 without BOM.
The apache software is Xampp.

Is it possible to add CDN on HTML via a PHP include?

I'm creating a website for homework and it's going to have multiple pages. I'm using bootstrap 4 and for each page, I have to declare a lot of links and scripts on the head of the HTML.
My question is if it's possible to add a single link via HTML or a PHP include so I can use a single line for all the additions and edit them all on a single file.
This is what I have
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
I want something like this
<head>
<title> </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="alltheotherlinksandscripts.php">
</head>
Or this
<html>
<head>
<title></title>
<?php
include_once "alllinks.php";
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body> </body>
</html>
You can. Put the header in a separate php file and you can include it in all files.
<head>
<?php include('header.php'); ?>
</head>
Yes, you can set all links (js/css libraries) in one file i.e alllinks.php
and call that file in your <head> part like..
<head>
<?php include('alllinks.php'); ?>
</head>

Redirect with the original title and description

I need to redirect a page whilst keeping the original page (not the one redirected to) share title and description and icon.
So in this example, the share preview in Whatsapp etc would say Title rather than Google.
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Title</title>
<meta name="description" content="Download now">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
</head>
<body>
<?php
header("HTTP/1.1 301 Moved Permanently");
header("Location: google.com");
?>
</body>
</html>

Why can't PageSpeed Insights see my Viewport Meta Tag?

I've added the code
<meta name="viewport" content="width=device-width, initial-scale=1" />
to the HEAD of my webpage the Index.php at DuchyBrass.co.uk
It is on Line 6 of the source code, but the site runs on a bespoke CMS so the HEAD is defined in its own file and imported.
index.php
<!DOCTYPE html>
<html lang='en'>
<head>
<?php include 'app/common/head.php'; ?>
</head>
<body>
...
head.php
<title>Duchy Brass</title>
<meta charset="windows-1252" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="google-site-verification" content="QsU348JA47VLcAbTUic-Un90bVlGuVk3a9A34doxsvc" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Viga' rel='stylesheet' type='text/css'>
<link rel="icon" type="image/png" href="imgs/favicon.ico">
<link rel="canonical" href="http://www.duchybrass.co.uk" />
As far as the browser is concerned (I assume) that viewport tag is visible, but it is not seen by that Mobile SEO tool. Is this something to do with the CMS, loading the information too late, or is this a common issue that I should ignore?
The top of my Index page (using view page source from the browser) looks like
/ (page source)
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Duchy Brass</title>
<meta charset="windows-1252" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
...
TL;DR: clear caches and check if there is no content before head (ctrl+U)
I had a similar problem, in my case there were content being included trough PHP before my wordpress header call,
check it with Ctrl+U (see source) and be sure there is nothing before the
<!DOCTYPE html>
<html lang='en'>
<head>
if you change the code and it persists, check if you're using cache, you may have to clear caches of pages and files so the changes take effect before running another PageSpeed analysis

Categories