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 … ->
Thursday, April 3, 2014
HTML brief tutorial for beginners.
Stay With Us
s
Popular Posts
-
In this tutorial you can know how to add Google+ profile buttons to your web site. Its easy & very powerful alternative of Facebook ...
-
Backlink in .Edu & .Gov is very important for SEO. Google gives proiriety .Edu & .Gov link. But how to get a lot of list of .Ed...
-
Every blogger prefer to see his blog site in the first page of Google. But to bring your site here you need to work over it with patience....
-
We know link building is very essential for traffic of web site . In this article i will share with you some link building tips for beg...
-
HTML brief tutorial HEAD (HTML 1.0) – Head Determines the beginning and end of the document’s title. Is a container for containin...
-
Additional commands search engines Google and Yandex will allow you to achieve much better results. With their help, you can narrow yo...
Topic
wordpress
Health
SEO
Search Engine Optimization
content
10 interesting facts
11 tips on setting up wp-config.php
20 practical tips
20 practical tips for SEO tips for SEO WordPress Blog
7 myths
7 myths about the security
Computer repair
Computer repair at home
Duplicate
Duplicate content
Effectice SEO Tips
Effective Keyword Ideas
Finding effective keyword
Google and Science website
Google and Yandex
Google page rank
Google page rank fast
Google+ Profile
Google+ Profile button page
Google+ profile buttons
HTML
HTML brief tutorial
How fast can share the files
How to Increase Page Rank
How to cook
How to improve
How to make money make money on the Internet
How to successfully
Hyper Cache plugin for caching WordPress.
Increase Page Rank
Keyword Ideas
Link Building
Link Building Tips
Mask
Online services
Page Rank
Recipes easy dinner
SEO Tips
SEO WordPress Blog
Science website
Secrets of google
Secrets of yandex
Secrets to Search
Themes and Ratings
Tips for Beginner
Unique content
Ways to improve the performance WordPress
WordPress wp-config.php file
Wordpress Plugins
about the movie "Mask"
adding Google+ Profile Buttons
brief tutorial for beginners.
caching WordPress.Hyper Cache plugin
content problems
cook quick dinner
cook quick and tasty dinner
cook tasty dinner
create layouts sites
dinner recipes
earn money
fast can share the files
healthy dinner recipes
hollywood
hollywood movie
html tutorial
html tutorial for beginners
improve Google page rank
improve the performance
improve the performance WordPress
layouts sites
light dinner
light dinner recipes
make money
malicious code
malicious code and hidden links
money on the Internet
other tips
performance WordPress
quick and tasty dinner
quick dinner
recipe for dinner
repair Computer
repair Computer at home
security of the site by WordPress
sell a web-site
share the files tech
tasty dinner
tech
tutorial for beginners
uccessful website
web design
wordpress malicious code
wp-config.php file in WordPress
Blog Archive
-
▼
2014
(24)
-
▼
April
(9)
- Unique content - a successful website!
- Secrets to Search: Team Task Google and Yandex
- HTML brief tutorial for beginners.
- How to successfully sell a web-site ?
- How to make money on the Internet?
- Google and Science website. How to Increase Page Rank
- Duplicate content problems
- How to cook quick and tasty dinner ?
- healthy light dinner recipes
-
▼
April
(9)