Компьютерный ликбез. Часть3. Страницы. Таблицы

   Ликбез — эта аббревиатура популярная в двадцатых годах прошлого века, означала ликвидацию безграмотности населения нашей страны. Я же хочу обратить Ваше внимание уважаемые авторы, жители ПРОЗЫ на компьютерную безграмотность! Ведь даже относительно продвинутые авторы не совсем понимают того, что они делают!?

   HTML — ДОКУМЕНТЫ
   Никогда не поверю, что Вы ни разу не смотрели странички в интернете, не гуляли по всяким там сайтам!? А что такое интернетовская страничка или как её по науке называют, WEB-страница. То что вы видите на мониторе это лишь лицевая сторона «медали». А что там на другой стороне «листа»? Откройте текстовый редактор, тот же БЛОКНОТ и напишите что-нибудь? Затем опция — ФАЙЛ и следующее — СОХРАНИТЬ КАК... Откроется стандартное диалоговое окно. Впишите в верхнюю рамочку какое-нибудь слово-имя скажем site поставьте точку и три буквы htm, это расширение обозначающее, что документ есть хоть и текстовый, но он теперь HTML-документ! Сохраните скажем на рабочем столе... А теперь посмотрите на стол и Вы увидите значок вашего браузера, того который у Вас основной. Если Internet Explorer, то будет голубой прямоугольник с буквой «E». Если Firefoks, — рыжая лиса, Opera — буква «О»! Щёлкните по значку, — откроется окно браузера и Вы увидите свою WEB-страничку надеюсь, что Вашу первую, единственную и неповторимую!?

   Аббревиатура HTML происходит от HyperText Markup Language — язык разметки гипертекста. Конечно Вы сейчас же припрёте меня к стенке и спросите: «Что это за гипер такой текст? А? Говори подлый трус!» Понятие, что такое гипертекст взято мною вот отсюда: http://dic.academic.ru/ Я взял лишь часть информации, объясняющей более обширное понятие гипертекста. Вот она: «ГИПЕРТЕКСТ (англ. hypertext) — способ представления информации, совокупность блоков информации между которыми установлена система связей. ГИПЕРТЕКСТ позволяет переходить от одного блока информации к другому, варьируя последовательность ее обработки. Этим ГИПЕРТЕКСТ отличается от линейного текста, который позволяет обрабатывать информацию только единственным способом последовательно, один блок за другим.» (Линейный — это как книга.) Вы чего-нибудь поняли? Я тоже нет!


   Естественно документ выполненный на языке HTML будет называться HTML-документ. Или WEB-документ или WEB-страницей! Основой HTML являются элементы (контейнеры содержащие некие данные), теги. Начало и конец элемента определяются начальным и конечным ТЕГОМ. Тег заключается в угловые скобочки. Перед конечным тегом стоит косая черта. Пример: <P> Этот текст находится между начальным и конечным тегом P, который являются тегом абзаца.</P> У каждого тега есть атрибуты (свойства) которые могут принимать некие значения. И всё это находится только в начальном теге! На примере простенькой WEB-странички рис1. мы проследим как на отображение содержания влияют эти самые атрибуты и их значения? Содержимым является два слова, — НОВАЯ СТРАНИЦА. На рис1, ниже до черты. — оборотная сторона «медали» сам HTML-документ! Заключено выражение в тег-контейнер Р. По умолчанию выражение отображается в браузере в левом верхнем углу монитора и отображено в чёрном цвете. На второй строке мы видим, что в теге Р появился атрибут align определяющий выравнивание содержимого контейнера. Я выбрал значение CENTER. Это значит, что выражение на второй строке будет расположено по центру строки страницы. На третьей и четвёртой строке в тег font добавлен атрибуты сolor и size. Color — соответственно цвет (в нашем случае blue — голубой). Size — размер, для второй и третьей строки 2, для четвёртой 4. В четвёртую строку добавлен кроме того, тег i благодаря которому содержимое будет отображено курсивом! Во все строки добавлен тег b отчего шрифт становится жирным! Стрелочки показывают какой строке HTM-документа (оборотная сторона медали) соответствует строка на лицевой строне HTML-документа.

   САЙТЫ
   Что такое сайт? Две и более страниц связанные гиперссылками и есть сайт или WEB-проект, или WEB-узел. С помощью гиперссылок можно переходить со страницы на страницу и не только логически следующую, но и на любую! Кроме того можно переходить на какую-то часть страницы и не только той на которой Вы находитесь, но и на другой странице. Кроме этого можно переходить на страницы другого сайта, находящегося чёрт знает где и у кого? Сами ссылки имеют определённый вид в самом HTML-документе, а визуально могут прятаться под любым текстовым выражением или под картинкой. Я думаю, что Вы сталкивались с этим и не раз! А вот задумывались ли, что и как, — вряд ли!?

   ТАБЛИЦЫ
   В давние времена, когда основная часть человечества по ночам крепко спала, а не таращилась в монитор, в HTML появились таблицы, но в качестве электронного варианта обычных таблиц. И вот появился интернет, а с ним и проблемы... Толпы фанатов просили: «Сделайте нам красиво!» Все хотели, чтобы в интернете аналоги книг и газет выглядели как и настоящие, бумажные. И пришлось WEB-дизайнерам искать выход из положения. Для таких целей как оказалось очень подошли таблицы. Да так удачно, что их применяют до сих пор! Принято считать, что таблицы состоят из строк и столбцов. При пересечении образуются ячейки. На рис2. показана таблица состоящая из одной строки и двух столбцов и соответственно таблица содержит две ячейки. В правом нижнем углу Вы видите таблицу состоящую из трёх строк и трёх столбцов. Итого в таблице девять ячеек. На рис2, показан код страницы с нашей таблицей. Таблица вообще и её составляющие определяются тегами: table — таблица, tr — строка, td — ячейка. Я не думаю, что Вы сразу же кинетесь писать код таблицы и пр. Для Вас главное понять чего я от Вас хочу? Посмотрите на код, в теге table присутствуют атрибуты Width, определяющий ширину таблицы и Height, высоту. Нас же в основном будет интересовать ширина! Атрибут Width и Height, в нашем случае имеет значение 180 (пиксел-точек). Это означает, что ширина таблицы и высота зафиксированы. Такой вариант называется фиксированной ширины. Она, таблица будет выглядеть в масштабе соответствующем разрешению монитора (разрешение можно менять самостоятельно, если Вы не в курсе?). Если же значение будет выражено в процентах, то и соответственно ширина таблицы будет составлять тот процент от ширины окна монитора и не зависеть от разрешения! При значении равном 100% ширина таблицы будет занимать всё окно монитора, при любом разрешении! Если же значению атрибута Width присвоить какую-нибудь величину в точках, то на экране монитора ширина таблицы и будет равна той величине. Если разрешение монитора будет больше значения атрибута Width, то таблицу мы увидим полностью. Если меньше, то таблица не будет вмещаться и как бы часть её зайдёт за край экрана! Внизу естественно появится горизонтальная прокрутка. Теперь просматривая страницы и увидев внизу прокрутку можете смело сказать, что страница фиксированной ширины и больше чем горизонтальное разрешение Вашего монитора! Все эти разглогольствования имеет значение при применении таблиц в формировании страницы. У нас лишь как пример...

В рамках таблицы находится содержимое и в частности текст наших с Вами произведений. И от того как будет вести себя таблица при изменении разрешения монитора, так поведёт себя и текст!

Продолжение здесь:

Ликбез. Часть4. http://www.proza.ru/2017/11/25/574

Ликбез. Часть5. http://www.proza.ru/2017/11/26/799

Ликбез. Часть6. http://www.proza.ru/2017/11/27/388

Ликбез. Часть7. http://www.proza.ru/2017/11/27/554

Ликбез. Часть8. http://www.proza.ru/2017/11/27/585

Ликбез. Часть9. http://www.proza.ru/2017/11/27/1072

Ликбез. Часть10. http://www.proza.ru/2017/11/27/1525

Ликбез. Часть11. http://www.proza.ru/2017/11/27/1574