Other#
Here are features that I haven’t had time to put into some more specific pages yet.
from IPython.display import HTML
Common attributes#
id - object identificator#
style set a style of element#
Allows to use integrated CSS for html elements.
<property1 name>:<setted value>;<property2 name>:<setted value>;...;<propertyn name>:<setted value>
%%HTML
<p style="color:blue">Blue text color</p>
<p style="background:red">Red background color</p>
<p style="background:red;color:blue">Red background color</p>
Blue text color
Red background color
Red background color
title - hint text#
If you hold the mouse for some time on the element created by the tag with the title attribute - close to the mouse, a small hint appears. So try it wit text which is the result for the next cell.
%%HTML
<p title="hello im title">text with title</p>
text with title
Content tags#
<img> add image to html#
src - set picture#
You can add url of the image or filepath on computer. In this argument you can use:
url;
filename on computer;
base64 - use the following syntax
data:image/<img type>;base64;<base64 code>:get base64 from bash:
base64 <filename>;get base64 from python:
import base64; base64.b64encode(<binary picture data>).
%%HTML
<img src="https://content.codecademy.com/courses/web-101/web101-image_brownbear.jpg"/>
<img src="html_files/display_picture.jpg">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAA
SklEQVQokc2QSQ4AIAgDW+L/v1wvmhDFhXiRG800kKEEITHmF3IGxsxmJHHhjwKfLF0VIpXLdwiY
FPuPYKm9dCp1GABKD3clOS0V5DQSGUBEBc8AAAAASUVORK5CYII=" width=200 height=200>
alt - text hint#
Describes the text that will be used if the picture cannot be uploaded. There no option to show how it works in jupyter notebook, but the html page with the following code:
%%bash
cat html_files/img_alt_ex.html
<img src="unreal image" alt="description of some image"/>
You can check here.
<video> - insert video#
controls handle video#
Attributes allow you to set controls for handling the video playback process. In the following example I have inserted the first video with the control attribute and the second without.
%%HTML
<video src="html_files/some_video.webm" widht=200 height=200 controls>
</video>
<video src="html_files/some_video.webm" widht=200 height=200>
</video>
Other tags#
<div> - division#
Helps to group html elements.
<style> - style for element group{#sec-style_tag}#
By useing this tag inside <head> tag you can set some css properties.
In the following example I set styles for all <p> and <img> tags in html page. You can check the results here. I can’t show in Jupyter notebook because the results are applied to the whole notebook.
with open("html_files/style_tag.html") as file:
print(file.read())
<head>
<style>
p {text-align:center; color: red}
img {border: 5px solid blue}
</style>
</head>
<body>
<p> Test paragraph1</p>
<p> Test paragraph2</p>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAA
SklEQVQokc2QSQ4AIAgDW+L/v1wvmhDFhXiRG800kKEEITHmF3IGxsxmJHHhjwKfLF0VIpXLdwiY
FPuPYKm9dCp1GABKD3clOS0V5DQSGUBEBc8AAAAASUVORK5CYII=">
</body>
<link>#
Used inside the <head> tag to load an external resource.
href - url#
rel - relationship#
Define the relationship between html document and external resource.
stylesheet - used for loading css file {#sec-link_css_file}#
Here you can describe file that should be used as style table. In the following example I show html file and associated css file.
display(HTML(
'''
<hr><text style=\"font-size:16px\">HTML</text>
'''
))
with open("html_files/css_example.html") as file:
print(file.read())
display(HTML(
'''
<hr><text style=\"font-size:16px\">CSS</text>
'''
))
with open("html_files/css_example.css") as file:
print(file.read())
<head>
<link href="css_example.css" rel="stylesheet">
</head>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</body>
p {
background-color: powderblue;
color: red
}
You can find the results here.
<a> - link#
href - url#
url to which reference is made.
target - widow#
Define how exactly html page should be opened:
_self- use the same tab where the link was displayed;_blank- use new tab;_parent- ???;_top- ???.
You can try different options here.
download#
Tells the browser that the document must be downloaded and not opened in the browser. So in the following example, I have created a link that allows you to download the page from the previous example.
%%HTML
<a href="html_files/a_target.html" download>Download a_target.html</a>
<details> - hiden info#
Basics#
You can describe some information that is hidden by default, but appears when you press the “arrow” button.
%%HTML
<details>
Some hidden information.
</details>
By using <summary> tag you can add extra information.
%%HTML
<details>
<summary>Details title<button>Test button</button></summary>
Some hidden information
</details>
Details title
Some hidden informationOverlapping#
By default, expanded <details> will move the following content. So the following example shows how expanded details moves div.
%%HTML
<details>
line 0 <br>line 1 <br>line 2 <br>line 3 <br>line 4 <br>line 5 <br>line 6 <br>line 7 <br>line 8 <br>line 9 <br>
</details>
<details>
line 0 <br>line 1 <br>line 2 <br>line 3 <br>line 4 <br>line 5 <br>line 6 <br>line 7 <br>line 8 <br>line 9 <br>
</details>
<div>
Some other content
</div>
line 1
line 2
line 3
line 4
line 5
line 6
line 7
line 8
line 9
line 1
line 2
line 3
line 4
line 5
line 6
line 7
line 8
line 9