Building a search bar - html

I'm currently creating a website for a school project, and I would like to add a search bar in which we can look for a word on the website. It would work like a traditional Ctrl+F (Command+F) but for every html file on the website, and then present the result either on a pop-up or on a different page.
I believe this requires a specific software, but I don't know which one, and I'm pretty sure I don't know how to use it.
Thanks for any insight on how to do that!

You have a plenty of options. The particular choice will depend on your site specifics (is the content static or dynamic etc.). Anyway you will need to build a search index. I suggest to use something almost ready to go. See elasticsearch and a crawler for it.

One easy way would be to use Google Custom Search if the website will be online.
Another option would be to build or use an existing php search script. In this case your webhoster must support php. for static webpages this is not the best option, as the script has to search through all files everytime you search something.
It will be a lot easier if you use a CMS (Content Management System) to build your site, they usually have the Search-functionality included or as an addon.
For more information also checkout this post

Related

Can I integrate grapejs website builder into my own website

Does anyone know if I can integrate GrapeJS into my own website so clients could build their own websites using it? IF anyone has done this, how easy is it and are there downsides?
This question is pretty open ended, but I'll take a shot at it.
The short answer is yes, you can use Grapesjs to allow clients to make their own sites; however, the details matter.
Grapesjs by default doesn't know anything about your stack, website structure, metadata, etc. You will need to either supply plugins or implement those features yourself. I've worked on a project for a company that used Grapesjs to implement single page apps and I'll include just some of the tweaks we had to manage.
Hiding certain layers that only confuse average users.
Hiding pretty much all of the styling, and using traits to allow people to pick from some predefined styles.
Take the html, css on store and generate the final html page, and store it in our static serving folder on the server.
Implement a wrapping "App" component that has traits for the different metadata we want users to control (open graph metadata, title, etc)
and those are just the big things, I'm sure I am forgetting several small ones.
For your application, you'll also need to implement a custom trait for links / buttons that allows you to link from one "page" to another. As well as, a way to allow a user to pick which page to work on.
The long answer is Yes, but Grapesjs is only the starting point.
Yes you can.
However it is not straightforward.
If you want to build a Drag Drop Editor like GrapeJS Demo, here is the Source Code - https://github.com/artf/grapesjs-preset-webpage
You can see an implementation at https://codegres.org/dragdrop

Possible to build an editable site in just HTML/CSS?

A local nonprofit needs a new website. It's a very basic website that simply presents information, nothing past basic HTML/CSS is needed to make the actual site.
The marketing manager would like to be able to edit text sections (upcoming events, jobs) regularly. How would I go about creating the site in HTML/CSS and then allowing them to edit just the text in those sections in an easy way? is that even possible, or would this require more advanced knowledge of actual programming/database languages?
Thanks
No, you can't edit the site with just HTML and CSS. Even if you have JavaScript, you'll need server side code (ASP.NET, PHP, Ruby on Rails, Node.js etc) to store the changed text, since HTML, CSS, and JS run on the client (excluding server side JavaScript based frameworks).
The easy solution is to just use simple HTML and tell him to directly edit the HTML. If he's just a little bit technical, an hour or two of explanation of how HTML works might be enough to get you going.
A CMS solution that is prebuilt and has simple menus for editing things might work nicely. There's plenty of various options to suit your needs.
Otherwise, you can either build a custom site. A custom site that reads text from simple text files might be all it takes (Markdown might be preferable to plain text.) Of course, you can scale it up if you want until you've basically built your own CMS.
You can't do that.
HTML pages are stored on a server (which is just a computer accessible by other computers via an internet connection), when you type in an address in your browser's address bar it sends a request to a server to fetch the corresponding HTML page. Then this page is displayed in your browser.
Now, say you managed to change a text in your browser somehow using HTML/CSS, but you still need to find a way to send these changes back to the server so that these updated pages are accessible by other remote browsers, and the only way of doing this is to use server side languages. They are not really that difficult, you can quickly learn that.
You might like to take a look at this sourceforge project.
This is a file-based system that uses conventional HTML for the webpages, but allows online editing with CKEditor. Requirements are Apache 2 and php 5.3 or later.
There is a testdrive available.
Login with guest.

Using a list of dynamic links throughout website

By "dynamic links", I mean a list of links that will constantly be updated.
To illustrate my question, I have a website that I am constantly writing new articles for. I currently have about 10 articles. If someone is to read article #5, there is a list of links to all 10 articles in the right panel of the page. As I update the site, and article #1 becomes out of date, I'd like to replace article #1 with article #11. Rather than updating the links within every article (so 10 times), is there a way to update the links once and have them all update simultaneously to every page?? Could I create an iframe for this??
Thanks for any and all help!
What's your goal? Do you want to learn to be a web developer? Or are you mostly concerned with getting your articles published?
If you want to be a web developer, I'd recommend steering clear of large CMS system like Wordpress or Drupal. Those are great products. But you want to learn the basics first. I think starting a PHP tutorial is the way to go.
If you just want to publish your articles, I'd recommend you find a nice place to create a blog. There are so many to choose from. It all depends on how much you want to spend.
Feel free to ask follow up questions. Web development sounds simple. But it's really a complex topic. I can't imagine what is must be like starting out these days with so many choices and competing technologies.
One way to do it would be to use Server-side includes. (Wikipedia) They work like this:
<!--#include file="some-content.html" -->
or
<!--#include virtual="some-folder/some-content.html" -->
The difference is file="" finds a file relative to the current page, whereas virtual="" finds it from the domain root. Either way, this method can use any type of regular text file as a source. The actual addition of the content is done by the server (hence the name) so its contents will be parsed as regular HTML and all CSS will apply to it as if the file were part of your page. I don't know about compatibility with different hosts, but if your web server supports it, this is probably the easiest way to go.

How to implement a search in a HTML site?

I am really wondering if i can use search for a HTML website. The pages are static. I just want the users to able to search for contents of my site. and the results shown with in my site itself. Is there anyway i can achieve this. I can use PHP on my server.
Google search can be implemented but it takes you to google's page to show the results
You're better off not creating your own search engine - there's loads of good ones that can be integrated into your site, which will be better than you can write yourself.
Google is the most popular search engine, so you might as well use that. As an alternative to customising the html results page, you could use the Google AJAX Search API - this does your search, and inserts the results to a specific element on your page. (DON'T forget people with javascript turned off, however...)
I like easy and fast, so consider Google Custom Search
Possibilities are:
Database Extraction (http://www.ibm.com/developerworks/library/os-php-sphinxsearch/)
Search Indexer (http://framework.zend.com/manual/en/zend.search.lucene.html#zend.search.lucene.overview)
Custom Search Crawler
As for customise Google Custom Search: http://googlecustomsearch.blogspot.com/2009/10/structured-custom-search.html?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+blogspot%2FSyga+%28Google+Custom+Search%29
I think you can customize Google's result page.
Well, if you have php available, I would definitely suggest using that. If I were you, I would go through some PHP tutorials, and learn the basics.
W3Schools has some great tutorials.
Then, I would do some searches on building a text based database on your site, or use a clever solution like this one. You can build a small database with metadata and store it in a text file, and it should get you going. Good luck.

Using a form to change css stylesheet

I use about a dozen different templates for several different vertical markets that I customize for CLients. I add custom Headers, footers and links and develop a color pallet and font used based on their preferences.
I would like to have a form that updates their own css files after the Client logs in and also offer a upload for their own custom logos, headers footers etc, these could be in html or jpg,png format, to be included in their sites.
Does anyone know of a program or scripts that can do this, or do I need to write it myself.
Thanks
AFAIK there is an abundance of Content Management solutions that would include various flavours of this functionality, but you're looking for it in isolation. My suspicion is that you're going to have to write it yourself.
Just to clarify: when the user logs in to your application, you want it to draw specific style elements based on preferences set for their account (or for general preferences set against their organisation)?
It sounds like you want to store all this information in a database and have styles inserted into the HTML on page render. If you want something that would actually create a stylesheet and write it to the filesystem, as I said before, it's likely that you'll have to build the functionality to your specific needs.
This type of thing is in the domain of a Content Management System. So, you have a couple of choices.
Try to integrate your work into an existing CMS like drupal, joomla, DotnetNuke, etc (depending on what language you are coding in); or,
Build your own.
You can certainly leverage existing components such as a rich text editor (like the one you used to post the question) in combination with writing the files to a DB or straight to the file system.
Either way, you have a fair amount of work ahead of you.
try something with php, Maybe a script like this?