1. HTML in Dash
Let's extend our knowledge of HTML to structure and enhance our Dash apps.
2. HTML Revisited
As we saw in the previous chapter, HTML is the language for structuring web content. We used the following example.
It uses tags, like the ones we have already seen; Div tags and H1 to H6 title tags.
We used Dash to wrap HTML using dash html components.
We created H1 title tags with the dot-H1 function
and Div tags with the dot-Div function.
However, this is just the start. There are many more tags available.
3. Structuring tags
The Dash documentation extensively shows all the HTML tags available that we can wrap with Dash. There are a lot.
Some important tags for structuring our apps are
dot-Br for inserting a line break, and
dot-Img for inserting an image.
4. Lists in HTML Dash
There is also U L for an unordered list, like the bullet points you see on the slide,
O L is for ordered list, so numbered points,
and L I is for the list elements, regardless of the list type.
Don't worry if this seems confusing just now, we will practice using these elements shortly.
5. Inserting a company logo
A common use case for the Img tag is adding a company logo. Lets do that in a Dash layout above the title.
First, we set up the familiar Dash layout. We assume the relevant libraries are imported, and a Dash app object was previously instantiated.
Then we insert our Img and title HTML components. The src argument sets the URL of the image. It is possible to serve local images, but it's a bit more complicated due to how the Dash server works, so we'll stick to hosted images for now.
Here's the result. Nice work, that is looking sharp and professional.
6. Text tags
We will likely want to add text throughout our dashboards. We can input and format text with a variety of other Dash HTML functions.
P or Span tags are used to insert the text itself. These have a children argument where we can add other P or Span functions or even Python strings. We'll see that in action shortly.
B and I are familiar functions from word processing applications to bold or italicize text.
7. HTML text tags in Dash
Let's dive right in with some complex text formatting using these tags.
First, we set up the layout and add our title.
Then we'll set up a span object with a children argument to include our various text elements.
We can put in strings that use string interpolation since we are writing in Python. Here we insert the current date.
Then we can add some more text, comma-separated, before bolding the author's name with a B function.
Finally, we can italicize her job title with an I tag.
Phew! Here is the result. That's some nice formatting.
8. Breaking up the text
We can also incorporate structuring elements such as line breaks.
Let's insert line breaks between the text components from the previous example using the Br function.
Now we get each text component on a new line.
9. Let's practice!
Let's practice using HTML with Dash to structure and enhance Dash apps.