Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I'm very new to html, css, java, code in general, and I was trying to figure out how to add more than one image within one single line of code.
I'm trying to create a really simple click-through image gallery with no flare or crazy tricks?
Any help would be much appreciated.
No. Image tags can have only ONE src. If you want multiple images, either use multiple image tags, or use some javascript to change the src of the one image.
Whenever you wonder about any HTML tag look it up at W3C (They are the authority when it comes to web standards) The imagetag is found here:
http://dev.w3.org/html5/markup/img.html#img.attrs.src
What would would probably want is to change the image src attribute using javascript, or some library like jQuery. This will also let you do more advanced scripting later on.
It could look like this in pure javascript:
document.getElementById("img").src = "foobar.jpg";
As #Luiggi says: no. You can't do that in HTML. The img tag is for a single image.
If you want to click through things, then you need to have the appropriate user-interaction event handlers, and a bunch of separate objects to switch through. Doing this is not hard, for example, you could load all the images in separate img tags, and set all but one of their display attributes to 'none'.
Then when somebody clicks, you can hide the visible one and show the next one.
Or you can go a little bit deeper and look at the many many different options for image galleries with a google search. Most of them will require some underlying framework be loaded, such at jQuery, but once you get past that hurdle the slide show stuff is usually pretty easy.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
I want to create a really simple blog and so far I learned HTML and CSS.
So if I want to add a new node or article, do I need to modify my HTML document and then upload it again or is there any other way?
If you're only using simple HTML
Then the css should be made in a way that would make it reusable, so that when you just add another article shouldn't affect anyhing else. The HTML however must be changed, as you'll need to add your content somehow
The thing is, no one uses plain HTML anymore. If you want everything to happen dynamically then you should use DOM manipulation frameworks. The most basic one of which is JQuery, while the most powerful ones as of now are React, Angular, and Vue
Well, of course you have to modify something and upload it again, but not necessarily the HTML code.
You could youse AJAX (Asynchronous JavaScript and XML) - which, by the way, you can also use with JSON instead of XML - then create a standard article model, get the latest article from your file with
fetch("your-file.xml-or-json-or-whatever").then(
function(response) { /* Do something with the response, see the link below for an example */ }
);
and finally turn it into a DOM element with JS.
This method is pretty inefficient, though, if you don't have a way to cut the output from your list of articles. In fact, if, say, you have one thousand articles, it's inconvenient (inconvenient to say the least) to serve them all and the just use the first ten. If you have a static server, you might want to split the content into multiple files. If, instead, you have access to PHP (or other HTML preprocessors), then you should consider cutting it dynamically. Below are some links to help you.
AJAX tutorial on W3Schools
Fetch documentation on Mozilla Developer
You could also think of using frameworks like Angular (or AngularJS) to make your website even more dynamic. However, those are better for web apps than websites, as I've heard that it's a bit harder for Google to register an Angular app.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I use a website that recently changed its layout, which I (and a lot of other people) extremely dislike. I checked over the changes, and I believe that most of the changes involve a simple css change.
I own a domain that I would like to display the contents of this website, but with my own css, however I am unfamiliar with the web. I am open to all solutions that would do this (embedding, reflecting, etc.) I would like to do this without paying money.
*Note: the reason I am avoiding using a userstyle is because I would like to be able to access this website on any computer, anywhere, anytime, and let others do the same.
The website in question is http://www.scarsdaleschools.org/, and I would like it to look like this.
I know there might be some conflicts with the using the old css on the current website, it is okay as long as it is usable.
I will give an additional 50 point bounty if the solution does not involve me hosting my own website.
Clarification: I am not looking to create a mirror for the website, I would like a client to access scarsdaleschools.org directly, only replace all css documents with my own css, thus all content is accessed directly from scarsdaleschools.org.
EDIT: This was put on hold as too broad. I am looking for a method by which I can accomplish what I am trying to do.
According to the help center:
There are either too many possible answers, or good answers would be too long for this format. Please add details to narrow down the answer set or to isolate an issue that can be answered in a few paragraphs.
Chances are, there is probably only one way (or a small few ways) that can answer my question. Regardless, my question does not require a few paragraphs, but just a simple name of a technique (and hopefully a small explanation of how I would use this technique).
Well if you don't mind having to put some insane amounts of !important in your CSS for it, the iframe tag is actually powerful enough to do it (doesn't even need the proposed-then-cancelled seamless attribute).
I'd still suggest using something like a portable browser on a flashdrive/CD, and having your userstyles installed on that, instead, as it's a little less red-flag-inducing (your site may be flagged as a potential attack site w/ the iframe trick). Added bonuses, it dodges corpsec spyware and update restrictions, and has all your bookmarks/addons.
But simply iframeing the website from your own with your stylesheet (loaded with !importants) will suffice, so long as you can get around any framekiller they use (if any).
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I want to create Websites for small companies like restaurants. But i can imagine that i will often get called when they need help "Changing the text". Because they simply doesnt know better. Then i often will have do it for them. But there might be another way?
Image changing is simple. Just rename any Picture you want.
Like:
indexPicture.jpg
Everyone easily can replace those jpg. They simply rename any picture to indexPicture.jpg (preferable same size).
But when it comes changing to text. I can imagine a customer, that destroys html code. and removed some tags like (30 min work). Because he doesn't know better.
Can't I bind some text file to a <p> tag? So they simply have to open it and write something new.
Are there any better method?
Like a free App, they can open every website and simply drag and drop changes or select a <p> tag and simply rename it?
This isn't something that's really supported in basic HTML5, so the simple answer to a simple question is: no.
But life is never that simple in the modern web. If you're using a client-side templating framework like React or Angular (both are JavaScript frameworks which are freely available) you can code the pages to load fragments of text from disparate files which your client may have an easier time editing. I don't believe posting example code here is valuable to the question since that's basically a tutorial on how Angular or React work. There are great tutorials and examples on their sites.
As suggested in the comments the most accurate thing I can think of is to use a CMS. These are very helpful when changing the content of your site. Some examples are Wordpress, Drupal or Joomla. You can have a look here: https://www.ucl.ac.uk/building-great-websites/managing-your-website/using-a-cms
I hope that helps you!
You could try a shtml file instead? No CMS needed. I recently found out about this when creating my own HTML5 site as I wanted an easy way to edit a common footer rather than going through all the pages.
Just create a folder with the necessary files (Every paragraph maybe) and include it in the main file using a code like this:
<!--#include virtual="../filename.shtml" -->
I noticed that you didn't want to use a CMS such as WordPress, which as the comments suggest would be a really effective solution.
I once had an issue where I couldn't use a CMS cause I didn't have Cpanel access and what we essentially did was the follow.
Define a XML file, with clearly defined tags for each section of the
website that the client may want to change periodically.
Access the XML file through PHP(something like SimpleXML), and
display the tags/relevant content in the page.
Create a backend that allows the client to view/update content
through forms.
Alternatively, you may use a similar solution with databases and give forms for editing.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I am trying to add an existing capability to another part of our system. It was originally written only for one part of the system, but we want it available in another one.
So I basically copied the code (which was a huge javascript function) and pasted it into the new part of the system. Well, everything works great except for one html table that is being displayed as hidden. Everything around it is visible. But for some reason this one table is not displayed. I am guessing that because I copied it into another area, that it is inheriting some type of hidden attribute, but I have looked around everywhere and don't see anything that would be making it hidden. I am sure if I knew my own environment I would have a better idea of where to look, but this environment is so complex and i'm not used to web development and javascript and CSS. Is there someway to quickly fix this by overriding any attributes that the table might have inherited and just force it to be visible? that would be the easiest fix if it were possible.
Anyway, if you can think of anything, please advise me. Basically I have a mystery hidden table that is being hidden because of something higher up the chain (that it must have inherited) and I am not knowledgeable to figure out where it is happening.
The Best and most probably the easiest way to debug it(without getting through the lines of code) is to open the webpage in chrome, right click on the page and go for inspect element. There you can see the HTML code in the bottom panel. Find the HTML code for the table and hover over it, then you can find the position of your hidden table. Then check if the table has some css class attached with it. If yes click on the css class in the HTML code, then you can see the css table attributes in the bottom right panel. Change the value of position or any other tag to find any visible changes. GOOD LUCK!!
If you know the classname of the table and have jquery just do
$(".ELEMENTNAME").show();
probably the easiest way.. If it's an ID for that particular table you'll have to use
$("#ELEMENTNAME").show();
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
My girlfriend is making a website for her exam.
She is not good at HTML - at all! (Me neither). But for making it easy for her, I told her to use frames. It's easy and manageable.
But the problem is that the website have to live up to the standard HMTL5. That's a requirement. I don't think frames does that because it's deprecated. Am I right or wrong?
So.. What to do? It has to be as simple as possible. I don't think the other solutions I could find are something she can do herself :( Any ideas?
(Sorry, if my english sucks :) )
You should definitely try not to use deprecated elements. They will behave inconsistently, and probably won't work in the future. There's also a very good reason why frames are deprecated.
You probably need to rethink how you're structuring your data. An HTML page should be as simple and to-the-point as possible. If you have to pull in a significant amount of content from other web-pages using frames, you're doing it wrong. In most cases it's better to simply link to the extra content.
If you're trying to use frames to pull in the <header> or the <nav>, so you don't have to simply copy them across multiple pages, although I applaud you for trying to be DRY, this is the wrong way to do it. Just copying these sections into all your documents is a better solution than using frames.
Ideally though, you'd use a server-side templating system of some sort. The simplest one (depending on your setup) may be Server-Side Includes.
Having said all that, if you really need frames, the <iframe> element is perfectly valid in HTML5 and may help you out.
Don't use frames, very old and not needed at all
Make sure all your style stuff is made in CSS and it's loaded through a CSS file.
Then make each html page with the information needed in it. Use links for navigation to another page.
With the external CSS you can change the look of your site in one file (the CSS file), and it will automatic update for each html page.
You are correct in assuming that frames do not conform to the HTML5 draft (to the extent that it makes sense to speak of conformance to a draft). HTML5 is not a standard, though it may one day become W3C Recommendation. It does not use the term “deprecated” but “obsolete” and “non-conforming”, but in any case, frameset and frame elements do not conform.
The iframe element (“inline frame”) conforms, however. Using it instead of “normal” (old-style) frames is clumsy and limited, but possible to some extent.
I think this answers the specific, on-topic questions asked. The rest is mainly opinion-based and hence off-topic at SO.
P.S. If “living up the the standard HTML5” is a requirement, then the teachers would need a crash course on the basics of HTML5 process. The requirement means that a page that is “standard HTML5” in the morning may become non-conforming before lunch. After all, HTML5 is a draft that may change at any moment without prior notice, and it says itself: “It is inappropriate to cite this document as other than work in progress.”