Web Content Preparation
Absolute Positioned Image Attached to Paragraph
An image (or other content) can be absolutely positioned with a paragraph.
Accented Letters and HTML Entities
Sometimes, the unaccented version of letters in excepted words will suffice to let the reader recognize them. But it's not professional. It can indicate a carelessness or ignorance of how the word is spelled.
A Gotcha When Importing Content Into a Web Page
When importing content into web pages obtained from the internet, CSS in the imported content could mess with your page design.
A PHP Tip for Site Developers;
This tip is intended to make things a bit easier for you, a bit faster, and a lot less stressful. It's really handy.
Being Obvious With Radio Button Checks
When it must be obvious to the user which button is checked, so immediately obvious they are unlikely to assume anything different, then drawing additional attention to it is prudent.
Use the start attribute to start HTML list sequential numbering at a point other than the normal beginning.
Changing the Mouse Cursor Icon
There is a way to change the mouse cursor icon when it hovers over certain areas of a web page.
Click or Tap to Reveal Hidden Overflow Text
When text must stay on one line, but there is not enough room for it, here's a solution.
How to enable site users to select the content within text elements (DIV, for example) with one click.
When tables are very wide, the eye may wander up or down onto another row. Providing a different background or font color for every two or three rows helps the reader's eye focus on the correct data. I'll show you how to do it.
Conditional Content Publication
PHP can determine in which directory the web page is located and publish or not publish content accordingly. It's a two-part snippet. We are using it more and more.
With the software in this article, content within a div slides left. Then it slides right. Back and forth, with a pause in between.
A div or web page can have its background image changed with the CSS @media code.
Appealing backgrounds can be created with CSS color gradients. No image necessary, reducing download time and bandwidth usage. Do it all with CSS.
Any image can be continuously rotated at any speed - with CSS.
Custom Designed First Letter of Paragraph
The first letter of a web page paragraph may be designed pretty much as you please. The design may be a larger or smaller font, floated for text wrap, bordered, with or without a special background, vertically aligned, decorated, and/or transformed.
Specific content can intentionally be delayed from appearing on a page for a pre-determined amount of time.
Deprecation of the "a" Tag Name Attribute
Well, they're changing stuff on us again. With HTML5, the named anchor is being deprecated. If the HTML5 specifications are finalized as currently written, the name attribute of the a (link) tag will be obsolete. The function of the named anchor is for scrolling to a certain point on a page when a link is clicked. It is used to create a bookmark inside a web page.
[to come]
Easy-Maintenance Random-Optional Image Gallery
A page or part of a page can be dedicated for publishing images and optional captions. The images may be randomized when the page is loaded.
Expanding and contracting text is almost certain to grab attention. Wow, can it ever! Implement it only after adequate consideration.
The cursor pointer is the mouse pointer shaped like a hand with pointing index finger. Any HTML element with content can be given the pointer.
There are a number of ways to center things vertically. This is the easiest way.
Extending Image Past Edge of Browser Window
An image with part of itself extending past the edge of the browser window is relatively unusual. Which attracts the eye. Examples are an image of a business card, a product image, or a logo. Perhaps a calendar. Or a currency symbol.
A web page can have a translucent overlay to highly encourage interaction with whatever is on top of the overlay.
Getting Along Without the Target Attribute
The target attribute is not supported for DOCTYPE Strict HTML or XHTML pages. This page shows workarounds.
With the box-sizing CSS, the dimensions of the div are maintained and the content area dimensions are adjusted — instead of the other way around. Adjusting padding and borders will maintain the div's dimensions so the div continues to fit nicely in your page design.
Horizontal Table Scroll (For Responsive Pages)
Some tables simply can't be made narrow enough to fit on a portrait-positioned phone, and still keep the text large enough to read.
When a cursor hovers over a text link, the text may display different attributes. The hover attributes might be color or font change, or underlining appearing or disappearing. This article shows how to change borders around link text when the cursor hovers over it.
How To Present Copy 'n Paste Text In Articles
Publishing code and other text for copying and pasting within articles can be a challenge. Depending on how your web pages are designed. Here is a textarea replacement.
How To Use Images Instead Of Checkboxes
In this article, you'll learn how to use images instead of checkboxes to provide a custom look for your forms.
HTML Hyphen and Word-Break Control
Word breaks in this article means words that break at the end of a line of text — the beginning of the word is published at the end of the line and the ending of the word is published at the beginning of the next line.
Image Areas Clickable Without Image Map
Image maps can be useful. But they're unnecessary just to make certain areas of an image clickable.
Resize all web page images in a directory to fit within a maximum width and height.
Let Others Publish Your Video on Their Domains
When you host your own videos, you may want to let others publish the same videos on their web pages.
Making Code Copyable on Your Page
How to publish source code that shows up on your page like source code.
Consistently formed fractions with CSS.
When you want the background to show through text, and your letters are large and bold enough for this technique, they can be transparent with an outline.
Page Reload Clears Form Variables
Depending on the browser, certain form fields retain their information when a web page is reloaded. If that's not desired, JavaScript can be used to reset the form fields when the page is reloaded — assuming the JavaScript is made aware a page reload has occurred.
Most likely, you're already familiar with the target="_blank" attribute you can put into an "a" tag. Well, there are 3 more pre-defined values you can use.
A fairly effective way to prevent content copying is to place a transparent image over the top of the content.
Sometimes it's necessary to prevent a browser from caching a web page. There are two ways to implement cache prevention. Each has its own caveat.
Three ways to prevent a browser from inserting its own line breaks.
Printer-Only and Browser-Only Content
When someone prints your page, would you like the printed version to be different than the web page displayed in the browser? It can be. Even quite different.
Publishing Content From an External File
Pulling the content of an external file into a web page is fairly straight forward. When it is.
Two recycled JavaScript code software: "Auto-Filling Additional Fields With a Click" and "e;Automatically Adjust Form Field Size"
Resizable Colored Bar in a Div
The set of functions in my snippets folder chosen for this article is for a resizable colored bar within a div.
Whether images, tables, divs, or other blocks of content, they can be arranged in rows — each row centered within the column.
The size of its text content can change automatically when a div size changes.
Reveal/Hide Information Overlays
When content is displayed in an overlay, the existing content on the web page doesn't have to shift around to make room.
Running an External Script on Page Load
One way an external script can be run on page load is with a non-display image tag. PHP, Perl CGI, or other external software can be launched.
Although it is a seemingly simple convenience, the scrollbar can be influenced in various ways with CSS by the web page designer.
Shadow for Objects Within a Transparent-Background Image
A transparent image can be given a shadow along the edges of the non-transparent areas.
This article describes how to shuffle and publish images found in a particular directory. The images in the directory may be miscellaneous unsorted, or the images may be sets of portraits like coins, animals, playing cards, vacation photos, product images, … .
Sometimes you need to attract attention — without rudely interrupting the site visitor, getting in their face.
Special Day Message on Your Web Page
Setting up a web page to publish custom content on a specific day is relatively easy using the technique presented here.
Sticky content with a page can be stuck to the top of the page when scrolled past or to the top of scrolling divs.
For presentation effect, text can be given strokes of any available color and any thickness.
Links need to be visible on a web page. Otherwise, they won't be tapped. Options for visibility include colors, sizes, fonts, under/overlines, and borders.
The form submit button can be custom styled with CSS. JavaScript can be used to change the style when the button is clicked to signify the down position.
Tap Text to Affect Checkboxes and Radio Buttons
The HTML label tag can be used so you can tap the label text of the checkbox or radio button and it will act as if you tapped the box or button itself.
Find out how to make a link or button to select the content in a div or other HTML element.
Testing Pages in Various Browsers
Ways to check for browser and device differences in web page design and functionality.
Text and Image Positioning, a Tutorial
Learn how to position text and images on a web page. By positioning, I mean placing certain content onto the web page in the desired location.
There are tweaks a person can do with CSS beyone just plain line justification where the text wraps.
Occasionally it is desirable to publish text in a specific position on top of an image. The text might be a description, a quote, a copyright notice, a sale price - any text on top of any image.
Consider using the article tag. It is likely to be beneficial for your web pages.
The HTML base tag is a seldom used but powerful tag. It can affect every link on a web page.
Discover how and why to use the HTML address tag.
How to make machine-readable dates and times available to browsers.
Vertical Content Centering With CSS
There is no one CSS property for vertical centering with the same ease as there is for horizontal centering. But it can be done. And it's actually fairly easy.
Vertically Align Content with CSS
This article shows a way to vertically align content within a div using CSS so it publishes in the middle. A link to other ways to do it is also included.
With video publishing, a choice is available: Deliver video via YouTube or other video depository. Or have full control of delivery at your own website.
Sometimes an image that is technically centered doesn't look quite centered when viewed.
A recent custom project required publishing a wide table on a responsive site. It needed to, somehow, just work.
Invisible characters, sometimes referred to as gremlins, interspersed in text files, can nevertheless become visible as strange characters when displayed in a browser. Further, if the file is used as a template where certain sequences of characters need to be replaced, gremlins within the sequence can abort the replacement.
All information in WillMaster Library articles is presented AS-IS.
We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.
