Подякувати Студентському архіву довільною сумою
Admin
26.02.2023 12:38
Дякуємо, що користуєтесь нашим архівом!
Лабораторна робота 1
Інформація про навчальний заклад
ВУЗ:
Національний університет Львівська політехніка
Інститут:
Не вказано
Факультет:
КН
Кафедра:
Не вказано
Інформація про роботу
Рік:
2024
Тип роботи:
Лабораторна робота
Предмет:
Основи програмування та алгоритмічні мови
Частина тексту файла (без зображень, графіків і формул):
Міністерство освіти і науки України
Національний університет «Львівська політехніка»
/
Звіт
до лабораторної роботи № 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 double groove 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. Та вивчив їх базові властивості.
03.04.2021 00:04-
Ділись своїми роботами та отримуй миттєві бонуси!
0%
Оголошення від адміністратора