HTML + CSS TRICKS, FLOAT LEFT DIV WITH EQUAL HEIGHT, MAGIC OF USING FLEX - CSS BEGINING

<section class="container"> <div class="left-half"> <article> <h1>Left Half 1</h1> </article> </div> <div class="left-half"> <article> <h1>Left Half 2</h1> </article> </div> <div class="left-half"> <article> <h1>Left Half 3</h1> <p>Weekends don't</p> </article> </div> <div class="left-half"> <article> <h1>Left Half 4</h1> <p>Weekends don't</p> <p>Weekends don't</p> </article> </div> <div class="left-half"> <article> <h1>Left Half 5</h1> <p>Weekends don't</p> <p>Weekends don't</p> </article> </div> <div class="left-half"> <article> <h1>Left Half 6</h1> <p>Weekends don't</p> </article> </div> </section>

html, body, section { height: 100%; } body { color: #fff; font-family: sans-serif; font-size: 1.25rem; line-height: 150%; text-align: center; text-shadow: 0 2px 2px #b6701e; } h1 { font-size: 1.75rem; margin: 0 0 0.75rem 0; } .container { display: flex; flex-flow: row wrap; justify-content: flex-start; } .left-half { background-color: #ff9e2c; padding: 0; width: calc(50% - 6px); border: 2px solid red; display: flex; justify-content: flex-start; align-items: flex-start; }

Jsfiddle link

Strip HTML Entities | Remove HTML Tags From String | Stripping HTML Tags in Java | Remove Html Tags From String Using Java | Java: RegEx To Remove HTML Tags

I am writing one program which reads text contents from file. Now I am reading it using bufferedreader class of java. I am able to remove any unwanted characters like '(' or '.' etc, using replaceAll() method. But I want to remove html tags too like "div", "span", "p" and many others like this, including &amp. How to achieve this? Is there a good way to remove HTML from a Java string? Yes, we can using regex. Below is full example written in Java to strip html entities from text.

Full java code example is below:

package com.pkm;

import java.io.BufferedInputStream;
import java.io.File;
import java.io.FileInputStream;
import java.util.regex.Matcher;
import java.util.regex.Pattern;

/**
 * @author PRITOM K MONDAL
 */
public class StripHtmlTags {
    private static final String emptyTag = "<[a-zA-Z0-9]+[^>]+>|</[a-zA-Z0-9]+>";
    private static final String commentTag = "<!--(.*?)-->";
    private static final String docTypeTag = "<![a-zA-Z0-9]+(.*?)>";

    public static void main(String[] args) throws Exception {
        File source = new File("html.txt");
        String text = new String(readObjectFromFile(source), "UTF-8");
        //text = "<p-if case='n=1'>TESTED_N_EQ_1</p-if>";
        text = parse(text);
        println("-------------------------------");
        println(text);
        println("-------------------------------");
    }

    private static String parse(String text) throws Exception {
        text = text.replace("\r\n", "").replace("\n", "").replace("&nbsp;", " ");
        text = replaceDocTypeTags(text);
        text = replaceCommentTags(text);
        text = replaceScriptTags(text);
        text = replaceContentTags(text);  
        text = replaceEmptyTags(text);      
        return text.replaceAll("\\s+", " ").trim();
    }
    
    private static String replaceScriptTags(String text) {
        Pattern p = Pattern.compile("(<(?<tag>(script|style))[^>]*>(?>[^<])*<\\/\\k<tag>\\s*>)", Pattern.CASE_INSENSITIVE);
        Matcher m = p.matcher(text);
        StringBuffer output = new StringBuffer();
        boolean trigger = false;
        while(m.find()){
            String find = m.group(0), tag = m.group(2);
            m.appendReplacement(output, " ");
            trigger = true;
        }
        m.appendTail(output);
        if (trigger) {
            return replaceScriptTags(output.toString());
        }
        return output.toString().replaceAll("\\s+", " ").trim();
    }

    private static String replaceDocTypeTags(String text) {
        try {
            StringBuffer output = new StringBuffer();
            Pattern pattern = Pattern.compile(docTypeTag, Pattern.MULTILINE);
            Matcher matcher = pattern.matcher(text);
            while (matcher.find()) {
                matcher.appendReplacement(output, " ");
            }
            matcher.appendTail(output);
            return output.toString().trim();
        }
        catch (Exception ex) {
            ex.printStackTrace();
        }
        return text;
    }

    private static String replaceCommentTags(String text) {
        try {
            StringBuffer output = new StringBuffer();
            Pattern pattern = Pattern.compile(commentTag, Pattern.MULTILINE);
            Matcher matcher = pattern.matcher(text);
            while (matcher.find()) {
                matcher.appendReplacement(output, " ");
            }
            matcher.appendTail(output);
            return output.toString().trim();
        }
        catch (Exception ex) {
            ex.printStackTrace();
        }
        return text;
    }

    private static String replaceContentTags(String text) {
        Pattern p = Pattern.compile("(<(?<tag>\\w+)[^>]*>(?>[^<])*<\\/\\k<tag>\\s*>)", Pattern.CASE_INSENSITIVE);
        Matcher m = p.matcher(text);
        StringBuffer output = new StringBuffer();
        boolean trigger = false;
        while(m.find()){
            String find = m.group(0), tag = m.group(2);
            if (tag != null) {
                find = find.substring(find.indexOf(">") + 1, find.length() - tag.length() - 3);
                m.appendReplacement(output, " " + Matcher.quoteReplacement(find) + " ");
            }
            else {
                m.appendReplacement(output, " ");
            }
            trigger = true;
        }
        m.appendTail(output);
        if (trigger) {
            return replaceContentTags(output.toString());
        }
        return output.toString();
    }

    private static String replaceEmptyTags(String text) {
        try {
            StringBuffer output = new StringBuffer();
            Pattern pattern = Pattern.compile(emptyTag, Pattern.MULTILINE);
            Matcher matcher = pattern.matcher(text);
            while (matcher.find()) {
                matcher.appendReplacement(output, " ");
            }
            matcher.appendTail(output);
            return output.toString().trim();
        }
        catch (Exception ex) {
            ex.printStackTrace();
        }
        return text;
    }

    private static byte[] readObjectFromFile(File source) throws Exception {
        int size = (int) source.length();
        byte[] bytes = new byte[size];
        BufferedInputStream inputStream = new BufferedInputStream(new FileInputStream(source));
        inputStream.read(bytes, 0, bytes.length);
        inputStream.close();
        return bytes;
    }
    
    private static void println(Object o) {
        System.out.println("" + o);
    }
}

I used below html as example:

<div class="m_2691871633108987921InfoContent"><div style="margin:auto;max-width:48em" class="m_2691871633108987921box m_2691871633108987921dark">Pritom you are getting this message as free service for being a user of the PHP Classes site to which you registered voluntarily using the email address <a href="mailto:pritomkucse@gmail.com" target="_blank">pritomkucse@gmail.com</a>. If you wish to unsubscribe go to the <a href="https://www.phpclasses.org/unsub/n/pritomkumarm/u/newclasses/cc/8d4da9/" target="_blank" data-saferedirecturl="https://www.google.com/url?hl=en&amp;q=https://www.phpclasses.org/unsub/n/pritomkumarm/u/newclasses/cc/8d4da9/&amp;source=gmail&amp;ust=1500128983383000&amp;usg=AFQjCNHdGC4JMTFZL4gunLN5iEeeo-H7fA">unsubscribe page</a>.</div>
<ul>
<table cellpadding="0" cellspacing="0">
<tbody><tr>
<td valign="top" style="padding:0"><h2>Class:</h2>
<div><b><a href="https://www.phpclasses.org/package/10378.html" target="_blank" data-saferedirecturl="https://www.google.com/url?hl=en&amp;q=https://www.phpclasses.org/package/10378.html&amp;source=gmail&amp;ust=1500128983383000&amp;usg=AFQjCNGoRBbTEuOrPMzCnTA8hSMocBh0bA">AJAX Form Validate</a></b><br><a href="https://www.phpclasses.org/discuss/package/10378/" target="_blank" data-saferedirecturl="https://www.google.com/url?hl=en&amp;q=https://www.phpclasses.org/discuss/package/10378/&amp;source=gmail&amp;ust=1500128983383000&amp;usg=AFQjCNF-oSc-24S0hUUr873Yu-o0afYlMg">This class support forum</a></div>
<h2>Short description:</h2>
<div>
Render and validate forms submitted via AJAX</div>
<h2>Groups:</h2>
<div>
PHP 5, Validation, AJAX</div>
</td>
<td valign="top" width="1%"></td>
</tr>
</tbody></table>
<h2>Supplied by:</h2><div>Vishv Sahdev</div>
<h2>Detailed description:</h2>
<div>This class can render and validate forms submitted via AJAX.<br>
<br>
It can render HTML forms using templates that take assigned variable values passed to the class as an array.<br>
<br>
The class can also validate a submitted form inputs according to many possible validation rules.<br>
<br>
If there are validation errors, the class will generate a JSON response to the AJAX request to display</div>
</ul>
<ul>
<h2>PHP Classes site tip of the day:</h2>
<div><p><b><big><a href="https://www.phpclasses.org/tips.html?tip=submit-your-components" target="_blank" data-saferedirecturl="https://www.google.com/url?hl=en&amp;q=https://www.phpclasses.org/tips.html?tip%3Dsubmit-your-components&amp;source=gmail&amp;ust=1500128983383000&amp;usg=AFQjCNGyBzcYnZHB_Trk3N_EycwWu5PS3g">Get feedback and recognition submitting your PHP components</a></big></b></p>
</div>
</ul>
<div style="margin:auto;max-width:48em" class="m_2691871633108987921box m_2691871633108987921dark">Pritom if you are not interested in receiving any more messages like this one, go to the <a href="https://www.phpclasses.org/unsub/n/pritomkumarm/u/newclasses/cc/8d4da9/" target="_blank" data-saferedirecturl="https://www.google.com/url?hl=en&amp;q=https://www.phpclasses.org/unsub/n/pritomkumarm/u/newclasses/cc/8d4da9/&amp;source=gmail&amp;ust=1500128983383000&amp;usg=AFQjCNHdGC4JMTFZL4gunLN5iEeeo-H7fA">unsubscribe page</a> .</div>

</div>

And my java code parse as below string:

Pritom you are getting this message as free service for being a user of the PHP Classes site to which you registered voluntarily using the email address pritomkucse@gmail.com . If you wish to unsubscribe go to the unsubscribe page . Class: AJAX Form Validate This class support forum Short description: Render and validate forms submitted via AJAX Groups: PHP 5, Validation, AJAX Supplied by: Vishv Sahdev Detailed description: This class can render and validate forms submitted via AJAX. It can render HTML forms using templates that take assigned variable values passed to the class as an array. The class can also validate a submitted form inputs according to many possible validation rules. If there are validation errors, the class will generate a JSON response to the AJAX request to display PHP Classes site tip of the day: Get feedback and recognition submitting your PHP components Pritom if you are not interested in receiving any more messages like this one, go to the unsubscribe page .

Rendering text to html with Angular JS

Download example code from here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Rendering text to html with Angular JS</title>
    <script src="angular.js"></script>
    <script src="angular-sanitize.js"></script>
</head>
<body>

<div data-ng-app="myApp" data-ng-controller="MyController">
    <div ng-bind-html="myHTML()"></div>
</div>

<script type="text/javascript">
    var app = angular.module("myApp", ["ngSanitize"]);

    app.controller("MyController", function ($scope, $sce) {
        $scope.snippet = "<div>This is a DIV element; alert('SURE???')</div>";
        $scope.myHTML = function () {
            return $sce.trustAsHtml($scope.snippet);
        }
    });
</script>

</body>
</html>

How to Run PHP Scripts in *.html or *.htm Files

One of the most common questions hitting our support inbox is how to get PHP working in *.html and *.htm files. With this blog we try to provide a practical guide for our users and thus kill two birds with one stone figuratively.

Question One: Does my web host support PHP?

At first you should try to find our whether PHP is supported by your webhost or not. If you already know that PHP works please continue to read at Question Two. If you don't know you could either ask your hosting company or you could just try it by following these steps:

First, create a file named "phptest.php". At this stage it is important to use the file extension ".php". Open the file in a simple text editor (for example the "Editor" in Windows) and write the following line:

<?php echo "hello world"; ?>

After saving the file please upload it to the root directory of your webspace. Open your browser and direct it to the file you just uploaded: "http://www.your-domain.com/phptest.php" (Needless to say, you should use your own domain here...)

It's the moment of truth now. What does the browser say? If you see the words "hello world" everything is fine, PHP is working. However, if you don't see these words please contact your hosting provider because PHP is not working (yet). Most hosting companies provide packages including PHP. So perhaps you just have to switch to another hosting plan.

Question Two: How to get PHP working in HTML files

If PHP is working there is only one step left to use PHP scripts in files with *.html or *.htm extensions as well. The magic word is ".htaccess". Please see the Wikipedia definition of .htaccess to learn more about it. According to Wikipedia it is "a directory-level configuration file that allows for decentralized management of web server configuration."

You can probably use such a .htaccess configuration file for your purpose. In our case you want the webserver to parse HTML files like PHP files.

First, create a blank text file and name it ".htaccess". You might ask yourself why the file name starts with a dot. On Unix-like systems this means it is a dot-file is a hidden file.

(Note: If your operating system does not allow file names starting with a dot just name the file "xyz.htaccess" temporarily. As soon as you have uploaded it to your webserver in a later step you can rename the file online to ".htaccess")

Next, open the file with a simple text editor like the "Editor" in MS Windows. Paste the following line into the file:

AddType application/x-httpd-php .html .htm

If this does not work, please remove the line above from your file and paste this alternative line into it, for PHP5:

AddType application/x-httpd-php5 .html .htm

Now upload the .htaccess file to the root directory of your webserver. Make sure that the name of the file is ".htaccess". Your webserver should now parse *.htm and *.html files like PHP files.

You can try if it works by creating a HTML-File like the following. Name it "php-in-html-test.htm", paste the following code into it and upload it to the root directory of your webserver:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
	<HEAD>
	<TITLE>Use PHP in HTML files</TITLE>
	</HEAD>
 
	<BODY>
		<h1>
		<?php echo "It works!"; ?>
		</h1>
	</BODY>
</HTML>
 

Try to open the file in your browser by typing in: http://www.your-domain.com/php-in-html-test.htm (once again, please replace your-domain.com by your own domain...)

If your browser shows the phrase "It works!" everything works fine and you can use PHP in .*html and *.htm files from now on. However, if not, please try to use the alternative line in the .htaccess file as we showed above. If is still does not work please contact your hosting provider.

 https://www.rssinclude.com/blog/36_how_to_run_php_scripts_in_html_or_htm_files

Domain Specific Markup Language Php

How does a DSML help?

Here’s what I want to write:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<steps> <step> Put your left foot in <tests> <test>Left foot is in front of you</test> <test>Balanced on right foot</test> </tests> </step> <step> Take your left foot out <cli> student@server $ out /dev/left-foot </cli> <tests> <test>Left foot is behind you</test> <test>Balanced on right foot</test> </tests> </step> </steps>

This is starting to look like XML, without accidentally becoming XHTML. The joy of my DSML is that I’m writing a language that knows what I mean, not that I want a new layer of quoting rules.

Rewriting Custom Tags into HTML

Let’s start with the easy work, let’s convert the <steps> list and the <step> elements back into <ol> and <li>s. I’m using the QueryPath library. It’s a very similar API to jQuery, and because I do the transform server-side, I can provide well-formed pages to clients without JavaScript (like search engine spiders).

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<?php require 'QueryPath/QueryPath.php'; $qp = htmlqp($dsml_file); //The DSML in the previous code block foreach($qp->find(":root steps > step") as $step){ $content = $step->innerHTML(); $step->replaceWith("<li>" . $content . "</li>"); } foreach($qp->find(":root steps:first") as $elm){ $content = $elm->innerHTML(); $elm->replaceWith("<ol id='tests'>" . $content . "</ol>"); } $qp->writeHTML(); ?>

Adding Application Logic and Error Checking

Of course, nobody’s perfect, so let’s add some rules to catch operator error:

1 2 3 4 5 6 7 8 9

<?php if($qp->find(":root steps")){ //We already translated steps:first into an ol warn("You have more than one <steps> collection."); } if($qp->find(":root step")){ //We already translated any step that is a direct child of steps warn("You have <step> elements outside of the <steps> container."); } ?>

While I’m writing lessons, my warn() function adds bold red error messages to the top of the parsed document. In production, warn() will quietly log them.

Tags that are Smarter than HTML

Those were simple replacements, you can do that with a regular expression and some duck tape. Let’s make this <cli> tag fix my problems with HTML’s <pre>:

• I want to be able to indent the content for easier editing.
• I want the </pre> tag on its own line, without showing the student an empty line at the bottom of the code block.

In other words, I want it to work like this:

1 2 3 4

<li> <pre class='cli'> student@server $ out /dev/left-foot</pre> </li>

But let me edit it like this:

1 2 3 4 5

<li> <cli> student@server $ out /dev/left-foot </cli> </li>

Here’s the code that does it:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<?php foreach($qp->find(":root cli") as $elm){ $content = $elm->innerHTML(); //Accept Windows or Unixy EOL $content_array = preg_split('/(\r\n|\r|\n)/', $content); //Get rid of whitespace on left and right. $content_array = array_map("trim", $content_array); //Get rid of trailing empty lines while(end($content_array) == ""){ array_pop($content_array); } //Reassemble with uniform EOL $content = implode("\r\n", $content_array); $elm->replaceWith("<pre class='console'>" . $content . "</pre>"); } ?>

DSML my Users Care About

In lessons, when we introduce new terms, the student can hover over them to get a Bootstrap Popover that loads the definition from our glossary, dynamically. Here’s how that used to look in our code:

1 2 3

Now edit my.cnf: <pre> $ <abbr href='/glossary/sudoedit'>sudoedit</abbr> /etc/my.cnf</pre>

Here’s how I want it to look:

1 2 3 4

Now edit my.cnf: <cli> $ <explain>sudoedit</explain> /etc/my.cnf </cli>

And here’s how we do it:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<?php function term_to_url($title){ $title = strtolower($title); $title = preg_replace('/[ \t\r\n]+/', '-', $title); $title = preg_replace('/[^a-z0-9\-_]/', '', $title); return $title; } foreach($qp->find(":root explain") as $elm){ $content = $elm->innerHTML(); $url = '/glossary/' . term_to_url($elm->text()); if(file_exists('..' . $url)){ $elm->replaceWith("<abbr href='$url'>" . $content . "</abbr>"); }else{ warn("No glossary entry for $url"); $elm->replaceWith($content); } } ?>

Now we get warnings about terms we haven’t written glossary entries for (and we don’t call attention to them, to avoid embarrassment in front of students). Tagging glossary entries is easier (so we’ll do it more). And we’re free to make dramatic changes to the way we present glossary terms without touching a zillion lesson files. For example:

• We could slipstream in all the definitions into data attributes instead of fetching via AJAX.
• We could paste all the definitions as numbered footnotes on the page.
• We could switch the HTML we emit to the browser to use the <dfn> tag instead of <abbr>.

Now go forth, and HTML no more.

HTML is pretty great, but I wouldn’t want to write in it.

• A DSML can get you closer to your problem domain, not just in code, but in presentation.
• A DSML can free you to write content without bogging you down in implementation details.
• A DSML can even make it easier to develop and update features spread across content.

Original Post:  Jeremy Wadhams Mar 18th, 2013
http://www.wingtiplabs.com/blog/posts/2013/03/18/domain-specific-markup-language/
https://docs.google.com/file/d/0B5nZNPW48dpFUTI1Mi1qZWhVVkE/edit?usp=sharing