Лабораторна робота 1. Лабораторна робота з Основи програмування та алгоритмічні мови. Робота № 100032

Лабораторна робота 1

Інформація про навчальний заклад

ВУЗ:

Національний університет Львівська політехніка

Інститут:

Не вказано

Факультет:

КН

Кафедра:

Не вказано

Інформація про роботу

Рік:

2021

Тип роботи:

Лабораторна робота

Предмет:

Основи програмування та алгоритмічні мови

Завантажити

Частина тексту файла (без зображень, графіків і формул):

Міністерство освіти і науки України Національний університет «Львівська політехніка» / Звіт до лабораторної роботи № 1 з дисципліни: «ВЕБ-програмування» «Дослідження каскадних стилів CSS. Частина 1» Львів 2021 Мета: Набуття навичок створенні і застосуванні каскадних стилів CSS. Базові властивості. Теоретичні відомості CSS (cascading style sheets – каскадні таблиці стилів) – одна з базових WEB-технологій сучасного інтернету. CSS-код – це список інструкцій для браузера про те, – яким чином відтворювати елементи веб-сторінок. Інструкції CSS зберігаються або в окремому файлі, що має розширення *.css, або у вигляді спеціального блоку команд в тексті WEB-сторінки або безпосередньо в тегах. Под «елементами» маються на увазі теги XHTML/HTML і їх вміст. Головна ідея CSS полягає у тому, щоби код HTML не вміщував елементи оформлення типу встановлення кольору, гарнітури кегля і т. і. В ідеальному варіанті WEB-сторінка повинна вміщувати лише теги логічного форматування, а вид елементів задаватись через стилі. При подібному розділенні формування дизайну і верстка сайту можуть вестись паралельно. Під способами застосування CSS розумітимемо форму декларування стилю на HTML сторінці і форму зв'язування опису стилю відображення елемента розмітки із самим елементом, тобто у якій формі автор сторінки (або дизайнер) описує стиль, і як і в якій формі його використовує. Отже, розрізняють чотири способи застосування стилів: - вбудовування у теги документа – дозволяє змінити форматування конкретних елементів сторінки; - впровадження – дозволяє задавати всі правила таблиці стилів в самому документі; - зв’язування – дозволяє використовувати одну таблицю стилів для форматування багатьох сторінок; - імпортування – дозволяє вбудовувати у документ таблицю стилів, розміщену на сервері. Важливо відзначити, що в усіх браузерах, крім Internet Explorer імпорт стилю не підтримується. Хід роботи Першим кроком буде під'єднання локальних файлів до хостингу. Налаштування FTP клієнта та іншого. /Рис.1 Створений хостинг Наступним кроком буде встановлення FTP-клієнту, у моєму випадку FiliZilla. Під'єднати локальні файли до самого хостингу. / Рис.2 Налаштований FTP-клієнт Надалі для редагування усіх файлів у даних лабораторних роботах я буду використовувати середовище IDE WebStorm. Створив папки sem7 та lr1. У теці lr1 створив файл lr1.html. Та наповнив його кодом з методичких матеріалів / Рис.3 Код lr1.html / Рис.4 Відкритий файл lr1.html у веб браузері Надалі добавляв стилі, лінії та контейнери. / Рис.6 Більш наповнена сторінка Виконання власного завдання. Описання деяких стилів на моїй сторінці. / Рис.7 Виконання індивідуального завдання Після чого сторінку необхідно перемістити на хостинг за допомогою FTP-клієнту. / Рис.8 Переміщений файл сторінки на сервер Текст сторінки: <html><head> <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=utf-8"></head><body><style> h1 { color: red; background: #f0f0f0; font-style: italic; /*oblique*/ font-weight: normal; /*bold normal*/ font-variant: small-caps; /*normal*/ font-size: 10pt; font-height: 10.2em; font-family: monospace; /*sans-serif serif fantasy*/ font-size: 10pt; } p{ background: silver; padding: 0pt; /* 10 ex */ margin-left: 100pt; margin-right: 500pt; margin-top: 20pt; margin-bottom: 24pt; /* margin: 2px 500pt 1pt 24pt; */ font-size: 10pt; } #d1 { margin: 5%; /* Відступи навколо цього елементу */ background: #fd0; /* Колір фону */ padding: 10px; /* Поля навколо тексту */ } #d2 { border-width: 20px; /* Ширина рамки */ border-color: #666; /* Колір рамки */ border-style: ridge; /* Параметри рамки solid dashed dotted doublegroove ridge inset outset*/ padding: 10px; /* Поля навколо текста */ margin: 20px; /* Відступи навколо */ text-align: left; /* Розташування тексту center left right justify */ text-indent: 2em; /* Відступ першого рядку в абзаці */ text-decoration: underline; }/*Управл. властивостями тексту blink linethrough ov*/ #d3 {font-style: normal; /* normal italic oblique */ font-variant: small-caps; font-family: cursive; /* serif sans-serif monospace fantasy cursive */ font-size: 10px; /* 140% em px pt */ font-weight: normal; /* normal bold */ }</style><html><h1>Дослідження CSS. Виконав студ. гр. КІ-44 Шугай Владислав</h1> </html><p>Сто років мучених надій,</p><p>і сподівань, і вір, і крові</p><p>синів, що за любов тавровані,</p><p>сто серць, як сто палахкотінь.</p><hr><div id='d1'> <hr> <div id='d2'> Слідкуйте за новим цікавим вмістом в Інтернеті. </div> <div id='d3'> <h1>Деякі властивості стилів: </h1> <p>border-width: 20px; /* Ширина рамки */</p> <p> border-color: #666; /* Колір рамки */</p> <p> border-style: ridge; /* Параметри рамки solid dashed dotted double*/</p> <p> groove ridge inset outset*/</p> <p> padding: 10px; /* Поля навколо текста */</p> <p> margin: 20px; /* Відступи навколо */</p> <p> text-align: left; /* Розташування тексту center left right justify */</p> <p> text-indent: 2em; /* Відступ першого рядку в абзаці */</p> <p> text-decoration: underline; /*Управл. властивостями тексту blink linethrough overline underline none */ </p> </div></div></body> Висновок: На лабораторній роботі набув навичок створення і застосування каскадних стилів CSS. Та вивчив їх базові властивості.

Лабораторна робота Основи програмування та алгоритмічні мови

vlshugai

03.04.2021 00:47

Коментарі

Ви не можете залишити коментар. Для цього, будь ласка, або зареєструйтесь.

Ділись своїми роботами та отримуй миттєві бонуси!

поділитись