HTML brief tutorial
HEAD
(HTML 1.0) – Head
Determines the beginning and end of the document’s title. Is a container for containing technical information about the document. (TITLE, BASE, STYLE, LINK, META).
Example:
<html>
<! – Begin header … ->
<head>
<title> Reference HTML </ TITLE>
</ HEAD>
<! – … Finished. Then off the body of the document ->
<body>
Text of a document
</ BODY>
</ HTML>
TITLE
(HTML 2.0) – Title
Specifies the name of the document. The name is usually displayed in the title bar of the browser. This element is required for any HTML-document and can not be specified more than once.
Example:
…
<head>
<title> Manual </ TITLE>
</ HEAD>
…
BASE
(HTML 3.2) – Base URL
Specifies the base address of the current document (URL), which will be the starting point for the calculation of relative addresses within the document. Element has no end tag. Required the presence of at least one of the attributes.
Attributes:
HREF – defines the base address (URL) of the current document.
TARGET – defines the name of the frame that will be used in hyperlinks by default. This can come in handy if you want to open a document, all references in another frame.
Example:
<head>
<! – Let the browser thinks it is located at: ->
<base Href=”http://www.igf.ru/other/index.html”>
<title> Manual </ TITLE>
</ HEAD>
…
<! – Now create a relative link to the document ->
<! – Http://www.igf.ru/list.html -> <a href=”../list.html”> List </ A> …
STYLE
(HTML 3.2) – Style
Used to insert into the document stylesheet (CSS – Cascade Style Sheet).
Attributes:
TYPE – a mandatory attribute. Defines the MIME-type of the inserted block styles. Typically, this attribute value is “text / css”.
TITLE – defines the name of the new style sheet. Required if you want to use multiple STYLE in one document. In this case, the browser has to ask the user which of the proposed styles will be applied to the document.
Example:
<head>
Example <title> style sheets </ TITLE> <! – Sticks plate styles ->
<style Type=”text/css” title=”Cool table”> <! -
A {text-decoration: none;}
P {color: blue; font-size: 12pt; font-family: Arial;}
H1 {color: red; font-size: 18pt;}
-> </ STYLE> <! – … Ended stick ->
</ HEAD>
Notes:
Almost all popular browsers ignore the attribute TITLE, so you can not use it. A pity, then, the idea was good …
LINK
(HTML 2.0) – Link
LINK element describes the relationship of the document with other documents on the site, indicating its place in the hierarchy of the site. Element has no end tag. The header can contain multiple elements LINK.
Attributes:
HREF – specifies the URL of the object.
REL – defines the type of relationship with the object of the current document, an attribute HREF. Possible values are:
stylesheet – points to a file containing the style sheet (CSS) for the current
document. The browser downloads the css-file specified in the HREF attribute of the address and
apply it to the current document (see also item STYLE)
home – shows the main page of your site
toc, contents – point to a file containing the contents of this document.
index – indicates the file containing the information for the index search
the current document.
glossary – points to a file containing a list of terms relating to
the current document.
copyright – points to the page, which refers to its creators,
copyright, etc.
up, parent – indicates a “parent” page (document standing on
step higher in the hierarchy of your site).
child – indicates a “subsidiary” page (document, standing on the step below
the hierarchical structure of your site).
next – points to the next page in the sequence of documents (eg
next page electronic catalog, documentation or dictionary).
previous – points to the previous page in the document sequence.
last, end – points to the last page in the document sequence.
first – identifies the first page in a document sequence.
help – points to a page with a prompt (eg navigation of your site).
TYPE – specifies the MIME-type for the object specified in the attribute HREF.
Example 1:
<head>
<title> Element DIV </ TITLE>
<link Rel=”HOME” title=”HTML-spravochnik” href=”index.html”>
<link Rel=”UP” title=”Text bloki” href=”textblocks.html”>
<link Rel=”PREVIOUS” title=”Element P” href=”p.html”>
<link Rel=”NEXT” title=”Element ADDRESS” href=”address.html”>
</ HEAD>
Example 2:
<head>
<title> Poldnevaya </ TITLE>
<link Rel=”stylesheet” type=”text/css” href=”deco1.css”>
</ HEAD>
Notes:
Element LINK, unfortunately used web-masters rarely, often only for the introduction of a separate CSS file. Almost all browsers ignore the position information in the document structure of the site – this information is interesting only indexing search engine robots.
META
(HTML 2.0) – Meta
Meta element used Tehopisanie document metadata which represents a pair of “name-value”. This element in the document header implemented additional useful information is invisible to the user, but sometimes simply indispensable for proper indexing of your pages search engines robots. Element has no end tag.
Attributes:
NAME – specifies the name of the meta-entry. There are many predefined names, some of which you can see in the following example.
HTTP-EQUIV – specifies the name of the meta-entry. Nearly identical attribute NAME, but is used only when necessary for transmitting additional information in HTTP-header.
CONTENT – assigns the value of meta-certain record in the attribute NAME (or HTTP-EQUIV).
Example:
<head> … <meta http-equiv=”Expires” content=”Sat, 26 Jun 1999 17:38:15 GMT”> <meta name=”GENERATOR” content=”Greenback”> <meta name=”Publisher-Email” content=”green@igf.ru”> <meta name=”Publisher-URL” content=”Idea GraFix – http://www.igf.ru/”> <meta name=”Keywords” content=” OpenGL, 3D, graphics, 3Dfx, Permedia, Diamond, graphics “> <meta name=”Description” content=”Российский сайт, полностью посвященный 3D-графике, ее разработке и использованию.”>… </HEAD>
FRAMESET
(HTML 4.0) – Frame Set
Defines a frame-based (window) the structure of the document: the size and layout of frames on the page. Created instead of the body of the document (ie, the BODY element in the document is not used).
Opens and closes the list of frames defined by using the FRAME. Between the start and end tags and FRAME elements except NOFRAMES may be other elements FRAMESET. Ie FRAMESET element supports nested design frames.
Attributes:
ROWS – determines the number and size of horizontal frames (frame-lines) in the browser window. The value specifies the list of frame sizes, separated by commas. Sizing methods:
a percentage of the height of the working area of the browser window. For example, “30%, 30%, 40%”;
the symbol “*” (asterisk) saying that the frame takes up all the space of the browser window, unoccupied other frames with explicit dimensions. For example, the asterisk in the record “25% 25% *” is equivalent to 50%;
in pixels. For example: “75 *”;
All three methods can be combined. For example, “25% 40 *” on the screen razobet three horizontal frames, the first of which is a quarter of the height of the browser window, the second – 40 pixels, and takes the third rest area.
COLS – determines the number and size of vertical frames (frame-columns) in the browser window. The value specifies the list of frame sizes, separated by commas. Dimensions are given in the same manner as in the previous attribute ROWS.
BORDER – specifies the width in pixels of frames frames. This attribute is valid only in browsers Netscape;
FRAMEBORDER – detects the presence of restraints, FRAMESET contained within frames. Possible values are:
Yes – display frame;
No or 0 – do not display frame;
Netscape browsers do not support this attribute to the fullest and to determine the width of the global framework used attribute BORDER.
FRAMESPACING – determines the distance (the so-called “gray area”) between frames in pixels. This attribute is required to create frames without frames.
Note:
Please note that the FRAMESET-structure is created instead of the element BODY. FRAMESET-structure, located in the header (inside the HEAD) is considered an error.
FRAME
(HTML 4.0) – Frame
Defines the frame and its properties within the FRAMESET-structure. (See item FRAMESET)
Attributes:
SRC – a mandatory attribute. Specifies the address (URL) HTML-file displayed in this frame.
NAME – specifies the name of the frame, which will then be used to reference it from other documents using the attribute TARGET (see item A). The value you specify any name without spaces using Latin characters and digits. The name should not start with numbers and special characters.
MARGINWIDTH – specifies the width (in pixels) of the left and right margins of the frame. If the attribute is not specified, the browser will determine the optimum size of the indentation.
MARGINHEIGHT – specifies the width (in pixels) of the top and bottom margins of the frame. If the attribute is not specified, the browser will determine the optimum size of the indentation.
SCROLLING – determines whether scrollbars frame content. Possible values are:
yes – display scrollbars.
no – do not display the scroll bar.
auto – display scrollbars if necessary (if the document specified in the attribute SRC, does not fit in the frame).
NORESIZE – does not allow to resize the frame. This attribute is a flag and does not require a value.
FRAMEBORDER – detects the presence of a framework in the frame. Possible values are:
yes – display frame;
no or 0 – do not display frame;
Netscape browsers do not support this attribute to the fullest and to determine the width of the global framework used BORDER attribute element FRAMESET.
Example file (index.html):
… <frameset frameborder=”0″ framespacing=”0″ border=”0″ cols=”265,*”> <frame src=”frame1.html” name=”page”> <frameset rows=”165,*”> <frame src=”frame2.html” name=”menu1″ marginwidth=”0″> <frame src=”frame3.html” name=”menu2″ marginwidth=”0″> </FRAMESET> <noframes> Your browser does not support frames </NOFRAMES> </FRAMESET> <body> </BODY> …
NOFRAMES
(HTML 4.0) – No Frames
All that is between the start and end tags of the element will be displayed by a browser if it does not support frames. NOFRAMES element has no attributes and must be inside a FRAMESET.
Example:
<frameset rows=”*,*”> <noframes> Your browser does not support frames. Obydno, huh?</NOFRAMES> <frame src=”frame1.html”> <frame src=”frame2.html”> </FRAMESET>
SCRIPT
(HTML 3.2) – Script
Inserts a script in the document. The text itself or the script is located between the start and end tags, or defined as the URL of the file containing the script, in the attribute SRC.
Attributes:
LANGUAGE – determines the language in which the script was written, for example, JavaScript.
SRC – specifies the URL of the script.
Example 1:
<script LANGUAGE=”JavaScript” SRC=”http://www.igf.ru/js/script.js”></SCRIPT>
For compatibility with older browsers, the contents of the SCRIPT element must be enclosed between <! – And ->, ie register it as html-comment:
Example 2:
<script LANGUAGE=”JavaScript”><!– window.location=”http://www.art-russia.com”; // –> </SCRIPT>
Where to put the script:
SCRIPT element can be placed either in the header (inside the HEAD) or in the body of the document (inside the BODY).
NOSCRIPT
(HTML 4.0) – No Script
Specifies the text that will be displayed, if for some reason does not work with scripts.
Example:
<script LANGUAGE=”JavaScript”><noscript> Time to change the browser …</NOSCRIPT> <!– window.location=”http://www.igf.ru”; –> </SCRIPT>
MAP
(HTML 3.2) – Map
Creates a new navigation map. Between the start and end tags contain one or more elements AREA, defining the navigation area of the map.
Attributes:
NAME – and the only required attribute. Specifies the name of the navigation map, unique to this document. Used to call the card using the element attribute USEMAP IMG. You can specify any name without spaces using Latin characters and digits.
Example:
<!– Create a map Map1…: –> <map name=”Map1″> <!– Specify the area
–> <area href=”…> <area HREF=” …> … </MAP> <!– Card is ready. Apply it to the picture: –><img src=”image.gif” usemap=”#Map1″ width=”200″ height=”100″ alt=”">
AREA
(HTML 3.2) – Map Area
Creates an area of the map defined by using the MAP. Element must be positioned between the start and end tags of the MAP. Has no end tag.
Attributes:
SHAPE – determines the shape of the navigation area. Possible values are:
rect – rectangle;
circle – the circle;
poly – a polygon.
Depending on the method of specifying the shape changes its coordinates in the attribute COORDS.
COORDS – defines the coordinates of the navigation area on the map. Used in conjunction with an attribute SHAPE. Ways to specify the coordinates for different types of areas:
SHAPE = “rect” COORDS = “left x, top y, right x, lower y”;
SHAPE = “circle” COORDS = “center x, center y, radius”;
SHAPE = “poly” COORDS = “x1, y1, x2, y2, x3, y3, …”;
HREF – defines the region as a hypertext link. The value is given as a link (URL).
TARGET – defines a window (frame), pointed to a hypertext link. This attribute is used only in conjunction with the attribute HREF. The value must be set or the name of one of the existing frames (see element FRAME) or one of the names zarezevirovannyh described in detail in the TARGET attribute element A.
NOHREF – defines the region as inactive (unresponsive to the touch). This attribute is the opposite of the HREF attribute is used to cancel the actions of the latter.
ALT – specifies an alternate text hint for this area.
Example:
<!– Create an artful card with round hole in the middle… –> <map name=”map1″> <area nohref shape=”circle” coords=”80,70,40″> <area href=”guide.html” alt=” guide” shape=”rect” coords=”0,0,167,140″> </MAP> … <!– Apply it to the image –><img src=”/img/logo.gif” width=”167″ height=”140″ border=”0″ alt=” Apply” usemap=”#map1″>
Notes:
In the sequence of the several elements have the highest priority AREA those identified first. They cover the areas identified later. That is why in the above example first creates a passive region (hole), and only then – active quoting.
<! – Begin header … ->
Reference HTML TITLE>
HEAD>
Text of a document
BODY>
HTML>
TITLE
(HTML 2.0) – Title
Specifies the name of the document. The name is usually displayed in the title bar of the browser. This element is required for any HTML-document and can not be specified more than once.
Example:
…
Manual TITLE>
HEAD>
…
BASE
(HTML 3.2) – Base URL
Specifies the base address of the current document (URL), which will be the starting point for the calculation of relative addresses within the document. Element has no end tag. Required the presence of at least one of the attributes.
Attributes:
HREF – defines the base address (URL) of the current document.
TARGET – defines the name of the frame that will be used in hyperlinks by default. This can come in handy if you want to open a document, all references in another frame.
Example:
Manual TITLE>
HEAD>
…
List A> …
STYLE
(HTML 3.2) – Style
Used to insert into the document stylesheet (CSS – Cascade Style Sheet).
Attributes:
TYPE – a mandatory attribute. Defines the MIME-type of the inserted block styles. Typically, this attribute value is “text / css”.
TITLE – defines the name of the new style sheet. Required if you want to use multiple STYLE in one document. In this case, the browser has to ask the user which of the proposed styles will be applied to the document.
Example:
Example style sheets TITLE>