Инсталиране на средата Visual Studio Code Изтегляне на Visual Studio Code - https://code.visualstudio.com/, бутона Download и изтегляте версията, подходяща за вашата компютърна система. Първи стъпки в създаването на HTML файл 1. Създаване на нова папка с име HTML 3. Отваряме Visual Studio Code, File-->Open folder, избираме създадената папка HTML. 4. Папката се появява и създаваме HTML файла като натискаме върху плюса. Изписваме index.html 5. В HTML документа записваме знак ! натискаме Enter 6. От менюто File --> Auto Save 7. Името на тага и Tab от клавиатурата. Учебен сайт ученици:diysite.gymnasium-lom.com/uroci/urok1.html HTML е акроним от Hyper Text Markup Language - в свободен превод "тагов език за хипер текст". HTML е език за създаване на интернет страници. HTML документите са по същество текстови файлове и могат да бъдат създавани и редактирани с обикновен текстов редактор като Notepad++ За да изтеглите Notepad++ от линка - https://notepad-plus-plus.org/downloads/. Ние ще използваме средата за разработка Visual Studio Code. Пример за най-обща структура на уеб сайт: <!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title>Document</title> </head> <body>
</body> </html>
Тагове <html> </html> указват началото и края на уеб страницата. <head></head> записва се информация за страницата. <title></title> името на страницата, което се появява в заглавния ред на браузъра. <body> </body> задават видимата част от сайта, която ще бъде показана на екрана.
Тагове за форматиране на текст: <b> </b> - bold - текстът се удебелява <i> </i> - наклон на дясно <u> </u> - подчертаване на текста <h1></h1> представя текст, който ще бъде показан като заглавие. Заглавията могат да бъдат от <h1> до <h6> като колкото е по-голямо числото, толкова по-малък е размерът на заглавието. Но на практика се използват таговете от <h1> до <h3>. <p></p> представя текст, който ще бъде показан като параграф. Всеки нов параграф се извежда на нов ред. <br> таг за празен ред. Този таг няма затварящ таг.
Мета тагове: <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" />
Атрибут за фон на страницата <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>