How to create interactive tags in html file?

I don't know anything about programming, so I'm trying to开发者_Go百科 find out where to start learning + how difficult my problem is. Since I don't have any programming knowledge, I'll try to describe my problem in natural language, hope that is OK.

1. I have the html file of the penal code (a type of law). It contains many different rules, that are in numbered paragraphs (§ 1, § 4, etc).

2. Now I want to look at the source code and manually “tag” the paragraphs according to specific criteria. For example all the paragraphs that concern the use of a weapon get the “weapon” tag, or that have a minimum sentencing of 1 year and higher get a “crime” tag, etc.

3. At the end I want to view an interactive html file in Firefox/Chrome, where I could for example click on a “crime” button, and all §§§ that were tagged with “crime” would appear in bold red, keeping the rest of the document intact. Ideally I would also be able to click on “weapon” and would only see the §§§ tagged with “weapon”, making the rest of the document disappear.

The function it's just for me, so it would only need to work on a Xubuntu 11.04 desktop with Firefox or Chrome. The original source file would be http://bundesrecht.juris.de/stgb/BJNR001270871.html. The code looks strange to me, is there a way to convert it into something more easily manually editable?

Any help would be greatly appreciated. Primarily I don't know where to start learning. Do I need to know HTML, jQuery, or a programming language like Python? Do I need to set up an Apache server on my PC? Perhaps because of my ignorance of programming, this seems like a not too complex function. Am I mistaken in the belief that an amateur could build something like thins maybe one month?

I think this is not very difficult to make, although the tagging process can be quite labour-intensive.

You don't need much programming skills, especially when you want to tag stuff manually. You probably only need basic HTML and CSS and some Javascript to pull this off.

What I would do is the following

1. Create a local copy of the HTML file (use Save As in your browser)
2. Manually tag each § by giving it the appropriate tag as a classname
3. Create a list of all available tags and let javascript filter out the § you'd like to see

Now Step 1 is pretty easy I guess, so I'll go right to Step 2. The paragraphs in the HTML file are formatted according to a certain pattern, e.g.:

<div class="jnnorm" id="BJNR001270871BJNE009802307" title="Einzelnorm">
    <div class="jnheader">
        <a name="BJNR001270871BJNE009802307"/><a href="index.html#BJNR001270871BJNE009802307">Nichtamtliches Inhaltsverzeichnis</a>
        <h3><span class="jnenbez">&#167; 31</span>&#160;<span class="jnentitel">R&#252;cktritt vom Versuch der Beteiligung</span></h3>
    </div> 
    <div class="jnhtml">
        <div>
            <div class="jurAbsatz">
            (1) Nach &#167; 30 wird nicht bestraft, wer freiwillig etc.
            </div>
        </div>
    </div>
</div>

What you want to do now is add your tag to the <div> element with the class jnnorm. So the above example would become (if the tag weapon would be appropriate):

<div class="jnnorm weapon" id="BJNR001270871BJNE009802307" title="Einzelnorm">

You do that for each paragraph in the HTML. This will be pretty boring, but okay.

Now Step 3. First create a list of links of all the tags you've just created. How you create lists in html is explained here. Put this at the top of the HTML document. What you want to do with javascript is when you click on one of the links in your list that only the paragraphs with the given class are shown. This is most easily done with jQuery's click event and the show and hide methods.

Updated with jQuery example

Make a menu like this

<ul id="menu">
  <li id="weapon">Weapons</li>
  <li id="crime">Crime</li> 
</ul>

And then use the following jQuery

<script>
$(document).ready(function(){

  // When a <li> element inside an <ul> with the id "menu" is clicked, do the following
  $('ul#menu li').click(function(){
    // Get the id of the <li> element and append a '.' so we get the right name for the tag (class) we want to show 
    var tag = '.' + $(this).attr('id');
    // Hide all elements of class 'jnnorm'
    $('.jnnorm').hide();
    // Show all elements with the class name of tag we want
    $(tag).show();
  });
});
</script>

Note: HTML classes are denoted as .classname in jQuery whereas HTML id's are denoted as #idname.

Good luck!

This could be done using purely HTML/CSS and Javascript, so not server would be needed. JQuery would make the javascript side easier.

Basic idea of how to do it:

• Use CSS style classes for your "tags"
• Have a button for each tag with an onclick handler that uses JQuery to highlight everything with that tag (or make everything else invisible)

The HTML source code actually looks nicely structured, though it could use a few more linebreaks for sub-paragraphs. Any good HTML/XML editor has an autoformat feature that handles this, though you could get any specific format you want using a programming language with convenient text-manipulation facilities, such as Perl, awk or Python.