In [1]:
import numpy as np
import matplotlib.pyplot as plt
from random import randint
from scipy import integrate
import os

In [2]:
from bs4 import BeautifulSoup # For HTML parsing
import urllib2 # Website connections
import re # Regular expressions
from time import sleep # To prevent overwhelming the server between connections
from collections import Counter # Keep track of our term counts
from nltk.corpus import stopwords # Filter out stopwords, such as 'the', 'or', 'and'
import pandas as pd # For converting results to a dataframe and bar chart plots
%matplotlib inline

In [3]:
print os.getcwd()


C:\Users\Student\Desktop\notebooks

My purpose in this notebook is to learn the basics of HTML.


In [7]:
%%file test.html
<img src="http://edu.iiiedu.org.tw/moodle/theme/EduMoodle/slideshow/images/1.gif">


Writing test.html

In [59]:
f=open("test.html",'r')
test=f.read()
soup = BeautifulSoup(test,"html.parser")

In [10]:
%%file listStd.css
.menu1{list-style-type:lower-roman;list-style-position:inside;}


Overwriting listStd.css

In [13]:
%%file test.html
<!DOCTYPE html>
<html lang="zh-tw">
    <head>
        <meta charset="utf-8">
        <meta name="generator" content="ipython...">
        <!--meta http-equiv="Refresh" content="1;URL=page_second.html">-->
        <title> this is the title of my first website. </title>
        <style>
            @import url("listStd.css");
        </style>
    </head>
    <body>
        <!--<img src="http://edu.iiiedu.org.tw/moodle/theme/EduMoodle/slideshow/images/1.gif">-->
        <h2 style="color:red;font_size:40px;"> the font here should be large and in red. </h2>
        <h1>h1</h1>
        <!--<h2>h2</h2>-->
        <!--<h3>h3</h3>-->
        <!--<h4>h4</h4>-->
        <!--<h5>h5</h5>-->
        <h6>h6</h6>
        
        <ul>
            <li>宋詞</li> 
                <ol class="menu1">
                    <li>歐陽修</li>
                    <li>李清照</li>
                        <ul>
                            <li>123菩薩蠻</li>
                            <li>123一翦梅</li>
                        </ul>
                </ol>            
            </li>
            <li> 元曲</li>
            <li> 唐詩</li>
        </ul>

        <br>
        <hr>
        <br>
        <dl>
            <dt>coffee</dt>
            <dd>black hot drink</dd>
            <dt>milk</dt>
            <dd>white cold drink</dd>
        </dl>
        <p>More than five hours of previously unreleased interviews with 
            Donald Trump have been released to the New York Times. What do
            the tapes tell us?</p>
        <p>The interviews, which were carried out by journalist Michael D
              'Antonio in 2014, were one of the last extensive conversations
               Mr Trump had with anyone in the media before he ran for president. </p>
    </body>
</html>


Overwriting test.html

In [89]:
%%file page_second.html
<!DOCTYPE html>
<html lang="zh-tw">
    <head>
        <meta charset="utf-8">
        <meta name="generator" content="ipython...">
        <!--<meta http-equiv="Refresh" content="1;URL=first_site.html">-->
        <title> this is the title of my second page. </title>
    </head>
    
    <body>
        <h2 style="color:red;font_size:40px;"> this is my second page. </h2>
    </body>

</html>


Overwriting page_second.html

In [168]:
%%file std.css
h2{text-decoration:underline;color:blue;border:1px solid red;hight:500}
.stblue{color:blue;text-transform:capitalize}
#stpurple{color:purple;text-transform:capitalize}


Overwriting std.css

In [30]:
%%file test.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="generator" content="ipython...">
        <!--<meta http-equiv="Refresh" content="1;URL=first_site.html">-->
        <title>test_site</title>
        <style>
            @import url("std.css");
            h3{text-decoration:underline;color:green;border:1px dashed orange}
            a:link{color:yellow;font-size:150%}
            a:visited{color:blue;font-size:200%}
            a:hover{color:green;font-size:250%}
            a:active{color:purple;font-size:300%}
            
            *{margin:0}
            p{clear:both}
            img{border:3px solid;margin:20px;padding:5px 10px 15px 20px;float:right}
        </style>
        
    </head>
    
    <body>
        <h2>this line uses the h2 style</h2>
        <h3>this line uses the h3 style</h3>
        <h4 class="stblue">this line uses the h4 style (style chosen from the class)</h4>
        <h4 id="stpurple">this line uses the h4 style (style is chosen from the id)</h4>
        <hr>
        <a href="http://wengscafe.de" style="background-color:yellow;font-size:40px">my blog </a>
        <br>
        <a href="mailto:chi-hung.weng@gmx.de"> my email </a>
        <br>
        <a href="#bookmark01"> a bookmark </a>
        <hr>
        <img src="https://wengscafe.files.wordpress.com/2016/09/ldos-daah-n99-lambda0to4.gif?w=1700&h=1276" alt="animation unavailable" title="animation" width=300>
        <img src="https://wengscafe.files.wordpress.com/2016/09/ldos-daah-n99-lambda0to4.gif?w=1700&h=1276" alt="animation unavailable" title="animation" width=300>
        <div>
            <p id="bookmark01"><span style="color:purple;font-size:200%;font-family: times, serif; font-size:14pt; font-style:italic">When Mr Trump</span> is pushed on why he is "always in the present" he tells the journalist: "The problem people have with me is that I'm not in the past, I'm a person that thinks to the future.
            "I learn from the past but I don't focus on the past, which I think is a very important lesson," he says, before adding that he "doesn't reflect and he doesn't want anyone else to". 
            In another interview he says: "I don't like to analyse myself because I might not like what I see."</p>
        </div>
        <div>
            <p>"I was a very rebellious kind of person," Mr Trump says about his childhood in Queens, New York. "I don't like to talk about it, actually. But I was a very rebellious person and very set in my ways.
            "I loved to fight. I always loved to fight," he says, before adding: "All types of fights. Any kind of fight, I loved it, including physical."</p>        
        </div>
        
        <hr>
        <a href="http://wengscafe.de"><img src="https://wengscafe.files.wordpress.com/2016/09/ldos-daah-n99-lambda0to4.gif?w=1700&h=1276" alt="animation unavailable" title="animation" width=300></a>
        <hr>
        <img src="https://wengscafe.files.wordpress.com/2016/09/cropped-234.jpg" alt="animation unavailable" title="a picture" width=100>
        <img src="https://wengscafe.files.wordpress.com/2016/09/cropped-234.jpg" alt="animation unavailable" title="a picture" width=100>
        <hr>
        <figure>
            <img src="https://wengscafe.files.wordpress.com/2016/09/cropped-234.jpg" alt="animation unavailable" title="a picture" width=100>
            <img src="https://wengscafe.files.wordpress.com/2016/09/cropped-234.jpg" alt="animation unavailable" title="a picture" width=100>
            <figcaption>Taiwan</figcaption>
        </figure>
        <hr>
        <a href="http://wengscafe.de">my blog </a>
        <br>
        <br>
        <a href="#bookmark01"> a bookmark </a>
    </body>

</html>


Overwriting test.html

In [86]:
soup = BeautifulSoup(test_html,"html.parser")

In [87]:
print soup.prettify()


<!DOCTYPE html>
<html lang="zh-tw">
 <head>
  <meta charset="utf-8">
   <meta content="ipython..." name="generator">
    <meta content="1;URL=first_site.html" http-equiv="Refresh">
     <title>
      test_hyperlink
     </title>
    </meta>
   </meta>
  </meta>
 </head>
 <body>
  <a href="http://wengscafe.de" style="background-color:yellow;font_size:40px">
   my blog
  </a>
  <br>
   <a href="mailto:chi-hung.weng@gmx.de">
    my email
   </a>
   <br>
    <a href="#bookmark01">
     a bookmark
    </a>
    <hr>
     <div>
      <p id="bookmark01">
       When Mr Trump is pushed on why he is "always in the present" he tells the journalist: "The problem people have with me is that I'm not in the past, I'm a person that thinks to the future.
            "I learn from the past but I don't focus on the past, which I think is a very important lesson," he says, before adding that he "doesn't reflect and he doesn't want anyone else to". 
            In another interview he says: "I don't like to analyse myself because I might not like what I see."
      </p>
     </div>
     <div>
      <p>
       "I was a very rebellious kind of person," Mr Trump says about his childhood in Queens, New York. "I don't like to talk about it, actually. But I was a very rebellious person and very set in my ways.
            "I loved to fight. I always loved to fight," he says, before adding: "All types of fights. Any kind of fight, I loved it, including physical."
      </p>
     </div>
    </hr>
   </br>
  </br>
 </body>
</html>


In [ ]:


In [132]:
%%file testFloat.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="generator" content="ipython...">
        <title>test_site</title>
        <style>
            @font-face{font-family:GermanFont;src:url("/fonts/FlutedGermanica.ttf")}
            *{margin:0}
            <--p{clear:both}-->
            h2{text-align: center;font-family:GermanFont}
            figure{border:1px solid transparent;padding:0px 0px 10px 0px;float:left;margin:10px}
            figcaption{width: 300px;font-size:80%;text-align: center; font-style:italic}
            .fistChar{color:purple;font-size:150%;font-family: times, serif; font-style:italic;font-weight:bold}
            .styDivBody{margin:20px auto}
            .styP{margin:10px}

        </style>
        
    </head>
    
    <body>
        <div class="styDivBody">        
            <h2>US election: What Trump interviews with biographer tell us</h2>

            <figure>
                <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSR_d47JOgha61YVMKDjPmcdNZglJ-eJKv-AzQIZ4rHVk_-lJn7fQ" title="Mr. Trump" width=300>
                <figcaption>Mr. Trump</figcaption>
            </figure>

            <p class="styP"><span class="fistChar">When Mr Trump</span> is pushed on why he is "always in the present" he tells the journalist: "The problem people have with me is that I'm not in the past, I'm a person that thinks to the future.
            "I learn from the past but I don't focus on the past, which I think is a very important lesson," he says, before adding that he "doesn't reflect and he doesn't want anyone else to". 
            In another interview he says: "I don't like to analyse myself because I might not like what I see."
            </p>
            <p class="styP">"I was a very rebellious kind of person," Mr Trump says about his childhood in Queens, New York. "I don't like to talk about it, actually. But I was a very rebellious person and very set in my ways.
            "I loved to fight. I always loved to fight," he says, before adding: "All types of fights. Any kind of fight, I loved it, including physical."
            </p>
            <p class="styP">On seeing his name in print for the first time (when he hit a home run as a promising young baseball player), he says: "Seeing my name in print felt good, it was very interesting."
            </p>
            </p>
            <p class="styP">As part of his research, Mr D'Antonio also spoke to Mr Trump's ex-wife Ivana. She told him a story about a skiing trip they took in Colorado soon after they began dating.
            </p>
            </p>
            <p class="styP">Mr Trump, who was unaware that Ivana was a confident skier, went down a slope and called for his girlfriend to follow him, saying: "Come on, baby. Come on, baby."
            </p>
        </div>
    </body>

</html>


Overwriting testFloat.html

reconstruct the structure using the html5 format:


In [19]:
%%file testFloat.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="generator" content="ipython...">
        <title>test_site</title>
        <style>
            @font-face{font-family:GermanFont;src:url("/fonts/FlutedGermanica.ttf")}
            *{margin:0}
            <--p{clear:both}-->
            h2{text-align: center;font-family:GermanFont}
            figure{border:1px solid transparent;padding:0px 0px 10px 0px;float:left;margin:10px}
            figcaption{width: 300px;font-size:80%;text-align: center; font-style:italic}
            .fistChar{color:purple;font-size:150%;font-family: times, serif; font-style:italic;font-weight:bold}
            .styDivBody{margin:20px auto}
            .styP{margin:10px}
            article{margin:20px auto;display:block;}
        </style>
        <script>
            document.createElement("article");
        </script>
    </head>
    
    <body>
        <article>        
            <h2>US election: What Trump interviews with biographer tell us</h2>

            <figure>
                <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSR_d47JOgha61YVMKDjPmcdNZglJ-eJKv-AzQIZ4rHVk_-lJn7fQ" title="Mr. Trump" width=300>
                <figcaption>Mr. Trump</figcaption>
            </figure>

            <p class="styP"><span class="fistChar">When Mr Trump</span> is pushed on why he is "always in the present" he tells the journalist: "The problem people have with me is that I'm not in the past, I'm a person that thinks to the future.
            "I learn from the past but I don't focus on the past, which I think is a very important lesson," he says, before adding that he "doesn't reflect and he doesn't want anyone else to". 
            In another interview he says: "I don't like to analyse myself because I might not like what I see."
            </p>
            <p class="styP">"I was a very rebellious kind of person," Mr Trump says about his childhood in Queens, New York. "I don't like to talk about it, actually. But I was a very rebellious person and very set in my ways.
            "I loved to fight. I always loved to fight," he says, before adding: "All types of fights. Any kind of fight, I loved it, including physical."
            </p>
            <p class="styP">On seeing his name in print for the first time (when he hit a home run as a promising young baseball player), he says: "Seeing my name in print felt good, it was very interesting."
            </p>
            </p>
            <p class="styP">As part of his research, Mr D'Antonio also spoke to Mr Trump's ex-wife Ivana. She told him a story about a skiing trip they took in Colorado soon after they began dating.
            </p>
            </p>
            <p class="styP">Mr Trump, who was unaware that Ivana was a confident skier, went down a slope and called for his girlfriend to follow him, saying: "Come on, baby. Come on, baby."
            </p>
        </article>
    </body>

</html>


Overwriting testFloat.html

In [104]:
%%file testTable.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="icon" href="favicon.ico" type="ico/image">
        <meta name="generator" content="ipython...">
        <title>test_site</title>
        <style>
            @font-face{font-family:GermanFont;src:url("fonts/FlutedGermanica.ttf")}
            <--*{margin:0}-->
            <--p{clear:both}-->
            h2{text-align: center;font-family:GermanFont}
            figure{border:1px solid transparent;padding:0px 0px 10px 0px;float:left;margin:10px}
            figcaption{width: 300px;font-size:80%;text-align: center; font-style:italic}
            .fistChar{color:purple;font-size:150%;font-family: times, serif; font-style:italic;font-weight:bold}
            .styDivBody{margin:20px auto}
            .styP{margin:10px}
            table{border-collapse:collapse;width:500px;border:3px solid gray}
            tr,td{border-collapse:collapse;border:2px solid gray}
            thead{background-color:yellow;text-align:center;font-family:GermanFont;}
            tbody{background-color:#E0F8F1;text-align:center}
            tbody td:nth-child(2n){background-color:#00CACA}
            tbody td:nth-child(2n+1){background-color:#81DAF5}
                                     
            .styDiv{width:500px;padding-bottom:10px;margin:5x}
            .styButton{width:500px;text-align:center;}
            .styLabel{font-family:GermanFont;width:100px;float:left;text-align:right;padding-right:3px}
            fieldset{width:500px;margin:15px;border-radius:15px;border:1px dashed #A5DF00}
        </style>
        
    </head>
    
    <body>
        <table>
            <caption><h3>A Wierd Calendar</h3></caption>
            <thead>
                <tr>
                    <th>Mon</th>
                    <th>Tue</th>
                    <th>Wed</th>
                    <th>Thu</th>
                    <th>Fri</th>
                    <th>Sat</th>
                    <th>Sun</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                    <td>7</td>
                </tr>
                <tr>
                    <td>8</td>
                    <td>9</td>
                    <td>10</td>
                    <td>11</td>
                    <td>12</td>
                    <td>13</td>
                    <td>14</td>
                </tr>
                <tr>
                    <td>15</td>
                    <td>16</td>
                    <td>17</td>
                    <td>18</td>
                    <td>19</td>
                    <td>20</td>
                    <td>21</td>
                </tr>
                <tr>
                    <td>22</td>
                    <td>23</td>
                    <td>24</td>
                    <td>25</td>
                    <td>26</td>
                    <td>27</td>
                    <td>28</td>
                </tr>
                <tr>
                    <td>29</td>
                    <td>30</td>
                    <td colspan='5'>31</td>
                </tr>
                
            </tbody>
        </table>
                                     
        <h3>how to put a word in the center of the box?</h3>
        <div style="width:300px;height:200px;border:1px solid red;text-align:center;line-height:200px"> text here </div>
        <br>                       
        <div style="width:500px;height:300px;border:1px solid red;padding-bottom:30px;padding-top:30px"> text here </div>
        <hr>

        <form action=# method="post">
        <fieldset>
            <legend style="font-family:GermanFont"> fill out this form <em>(important!)</em></legend>
            <div class="styDiv">
                <label for="Name" class="styLabel">name:</label>
                <!--<input type="text" id="Name" name="account" value="guest" >-->
                <input type="text" id="Name" name="account" placeholder="guest" autofocus>
            </div>
            <div class="styDiv">
                <label for="Kenntwort" class="styLabel">password:</label>
                <input type="password" id="Kenntwort" name="passwd" maxlength="8">
            </div>
        </fieldset>
                     
        <fieldset>
            <legend style="font-family:GermanFont"> you live on earth, right?</legend>
            <div class="styDiv">
                <select name="Wohnsitz" multiple>
                    <option value="tpe" Style="font-family:GermanFont">Taipei City</option>
                    <option value="newtpe"  Style="font-family:GermanFont">New Taipei City</option>
                    <option value="tainan"  Style="font-family:GermanFont">Tainan</option>
                    <option value="tainan"  Style="font-family:GermanFont" selected>Outer Space</option>
                </select>
            </div>
                     
            <div class="styDiv">
                <label for="date" Style="font-family:GermanFont">date:</label>
                <input type="date" id="date" name="date" maxlength="8">
            </div>
                     
            <div class="styDiv">
                <label for="number" Style="font-family:GermanFont">number:</label>
                <input type="number" id="number" name="number" min="-100">
            </div>
                     
            <div class="styDiv">
                <label for="homepage" Style="font-family:GermanFont">homepage:</label>
                <input type="url" list=hpurls name="hp" id="homepage">
                <datalist id="hpurls">
                     <option value="http://www.google.de">
                     <option value="http://bbc.co.uk">
                     <option value="http://www.fju.edu.tw">
            </div>

            <div class="styDiv">
                <label for="twID" Style="font-family:GermanFont">Taiwanese ID Number:</label>
                <input type="text" name="twID" id="twID" pattern="[a-zA-Z][1-2]\d{8}">
            </div>

        </fieldset>
                     
        
       <fieldset>
            <legend style="font-family:GermanFont">optional</legend>
            <div class="styDiv">

                <input type="radio" name="gender" value="male" id="male">
                <label for="male" Style="font-family:GermanFont">male</label>

                <input type="radio" name="gender" value="female" id="female">
                <label for="female" Style="font-family:GermanFont">female</label>

                <input type="radio" name="gender" value="neutral" id="neutral">
                <label for="neutral" Style="font-family:GermanFont">neutral</label>
            </div>

            <div class="styDiv">
                <label for="memo" class="styLabel">suggestions:</label>
                <textarea cols="40" rows="5" id="memo" name="memo"></textarea>
            </div>
            <div class="styButton">
                <input type="submit" value="sent out">
                <input type="reset" value="clear">
            </div>
       </fieldset>
       
                     
                     
       <iframe src="https://wengscafe.de/" width="600" height="450" frameborder="0" style="border:0 allowfullscreen"></iframe>               
       <figure>
           <code Style="border:1px"> 
               for j in range(10):print j
               <br>
               map(lambda x: x * 2 + 10, foo)
           </code>         
       </figure>
    </body>
</html>


Overwriting testTable.html

In [138]:
%%html
<!--%%file testHomepage.html-->
<!DOCTYPE html>
<html lang="zh-tw">
    <head>
        <meta charset="utf-8">
        <link rel="icon" href="favicon.ico" type="ico/image">
        <meta name="generator" content="ipython...">
        <title>test_site</title>
        <style>
            @font-face{font-family:GermanFont;src:url("fonts/FlutedGermanica.ttf")}
            *{margin:0;padding:0;font-size:100%}
            article{float:left;background-color:yellow;width:800px}
            aside{float:right;background-color:pink;width:220px;}
            footer{clear:both;text-align:center;background-color:#81DAF5;width:100%;line-height:2.5em;border-bottom-left-radius:15px;border-bottom-right-radius:15px}
            .title{padding-left:20px;line-height:2.5em;background-color:#0066cc}

            h2{text-align: center;font-family:GermanFont}
                                     
            .styDiv{width:500px;padding-bottom:10px;margin:5x}
            .styButton{width:500px;text-align:center;}
            .styLabel{font-family:GermanFont;width:100px;float:left;text-align:right;padding-right:3px}
            fieldset{width:500px;margin:15px;border-radius:15px;border:1px dashed #A5DF00}
            body{font-size:75%;background-color:#ffffff}
            <!--#content{overflow:auto} -->
            #allPages{width:1024px;margin:0 auto}
            #main{font-family: Microsoft JhengHei;font-weight:bold;overflow:auto;background-color:#81DAF5;border-top-right-radius:15px;border-top-left-radius:15px;border-bottom:3px solid #CEF6F5}
            #main li{float:left;list-style-type:none;border-right:0px solid #cccccc;width:7em;text-align:center}
            #main li a:hover{color:#ff6666;background-color:#82FA58}
            #main li a{display:block;width:100%;line-height:2.5em;color:#333333;text-decoration:none}
            
        </style>
        
    </head>

    <body>
        <div id="allPages">
        <header>
        <nav>
            <ul id="main">
                <li><a href="testHomepage.html">回首頁</a></li>
                <li><a href="testFormpage.html">表單練習</a></li>
                <li><a href="http://wengscafe.de/">訂單洽詢</a></li>
                <li><a href="http://wengscafe.de/">公司簡介</a></li>
                <li><a href="http://wengscafe.de/">聯繫我們</a></li>
            </ul>
        </nav>
        <img src="taitung.jpg">
        </header>

        <div id="content">
                   
        <article>        
            <h2 class="title">US election: What Trump interviews with biographer tell us</h2>

            <figure>
                <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSR_d47JOgha61YVMKDjPmcdNZglJ-eJKv-AzQIZ4rHVk_-lJn7fQ" title="Mr. Trump" width=300>
                <figcaption>Mr. Trump</figcaption>
            </figure>

            <p class="styP"><span class="fistChar">When Mr Trump</span> is pushed on why he is "always in the present" he tells the journalist: "The problem people have with me is that I'm not in the past, I'm a person that thinks to the future.
            "I learn from the past but I don't focus on the past, which I think is a very important lesson," he says, before adding that he "doesn't reflect and he doesn't want anyone else to". 
            In another interview he says: "I don't like to analyse myself because I might not like what I see."
            </p>
            <p class="styP">"I was a very rebellious kind of person," Mr Trump says about his childhood in Queens, New York. "I don't like to talk about it, actually. But I was a very rebellious person and very set in my ways.
            "I loved to fight. I always loved to fight," he says, before adding: "All types of fights. Any kind of fight, I loved it, including physical."
            </p>
            <p class="styP">On seeing his name in print for the first time (when he hit a home run as a promising young baseball player), he says: "Seeing my name in print felt good, it was very interesting."
            </p>
            </p>
            <p class="styP">As part of his research, Mr D'Antonio also spoke to Mr Trump's ex-wife Ivana. She told him a story about a skiing trip they took in Colorado soon after they began dating.
            </p>
            </p>
            <p class="styP">Mr Trump, who was unaware that Ivana was a confident skier, went down a slope and called for his girlfriend to follow him, saying: "Come on, baby. Come on, baby."
            </p>
        </article>
                   
            <aside>
                   <h2 class="title">test block</h2>
                   <dl>
                       <dt>123</dt>
                       <dd>456</dd>
                   </dl>
                   <dl>
                       <dt>123</dt>
                       <dd>456</dd>
                   </dl>
                   <dl>
                       <dt>123</dt>
                       <dd>456</dd>
                   </dl>
                   <dl>
                       <dt>123</dt>
                       <dd>456</dd>
                   </dl>
            </aside>
        </div>

        <footer>
            <p Style="font-family:GermanFont"> Last update: 31.10.2016 &nbsp; &copy; no rights reserved</p>
        </footer>
                 
        </div>
                 
                 
                
    </body>
</html>


test_site

US election: What Trump interviews with biographer tell us

Mr. Trump

When Mr Trump is pushed on why he is "always in the present" he tells the journalist: "The problem people have with me is that I'm not in the past, I'm a person that thinks to the future. "I learn from the past but I don't focus on the past, which I think is a very important lesson," he says, before adding that he "doesn't reflect and he doesn't want anyone else to". In another interview he says: "I don't like to analyse myself because I might not like what I see."

"I was a very rebellious kind of person," Mr Trump says about his childhood in Queens, New York. "I don't like to talk about it, actually. But I was a very rebellious person and very set in my ways. "I loved to fight. I always loved to fight," he says, before adding: "All types of fights. Any kind of fight, I loved it, including physical."

On seeing his name in print for the first time (when he hit a home run as a promising young baseball player), he says: "Seeing my name in print felt good, it was very interesting."

As part of his research, Mr D'Antonio also spoke to Mr Trump's ex-wife Ivana. She told him a story about a skiing trip they took in Colorado soon after they began dating.

Mr Trump, who was unaware that Ivana was a confident skier, went down a slope and called for his girlfriend to follow him, saying: "Come on, baby. Come on, baby."

Last update: 31.10.2016   © no rights reserved


In [149]:
%%html
<!--%%file testFormpage.html-->
<!DOCTYPE html>
<html lang="zh-tw">
    <head>
        <meta charset="utf-8">
        <link rel="icon" href="favicon.ico" type="ico/image">
        <meta name="generator" content="ipython...">
        <title>test_site</title>
        <style>
            @font-face{font-family:GermanFont;src:url("fonts/FlutedGermanica.ttf")}
            *{margin:0;padding:0;font-size:100%}
            article{float:left;background-color:yellow;width:800px}
            aside{float:right;background-color:pink;width:220px;}
            footer{clear:both;text-align:center;background-color:#81DAF5;width:100%;line-height:2.5em;border-bottom-left-radius:15px;border-bottom-right-radius:15px}
            .title{padding-left:20px;line-height:2.5em;background-color:#0066cc}

            h2{text-align: center;font-family:GermanFont}
                                     
            .styDiv{width:500px;padding-bottom:10px;margin:5x}
            .styButton{width:500px;text-align:center;}
            .styLabel{font-family:GermanFont;width:100px;float:left;text-align:right;padding-right:3px}
            fieldset{width:500px;margin:15px;border-radius:15px;border:1px dashed #A5DF00}
            body{font-size:75%;background-color:#ffffff}
            <!--#content{overflow:auto} -->
            #allPages{width:1024px;margin:0 auto}
            #main{font-family: Microsoft JhengHei;font-weight:bold;overflow:auto;background-color:#81DAF5;border-top-right-radius:15px;border-top-left-radius:15px;border-bottom:3px solid #CEF6F5}
            #main li{float:left;list-style-type:none;border-right:0px solid #cccccc;width:7em;text-align:center}
            #main li a:hover{color:#ff6666;background-color:#82FA58}
            #main li a{display:block;width:100%;line-height:2.5em;color:#333333;text-decoration:none}
            
        </style>
        
    </head>

    <body>
        <div id="allPages">
        <header>
        <nav>
            <ul id="main">
                <li><a href="testHomepage.html">回首頁</a></li>
                <li><a href="testFormpage.html">表單練習</a></li>
                <li><a href="http://wengscafe.de/">訂單洽詢</a></li>
                <li><a href="http://wengscafe.de/">公司簡介</a></li>
                <li><a href="http://wengscafe.de/">聯繫我們</a></li>
            </ul>
        </nav>
        <img src="taitung.jpg">
        </header>

        <div id="content">
                   
        <article>        
            <h2 class="title">Form page exercise:</h2>

                    <form action=# method="post">
        <fieldset>
            <legend style="font-family:GermanFont"> fill out this form <em>(important!)</em></legend>
            <div class="styDiv">
                <label for="Name" class="styLabel">name:</label>
                <!--<input type="text" id="Name" name="account" value="guest" >-->
                <input type="text" id="Name" name="account" placeholder="guest" autofocus>
            </div>
            <div class="styDiv">
                <label for="Kenntwort" class="styLabel">password:</label>
                <input type="password" id="Kenntwort" name="passwd" maxlength="8">
            </div>
        </fieldset>
                     
        <fieldset>
            <legend style="font-family:GermanFont"> you live on earth, right?</legend>
            <div class="styDiv">
                <select name="Wohnsitz" multiple>
                    <option value="tpe" Style="font-family:GermanFont">Taipei City</option>
                    <option value="newtpe"  Style="font-family:GermanFont">New Taipei City</option>
                    <option value="tainan"  Style="font-family:GermanFont">Tainan</option>
                    <option value="tainan"  Style="font-family:GermanFont" selected>Outer Space</option>
                </select>
            </div>
                     
            <div class="styDiv">
                <label for="date" Style="font-family:GermanFont">date:</label>
                <input type="date" id="date" name="date" maxlength="8">
            </div>
                     
            <div class="styDiv">
                <label for="number" Style="font-family:GermanFont">number:</label>
                <input type="number" id="number" name="number" min="-100">
            </div>
                     
            <div class="styDiv">
                <label for="homepage" Style="font-family:GermanFont">homepage:</label>
                <input type="url" list=hpurls name="hp" id="homepage">
                <datalist id="hpurls">
                     <option value="http://www.google.de">
                     <option value="http://bbc.co.uk">
                     <option value="http://www.fju.edu.tw">
            </div>

            <div class="styDiv">
                <label for="twID" Style="font-family:GermanFont">Taiwanese ID Number:</label>
                <input type="text" name="twID" id="twID" pattern="[a-zA-Z][1-2]\d{8}">
            </div>

        </fieldset>
                     
        
       <fieldset>
            <legend style="font-family:GermanFont">optional</legend>
            <div class="styDiv">

                <input type="radio" name="gender" value="male" id="male">
                <label for="male" Style="font-family:GermanFont">male</label>

                <input type="radio" name="gender" value="female" id="female">
                <label for="female" Style="font-family:GermanFont">female</label>

                <input type="radio" name="gender" value="neutral" id="neutral">
                <label for="neutral" Style="font-family:GermanFont">neutral</label>
            </div>

            <div class="styDiv">
                <label for="memo" class="styLabel">suggestions:</label>
                <textarea cols="40" rows="5" id="memo" name="memo"></textarea>
            </div>
            <div class="styButton">
                <input type="submit" value="sent out">
                <input type="reset" value="clear">
            </div>
       </fieldset>
        </article>
                   
            <aside>
                   <h2 class="title">test block</h2>
                   <dl>
                       <dt>123</dt>
                       <dd>456</dd>
                   </dl>
                   <dl>
                       <dt>123</dt>
                       <dd>456</dd>
                   </dl>
                   <dl>
                       <dt>123</dt>
                       <dd>456</dd>
                   </dl>
                   <dl>
                       <dt>123</dt>
                       <dd>456</dd>
                   </dl>
            </aside>
        </div>

        <footer>
            <p Style="font-family:GermanFont"> Last update: 31.10.2016 &nbsp; &copy; no rights reserved</p>
        </footer>
                 
        </div>
                 
                 
                
    </body>
</html>


test_site

Form page exercise:

fill out this form (important!)
you live on earth, right?
optional

Last update: 31.10.2016   © no rights reserved

Javascript

21.11.2016

function and variable


In [158]:
%%file exercise.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>exercise.html</title>
    <script>
        var a
        document.write("a=", a, "<br>")
        a=123
        document.write("a=", a, "<br>")
        a = "this is a string"
        document.write("a=", a, "<br>")
        document.write("a=", typeof a, "<br>")

        document.write("<br>")

        car = new Object()
        car.color = "yellow"
        car.brand = "Mitsubishi"
        document.write("car color=", car.color, "<br>","car brand=",car.brand, "<br>")

        document.write("<br>")

        alcohol = { vodka: "strong", beer: "juice like" }
        document.write("vodka=", alcohol["vodka"], "<br>", "beer=", alcohol["beer"], "<br>")

        document.write("<br>")

        document.write(parseInt("123.99"), "<br>", parseInt("12345"), "<br>", parseInt("123d45"), "<br>")

        document.write("<br>")

        var a = 5

        if(a === 5){
            document.write("true", "<br>")
            document.write(typeof a)
        }
        else{
            document.write("false", "<br>")
            document.write(typeof a)
        }
        document.write("<br>")
        if (a === "5") {
            document.write("true", "<br>")
            document.write("Type of a is:", typeof a, ". ", " Type of '5' is:", typeof "5", "<br>")
        }
        else {
            document.write("false", "<br>")
            document.write("Type of a is:", typeof a, ". ", " Type of '5' is:", typeof "5", "<br>")
        }
        document.write("<br>")
        
        var age=parseInt(prompt("Please input your age"))
        if (age > 0 && age <= 6)
          document.write("Age=",age,".Ticket type=","free." )
        else if (age > 6 && age <= 25) 
            document.write("Age=", age, ".Ticket type=", "student.")
        else if (age > 25 && age < 65)
            document.write("Age=", age, ".Ticket type=", "full price.")
        else if (age >= 65)
            document.write("Age=", age, ".Ticket type=", "free.")

        document.write("<br>")

        var1 = 10
        var2 = 20
        function add(a,b){return "a= "+a+", b= "+b+", a+b= "+(a+b)+"<br>"}
        document.write(add(var1,var2)+"<br>")
        var1 = 30
        var2 = 50
        addObj = new Function("a","b","return (a+b)")

        document.write("var1=" + var1 + ", var2= " + var2+", var1+var2= "+addObj(var1,var2))


    </script>
</head>
<body>

</body>
</html>
'''


Overwriting exercise.html

In [159]:
f=open('exercise.html','r')
html_file=f.read()
from IPython.display import HTML, display
display(HTML(html_file), metadata=dict(isolated=True))


01varDeclarationTypeTransfer.html '''

9x9 table


In [147]:
%%file hwk.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
table{background-color:pink;border:red 2px solid;border-collapse: collapse;}
<--tr,td{border-right:red 2px solid} -->
<--table { border: none; border-collapse: collapse; }-->
table {  border-collapse: collapse; }
table td { border-left: 2px solid red; }
table td:first-child { border-left: none; }

</style>
    <title>Homework_9x9table.html</title>
    <script>
        
        document.write("<br>")

        document.write("<table>")
        for (j = 1; j <= 9; j++) {
            document.write("<tr>")
            for (i = 1; i <= 9; i++) {
                document.write("<td>")
                document.write(i +"x"+j+"="+i*j+"<br>")
                document.write("</td>")
            }
            document.write("</tr>")
        }
        document.write("</table>")


    </script>
</head>
<body>

</body>
</html>


Overwriting hwk.html

In [148]:
f=open('hwk.html','r')
html_file=f.read()
from IPython.display import HTML, display
display(HTML(html_file), metadata=dict(isolated=True))


Homework_9x9table.html

button & function:


In [60]:
%%file test_func.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>test_func.html</title>

<script>

var me = new Object();
me.name = "chweng";
me.age = "secret";
me.print = function () { return "<br> My name is: " + this.name + ". My age is: " + this.age };
        
//document.write(me.print());

</script>
</head>
<body>

<input type="button" value="print my info" onclick="document.write(me.print())">

</body>
</html>


Overwriting test_func.html

In [160]:
f=open('test_func.html','r')
html_file=f.read()
from IPython.display import HTML, display
display(HTML(html_file), metadata=dict(isolated=True))


01varDeclarationTypeTransfer.html

a function can have local and global variables


In [165]:
%%file local_global.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>01varDeclarationTypeTransfer.html</title>

<script>

function f(){
    var1=10;     // global
    var var2=20; // local
}

    f();
    document.write("var1 (from f)= "+var1);
    document.write("var2 (from f)= "+var2); // won't be printed since var2 is not accessable.
</script>
</head>
<body>


</body>
</html>


Overwriting local_global.html

In [166]:
f=open('local_global.html','r')
html_file=f.read()
from IPython.display import HTML, display
display(HTML(html_file), metadata=dict(isolated=True))


01varDeclarationTypeTransfer.html