Мови програмування html та css. Як освоїти програмування html. Для чого взагалі потрібна база даних

У Останнім часомвсе частіше і частіше різні інтернетресурси влаштовують холівари на тему: чи є HTML мовоюпрограмування чи ні. Як водиться, аргументів на користь обох точок зору наводять чимала кількість, тому я вирішив поставити собі точку в цій непотрібній суперечці.

Визначення мови програмування Мова програмування - формальна знакова система, призначена для запису комп'ютерних програм. Мова програмування визначає набір лексичних, синтаксичних та семантичнихправил, що задають зовнішній вигляд програми та дії, які виконає виконавець (комп'ютер) під керівництвом.

Так сказано у Вікіпедії, і більшість інших ресурсів або повністю використовує це визначення, або вільно викладає його без втрати змісту. Розглянемо докладніше складові визначення ЯП:

  • Формальна мова – це безліч кінцевих слів (рядків, ланцюжків) над кінцевим алфавітом.
  • Знакова система - це система одностайно інтерпретованих і повідомлень/сигналів, що трактуються, якими можна обмінюватися в процесі спілкування. Іноді знакові системи допомагають структурувати процес спілкування з метою надання йому певної адекватності щодо реакцій його учасників на ті чи інші «знаки». Як приклад знакової системи зазвичай наводять мову (як у письмовій формі так і, у разі природних мов, у формі мови).
  • Комп'ютерна програма - послідовність інструкцій, призначених для виконання пристроєм керування обчислювальної машини.
  • Лексика - сукупність слів тієї чи іншої мови, частини мови або слів, які знає та чи інша людина або група людей.
  • Синтаксис – сторона мови програмування, яка описує структуру програм як наборів символів (зазвичай кажуть – безвідносно до змісту). Синтаксису мови протиставляється його семантика. Синтаксис мови описує «чистий» мову, у той самий час семантика приписує значення (дії) різним синтаксичним конструкціям.
  • Семантика у програмуванні - дисципліна, що вивчає формалізації значень конструкцій мов програмування за допомогою побудови їх формальних математичних моделей. Як інструменти побудови таких моделей можуть використовуватися різні засобинаприклад, математична логіка, λ-числення, теорія множин, теорія категорій, теорія моделей, універсальна алгебра. Формалізація семантики мови програмування може використовуватися як опису мови, визначення властивостей мови, так цілей формальної верифікації програм цією мовою програмування.
  • Мова - знакова система, що відповідає понятійному змісту і типове звучання (написання).
Більше простою мовоюце може бути викладено так:

Мова програмування - безліч заздалегідь визначених, одноманітних і зрозумілих виконавцю (читай: інтерпретатору/компілятору/комп'ютеру/програмісту) інструкцій, призначених для запису послідовно з метою виконання певним пристроєм, що є частиною обчислювальної машини. Також мова програмування повинна мати ряд особливостей: інструкцій має бути обмежена кількість, і всі їх мають знати; інструкції повинні вибудовуватися певним чином для отримання певних результатіві всі повинні про це знати; повинні існувати правила написання інструкцій та всі повинні їх знати; кожна конструкція мови повинна однозначно співвідносити те, що написано з тим, що потрібно позначити.

Ось так громіздко і некрасиво вийшло, зате без складних слів. Ми повернемося до цього визначення трохи згодом.

Види мов програмування

Часто використовують також поділ на низькорівневі та високорівневі мови. Ці види відрізняються «товщиною прошарку» між процесором та програмістом. Говорячи простими словами- у низькорівневих мовахкожна інструкція є однією або невелика кількістьпроцесорних команд, а в високорівневою мовоюКожна інструкція – це великий набір процесорних команд.

Розглянемо ближче визначення різних типівза версією Вікіпедії:

  • Аспектно-орієнтоване програмування (АОП) - парадигма програмування, заснована на ідеї поділу функціональності для покращення розбиття програми на модулі.
  • Структурне програмування - методологія розробки програмного забезпечення, в основі якої лежить представлення програми у вигляді ієрархічної структуриблоків. Запропоновано у 70-х роках XX століття Е. Дейкбуд, розроблено та доповнено Н. Віртом.
  • Процедурне програмування - програмування імперативною мовою, при якому послідовно виконувані оператори можна зібрати в підпрограми, тобто більші цілісні одиницікоду, за допомогою механізмів самої мови.
  • Логічна програмування - парадигма програмування, заснована на автоматичному доказі теорем, а також розділ дискретної математики, що вивчає принципи логічного виведення інформації на основі заданих фактів та правил виведення. Логічне програмуваннязасноване на теорії та апараті математичної логіки з використанням математичних принципів резолюцій.
  • Об'єктно-орієнтоване програмування (ООП) - парадигма програмування, в якій основними концепціями є поняття об'єктів та класів. У разі мов із прототипуванням замість класів використовуються об'єкти-прототипи.
  • Функціональне програмування - розділ дискретної математики та парадигма програмування, в якій процес обчислення трактується як обчислення значень функцій у математичному розумінні останніх (на відміну від функцій як підпрограм у процедурному програмуванні).
  • Мультипарадигмальна мова програмування - як правило, мова програмування, яка була розроблена спеціально як інструмент мультипарадигмального програмування, тобто образотворчі можливості якого спочатку передбачалося успадкувати від декількох, найчастіше неспоріднених мов.
  • Езотерична мова програмування - мова програмування, розроблена для дослідження меж можливостей розробки мов програмування, для доказу потенційно можливої ​​реалізації певної ідеї (так зване «доказ концепції», англ. proof of concept), як добуток програмного мистецтва, або як жарти (комп'ютерного гумору).
Імперативний та декларативний підхід
Всі мови програмування поділяються на дві групи: декларативні та імперативні.

Програма імперативною мовою програмування з математичної точки зору є загальне рішенняпоставленого завдання, інакше кажучи, відповідь на питання «як робити?». Це послідовність команд, які має виконати виконавець.

Програма декларативною мовою програмування є поєднанням формалізованої у межах мови програмування завданням і всіх необхідних її вирішення теорем, простіше кажучи, у відповідь питання «що робити?». Конкретну послідовність виконуваних дій виконує компілятор, чи частіше інтерпретатор – програма, що у реальному часі виконує код програми без перетворення на машинний код.

Повнота по Тьюрингу Теоретично обчислюваності виконавець (багато обчислюючих елементів) називається тьюринг-полным , якщо у ньому можна реалізувати будь-яку обчислювану функцію. Іншими словами, для кожної обчислюваної функції існує елемент, що її обчислює (наприклад, машина Тьюринга) або програма для виконавця, а всі функції, що обчислюються безліччю обчислювачів, є обчислюваними функціями (можливо, при деякому кодуванні вхідних і вихідних даних).
Назва походить від Алана Тьюринга, який вигадав абстрактний обчислювач - машину Тьюринга і дав визначення безлічі функцій, що обчислюються за допомогою машин Тьюринга.
Іншими словами мова є повним за Тьюрингом, якщо будь-яка функція, яка Вам потрібна, може бути записана цією мовою і вирішена її виконавцем.

Не повні за Тьюрингоммови також існують, але оскільки їх створюють в основному в академічних цілях, то вони маловідомі та широко не застосовуються.

Вступ

Основні відомості про мову програмування

1 Про мову html

2 Створення Webсайту

3 Основні положення

4 Структура документа

5 Теги тіла документа

Опис створення сайту

2 Графіка всередині документа

3 Додавання стилів до документа

4 Оптимізація графіки для web

Алгоритм практичної роботи

1 Підготовка

2 Створення сайту «Майстер з обробки цифрової інформації»

Висновок

Список використаної літератури

додаток

Вступ

У вік цифрових технологійі масової комп'ютеризації, інтернет став невід'ємною частиною нашого життя, а web-програмування та дизайн престижною та затребуваною професією. Адже інтернет не може існувати сам по собі і хтось повинен створювати інтернет сторінки, щодня і навіть щогодини оновлювати web-сайти, щоб користувачеві завжди була доступна актуальна та перевірена інформація у зрозумілій для нього формі. Таким чином, питання web-програмування та дизайну є дуже актуальним. Тому тема моєї роботи пов'язана із створенням web-сайту мовою програмування HTMLта програмами, за допомогою яких можна написати веб-сторінки. До своєї роботи я прикріплюю веб-сайт як приклад, що можна створити, знаючи мову програмування HTML.

Об'єкт – веб-сайт. Предмет – програмування сайту на мові HTML.

Мета роботи – вивчення мови програмування HTML.

Розкрити основні відомості про мову;

Розглянути процес створення сайту;

Створити сайт на основі розробленого алгоритму.

Структура: робота складається з вступу, трьох розділів, висновків та списку використаної літератури.

1. Основні відомості про мову програмування .1 Про мову html

Text Markup Language (HTML) є стандартною мовою, призначеним для створення гіпертекстових документіву середовищі WEB. HTML-документи можуть переглядатися різними типами WEB-браузерів. Коли документ створено з використанням HTML, WEB-браузер може інтерпретувати HTML для виділення різних елементів документа та первинної їх обробки. Використання HTML дозволяє форматувати документи для їх подання з використанням шрифтів, ліній та інших графічних елементівна будь-якому ПЗ для перегляду WEB-сторінок.

Більшість документів мають стандартні елементи, такі як заголовок, параграфи або списки. Використовуючи HTML-теги, ви можете позначати дані елементи, забезпечуючи WEB-браузери мінімальною інформацієюдля відображення даних елементів, зберігаючи в цілому загальну структурута інформаційну повноту документів. Все що необхідно, щоб прочитати HTML-документ це WEB-браузер, який інтерпретує HTML-теги і відтворює на екрані документ у вигляді, який йому надає автор.

Найчастіше автор документа суворо визначає зовнішній вигляд документа. У випадку HTML читач, ґрунтуючись на можливостях WEB-браузера, може певною мірою керувати зовнішнім виглядом документа (але не його вмістом). HTML дозволяє зазначити, де в документі має бути заголовок або абзац за допомогою тега HTML, а потім надає WEB-браузеру інтерпретувати ці теги. Наприклад, один WEB-браузер може розпізнавати тег початку абзацу та представляти документ у потрібному виглядіа інший не має такої можливості і подає документ в один рядок. Користувачі деяких WEB-браузерів мають також можливість настроювати розмір і вид шрифту, колір та інші параметри, що впливають на відображення документа. Теги можуть бути умовно розділені на дві категорії:

Теги, що визначають, як відображатиметься WEB-браузером тіло документа в цілому.

Теги, що описують загальні властивостідокумента, наприклад заголовок або автор документа.

Основною перевагою HTML є те, що документ може бути переглянутий на WEB-браузерах різних типівта на різних платформах.

1.2 Створення Web сайту

документи можуть бути створені за допомогою будь-якого текстового редактораабо спеціалізованих HTML-редакторів та конвертерів. Вибір редактора, який використовуватиметься для створення HTML-документів, залежить виключно від поняття зручності та особистих уподобань кожного автора.

Наприклад, HTML редактори, Такі, як "Netscape Navigator Gold" компанії Netscape, дозволяють створювати документи графічно з використанням технології WYSIWYG (What You See Is What You Get). З іншого боку, більшість традиційних засобів створення документів мають конвертери, дозволяють перетворювати документи до формату HTML.

1.3 Основні положення

Усі теги HTML починаються з "" (правої кутової дужки). Як правило, існує стартовий та завершальний тег. Для прикладу наведемо теги заголовка, що визначають текст, що знаходиться всередині стартового та завершального тега та описує заголовок документа, регістр при введенні тексту не важливий:

Заголовок документа або Заголовок документа.

Завершальний тег виглядає також, як стартовий, і відрізняється від нього прямим слішем перед текстом усередині кутових дужок. У даному прикладітег говорить WEB-браузеру про використання формату заголовка, а тег - завершення тексту заголовка.

Деякі теги, такі як

(тег, що визначає абзац), не вимагають завершального тега, але його використання надає вихідному тексту документа покращену читаність та структурованість.

Увага! Додаткові пробіли, символи табуляції та повернення каретки, додані у вихідний текст HTML-документа для його найкращої читальності, будуть проігноровані WEB-браузером при інтерпретації документа. HTML-документ може включати вищеописані елементи, тільки якщо вони розміщені всередині тегів.

1.4 Структура документа

Коли WEB-браузер одержує документ, він визначає, як документ має бути інтерпретований. Найперший тег, який зустрічається в документі, має бути тегом . Цей тег повідомляє WEB-браузеру, що ваш документ написаний з використанням HTML. Мінімальний HTML-документ виглядатиме так:

Тіло документа...

Заголовна частина документа. Тег заголовної частини документа має бути використаний одразу після тега і більше ніде у тілі документа. Цей тег є Загальний описдокумента. Уникайте розміщувати будь-який текст усередині тега. Стартовий тег розміщується безпосередньо перед тегом та іншими тегами, що описують документ, а завершальний тег розміщується відразу після закінчення опису документа. Наприклад:

Список співробітників


Заголовок документа. Більшість WEB-браузерів відображають вміст тега у заголовку вікна, що містить документ та у файлі закладок, якщо він підтримується WEB-браузером. Заголовок, обмежений тегами і розміщується всередині -тегів, як показано вище на прикладі. Заголовок документа не з'являється при відображенні документа у вікні.

1.5 Теги тіла документа

Теги тіла документа ідентифікують компоненти HTML-документа, що відображаються у вікні. Тіло документа може містити посилання на інші документи, текст та іншу форматовану інформацію.

Тіло документа. Тіло документа має бути між тегами і . Це частина документа, яка відображається як текстова та графічна (смислова) інформація вашого документа.

Рівні заголовків. Коли пишеться HTML-документ, текст структурно ділиться просто текст, заголовки частин тексту, заголовки вищого рівня тощо. Перший рівень заголовків (найбільший) позначається цифрою 1, наступний - 2 і т.д. Більшість браузерів підтримує інтерпретацію шести рівнів заголовків, визначаючи кожному їх власний стиль. Заголовки вище шостого рівня є стандартом і можуть не підтримуватися браузером. Заголовок самого верхнього рівнямає ознаку "1". Синтаксис заголовка рівня 1 наступний:

Заголовок першого рівня

Заголовки іншого рівня можуть бути представлені в загальному випадку так:

Заголовок x-го рівня x - цифра від 1 до 6, що визначає рівень заголовка.

Тег абзацу

На відміну від більшості текстових процесорів, HTML-документі зазвичай ігноруються символи повернення каретки. Фізичний розрив абзацу може бути в будь-якому місці вихідного текстудокумента (для зручності читання). Проте браузер розділяє абзаци лише за наявності тега

Якщо ви не розділите абзаци тегом

Ваш документ буде виглядати як один великий абзац.

Додаткові параметри тега

Дозволяють вирівнювати абзац по лівому краю, центру та правому краю відповідно.

Центрування елементів документа. Ви можете центрувати всі елементи документа у вікні браузера. Для цього можна використовувати тег.

Всі елементи між тегами і будуть у центрі вікна. Тег переформатування Тег переформатування Дозволяє подавати текст зі специфічним форматуванням на екрані. Попередньо сформатований текст закінчується завершальним тегом. Усередині попередньо сформатованого тексту дозволяється використовувати:

а) переклад рядка

б) символи табуляції (зсув на 8 символів праворуч)

в) непропорційний шрифт, що встановлюється браузером.

Використання тегів, що визначають формат абзацу, таких як або , ігноруватиметься браузером при розміщенні їх між тегами

Список групи

Список групи 6-М-11

Цей списокмістить прізвища, імена та по батькові.

Список може бути використаний лише у службових цілях.


Ось що ви побачите на екрані браузера:

Увага! Заголовок "Список групи" не відображається браузером як частина документа. Він з'явиться у заголовку вікна браузера.

Розрив рядка
. Тег
сповіщає браузер про розрив рядка. Найкращий прикладвикористання даного тега - форматована адреса або будь-яка інша послідовність рядків, де браузер повинен відображати їх один під одним. Наприклад:

Олексій Ярцев
Дмитрівське шосе,
д.9Б, офіс 326

Додатковий параметр дозволяє розширити можливості тега
.



Даний параметр дозволяє не просто виконати переклад рядка, а розмістити наступний рядок, починаючи з чистої лівої (left), правої (right) або обох (all) меж вікна браузера. Наприклад, якщо поруч із текстом зліва зустрічається малюнок, можна використовувати тег
для зміщення тексту нижче за малюнок:

Як ви можете бачити, дана схемадемонструє зв'язок

Посилання на точки усередині документа. Ви можете робити посилання на різні ділянки або розділи одного і того ж документа, використовуючи спеціальні приховані маркер для цих розділів. Це дозволяє швидко переходити від розділу до розділу всередині документа, не використовуючи прокручування екрана. Як тільки ви клацнете на посиланні, браузер перемістить вас на вказаний розділ документа, а рядок, в якому стоїть маркер даного розділу (зазвичай, перший рядок розділу або заголовок розділу) буде розміщений на першому рядку вікна браузера (якщо цей рядок не є вже на екрані браузера).

Створіть маркер розділу. Синтаксис цього маркера наступний:

Текст-котрий-відобразиться-у-перше-рядку

Текст

Наприклад:

Список розділів

  • Розділ 1
  • Розділ 2

Розділ 1

    Текст розділу 1

Розділ 2

    Текст розділу 2


    Символи #ex1 повідомляє вашому браузеру, що необхідно знайти в даному HTML-документі маркер з ім'ям ex1.

    Коли клацне мишею на рядку "Розділ 1", браузер перейде відразу до розділу 1.

    2.2 Графіка усередині документа

    Одна з найбільш привабливих характеристик Web - можливість включення посилань на графічні та інші типи даних HTML-документ. Робиться це за допомогою тега . Використання даного тега дозволяє значно покращити зовнішній вигляд та функціональність документів.

    Існує два способи використання графіки у HTML-документах. Перший - це впровадження графічних образів у документ, що дозволяє користувачеві бачити зображення у контексті інших елементів документа. Це техніка, що найбільш використовується при проектуванні документів, звана іноді "inline image". Синтаксис тега:

    Опишемо елементи синтаксису тега:

    Обов'язковий параметр має такий же синтаксис, як і стандартний URL. Цей URL вказує браузеру де знаходиться малюнок. Малюнок повинен зберігатися у графічному форматі, що підтримується браузером. На сьогоднішній день формати GIF та JPG підтримуються більшістю браузерів.="text":

    Даний необов'язковий елементзадає текст, який буде відображено браузером, який не підтримує відображення графіки або з відключеним підкачуванням зображень. Зазвичай, це короткий описзображення, яке користувач міг чи зможе побачити на екрані. Якщо цей параметр відсутній, то на місці малюнка більшість браузерів виводить піктограму (іконку), активізувавши яку користувач може побачити зображення. Тег ALT рекомендується, якщо ваші користувачі використовують браузер, який не підтримує графічний режимнаприклад Lynx.=n1:

    Цей необов'язковий параметр використовується для вказівки висоти малюнка в пікселях. Якщо цей параметр не вказано, використовується оригінальна висота малюнка. Цей параметр дозволяє стискати або розтягувати зображення по вертикалі, що дозволяє чіткіше визначати зовнішній вигляд документа. Однак, деякі браузери не підтримують цей параметр. З іншого боку, екранна роздільна здатність у вашого клієнта може відрізнятися від вашого, тому будьте уважні при завданні абсолютної величиниграфічного об'єкта.

    Параметр також необов'язковий, як попередній. Дозволяє задати абсолютну ширину зображення в пікселях.: Цей параметр використовується, щоб повідомити браузеру, куди помістити наступний блок тексту. Це дозволяє більш строго встановити розташування елементів на екрані. Якщо цей параметр не використовується, то більшість браузерів розташовує зображення в лівій частині екрана, а текст праворуч від нього.

    Цей параметр повідомляє браузеру, що це зображення дозволяє користувачеві виконувати будь-які дії, клацаючи мишею на певному місці зображення. Ця можливістьє розширенням HTML.

    Наведемо приклад використання даного тегу:

    З версії HTML 2.0 у тега з'явилися додаткові параметри:

    Нові параметри:

    Дозволяє встановити розмір пікселів порожнього простору над і під малюнком, щоб текст не наїжджав на малюнок. Особливо це важливо для зображень, що динамічно формуються, коли не можна заздалегідь побачити документ.

    Те саме, що і VSPACE, але тільки по горизонталі.

    Фонові малюнки. Більшість браузерів дозволяє включати в документ фоновий малюнок, який матрицюватиметься і відображатиметься на тлі всього документа. Деякі користувачі люблять фонову графіку, дехто ні. Ненав'язливий напівпрозорий малюнок (шпалери) зазвичай добре виглядає як тло для більшості документів.

    Опис фонового малюнкавмикається в тег BODY і виглядає так:

    .

    кожен із параметрів визначає колір того чи іншого елемента. Опишемо ці параметри:

    Колір фону документа:

    Колір простого текстудокумента:

    Колір посилання. Колір задається шестизначним числом у шістнадцятковому форматі за схемою RGB (Red, Green, Blue). Колір #000000 відповідає чорному, а колір #FFFFFF – білому. Наприклад:

    Цей рядоквизначає білий колірфон документа, чорний текст і сріблясті посилання.

    Горизонтальні лінії. Використовуючи тег , можна розділити текст горизонтальною рисою.

    Формат тегу:

    Параметри тега:

    Товщина лінії в пікселях.

    Ширина лінії в пікселях або відсотках від ширини вікна броузера.: Розташування на екрані (ліворуч | по центру | праворуч).: За замовчуванням лінія представлена ​​в 3D вигляді з тінню. NOSHADE дозволяє уявити лінію просто однотонною темною смужкою.

    2.3 Додавання стилів до документа

    дозволяє використовувати різні стилі шрифтів для виділення текстової інформації у документах. Ось короткий список стилів, що підтримуються більшістю браузерів: (жирний) (похилий) spaced (type writer - з використанням фіксованих шрифтів)

    Ви можете комбінувати різні видистилів, наприклад жирний та похилий.

    Таблиця №1: Основні стилі тексту


    Комбінування стилів дозволяє відображати в одному рядку кілька елементів різними стилями, наприклад:

    Життя - Ця пісня!

    Життя – це пісня!

    Увага!Додавання великої кількостістилів та їх комбінацій призводить до утруднення читання тексту!

    Додаткові стилі:

    · big (великий)

    · Small (маленький)

    · Sub (підрядковий рядок)

    · sup (надстрочник)

    Таблиця №2: Додаткові стилі тексту


    Розмір шрифту . Ви можете змінювати розмір шрифту за допомогою тега:

    Шрифт може мати розмір від 1 до 7. Ви можете прямо вказати розмір шрифту цифрою, або вказати зміщення щодо базового значення (за замовчуванням - 3) у позитивну або негативний бік. Базове значення можна змінити за допомогою тега:

    Наприклад:

    і змін ен ие

    Зміна кольору шрифту. Ви можете змінити колір шрифту за допомогою тега: