Засоби створення Веб-сторінок
Які програмні засоби необхідні, щоб створити самий елементарний електронний документ на мові HTML?
Команди мови HTML. за допомогою яких виконується розмітка вихідного тексту, називаються тегами (кодами).
Тег являє собою набір символів, який починається з символу <и заканчивается символом> (Кутові дужки, між якими записується ключове слово): <………>
Розрізняють одинарні теги: <…………> і парні - контейнери - (відкривається: <………………> і закривається - перед ключовим словом знаходиться символ косою риси (/) ), А також одинарні і вікна, що теги можуть бути з атрибутами (додаткові ключові слова, які можуть мати різні значення - значення записуються після знака одно і можливо в лапках): <……………… …………=… …………=… …………=…>.
Структура HTML-документа (Веб-сторінки)
Всі HTML-документи мають строго задану структуру, яка створюється за допомогою таких тегів, як
... - Ця пара тегів повідомляє браузеру, що перед ним дійсно HTML-документ
... - Розділ заголовків, який містить інформацію про документ в цілому, зокрема він повинен містити наступний тег:
...</ title> - Тег, що містить заголовок документа, який буде відображений в рядку заголовків вікна броузера.</p>
<p>Алгоритм створення HTML-документа за допомогою Блокнота</p>
<p>Алгоритм редагування HTML-документа за допомогою Блокнота</p>
<p>Робота з кольором на Веб-сторінці</p>
<p>Колір для Web-сторінок задається шістнадцятковим кодом: # ккззсс, де кк - число, яке вказує на кількість червоного відтінку, зз - число, яке вказує на кількість зеленого відтінку, сс - число, яке вказує на кількість синього відтінку.</p>
Алгоритм визначення шестнадцатиричного коду для кольору
<ol>
<li>Відкрити програму Paint. Вибрати в меню Палітра - Змінити палітру - Визначити колір.</li>
<li>Виписати десяткові значення для коліченства червоного, зеленого, синього кольорів в обраному кольорі</li>
<li>Відкрити програму калькулятор</li>
<li>Перевести десяткові значення в шістнадцяткові. Кожен колір буде записаний двома Шістнадцяткова цифрами</li>
<li>Отримані шість цифр і є шістнадцятковий код кольору</li>
</ol><p>Команди форматування абзаців<br></p>
<p>У мові HTML немає тега для створення абзацного відступу (нового рядка), тому для зручності читання тексту між абзацами броузер друкує порожню рядок. Новий рядок може бути створена за допомогою декількох прогалин, зайвий пробіл в HTML задається набором символів: </p>
<p>Парний тег: <p> ... </ p> - для позначення абзацу. Цей тег може містити атрибут ALIGN, значення якого задає вирівнювання елементів абзацу: Center, Left, Right, Justify. наприклад <p align=justify> - означає вирівняти абзац по ширині.</p>
<p>Поодинокі теги: <br> - перехід на новий рядок без створення абзацу, <hr> - створення горизонтальної лінії.</p>
<p>Команди форматування шрифту<br></p>
<p>Парні теги: <i> ... ... ... </i> - курсив</p>
<p><b> ... ... ... </ b> - жирний</p>
<p><u> ... ... ... </ u> - підкреслений</p>
<p>Тег з атрибутами:<br> <font face =” тип шрифта ” size =” размер шрифта ” color =” цвет ”> ... ... ... </ font></p>
<p>Якщо в <BODY> НЕ будуть задані атрибути зовнішнього вигляду документа, то текст буде відображений у вікні браузера відповідно до призначених для користувача установками. Для забезпечення відповідності між зовнішнім виглядом документа в браузері користувача і дизайном розробника необхідно використовувати спеціальні атрибути тега:</p>
<p>Вставка малюнків в HTML-документ<br></p>
<p>Файл з картинкою і HTML документ обіцяли бути збережені в одній папці. Файл повинен бути оптимізований, тобто збережений у форматі .jpg. gif. png</p>
<p>Тег для вставки картинки в HTML документ має вигляд: <br><div style="text-align:center;"><img SRC="ИМЯ ФАЙЛА" title="Мова розмітки гіпертексту html (html)" ALT="текст" /></div><br> де:<br></p>
<p>ім'я файлу - це ім'я файлу c картинкою.<br> текст - це текст, що виводиться замість зображення, якщо файл зображення по якийсь причині недоступний.<br> значення ALIGN - вказує місце розташування зображення.<br> Приймає наступні можливі значення: <br> ALIGN = TOP - подальший текст розташовується у верхній частині зображення. <br> ALIGN = BOTTOM - подальший текст розташовується в нижній частині зображення. <br> ALIGN = LEFT - зображення розташовується в лівій частині листа. Текст обтікає зображення праворуч. <br> ALIGN = MIDDLE - зображення розташовується в центрі листа. <br> ALIGN = RIGHT - зображення розташовується в правій частині листа. Текст обтікає зображення зліва. <br>значення WIDTH - ширина необхідного зображення на екрані, <br>значення HEIGHT - висота необхідного зображення на екрані. <br>значення BORDER - задає ширину лінії для рамки <br> Повернутися до меню</p>
</div>
</article>
</div>
</div>
</div>
<footer class="igrzom-footer clearfix">
<ul>
<li><a href="/articles/prohodzhennja-gri-vtecha-z-zagublenogo-korolivstva.php">Проходження гри - втеча з загубленого королівства - (escape the lost kingdom)</a></li>
<li><a href="/articles/jak-vidaliti-zapah-z-odjagu-pislja-pozhezhi.php">Як видалити запах з одягу після пожежі - відповіді і поради на твої питання</a></li>
<li><a href="/articles/tatu-golub.php">тату голуб</a></li>
<li><a href="/articles/jak-vse-vlashtovano-abo-jak-ce-pracjue.php">Як все влаштовано або як це працює</a></li>
<li><a href="/articles/vikroji-obnovka-svoimi-rukami.php">Викройі, обновка своїми руками</a></li>
</ul>
<p>© Copyright 2016 - 2024 | Всі права захищен</p>
<br>
<p><a href="/privacy.php">Privacy Policy</a></p>
<!--LiveInternet counter--><script type="text/javascript">
document.write("<a href='//www.liveinternet.ru/click' "+
"target=_blank><img src='//counter.yadro.ru/hit?t50.6;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+
";"+Math.random()+
"' alt='' title='LiveInternet' "+
"border='0' width='31' height='31'><\/a>")
</script><!--/LiveInternet-->
</footer>
</div>
</div></body>
</html>