// Taken from C# 3.0 Cookbook
public static string GetHtmlFromUri(string resource)
{
string html = string.Empty;
HttpWebRequest req = (HttpWebRequest)WebRequest.Create(resource);
using (HttpWebResponse resp = (HttpWebResponse)req.GetResponse())
{
bool isSuccess = (int)resp.StatusCode < 299 && (int)resp.StatusCode >= 200;
if (isSuccess)
{
using (StreamReader reader = new StreamReader(resp.GetResponseStream()))
{
html = reader.ReadToEnd();
}
}
}
return html;
}
Tag Archive for html
Get HTML from a URI
Página Versão 1 (Software livre)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Software Livre(Página Versão 1)</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body bgcolor="gray" text="navy" link="Silver" vlink="Lime" alink="white"> Software livre Software livre, segundo a definição criada pela Free Software Foundation é qualquer programa de computador que pode ser usado, copiado, estudado e redistribuÃdo sem nenhuma restrição. A liberdade de tais diretrizes é central ao conceito, o qual se opõe ao conceito de software proprietário, mas não ao software que é vendido almejando lucro (software comercial). A maneira usual de distribuição de software livre é anexar a este uma licença de software livre, e tornar o código fonte do programa disponÃvel. Um software é considerado como livre quando atende aos quatro tipos de liberdade para os usuários do software definidas pela Free Software Foundation: a)A liberdade para executar o programa, para qualquer propósito (liberdade nº 0); b)A liberdade de estudar como o programa funciona, e adaptá-lo para as suas necessidades (liberdade nº 1). Acesso ao código-fonte é um pré-requisito para esta liberdade; c)A liberdade de redistribuir, inclusive vender, cópias de modo que você possa ajudar ao seu próximo (liberdade nº 2); d)A liberdade de modificar o programa, e liberar estas modificações, de modo que toda a comunidade se beneficie (liberdade nº 3). Acesso ao código-fonte é um pré-requisito para esta liberdade; </body> </html>
Sliding Div Function
function slideDiv(divId) {
var contDiv = document.getElementById('containing_div');
var divs = contDiv.getElementsByTagName('div');
for (var x = 0; x < divs.length; x++){
if (divs[x].id != divId) {
divs[x].className = "hidden_div";
document.getElementById(divs[x].id+'_link').className = 'not_here';
}
else if (divs[x].id = divId) {
divs[x].className = "visible_div";
document.getElementById(divId+'_link').className = 'here';
}
}
}
WordPress standard HTML layout
<body> <div id="container"> <div id="header"></div><!-- end #header --> <div id="content"> <div id="page/post/section"></div> <!-- end #page/post/section end --> <div id="sidebar"> <div id="sidebar1"></div><!-- end #sidebar1 end --> <div id="sidebar2"></div><!-- end #sidebar2 end --> </div> <!-- end #sidebar --> </div> <!-- end #content --> <div class="clear"></div> <div id="footer"></div> <!-- end #footer --> </div><!-- end #container --> </body>
special characters in html
While many similar lists are available on the Web (run your favorite search engine using "ISO Latin" or "HTML Entities"), none I've seen account for the standard character sets of different operating systems (e.g. Windows vs. DOS vs. Macintosh, etc.); this list should produce the same results on all platforms. Punctuation HTML Entity (case sensitive) ISO Latin-1 code name or meaning – – – en dash — — — em dash ¡ ¡ ¡ inverted exclamation ¿ ¿ ¿ inverted question mark " " " quotation mark “ “ “ left double curly quote †” ” right double curly quote ‘ ‘ ‘ left single curly quote ’ ’ ’ right single curly quote « » « » « » guillemets (European-style quotation marks) (Its there, but you can't see it!)   non-breaking space Symbols & & & ampersand ¢ ¢ ¢ cent © © © copyright ÷ ÷ ÷ divide > > > greater than < < < less than µ µ µ micron · · · middle dot ¶ ¶ ¶ pilcrow (paragraph sign) ± ± ± plus/minus € € € Euro £ £ £ British Pound Sterling ® ® ® registered § § § section â„¢ ™ ™ trademark Â¥ ¥ ¥ Japanese Yen Diacritics á à á Á á Á lower-case "a" with acute accent upper-case "A" with acute accent à À à À à À lower-case "a" with grave accent upper-case "A" with grave accent â Â â  â  lower-case "a" with circumflex upper-case "A" with circumflex Ã¥ Ã… å Å å Å lower-case "a" with ring upper-case "A" with ring ã à ã à ã à lower-case "a" with tilde upper-case "A" with tilde ä Ä ä Ä ä Ä lower-case "a" with diaeresis/umlaut upper-case "A" with diaeresis/umlaut æ Æ æ Æ æ Æ lower-case "ae" ligature upper-case "AE" ligature ç Ç ç Ç ç Ç lower-case "c" with cedilla upper-case "C" with cedilla é É é É é É lower-case "e" with acute accent upper-case "E" with acute accent è È è È è È lower-case "e" with grave accent upper-case "E" with grave accent ê Ê ê Ê ê Ê lower-case "e" with circumflex upper-case "E" with circumflex ë Ë ë Ë ë Ë lower-case "e" with diaeresis/umlaut upper-case "E" with diaeresis/umlaut à à í Í í Í lower-case "i" with acute accent upper-case "I" with acute accent ì ÃŒ ì Ì ì Ì lower-case "i" with grave accent upper-case "I" with grave accent î ÃŽ î Î î Î lower-case "i" with circumflex upper-case "I" with circumflex ï à ï Ï ï Ï lower-case "i" with diaeresis/umlaut upper-case "I" with diaeresis/umlaut ñ Ñ ñ Ñ ñ Ñ lower-case "n" with tilde upper-case "N" with tilde ó Ó ó Ó ó Ó lower-case "o" with acute accent upper-case "O" with acute accent ò Ã’ ò Ò ò Ò lower-case "o" with grave accent upper-case "O" with grave accent ô Ô ô Ô ô Ô lower-case "o" with circumflex upper-case "O" with circumflex ø Ø ø Ø ø Ø lower-case "o" with slash upper-case "O" with slash õ Õ õ Õ õ Õ lower-case "o" with tilde upper-case "O" with tilde ö Ö ö Ö ö Ö lower-case "o" with diaeresis/umlaut upper-case "O" with diaeresis/umlaut ß ß ß ess-tsett ú Ú ú Ú ú Ú lower-case "u" with acute accent upper-case "U" with acute accent ù Ù ù Ù ù Ù lower-case "u" with grave accent upper-case "U" with grave accent û Û û Û û Û lower-case "u" with circumflex upper-case "U" with circumflex ü Ãœ ü Ü ü Ü lower-case "u" with diaeresis/umlaut upper-case "U" with diaeresis/umlaut ÿ ÿ ÿ lower-case "y" with diaeresis/umlaut ´ ` ´ ` acute accent with no letter grave accent/reversed apostrophe with no letter Notes: 1. The " entity was mistakenly omitted from the HTML 3.2 specification. While use of " generates error reports when validating against 3.2, browsers have continued to recognize the entity and its use is generally safe (sticklers may wish to use " instead). The omission has been corrected in the HTML 4.0 specification. 2. The non-breaking space ( or  ) can be used not only to prevent the separation of words by line wraps, but also to force a space equal in size to a keyboard/spacebar space (useful for indentation or wider word separation) or to "hold" space in the empty cell of a table (as in the table above). 3. The middle dot (· or ·) can be used as a bullet and embedded anywhere in text. Because it is equal in size to a period, however, it may be necessary to apply <B> </B> or tags to enhance its graphic effect (use of <FONT SIZE="x"> </FONT> or <BIG> </BIG> elements is not recommended, as these will alter the character's vertical spacing relative to other characters in the same line).
HTML5 Skeleton
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title></title> <link rel="stylesheet" type="text/css" media="screen" href="css/master.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> </body> </html>
Strip HTML using pure Javascript
function stripHTML(string) {
return string.replace(/<(.|
)*?>/g, '');
}
Video For Everybody
<!-- first try native HTML5 video playback --> <video width="640" height="360" controls="controls" autoplay="true"> <source src="__MY_VIDEO__.mp4" type="video/mp4" /> <source src="__MY_VIDEO__.ogv" type="video/ogg" /> <!-- fall back to Flash *do not* include 'classid' so as to be compatible with non-IE browsers --> <object width="640" height="380" type="application/x-shockwave-flash" data="__FLASH_PLAYER__.swf" flashvars="autostart=true&file=__MY_VIDEO__.mp4" > <!-- IE compatibility for the above --> <param name="movie" value="__FLASH_PLAYER__.swf" /> <param name="flashvars" value="autostart=true&file=__MY_VIDEO__.mp4" /> <!-- no Flash? fall back to a QuickTime object iPhone OSv2 will use this file. ensure your MP4 is compatible: <tinyurl.com/qmmss6> IE6 does not allow object-within-object, Flash is the only option. this object tag (with classid) is hidden from non-IE browsers, as it causes a plugin-install prompt to occur even if the plugin is not needed because it's been superseded by HTML5 video --> <!--[if gt IE 6]> <object width="640" height="375" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"> <param name="src" value="__MY_VIDEO__.mp4" /> <param name="autoplay" value="true" /><! [endif]--><!-- the odd line-break above is *required* or QuickTime fallback fails --> <!--[if gt IE 6]><!--> <!-- that self-closing comment after the conditional tag is the only way to reveal the conditional comment to other browsers that is compatible with serving as XHTML (application/xhtml+xml). a normal closing comment marker would be visible in IE7, and other workarounds cause an XML parser error (comment-in-comment) --> <!-- QuickTime height is height+15 to leave room for the controls --> <object width="640" height="375" autoplay="true" type="video/quicktime" data="__MY_VIDEO__.mp4" > <!-- params for Safari/Chrome compatibility (they ignore the attributes above) --> <param name="src" value="__MY_VIDEO__.mp4" /> <param name="autoplay" value="true" /> <!--<![endif]--> <!-- finally, if all else fails, fall back to a warning message: *always* tell the user *what* it is they can't see; give a title or description --> <h3>Video: __TITLE_OF_MY_VIDEO__</h3> <p> <strong>No video playback capabilities detected.</strong> Why not try to download the file instead?<br /> <a href="__MY_VIDEO__.mp4">MPEG4 / H.264 .mp4 (Windows / Mac)</a> | <a href="__MY_VIDEO__.ogv">Ogg Theora & Vorbis .ogv (Linux)</a> </p> <!-- and try to give them genuinely helpful information to rectify the problem --> <p> To play the video here in the webpage, please do one of the following: </p><ul> <li>Upgrade to the latest version of <a href="http://getfirefox.com">Firefox</a>, or <a href="http://apple.com/safari">Safari</a></li> <li>Install <a href="http://get.adobe.com/flashplayer/">Adobe Flash Player</a></li> <li>Install <a href="http://apple.com/quicktime/download/">Apple QuickTime</a></li> </ul> <!--[if gt IE 6]><!--></object><!--<![endif]--> <!--[if gt IE 6]></object><![endif]--> </object> </video>
Category: Uncategorized |
Tags: browser, compatibility, element, flash, html, html5, playback, standards, video
Cut HTML string
<?php
/*
In PHP, it is easy to extract an excerpt of a text string with a given length limit. But if you want to extract an excerpt from HTML, the tags that may exist in the text string make it more complicated.
This class provides a solution to extract excerpts from HTML documents with a given text length limit without counting the length of any HTML tags.
*/
// Author prajwala
// email  m.prajwala@gmail.com
// Date   12/04/2009
// version 1.0
class HtmlCutString{
  function __construct($string, $limit){
    // create dom element using the html string
    $this->tempDiv = new DomDocument;
    $this->tempDiv->loadXML('<div>'.$string.'</div>');
    // keep the characters count till now
    $this->charCount = 0;
    $this->encoding = 'UTF-8';
    // character limit need to check
    $this->limit = $limit;
  }
  function cut(){
    // create empty document to store new html
    $this->newDiv = new DomDocument;
    // cut the string by parsing through each element
    $this->searchEnd($this->tempDiv->documentElement,$this->newDiv);
    $newhtml = $this->newDiv->saveHTML();
    return $newhtml;
  }
  function deleteChildren($node) {
    while (isset($node->firstChild)) {
      $this->deleteChildren($node->firstChild);
      $node->removeChild($node->firstChild);
    }
  }Â
  function searchEnd($parseDiv, $newParent){
    foreach($parseDiv->childNodes as $ele){
    // not text node
    if($ele->nodeType != 3){
      $newEle = $this->newDiv->importNode($ele,true);
      if(count($ele->childNodes) === 0){
        $newParent->appendChild($newEle);
        continue;
      }
      $this->deleteChildren($newEle);
      $newParent->appendChild($newEle);
        $res = $this->searchEnd($ele,$newEle);
        if($res)
        return $res;
        else{
        continue;
        }
    }
    // the limit of the char count reached
    if(mb_strlen($ele->nodeValue,$this->encoding)  $this->charCount >= $this->limit){
      $newEle = $this->newDiv->importNode($ele);
        $newEle->nodeValue = substr($newEle->nodeValue,0, $this->limit - $this->charCount);
        $newParent->appendChild($newEle);
        return true;
    }
    $newEle = $this->newDiv->importNode($ele);
    $newParent->appendChild($newEle);
    $this->charCount = mb_strlen($newEle->nodeValue,$this->encoding);
    }
    return false;
  }
}
function cut_html_string($string, $limit){
  $output = new HtmlCutString($string, $limit);
  return $output->cut();
}
?>
Easy Margin Helper Classes
/******* Margin Helpers *******/
/* Margin-All */
.m-0 { margin: 0px; } .m-5 { margin: 5px; } .m-10 { margin: 10px; } .m-15 { margin: 15px; } .m-20 { margin: 20px; } .m-25 { margin: 25px; } .m-30 { margin: 30px; } .m-35 { margin: 35px; }
/* Margin-left */
.ml-3 { margin-left: 3px; } .ml-5 { margin-left: 5px; } .ml-10 { margin-left: 10px; } .ml-15 { margin-left: 15px; } .ml-20 { margin-left: 20px; } .ml-25 { margin-left: 25px; } .ml-30 { margin-left: 30px; }
/* Margin-right */
.mr-3 { margin-right: 3px; } .mr-5 { margin-right: 5px; } .mr-10 { margin-right: 10px; } .mr-15 { margin-right: 15px; } .mr-20 { margin-right: 20px; } .mr-25 { margin-right: 25px; } .mr-30 { margin-right: 30px; }
/* Margin-Horizontal */
.mh-5 { margin-left: 5px; margin-right: 5px; } .mh-10 { margin-left: 10px; margin-right: 10px; } .mh-15 { margin-left: 15px; margin-right: 15px; } .mh-20 { margin-left: 20px; margin-right: 20px; } .mh-25 { margin-left: 25px; margin-right: 25px; } .mh-30 { margin-left: 30px; margin-right: 30px }
/* Margin Vertical */
.mv-5 { margin: 5px 0; } .mv-10 { margin: 10px 0; } .mv-15 { margin: 15px 0; } .mv-20 { margin: 20px 0; } .mv-25 { margin: 25px 0px; } .mv-25 { margin:30px 0; }
/* Margin-bottom */
.mt-3 { margin-bottom: 3px; } .mt-5 { margin-bottom: 5px; } .mt-10 { margin-bottom: 10px; } .mt-15 { margin-bottom: 15px; } .mt-20 { margin-bottom: 20px; } .mt-25 { margin-bottom: 25px; } .mt-30 { margin-bottom: 30px; }
/* Margin-bottom */
.mb-3 { margin-bottom: 3px; } .mb-5 { margin-bottom: 5px; } .mb-10 { margin-bottom: 10px; } .mb-15 { margin-bottom: 15px; } .mb-20 { margin-bottom: 20px; } .mb-25 { margin-bottom: 25px; } .mb-30 { margin-bottom: 30px; }