Unstyled Page Template for Web Designers
Thank you for visiting RAD Websites to get this unstyled page-setup template. The purpose of this template is to give web designers and web developers a page with the most commonly used HTML markup types that they can quickly plop onto a page and style, greatly improving the amount of time it takes to set up site-wide CSS or Global Variables.
This template is great for any web designer or web developer, including those who use:
- HTML / CSS
- WordPress (Gutenberg) + CSS
- WordPress Classic + CSS
- Other Builders / Frameworks
- WordPress Theme Builders:
- WordPress Theme Builders:
Visit us at https://www.youtube.com/@radwebsites for web design related tutorial videos.
Have a great day!
RAD Websites Social Media
How to Use this Unstyled Web Design Page Template
- Simply highlight the entirety of the section below (from “TIPS” all the way to the bottom)
- Copy and paste into a text block on your WordPress site
- Begin styling via CSS or Global Styling.
NOTE: Make sure you paste into the “Visual” tab so all the HTML markup elements come with it!
We have provided a table at the bottom you can style as well, and the table contains all HTML element codes used on the page.
Enjoy! – Mark w/ RAD Websites
TIPS:
- Set your typography FIRST
- Set your Global Styles
- Enjoy the extra free time!
Heading Level 1
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
Heading Level 6
This is a standard paragraph with some bold text, some italic text, and a link to 1radwebsite.com.
Image Example
This is the WordPress logo and comes pre-installed with all WordPress installations.
Text Formatting Examples
This is small text, highlighted text, superscript, and subscript.
Line break example:
This is the next line.
“Horizontal Rule”:
- Unordered list item 1
- Unordered list item 2
- Unordered list item 3
- Ordered list item 1
- Ordered list item 2
- Ordered list item 3
This is a blockquote. Use this to highlight quotations.
This is preformatted text. It preserves spacing and line breaks.
This is inline code
Form Elements
Table Example
| HTML Tags | Name | Purpose / Description |
|---|---|---|
| <h1>…</h1> to <h6>…</h6> | Headings | Defines section headings with decreasing importance (h1 = most important) |
| <p>…</p> | Paragraph | Defines a block of paragraph text |
| <strong>…</strong> | Bold | Makes enclosed text bold (semantic importance) |
| <em>…</em> | Italic | Emphasizes text (typically renders as italic) |
| <a>…</a> | Anchor | Defines a hyperlink |
| <hr /> | Horizontal Rule | Draws a horizontal line to separate content |
| <ul>…</ul> | Unordered List | Defines a bulleted list |
| <ol>…</ol> | Ordered List | Defines a numbered list |
| <li>…</li> | List Item | Defines an item in a list |
| <blockquote>…</blockquote> | Blockquote | Indicates quoted or highlighted content |
| <pre>…</pre> | Preformatted Text | Displays text with preserved whitespace and formatting |
| <code>…</code> | Inline Code | Defines inline code-style formatting |
| <div>…</div> | Division | Generic container for content; useful for layout/styling |
| <button>…</button> | Button | Clickable button element |
| <table>…</table> | Table | Container for tabular data |
| <thead>…</thead> | Table Head | Container for header rows in a table |
| <tbody>…</tbody> | Table Body | Container for the body rows in a table |
| <tr>…</tr> | Table Row | Defines a row in a table |
| <th>…</th> | Table Header Cell | Defines a header cell in a table |
| <td>…</td> | Table Data Cell | Defines a regular cell in a table |
| <form>…</form> | Form | Wraps input elements to collect user data |
| <label>…</label> | Label | Defines label text for form elements |
| <input /> | Input | Defines input fields (text, email, checkbox, radio, etc.) |
| <textarea>…</textarea> | Textarea | Multiline text input field |
| <select>…</select> | Select | Dropdown menu |
| <option>…</option> | Option | Item inside a <select> dropdown |
| <img /> | Image | Embeds an image |
| <small>…</small> | Small Text | Displays smaller text |
| <mark>…</mark> | Mark | Highlights text |
| <sup>…</sup> | Superscript | Displays text slightly above the line |
| <sub>…</sub> | Subscript | Displays text slightly below the line |
| <br /> | Line Break | Forces a line break |
About the Author: Mark Bush
NOTE: Some links on this page may be affiliate links, and help support our business. These links do not alter the cost of the product, but provide a small percentage of the sale to us as the referral source.
0 Comments