TechoYO: Explore Computer Science.: HTML

Showing posts with label HTML. Show all posts

Sunday, 30 June 2013

Spell Check in HTML

A lot of people are unaware of the spell check option that basic HTML offers. It can be implemented with a very small spellcheck attribute as shown below:

DEMO Download Script

HTML code:

<!DOCTYPE HTML>

	<HTML> <HEAD>
	<TITLE>HTML5 spell check example</TITLE>
	</HEAD>
	<BODY>
	<FORM>
	<TEXTAREA style="width:300px;height:150px;border: 1em solid black" spellcheck="false" contentEditable="true">Spell check off</TEXTAREA><BR />
	<TEXTAREA style="width:300px;height:150px;border: 1em solid black" spellcheck="true" contentEditable="true">Spell check on</TEXTAREA><BR />
	</FORM>
	</BODY>
	</HTML>

Saturday, 13 April 2013

Are You Familiar with HTML and CSS? Reasons Why You Should be.

I have always wanted to create my own design for my blog. In my opinion, being able to work with the code of a blog is a huge advantage that many bloggers choose not to pursue. Aside form the design aspect of creating an attractive blog, being able to work with the coding will allow you to make changes and adjustments to your blog any time you want, rather than relying on a professional to do it for you, or rather than just limiting yourself to what’s available with the theme you have chosen.

Most blogs need a bit of customization from time-to-time, and for someone who has no experience with HTML or CSS this be a bit intimidating. However, if you’re working with WordPress you really only need a basic knowledge in order to make many of the customizations that you would like, and you don’t even need to know PHP in most cases (those who aren’t comfortable with PHP just need to be able to recognize it and avoid it when making changes to the HTML).

One Div: The single element HTML/CSS icon database.

Here's something that I came across when I was surfing through the Web last night. I thought it would be extremely useful for all your web projects. Its called One Div, a single element HTML/CSS database that gives you CSS, HTML codes for awesome shapes like this:

Loading indicator

Facebook symbol

And much more. Find more here: http://one-div.com

Saturday, 19 January 2013

Best practices for efficient HTML5 coding

From catswhocode.com

HTML5 is quickly becoming the standard in terms of front-end coding, and as a web developer you definitely need to know how to code HTML5 websites. After almost two years of HTML5 coding, I have compiled this list of my favorites “best practices” with the hope that it will be as useful to you as it is to me.

Awesome jQuery snippets to work with forms

Forms are definitely a very important part of a website, but they can be also a bit tricky to handle. To help you working more easily with HTML forms, I have compiled some very useful jQuery code snippets from my personal snippet library in this article.

Awesome web tools to simplify front-end development

From catswhocode.com

As a developer, I really like tools that can help me save time, or just make the whole development process easier. In this article, I have compiled my favorite web tools to simplify front-end web development.

Why websites should use CSS over HTML?

CSS or cascading style sheets is a type of markup language for website design and development. Better websites with accessibility, design, SEO and hosting costs are generated with CSS. Other table based designs and HTML based designs have lesser benefits. Design capability and functionality both increase with CSS.

From www.position-absolute.com

Forms are a pretty boring piece of the Internet, it’s not fun to create and it’s not fun to interact with. Yet this is mostly our only way to communicate. We should strive to make better forms and make them as painless as possible to complete. Here are some resources worth looking to make better forms in every way possible.

HTML and other programming language editor: NOTEPAD++

NOTEPAD++

HTML5 VIDEO

Video on the Web

Until now, there has not been a standard for showing a video/movie on a web page.

Today, most videos are shown through a plug-in (like flash). However, different browsers may have different plug-ins.

HTML5 defines a new element which specifies a standard way to embed a video/movie on a web page: the <video> element.

To show a video in HTML5, this is all you need:

HTML5 Audio

Until now, there has not been a standard for playing audio files on a web page.
Today, most audio files are played through a plug-in (like flash). However, different browsers may have different plug-ins.
HTML5 defines a new element which specifies a standard way to embed an audio file on a web page: the <audio> element.

How It Works

To play an audio file in HTML5, this is all you need:

HTML forms

HTML Forms

HTML forms are used to pass data to a server.

An HTML form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more.

HTML Blocks

The <div> and <span> tags

HTML elements can be grouped together with <div> and <span>

HTML Block Elements

Most HTML elements are defined as block level elements or as inline elements.

Block level elements normally start (and end) with a new line when displayed in a browser.

Examples: <h1>, <p>, <ul>, <table>

HTML Inline Elements

Inline elements are normally displayed without starting a new line.
Examples: <b>, <td>, <a>, <img>

The HTML <div> Element

LISTS

Basic type of lists:

1.Ordered list

2.Unordered list

An ordered list:

The first list item
The second list item
The third list item

An unordered list:

List item
List item
List item

HTML Images

The <img> tag and the src attribute

In HTML, images are defined with the <img> tag.

The <img> tag is empty, which means that it contains attributes only, and has no closing tag.

To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display.

The alt attribute:

The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.

The value of the alt attribute is an author-defined text:

Set height and width

The height and width attributes are used to specify the height and width of an image.

The attribute values are specified in pixels by default:

Align attribute:

Align attribute can be used with images. eg. align="bottom"

Thursday, 20 September 2012

Head Element

The HTML <head> Element

The <head> element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more.

The following tags can be added to the head section: <title>, <base>, <link>, <meta>, <script>, and <style>.

The HTML <title> Element

The <title> tag defines the title of the document.

The title element is required in all HTML/XHTML documents.

The title element:

defines a title in the browser toolbar
provides a title for the page when it is added to favorites
displays a title for the page in search-engine results

HTML Links

You must have observed a webpage is fully loaded with links that connect to other pages and websites.
So, how do we do this?

HTML Hyperlinks (Links)

A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or a new section within the current document.

When you move the cursor over a link in a Web page, the arrow will turn into a little hand.

Links are specified in HTML using the <a> tag.

The <a> tag can be used in two ways:

To create a link to another document, by using the href attribute
To create a bookmark inside a document, by using the name attribute

Styling in HTML

Inline Styles

An inline style can be used if a unique style is to be applied to one single occurrence of an element.

To use inline styles, use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example below shows how to change the text color and the left margin of a paragraph:

<p style="color:blue;margin-left:20px;">This is a paragraph.</p>

HTML Style Example - Font, Color and Size

The font-family, color, and font-size properties defines the font, color, and size of the text in an element:

<!DOCTYPE html>
<html>

<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>

</html>

HTML Style Example - Text Alignment

The text-align property specifies the horizontal alignment of text in an element:

<!DOCTYPE html>
<html>

<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>

</html>

CSS style sheets can also be used..which we'll see later in the CSS tutorial!

Saturday, 15 September 2012

HTML text formatting

Text formatting refers to the act of making text on the web page appear as desired. eg., making text italics, bold etc.

<!DOCTYPE html>
<html>
<body>

<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><big>This text is big</big></p>
<p><em>This text is emphasized</em></p>
<p><i>This text is italic</i></p>
<p><small>This text is small</small></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

</body>
</html>

This is how the output will appear:

This text is bold
This text is strong
This text is big
This text is emphasized
This text is italic
This text is small
This is_subscript and ^superscript

Pre-formatted text can be displayed using the tag <pre> </pre>. Text inside these tabs appear as such (with the same style) in the webpage.
Abbreviation tag:
The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.
on moving the cursor over WHO on the browser, u'll see the abbreviation appear.

Quotation:

This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.

</blockquote>

<p><b>Note:</b> The browser inserts white space before and after a blockquote element. It also inserts margins.</p>

A short quotation:

<q>This is a short quotation</q>

<p><b>Note:</b> The browser inserts quotation marks around the short quotation.</p>

Output:

A long quotation:

This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.

Note: The browser inserts white space before and after a blockquote element. It also inserts margins.
A short quotation: This is a short quotationNote: The browser inserts quotation marks around the short quotation.

Friday, 14 September 2012

Link and Image basics in HTML

HTML Links

HTML links are defined with the <a> tag.

Example:

HTML Images

HTML images are defined with the <img> tag.

Example:

Note: The filename and the size of the image are provided as attributes.

You give the path of the image in "quotes".

Sunday, 30 June 2013

HTML code:

Saturday, 13 April 2013

Friday, 22 March 2013

Saturday, 19 January 2013

Friday, 18 January 2013

Thursday, 17 January 2013

Wednesday, 16 January 2013

From www.position-absolute.com

Friday, 21 December 2012

Sunday, 25 November 2012

Video on the Web

Thursday, 15 November 2012

How It Works

Sunday, 21 October 2012

HTML Forms

Wednesday, 3 October 2012

The <div> and <span> tags

HTML Block Elements

HTML Inline Elements

The HTML <div> Element

Monday, 24 September 2012

Basic type of lists:

1.Ordered list

2.Unordered list

An ordered list:

An unordered list:

Friday, 21 September 2012

The <img> tag and the src attribute

The alt attribute:

Set height and width

Align attribute:

Thursday, 20 September 2012

The HTML <head> Element

The HTML <title> Element

Monday, 17 September 2012

You must have observed a webpage is fully loaded with links that connect to other pages and websites.So, how do we do this?

HTML Hyperlinks (Links)

Sunday, 16 September 2012

Inline Styles

HTML Style Example - Font, Color and Size

HTML Style Example - Text Alignment

CSS style sheets can also be used..which we'll see later in the CSS tutorial!

Saturday, 15 September 2012

Text formatting refers to the act of making text on the web page appear as desired. eg., making text italics, bold etc.

This is how the output will appear:

Output:

Friday, 14 September 2012

HTML Links

HTML Images

We'll learn more about these tags as we go deeper..sometime later. :)

You must have observed a webpage is fully loaded with links that connect to other pages and websites.
So, how do we do this?