Monday 9 December 2019
color picker
Color Picker
With HTML5, there are some really interactive customizations that visitors to your website will like. The color picker will need a little JavaScript coding and CSS to let you choose what color you want from a palette rather than having to enter an abstract color code. This feature will be particularly user-friendly for those new to coding or without a lot of coding knowledge.
The code can be something like this:
<!--HTML--> Choose a color to color the below text <input id="color_picker" type="color" nchange="showHex();"> <span id="color_hex_value"></span> <h1>COLOR ME !</h1> <!--CSS--> body {
font-family: "bookman old style";
}
<!--JS--> function showHex() {
var hex document.querySelector("#color_hex_value"), h1 document.querySelector("h1");
h1.style.color document.querySelector("#color_picker").value;
}voice recognition
Add voice recognition
In HTML5 and later, you can add speech recognition to a text input, and it's as simple as:
<input type="text" x-webkit-speech />replacing hightlight
Add background image to text
You can add a background image instead of a highlight to your text if the font is large enough. We recommend not using this tip for fonts smaller than 20 pts, or there won't be much of a difference between the image and a background color. The code is:
<SPAN STYLE=”background-image: url(//www.myimage.png ); font-size: 20pt”>NoBoringHighlight…</SPAN>highlight
Highlight text
The <span> tag will let you add highlights to text on both Firefox and IE. You can choose the color of the highlight, of course. The code is simple:
<span style=“ background-color: #FFFF00”>Your text here.</span>horizontal line
Add a horizontal line
A horizontal line to break up long sections of your website will make the page easier on the eye. To add the line, use the <hr/> tag, as in:
<h1>HTML</h1>
<p>HTML is a language for describing web pages.....</p>
<hr>
<h1>CSS</h1>
<p>CSS defines how to display HTML elements.....</p>metadata
Add MetaData
Be seen on Google's searches and other search engine searches by making sure that you have provided meta data about your website. In fact, it is no longer an option, but essential if you want to stay neck on neck with your competition.
Don’t forget to optimize the rest of your website content for users on search engines to find you easily. SEO pros at Freelancer can help you with your back-end SEO and search engine marketing (SEM) needs.
Meanwhile, the code for adding meta is simple:
<meta name=”description” content=”Used auto parts for sale”>
<meta name=”keywords” content=”fuel filters, brake discs, belts” />INTERESTING TO KNOW
Tableizer
This one is not really an HTML trick since Tableizer is an external app. But it's great for building HTML tables out of data, using existing Calc or Excel spreadsheet templates. You only have to paste your cells into the Tableizer, and it will generate an HTML code snippet to paste into your website code. The result is a neat table where you can edit details like background colors to customize.
Sunday 8 December 2019
Monday 25 November 2019
Monday 28 October 2019
JAVASCRIPT BASICS
JavaScript Can Change HTML Content
One of many JavaScript HTML methods is
getElementById().
This example uses the method to "find" an HTML element (with id="demo")
and changes the element content (
innerHTML) to "Hello
JavaScript":
Example: document.getElementById("demo").innerHTML = "Hello JavaScript";
Monday 23 September 2019
HTML Basic Examples
HTML Documents
All HTML documents must start with a document type declaration:
<!DOCTYPE html>.
The HTML document itself begins with
<html> and ends with </html>.
The visible part of the HTML document is between
<body> and </body>.
example:
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML Headings
HTML headings are defined with the
<h1> to <h6> tags.<h1> defines the most important heading. <h6> defines the least important heading:
example:
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
HTML Paragraphs
HTML paragraphs are defined with the
<p> tag:
example:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is another paragraph.</p>
HTML Definition
Hypertext Markup Language (HTML)
Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.
Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects such as interactive forms may be embedded into the rendered page. HTML provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.
HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects such as interactive forms may be embedded into the rendered page. HTML provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.
Tags such as
HTML can embed programs written in a scripting language such as JavaScript, which affects the behavior and content of web pages. Inclusion of CSS defines the look and layout of content. The World Wide Web Consortium (W3C), former maintainer of the HTML and current maintainer of the CSS standards, has encouraged the use of CSS over explicit presentational HTML since 1997.
<img /> and <input /> directly introduce content into the page. Other tags such as <p> surround and provide information about document text and may include other tags as sub-elements. Browsers do not display the HTML tags, but use them to interpret the content of the page.HTML can embed programs written in a scripting language such as JavaScript, which affects the behavior and content of web pages. Inclusion of CSS defines the look and layout of content. The World Wide Web Consortium (W3C), former maintainer of the HTML and current maintainer of the CSS standards, has encouraged the use of CSS over explicit presentational HTML since 1997.
Subscribe to:
Posts (Atom)