Как создать свой браузер

Обновлено: 21.11.2024

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

Я решил приложить некоторые усилия и создать веб-браузер с нуля. Каковы общие функции, архитектуры и возможности современных веб-браузеров, о которых мне следует знать, прежде чем приступить к работе?

Любые рекомендации приветствуются!

Да, это безумный проект, но нам не нужно здесь шутить — я думаю, это отличный повод для обсуждения того, как вы это обойдете :)

Я помню статью, в которой некоторое время назад кто-то жаловался на то, что ни у кого больше не хватает мужества создавать новые механизмы рендеринга. По его словам, нужны новые браузеры, потому что сегодняшние компьютеры другие. Несколько ядер. Первый шаг — Chrome с 1 процессом на вкладку. Посмотрим, что будет дальше.

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

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

10 ответов 10

Ну, разбейте его на части. Что такое веб-браузер? Что оно делает? Это:

Выбирает внешний контент. Итак, вам нужна библиотека HTTP или (не рекомендуется) написать ее самостоятельно. В HTTP-протоколе много сложностей и тонкостей, например, обработка заголовков expires, разные версии (хотя в наши дни это в основном 1.1) и т. д.;
Обрабатывает различные типы контента. Для таких вещей существует реестр Windows, который вы можете использовать. Здесь я говорю об интерпретации контента на основе типа MIME;
Разбирает HTML и XML: для создания DOM (объектной модели документа);
Разбирает и применяет CSS: это влечет за собой понимание всех свойств, всех единиц измерения и всех способов указания значений (например, "граница: 1 пиксель сплошной черный" в сравнении с отдельными свойствами border-width и т. д.);
Реализует визуальную модель W3C (и это главное); и
Имеет движок Javascript.

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

Сколько одновременных подключений использовать?
Ошибка сообщения пользователю;
Прокси;
Параметры пользователя;
и т. д.

Trident: разработан Microsoft для Internet Explorer.
Gecko: используется в Firefox;
Webkit: используется в Safari и Chrome 0–27;
KHTML: используется в среде рабочего стола KDE. Webkit появился из KHTML несколько лет назад;
Электра: используется в Opera 4–6;
Presto: используется в Opera 7–12;
Blink: используется в Chrome 28+, Opera 15+, форк webkit;

Три основных механизма рендеринга следует рассматривать как основные, используемые сегодня.

Двигатели JavaScript также сложны. Некоторые из них, как правило, привязаны к конкретному движку рендеринга:

И, конечно же, есть все элементы пользовательского интерфейса: навигация между страницами, история страниц, очистка временных файлов, ввод URL-адресов, автозаполнение URL-адресов и т. д.

Это много работы.

Похоже, это действительно интересный проект, но он потребует от вас огромных усилий.

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

Некоторые ресурсы, которые вы могли бы проверить:

Но глядя на это с реалистичной точки зрения, огромные усилия, необходимые для написания кода с нуля, напомнили мне этот комикс:

@Ross: Да, они до сих пор выпускают комикс, этого нового парня зовут Борис из России, и он "Супер Хакер" LOL

Если бы я захотел сделать супер-простой браузер просто в качестве учебного упражнения, можете ли вы порекомендовать, с чего начать? Например, только HTML, без JS или CSS.

Большинство современных веб-браузеров — гигантские звери, и, вероятно, довольно плохо спроектированные, потому что они (и сам Интернет) развивались довольно бессистемно.

Начните с четкого определения целей вашего проекта (и того, чего вы надеетесь достичь). Это то, что вы делаете просто для развлечения, или вы ожидаете, что другие люди будут использовать ваш браузер? Если вы ожидаете, что другие будут использовать его, каков будет для них стимул?Нереально ожидать, что вы с нуля разработаете новый браузер, который каждый сможет использовать в качестве замены Chrome, Safari, Firefox, IE, Opera и т. д. Все эти проекты имеют фору в 10-15 лет. вас, и к тому времени, когда вы догоните их, они будут опережать вас еще на 10–15 лет. Кроме того, за ними стоит гораздо больше человеческих ресурсов, поэтому, если вы хотите, чтобы ваш проект был успешным, в какой-то момент вам понадобится эта рабочая сила.

Вот почему Apple и Google, крупные компании с большим количеством ресурсов, не начинали с нуля. Даже Microsoft не начинала с нуля. Оригинальный IE был основан на Mosaic. Единственными значительными браузерами, которые все еще существуют на сегодняшний день и которые были созданы с нуля, являются Opera, Konqueror и Lynx, которые, к сожалению, занимают ничтожную долю рынка. Давайте на время забудем о Lynx, так как это только текстовый браузер, и, по-видимому, единственная причина, по которой он все еще существует, заключается в том, что он служит этой конкретной нише. Opera, возможно, является одним из лучших когда-либо созданных браузеров, но у него никогда не было значительной доли рынка, поэтому помните, что успех и инновации — это не одно и то же. KHTML — это движок Konqueror, который сам по себе так и не стал очень успешным, но является основой WebKit, который используют и Apple, и Google. Я думаю, можно определенно утверждать, что если бы KHTML никогда не был создан, то ни Safari, ни Chrome не существовали бы. Интересно, что и KHTML, и Opera в основном разрабатывались норвежскими программистами, работавшими в одном здании в Осло.

На создание веб-браузера нужно смотреть так же, как на создание операционной системы, потому что браузер, по сути, и есть операционная система для запуска веб-приложений. Как и операционная система, веб-браузер представляет собой очень сложную программу, состоящую из множества компонентов. Конечно, людям удавалось создавать новые операционные системы с нуля. На ум приходит Линус Торвальдс. Он сделал Linux одной из самых успешных операционных систем.

Конечно, вы сталкиваетесь с дополнительной проблемой, из-за которой создать новый успешный браузер сложнее, чем создать новую успешную ОС. Ожидается, что браузеры будут безукоризненно запускать весь устаревший код, циркулирующий в Интернете. Теперь предположим, что Линусу Торвальдсу сказали, что его новая ОС не будет иметь значения, если она не будет полностью обратно совместима с UNIX или какой-либо существующей ОС. Я сомневаюсь, что он стал бы беспокоиться, и Linux, вероятно, сегодня не существовало бы. В действительности, конечно, единственная причина, по которой Linux стала популярной, заключалась в том, что она была хорошо спроектирована, а проект GNU смог создать инструменты для переноса огромных объемов существующего кода в Linux. Без идеологической поддержки Linux со стороны GNU у него не было бы шансов.

Итак, если вы действительно достаточно амбициозны (или безрассудны), чтобы попытаться создать новый успешный браузер, вам следует сосредоточиться на архитектуре и дизайне. Нет никакой практической причины создавать новый браузер с нуля, если вы не уверены, что сможете каким-то образом улучшить дизайн существующих браузеров. Это означает, что вам необходимо достаточно хорошо ознакомиться с кодом WebKit и Gecko, чтобы понять принятые ими дизайнерские решения, но вам не следует пытаться копировать их дизайн, потому что в противном случае вы могли бы просто использовать их код.

Мое личное мнение (без проведения достаточного исследования) состоит в том, что современные браузеры недостаточно модульны. Если бы я собирался сделать новый браузер, я бы нашел способ упростить процесс замены элементов (например, заменить один движок JavaScript другим) и дать пользователю намного больше контроля, чем в существующих браузерах. . Современные браузеры и веб-дизайнеры практически полностью отняли у пользователя контроль. Почему я, пользователь, не могу указать веб-браузеру, как я хочу, чтобы он отображал контент, отображаемый на моем компьютере? Первоначальный HTML лишь давал указания о том, как структурировать контент, и со временем новые стандарты становились все более и более догматичными, вплоть до того, что пользователь теперь находится во власти веб-дизайнера. Привлекательность Linux заключалась в том, что она вернула контроль пользователю, и именно поэтому так много гиков поддержали ее и превратили в успешную ОС.

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

Наконец, проведя много-много исследований, я думаю, что именно с этого вы должны начать программировать:

Посмотрите на существующие механизмы сценариев и посмотрите, сможете ли вы перенести их в свой проект. Я бы не советовал вам писать свой собственный интерпретатор JavaScript не только потому, что это очень большой проект сам по себе, но и потому, что так много работы уже было вложено в оптимизацию компиляторов JS (например, V8).Поэтому, если вы не являетесь гуру в разработке компиляторов, ваш интерпретатор JS, созданный вручную, скорее всего, будет хуже того, что уже существует, даже если он безупречно следует спецификациям EMCAScript. Опять же, я думаю, что скриптовый движок в любом случае должен быть чем-то, что является полностью отдельным модулем от реального браузера, поэтому я думаю, что было бы гораздо полезнее иметь фреймворк, который позволяет вам заменить любой движок сценариев, а не создавать движок сценариев. который работает только с вашим браузером.

Просмотрите исходный код HTML/CSS/JS для 10–20 самых популярных веб-сайтов в Северной Америке (Google, Facebook, YouTube, Twitter, Wikipedia, Amazon, популярные платформы для ведения блогов и т. д.) и настройте свой браузер так, чтобы он хорошо работал. с этими сайтами. Это несколько более решаемая проблема, чем создание браузера, соответствующего всем существующим стандартам (что-то, с чем современные браузеры все еще не справляются идеально), тем более создание браузера, который правильно отображает все веб-сайты в Интернете (никто не может сделай это). Люди будут жаловаться, что ваш браузер нарушает стандарты и тому подобное, но это не такая большая проблема, как люди, жалующиеся на то, что они не могут получить доступ к Google или Facebook с помощью вашего браузера. Я не могу вспомнить ни одного браузера, который правильно следовал бы всем (или даже большинству) стандартов в своем первом выпуске, поэтому я даже не пытайтесь. Если вы можете сделать что-то, что люди захотят использовать настолько, что когда-нибудь появится вторая или третья версия, тогда вы можете беспокоиться о стандартах на этом этапе.

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

Следуйте приведенным ниже простым шагам, чтобы создать бесплатный базовый браузер, соответствующий вашим предпочтениям. Мы будем использовать Visual Studio для этого действия, но у нас очень мало кода.

Установка и обновления

Для начала вам необходимо загрузить Visual Studio Community Edition от Microsoft, которая остается абсолютно бесплатной. Программное обеспечение часто обновляется, поэтому необходимо перейти на его последнюю версию. Visual Studio может быть немного громоздкой и слишком большой, но у нее есть много бесплатных шаблонов, включая веб-браузеры.

После завершения установки вы можете запустить приложение напрямую.

Также прочтите: Руководство для начинающих по Android Studio

Процедура создания браузерного приложения

Дайте веб-браузеру имя и нажмите «Создать». Я назвал свой частный браузер «Фантастический браузер».

После запуска программы вы увидите пустую форму без данных. Нажмите «Панель инструментов» на левой панели. Вы также можете включить его с помощью значка «Просмотр». Прокрутите вниз и выберите «Веб-браузер».

В рабочей области вам нужно отредактировать две панели. Одним из них является панель «Свойства», содержащая все сведения об окне браузера. Здесь вы можете выбрать поля и размер всего окна браузера, позиции табуляции, а также включить или отключить полосы прокрутки.

Другая панель – это основная форма. Здесь вы найдете небольшой пункт меню, который вы должны нажать: «Открепить в родительском контейнере».

Нажав «Открепить», вы сможете вручную изменить размер границ окна браузера. Эта часть будет демонстрировать отображаемое содержимое веб-сайта.Сохраните приложение и перейдите к следующему шагу.

Создание пунктов меню браузера

Чтобы создать элементы меню браузера, вам потребуется использовать параметр панели инструментов под названием «Кнопка». Нажмите на текст и перетащите его в любое место в главном окне формы.

Кроме того, вам также понадобится пункт меню "Текстовое поле" из панели инструментов, чтобы получать веб-сайты, которые вы хотите посетить.

После того как вы разместите все кнопки и текстовое поле, вы можете расположить их таким образом, чтобы они напоминали основное окно браузера. Кнопки расположены Visual Studio симметрично, что позволяет без проблем создать между ними одинаковое пространство.

Форму, размер и цвета кнопок можно дополнительно изменить в их «Свойствах».

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

Дважды щелкните любую из переименованных кнопок, чтобы отредактировать ее код из расположения по умолчанию. Для кнопки «Назад» вы будете использовать webbrowser1.GoBack() для управления действием, которое должно следовать за нажатием кнопки. Для продвижения вперед это будет webbrowser1.GoForward(), а также есть варианты возврата домой и поиска.

Чтобы использовать текстовое поле для ввода URL-адресов, используйте webBrowser1.navigate(textbox.text) . Вы можете использовать любой заданный URL-адрес для кнопки «Домой».

Запустить и сохранить браузер

После того как вы определили путь навигации для всех своих кнопок и текстовых полей, вы можете создавать дополнительные параметры из «набора инструментов». Я выбрал «горизонтальную полосу прокрутки». Есть также варианты для поисковых систем, но на данный момент нет омнибокса. Однако вы всегда можете создать дополнительные параметры, если немного больше изучите Visual Studio.

Нажмите кнопку "Пуск" в верхней части окна Visual Studio. Он запустит браузер внутри проекта формы. Вы можете проверить свои результаты для своей домашней страницы или поисковой системы. Кроме того, если вы развернете окно браузера, вы не почувствуете, что оно отличается от обычного браузера.

Не забудьте сохранить проект браузера как программу .csproj. Вы можете запустить его прямо из Visual Studio в будущем. Вы можете дополнительно изменить значок в Windows «Настройка» и «Персонализация».

Заключение

Если вам нужна максимальная конфиденциальность, ничто не сравнится с собственным браузером. Описанная выше процедура поможет вам создать и запустить собственный браузер на ПК или Mac. Если вам нужны дополнительные возможности, в Visual Studio есть действительно продвинутые программы, но для этого требуется знание расширенного кода.

Собираетесь ли вы в ближайшее время создать собственный браузер? Какие другие программы вы использовали для их создания? Мы с нетерпением ждем вашего ответа.

Создание собственного браузера кажется ужасной идеей, особенно если вы являетесь фронтенд-разработчиком по профессии и не знаете C++ или другого родного языка. Тем не менее, пару лет назад я решил проверить, смогу ли я, и к настоящему времени мой браузер превратился в серьезный проект.

Как я понял эту идею?

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

…Пока я не вернулся к браузеру, чтобы реализовать эти проекты. Там все, что я мог видеть, было одним окном просмотра за раз. Я постоянно менял размер всего браузера или инструментов адаптивного дизайна, и это было очень медленно.Не было возможности быстро сравнить два адаптивных размера, и по сравнению со Sketch это выглядело очень плохо.

Примерно в то же время я экспериментировал с Electron — фреймворком, позволяющим создавать настольные приложения с использованием веб-технологий. Я решил разработать прототип, который позволил бы мне видеть один и тот же веб-сайт в нескольких окнах просмотра рядом, как мой макет в Sketch. После нескольких ночей написания кода у меня было кое-что, что уже работало довольно хорошо:

Вы ничего не могли с этим сделать, но вы могли ввести URL-адрес, и он будет отображаться в нескольких размерах экрана. Довольно круто!

Электрон оказался хорошим выбором. Это не только позволило мне использовать имеющиеся у меня знания в области веб-разработки для создания «настоящего» браузера, но этот браузер также использовал последнюю версию Chromium и инструментов разработчика Chromium. Поэтому, несмотря на то, что вам всегда нужно тестировать в нескольких браузерах, мне не нужно беспокоиться о том, что некоторые веб-технологии не будут работать в моем. Я также мог по-прежнему использовать инструменты разработчика, к которым я уже привык.

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

Используя его самостоятельно, я также обнаружил все, чего мне не хватало, и быстро начал добавлять новые функции. Некоторые из них были «обычными» функциями браузера, такими как навигация (правильно, прототип до сих пор не имел кнопок «вперед» и «назад») и отображение заголовка страницы. Другие были улучшениями моего многоэкранного подхода: возможность добавлять новые экраны и изменять их размер, а также возможность делать скриншоты всех экранов рядом друг с другом, что идеально подходит для отправки вашему клиенту.

Затем я решил поделиться браузером с другими разработчиками и быстро начал добавлять новые функции на основе их отзывов: возможность увеличивать и уменьшать масштаб экрана, например, как вы можете легко сделать это и в Sketch, стандартные размеры экрана на основе популярных устройства, а также синхронизация действий пользователя, таких как прокрутка и наведение курсора, между всеми экранами, чтобы то, что вы делали на одном экране, применялось ко всем им.

Продолжение разработки

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

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

Браузеры могут быть намного больше

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

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

Браузер также много знает о доступности сайта. Отсутствующие тексты ALT, неправильные заголовки и недостаточный контраст между текстом и фоном — все это проблемы, о которых ваш браузер знает или может вычислить. А в качестве средства визуализации браузер может имитировать такие вещи, как дальтонизм или другие нарушения зрения.

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

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

Конечно, мой браузер не единственный. Firefox тоже недавно добавил действительно хорошие специальные возможности. К сожалению, они «спрятаны» на вкладке в инструментах разработчика, что означает, что они скрыты для разработчиков, которые еще не знают, что они там есть.

Как видите, мне предстоит много работы в 2020 году.

Создание собственного браузера: плохая идея?

После этого могу сказать: …да, немного. Но в итоге я создал что-то и ежедневно работал над тем, чем я невероятно горжусь и что многие люди получают ежедневную пользу.

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

Привет, я Килиан. Я делаю Polypane, браузер для адаптивной веб-разработки и дизайна. Если вы читаете этот сайт, возможно, вам это интересно. Попробуйте!

Социальные

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

Веб-браузер, созданный с помощью онлайн-инструмента, на самом деле представляет собой браузер Chromium с настроенным вами именем веб-браузера и значком приложения. Кажется круто, правда? Вы можете использовать свой собственный браузер для серфинга в Интернете.

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

Ваша работа по настройке почти завершена после загрузки. Тем не менее, вы также можете настроить его после установки. Установите веб-браузер, используя загруженный установочный файл. Для установки требуется подключение к Интернету, так как файлы библиотеки загружаются, а затем устанавливаются на ваш компьютер.

Большая часть того, что вы получаете в популярном веб-браузере Google Chrome.
Та же стабильность и производительность, что и в веб-браузере Chromium.
Расширения, темы и страницы новой вкладки также можно изменить или добавить.
Поскольку вы можете подготовить браузер со своими собственными закладками и домашней страницей, вам будет проще поделиться с друзьями, родственниками и людьми, которые работают с вами или ниже вас.
Создавайте собственные браузеры и входите в несколько веб-аккаунтов одновременно.

Просто! Вы также можете создать свою собственную тему для своего индивидуального браузера. Только представьте себе полностью настраиваемый веб-браузер, который всегда демонстрирует вашу креативность! Обратитесь к статье, с помощью которой вы можете создать свою собственную тему Chrome с помощью другого онлайн-инструмента.

Сайт MakeMyBrowser все еще усердно работает над тем, чтобы предоставить пользователям Интернета как можно больше возможностей для создания собственных веб-браузеров. Вы также можете ожидать гораздо больше настроек.

Итак, теперь вы готовы создать свой собственный веб-браузер? Давай туда вперед! Поделитесь своими мыслями ниже в комментариях.

Если вы прошли множество курсов Codecademy, но все еще задаетесь вопросом: "Где я могу писать код на своем компьютере?", начните здесь!

Создание и просмотр веб-страницы на вашем компьютере

Требования:

Введение

Когда вы переходите на веб-страницу в Интернете, браузер выполняет большую часть работы. Браузер считывает все необходимые файлы (HTML, CSS и JavaScript) и интерпретирует эти необработанные ресурсы, чтобы нарисовать сложную страницу, которую вы видите.

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

Шаг 1. Откройте текстовый редактор

Первый шаг — открыть текстовый редактор. Важно использовать «сырой» текстовый редактор, а не форматированный текстовый процессор.

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

Шаг 2. Напишите свой HTML-скелет

Теперь, когда ваш текстовый редактор открыт, вы можете начать писать свой HTML. Как вы узнали из первого урока курса HTML и CSS, есть несколько вещей, которые всегда присутствуют в хорошо отформатированном HTML-файле. И снова все вместе:

Вы можете использовать именно этот скелет, если хотите. Просто скопируйте и вставьте его в текстовый редактор. Убедитесь, что вы включили все!

Шаг 3. Сохраните файл

Ваша веб-страница готова, но пока она существует только в текстовом редакторе. Следующим шагом будет сохранение файла на ваш компьютер. Если вы сейчас закроете текстовый редактор без сохранения, ваша новая веб-страница будет потеряна! При сохранении файла следует помнить о нескольких важных вещах:

Используйте HTML-файл с расширением .html, например about_me.html.
Не используйте пробелы или специальные символы в имени файла. Вместо этого используйте символы подчеркивания (_) или дефисы (-).
Решите, где на вашем компьютере вы сохраните файл, и обязательно запомните это место!

Используйте HTML-файл с расширением .html

Расширение файла — это суффикс имени файла, описывающий тип файла. Расширение файла всегда представляет собой последние 3 или 4 символа в имени файла, которым предшествует точка. Например, расширение HTML-файла — .html, и оно указывает браузеру (и другим приложениям) интерпретировать содержимое файла как веб-страницу. Обратите внимание, что на старых веб-страницах вы можете увидеть .htm , но это архаично и больше не используется.

Не используйте пробелы или специальные символы в имени файла

Выбирая имя файла, делайте его простым. Придерживайтесь цифр и букв. Используйте символы подчеркивания (_) или тире (-) вместо пробелов. Не используйте знаки процента, косые черты, знаки вопроса, восклицательные знаки, запятые и другие «специальные символы». Браузер должен найти файл по его имени, а специальные символы в имени файла могут прервать этот процесс. Имена файлов должны быть простыми и соответствовать соглашениям, чтобы сделать навигацию по вашей веб-странице более надежной.

Решите, где на вашем компьютере вы сохраните файл

Выбрав имя файла, выберите подходящее место в файловой системе для сохранения веб-страницы. Рекомендуется создать новую папку для размещения этой веб-страницы. Если вы создаете новую папку, используйте те же соглашения об именах, которые были изложены выше, чтобы свести к минимуму головную боль в будущем. Самое важное при выборе места для сохранения — это запомнить, где вы его сохранили. Если вы уже сохранили его, но не помните, где, просто нажмите «Файл» > «Сохранить как». , выберите новое место для сохранения и обязательно запомните это время.

Шаг 4. Откройте веб-страницу в браузере

Теперь вы готовы к просмотру новой страницы в браузере! Сначала откройте браузер. В верхнем меню нажмите «Файл» > «Открыть файл». Перейдите к месту, где вы сохранили свою веб-страницу. Нажмите на файл веб-страницы, а затем нажмите «Открыть». Вы должны увидеть свою веб-страницу!

Обзор

За это короткое время вы научились использовать то, что изучаете на Codecademy, на своем персональном компьютере. Вы также узнали о расширениях файлов, текстовых редакторах и сохранении и просмотре локальных файлов. Теперь вы готовы проверить все, чему научились в Codecademy, и попрактиковаться самостоятельно!

Читайте также: