В настоящее время без сети не может обойтись ни кондитер, ни водитель. И даже дети, которые еще не ходят в школу, а то и в детский сад, уже пользуются сетями. Поэтому сейчас специалистов в этой области требуется всё больше. Наш курс поможет желающим разобраться во всех премудростях этого интереснейшей области. В этом курсе слушатели: - составят целостную картину о работе локальных и глобальных компьютерных сетей; - увидят, как передаётся информация, - поймут логику и принципы работы сетевых протоколов и базовых служб, - научатся диагностировать работоспособность сетевых соединений, выявлять и устранять неполадки, работать с сетевым анализатором, - освоят технологию виртуализации аппаратного обеспечения - и смогут создавать и размещать собственные сетевые серверы и веб-ресурсы на них. Слушатель получит представление и о самых низкоуровневых процессах в сети, и о высокоуровневых. После освоения курса слушатель сможет: - проектировать и разворачивать сети самостоятельно, - настраивать сетевое оборудование, - настраивать серверы и создавать веб-ресурсы, размещая их как удалённо на стороннем, так и локально на своём оборудовании. Курс включает в себя практическую часть, выполняемую при помощи средств виртуализации аппаратного обеспечения непосредственно на компьютере слушателя.
6.2. Язык HTML
Loading...
Do curso por National Research Tomsk State University
Сетевое администрирование: от теории к практике
16 ratings
Conheça os instrutores
Николай Георгиевич Булахов (Nikolay G. Bulakhov)Старший преподаватель (Senior Lecturer)
Кафедра квантовой электроники и фотоники радиофизического факультета (Department of Quantum Electronics and Photonics, Faculty of Radiophysics)
[МУЗЫКА]
[МУЗЫКА] Здравствуйте!
С вами снова я, Николай Булахов, и мы продолжаем изучать веб-технологии.
Сегодня я расскажу вам как создаются веб-страницы,
с которыми вы сталкиваетесь ежедневно, посещая различного рода веб-сайты.
Страница, которую вы видите в браузере, скомпонована для вас из множества
отдельных элементов: текста, картинок, кнопок, ссылок, лиц и тому подобного.
Но в виде чего она хранится на сервере?
Она хранится в виде текстового файла,
в котором записаны указания браузера в формате HTML.
Давайте посмотрим как выглядит исходный код заглавной страницы первого в
мире сайта.
Открываем в Firefox страничку, которую мы посещали прошлый раз на сайте info.cern.ch
Жмем правую кнопку мыши, выбираем пункт «Просмотреть исходный код».
Мы видим некоторую структуру, представленную на экране.
Что же все это значит?
Страница состоит из служебных конструкций, так называемых тегов.
Они бывают парные и непарные.
Непарные имеют вид: в угловых скобках помещается название тега,
далее через пробел параметры,
которым присвоено некоторое значение через символ «=».
Парные имеют открывающий тег вида, который только что был описан,
и закрывающий, отличающийся от него наличием слэша сразу после
открывающей угловой скобки, и действует на все содержимое между ними.
Современные документы имеют структуру, которую вы видите на экране.
Doctype указывает стандарт, по которому сделан документ.
Все остальное заключается внутрь тега HTML.
Заголовок внутри тега <HEADER> содержит техническую информацию о документе,
такую как его название или кодировку.
А сама отображаемая часть документа содержится внутри тега <BODY>.
Вот, например, самые основные, на мой взгляд, теги: <title> – помещает
название документа в оглавление программы просмотра страниц.
<h1> – создает самый большой заголовок (как отдельный абзац).
<h6> – создает самый маленький заголовок.
<b> – создает жирный текст.
<i> – наклонный.
Тег <a> создает гиперссылку на другие документы или часть текущего документа.
Здесь <URL> – адрес ссылки, а ТЕКСТ – текст ссылки.
<p> – создает новый параграф; <br> – вставляет перевод строки.
<ol> – создает нумерованный список.
<li> – определяет каждый элемент списка и присваивает номер.
<ul> – создает ненумерованный список.
<img> – добавляет изображение в HTML документ.
<table> – создает таблицу.
<tr> – определяет строку в таблице.
<td> – определяет отдельную ячейку.
Простейшую HTML страницу можно сделать в любом текстовом редакторе.
Я воспользуюсь для этого NetCommander.
Если нам понадобятся картинки в нашем HTML документе,
можно скачать их заранее с помощью команды fetch или merge.
[БЕЗ СЛОВ]
[БЕЗ СЛОВ] Новый файл
можно создать либо нажав сочетание клавиш Shift + F4,
либо выполнив команду «touch, пробел, имя создаваемого файла».
Самый простой документ должен включать в себя тег <html>,
внутри которого будет располагаться непосредственно тело документа.
Внутри тега <head> поместим тег <title>, в котором укажем заголовок документа.
После тега <head> поместим тег <body>.
Внутри него, собственно, и содержится отображаемая часть документа.
Для начала я помещу сюда заголовок первого уровня при помощи тега <h1>.
Сохраню этот документ и открою получившийся файл в браузере.
[БЕЗ СЛОВ]
[БЕЗ СЛОВ] Как видите,
получилась самая простая HTML страничка.
Давайте дополним наш HTML документ дополнительными тегами.
Поместим новый абзац при помощи тега <p> и наполним его произвольным текстом.
[БЕЗ СЛОВ]
[БЕЗ СЛОВ]
[БЕЗ СЛОВ]
[БЕЗ СЛОВ] Теперь обновим страничку.
Как видите, вместо русских символов, на экране отобразились непонятные знаки.
Это произошло из-за того, что мы не указали явным образом кодировку страницы.
И браузер подобрал ее неправильно.
Чтобы исправить положение, зайдите в меню View,
выберите пункт Text Encoding» и выберите подпункт Unicode.
Вуаля!
Теперь текст отображается по-русски.
Вы могли обратить внимание на тот факт, что браузер проигнорировал то,
что текст у нас в исходном коде располагался в одну строчку.
Он подогнал под размер окна, сделав переносы в соответствующих местах.
Более того, даже если в исходном коде мы явным образом проставим
переводы строки на новую, они будут проигнорированы.
Что же сделать, чтобы прервать строку в нужном месте?
Для этого нужно воспользоваться тегом <br>.
Тег <b> сделает часть текста жирной.
Тег <ol> добавит список.
Каждый элемент в этом списке должен быть выделен тегом <li>.
Добавим еще один тег – <ul>.
Он создаст еще один список, но в отличие от предыдущего случая, ненумерованный.
Наконец, мы можем создать таблицу при помощи тега <table>.
Внутри мы должны разметить ее на столбцы и строки.
Новая строчка начинается с тега <tr>.
[БЕЗ СЛОВ]
[БЕЗ СЛОВ]
[БЕЗ СЛОВ]
[БЕЗ СЛОВ]
[БЕЗ СЛОВ] А
столбец должен заключаться внутрь тега <td>.
[БЕЗ СЛОВ]
[БЕЗ СЛОВ]
[БЕЗ СЛОВ] Я
сделаю пару
строчек и пару
столбцов.
[БЕЗ СЛОВ]
[БЕЗ СЛОВ]
[БЕЗ СЛОВ]
[БЕЗ СЛОВ]
[БЕЗ СЛОВ]
[БЕЗ СЛОВ]
Обновите страницу.
Опять придется поменять кодировку на правильную, Unicode, и вуаля...
Вы видите результат на экране.
У таблицы нет рамочек, но тем не менее,
нужный текст располагается в соответствующей ему ячейке.
Если вы посмотрите на исходный код,
то увидите все то же самое, что вы делали в NetCommander.
Не забудьте при этом тоже поправить кодировку.
Ну и в качестве последнего штриха – добавим на нашу страничку картинку.
Для начала ее надо скачать.
Пишем: wget, пробел и адрес картинки.
Любую...
я возьму логотип Томского государственного университета.
Далее...
переверну его таким образом, чтобы мне удобно было
использовать это имя файла в моем HTML документе.
Пусть это будет a.png, команда nw.
Вставляю в тело документа тег <img>.
В качестве url-источника указываю
наш свежескаченый файл: a.png.
Обновляем страницу, результат уже виден.
Выбираем правильную кодировку.
Ура! У нас есть страница,
в которой не только текст, но и картинка.
Если сделать несколько таких страничек, то это уже ваш персональный веб-ресурс.
На этом пока остановимся.
Теперь вы знаете, как веб-страницы устроены изнутри.
И даже можете создать одну или несколько для себя.
Далее я расскажу вам как и где их можно разместить для всеобщего обозрения.
[МУЗЫКА]
[МУЗЫКА]
Explore nosso catálogo
Registre-se gratuitamente e obtenha recomendações, atualizações e ofertas personalizadas.
O Coursera proporciona acesso universal à melhor educação do mundo fazendo parcerias com as melhores universidades e organizações para oferecer cursos on-line.
© 2018 Coursera Inc. Todos os direitos reservados.
