Including an HTML file in another HTML file - html

I am creating a personal learning website. It will contain many "lessons" and I would like to be able to use a menu for every active "lesson", so that the user could go to the next "lesson" without going back to the menu to select it.
To do that, I would need an extern file to modify once and for it to be "called" on every "active" page on the website.
I tried using the -object tag- in html, but it does not work with the template i am using and I would still have to modify the size of the window on every page it appears in.
For some unknown reason, I could not make the third-party method shown on w3s work, and neither the jQuery method I found on similar questions.

Related

How to edit the HTML code of just one page of my wordpress website?

So for some pages of my Wordpress website I created a big block of code conisiting many images and links, which I need to change from time to time. Because this was built with a plugin like Elementor manually changing hundreds of images/links would take forever.
If I could edit the source code of just this page I would copy the source code, run it through my script which would change all the links/images in seconds and paste it back in the webpage source code.
If this wasn't clear enough hear is my thought process in steps:
1: Having a webpage with content which can only (afaik) be edited through a plugin like Elementor
2: Instead copying the part with the content from the source code
3: Chaging this source code within seconds through a script
4: Pasting the new source code back into the webpage sp it is updated with the new content
Ok, so it depends on how elementor is storing the images in the image block, chances are that is will be contained in shortcodes e.g. [vietpic]<img src="wp-content/nam.jpg [/vietpic] you should be able to see this by going to the page with these images and then selecting 'Text' on the content editor. The editor will switch from the visual blockbuilding to the code which you can then copy out, run your script on and place elsewhere. Just make sure that you get the whole block, like any containing elements for instance. If this doesn't work out I'd suggest navigating to the page on the frontend, inspecting the element via the browsers inspector then selecting the container, click 'edit as html' then copy out the code. You can then run your script on this source code then paste it into an elementor custom html block.

Creating a plain html home page AMP with WordPress running the other pages

Gday
I like to know how you would go about creating a home page in plain html and have WordPress run the other pages?
The reason is I’d like to create a solely plain html website but I need WordPress for my contact page it has a large form on it and I use a plugin to generate it and forms are a bit beyond my knowledge at the moment to create a contact page myself.
(I have tried creating a template page but then WordPress adds unnecessary code [from plugins ] and makes the AMP invalid)
Honestly I'd try and keep it self contained in WordPress itself.
If for some reason you really want a separate HTML/PHP Homepage, follow these steps:
Add a my-homepage.php file to your /wp-content/themes/ACTIVE-THEME directory
Inside that file put the following code:
Add a new page (Pages > Add New)
Give it a recognizable name like "My Homepage"
In the "Template" selector on the right hand side, pick "My HTML Homepage" and click Publish
Go to Settings > Reading, change Your homepage displays to A static page and pick the page you just made
Now you can add your own code as you see fit. Nothing "WordPress" related will get loaded or hooked in since there's no functions on that file - so you're free to code HTML (or PHP) to your heart's content.
You can see a bit more indepth answer over on WPSE: https://wordpress.stackexchange.com/questions/296592/how-to-use-custom-html-file-instead-of-wordpress-homepage

Drop Down Menu Stacking

So I have a custom css drop down menu and it works fine except I realized that writing this menu out across all the html pages on this website will become tedious if I should update with a new section to the website and need to add on a new tier to the menu, I would end up with a billion htmls to update one simple line of code.
I was wondering, is there a way to write this menu once (on the main page) and call on it on all my other htmls?
I experimented a bit with Objects, Iframe, to call on the dropdown menu written on a separate html file and such but when the menu expands you get scroll bars and both methods seem to embed into the page. I want the contents of the page to be behind the drop down menu just as it standardly looks right now.
The following is my unedited page:
http://www.blue-cicada.net/trivial/index.html
And this is my test:
http://www.blue-cicada.net/trivial/test/
Not looking so good there, my top image is obscured, the submenus wont fly out completely etc, how to fix?
Im really new to this stuff so any help is appreciated.
You want to do something server side really, back in the day this would have been http://en.wikipedia.org/wiki/Server_Side_Includes, depending on who is hosting your site it may even still be, though that's fairly unlikely. Chances are you have some provision from your webhost to do something server side, ie PHP Includes say.
If not you could look at doing JavaScript client side includes but its crufty,
If you're really just hand editing you html files and have no access to any server side technologies well, you can always just have a text editor that can search and replace across multiple files
UPDATE
Given your comments I would just download something like Notepad++ and read the Bulk Find and Replace here 'http://www.dedoimedo.com/computers/notepadpp-tricks.html'. Basically you can have a test page you use for figuring out 'what you want to do' and then use the global find and replace to update all of the 'current' versions of the header/menu/whatever to you new version.
Backup all you files first!
Write it in a page called A.html.
On every page where you want to put it, use an <iframe src="A.html">
Make sure you remove the borders of the <iframe>, and also the scrollbars and make it look natural

squarespace query only for home page

I am using squarespace developer kit and going well. I am wanting to integrate some queries to display some very simple data form my blogs that will appear on my home page ONLY.
Not being very fluent in JSON, I am struggling to implement the query on the home page. I have it set up to display the data from the selected blog but it displays the data through each page.
I only want the data to be visible on the home page at the top. Not in the header but inside where all the content is.
Here is my query that works perfectly well
<squarespace:query collection="feature-articles" limit="10">
<li>
{.repeated section items}
<li>{title}</li>
{.end}
</li>
</squarespace:query>
Can the data be inserted into a code block via the content manager so I can then insert into within the content or am I totally wrong in thinking that.
What I will then do is style/ add or edit the UI of the data into either a carousel or whatever is needed for the project.
I just need to know where to store the query so that it fits in with the content.
Appreciate any time.
Review the following link to see how you can edit a template file, to make different pages use different templates.
http://developers.squarespace.com/template-configuration/
Make a completely custom template just for your homepage then paste you code within your custom .region file as outlin ed in the above guide.
Here is the page about working with template pages:
http://developers.squarespace.com/layouts-regions/
Seeing as you know about , I have a feeling you might already know this, so you might want to be a bit more specific about how your displaying your code and I will gladly update my answer.

Paths relative to the file location and NOT the url

**** EDIT: SOLVED HERE Relative paths from file for img, a and header ****
Somewhat new to web design.
I just finished creating a dynamic site. It can read domain/category, domain/category/this-article-about-x, all redirecting to domain/index.php and working well.
However, I quickly learned that whenever I used a relative path such as ./include, the relative path was taking in account the current URL, and not the actual url where the php file is at.
I have 2 questions that I couldn't answer when browsing the internet for a long time:
1) If domain/index.php is trying to show an image with ./thumbnails/science/image.jpg, it won't work if the actual url is domain/category/, but it WILL work if its just domain/category(no slash at the end). Why this inconsistency? The HTML code is showing the src to the image is the same on both cases.
2) My header has a dropdown menu with categories. Once its submitted, it will call itself (header.php), see which category the user chose and redirect to domain/category. All works well. You can then rechange the dropdown menu to another category and everything loads again. But again, if you access directly domain/cateory/ (with the slash at the end), the CSS won't load, the images won't load as said on question 1, and submitting the form will cause a problem because it will look for header.php on domain/category/, and not just on domain where the header.php file actually is.
I have successfully used dirname(FILE) to make sure my includes all work (as far as my testing has gone, no errors). But I could not use dirname(FILE) to generate links or images 'img src=' that will always point to the images regardless of the URL.
On localhost, the HTML is coming as img src=c:\path\htdocs\thumbnails\img, which is right, but the image does not display anyway. Same with the 'a href' links. Trying to create links with dirname(FILE) created links on localhost as c:\correctpath, but clicking on them did absolutely nothing. Also, using header with dirname(FILE) to handle the redirection from the dropdown menu caused it to cease working as well (but if I used ./ . dropDownMenuValue, it would again correctly change the url to domain/categoryChosen)
How can I use a consistent method for relative urls that allow me to work on localhost and then upload to my web host without the need make changes to the files, AND that works with dynamic websites that have pretty name urls through htaccess?
Thank you,
This is all very puzzling for me how getting a relative path from the current file path is being so hard and generating so many different issues, and why only include statements seem to work well with dirname(FILE)
Edit: http://board.phpbuilder.com/showthread.php?10374336-RESOLVED-mod_rewrite-for-SEO-Friendly-URLs-and-relative-path-issue-fixes
I've found this on other sites, but it requires you to change the base everytime you want to go from localhost to the web. I'm trying to avoid that. Clearly there has to be a simple way to do something so basic. I can't believe google and everybody else are changing paths when they are ready to make something live.
You should just always use absolute paths for public files like media. If you don't want to do that for some reason or your site is just too involved at this point you'll have to create rewrite rules for the other file types so they can also be included from the correct path.