Html Presentation

Notes:	Hide Notes

Slide 1: Създаване на web сайт чрез HyperText Markup Language Гл.ас. Малинка Иванова, ТУ-София Slide 2: Структурни блокове в HTML  HTML елементи-команди написани между знаците < и > : <В>текст</В> отварящ елемент затварящ елемент  Атрибути-въвеждат се между командната дума и > : <FONT SIZE=+3>текст</FONT> атрибут стойност елемент  Стойности – атрибутите често приемат стойности  Кавички – стойностите трябва да бъдат заградени в кавички. Те могат да се пропуснат ако стойността съдържа само букви, цифри, тире или точка. Slide 3: Структурни блокове в HTML  Главни и малки букви – няма значение дали кодът ще бъде с главни, малки букви или смесица.  Вграждане на елементи: 1.Тези елементи, които засягат цели абзаци могат да съдържат елементи, които засягат отделни думи или букви, но не и обратното. 2.Редът е от значение – при използване на затварящ елемент, той трябва да отговаря на последния незатворен отварящ елемент.  Интервали – браузерите игнорират интервалите между елементите в HTML документа. Slide 4: Структурни блокове в HTML  Специални символи –знаците с номера между 129-255 от стандартния набор ISO Latin-1 се въвеждат чрез име или кодов номер: ® - ® или ® Slide 5: Проектиране на WEB страница  Защо се създава?  Какво предоставя?  Кои са потребителите?  Как да се създаде привлекателно за потребителите съдържание?  Колко страници да се създадат?  С каква структура?  Как да се проектира навигацията? Slide 6: Създаване на web страница <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> Slide 7: Създаване на заглавие <HTML><HEAD> <TITLE>HTML book </TITLE> </HEAD> <BODY> </BODY> </HTML> Slide 8: Организиране на страницата със заглавия <HTML><HEAD><TITLE>HTML book</TITLE> </HEAD> <BODY> <H1 ALIGN=center>Internet, web and HTML </H1> <H2 ALIGN=center>Internet, web and HTML </H2> <H3 ALIGN=center>Internet, web and HTML </H3> <H4 ALIGN=center>Internet, web and HTML </H4> <H5 ALIGN=center>Internet, web and HTML </H5> <H6 ALIGN=center>Internet, web and HTML </H6> </BODY> </HTML> -------------------------------------------<Hn> - n=1-6 в зависимост от нивото на заглавието ALIGN=direction, където direction е left, right или center. Slide 9: Започване на нов абзац <HTML><HEAD><TITLE>HTML book</TITLE> </HEAD> <BODY> <H1 ALIGN=center>Internet, web and HTML </H1> <P ALIGN=left>Before you can do anything, you must initialize a database storage area on disk. We call this a database cluster. (SQL speaks of a catalog cluster instead.) A database cluster is a collection of databases that will be accessible through a single instance of a running database server. </BODY> </HTML> Slide 10: Смяна на шрифта <HTML><HEAD><TITLE>HTML book</TITLE> </HEAD> <BODY> <H1 ALIGN=center>Internet, web and HTML </H1> <P ALIGN=left>Before you can do anything, you must initialize a database storage area on disk. We call this a database cluster. (SQL speaks of a catalog cluster instead.). <P> <FONT SIZE=5 FACE=“Georgia” COLOR=#D63194>A database cluster is a collection of databases that will be accessible through a single instance of a running database server. </FONT> </BODY> </HTML> Slide 11: Форматиране на текст <HTML><HEAD><TITLE>HTML book</TITLE> </HEAD> <BODY> <H1 ALIGN=center>Internet, web and HTML </H1> <P ALIGN=left>Before you can do anything, you must initialize a database storage area on disk. We call this a database cluster. (SQL speaks of a catalog cluster instead.). <P> <FONT SIZE=5 FACE=“Georgia” COLOR=#D63194>A <I>database</I> cluster is a collection of databases that will be accessible through a single instance of a running <B>database</B> server. </FONT> </BODY> </HTML> Slide 12: Създаване на горни и долни индекси <HTML><HEAD><TITLE>HTML book</TITLE> </HEAD> <BODY> <H1 ALIGN=center>Internet, web and HTML </H1> <P ALIGN=left>Before you can do anything, you must initialize a database storage area on disk. We call this a database cluster. (SQL speaks of a catalog cluster instead.). <P><SUP>1</SUP> Cluster is a collection of databases <BR> D<SUB>15</SUB> </BODY> </HTML> Slide 13: Зачертаване и подчертаване на текст <HTML><HEAD><TITLE>HTML book</TITLE> </HEAD> <BODY> <H1 ALIGN=center>Internet, web and HTML </H1> <P ALIGN=left>Before you can do anything, you must initialize a database storage area on disk. We call this a <STRIKE>database </STRIKE> cluster. (SQL speaks of a catalog <U>cluster instead </U>.). </BODY> </HTML> Slide 14: Добавяне на коментар <HTML><HEAD><TITLE>HTML book</TITLE> </HEAD> <BODY> <P ALIGN=left>Before you can do anything, you must initialize a database storage area on disk. We call this a database cluster. (SQL speaks of a catalog cluster instead.). <!-A database cluster is a collection of databases that will be accessible through a single instance of a running database server. -> </BODY> </HTML> Slide 16: Вмъкване на изображения <HTML><HEAD><TITLE>HTML book</TITLE> </HEAD> <BODY> <H1 ALIGN=center>Internet, web and HTML </H1> <P ALIGN=left>Before you can do anything, you must initialize a database storage area on disk. We call this a database cluster. (SQL speaks of a catalog cluster instead.) A database cluster is a collection of databases that will be accessible through a single instance of a running database server. <BR> <IMG SRC=laptop.gif> </BODY> </HTML> Slide 17: Вмъкване на изображения <HTML><HEAD><TITLE>HTML book</TITLE> </HEAD> <BODY> <H1 ALIGN=center>Internet, web and HTML </H1> <P ALIGN=left>Before you can do anything, you must initialize a database storage area on disk. We call this a database cluster. (SQL speaks of a catalog cluster instead.) A database cluster is a collection of databases that will be accessible through a single instance of a running database server. <BR> <IMG SRC=laptop.gif BORDER=3 ALT=” This is a picture of laptop” WIDTH=100 HEIGHT=150> </BODY> </HTML> Slide 18: Свързване на икони с външни изображения <HTML><HEAD><TITLE>HTML book</TITLE> </HEAD> <BODY> <H1 ALIGN=center>Internet, web and HTML </H1> <P ALIGN=left>Before you can do anything, you must initialize a database storage area on disk. We call this a database cluster. (SQL speaks of a catalog cluster instead.) A database cluster is a collection of databases that will be accessible through a single instance of a running database server. <BR> <A HREF=laptop.gif> <IMG SRC=laptop.gif BORDER=3 ALT=” This is a picture of laptop” WIDTH=100 HEIGHT=150> </A> </BODY> </HTML> Slide 19: Разполагане на текст около изображения <HTML><HEAD><TITLE>HTML book</TITLE> </HEAD> <BODY> <IMG SRC=laptop.gif ALIGN=left> <H1 ALIGN=center>Internet, web and HTML </H1> <P ALIGN=left>Before you can do anything, you must initialize a database storage area on disk. We call this a database cluster. (SQL speaks of a catalog cluster instead.) A database cluster is a collection of databases that will be accessible through a single instance of a running database server. <BR> </BODY> </HTML> ----------------------------------------------------------- ALIGN=left или right Slide 20: Разполагане на текст между две изображения <HTML><HEAD><TITLE>HTML book</TITLE> </HEAD> <BODY> and HTML </H1> <IMG SRC=laptop.gif ALIGN=left WIDTH=100 HEIGHT=150> <H1 ALIGN=center>Internet, web Before you can do anything, you must initialize a database storage area on disk. We call this a database cluster. (SQL speaks of a catalog cluster instead.) A database cluster is a collection of databases that will be accessible through a single instance of a running database server. <IMG SRC=laptop.gif ALIGN=right WIDTH=100 HEIGHT=150> Before you can do anything, you must initialize a database storage area on disk. We call this a database cluster. (SQL speaks of a catalog cluster instead.) A database cluster is a collection of databases that will be accessible through a single instance of a running database server </BODY> </HTML> Slide 21: Прекъсване на разполагането на текста <HTML><HEAD><TITLE>HTML book</TITLE> </HEAD> <BODY> <IMG SRC=laptop.gif ALIGN=right WIDTH=100 HEIGHT=100> <H1 ALIGN=center>Internet, web and HTML </H1> <BR CLEAR=right> <IMG SRC=laptop.gif ALIGN=left WIDTH=100 HEIGHT=100> Before you can do anything, you must initialize a database storage area on disk. We call this a database cluster. (SQL speaks of a catalog cluster instead.) A database cluster is a collection of databases that will be accessible through a single instance of a running database server. </BODY> </HTML> -------------------------------------------------------------------CLEAR=right, left или all Slide 22: Добавяне на пространство около изображение <HTML><HEAD><TITLE>HTML book</TITLE> </HEAD> <BODY> <IMG SRC=laptop.gif ALIGN=right VSPACE=15 HSPACE=15> <H1 ALIGN=center>Internet, web and HTML </H1> Before you can do anything, you must initialize a database storage area on disk. We call this a database cluster. (SQL speaks of a catalog cluster instead.) A database cluster is a collection of databases that will be accessible through a single instance of a running database server. </BODY> </HTML> Slide 23: Добавяне на хоризонтални линии <HTML><HEAD><TITLE>HTML book</TITLE> </HEAD> <BODY> <IMG SRC=laptop.gif ALIGN=right > <H1 ALIGN=center>Internet, web and HTML </H1> Before you can do anything, you must initialize a database storage area on disk. We call this a database cluster. (SQL speaks of a catalog cluster instead.) A database cluster is a collection of databases that will be accessible through a single instance of a running database server. <HR SIZE=10 WIDTH=80% ALIGN=center NOSHADE> </BODY> </HTML> Slide 24: Задаване на фонов цвят <HTML><HEAD><TITLE>HTML book</TITLE> </HEAD> <BODY BGCOLOR=#94D6E7> <IMG SRC=laptop.gif ALIGN=right > <H1 ALIGN=center>Internet, web and HTML </H1> Before you can do anything, you must initialize a database storage area on disk. We call this a database cluster. (SQL speaks of a catalog cluster instead.) A database cluster is a collection of databases that will be accessible through a single instance of a running database server. </BODY> </HTML> Slide 25: Използване на фоново изображение <HTML><HEAD><TITLE>HTML book</TITLE> </HEAD> <BODY BACKGROUND=rbow.gif> <IMG SRC=laptop.gif ALIGN=right > <H1 ALIGN=center>Internet, web and HTML </H1> Before you can do anything, you must initialize a database storage area on disk. We call this a database cluster. (SQL speaks of a catalog cluster instead.) A database cluster is a collection of databases that will be accessible through a single instance of a running database server. </BODY> </HTML> Slide 26: Използване на предварително форматиране <HTML><HEAD><TITLE>HTML book</TITLE> </HEAD> <BODY > <H1 ALIGN=center>Internet, web and HTML </H1> <PRE> EUROPA ASIA AMERICA IBM 35% 25% 40% COMPAQ 10% 50% 40% SONY 55% 25% 20% </PRE> </BODY> </HTML> Slide 27: Създаване на връзка към друга web страница <HTML><HEAD><TITLE>HTML book</TITLE> </HEAD> <BODY> <IMG SRC=laptop.gif ALIGN=right > <H1 ALIGN=center>Internet, web and HTML </H1> Before you can do anything, you must initialize a <A HREF=page1.html>database</A> storage area on disk. We call this a database cluster. (SQL speaks of a catalog cluster instead.) A database cluster is a collection of databases that will be accessible through a single instance of a running database server. </BODY> </HTML> Slide 28: Създаване на котви <HTML><HEAD><TITLE>HTML book</TITLE> </HEAD> <BODY> <IMG SRC=laptop.gif ALIGN=right > <H1 ALIGN=center>Internet, web and HTML </H1> Before you can do anything, you must initialize a <A HREF= #server >database</A> storage area on disk. We call this a database cluster. (SQL speaks of a catalog cluster instead.) A database cluster is a collection of databases that will be accessible through a single instance of a running database server. A database cluster is a collection of databases that will be accessible through a single instance of a running database server. A database cluster is a collection of databases that will be accessible through a single instance of a running database server. A database cluster is a collection of databases that will be accessible through a single instance of a running database <A NAME=server> server</A>. </BODY> </HTML> Slide 29: Изобразяване на връзки в определени прозорци <HTML><HEAD><TITLE>HTML book</TITLE> </HEAD> <BODY> <IMG SRC=laptop.gif ALIGN=right > <H1 ALIGN=center>Internet, web and HTML </H1> Before you can do anything, you must initialize a <A HREF=page1.html TARGET=page1>database</A> storage area on disk. We call this a database cluster. (SQL speaks of a catalog cluster instead.) A database cluster is a collection of databases that will be accessible through a single instance of a running database server. </BODY> </HTML> Slide 30: Отваряне на всички връзки в един и същ прозорец <HTML><HEAD><TITLE>HTML book</TITLE> <BASE TARGET=window> </HEAD> <BODY> <IMG SRC=laptop.gif ALIGN=right > <H1 ALIGN=center>Internet, web and HTML </H1> Before you can do anything, you must initialize a <A HREF=page1.html >database</A> storage area on disk. We call this a database cluster. (SQL speaks of a catalog cluster instead.) A database cluster is a collection of databases that will be accessible through a single <A HREF=page2.html > instance </A> of a running database server. </BODY> </HTML> Slide 31: Използване на изображения за етикети на връзки <HTML><HEAD><TITLE>HTML book</TITLE> </HEAD> <BODY> <A HREF=page1.html > <IMG SRC=laptop.gif ALIGN=right > </A> <H1 ALIGN=center>Internet, web and HTML </H1> Before you can do anything, you must initialize a databasestorage area on disk. We call this a database cluster. (SQL speaks of a catalog cluster instead.) A database cluster is a collection of databases that will be accessible through a single instance of a running database server. </BODY> </HTML> Slide 33: Създаване на таблица <HTML><HEAD><TITLE>HTML book</TITLE> </HEAD> <BODY> <TABLE> <TR> <TD>1 </TD> <TD> 2</TD> <TD> 3</TD> </TR> <TR> <TD><IMG SRC=laptop.gif WIDTH=20 HEIGHT=20> </TD> <TD> 5</TD> <TD>6 </TD> </TR> <TR> <TD>7 </TD> <TD> 8</TD> <TD>9 </TD> </TR> </TABLE </BODY> </HTML> Slide 34: Създаване на таблица <HTML><HEAD><TITLE>HTML book</TITLE> </HEAD> <BODY> <TABLE BORDER=10 BORDERCOLORLIGHT=#00A5C6 BORDERCOLORDAEK=#082984> <TR> <TD>1 </TD> <TD> 2</TD> <TD> 3</TD> </TR> <TR> <TD><IMG SRC=laptop.gif WIDTH=20 HEIGHT=20> </TD> <TD> 5</TD> <TD>6 </TD> </TR> <TR> <TD>7 </TD> <TD> 8</TD> <TD>9 </TD> </TR> </TABLE> </BODY> </HTML> Slide 35: Създаване на таблица <HTML><HEAD><TITLE>HTML book</TITLE> </HEAD> <BODY> <TABLE BORDER=10 BORDERCOLORLIGHT=#00A5C6 BORDERCOLORDAEK=#082984 WIDTH=300 ALIGN=center> <TR> <TD>1 </TD> <TD> 2</TD> <TD> 3</TD> </TR> <TR> <TD><IMG SRC=laptop.gif WIDTH=20 HEIGHT=20> </TD> <TD> 5</TD> <TD>6 </TD> </TR> <TR> <TD>7 </TD> <TD> 8</TD> <TD>9 </TD> </TR> </TABLE> </BODY> Slide 36: Разполагане на текст около таблица <HTML><HEAD><TITLE>HTML book</TITLE> </HEAD> <BODY> <TABLE BORDER=10 BORDERCOLORLIGHT=#00A5C6 BORDERCOLORDAEK=#082984 WIDTH=300 ALIGN=left><TR> <TD>1 </TD> <TD> 2</TD> <TD> 3</TD> </TR> <TR> <TD><IMG SRC=laptop.gif WIDTH=20 HEIGHT=20> </TD> <TD> 5</TD> <TD>6 </TD> </TR> <TR> <TD>7 </TD> <TD> 8</TD> <TD>9 </TD> </TR> </TABLE> Before you can do anything, you must initialize a databasestorage area on disk. We call this a database cluster. (SQL speaks of a catalog cluster instead.) A database cluster is a collection of databases that will be accessible through a single instance of a running database server </BODY> </HTML> Slide 37: Разпростиране на клетка в повече колони и редове <HTML><HEAD><TITLE>HTML book</TITLE> </HEAD> <BODY> <TABLE BORDER=10 BORDERCOLORLIGHT=#00A5C6 BORDERCOLORDAEK=#082984 WIDTH=300 ALIGN=left> <TR> <TD COLSPAN=2>1 </TD> <TD> 2</TD> <TD> 3</TD> </TR> <TR> <TD><IMG SRC=laptop.gif WIDTH=20 HEIGHT=20> </TD> <TD> 5</TD> <TD ROWSPAN=2>6 </TD> </TR> <TR> <TD>7 </TD> <TD> 8</TD> <TD>9 </TD> </TR> </TABLE> </BODY> </HTML> Slide 38: Оцветяване на клетките <HTML><HEAD><TITLE>HTML book</TITLE> </HEAD> <BODY> <TABLE BORDER=10 BORDERCOLORLIGHT=#00A5C6 BORDERCOLORDAEK=#082984 WIDTH=300 ALIGN=left> <TR BGCOLOR=TEAL> <TD >1 </TD> <TD> 2</TD> <TD> 3</TD> </TR> <TR> <TD><IMG SRC=laptop.gif WIDTH=20 HEIGHT=20> </TD> <TD BGCOLOR=red > 5</TD> <TD >6 </TD> </TR> <TR> <TD>7 </TD> <TD> 8</TD> <TD>9 </TD> </TR> </TABLE> </BODY> </HTML> Slide 39: Създаване на рамки-по редове <HTML><HEAD><TITLE>HTML book</TITLE> </HEAD> <FRAMESET ROWS=70,,80> <FRAME NAME=TOP SRC=TOP.HTML> <FRAME NAME=middle SRC=middle.HTML> <FRAME NAME=bottom SRC=bottom.HTML> <BODY> </BODY> </HTML> Slide 40: Създаване на рамки-по колони <HTML><HEAD><TITLE>HTML book</TITLE> </HEAD> <FRAMESET COLS=80,,100> <FRAME NAME=TOP SRC=TOP.HTML> <FRAME NAME=middle SRC=middle.HTML> <FRAME NAME=bottom SRC=bottom.HTML> <BODY> </BODY> </HTML> Slide 41: Създаване на рамки-по редове и по колони <HTML><HEAD><TITLE>HTML book</TITLE> </HEAD> <FRAMESET FRAMEBORDER=10 ROWS=", 110," COLS=",210,"> <FRAME NAME=TOP SRC=TOP.HTML MARGINWIDTH=1 MARGINHEIGHT=1> <FRAME NAME=middle SRC=middle.HTML MARGINWIDTH=1 MARGINHEIGHT=1> <FRAME NAME=bottom SRC=bottom.HTML MARGINWIDTH=1 MARGINHEIGHT=1> <FRAME NAME=TOP1 SRC=TOP.HTML MARGINWIDTH=1 MARGINHEIGHT=1> <FRAME NAME=middle1 SRC=middle.HTML MARGINWIDTH=1 MARGINHEIGHT=1> <FRAME NAME=bottom1 SRC=bottom.HTML MARGINWIDTH=1 MARGINHEIGHT=1> <FRAME NAME=TOP2 SRC=TOP.HTML MARGINWIDTH=1 MARGINHEIGHT=1> <FRAME NAME=middle2 SRC=middle.HTML MARGINWIDTH=1 MARGINHEIGHT=1> <FRAME NAME=bottom2 SRC=bottom.HTML MARGINWIDTH=1 MARGINHEIGHT=1><BODY> </BODY> </HTML> Slide 43: Създаване на форми <html><head> <title>FORM</title></head> <body> <form method=get action=cgi.script.url> <p>Name:<input type="text" NAME="isitor_name"> <p>e-mail:<input type="text" NAME="isitor_email"> <p>Copmuter: <input type="radio" NAME="computer" VALUE="Mac"> Macintosh <INPUT TYPE="radio" NAME="computer" VALUE="PC">Windows <p><INPUT TYPE="submit" NAME="submit" VALUE="Send info"> </FORM> </BODY> </HTML> Slide 44: Създаване на форми <html><head> <title>FORM</title></head> <body> <FORM METHOD=POST ACTION=http://www.form.com/cgibin/uploadfile.cgi ENCTYPE=“multipart/form-data”> Име:<input type="text" Naame=“firstname” SIZE=20> <p><b>Намери файлa:</b><br><input type=“file” name=“files” SIZE=40> <button type=“submit” NAME=“submit” VALUE="submit" WIDTH=20 HEIGHT=20>submit</button> </FORM> </BODY> </HTML> Slide 45: Вмъкване на звук <html><head> <title>multimedia</title></head > <body> <EMBED SRC=ringin.waV CONTROLS="console" WIDTH=100 HEIGHT=70> </BODY> </HTML> -----------------------------CONTROLS=playbutton, pausebutton, stopbutton, console, smallconsole Slide 46: Добавяне на фонов звук <html><head> <title>multimedia</title> </head> <body> <BGSOUND SRC= ringin.waV LOOP=infinite> </BODY> </HTML> Slide 47: Вграждане на видео <html><head> <title>multimedia</title> </head> <body> <EMBED SRC="animation.aVi" WIDTH=250 HEIGT=220 AUTOSTART=true ALIGN=right> </BODY> </HTML> Slide 48: Създававане на преминаващ текст <html> <title> </title> <body> <MARQUEE WIDTH=75% HEIGHT=15 BEHAIOR=scroll DIRECTION=LEFT LOOP=INFINITE BGCOLOR=RED> Това е преминаващ текст </MARQUEE> </body> </html> -----------------------------------------BEHAIOR=scroll, slide, alternate Slide 49: Да се създаде уеб сайт от пет страници. Три страници да бъдат разположени в рамки и да формират главната страница index.html. Към останалите две да има хипервръзки. В страниците да бъде включен форматиран текст, изображение, таблица, видео и аудио.