HTML and w3 Schools



In [1]:

    
from IPython.display import HTML, Javascript



In [2]:

    
HTML("Hello World")









    Out[2]:




Hello World

Supporting Technologies

jQuery

Examples

Draggable Elements



In [3]:

    
!gvim draggable_1.html



In [4]:

    
HTML('./draggable_1.html')









    Out[4]:









    
    




    
        Box #1
    

    


    
        This is a draggable paragraph #1. Drag this element into any of the two rectangles.
    

    
        This is a draggable paragraph #2. Drag this element into any of the two rectangles.

    


    
        Box #2

Using the %%javascript cell magic and jQuery, we can modify the DOM node's display attributes using their id's!!



In [5]:

    
%%javascript

$("p#drag1").css("border", "1px double red")

One can also the IPython.display.Javascript class to run code!!



In [6]:

    
Javascript("""$("p#drag2").css("border", "2px double green")""")









    Out[6]:

Note

I started off by writing the entire HTML in a code cell with the %%html cell magic.

Then I wrote the file out to an html file using the %%writefile cell magic.

From the next time I was editing the file using gvim, saving it and then loading/reloading it using IPython.display.HTML python command. If I really wanted to edit the html within the code cell, I can always load it using the %load magic!

%%html

%%writefile draggable_1.html

!gvim draggable_1.html

%load draggable_1.html