Unique tips of blogging

HTML Basics for beginners

This paper is written for those who have no notion of what is HTML, experienced people, please do not read (in vain only to spend time: smile:

HTML Basics for beginners


HTML-Hypertext Markup Language documents. HTML documents can be created using any text editor (eg Notepad) or specialized HTML-editors (eg, FrontPage, Netscape Navigator Gold). To view the HTML documents are used vserazlichnye browsers (Internet Explorer, Opera, etc.)
HTML document consists of the elements of HTML. HTML element is a generally two tags (opening and (more often) are closed)
Tag:
<Start tag
/ Symbol, which indicates the closing tag
> End tag
Ie all that is between <and> - the tag. The text is not located between the brackets <> - the whole visible when viewed in a browser.
The tag can also contain attributes.
Example:
Code:
<font color=’#FF0000′> Hi! </ font>
Here
<font color=’#FF0000′> - the opening tag
</ font> - closing tag
color = ‘# FF0000′-attribute
color - the name of the attribute
‘# FF0000′ - an attribute value can be enclosed in double or single quotes, and maybe even without the quotes
Hi! - Content element attributes
One tag may be a few attributes, while still, in what order they are written, because when changing places summands amount does not change.
Key Tags (should be in each! Document):
<html> and </ html> - always written: the first - at the very beginning of the document, the second - at the very end
<head> </ head> - the head of the document. General description of the document. Within the title, background color, text links.
<body> </ body> - the body of the document, that is what is displayed in the browser window
Colors
Каждому цвету присвоена определенная комбинация цифр и/или букв (Не стоит забывать о том, что на разных компьютерах один и тот же цвет может выглядеть немного по-разному). Table of colors can be viewed here.
To set the color of the text of the whole document need to tag <body> write:
<body text=”tsvet”>
To some the words to color other than specified in <body> it should conclude in the tags:
<font color=”tsvet”> phrase: </ font>
The background color is set in the same Tag <body>:
<body bgcolor=”tsvet”>
To use a picture that exists in the same folder as the site itself, as a background, the tag <body> must specify:
Code:
<body bgcolor=”tsvet_fona” background=”vash_fon.jpg”>
The parameter can be used without a background bgcolor, but do not (suddenly in the background someone is not loaded, but the color of the text will be merged with the color set by default)
It is also always prescribe the color of links in the tag <body>:
Code:
<body link=”#339999″ alink=”#339999″ vlink=”#339999″>
link - the color of links,
alink - color of links pointing to it with the mouse,
vlink - the color of already visited links.
Example:
Code:
<body bgcolor=”00000″ background=”bg.jpg text=”#808080″ link=”#0000FF” alink=”#000080″ vlink=”#008080″>
Titles:
In order to provide HTML-document name which will appear in the title of the browser window, you should write it between the tags <title> </ title>
The headlines in the paper handy to write with the help of tags <H2> </ H2> This text appears in boldface type and a line break after the text. The number determines the size of the text: 1 - the largest, 6 - is the smallest.
For example:
Code:
<html>
<head>
<title> Sexy Babe </ title>
</ head>
<body bgcolor=’00000′ text=” #333366″>
<h1> Hot Girl </ h1>
</ body>
</ html>
Tables:
Table defined by the tags:
<table> </ table>
<tr> </ tr> - the table row
<td> </ td> - column (cell) table
If you need to create a table, for example, 3×2, it would be written as follows:
Code:
<table>
<tr>
<td> 1strochka, 1stobets </ td>
<td> 1strochka, 2stobets </ td>
<td> 1strochka, 3stobets </ td>
</ tr>
<tr>
<td> 2strochka, 1stobets </ td>
<td> 2strochka, 2stobets </ td>
<td> 2strochka, 3stobets </ td>
</ tr>
</ table>
The attributes of the table:
The background sets the parameter table bgcolor = “tsvet_fona. The background can be set for the table as a whole (propisyvaya it in the tag <table>), for a number (the tag <tr>), for a column in one row (in the tag <td>). The width of the table is set as the tag or tags <table> <tr> and <td> (can be in pixels, can be a percentage of the width of the browser window).
For example (shown as a percentage width, height in pixels):
Code:
<table bgcolor=”#336699″ height=”90%” width=”700″>
<tr> <td>
</ td> </ tr>
</ table>
The width of the borders (the distance in pixels between the frame and the cell contents) parameter is set cellspacing (when it is zero, the border is missing, by default, this attribute equal to 2), the frame around the table prescribed parameter border, its color - bordercolor, for example:
Code:
<table border=”3″ cellspacing=”5″ bordercolor=”#000000″>
In each cell (column) can be located, and images, and text and even tables. And the tags that we used for formatting text - the same as for the text outside the table.
Paragraphs:
<p> </ p> paragraphs
It could
- Align the text:
<p align=”center”> text </ p>
- Align text along the left edge:
<p align=”left”> text </ p> (this value is set by default, ie when the attribute is not specified)
- On the right side of the document:
<p align=”right”> text </ p>
- Align text on both sides of document (may not work with older versions of browsers, so it’s best not to use)
- <P align = “justify”> text </ p>
The browser itself will automatically detect the place for carrying the line. For the forced transfer of the tag is used <br>. It has no attributes and closing tag. If you use this tag after the text will automatically be made to carry the line.
If you do not want the browser automatically transfers the line, you can designate it and tags <NOBR> </ NOBR>. In this case, the browser will not move the line even if it extends beyond the boundaries of the screen instead of the browser will enable horizontal scroll box (remember that in our case it is not desirable).
Text formatting:
<b> Bold text </ b>
<i> italic text (italic) </ i>
<u> Underlined text </ u>
<center> centered text </ center>
Tag <font> can change the font settings for the block of text (they can differ from the defined in the tag <body>)
Font size can be set as follows:
<font size=”4″> text </ font>
Here 7 - the highest, 1 - the smallest
Set the font: <font face=”ARIAL”> text (font Arial) </ font>
It should specify only the standard fonts that did not work so that you magistral font is missing from the visitors of your site)))
For example:
Code:
<p align=”center”> <font face=”ARIAL” size=”5″> <b> <u> Give me your many </ u> </ b> </ font> </ p>
<font face=”Times New Roman” size=”7″ color=’#FF0000′> NOW! </ font>
Inserting images:
Code:
<img src=” image.jpg”>
In quotes is written the name of the file image and its enlargement. If the picture is not in the same directory (folder) as the document itself, it is necessary to prescribe a full (absolute) path to the picture, for example:
Code:
<img src=” http://www.site.com/papka/image.jpg”>
The tag <img> can be done so that the picture was pinned to the left (right) side of the screen, and written beside the text flows around her right side (left / bottom / middle / top):
Code:
<img src=” image.jpg “align=”left”>
<img src=” image.jpg “align=” right”>
<img src=” image.jpg “align=”bottom”>
<img src=” image.jpg “align=”middle”>
<img src=” image.jpg “align=”top”>
You can also ask:
- The distance between the text and images in the vertical / horizontal (distance is given in pixels):
Code:
<img src=” image.jpg “Vspace=”10″>
<img src=” image.jpg “Hspace=”30″>
- Width and vycotu image (in pixels):
Code:
<img src=” image.jpg “width=”100″>
<img src=” image.jpg “height=”200″>
- The frame around the picture itself (figure - frame width in pixels):
Code:
<img src=” image.jpg “border=”5″>
It is very useful in our work setting alt - a brief description of the picture. It will, if put your cursor over the picture, and hold it (the cursor), a few seconds. I recommend always! use it for all! banners and pictures:
Code:
<img src=” image.jpg “alt=”sexy_babe”>
In our case does not go without reference. Links will open in the same window. They can do both at the other sites, and on pictures, video, etc.
Code:
<a href=”Gallery.html”> galereya1 </ a>
The word «galereya1» became a link to the page «Gallery.html»
If «Gallery.html» is not in the same directory (folder), and that the document containing the link to it, then you need to prescribe an absolute path, for example:
Code:
http://www.site.com/galleries/ Gallery.html
If you want to link to another site is a picture:
Code:
<a href=”Gallery.html”> <img src=”babe1.jpg” alt=”sexy_babe”> </ a>
babe1.jpg - a picture which is a reference to Gallery.html
Or:
Code:
<a href=”Gallery.html”> <img src=” http://www.site.com/hot-babe/babe1.jpg” alt=”sexy babe”> </ a>
Z. S. It should optimize your site for the expansion of 800×600 
Useful shortcuts:
F5-refresh browser content
Ctrl + S - save the changes to the html document
Ctrl + c - to copy text
Ctrl + v - paste the text
Ctrl + x - delete the text
0 Komentar untuk "HTML Basics for beginners"


Back To Top