HTML Summary

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