12 Principles Of Animation By Frank Thomas & Ollie Johnston

Posted on Friday, November 2, 2018

The 12 principles of animation by Frank Thomas & Ollie Johnston

The list of 12 animation principles with a video below:

1. Squash & Stretch
- keep the volume
- emphasis the mass & speed
- emphasis reaction
- Do not overdo the squash and stretch

2. Anticipation
- prepare for the action
- realistic
- give clue for prediction
- feeling interactive & energetic
- make the action noticeable

3. staging
- control the focus of the audience and camera
- proper timing

4. straight ahead and pose to pose
- two drawing technique

5. follow through & overlapping action

6. slow in & slow out to achieve realistic motion

7. arcs (cirular paths)

8. secondary action

9. timing
- standard frame rate for animation is 24 fps

10. exaggeration
wild -> wilder
sad -> sader
for more convincing actions

11. solid drawing : spatial drawing & curvy lines

12. appeal
pleasing to look at, dynamic design

The video made by Alan Becker to illustrate those 12 animation principles:


See you in the next learning topic here!

How To Copy Text From EditText In Kotlin - Android Code Snippets

Posted on Thursday, November 1, 2018

To make your Android app easy to use with more features and functionality, you should add a button to copy the EditText text automatically! I made a code tutorial about the java code to copy to clipboard in that topic here.

So here is the Kotlin code to copy text from EditText to system clipboard. Open you Android Studio, create a new project or use an existing one 😂 then make a button or ImageButton (as you like) to use it as a copy text button, and choose a certain EditText View to copy the text content of it.

In modern Kotlin implementation in Android Studio you don't need to initialize the View of the layout (unlike the case in Java). So dive into code!

First, add the onClick to the Button or ImageButton layout XML file like this.
<Button
android:onClick="copyText"
android:text="Copy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/copyBtn"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.302"/>

then create the copyText function in the Kotlin class, like this.
fun copyText(v: View){
     copy2clipboard(et2Copy.text.toString())
    }
When the button clicked, the copyText function fired, then the copy2clipboard function fired to copy the et2Copy EditText. Here is the code of copy2clipboard function.
fun copy2clipboard(text: CharSequence){
        val clipboard = getSystemService(Context.CLIPBOARD_SERVICE) as ClipboardManager
        val clip = ClipData.newPlainText("copy text", text)
        clipboard.primaryClip = clip
    }
Thus, the copy2clipboard will copy any text passed to it as an argument (args). So in the function of out copy button, we fired this "copy" function with the argument text to copy. the text to copy is the text contained in the EditText which has an ID equals et2Copy as you can see on the complete XML layout here.
<?xml version="1.0" encoding="utf-8"?>

<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:ems="10"
android:id="@+id/et2Copy"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.503"
app:layout_constraintVertical_bias="0.017"/>

<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:ems="10"
android:id="@+id/et2Paste"
android:layout_marginTop="8dp"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginLeft="8dp"
app:layout_constraintHorizontal_bias="0.503"
app:layout_constraintVertical_bias="0.153"/>

<Button
android:onClick="copyText"
android:text="Copy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/copyBtn"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.302"/>

</android.support.constraint.ConstraintLayout>
And we did it ✌ I hope you enjoyed this to-target code tutorial, and see you in the next code snippet here! 

How To Copy Text Of EditText Programmatically In Java - Android Code Snippets

Posted on Monday, October 29, 2018

We -developers- need to make some "copy button" which make our apps more easy-to-use for all people who love cool features or people in a hurry. So let's start coding this cool copy text button feature!

Open you Android Studio, create a new project or use an existing one 😂 then make a button or ImageButton (as you like) to use it as a copy-text-button, and choose a certain EditText View to copy the text content of it.

After that, initialize your views inside the java class like this.
Button copyBtn = findViewById(R.id.copyBtn);
EditText toCopy = findViewById(R.id.etCopy);
After getting instance of our view in the java code, we can code the copy to clipboard functionality. Let's do it..
copyBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                 //the function to copy text to clipboard
                copy2Clipboard(toCopy.getText().toString());
            }
        }); 
then we should create the "copy2Clipboard" function like this.
void copy2Clipboard(CharSequence text){
        ClipboardManager clipboard = (ClipboardManager) getSystemService(Context.CLIPBOARD_SERVICE);
        ClipData clip = ClipData.newPlainText("copy text", text);
        if (clipboard != null){
            clipboard.setPrimaryClip(clip);
        }
        Toast.makeText(this," text copied", Toast.LENGTH_LONG).show();
    }
VOILAAA! 😄 .. we made it 😎 you can now run your app with this cool feature 😉

See You In The Next Code Snippet Here!

HTML5 Cheat Sheet

Posted on Wednesday, October 24, 2018

Now, we will understand HTML5 with a smart concise cheat sheet, plus, you can try the html5 code/script online without downloading any software via online real-time code editor here!

Let's start learning..

HTML5 Standard Structure

<html></html> these tags are used at the beginning and end of an HTML document. This is known as the root element. Using these tags tells the website that the web page is being written in HTML5, and that all the other tags within these are HTML formatted.

<title></title> This is used for the title tag of the page. Here you'll place a title that is useful to both search engines and users.

Here's what a typical layout looks like:

<html>
    <head>
        <title>HTML5 Cheat Sheet</title>
    </head>
    <body>
        Your content
    </body>
</html>
<meta/> includes additional information about the page. This includes descriptions, author, publish date, keywords, and other off-page information.

<style>..</style> used to include document style information which is usually CSS.

<head></head> use these to group information specific to the page. This includes title tags, meta descriptions, and links to both script and style sheets.

<body></body> between these tags is where you'll place all the content for users. This includes text, images, and graphic elements.

<base /> signifies the Base URL and specifies all relative links in the document.

<link /> creates association with external page like style sheets.

<script>..</script> all the information of links to external scripts.

HTML5 Web Page Example

<html>
    <head>
        <meta charset="utf-8"/>
        <base href="https://www.abanoubhanna.com" target="_blank"/>
        <title>Abanoub Hanna Website</title>
        <link rel="stylesheet" href="/css/master.css"/>
        <script type="text/javascript">
        var myVariable = 0;
        </script>
    </head>
    <body>
        Your content
    </body>
</html>

Formating Text

<strong></strong> places strong emphasis on something (displays in bold on browsers)

<em></em> the emphasis tag. Turns text into italics on browser.

<cite></cite> This highlights references information. Good for quotes and statements.

<del></del> labels a previously deleted portion of text.

<blockquote></blockquote> these are used for long paragraphs of quotation which are commonly cited as well.

<br/> this creates a line break used for writing blocks of text on different lines.

<sub></sub> subscript text that is smaller and placed a half-line lower than previous text. like the 2 in H2O

<b></b> displays bold text, but you should use <strong> tag instead.

<i></i> displays italic text, but you should use <em> tag instead. It mainly used for thoughts or names.

<pre></pre> monospace text laid out with the whitespace inside the element intact.

<ins></ins> shows a section that has been inserted into the content.

<q></q> used for shorter quotations.

<hr/> creates horizontal rule or sectional break.

<sup></sup> superscript text in half a line higher than previous text. It shows like 2 in X2

<h1></h1> to <h6></h6> : These are the six levels of headings on a page. <h1> is the most important and largest heading, and <h6> is the smallest and the least important heading.

<span></span> it is inline label used to group style elements.

<div></div> containers used to label a page section or the placement of an element.

<p></p> used to organize paragraphs of text.

HTML5 Implementing Images

<img /> this tag is used to display image files.

alt="text" alternative text; used to explain image content to both search engines and users.

width="" specify width in pixels or percentages.

border="" specifies border thickness (if any).

hspace="" spacing on the top or bottom of the image.

<map name=""></map> the name of the map between the image and the map itself.

src="url" the url of file name of the image being displayed.

height="" used to specific image height in either pixels or percentages.

align="" where to align the image relative to other elements on the page.

vspace="" denote spacing on the left or right of the image.

<map></map> informs users that an interactive image is present with clickable areas.

<area /> the image area of an image map.

Example of a simple image

<img src="https://www.abanoubhanna.com/logo.png" alt="website logo" width="140" height="140" />

HTML5 Creating Lists

<ol></ol> numbered lists in sequential order.

<ul></ul> bullet point list (no particular order).

<li></li> specify each item to be bulleted or numbered.

<dl></dl> list item definitions.

<dt></dt> defines a single term inline with body content.

<dd></dd> a description for a defined term.

Example of numbered list

<ol>
    <li>first item</li>
    <li>second item</li>
    <li>third item</li>
</ol>

and the result is:


  1. first item
  2. second item
  3. third item

Example of pullet point list


<ul>
    <li>item</li>
    <li>another item</li>
    <li>one more item</li>
</ul>

and the result is:


  • item
  • another item
  • one more item

HTML5 Document Structure

<a href=""></a> creates a hyperlink with defines anchor text.

<a href="tel:xxxxxx"></a> a link that makes numbers clickable. Great for mobile users.

<a href="#name"></a> anchor text used to bring users to a div element.

<a href="mailto:sample@gmail.com">..</a> a link that pulls up an outgoing messages to a specific email address.

<a name=""></a> anchor text used to bring users to a specific place in a document.

For example

<a href="https://www.abanoubhanna.com">My Tech Blog</a>

HTML5 Adding Forms & Tables

<form></form> tags used to create a form. Combined with attributes to show how the form will operate.

method="" refers to the HTTP method and how to send the form data.

autocomplete turns autocomplete on or off on the form.

accept-charsets identifies character encoding on the form submission.

<fieldset></fieldset> identifies the group of all fields on the form.

action="url" shows where data is sent when a visitor submits the form.

enctype="" dictates how the form data is supposed to be encoded when submitting information to the web server. Only used with method="post".

Novalidate defines whether the form should be validated when submitted.

target used to show where the form response should be displayed after being submitted. Used with _blank , _self , _parent or _top.

<label></label> a label telling the user what to enter in each field.

<input /> the input attribute shows what type of field information to receive from users.

HTML5 Input Type Attributes

type="" specifies field input type, including text, password, date-time, checkbox,.. etc.

name="" the name of the form

value="" the value of input field information.

size="" the input element width in characters.

maxlength="" maximum input element characters allowed.

required tag used to ensure the <input> element is completed before submitting the form.

step="" the number intervals for an input field.

width="" width in pixels of an <input> element.

height="" height in pixels of an <input> element.

placeholder="" a hint for users showing what the <input> element value should be.

pattern="" checks the input against a defined value to ensure the information is correct.

min="" the minimum value of an <input> element.

max="" the maximum value of an <input> element.

autofocus ensures the <input> element comes into focus once a page loads.

disabled disables an <input> element on the form.

<textarea></textarea> spcifies a large text input for longer messages.

HTML5 Select Attributes

<select></select> drop down box / menu for users to select from options.

name="" the title for a drop-down combination box.

size="" the number of options in a drop down box.

multiple allows multiple sections to be made at one time.

required requires a value to be selected before a user can submit a form.

<optgroup></optgroup> specifies the entire grouping of available options.

<option></option> defines one of the available options in the drop down list/menu.

Option Attributes

value="" explains an option's value available for selection.

selected shows the default selection option for users.

<button></button> shows the clickable button for users to submit options.

Example of form

<form action"action_page.php" method="post">
    <fieldset>
        <legend>Basic Information:</legend>
        First name: <br/>
        <input type="text" name="firstname" value="Abanoub" placeholder="First Name"/><br/>
        <input type="text" name="lastname" value="Hanna" placeholder="Last Name"/><br/><br/>
        Blog topic:<br/>
        <select>
            <option value"cooking">Cooking</option>
            <option value="SEO">SEO</option>
            <option value="Fashion">Fashion</option>
        </select>
        <textarea name="description"></textarea>
        <input type="submit" value="Submit"/>
    </fieldset>
</form>

HTML5 Table Formatting

<table></table> these tags define all the content related to a table.

<caption></caption> a description of the table's purpose and the information it contains.

<thead></thead> the headers that label the content in each column.

<tbody></tbody> the body of the table data or information.

<tfoot></tfoot> describes all footer content.

<tr></tr> content within a single row.

<th></th> the data in a single header item.

<td></td> content within a single table cell.

<colgroup></colgroup> groups columns for formatting purposes.

<col /> a single column of information within a table.

Example of Table Formatting

<table>
    <colgroup>
        <col span="2" style="background-color: #f2f"/>
        <col style="background-color:#999"/>
    </colgroup>
    <tr>
        <th>Blog title</th>
        <th>URL</th>
        <th>DA</th>
    </tr>
    <tr>
        <td>Abanoub Hanna for Tech</td>
        <td>www.AbanoubHanna.com</td>
        <td>58</td>
    </tr>
</table>

HTML5 Objects & Iframes

<object></object> describes a file type to be embedded (audio, vidoe, PDF, .. etc)

height="" the height of the object

width="" width of the object

usemap="" the name of the client-side image map within the <object> tag

type="" the type of media the object contains

iFrames formatting

<iframe></iframe> an inline frame that allows external information to be embedded into a document

name="" the name of the <iframe>

src="" the source URL for the object within the <iframe>

srcdoc="" the HTML content within the frame

width="" the width of the <iframe>

<param /> adds extra parameters to help customize the iframe's content.

<embed></embed> a container for another external application of plug-in. Embed can also be used with height, width, src, and type tags above.

Example of object & iframe & embed

<object width="450" height="25"></object>
<iframe src="blogging.html" width="360" height="640">
</iframe>
<embed src="blogging.swf" width="400" height="800"></embed>

New HTML5 Tags

<header></header> the header block for a document.

<main></main> the main content of a document.

<footer></footer> the footer block for a document or section.

<article></article> identifies an article within a document.

<aside></aside> for content contained in a sidebar.

<section></section> a section block in a document.

<details></details> additional facts or information that users can view/hide.

<dialog></dialog> a box or window for dialog.

<figcaption></figcaption> a <figure> element caption that describes the figure.

<figure></figure> a content block featuring diagrams, photos, illustrations, and more.

<mark></mark> displays highlighted text within the content.

<nav></nav> navigation links for users.

<menuitem></menuitem> the menu item a user can raise from a popup menu.

<meter></meter> the scalar measurement with known array.

<progress></progress> the progress of a task, usually used for a progress bar.

<rp></rp> display text in browsers that don't support ruby annotations.

<rt></rt> display east Asian typography character details.

<ruby></ruby> a ruby annotation for east Asian typography.

<summary></summary> contains a heading for a <details> element.

<bdi></bdi> format part of text in a different direction from other text.

<time></time> identifies time and date.

<wbr> a line break within content.

Character Objects

&#34; or &quot; Quotation Marks (")

&#38; or &amp; Ampersand (&)

&#60; or &lt; Less Than (<)

&#62; or &gt; Greater Than (>)

&#160; or &nbsp; Non-breaking Space

&#169; or &copy; Copyright Symbol (©)

&#64; or &Uuml; "at" symbol (@)

&#149; or &ouml; Small bullet (•)

&#153; or &ucirc; Trademark Symbol (™)

Unsupported Tags in HTML5

<acronym></acronym>
<applet></applet>
<basefont></basefont>
<bgsound></bgsound>
<big></big>
<center></center>
<fn></fn>
<font></font>
<frame></frame>
<frameset></frameset>
<isindex></isindex>
<dir></dir>
<noembed></noembed>
<noframes></noframes>
<s></s>
<stike></stike>
<tt></tt>
<u></u>
<xmp></xmp>

Handler Attributes

Onbeforeonload before onload event

Oncanplay media can start play

Oncanplaythrough media can be played to the end

Oncontextmenu context menu is triggered

Ondragenter element dragged on drop target

Ondragleave element leaves valid drop target

Ondragover element is dragged over drop target

Ondragstart at the start of the drag operation

Ondrag element is dragged

Ondrop dragged element is being dropped

Ondragend at the end of drag operation

Ondurationchange length of media is changed

Onbeforeonload before onload event

Ondragenter element dragged on drop target

Oncanplay media can start play

Ondragleave element leaves valid drop target

Oncanplaythrough media can be played to the end

Ondragover element is dragged over drop target

Oncontextmenu context menu is triggered

Ondragstart at the start of the drag operation

Ondrag element is dragged

Ondrop dragged element is being dropped

Onemptied media resource element becomes empty

Onended media has reached the end

Onerror error occurs

Onforminput form gets user input

Onhaschange document has changed

Oninput message is triggered

Oninvalid element gets user input

Onloadeddata media data is loaded

Onloadedmetadata duration of media element is loaded

Onloadstart browser starts to load media data

Onmessage element is invalid

Onmousewheel mouse wheel is being rotated

Onpause media data is paused

Onplay media data is going to start playing

Onplaying media data has start playing

Onprogress browser is fetching media data

Onratechange media data's playing rate has changed

Onscroll element's scrollbar is being used

Onseeked there is an error in fetching media data

Onseeking element's seeking attribute is true

Onstalled there is an error in fetching media data

Onstorage document loads

Onsuspend browser has stopped fetching media data

Ontimeupdate media changes its playing position

Onvolumechange media changes volume, also when mute.

Onwaiting media has stopped playing.

Canvas Elements

HTML <canvas> element is used to draw graphics on the fly via scripting (most commonly JavaScript). The <canvas> element is a container for graphics, you must use a script to draw the graphics themselves.

Canvas Element

Attributes:
width : unsigned long (default: 300)
height : unsigned long (default: 150)

Methods:
string : to DataURL([optional] string type [variadic] any args)
object : getContext(string contextId)

2D Context

Attributes:
Canvas : HTMLCanvasObject[readonly]

Methods:

  • Void
  • save() void
  • restore()

Transformation

Methods:

  • void - scale (float x, float y)
  • void - rotate(float angle)
  • void - translate(float x, float y)
  • void - transform(float m11, float m12, float m21, float m22, float dx, float dy)
  • Set Transform (float m11, float m12, float m21, float m22, float dx, float dy)

Image Drawing

Methods:

  • void - drawImage(Object image, float dx, float dy [optional] float dw, float dh)
    Note: Argument "image" can be of type HTMLImage element, HTMLCanvas element, or HTMLVideo element.
  • void - drawImage(Object image, float sx, float sy, float sw, float sh, float dx, float dy, float dw, float dh)

Compositing

Attributes:

GlobalAlpha - float (Default 1.0)

GlobalCompositeOperation - string (Default: source-over)

Support the following values:

source-over
source-in
source-out
source-atop
destination-over
destination-in
destination-out
destination-atop
lighter
copy
xor

Line Style

Attributes:

Linewidth - float (Default: 1.0)
Linecap - string (Default: butt)
Supports the following values: Butt, Round and Square

Linejoin - string (Default: miter)
Supports the following values: round, and bevel

MiterLimit - float (Default: 10)

Text

Attributes:

Font (type: string) Default: 10px sans-serif
TextAlign (type: string) Default: start (supports any of the following values: start, end, left, right, center)
TextBaseline (type: string) Default: alphabetic (supports the following values: top, hanging, middle, alphabetic, ideographic, bottom)

Methods:

void - fillText (string text, float x, float y, [optional] float maxwidth)
TextMetrics - measureText(string text)
TextMetrics Interface
width - float (Default: reasonly)

Rectangles

Methods:

void - clearRect(float x, float y, float w, float h)
void - fillRect(float x, float y, float w, float h)
void - strokeRect(float x, float y, float w, float h)
Paths
beginPath()
closePath()
fill()
stroke()
clip()
moveTo(float x, float y)
lineTo(float x, float y)
quadraticCurveTo(float cpx, float cpy, float x, float y)
bezierCurveTo(float cp1x, float cp1y, float cp2x, float cp2y, float x, float y)
arcTo(float x1, float y1, float x2, float y2, float radius)
arc(float x, float y, float radius, float startAngle, float float endAngle, boolean anticlockwise)
rect(float x, float y, float w, float h)
isPointInPath(float x, float y)

Pixel Manipulation

Methods:

ImageData - createImageData(float sw, float sh)
ImageData - createImageData(ImageData imagedata)
ImageData - getImageData(float sx, float sy, floay sw, float sh)
void - putImageData (ImageData imagedata, float dx, float dy, [optional] float dirtyX, float dirtyY, float dirtyWidth, float dirtyHeight)

CanvasPixelArray Interface:

Length - unsigned long (Default: readonly)
ImageData Interface:

width - unsigned long (Default: readonly)
height - unsigned long (Default: readonly)
data - CanvasPixelArray (Default: readonly

Have it on your pocket!

Now, you can download the Coding Cheat Sheets App on you awesome android device. This app contains many programming languages & markup languages such as HTML, HTML5, CSS, CSS3, JavaScript, PHP, Rust,.. and more.

HTML Cheat Sheet

Basic Tags

<html></html> creates an HTML document.
<head></head> sets off the title & other info that isn't displayed.
<body></body> sets off the visible portion of the document.
<title></title> puts name of the document in the title bar; when bookmarking pages, this is what is bookmarked.

Body Attributes (only used in email newsletters)

<body bgcolor=?> sets background color, using name or hex value.
<body text=?> sets text color, using name or hex value.
<body vlink=?> sets color of visited links, using name or hex value.

<body alink=?> sets color of active links (while mouse-clicking).

Text Tags

<pre></pre> creates preformatted text.
<h1></h1> to <h6></h6> created headlines. Note: H1 = Largest, H2 = Smaller, .. and H6 = Smallest.
<b></b> creates bold text (should use <strong> instead).
<i></i> creates italicized text (should use <em> instead).
<tt></tt> create typewriter-style text.
<code></code> used to define source code, usually monospace.
<cite></cite> creates a citation, usually processed in italics.
<address></address> creates address section, usually processed in italics.
<em></em> emphasizes a word (usually processed in italics).
<strong></strong> emphasizes a word (usually processed in bold).
<font size=?> </font> sets size of font - 1 to 7 (should use CSS instead).
<font color=?> </font> sets font color (should use CSS instead).
<font face=?> </font> defines the font used (should use CSS instead).

Links

<a href="URL">Clickable text</a> creates a hyperlink to a Uniform Resource Locater (URL) .
<a href="mailto:EMAIL_ِADDRESS">clickable text</a> creates a hyperlink to an email address.
<a name="NAME"> create a target location within a document.
<a href="#NAME">clickable text</a> creates a link to that target location within a document.

Formatting

<p> </p> Creates a new paragraph <br> Inserts a line break (carriage return)
<blockquote> </blockquote> Puts content in a quote - indents text from both sides
<div> </div> Used to format block content with CSS
<span> </span> Used to format inline content with CSS

Lists

<ul> </ul> Creates an unordered list
<ol start=?> </ol> Creates an ordered list (start=xx, where xx is a counting number)
<li> </li> Encompasses each list item
<dl> </dl> Creates a definition list
<dt> Precedes each definition term
<dd> Precedes each definition

Graphical elements

<hr> inserts a horizontal rule.
<hr size=?> sets size (height) of horizontal line
<hr width=?> sets width of rule (as a % or absolute pixel length)
<hr noshade> creates a horizontal rule without a shadow
<img src="URL" /> adds image; it is a separate file located at the URL
<img src"URL" align=?> aligns image left / right / center / bottom / top / middle (use CSS instead)
<img src="URL" border=?> Sets size of border surrounding image (use CSS instead)
<img src="URL" height=?> Sets height of image, in pixels.
<img src="URL" width=?> Sets width of image, in pixels.
<img src="URL" alt=?> Sets the alternate text for browsers that can't process images (required by the ADA). Note: ADA stands for the Americans with Disabilities Act.

Forms

<form> </form> defines a form
<select multiple name=? size=?> </select> Creates a scrolling menu. Size sets the number of menu items visible before user needs to scroll.
<select name=?> </select> Creates a pulldown / dropdown menu
<option> Sets off each menu item
<textarea name=? cols="x" rows="y"></textarea> Creates a text box area. Columns set the width; rows set the height.
<input type="checkbox" name=? value=?> Creates a checkbox.
<input type="checkbox" name=? value=? checked> Creates a checkbox which is pre-checked.
<input type="radio" name=? value=?> Creates a radio button.
<input type="radio" name=? value=? checked> Creates a radio button which is pre-checked.
<input type="text" name=? size=?> Creates a one-line text area. Size sets length, in characters.
<input type="submit" value=?> Creates a submit button. Value sets the text in the submit button.
<input type="image" name=? src=? border=? alt=?> Creates a submit button using an image.
<input type="reset"> Creates a reset button (or CLEAR button)

Tables

Note: use only for data layout - use CSS for page layout.
<table> </table> creates a table
<tr> </tr> Sets off each row in a table
<td> </td> Sets off each cell in a row
<th> </th> Sets off the table header (a normal cell with bold, centered text)

HTML5 Input Tag Attributes

<input type="email" name=?> Sets a single-line textbox for email addresses
<input type="url" name=?> Sets a single-line textbox for URLs
<input type="number" name=?> Sets a single-line textbox for a number
<input type="range" name=?> Sets a single-line text box for a range of numbers
<input type="date/month/week/time" name=?> Sets a single-line text box with a calendar showing the date/month/week/time
<input type="search" name=?> Sets a single-line text box for searching
<input type="color" name=?> Sets a single-line text box for picking a color

Table Attributes (only use for email newsletters)

<table border=?> Sets the width of the border around table cells
<table cellspacing=?> Sets amount of space between table cells
<table cellpadding=?> Sets amount of space between a cell's border and its contents
<table width=?> Sets width of the table in pixels or as a percentage
<tr align=?> Sets alignment for cells within the row (left/center/right)
<td align=?> Sets alignment for cells (left/center/right)
<tr valign=?> Sets vertical alignment for cells within the row (top/middle/bottom)
<td valign=?> Sets vertical alignment for cell (top/middle/bottom)
<td rowspan=?> Sets number of rows a cell should span (default=1)
<td colspan=?> Sets number of columns a cell should span
<td nowrap> Prevents lines within a cell from being broken to fit

Hold on..

If you have Android Smartphone, here is a coding cheat sheet app to remind you with too many markup language syntax, and programming language syntax. You can install the Coding Cheat Sheet App on Google Play Here!

How To Use The Online Free Code Editor

Posted on Monday, October 8, 2018

The free online code editor is a web app or a tool to develop your webpages, websites and web apps using the web technologies. Web technologies are HTML, CSS and Javascript.

Real time code editor web app screenshot

Opensource Code Editor

This code editor is opensource and let you check the code on github, gitlab, bitbucket and sourceforge. I created it as opensource to let you develop it further and let you use or edit it as you like.

Real Time Code Editor

I want to write code/script then the result shows automatically, so I made it automatically. This simple automation helped more more and saved my time. I write the code, and the result appears!

Offline & Online Code Editor

You can use the code editor online here. But you can save the web page by CTRL + S and then you can code on the saved page offline (without Internet Connection).

The easiest way to keep the code editor is to pin it on the bookmarks bar on the web browser use use such as Chrome and Firefox.
© Copyrights Received