HTML
Reminder codes :
div class="line"
<div class="row"> <!-- start new row color -->
<div class="display_panel_p1">
<a href="#"><strong>display_panel_p1</strong></a>
<div>
<div class="display_panel_p2">
<a href="#"><strong>display_panel_p2<strong></a>
<div>
<div> <!-- End new row color -->
Reminer 1 is for left column 2 is for right column
Audio single file player
Music Player with HTML, CSS, Javascript
control table cell width and padding, TD width
The key is to not put any control tags in the table tag
| 1A | 2A | 3A | 4A | |
| 1B | 2B | 3B | 4B |
Link Styles
<link rel="stylesheet" type="text\css" href="\styles_Scripts\fontfix.css">
Embed Styles into a page
<style>
p ❴ font-family: verdana; font-size: 20px; ❵
<\style>
embedding styles inside html
<p style="color:blue; font-size:90%;font-weight: bold; text-align: right; vertical-align: middle;">This makes a blue small font<\p>
style to hide an html element
<p style="display: none;">Made this paragraph disapeear<\p>
vertical-align: top;
<td style="vertical-align: top;">Align Top<\td>
Link
<a href="index.php" id="link_id">Link home<\a>
Ancor Link
<a id="repeated-phrases-B">jump source</a>
<a href="#repeated-phrases-B">Jump to the part of the page with the “anchor-name” id </a>
<a href="index.php" id="link_id">Link home<\a>
Image
<a href="images.jpg" target="_blank"><img src="images.jpg" alt="Alt text" height="400px" style="width: 100%; max-width: 600px; object-fit: contain;" \> </a> <img src="images.jpg" alt="Alt text" height="20px" width="10px" \>
Audio in HTML5
<button class="button_text" onclick="document.getElementById('lwm_tub_hab_nyaab').play()">Play</button>
<audio id="lwm_tub_hab_nyaab"><source src="../audio/wedding/lwm_tub_hab_nyaab.mp3"></audio>
<a href="../audio/wedding/lwm_tub_hab_nyaab.mp3" download="lwm_tub_hab_nyaab"><img src="../images/button_download2.png"></a>
I created a javascript to play words
<button class="button_line_text" onclick="play_word('khaiv')">khaiv<button>
Image checkbox
An image used as a check box
An image used as a check box random with PHP
Symbols, ASCII code
- reference page
| ¹ - ¹ ¹ | ² - ² ² | ³ - ³ ³ |
| < - < | > - > | " - " |
| spacer - | ♥ - ♥ | ♠ - ♠ |
| ♣ - ♣ | ♦ - ♦ | → - → |
| ← - ← | © - © | @ - @ |
| Ω - Ω | Ω - Ω | ☀- ☀ |
| ☁ - ☁ | ★ - ★ | ☉ - ☉ |
| ☚ - ☚ | ☛ - ☛ | ☻ - ☻ |
| ☺ - ☺ | ✌ - ✌ | ✓ - ✓ |
| • - • | ‘ - ‘ | ’ - ’ |
| “ - “ | ” - ” | ½ - &##189; |
| ¼ - ¼ | > - > | < - < |
| ☰ - ☰ | ❴ - ❴ | ❵ - ❵ |
| & - & | ▼ - ▼ | ▽ - ▽ |
| ➤ - ➤ | ❯ - ❯ | ⇇; - ⇇ |
| ❮ - ❮ | ⤵ - ⤵ | ⇶ - ⇶ |
| ⇚ - ⇚ | ⇛ - ⇛ | ⇉ - ⇉ |
| ⇊ - ⇊ | ↳ - ↳ | \ - \ |
| ▼ - ▼ | . - . | ⅓ - ⅓ |
| ; - ; | : - : | # - # |
| ► - ► | ◼ - ◼ | ● - ● |
Input text read only
use html readonly with no quotes or double quotes
<input type="text" value="no edit" size="15" readonly>
Div example
Form elements
<form method="post">
Having not action will submit a form onto it's self
<form name="test_form" method="post" action="/action_page.php" onsubmit="return form_validation();">
<input name="key_id" type="hidden" value="keytest1234" id="key_id">
Form Validation
<script>
function form_validation() {
var $phone = document.forms["test_form"]["phone"];
var $email = document.forms["test_form"]["email"];
var $last_name = document.forms["test_form"]["lname"];
var $number = document.forms["test_form"]["number"];
if ($phone.value == "") {
window.alert("Please enter phone.");
$phone.focus();
return false;
} else if ($last_name.value == "") {
window.alert("Please enter your last name.");
$last_name.focus();
return false;
} else if ($email.value != $email2.value) { // check two values
window.alert("The emails you have entered do not match");
$email.focus();
return false;
} else if (isNaN($number.value) == true) { // check if is numberic
window.alert("The amount must be a number");
$number.focus();
return false;
}
}
</script>