<img src="файл" alt="текст">
Пример: имаме файл, който се казва"sarce.gif", искаме при посочване с мишката да излиза текста " Сърце" и да е с размери height=35 width=40. Пишем:<img SRC="sarce.gif" ALT="Сърце" height=35 width=40>
Става на:
HTML е лесен за научаване език, с който се създават сайтовете в Internet. Съществуват и WYSIWYG (What You See Is What You Get) програми като Microsoft FrontPage i Netscape Composer, които са на принципа да виждаш каквото правиш, както ще излезе в Browsera. Тези програми са напълно достатъчни за направата на една съвсем непретенциозна лична страница. Но като дойде времето да се сложи първият JavaScript или Java Applet идва проблема, че тези програми немогат да вграждат такива компоненти и вие трябва да ги сложите ръчно с някой обикновен текстов редактор като Notepad например. Ето защо си заслужава да се научи същността на HTML кода. А и при следващото редактиране във Front Page или Composer няма гаранция, че новодобавените скриптове ще работят, защото WYSIWYG програмите променят кода както те намерят за добре. Плюс това при тях големината на файла не е оптимизирана, но ако сте се захванали с обикновена (елементарна) лична страница, това не е достатъчно основание да започнете да пишете HTML кода ръчно. Ако решихте да го изучите .... ето най-важното:.
HTML ( Hypertext Markup Language ) е основното средство за
създаване на WEB страници в INTERNET. Този ХиперТакст се разглежда и визуализира
от браузерите. Най популярните такива са Microsoft Internet Explorer и Netscape
Navigator. Разширенията на HTML са .htm и .html . По принцип имената на
файловете трябва да са само от латински букви, цифри и _.
Всеки документ започва с:
<HTML> Този
етикет, поставян обикновенно в началото на документа, информира клиентите за
това, че в документа се използва езикът HTML. Аналогично, крайният етикет
</HTML> се поставя в края на документа.
<HEAD> Този етикет се поставя след етикета <HTML>и маркира
неговата заглавната част на документа, която съдържа информация за документа. В
заглавната част може да се включи основна информация, която например има
отношение към заглавието. Крайният етикет </HEAD>маркира края на
заглавието на документа.
<TITLE> Тук пишем името
на документа </TITLE> Всеки документ трябва да съдържа една двойка етикети
<TITLE> и </TITLE> в заглавната част на документа(между
етикетите<HEAD> и</HEAD>). Използвайки такъв етикет, вие посочвате
името на документа, което не трябва да надвишава 64 символа. При преглеждане на
документа, браузерът извежда неговото име в заглавната част на своя
прозорец.
</HEAD>
<BODY>
Тук пишем самият документ. Този
етикет посочва началото на основният текст на документа. Обикновенно между
етикетите <BODY> и</BODY> се разполагат други етикети на HTML, който
дефинират заглавия, параграфи, списаци и други.
Етикетът <BODY> може да има следните атрибути:
bgcolor= определя фона на докумета
text=
цвят на текста
link= цвят на линковете
vlink= цвят на посетен линк
След символа"=" се
пише код на съответният цвят
Цветовете се кодират с
т.нар. хексадецимални кодове според т.нар. RGB схема, която е стандарт във
Windows (R=RED, G=GREEN, B=BLUE) #RRGGBB.
Пример:
<body bgcolor=#000000 text=#FFFFFF
link=#00FF00 vlink=#FF0000>
bgcolor=#000000 черен
фон
text=#FFFFFF бял цвят на текста
link=#00FF00 зелен цвят на линковете
vlink=#FF0000> червен цвят на посетен линк
Първите две цифри в HEX кода са за червения цвят, средните две са за
зеления цвят, а последните две за синия цвят. В хекс кодовете влизат цифри и
букви от 0 (нула) до F (0 1 2 3 4 5 6 7 8 9 A B C D E F), където 0 (нула) е
най-тъмният, а F е най-светлият цвят.
Друг атрибут
е:
bakground определа картинка за фон
пример: ако искаме да сложим картинка за фон която е във файл с име
"bg1.jpg" пишем следното:
< BODY
bakground="bg1.jpg"> това важи само ако HTML-документа и картинката са
в една директория, в противен случай пишем пълният адрес на картинката.
Горе
Параграф
Напишете <P>.
<P> не
извършва никаква команда. Параграфа отговаря на две натискания на Enter в една
текстообработваща програма и оставя просто един празен ред. Не забрабяме да
затворим </P>
Напишете <BR> за смяна на нов ред. Също като <P>, <BR> не е никаква команда и няма друга функция. Всеки <BR> е равносилен на едно натискане на Enter. Както винаги завършваме с </BR>
Тези функции влиаят само на текста между <..> и
</..>
<B> текст </B> - удебелява
текста
пример: <B> Борко</B> става на
Борко
<I> текст </I> - прави текста
ITALIC
пример: <I> Борко</I> става на
Борко
<U> текст <U> - подчертава
текста
пример: <U> Борко</U> става на
Борко
<BIG> текст </BIG> - увеличава
размера на шрифта
пример:<BIG> Борко </BIG>
става на Борко
<SMALL> текст
</SMALL> - намалява размера на шрифта.
пример:<SMALL> Борко </SMALL> става на
Борко
Можем и да определим шрифт:
<FONT FACE = "името на шрифта" > текст </FONT>
Като в <FONT> освен "FACE" може да има и
"COLOR"(определя цвета на текста) и "SIZE"(определя големината на текста като
стойностите са от 1 до 7)
пример: ако искаме шрифт
"Comic Sans MS", цвят червен, големина 5 и текст"Борко" пишем следното:<font
face="Comic Sans MS" color="#FF0000"size=5>Борко</font> и става:
Борко
<MARQUEE>Текст</MARQUEE> Движещ се текст
Пример:<marquee>Пенчо</marquee> Става на:
Горе
Форматиране на
таблици
<TABLE> ....... </TABLE> информация подредена в
таблици.
BORDER =n задава дебелината на ограждащите
линии в pixels.
WIDTH =n% указва ширината на таблицата
в pixels или проценти от ширината на екрана.
SELLSPACING =n дава разстоянието в pixels между табличните елементи
(клетките).
CELLPADDING =n е разстоянието в pixels
между съдържанието на клетките и ограждащите линии.
Можем да зададем цвят за фон или картинка за фон съответно с:
"BGCOLOR"и "BACKGROUND"
Вътрешни за <TABLE> елементите:
<CAPTION> ....... </ CAPTION> дефинира заглавието на
таблицата и може да се ползва с атрибута ALIGN: "top" , "bottom" , "left" ,
"rigth"
<TR> ...... </TR> дефинира ред на
таблицата
На свой ред <TR> има следните вътрешни
елементи:
<TH> ........ </TH> определя
заглавие на таблична колона или ред
<TD> ........
</TD> отделя съдържанието на всяка незаглавна клетка.
<TR>, <TH>, <TD> могат да имат един от следните
атрибути:
ALIGN ("center" , "left" и "rigth"), които
определят как да се разполага съдържанието на клетките спрямо
хоризонтала.
VALIGN = ("top", "middle", "bottom")
спрямо вертикала.
BGCOLOR=
BACKGROUND=
Пример: искаме таблица с 3 реда и 4
колони, в която във всяка клетка да има число от 1 до 12 и да я именуваме
"Таблица 1" и името да е в ценъра.
Пишем:<table
BORDER COLS=4 WIDTH="100%" >
<CAPTION ALIGN=
"top">Таблица 1</CAPTION>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6</td><td>7</td><td>8</td></tr><tr><td>9</td>
<td>10</td><td>11</td><td>12</td></tr></table>
и се получава :
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
<BLOCKQUOTE> текст </BLOCKQUOTE> - указва на
браузъра да тълкува текста като цитат
<UL>
......... </UL> - отбелязват начало и край на неномериран списък от
многоредови параграфи. В него началото на всеки елемент от списъка започва с
<LI>. При използване на този елемент браузерът маркира с определен символ
началото на всеки параграф от списъка.
Например:<ul><li><font
size=+2>Борко1</font></li><li><font
size=+2>Борко2</font></li><li><font
size=+2>Борко3</font></li></ul>
Става на:
<BLINK> текст </BLINK> - прави заградения текст
мигащ (само в Netscape).
Горе
Хоризонтална
линия
Хоризонталната линия се пише с <HR>
В кода <HR> можем също да вмъкнем например SIZE oт 1 до 10 и WIDTH
(измерва се в % или pixels).
Пример: <HR SIZE=5
WIDTH="100%"> показва следната линия:
B INTERNET колкото са по-малки картинките, толкова по-добре. Например една картинка от 1Kb ще се отвори много по-бързо от картинка 20Kb. Неможе да очакваме, че някой ще чака 10 минути да се отвори дадена страница, като може да стане за 5 секунди. Най-популярните разширения за WEB графика са .gif и .jpg Така е, защото картинките в тези формати стават най-малки по обем. Gif се използва за малоцветни изображения като цветът трябва да е индексиран (indexed color). JPEG се използва за пълноцветни изображения, като не е нужно нищо допълнително. Безспорно най-добрата и професионална програма за обработка на графика е Adobe Photoshop. И пак казвам, колкото по-малки са файловете, толкова по-добре. Има специални програми, които правят възножно най-малки файловете за качеството, което искате. Много добра такава програна е Ulead SmartSaver. При намаляне на обема се намаля и качествто на картинката, но в дадено саотношение си заслужава.
Картинка може да се вмъкне по няколко начина.
Най-простия начин е:
<IMG
SRC="файл">
Може и да се зададът размерите на картинката:
<IMG SRC="файл" WIDTH=80 HEIGHT=40>
Да се добави текст, който излиза когато мишката е върху
картинката:
<img src="файл" alt="текст">
Пример: имаме файл, който се казва"sarce.gif", искаме
при посочване с мишката да излиза текста " Сърце" и да е с размери height=35
width=40. Пишем:<img SRC="sarce.gif" ALT="Сърце" height=35
width=40>
Става на:
Същото като картинката, само че вместо
<IMG SRC="файл"> пишем <EMBED SRC="файл">
Пример: Имаме файл, който се казва "coma.mid" и
пишем:
<EMBED
SRC="coma.mid"> и става: