TUTORIAL » HTML Home http://phpforms.net/tutorial Just another WordPress weblog Fri, 27 Apr 2012 05:00:49 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 HTML Webserver http://phpforms.net/tutorial/html-home/html-webserver.html http://phpforms.net/tutorial/html-home/html-webserver.html#comments Sun, 17 Jan 2010 21:59:25 +0000 admin http://phpforms.net/tutorial/?page_id=144
After HTML coding process is completed, the webpage needs to be published, to make it available for the audience. To enable this, it is necessary to save the webpage on a web server. After IIS or PWS installation, any PC can serve as a web server. IIS or PWS are web server components.
IIS contains a set of services designed specifically for MS Windows. It is included into Win 2000, Win XP and Vista. It is quite easy to install and use this application. IIS includes Active Server Pages, which can be used for making interactive and dynamic web applications. Personal Web Server is designed for use with older versions of WindowsOS, such as Win 95, Win 98, and Win NT. It is recommended to use IIS, because it more up-to-date and secure.
HTML events
HTML URL encode
HTML summary
HTML references
]]> http://phpforms.net/tutorial/html-home/html-webserver.html/feed 0 HTML URLs http://phpforms.net/tutorial/html-home/html-urls.html http://phpforms.net/tutorial/html-home/html-urls.html#comments Sun, 17 Jan 2010 21:58:55 +0000 admin http://phpforms.net/tutorial/?page_id=142
In the link, which the webpage content contains, <a> tag is showing the way to the resource in the web with the help of the href attribute.
URL (or uniform resource locator) defines the address in the web. A full and correctly formulated web address should look like the following:
scheme://host.domain:port/path/filename
Scheme is the type of internet service, usually it is http. Host contains information about the domain host, usually, www. The domain defined the target domain like conkurent.com. Port defines the port number, 80 by default. The path is the folder on the server. In case the path is omitted, the document is located at the root folder. The filename is the destination document name.
Examples:
<a href="news:alt.html"> is used for accessing newsgroups
<a href="ftp: is used for ftp downloading
<a href="mailto: is used for linking to a mail service
HTML head
HTML meta
HTML scripts
HTML events
]]> http://phpforms.net/tutorial/html-home/html-urls.html/feed 0 HTML URL encode http://phpforms.net/tutorial/html-home/html-home.html http://phpforms.net/tutorial/html-home/html-home.html#comments Sun, 17 Jan 2010 21:58:25 +0000 admin http://phpforms.net/tutorial/?page_id=140
URL encoding is used to transform elements into a form widely accepted throughout the web. URL itself is the address of a webpage.
URLs should be sent throughout the web only using the ASCII set. Once those characters that are not included into this set occur, they should be converted for further acceptance. URL encoding changes non-acceptable characters for % followed by digital code, corresponding to this specific character in ISO-8859-1 character-set.
*Important note: URLS cannot contain spaces. Spaces are replaced with + character.
HTML scripts
HTML events
HTML webserver
HTML summary
]]> http://phpforms.net/tutorial/html-home/html-home.html/feed 0 HTML Tables http://phpforms.net/tutorial/html-home/html-tables.html http://phpforms.net/tutorial/html-home/html-tables.html#comments Sun, 17 Jan 2010 21:57:59 +0000 admin http://phpforms.net/tutorial/?page_id=138
Tables are a very important part of the web page and are widely used. Tables are defined with a <table> tag. To divide a table into the rows, <tr> tag is used. <td> (short for “table data”) tag is used for subdividing rows into cells. Cells may contain various content, like texts, images, tables or forms.
Example:
Border attribute is necessary to define table borders. If this attribute is missing, the table will be displayed without borders.
Example:
Table headings are defined with the help of (th) tag.
Example:
*Important note: in case the table contains an empty cell, it will be displayed without borders in most browsers. To make the border visible for an empty cell, add &nbsp (a non-breaking space) to a cell.
Example:
HTML Links
HTML Images
HTML Lists
HTML Forms
]]> http://phpforms.net/tutorial/html-home/html-tables.html/feed 0 HTML Summary http://phpforms.net/tutorial/html-home/html-summary.html http://phpforms.net/tutorial/html-home/html-summary.html#comments Sun, 17 Jan 2010 21:57:35 +0000 admin http://phpforms.net/tutorial/html-home/html-summary.html
What is necessary to know about HTML to start working with it?
HTML is a markup language used for creating web pages. HTML coding enables adding, editing and formatting text, images; add links, tables, forms and frames, thus creating a document, which will be read by all major browsers. HTML uses specific tags, that formulate output content.
More profound knowledge of HTML requires studying XHTML and CSS. XHTML is necessary to reformulate HTML 4.01 into XML.
CSS is necessary to control multiple pages simultaneously. CSS allows moving all formatting from an HTML document into a separate style sheet.
Simple HTML document: 
1
2
3
4
5
6
7
8
9
10

<html>
	<head>
		<title>This is the title of your page</title>
	</head>
	<body>
		<h1>Hello!</h1>
		<p>It’s our first  HTML page. 
		<strong>This text is bold.</strong></p>
	</body>
</html>
Main HTML Tags
<html> - defines the HTML document’s title
<body> - defines the main part or the document body
<h1> - <h6> - defines the headers from 1 to 6
<p>- defines the text paragraph
<br> - insert a single line folding
<hr> - defines the horizontal line
<!--> - defines a commentary
Hyperlinks: 
1

<a href="filename" target="_self">the link text</a>
HREF attribute assigns the value of document address, on which this link points.
Filename – the file name or Internet address, that needs to be referred to.
the link text – the text of hyperlink that will be visible in HTML document.
TARGET – assigns the value of window or frame in which the document will be opened. Possible attribute values:
_top – opening the document in current window
_blank – opening the document in new window
_self – opening the document in current frame
_parent – opening the document in parent frame.
The value by default: _self
TEXT BLOCKS
  • <H1> … </H1>, <H2> … </H2>, … ,<H6> … </H6> — headers of 1, 2, … 6 levels.
  • <P> — new indention. In the end of the indention tag </P> can be putted, but it’s not necessary.
  • <BR> — new text line. This tag is odd (i.e. there is no </BR> tag)
  • <HR> — horizontal line
  • <BLOCKQUOTE> … </BLOCKQUOTE> —quotation. Usually the text moves to the right
  • <PRE> … </PRE> — preview mode. In this mode text is putted into a border and is not formatted (i.e. tags except </PRE> are ignored, and the line folding is placed only where it exists in original document).
  • <DIV> … </DIV> — block (usually is used for CSS)
  • <SPAN> … </SPAN> — line (usually is used for CSS)
LISTS
1
2
3
4
5

<ul>
  <li> first element </li>
  <li> second element </li>
  <li> third element </li>
</ul>
This was an example of unnumbered list. If <ol> tag is putted instead of <ul>, the list becomes enumerated.
The list of definitions:
1
2
3
4
5

<dl>
  <dt> cat </dt> <dd> says miau </dd>
  <dt> dog </dt> <dd> says woof </dd>
  <dt> crocodile </dt> <dd> says nothing </dd>
</dl>
It will be the following:
cat
says miau
dog
says woof
crocodile
says nothing
Tags <li>, <dt>, <dd> can be unclosed (used without closing tags)
INSERTING OBJECTS
  • EMBED — for inserting different objects: non-HTML documents and media-files
  • APPLET — for inserting Java-applets
  • SCRIPT — for inserting scripts.
IMAGES
1
2

<img src=url alt="text" title="text" 
width="size (pix, %)" height="size (pix, %)">
  • IMG – inserting images. This tag is not closed.
    • SRC – name or URL
    • ALT – alternative name (will be shown when image downloading is banned in browser)
    • TITLE – Short image description ( will be shown when pointing at the image by cursor)
    • WIDTH, HEIGHT - measurement (if they don’t coincide with image size, the image will be stretched or compressed)
    • ALIGN – defines the parameters of the text flow (top, middle, bottom, left, right)
    • VSPACE, HSPACE – define the parameters of vertical and horizontal space around the image.
The image can represent some link:
1

<a href=url ><img src=url></a>
TABLES
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<table border="1" cellspacing="0">
  <caption> amount of apples in the baskets </caption>
  <th> basket </th> 
  <th> apples </th>
  <tr>
    <td> 1 </td> 
    <td> 5 </td>
  </tr>
  <tr>
    <td> 2 </td> 
    <td> 11 </td>
  </tr>
  <tr>
    <td> 3 </td> 
    <td> 7 </td>
  </tr>
</table>
  • TABLE — creats a table. Tag parameters:
    • BORDER — the thickness of borders inside the table
    • CELLSPACING — distance between cells
  • CAPTION — table header (this tag is optional)
  • TR — table line
  • TH — table row header (this tag is optional)
  • TD — table cell
  • height – table height
  • width – table width
  • CELLPADDING – defines a distance in pixels between table border and its content (this is a parameter of TABLE tag)
  • ALIGN (the parameter of TABLE, TR, TH, TD tags) – defines the type of text alignment.
FORMS
  • FORM — creates a form.
  • NPUT — input element (can have a lot of functions — from text sending to sending the form).
  • TEXTAREA — multi-line text input.
  • SELECT — the list (usually in the form of drop-down menu).
  • OPTION — the list item.
HTML URL encode
HTML webserver
HTML references
Basic PHP Syntax
]]> http://phpforms.net/tutorial/html-home/html-summary.html/feed 0 HTML Styles http://phpforms.net/tutorial/html-home/html-styles.html http://phpforms.net/tutorial/html-home/html-styles.html#comments Sun, 17 Jan 2010 21:56:58 +0000 admin http://phpforms.net/tutorial/?page_id=135
Formatting is included into a style sheet. When formatting the document, browser addresses the style sheet for the information about correct formatting that should be applied to the document.
Styles sheet are divided into three types depending upon the way it is inserted.
External type of a style sheet. It is recommended to use it when the style will be applied to multiple pages. One file is enough to change the appearance of all pages. Each separate page should link to a style sheet. The <link> tag is included into a head section of the web page.
Internal type of a style sheet. Internal style sheet suits the case when each separate document requires its unique style. Internal styles are defined in the head sections with the help of the <style> tag.
Inline type of a style sheet. This type is used when it is necessary to apply formatting to a part of page content. It requires to use style attribute in a corresponding tag.
Examples:
Style tags are as following:
<style> is used to define the style
<link> is used to define the way to resource
<div> is used to define a separate section of the document
<span> is used to define a separate section of the document
HTML fonts
HTML 4.0
Character entities
HTML head
]]> http://phpforms.net/tutorial/html-home/html-styles.html/feed 0 HTML scripts http://phpforms.net/tutorial/html-home/html-scripts-2.html http://phpforms.net/tutorial/html-home/html-scripts-2.html#comments Sun, 17 Jan 2010 21:55:28 +0000 admin http://phpforms.net/tutorial/?page_id=133
In case it is necessary to insert a script into a webpage, <script> tag should be used. The type attribute will be helpful in defining the scripting language.
Example:
There are browsers that do not support <script> tags. In this case browser will display the content of the <script> tag as an ordinary content. To avoid this, script should be enclosed into comments. Old-style browsers will not display script, while advanced browsers will display it, ignoring comments.
Example:
The <noscript> tag is used to define an alternate text, which will be displayed in case the script is not performed. It is used for those cases when browser accepts <script> tag, but does not accept the script inside it, and it will display the alternate text instead.
Example:
Script tags are as following:
<script> is used to define the script
<noscript> defines a nalternate text
<object> is used for an embedded object
<param> defines parameters
HTML meta
HTML URLs
HTML events
HTML URL encode
]]> http://phpforms.net/tutorial/html-home/html-scripts-2.html/feed 0 HTML references http://phpforms.net/tutorial/html-home/html-references.html http://phpforms.net/tutorial/html-home/html-references.html#comments Sun, 17 Jan 2010 21:38:31 +0000 admin http://phpforms.net/tutorial/?page_id=129
Applications
HTML 4.01 / XHTML 1.0 – list of tags alphabetically
HTML / XHTML Standard Attributes – table the same as acc. section
TML / XHTML Standard Event Attributes – table the same as that in acc. section
HTML / XHTML Standard Event Attributes – table, the same as in the acc. section
HTML Color Names – full color table with the names and codes
HTML Character Sets – code table ISO, ASCII
HTML Symbol Entities – symbol table
HTML URL Encoding Reference – table of characters which encoded, repeats section HTML URL encode, table only added to it as a symbol of what the code is replaced
HTML Lang Codes – table of ISO language codes
HTTP Status Messages – the list of http messages
HTML webserver
HTML summary
HTML summary
PHP Arrays
]]> http://phpforms.net/tutorial/html-home/html-references.html/feed 0 HTML Paragraphs http://phpforms.net/tutorial/html-home/html-paragraphs.html http://phpforms.net/tutorial/html-home/html-paragraphs.html#comments Sun, 17 Jan 2010 21:17:05 +0000 admin http://phpforms.net/tutorial/?page_id=124
Paragraphs are defined by <p> tags. This tag is associated with a horizontal line before and after the paragraph, so it is not needed to add it manually to this tag.
Example:
*Important note: do not forget to use end tag </p>. Although in most cases browsers interpret it correctly, future versions of HTML/XHTML will not accept it.
To start a new line without paragraph, <br /> tag is used.
Example:
*Important note: <br /> tag is an empty tag, and it does not require an end tag.
It is not always recognizable how future HTML will be displayed, depending upon various screen size and resolution, in full-size and resized windows. HTML does not allow changing the result by adding extra lines or spaces in webpage code. Browsers automatically remove extra lines and spaces. So it is important to remember that any amount of lines will be interpreted as one and any amount of spaces will count as one.
HTML attributes
HTML headings
HTML formatting
HTML Links
]]> http://phpforms.net/tutorial/html-home/html-paragraphs.html/feed 0 HTML Meta http://phpforms.net/tutorial/html-home/html-meta.html http://phpforms.net/tutorial/html-home/html-meta.html#comments Sun, 17 Jan 2010 21:16:35 +0000 admin http://phpforms.net/tutorial/?page_id=122
Search engines registration Web-server, web site or page using the information stored in a special META tags, which are placed between the tags and the most novice Web-masters and Web-designers do not pay attention to these tags. META tags are not visible when viewing the document and significantly increase its size, but cannot do without them. Recommendations for the preparation of meta tags.
The correctness of compiling meta tags makes it possible that your site was easy to find using search engines among the vast number of other sites! Follow these recommendations to do this.
1. The length of the contents of META tags descriptions should not exceed 200 characters, keywords - 1000 characters. This is due to the fact that search engines tend to use just such magnitude when indexing information about your site. You can get a negative result if the search engines throw away part of the description in excess of established norms, resulting in a catalog does not fall all the desired information or the server simply rejects the registration of your site.
2. It is necessary to include all the most commonly used in your site terms and their synonyms in the tag descriptions. You can also include terms that are not relevant to your pages, but the Internet such behavior is considered invalid. The list of keywords and phrases can be inserted. In this case, your site increases the chance to get to the very top of the list issued by the search engine (in case of a match it with one that introduces the user).
3. To increase your site's ranking and hit him in the upper part of the search list each term must be included in the description, repeat about 3 times. Search engines typically work with META tags and in their absence is already with the page. Sometimes this leads to a site in the list of top 10, but can cause IR negative results (before registering, check your favorite search engine, making the request and looking at the keywords for sites that stand in the top position).
4. Use the descriptions and the list of terms as possible synonyms.
5. Do not use the descriptions in the list of terms and concepts and words loosely connected with each other.

]]> http://phpforms.net/tutorial/html-home/html-meta.html/feed 0 HTML Lists http://phpforms.net/tutorial/html-home/html-lists.html http://phpforms.net/tutorial/html-home/html-lists.html#comments Sun, 17 Jan 2010 21:15:52 +0000 admin http://phpforms.net/tutorial/?page_id=120
HTML supports ordered (numbered) lists, unordered (bulleted) lists and definition lists.
Unordered lists are usually marked with bullets. Unordered list starts with <ul> tag. Each item of the list starts with <li> tag. It is possible to add paragraphs, images, links to the list.
Example:
Ordered list contains items, marked with numbers. To define the beginning of an ordered list <ol> tag is used. Elements of an ordered list start with <li> tag.
Example:
Definition list contains list items with a description provided for each list item. Such list starts with <dl> (short for “definition list”) tag. Each item starts with <dt> (short for “definition term”) tag. Each description starts with <dd> (short for “definition description”) tag.
Example:
HTML Images
HTML Tables
HTML Forms
HTML colors
]]> http://phpforms.net/tutorial/html-home/html-lists.html/feed 0 HTML Links http://phpforms.net/tutorial/html-home/html-links.html http://phpforms.net/tutorial/html-home/html-links.html#comments Sun, 17 Jan 2010 21:15:22 +0000 admin http://phpforms.net/tutorial/?page_id=118

HTML Links

Web document requires an opportunity to create multiple connections between pages and sites. In short, link is address to a certain document or webpage. Such connections are created using specific tags. Texts, forms or images can be used for creating links between webpages.
It is necessary to define certain terms before explaining how linking is represented in HTML code. Hyperlink points to a certain resource located on the web, be it an image, a document, a movie etc.. Anchor is a term used to define content within the webpage, tied to a hyperlink. <a> is an HTML element, which defines anchors and hyperlinks in the HTML code.
HTML link must be defined in accordance to the rules of HTML syntax. It should be formulated the following way:
Example
1

<a href="url">Link text</a>
Example description: start tag <a href="url"> contains link attribute. Link text (i.e. an element content) is the text to be displayed on the page.
Element content should necessarily contain the text. It may contain image or any other HTML element.
Href is an attribute, which defines the link destination.
Example:
1

<a href="http://www.conkurent.com/">Visit Conkurent</a>
Target is an attribute, which defines how the link will open.
Example:
Name is an attribute, which associates <a> element with a specific name anchor containing in the HTML document. Named anchor will not be displayed in some specific manner.
Example:
Named anchors are used for multiple purposes. For instance, they can be used for creating contents at the beginning of the document. An anchored name will be given to each document section, and links to the names will be included into the contents.
*Important note: it is recommended to use slash to divide references into subfolder. Formulating link without a trailing slash will produce two requests to a web server, because browser will add slash and create a new request.
]]> http://phpforms.net/tutorial/html-home/html-links.html/feed 0 HTML layout http://phpforms.net/tutorial/html-home/html-layout.html http://phpforms.net/tutorial/html-home/html-layout.html#comments Sun, 17 Jan 2010 21:14:47 +0000 admin http://phpforms.net/tutorial/?page_id=116
Pages designed in a form of newspaper columns are widespread in the web. This layout can be designed with the help of HTML.
HTML tables are a recognized tool for formatting a layout of the web page. It allows adding columns to a text of part of it. A <table> HTML tag is used for dividing the page into columns. To avoid representing text in a table, borders should be invisible, and some space between the cells should be added. Table layout allows adding much text to the column, aligning it.
Example:
It is possible to add color either to both columns or to one of them. The layout is formatted the same way.
Example:
HTML Forms
HTML colors
HTML frames
HTML fonts
]]> http://phpforms.net/tutorial/html-home/html-layout.html/feed 0 HTML Introduction http://phpforms.net/tutorial/html-home/html-introduction.html http://phpforms.net/tutorial/html-home/html-introduction.html#comments Sun, 17 Jan 2010 21:13:15 +0000 admin http://phpforms.net/tutorial/?page_id=113
HTML stands for the Hyper Text MarkUp Language. This language is used by browser for representing page texts and graphics. HTML is an independent platform, which provides tools for creating structured documents with the help of specific structural text semantics. Being an independent platform, HTML can be written, edited and viewed at any type of operating system.
HTML tags define the whole structure of the webpage text. Tags are enclosed in angle brackets, like <s>. Usually, HTML tags are used in pairs, i.e. opening (or start) tag and closing (or end) tag, like <b> and </b>. A pair of tags, consisting of start tag and end tag, is usually referred to as element.
HTML pages contain tags and plain text. Tags are commands that are interpreted by web browser for displaying the page. Writing in correct HTML format makes the webpage structured and easy-to read, understand and edit.
HTML (HyperText Markup Language) - hypertext markup language for documents. HTML is intended for making documents suitable for reading from screen monitor.

How to create HTML?

Different text editors (e.g., Notepad), word processors (Word), <strong>HTML tag editors<strong/> and visual HTML editors can be used for creating HTML documents. You can design an HTML document in a simple Notepad. To get a <strong>valid HTML</strong> page you need to write HTML code in a text file holding to a certain standard, then save it on your hard drive, change the extension to .html or .htm.

HTML Document Structure

What are tags in HTML?

Tag is the text markup tool. Tags can written in a lower or upper case, there is no difference here. Tags can be paired or unpaired (odd). An example of a pair tag is the tag <html> </html>. This tag starts and finishes any <strong>HTML document</strong>. The second part of pair of tag differs from the first only by the character "/" but the first part of the tag may also contain additional parameters. For example the tag <font size="4"> </font>, the parameter size = "4" determines the size of the text. An example of an odd tag is the tag <hr> - the tag that inserts a horizontal line in the HTML document, such as at the end of this paragraph.

Example Simple Html

1
2
3
4
5
6

<html>
<body>
<h1>Example: My First Html Document</h1>
<p>Example: My First Html Document</p>
</body>
</html>
HTML Get Started
HTML Basic
]]> http://phpforms.net/tutorial/html-home/html-introduction.html/feed 0 HTML Images http://phpforms.net/tutorial/html-home/html-images.html http://phpforms.net/tutorial/html-home/html-images.html#comments Sun, 17 Jan 2010 21:12:19 +0000 admin http://phpforms.net/tutorial/?page_id=111
Images are an inherent part of almost any webpage, so it is important to use them properly. <img> tag is used for inserting the images into the webpage. Note that the image tag is empty, so it does not require the end tag and contains attributes only. To add an image to the page, src (short for “source”) tag should be used.
Syntax example:
Image url shows the browser where a desired image is stored to take this image and insert it into the document. The browser inserts an image into the place in the text, where image tag is located.
Alt attribute is used for formulating an image alternate text. The value of this attribute is defined by the code author.
Example:
*Technically, alternate text describes the image for those cases when it does not load properly and informs site visitors what is supposed to be displayed. The browser displays the alternate text in case if image cannot be displayed. It is recommended to provide alternate text for all images on a page.
HTML formatting
HTML Links
HTML Tables
HTML Lists
]]> http://phpforms.net/tutorial/html-home/html-images.html/feed 0 HTML Headings http://phpforms.net/tutorial/html-home/html-headings.html http://phpforms.net/tutorial/html-home/html-headings.html#comments Sun, 17 Jan 2010 21:11:46 +0000 admin http://phpforms.net/tutorial/?page_id=109
Headings are defined by a range of tags, from <h1> to <h6>, with <h1> referring to the largest, and <h6> to the smallest heading.
*Important note: browser adds an empty line before and after heading automatically.
Example:
Headings are of a much importance for search engine indexing. Search engines use headings to define the structure of the webpage and webpage content. It is strongly recommended to avoid using headings tags for text.
*Important note: the webpage will look well-organized if headings will be used logically - <h1> for main heading, <h2> for heading of a lower level etc.
HTML Line is a tag used for creating a horizontal line - <hr />. While horizontal tags are added by the browsers automatically in case of headings, You may need to add a horizontal line manually.
Example:
HTML comments are helpful in case it is necessary to add a comment to the code. To make it invisible for the browser, and to make it non-displayable, comment should be enclosed into <!—and -->.
Example:
HTML Elements
HTML attributes
HTML Paragraphs
HTML formatting
]]> http://phpforms.net/tutorial/html-home/html-headings.html/feed 0 HTML Head http://phpforms.net/tutorial/html-home/html-head.html http://phpforms.net/tutorial/html-home/html-head.html#comments Sun, 17 Jan 2010 21:11:03 +0000 admin http://phpforms.net/tutorial/?page_id=107
The head element contains descriptive document information. Those elements that are present in the HTML head section are not displayed by the browser. According to HTML code rules, there is a set of elements that are acceptable for the head section: <script>, <base>, <meta>, <title>, <style>, and <link>.
Example:
The list of head tags:
<head> describes the document
<title> gives the title of the document
<base> gives base URL
<link> shows the reference
<meta> gives descriptive information
HTML styles
Character entities
HTML meta
HTML URLs
]]> http://phpforms.net/tutorial/html-home/html-head.html/feed 0 HTML Get Started http://phpforms.net/tutorial/html-home/html-get-started.html http://phpforms.net/tutorial/html-home/html-get-started.html#comments Sun, 17 Jan 2010 21:02:36 +0000 admin http://phpforms.net/tutorial/?page_id=105
There are lots of html-editors that would be helpful in creating webpages. However, knowledge of HTML give more extended options in page writing and editing. Besides, there are tags that certain HTML editors do not understand. Knowing basics of HTML allows reading codes of other writers and using advanced features in your own code. Writing HTML does not require any specific editor, it can be easily done by hand in any text editor, for instance, Windows notepad. Being an experienced web developer, you may combine writing your own code with editing in professional HTML editor.
HTML Introduction
HTML Basic
HTML Elements
]]> http://phpforms.net/tutorial/html-home/html-get-started.html/feed 0 HTML Frames http://phpforms.net/tutorial/html-home/html-frames.html http://phpforms.net/tutorial/html-home/html-frames.html#comments Sun, 17 Jan 2010 21:02:07 +0000 admin http://phpforms.net/tutorial/?page_id=103
HTML code allows creating vertical and horizontal frameset.
Frames allow combining two or more HTML documents within the limits of a single browser window. Each HTML document of these is referred to as an independent frame.
There are some disadvantages of using framesets. At first, HTML developer should control more HTML documents. The second, such page is difficult to print.
The <frame> tag is used to point out which HTML document should be put into frame.
Example:
*Important note. In case the frame has borders that are visible to user, user can resize it. To forbid doing this, add <noresize> to the <frame> tag.
Example:
Some browsers may not support frames. The <noframes> tag should be added for such cases.
Example:
*Important note: the <body></body> tags must not be used with <frame> tags. But in case <noframes> tag is present in the page code, <body></body> must be added.
Example:
Frame–related tags:
<frameset> is used to define a set of frames
<frame> defines a single frame
<noframes> is used for browsers that do not support frames
<iframe> is used for inline frame
Examples:
HTML colors
HTML layout
HTML fonts
HTML 4.0
]]> http://phpforms.net/tutorial/html-home/html-frames.html/feed 0 HTML Forms http://phpforms.net/tutorial/html-home/html-forms-2.html http://phpforms.net/tutorial/html-home/html-forms-2.html#comments Sun, 17 Jan 2010 20:56:04 +0000 admin http://phpforms.net/tutorial/?page_id=101
HTLM form is a tool, enabling webmaster to obtain feedback from the site visitors. Form may contain various fields, defined by the webmaster.
Form elements allow visitor to enter certain information into the form field, which can be represented in a variety of types – a drop-down menu, a text field, a checkbox, a radio button etc..
<form> tag is used to mark forms.
<input> tag is a form tag, which is associated with type attribute, defining input type. There is a range of input types that are used most often. Their brief description is given below.
Text field type is designed for entering information in form of letters or numbers.
Example:
*Important note: the form itself is not displayed. By default, the width of the text field is 20 characters.
Radio buttons are used when it is necessary to give the user a choice from a limited amount of options.
Example:
Checkboxes are used to give a user a list of options to choose from.
Example:
Form action attribute is necessary to define what actions should be performed after submitting the forms. Content of the form is sent to the server, and form action attribute defines the destination folder to send collected data to.
FORM - With the help of the following elements you can create questionnaires and different fields for text inputting with the possibility of subsequent sending the submitted forms to your server.
Elements for form creating:
FORM - creates a form

TEXTAREA - creates a field for inputting a few lines of text
SELECT - creates a menu
OPTION - Creates a separate items of the menu (see SELECT)
INPUT - creates a field in the form

FORM - is used to create a form. It should be the presence of initial and ending tags. Inside the FORM element the use of the majority of HTML-elements is allowed.
NAME - defines the name of the form, unique to this document. Used if there is a few forms in the document.
ACTION - a required attribute. Specifies the URL for sending the form content - the path to the script of the server that acts in current form.
METHOD - defines the way to send the contents of the form. Possible values are GET (default) and POST.
ENCTYPE - defines the method of coding the contents of the form when you send. The default is "application / x-www-form-urlencoded".
TARGET - defines the name of the window, which returns a result of a submitted form. Possible values: _self, _parent, _top, _blank, or clearly specified the name of the window. 

1
2
3
4
5
6
7
8
9
10

<HTML> <body>
     <- Creating a form ->
     <FORM ACTION="my.php" METHOD="Post" NAME="Form">
     <! – Inside the form of creating a text box: ->
     Last Name:
     <INPUT TYPE="text" name="myname" SIZE="20" VALUE="VALUE">
     <! – The "Send" button: ->
     <INPUT TYPE="submit" VALUE="Otpravit">
     </ FORM>
</ body> </ HTML>
HTML (HyperText Markup Language) is the predominant markup language for web pages. It helps describe the structure oftext-based information in a document and denotes certain text as links, headings, paragraphs, lists. Besides, it supplements the text with interactive forms, embedded images,
and other objects. HTML is written with "tags", surrounded by angle brackets. HTML also describes, to some extent, the appearance of a document, and can include embedded scripting language code (such as JavaScript) that can affect the behavior of Web browsers and other HTML processors.

HTML markup consists of several key components, including elements (and their attributes), character-based data types, character references and entity references. Another important component is the document type declaration, which specifies the Document Type Definition. Elements are the base for HTML markup. Elements have two main properties: attributes and content. Each attribute and each element's content has certain restrictions that must be followed for a HTML document to be considered valid. As a rule, an element has a
start tag (e.g. ) and an end tag (e.g. </element-name>). The element's attributes are located in the start tag and content is located between the tags (e.g. Content). There are several types of markup elements: structural, presentational and hypertext markup . Structural markup describes the purpose of text. Presentational markup describes the appearance of the text, independently of its function. Hypertext markup links parts of the document to other documents.

Forms are a tool for the webmaster to get information from the user, such as: his name, email address, credit card, etc. They allow the user to enter requested information and submit it for processing. A form takes information from the viewer who may store that data into a file, place an order, gather user statistics, register to the web forum, or maybe subscribe to the weekly newsletter. Forms are the most popular means of making web pages interactive.

HTML form elements, often called “controls” (like text fields, text area fields, drop-down menus, radio buttons,
file, reset, submit button, checkboxes, select box etc.), allow the user to enter data in a form. Users are able to interact with forms through these controls. When the user clicks on the "Submit" button, the input of the form is sent to the server. The form's action attribute gives the name of the file to send the content to. The file defined in the action attribute does something with the received data.

A form is defined with the <form> tag. For example, the 

1

<a href="/" title="Html Forms">Html forms</a>

can be used to insert credit card data to order a product or can be used to retrieve data. Besides, HTML forms are applied to query and display existing data in a similar manner to mail merge forms, with the same benefits. The implementation of HTML language often invokes user interface idioms automatically, such as grids and themes, which minimizes programming time, costs and risks.

The most used form tag is the <input> tag. The type of input is specified with the type attribute. A form is defined with the <form> tag. The form itself is not visible.

After the form is submitted, the search words go to a program on the server. The program will search its database for matches. Afterwards, it creates a webpage with the results, which is sent back to the visitor. A typical HTML form example is a search engine.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<form>
     <table>
      <tr>
          <td>First Name: *</td>
          <td><input type="text"></td>
      </tr>
      <tr>
          <td>Last Name: *</td>
          <td><input type="text"></td>
      </tr>
      <tr>
          <td>Email Address: *</td>
          <td><input type="text"></td>
      </tr>
      <tr>
          <td>Upload Image *</td>
          <td><input type="file"></td>
      </tr>
      <tr>
          <td>Description / Comments:</td>
          <td><textarea rows="5"></textarea></td>
      </tr>
          <tr>
          <td colspan="2"></td>
      </tr>
          <tr>
          <td colspan="2"></td>
      </tr>
      <tr>
          <td colspan="2"><input type="button" value="Submit"></td>
      </tr>
     </table>
</form>

Image in HTML page
HTML forms
Web Forms
Form maker
]]> http://phpforms.net/tutorial/html-home/html-forms-2.html/feed 0 HTML Formatting http://phpforms.net/tutorial/html-home/html-formatting.html http://phpforms.net/tutorial/html-home/html-formatting.html#comments Sun, 17 Jan 2010 20:55:30 +0000 admin http://phpforms.net/tutorial/?page_id=99
As more and more elements are added to HTML code, minor changes may be required to format those elements. There is a range of formatting tags, which amplify text elements. These tags can add various effects to the plain text, making it bold, italic, underline it etc.
Example:
*Important note: it is recommended not to overload the text with HTML formatting tags. They should better be used separately; italicizing and bold font for the same word will be unnecessary exaggeration. To apply formatting to a block of text, CCS (or Cascading Style Sheets) should be used.
HTML Styles
The style is the HTML attribute, which introduces CSS to the HTML code. Style attribute is used for formatting a block of text in a single style. Styles firstly appeared with HTML 4, as a new method of formatting HTML elements in an easier way. Styles can be introduced to HTML elements in a direct way, by means of the style attribute, or indirectly with the help of CSS.
Style examples:
*Important note: certain tags and attributes are considered as deprecated. It means that these tags and attributes will not be accepted by future versions of HTML/XHTML.
The list of tags that should be avoided:
HTML headings
HTML Paragraphs
HTML Links
HTML Images
]]> http://phpforms.net/tutorial/html-home/html-formatting.html/feed 0 HTML Fonts http://phpforms.net/tutorial/html-home/html-fonts.html http://phpforms.net/tutorial/html-home/html-fonts.html#comments Sun, 17 Jan 2010 20:55:05 +0000 admin http://phpforms.net/tutorial/?page_id=97
The <font> tag is not recommended to use. However, it is useful to know how it works.
With the help of the <font> tag, the size and the type of output text can be defined.
Example:
The <font> tag attributes are as following:
size="number" is used to define font size
size="+number" is used to increase font size
size="-number" is used to decrease font size
face="face-name" is used to define font name
color="color-value" is used to define the font color
color="color-name" is used to define the font color
Example:
*important note: <font> tag is not accepted by the latest versions of HTML. The World Wide Web Consortium has removed it from the list of recommended text. CSS should be used instead.
HTML layout
HTML frames
HTML 4.0
HTML styles
]]> http://phpforms.net/tutorial/html-home/html-fonts.html/feed 0 HTML Events http://phpforms.net/tutorial/html-home/html-events.html http://phpforms.net/tutorial/html-home/html-events.html#comments Sun, 17 Jan 2010 20:54:33 +0000 admin http://phpforms.net/tutorial/?page_id=95
Among other enhanced options introduced in HTML 4.0., there is an option, which allows HTML events produce certain actions in browsers, for instance, perform script, when user clicks the HTML element.
Here goes a list of attributes divided into sections.
Window events (these events are accepted in frameset and body elements)
Onload – the script is performed after the document is loaded
Onunload - the script is performed after the document is unloaded
Form events (are accepted in forms elements only)
Onchange is performed if the element is altered
Onsubmit is performed after form submission
Onreset is performed after form reset
Onselect Is performed after element selection
Onblur is performed when the element is not in focus
Onfocus is performed when the element is in focus
Keyboard-related events
(not accepted for frame, base, bdo, br, html, frameset, head, iframe, meta, script, param, style, and title elements)
Onkeydown – defines an action, which is performed after pressing the key
onkeypress– defines an action, which is performed after pressing and releasing the key
onkeyup – defines an action, which is performed after releasing the key
Mouse-related events
onclick– defines an action, which is performed by mouse click
ondblclick - defines an action, which is performed by double- mouse click
onmousedown - defines an action, which is performed when the mouse is pressed
onmousemove- defines an action, which is performed when the pointer is moving
onmouseout- defines an action, which is performed when the pointer is removed from the element
onmouseover - defines an action, which is performed when the pointer is over the element
onmouseup - defines an action, which is performed when the mouse is released
HTML URLs
HTML scripts
HTML URL encode
HTML webserver
]]> http://phpforms.net/tutorial/html-home/html-events.html/feed 0 HTML Elements http://phpforms.net/tutorial/html-home/html-elements.html http://phpforms.net/tutorial/html-home/html-elements.html#comments Sun, 17 Jan 2010 20:54:03 +0000 admin http://phpforms.net/tutorial/?page_id=93
As it has already been mentioned before, HTML element is the content between start tag and end tag: <p>This is a text</p>. Starting tag - <p>, element content – “this is a text”, closing tag - </p>. Nested HTML elements stand for elements that contain other HTML elements.
There are important HTML syntax rules that should be remembered for quick and easy start with HTML:
  • every HTML element starts with start/opening tag
  • every HTML element ends with end/closing tag
  • element content is the content enclosed in start and end tags
  • certain HTML elements may contain an empty content
  • empty elements are closed in an opening tag
  • HTML elements may be supplied with HTML attributes
Example of HTML text:
Example description:
<html> element – defines the start and the end of the HTML document. Closing element tag is </html>, which marks the end of the document.
<body> - marks the start of the body part of the HTML document. Closing element tag is </body>. May contain other elements, such as <p>, which stands for paragraph.
*Important note: it is necessary to remember about the end tag. Most browsers will read HTML code correctly even without end tag:
<p>This is a text
However, in certain cases missing end tag may produce errors, so better not skip end tags.
Empty HTML elements are elements that do not contain any content. Empty elements may be enclosed in start tag only. For instance, <br> is an empty element, which defines a line break and it doesn’t have an end tag. However, future versions of HTML, XHTML and XML do not allow HTML elements that are not closed. Correct closing of <br> element will be adding slash - <br />, and in this case it will be accepted by HTML, XHTML and XML. Thus, closing empty tags correctly makes the webpage future-proof.
*Important note: it is better to use lowercase for HTML tags. Generally, tags are not case sensitive, and <S> will mean exactly the same as <s>. However, the World Wide Web Consortium recommends using lowercase, and for future versions of HTML/XTML upper case is not acceptable.
HTML Get Started
HTML Basic
HTML attributes
HTML headings
]]> http://phpforms.net/tutorial/html-home/html-elements.html/feed 0 HTML Colors http://phpforms.net/tutorial/html-home/html-colors.html http://phpforms.net/tutorial/html-home/html-colors.html#comments Sun, 17 Jan 2010 20:51:23 +0000 admin http://phpforms.net/tutorial/?page_id=89
Colors in HTML code are displayed through the combination of red, green and blue light.
A hexadecimal code is used for the combination of values. The lowest value that can be given for color is 0 (hex 00) and the highest is 255 (hex FF).
Color values example:
The combination of these three colors enables the webmaster with more than 16 million colors to use. All major browsers support about 150 color names, which are shared for all these browsers.
There is a set of standard color names that can be used instead of codes: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. For other colors codes should be used.
HTML color names/Color values
In this section you can find a table with standard color names that are supported by major browsers. Each color name is given with corresponding hex value.
HTML Lists
HTML Forms
HTML layout
HTML frames
]]> http://phpforms.net/tutorial/html-home/html-colors.html/feed 0 HTML Character entities http://phpforms.net/tutorial/html-home/html-character-entities.html http://phpforms.net/tutorial/html-home/html-character-entities.html#comments Sun, 17 Jan 2010 20:50:43 +0000 admin http://phpforms.net/tutorial/?page_id=87
Some characters cannot be used in the HTML code, because these characters may be recognized as HTML code. To display these characters correctly, HTML source is used. These characters are inserted the following way: &#entity_number or &entity_name.
* Important note: it is better to use numbers, than the names. Numbers are widely supported by the browsers, while names can produce occasional problems.
Example:
Non-breaking space is one of the most frequently used entities. HTML removes extra spaces. So, a special entity is used for adding spaces that will be non-removable.
The list of mostly used entities:
HTML 4.0.
HTML styles
HTML head
HTML meta
]]> http://phpforms.net/tutorial/html-home/html-character-entities.html/feed 0 HTML Basic http://phpforms.net/tutorial/html-home/html-basic.html http://phpforms.net/tutorial/html-home/html-basic.html#comments Sun, 17 Jan 2010 20:49:50 +0000 admin http://phpforms.net/tutorial/?page_id=85
Normally, HTML page consists of two parts – head and body. Head contains text and tags that are not directly displayable at the page. Body contains main webpage content. Every webpage starts with <html> and ends up with </html>. These tags are used to let browser know where HTML code starts and when it ends. There are 4 basic tag elements that are necessary for creating a structured webpage.
  1. HTML headings. HTML headings are marked with a range of tags from <h1> to <h6>
  2. HTML paragraphs are marked with <p> tag.
  3. HTML links are marked with <s> tag
  4. HTML images are marked with <img> tag. In this case, specific characteristics of an image are defined with the help of attributes.
HTML Introduction
HTML Get Started
HTML Elements
HTML attributes
]]> http://phpforms.net/tutorial/html-home/html-basic.html/feed 0 HTML Attributes http://phpforms.net/tutorial/html-home/html-attributes.html http://phpforms.net/tutorial/html-home/html-attributes.html#comments Sun, 17 Jan 2010 20:47:56 +0000 admin http://phpforms.net/tutorial/?page_id=83
HTML attributes are used to amplify HTML tags, i.e. provide additional information for HTML elements. It is necessary to remember that attributes are always specified in the start tag. Attributes always contain a name and value pair, which looks like this: name=“value”.
*Important note: attribute names and attribute values are case sensitive. In certain cases, using lowercase is recommended, in some cases it is required. To give the code more universal nature, it is better to use lowercase in all cases.
Example:
*Important note: it is required to enclose attribute values into quotes. Traditionally, double quotes are used for this, however, single styles quotes are also acceptable. In case element content contains quotes itself, it is necessary to use singles quotes for the value.
Example:
HTML Basic
HTML Elements
HTML headings
HTML Paragraphs
]]> http://phpforms.net/tutorial/html-home/html-attributes.html/feed 0 HTML 4.0 http://phpforms.net/tutorial/html-home/html-4-0.html http://phpforms.net/tutorial/html-home/html-4-0.html#comments Sun, 17 Jan 2010 20:47:27 +0000 admin http://phpforms.net/tutorial/?page_id=81
The problem with older versions of HTML was such that the language was not adjusted to document formatting. Such characteristics as color or font type had to be added manually to each separate page, which made the process extremely long and complicated.
This issue has been resolved in later versions of HTML. All formatting-related details are replaced from the document into a style sheet. Thus, the control over the document structure remains necessary without interfering into the content.
Thus, it is highly recommended to avoid deprecated tags and use style sheets instead.
XHTML is a newer version of HTML. To start using XHTML it is necessary to get used to putting tags in lowercase.
It is necessary to check out if your HTML documents are valid with HTML 4.01. it can be done with the help of DTD (Document Type Definition).
The HTML 4.01 Strict DTD contains elements and attributes that are accepted by later versions of HTML.
Example:
The HTML 4.01 Transitional DTD contains elements and attributes that are accepted by later versions of HTML and those that are not accepted.
Example:
The HTML 4.01 Frameset DTD contains all above-mentioned elements plus frames.
HTML frames
HTML fonts
HTML styles
Character entities
]]> http://phpforms.net/tutorial/html-home/html-4-0.html/feed 0