`` tag have a different
effect than adding it to the ```` tag?
#. Use the ``type`` attribute in the ordered list to change the bullets from
numbers to lowercase letters.
#. Change the font for one of the paragraphs with
``style="font-family:Brush Script MT"``. Play around by trying other
font names like ``Helvetica``.
#. Use the ``style`` attribute to align the ``small`` text to the right edge of
the screen.
Part 4: Other Semantic Tags
---------------------------
The editor below contains an image and some text, which you can use to practice
other useful tags and attributes.
.. raw:: html
Image Attributes
^^^^^^^^^^^^^^^^
Inside the ```` tag, add the ``width="value"`` or ``height="value"``
attribute to change the size of the image. ``value`` refers to a number of
pixels. Start with a value of ``150`` and then experiment by moving up and down
from there.
.. admonition:: Note
If both ``width`` and ``height`` are used, the image resizes to their
values. If only one or the other is added to the ``img`` tag, the image
will scale to keep the same proportions as the original.
The ``src`` attribute references an image saved in the same folder as this HTML
file. You cannot see the actual folder in the embedded editor, but clicking on
the image icon in the toolbar shows that seven photos are available. Feel free
to change the number in ``pet_1.jpg`` to change which picture gets displayed.
.. admonition:: Warning
The ``src`` attribute also accepts the address for any image on the web.
However, pulling images from other sites to display on your own may violate
copyright laws.
Discuss with your teacher how to properly cite or request permission to use
images that don't belong to you.
Special Text Tags
^^^^^^^^^^^^^^^^^
#. In your math and science classes, you use *superscripts* or *subscripts* to
correctly express chemical or mathematical formulas.
.. admonition:: Examples
.. raw:: html
Subscripts: 2H2 + O2 → 2H2O
Superscript: ax2 + bx + c = 0
To make characters appear smaller and below the main line of text, wrap them
with the ```` tags. For superscripts, use the ````
tags instead.
#. In the editor, add some subscripts and superscripts inside the first
paragraph.
#. Next, replace the second set of ```` tags with ``
``. What
happens? This tag is often used to set apart quotes taken from books,
movies, plays, etc.
Details, Details
^^^^^^^^^^^^^^^^
Sometimes, you want to display information on a webpage only when the user
clicks in a specific spot. One way to accomplish this is by using the
``details`` element.
Paste this code into the editor:
.. sourcecode:: html
Some text here...
Some more text here...
List of items:
- One list item
#. What does the ``details`` element do on the screen?
#. Change the first ``p`` element to ````. What happens?
#. Replace the generic text inside the ``details`` element with a description
of how you might use it on a webpage.
Subscripts: 2H2 + O2 → 2H2O
Superscript: ax2 + bx + c = 0
To make characters appear smaller and below the main line of text, wrap them with the ```` tags. For superscripts, use the ```` tags instead. #. In the editor, add some subscripts and superscripts inside the first paragraph. #. Next, replace the second set of ```` tags with ``
``. What happens? This tag is often used to set apart quotes taken from books, movies, plays, etc. Details, Details ^^^^^^^^^^^^^^^^ Sometimes, you want to display information on a webpage only when the user clicks in a specific spot. One way to accomplish this is by using the ``details`` element. Paste this code into the editor: .. sourcecode:: html#. What does the ``details`` element do on the screen? #. Change the first ``p`` element to ``Some text here...
Some more text here...
List of items:
- One list item
``. What happens? #. Replace the generic text inside the ``details`` element with a description of how you might use it on a webpage.