Основы Web-конструирования

Август 20, 2022

Главная
Информатика
Основы Web-конструирования

Содержание

2. ИСТОРИЯ ИНТЕРНЕТА Для начала мы хотим немного рассказать про интернет. Это поможет вам увидеть общую картину
3. URL Первая важная технология, которая позволила появиться интернету - URL. Она применяется для обозначения адресов почти
4. HTTP HyperText Transfer Protocol (гипертекст трансфер протокол) - протокол передачи гипертекста. Ох уж эти учёные, любят
5. А теперь про запросы. Что значит "послать запрос"? Если не углубляться в сложные научные определения, это
6. HTML HyperText Markup Language (гипертекст маркап лэнгуидж) - язык разметки гипертекста. Опять разбираемся в сложных терминах.
7. Теперь мы знаем, что такое разметка, давайте узнаем, что такое HTML. Есть вещи, которые проще показать,
8. ТЕГИ Что такое тег Тег — это синтаксическая единица языка HTML, которая выделяет или создаёт элемент.
9. Одинарные теги Одинарные теги просто не имеют пары. Примеры: тег переноса строки или горизонтальной линии .
10. Вложенность тегов Теги можно вкладывать друг в друга. Пример: Курсив внутри абзаца Но при вложении тега
11. АТРИБУТЫ Атрибуты — это свойства тега. С помощью них мы задаём параметры тега. Сразу возьмём пример:
12. Атрибут указывается внутри тега, значение атрибута указывается внутри кавычек. Атрибуты отделяются друг от друга пробелами. Пример
13. ОСОБЕННОСТИ ИНТЕРПРЕТАЦИИ HTML Перенос строки только через тег Возможно, у вас возник вопрос, зачем нужен тег
15. Произвольный регистр даст такой же результат, что и , и , и . Несмотря на это,
16. СТРУКТУРА HTML-ДОКУМЕНТА Структура HTML документа - скелет, на основе которого строится вся страница: Страница ... ...
17. Первым тегом в любом HTML документе должен идти тег . Он говорит браузеру, по какому стандарту
18. Вторым тегом идет - контейнер, который содержит два тега - и . HTML-страница должна заканчиваться закрытым
19. В теге хранится информация о странице. Здесь указывают кодировку , имя страницы ... , специальную информацию
20. В теге размещается весь контент страницы, который пользователь увидит в браузере.
21. ПРАКТИКА: СОЗДАНИЕ ВЕБ-СТРАНИЦЫ Сохраните файл. При сохранении, укажите кодировку UTF-8. Откройте файл в браузере. вы увидите
23. Скачать презентацию

Слайд 2

ИСТОРИЯ ИНТЕРНЕТА
Для начала мы хотим немного рассказать про интернет. Это поможет

вам увидеть общую картину и понять, что и почему вы сейчас будете изучать.
История интернета начинается в 60-годы XX века. Впервые концепцию описал один американский учёный и назвал её «Галактическая сеть».
В 1969 американское агентство DARPA начало создавать экспериментальную сеть «с коммутацией пакетов». Её назвали ARPANET.
Коммутация пакетов - способ передачи данных по сети. Принцип работы очень простой: делим информацию на маленькие пакеты и отправляем их независимо друг от друга. Это нужно для надёжности, скорости и эффективности.
В декабре 1970 года Network Working Group придумала протокол управления сетью, а в 1971 - 1972 его реализовали в ARPANET. Благодаря этому, появилась возможность создавать сетевые приложения. Первым приложением стала электронная почта, её сделали в 1972-м.
Но это всё научные исследования. Интернет, каким мы его знаем, придумал Тим Бернерс-Ли. Он изобрёл технологии URI/URL, HTTP, и HTML.

Слайд 3

URL
Первая важная технология, которая позволила появиться интернету - URL. Она применяется

для обозначения адресов почти всех ресурсов Интернета: сайты и сервера приложений вроде электронной почты. URL сочетает в себе две технологии:
URI - стандарт записи уникального адреса. Например, адрес сайта это URI: http://google.com
DNS - система доменных имён. У любого устройства в сети есть свой числовой адрес, он называется IP-адрес. Но людям удобнее запоминать буквы - доменные имена. DNS просто помогает найти IP-адрес по доменному имени. Пример: 173.194.44.40 это IP-адрес, а google.com - доменное имя, которое ему соответствует.

Слайд 4

HTTP
HyperText Transfer Protocol (гипертекст трансфер протокол) - протокол передачи гипертекста. Ох уж

эти учёные, любят называть простые вещи сложными именами. Давайте разбираться.
HTTP - протокол (то есть регламент, набор условных обозначений), который устанавливает определённый формат общения между клиентом и сервером. Суть его заключается в том, что клиент посылает запросы на URL, а сервер ему отвечает.
Клиент - тот, кто посылает запросы. Когда ыы открываете сайт, вы - клиент.
Сервер - тот, кто принимает запросы и отвечает на них. Когда вы открываете сайт того же гугла, сервер гугла посылает вам веб-страничку - отвечает на ваш запрос.

Слайд 5

А теперь про запросы. Что значит "послать запрос"? Если не углубляться в

сложные научные определения, это означает отправить по сети сообщение с каким-нибудь требованием. Это работает так:
вы посылаете запрос
между вами и сервером устанавливается соединение
сервер формирует ответ, посылает его вам
соединение закрывается
Вот и всё.
Так вот, протокол передачи гипертекста. "Текста", потому что сервер отвечает на запрос текстом определённого формата. А так как любые данные можно представить в виде текста, то получается, что через HTTP можно пересылать всё: картинки с котиками, гифки с котиками, и даже видео с котиками.

Слайд 6

HTML
HyperText Markup Language (гипертекст маркап лэнгуидж) - язык разметки гипертекста. Опять разбираемся

в сложных терминах. В этой аббревиатуре нам интересно слово "разметка".
Разметка - что это вообще такое? Представьте, что вы передаёте текст по сети. Как сделать в тексте заголовок? Выделить абзац? Подчеркнуть слово? Самый простой вариант - пометить начало и конец выделяемого фрагмента условными метками. Например:
<заголовок>HTML<полужирный>HyperText Markup Language <курсив>(гипертекст маркап лэнгуидж) - язык разметки гипертекста.
HTML позволил создавать документы, в которых были заголовки, абзацы, ссылки, таблицы, картинки и куча всего прочего.

Слайд 7

Теперь мы знаем, что такое разметка, давайте узнаем, что такое HTML. Есть

вещи, которые проще показать, чем объяснить. HTML - одна из них.
Всё гениальное просто. Вот как бы выглядел текст этого слайда на HTML:

HTML

Теперь мы знаем, что такое разметка, давай узнаем, что такое HTML. Есть вещи, которые проще показать, чем объяснять. HTML - одна из них.

Всё гениальное просто. Вот как бы выглядел текст этого слайда на HTML:

h1 - заголовок первого уровня (header 1)
p - абзац (paragraph)

Слайд 8

ТЕГИ
Что такое тег
Тег — это синтаксическая единица языка HTML, которая выделяет

или создаёт элемент. Это набор символов, с помощью которого браузер понимает, где элемент создается, начинается и заканчивается. Есть 2 вида тегов: двойные и одинарные.
Двойные теги
Двойные теги показывают начало и конец элемента. Начало элемента обозначается открывающим тегом <…> , а конец - закрывающим .
Двойной тег обязательно должен быть закрыт. Даже несмотря на то, что современные браузеры умеют в некоторых случаях понимать разметку без закрытых тегов, лучше всегда закрывать их.

Слайд 9

Одинарные теги
Одинарные теги просто не имеют пары. Примеры: тег переноса строки
или

горизонтальной линии

.
Старые браузеры требовали закрывать одинарные теги:
, сейчас таких браузеров практически не осталось и допустимо использовать оба варианта синтаксиса.

Слайд 10

Вложенность тегов
Теги можно вкладывать друг в друга.
Пример:
Курсив внутри абзаца

Но

при вложении тега нужно всегда помнить о том, что внутренний тег нужно закрывать раньше внешнего. То есть вот такой код недопустим:

Я уже говорил тебе, что такое безумие?

Слайд 11

АТРИБУТЫ
Атрибуты — это свойства тега. С помощью них мы задаём параметры

тега. Сразу возьмём пример: тег — ссылка. Для задания адреса, куда будет вести эта ссылка, нам понадобится атрибут href. Вот так будет выглядеть ссылка на страницу ITC Вконтакте:
ITC Вконтакте

Слайд 12

Атрибут указывается внутри тега, значение атрибута указывается внутри кавычек. Атрибуты отделяются

друг от друга пробелами. Пример ссылки на страницу ITC, которая откроется в новой вкладке:
ITC Вконтакте У атрибута может не быть значения, тогда наличие атрибута включает какой-то параметр, а отсутствие - отключает. Например, атрибут disabled. Если кнопке Результат:

Слайд 13

ОСОБЕННОСТИ ИНТЕРПРЕТАЦИИ HTML
Перенос строки только через тег
Возможно, у вас возник вопрос,

зачем нужен тег переноса строки, если можно просто нажать Enter. Дело в том, что HTML воспринимает перенос строки как пробел. Это нужно потому, что редакторы кода не переносят строки, которые не помещаются в экран - так удобнее писать код. Поэтому чтобы длинный текст влезал в экран, в коде ставятся переносы строки, которые не нужны, когда страница показывается в браузере.
Несколько пробелов, идущих подряд, считаются за один
Так просто удобнее форматировать код в редакторе. Из-за того, что теги вкладываются друг в друга, для удобного восприятия кода вложенность показывают отступами - пробелами. Пример:

Слайд 14

Слайд 15

Произвольный регистр
даст такой же результат, что и
, и
, и
. Несмотря на

это, писать разметку лучше в нижнем регистре - это негласное правило.
Перенос строки в теге
При определении тега и его атрибутов можно переносить строку. Это полезно для длинных определений.
Например, для этого изображения:
src="http://example.com/cat.jpg"
title="Мурка"
alt="Рыжая кошка валяется в снегу"
width="640"
height="480">

Слайд 16

СТРУКТУРА HTML-ДОКУМЕНТА
Структура HTML документа - скелет, на основе которого строится вся

страница:

Страница

...

Слайд 17

Первым тегом в любом HTML документе должен идти тег . Он говорит

браузеру, по какому стандарту написана страница. На рассвете веба HTML существовал в разных несовместимых версиях, поэтому для их одновременной поддержки нужно было указывать версию. Сейчас все пришли к одному стандарту - HTML5. Поэтому для всех сайтов, которые создаются сегодня, нужно указывать - так обозначается HTML5.

Слайд 18

Вторым тегом идет - контейнер, который содержит два тега - и . HTML-страница должна

заканчиваться закрытым тегом .

Слайд 19

В теге хранится информация о странице. Здесь указывают кодировку , имя страницы ..., специальную

информацию для поисковиков, а ещё тут подключаются стилевые файлы и скрипты.
Тег не отображается. Его цель — сказать браузеру информацию о странице.

Слайд 20

В теге размещается весь контент страницы, который пользователь увидит в браузере.

Слайд 21

ПРАКТИКА: СОЗДАНИЕ ВЕБ-СТРАНИЦЫ
Сохраните файл. При сохранении, укажите кодировку UTF-8. Откройте файл

в браузере. вы увидите вот это:

Основы Web-конструирования

Содержание

ИСТОРИЯ ИНТЕРНЕТАДля начала мы хотим немного рассказать про интернет. Это поможет

URLПервая важная технология, которая позволила появиться интернету - URL. Она ﻿применяется

HTTPHyperText Transfer Protocol (гипертекст трансфер протокол) - протокол передачи гипертекста. Ох уж

А теперь про запросы. Что значит "послать запрос"? Если не углубляться в

HTMLHyperText Markup Language (гипертекст маркап лэнгуидж) - язык разметки гипертекста. Опять разбираемся

Теперь мы знаем, что такое разметка, давайте узнаем, что такое HTML. Есть

HTML

ТЕГИЧто такое тегТег — это синтаксическая единица языка HTML, которая выделяет

Одинарные тегиОдинарные теги просто не имеют пары. Примеры: тег переноса строки или

Вложенность теговТеги можно вкладывать друг в друга. Пример:Курсив внутри абзаца Но

АТРИБУТЫАтрибуты — это свойства тега. С помощью них мы задаём параметры