Седмица 8.02. - 12.02.2021
HTML
HTML е акроним от Hyper Text Markup Language - в свободен превод "тагов език за хипер текст".
HTML е език за създаване на Интернет страници.
HTML документите са по същество текстови файлове и могат да бъдат създавани и редактирани с обикновен текстов редактор като Notepad++. За по-голямо удобство са създадени текстови редактори като Notepad++.
Може да изтеглите Notepad++ от тук - https://notepad-plus-plus.org/downloads/
Тагове
<html> </html> указват началото и края на уеб страницата.
<head> </head> записва се информация за страницата.
<title> </title> името на страницата, което се появява в заглавния ред на браузъра.
<body> </body> задават видимата част от сайта, която ще бъде показана на екрана.
Тагове за форматиране на текст:
<b> </b> - текстът се удебелява (bold)
<i> </i> - наклон на дясно (italic)
<u> </u> - подчертаване на текста (underline)
<h1> </h1> представя текст, който ще бъде показан като заглавие.
Заглавията могат да бъдат от <h1> до <h6> като колкото е по-голямо числото, толкова по-малък е размерът на заглавието. Но на практика се използват таговете от <h1> до <h3>.
<p> </p> представя текст, който ще бъде показан като параграф. Всеки нов параграф се извежда на нов ред.
<br /> таг за празен ред. Този таг няма затварящ таг, ето защо в него се поставя наклонена черта.
Мета тагове:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> - указва на браузъра азбуката, на която е написана страницата
Седмица
Създаване на подредени не подредени списъци (преговор)
Таговете < ul>, <ol>, <li> както и атрибутите за тeзи тагове са дадени в теорията по-долу на страницата.
Изгледайте видеото и направете Задачата списъци. Изпратете задачата на имейл [email protected]
Спазвайте правилата за създаване и изпращане на имейл.
В тема на имейла пишете: домашна работа, 1, 11в (съответно вашия номер и клас)
Задача списъци:
Създайте страница с име "Рецепти". Нека като съдържание на страницата да се изписва текстът по-долу.
Текстът трябва да бъде форматиран както е дадено в рецептата по-долу. Съхранете файла с име pitka.html.
Седмица
Създаване на таблици с HTML
Таговете < table>, <tr>, <td> както и атрибутите за тeзи тагове са дадени в теорията по-долу на страницата.
Изгледайте видеото и направете Задача 1 и Задача 2. Изпратете двете задачи на имейл [email protected]
Спазвайте правилата за създаване и изпращане на имейл. В тема на имейла пишете: Домашна работа, 1, 11в (съответно вашия номер и клас)
Задача 1:
|
Задача 2:
|
Домашна работа
Създайте таблицата от изображението по-долу. Съхранете файла с име table_klas.html Изпратете файла на имейл [email protected]
Упътване: За да направите таблицата трябва да използвате атрибутa colspan.
Седмица 06.04. - 12.04.2020г.
Създаване на таблици с HTML. Атрибути на таговете <table>, <tr>, <td>. Colspan, rowspan
Домашна работа - задача 1
Създайте таблицата от изображението по-долу. Съхранете файла с име table_nhg.html Изпратете файла на имейл [email protected]
Упътване: За да направите таблицата трябва да използвате атрибутите на тага <td> - colspan и rowspan.
Домашна работа - задача 2
Създайте таблицата от изображението по-долу. Съхранете файла с име table_nhg.html Изпратете файла на имейл [email protected]
Упътване: За да направите таблицата трябва да използвате атрибутите на тага <td> - colspan и rowspan.
Домашна работа - задача 3
Създайте таблицата от изображението по-долу. Съхранете файла с име table_5.html Изпратете файла на имейл [email protected]
Упътване: За да направите таблицата трябва да използвате атрибутите colspan и rowspan.
Домашна работа - задача 4
Създайте таблицата от изображението по-долу. Съхранете файла с име table_6.html Изпратете файла на имейл [email protected]
Упътване: За да направите таблицата трябва да използвате атрибутите colspan и rowspan.
Домашна работа - задача 5
Създайте таблицата от изображението по-долу. Съхранете файла с име table_7.html Изпратете файла на имейл [email protected]
Упътване: За да направите таблицата трябва да използвате атрибутите colspan и rowspan.
Домашна работа - задача 6
Създайте формуляра от изображението по-долу. Съхранете файла с име form_1.html Изпратете файла на имейл [email protected]
Упътване: Погледнете теотията за създаване на формуляри в сайта.
HTML
HTML е акроним от Hyper Text Markup Language - в свободен превод "тагов език за хипер текст".
HTML е език за създаване на Интернет страници.
HTML документите са по същество текстови файлове и могат да бъдат създавани и редактирани с обикновен текстов редактор като Notepad++. За по-голямо удобство са създадени текстови редактори като Notepad++.
Тагове
<html> </html> указват началото и края на уеб страницата.
<head> </head> записва се информация за страницата.
<title> </title> името на страницата, което се появява в заглавния ред на браузъра.
<body> </body> задават видимата част от сайта, която ще бъде показана на екрана.
<h1> </h1> представя текст, който ще бъде показан като заглавие.
Заглавията могат да бъдат от <h1> до <h6> като колкото е по-голямо числото, толкова по-малък е размерът на заглавието. Но на практика се използват таговете от <h1> до <h3>.
<p> </p> представя текст, който ще бъде показан като параграф. Всеки нов параграф се извежда на нов ред.
<br /> таг за празен ред. Този таг няма затварящ таг, ето защо в него се поставя наклонена черта.
Тагове за форматиране на текст:
<b> </b> - текстът се удебелява (bold)
<i> </i> - наклон на дясно (italic)
<u> </u> - подчертаване на текста (underline)
Мета тагове:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> - указва на браузъра азбуката, на която е написана страницата
Тагове за изображения в HTML <img src="snimka.jpg" />
Атрибути на img тага:
src="address file" - където "address file" е пътя до директорията (считан от настоящата директория), където се намира изображението и самото му име. Не забравяйте да укажете точно адреса на изображението, ако то се намира в папка, различна от настоящата - тази на html документа. src е задължителен атрибут.
width = "широчина" - размер на снимката (широчина)
height = "височина" - размер на снимката (височина)
<img src="image.jpg" width=”100” height=”50” />
align="left" - подравняване на снимката спрямо текста
<img src="img.jpeg" align="left" /> - подравнява изображението вляво спрямо текста.
align = top bottom middle left right - Подравнява изображението по горната линия на текста, долната или в средата. Вляво или вдясно на страницата.
alt="tekst" - aлтернативен текст
<img src="image.jpg" alt="text" /> - задава какъв текст да се появи, ако не се вижда изображението.
hspace, vspace - определяне на свoбoдно място около графиката
<img src="image.jpg" hspace=”10” vspace=”10” /> - задава в брой пиксели свободното място около графиката по вертикалата и хоризонталата на снимката..
Рамка около графиката - border
<img src="image.jpg" border="2" />
Задава в брой пиксели ширина на рамка около графиката. Това е полезно когато изображението е връзка.
За да не бъде оградено от стандартната синя рамка, се слага border=”0”.
Пример:
<img src="bonboni.jpg" width="500" height="334" alt="Шоколадови бонбони" align="left" hspace="40" vspace="10" />
Неподреден списък
Неподреден е списъка, в който елементите не са номерирани чрез арабски цифри, римски цифри или букви. Тагът за такъв списък е ul:
<ul>
<li>Първи елемент от списъка</li>
<li>Втори елемент от списъка</li>
<li>Трети елемент от списъка</li>
</ul>
Възможните стойности са три атрибута:
disc (запълнен кръг като този, който е по подразбиране)
circle (незапълнен кръг)
square (запълнен квадрат).
Пример за неподреден списък с незапълнени кръгчета: <ul type="circle">
Линкове с цветови комбинации:
https://www.computerhope.com/htmcolor.htm
http://html-color-codes.info/
Атрибут за фон на страницата
<body bgcolor="#ffebcd" >
Атрибути на тага FONT:
color (цвят на шрифта)
Задаването на цвят на текста става като се присвои някаква стойност на атрибута color="цвят".
Пример:
<font color="blue">Това е син текст</font>
<font color="green">Това е зелен текст</font>
Таг за хипервръзка към сайт
<a href="https://it-lessons.weebly.com/">връзка към it-lessons.weebly.com</a>
Таг за хипервръзка към сайт
<a href="page1.html">Връзка към страница page1.html от началната страница</a>
Таг за таблици
<table> </table>
Атрибути на table
width - задава широчината на таблицата, обикновено това става в пиксели, но може да бъде и в проценти.
height - задава височината на таблицата
<table width="700" height="700">
<table width="100%" height="50%">
align - хоризонтално подравняване на таблицата: left, right, center
<table align="left" >
cellspacing - добавя пространство между клетките в таблицата без да променя размера на таблиците в пиксели
<table cellspacing="10" border="1">
cellpadding – добавя пространство вътре в самата клетка - между бордера на клетката и текста в нея
<table cellpading="10" border="1">
bgcolor – цвят на фона на цялата таблица.
<table bgcolor="#000000" border="1">
<table bgcolor="black" border="1">
background – изображение за фона на таблицата
<table background=”picture1.jpg” border="1">
Таг за ред в таблица
<tr>
Атрибути на тага <tr>
bgcolor - цвят на фона на реда
<tr bgcolor="#ffebcd" >
Пример:
<tr bgcolor="#CEECF5">
<td> Математика </td>
<td> Български език </td>
<td> История </td>
<td> Философия </td>
</tr>
Пример за най-обща структура:
<html>
<head>
<title> Рецепти </title>
</head>
<body>
<p> Бисквитени бонбони </p>
</body>
</html>
Тест_1_HTML, Тест_2_HTML, Тест_3_HTML
|
|