Файл: Создание сайта по просмотру Аниме.docx

ВУЗ: Не указан

Категория: Не указан

Дисциплина: Не указана

Добавлен: 04.02.2024

Просмотров: 31

Скачиваний: 0

ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.


Теперь поговорим о главных серверных средствах и языках веб-программирования:

SSI — Server Side Include – это набор директив, наиболее полезной из которых является директива include. Она позволяет включить в html-код страницы содержимое любого файла перед ее отправкой в браузер.

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

PHP – один из самых молодых языков, появившийся в середине 90х. Он очень несложный в изучении и гибкий в применении. Именно поэтому язык программирования php очень быстро собрал огромное количество поклонников по всему миру. На сегодняшний день это самый популярный язык серверного программирования. Как и javascript, код php можно использовать совместно с html-кодом. Но в данном случае скрипт будет выполнен сервером до того, как страница будет отправлена клиенту. В браузер попадет только результат работы скрипта. PHP очень прост и удобен в использовании, что делает его идеальным для начинающих программистов, он позволяет писать программы, которые работают с различными базами данных и графикой.

MySQL – название базы данных, а не языка программирования. Эта база данных наиболее часто используется при разработке сайтов. Небольшое количество информации может храниться . Но Java уже не позволяет просто вставить html-код на страницу, как в случае с javascript. Для использования и управления такими приложениями используется специальная виртуальная машина Java. Кроме этого, язык java позволяет создавать java-апплеты – небольшие самостоятельные приложения, которые могут быть вызваны в html-коде. Их выполнение также будет обеспечено браузером. в отдельных файлах, но когда ее объемы увеличиваются, намного удобнее иметь структурированные данные. Именно поэтому каждый, даже начинающий веб-программист должен иметь базовые знания о MySQL и синтаксисе запросов, которые применяются для поиска информации.

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

CMS — Content Management System – система управление контентом, одно из проявлений такой тенденции развития. Популярность стандартных движков построения сайтов и систем управления их содержанием постоянно растет.


CMS является оболочкой, которую веб-разработчик может наполнить собственным контентом, использовать свой стиль, оформление, струкруту, добавить нужные функции, например, голосование, форум, блог, форму обратной связи и многое другое. клиентской стороне, дают возможность реагировать на действия пользователя и изменять вид и содержание страницы, которая уже была загружена в память компьютера без ее Эта система позволяет создать полноценный сайт, содержащий работающие скрипты, который будет реагировать на действия пользователей. При этом нет необходимости владеть навыками веб-программирования и основами html и веб-дизайна.

Что выбрать? Изучение веб-программирования трудно представить работу, например, форума, без скриптов. В данном случае они помогают в сборе и хранении информации – приеме и сохранении отправленных сообщений. Скрипты, работающие на клиентской стороне, дают возможность реагировать на действия пользователя и изменять вид и содержание страницы, которая уже была загружена в память компьютера без ее повторного сохранения. Чаще всего для реализации определенной задачи используются оба типа скриптов языки Си и Паскаль были уже достаточно популярными и развитыми языками программирования на момент появления интернета. php для проверки его работоспособности на удаленный сервер.

Вы можете использовать один и тот же компьютер в качестве клиента и сервера, установив на него программу-сервер, Но нужны были все новые функции, потому что программирование в интернете имело сайтов. Несмотря на то что существуют десятки языков программирования, которые могут быть использованы для написания скриптов, все они делятся на 2 типа. пользовательский ввод и взаимодействовать с базами данных для хранения и получения данных. Эти веб-приложения могут быть развернуты на сервере и доступны через интернет, что делает их доступными для множества пользователей. Одни из них работают на стороне сервера, т.е. непосредственно на самом сайте Основная цель веб-программирования - создание веб-приложений, Основная цель веб-программирования - создание веб-приложений, которые могут обрабатывать пользовательский ввод и взаимодействовать с базами данных для хранения и получения данных. Эти веб-приложения могут быть развернуты на сервере и доступны через интернет, что делает их доступными для множества пользователей. которые могут обрабатывать пользовательский ввод и взаимодействовать с базами данных для хранения и получения данных. Эти веб-приложения могут быть развернуты на сервере и доступны через интернет, что делает их доступными для множества пользователей.. Другие же находятся на стороне клиента, на компьютере самого пользователя, который просматривает сайт. свою специфику. Было необходимо упростить работу с типичными данными и элементами веб-страниц, а так же ограничить функциональность средств программирования для злоумышленников. Они не должны были иметь возможность нанести какой-либо вред серверам или пользовательским компьютерам с помощью написания или изменения скриптов. и создание сайта по своим представлениям или использование конструктора?



В случае, если у вас недостаточно времени для изучения языков программирования, или все функции, которые вы бы хотели видеть на своем сайте, присутствуют в настройках конструктора, что программирование в интернете имело свою специфику. Было необходимо упростить работу с типичными данными и элементами веб-страниц, а так же ограничить функциональность средств программирования для злоумышленников. Они не должны были иметь возможность нанести какой-либо вред серверам или пользовательским Основная цель веб-программирования - создание веб-приложений, которые могут обрабатывать пользовательский ввод и взаимодействовать с базами данных для хранения и получения данных. Эти веб-приложения могут быть развернуты на сервере и доступны через интернет, что делает их доступными для множества пользователей. компьютерам с помощью написания или изменения скриптов. Именно поэтому начали появляться все новые и более современный языки и средства веб-программирования. Рассмотрим некоторые из них. то выбор очевиден. Но все же вы можете столкнуться с немалым количеством минусов.

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

Язык гипертекстовой разметки сайта, или HTML (HyperText Markup Language), — код, помогающий структурировать содержание каждой веб-страницы. С помощью HTML разработчик собирает «скелет». После чего работает с CSS-кодом для стилизации страницы — покрывает «кожей». В финале запускает «кровеносную, пищеварительную и дыхательную системы», программируя на JavaScript.

Что такое язык HTML:

HyperText (гипертекст) — текст, соединяющий связанные между собой элементы.Markup (разметка) — руководство по стилю набора текста.

  1. Language (язык) — код, который компьютерная система понимает и использует для интерпретации командHTML (Hypertext Markup Language) - это код, который используется для структурирования и отображения веб-страницы и её контента. Например, контент может быть структурирован внутри множества параграфов, маркированных списков или с использованием изображений и таблиц данных. Как видно из названия, эта статья даст вам базовое понимание HTML и его функций.

С помощью языка разметки HTML браузер делает запрос по адресу, который ввёл пользователь, и получает файл в формате «.html». Браузер распознаёт код, выбирает знакомые для себя сигналы: понимает, что написать словами, где поставить заголовок и какой именно. Таким образом код из файла преобразуется в необходимые визуальные объекты.


Если вы сейчас за ноутбуком или компьютером, посмотрите, как выглядит HTML этой конкретной страницы блога.

Для этого в Safari в настройках необходимо поставить галочку напротив пункта «Показывать меню „Разработка“ в строке меню» в «Дополнениях». После нажать в браузере «Разработка» и «Показать ресурсы страницы».

Для Google Chrome щёлкните правой кнопкой мыши в любом месте и выберите “View Page Source”. В зависимости от браузера команды могут различаться.

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

Моя кошка очень раздражена

Если бы мы хотели, чтобы строка стояла сама по себе, мы могли бы указать, что это абзац, заключая его в теги абзаца:


Моя кошка очень раздражена


Анатомия HTML элемента

Главными частями нашего элемента являются:

1. Открывающий тег (Opening tag): Состоит из имени элемента (в данном случае, "p"), заключённого в открывающие и закрывающие угловые скобки. Открывающий тег указывает, где элемент начинается или начинает действовать, в данном случае — где начинается абзац.

2. Закрывающий тег (Closing tag): Это то же самое, что и открывающий тег, за исключением того, что он включает в себя косую черту перед именем элемента. Закрывающий элемент указывает, где элемент заканчивается, в данном случае — где заканчивается абзац. Отсутствие закрывающего тега является одной из наиболее распространённых ошибок начинающих и может приводить к странным результатам.

3. Контент (Content): Это контент элемента, который в данном случае является просто текстом.

4. Элемент(Element): Открывающий тег, закрывающий тег и контент вместе составляют элемент.

Элементы также могут иметь атрибуты, которые выглядят так:

Атрибуты содержат дополнительную информацию об элементе, которую вы не хотите показывать в фактическом контенте. В данном случае, class это имя атрибута, а editor-note это значение атрибута. Класс позволяет дать элементу идентификационное имя, которое может позже использоваться, чтобы обращаться к элементу с информацией о стиле и прочих вещах.


Атрибут всегда должен иметь:

1. Пробел между ним и именем элемента (или предыдущим атрибутом, если элемент уже имеет один или несколько атрибутов).

2. Имя атрибута, за которым следует знак равенства.

3. Значение атрибута, заключённое с двух сторон в кавычки.

Вы также можете располагать элементы внутри других элементов — это называется вложением. Если мы хотим заявить, что наша кошка очень раздражена, мы можем заключить слово "очень" в элемент , который указывает, что слово должно быть сильно акцентированно.

Вы, однако, должны убедиться, что ваши элементы правильно вложены: в примере выше мы открыли первым элемент
, затем элемент , потом мы должны закрыть сначала элемент , затем
.

Элементы должны открываться и закрываться правильно, поэтому они явно располагаются внутри или снаружи друг друга. Если они перекрываются, как в примере выше, ваш веб-браузер будет пытаться сделать наилучшее предположение на основе того, что вы пытались сказать, что может привести к неожиданным результатам. Так что не стоит этого делать.

Некоторые элементы не имеют контента, и называются пустыми элементами. Возьмём элемент , который уже имеется в нашем HTML.

Он содержит два атрибута, но не имеет закрывающего тега , и никакого внутреннего контента. Это потому, что элемент изображения не оборачивает контент для влияния на него. Его целью является вставка изображения в HTML страницу в нужном месте.

Мы завершили изучение основ отдельных HTML элементов, но они не очень полезны сами по себе. Теперь мы посмотрим, как отдельные элементы объединяются в целую HTML страницу. Давайте вернёмся к коду, который мы записывали в наш index.html.

Здесь мы имеем:

1. — доктайп. В прошлом, когда HTML был молод (около 1991/1992), доктайпы должны были выступать в качестве ссылки на набор правил, которым HTML страница должна была следовать, чтобы считаться хорошим HTML, что могло означать автоматическую проверку ошибок и другие полезные вещи. Однако в наши дни, никто не заботится об этом, и они на самом деле просто исторический артефакт, который должен быть включён для того, что бы все работало правильно. На данный момент это все, что вам нужно знать.

2. — элемент . Этот элемент оборачивает весь контент на всей странице, и иногда известен как корневой элемент. — элемент . Такие стили работают для всех страниц сайта.

К каждой веб-странице можно присоединить несколько таблиц стилей, добавляя последовательно несколько элементов , указав в атрибуте media назначение данной таблицы стилей. rel="stylesheet" указывает тип ссылки (ссылка на таблицу стилей).

HTML

Атрибут type="text/css" не является обязательным по стандарту HTML5, поэтому его можно не указывать. Если атрибут отсутствует, по умолчанию используется значение type="text/css".

Внутренние стили

Внутренние стили встраиваются в раздел HTML-документа и определяются внутри элемента . Внутренние стили имеют приоритет над внешними, но уступают встроенным стилям (заданным через атрибут style).

HTML

Встроенные стили

Когда мы пишем встроенные стили, мы пишем CSS-код в HTML-файл, непосредственно внутри элемента с помощью атрибута style:Правило @import

Правило @import позволяет загружать внешние таблицы стилей. Чтобы директива @import работала, она должна располагаться в таблице стилей (внешней или внутренней) перед всеми остальными правилами:

Правило @import также используется для подключения веб-шрифтов:

Виды селекторов

Селекторы представляют структуру веб-страницы. С их помощью создаются правила для форматирования элементов веб-страницы. Селекторами могут быть элементы, их классы и идентификаторы, а также псевдоклассы и псевдоэлементы.

Универсальный селектор

Соответствует любому HTML-элементу. Например, * {margin: 0;} обнулит внешние отступы для всех элементов сайта. Также селектор может использоваться в комбинации с псевдоклассом или псевдоэлементом: *:after {CSS-стили}, *:checked {CSS-стили}.

Селектор элемента

Селекторы элементов позволяют форматировать все элементы данного типа на всех страницах сайта. Например, h1 {font-family: Lobster, cursive;} задаст общий стиль форматирования всех заголовков h1.

Селектор класса

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