I created this domain in April of 1997, a time when mobile device usage was
not common. HTML 3
was the version of the HyperText Markup Lanugage (HTML) in usage then with
HTML 4.0 not being
pubished as a W3C Recommendation until December of that year. In the past,
I used to add material to the site far more frequently. I haven't added much
to the site in the last few years and haven't made any significant changes
to the site for many years. Consequently, visitors viewing pages with large
images from a mobile device would see only the leftmost portion of those
images and would need to scroll right if they were using a mobile device
such as a phone. I finally added a few lines to the site's style.css
Cascading Style Sheets (CSS)
file today to have images be scaled down to fit the screens of mobile devices.
The lines I added are those below:
img {
max-width: 100%;
height: auto;
}
Those lines tell browsers that the maximum width of an image when it is
displayed within the user's browser shoud be no wider than the page's
width as it is displayed within that browser on that device. I added the
"height: auto;" to ensure that when images are resized that the height
is also adjusted to maintain the heighth to width ration of the original
image. Otherwise, some images might be distorted so that the image height
would be much greater in relation to its width than in the original
image. With the auto setting, the height to width balance remains such that
the image fits within the displaye page without appearing elongated.
If you wish to make a list that can be collapsed and expanded on a webpage
or a section on the page that can be expanded to reveal more details,
you can use the details and summary tags with
version
5 of HTML. E.g., the following code allows information to be displayed or
hidden by clicking on an arrowhead that will appear to the left of whatever
appears within the summary tags. The information within the
details tag will be hidden or displayed by clicking on the
arrowhead to toggle between the two options.
<details>
<summary>Overview</summary>
The American Civil War began on April 12, 1865 when South Carolina
militia forces attacked Fort Sumter at Charleston, South Carolina.
The war effectively ended on April 9, 1865 with the surrender by
Confederate General Robert E. Lee to Union General Ulysses S. Grant, but
the president of the Confederacy, Jefferson Davis, did not declare an
end to the insurrection until May 9, 1865. Each side in the
conflict suffered over 800,000 casualties. The principal cause of the
conflict was the issue of slavery within the United States with abolitionists
in the North viewing the practice as a crime against humanity while Southern
slave owners viewed it as a necessary evil or, for some defenders of slavery,
even as a positive good, which they feared would be eliminated under the
recently elected President Abraham Lincoln.
</details>
With
HTML 4, centering the contents within a
div is simple. You
just use <div align="center">. E.g., if I wanted to
center the image and text below on a webpage, I could use the following
code:
A tooltip, aka infotip or hint, is a small box of text
that appears when a user hovers the mouse pointer over an item, such as a
particular word or phrase, on a webpage. If you wish to display a
tooltip when a user hovers the mouse pointer over text on a webpage,
there are a number of ways you can do so. The simplest way to do so
is to specify a title attribute, which is an
HTML global attribute with the
span tag. E.g.:
<span title="This is the tooltip text to be displayed when the mouse is
hovered over the spanned text.">example text</span>
This is an example using the above technique with example text.
I query an
SQLite database using PHP code on a webpage. One of the fields in the database
is a "Note" field, where notes have been entered without any HTML code to
format the text. When I display the notes on a webpage, I want to preserve
the line breaks and paragraphs as they were typed. Since there are no
<br> line break nor <p> paragraph tags on
the page, I could display the text as typed using the
pre tag, but the
problem with just using that tag is that in cases where the a line is very
long, someone would have to scroll far to the right to see the entire line
on the webpage, if I just used the pre tag. However, I can specify a style
for the pre tag that will result in the text wrapping at the right-edge of
the browser window. E.g. <pre style="white-space: pre-wrap">
. Or, if I don't want the text displayed in the monospaced default
font for the pre tag, I can apply the style to the
<div> tag,
instead. E.g.: <div style="white-space: pre-wrap">.
If you wish to vertically align an image with text in
Hypertext
Markup Language (HTML) code that is compliant with
Cascading
Style Sheets (CSS) you can do so using <style="vertical-align:
position;"> where position is bottom, middle, or top.
E.g., if I want to align an image of the
direct current
symbol, which is a horizontal line over top of three shorter horizontal lines,
so that the image is vertically in the middle of the text, I could use the code
below:
If I used vertical-align: top, instead, the image would
appear as shown below where the text is aligned with the top of the
image:
24V 1500mA
If I used vertical-align: bottom, instead, the image would
appear as shown below:
24V 1500mA
If I did not specify a vertical alignment, the image would appear as
it did when I specified "bottom" for the vertical alignment as shown
below:
24V 1500mA
Though, in this case I could also have used the HTML code
⎓, instead, for the direct current symbol and avoided the
use of an image and the need to align the image with the text, though I
didn't realize that when I started using the image on a page for
power adapter for various devices.
The third specification of the
Cascading Style
Sheets (CSS) style sheet language,
CSS 3 provides support for
media queries, which
can adjust the display of information in a browser based on
screen resolution, e.g. smartphone screen vs. computer screen, the width
of the browser
viewport, etc. This is done through the use of
"@media,
which can be used in a style sheet or a style element included in the
<head> section of the HTML code.
Two parameters that can be used with @media are shown below:
max-width
The maximum width of the
display area, such as a browser window
min-width
The minimum width of the
display area, such as a browser window
Sometimes you may want to have a certain event take place if a visitor to
your website resizes his or her browser window. With HTML 5, you can use the
onresize Event Attribute. You can apply the event attribute to
the body tag, e.g.:
<body onresize="someFunction()">
The event that would occur when the browser window is resized will depend
upon the code you place in the
JavaScript
function referenced, which in this case I've named
someFunction.
Note: the onresize attribute is new to
HTML5 and
isn't supported in
HTML 4.01 and older versions oF HTML. You can expect current
versions of browsers to support it, but if a visitor has an outdated browser
version, the function may not work for the visistor.
With HTML 4, you can horizontally align an element in a cell in a
table using the align parameter, e.g.:
<td align="right"> to horizontally align text to the right
side of a cell. However, with HTML5, use of the align
parameter for horizontally aligning text within elements
of a table has been deprecated. E.g., if you check your
HTML code for adherence to the HTML 5 standard with the Nu Html Checker provided by the
World
Wide Web Consortium, you will see an error similar to the following
one displayed if you are using align in the HTML code for a table.
Thealignattribute on thetdelement is obsolete.
Use CSS instead.
From line 118, column 5; to line 118, column 22
</tr>↩<tr><td align="right">;<b>Vir
1500mA
