Как создать html документ в ubuntu

Как создать HTML файл

Файлы HTML определяют структуру веб-страницы. Таким образом, чтобы создать веб-страницу, самый первый шаг — написать для нее файл HTML. В этой статье вы узнаете, как создать HTML-файл с нуля.

Что такое HTML-документ

Документ HTML — это простой текстовый файл с расширением .html или .htm . Между ними почти нет разницы, но .html встречается чаще.

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

Инструменты, которые нам нужны

Теперь вопрос в том, какой инструмент нам нужен для создания HTML-файла.

Самый простой способ — использовать обычный текстовый редактор, например текстовый редактор по умолчанию в вашей операционной системе.

Расширенные текстовые редакторы и IDE, такие как Visual Studio Code, Sublime, Atom или Bracket, могут помочь вам с подсказками синтаксиса и выделением ошибок. Вы можете использовать их для написания сложного HTML-кода и управления им.

Эти расширенные текстовые редакторы можно загрузить и использовать бесплатно, и они доступны для всех популярных операционных систем, таких как Windows, Linux и macOS.

Шаги по созданию HTML-документа

А теперь попрактикуемся. Давайте создадим простой HTML-документ.

• Запустите текстовый редактор по вашему выбору и создайте новый текстовый документ.
• Поместите в него несколько HTML-тегов. Если вы не знакомы с синтаксисом HTML, вы можете скопировать и вставить приведенный ниже код в новый пустой документ. О тегах мы узнаем позже. А сейчас давайте сосредоточимся на создании документа

 head> title> A Sample Webpage title> head> body> p> Hello World! p> body> html> 

• Когда вы закончите писать код, самое время сохранить документ. При сохранении документа вы можете дать любое имя, использовать .html или .htm в качестве расширения и UTF-8 в качестве системы кодировки символов (если потребуется).

Проверьте HTML-документ с помощью браузера

После сохранения файла мы можем убедиться, что он работает.

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

В результате вы должны увидеть пустую страницу с заголовком «Пример веб-страницы» и одним абзацем в ней «Hello World!» .

Спасибо, что дочитали до конца!

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

HOW-TO: Веб-разработка. Часть 2

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

Так что такое Интернет, и откуда он взялся?

Если вкратце, то всё очень просто. Интернет появился в 70-х годах как исследовательский проект ARPANET в США, который проводило военно-научное агентство DARPA. Вскоре после этого им занялись университеты и учёные, чтобы сделать обмен данными проще. Но интернет превратился в то, чем является сегодня, лишь в 90-е годы после изобретения современного ПК и принятия протокола TCP/IP.

Современное состояние сети интернет

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

Начнём с того, что существует множество языков разметки ( HTML 4 и 5; XHTML 1 и 2; CSS 1, 2 и 3; XML ; JSON и др). Они определяют структуру, разметку и форматирование веб-страниц, а некоторые используются и созданы только для хранения информации.

Ещё существуют высоко-уровневые серверные языки веб-программирования, например PHP , ASP / ASP .NET, Python, Java (JSP), Ruby и другие. Каждый из этих языков полезен по-своему, и обычно программисты выбирают языки в зависимости от навыков или требований работодателя. Многие предпочитают PHP , Python и Java, потому что они бесплатные и открытые, могут быть использованы на множестве операционных систем и архитектур процессоров. А другие любят ASP / ASP .net за отличную поддержку от Microsoft и не против платить за их использование. В последующих статьях я покажу, как программировать на PHP . Но стоит также попробовать другие языки. Вовсе не значит, что PHP самый лучший язык для всех нужд, только лишь потому что я буду о нём рассказывать. На самом деле некоторые веб-разработчики используют несколько языков в приложениях, как разработчики ПО смешивают Assembler, C, C++ и тд.

JavaScript (к Java он отношения не имеет) — это самый популярный язык программирования на стороне клиента. Такие языки исполняют код на компьютере пользователя в браузере, позволяя программистам создавать для пользователя интерфейс с большими возможностями. Конечно ценой является производительность компьютера пользователя. Поэтому такие сложные сайты, как Digg.com, замедляют работу старых компьютеров, особенно когда запущено несколько программ.

JavaScript настолько полезен, что Firefox состоит из JavaScript более чем на 50%, если верить Ohloh 1) . JavaScript очень важен для многих веб-разработчиков, и поэтому создано множество сред разработки, чтобы упростить программирование, сделать его объектно-ориентированным, добавить поддержку AJAX (Асинхронный JavaScript и XML ). К таким средам относятся jQuery, YUI, Prototype & Script.aculo.us, Mootools, Dojo и многие другие.

Если объединить эти технологии с некоммерческой поддержкой, то мы получим самые популярные в мире веб-сайты, такие как Wikipedia, Google, Yahoo, CNN, BBC, YouTube, DailyMotion, Facebook, MySpace, Digg, Ubuntu Forums, Kijiji, Craigslist, ESPN, Flickr и DeviantArt. В веб-разработке используются также такие технологии как Java-аплеты и Flash-анимация, но в этой статье они не рассматриваются.

Итак, что же нужно для создания сайта?

Операционная система, например Ubuntu
Текстовый редактор, например gEdit (Приложения > Стандартные > Текстовый редактор)
Веб-браузер, например Firefox (Приложения > Интернет > Firefox Web Browser)
терпение и желание учиться

Будем считать, что вы используете Ubuntu. Откройте Firefox и gEdit, которые будут использоваться для программирования, отладки и просмотра результата.

Создание вашего первого сайта

Скопируйте этот код в открытый gEdit и сохраните на Рабочем столе под именем «первый.html».

html> head> /head> body> /body> /html>

Теперь дважды кликните на этом файле на Рабочем столе, чтобы открыть его в Firefox. Перед вами пустая страница? Так и должно быть. Почему? Я только что привёл пример простой разметки сайта в HTML 4. Весь код должен находиться между тегами , контент должен быть между , а между должна быть мета-информация, такая как мета-теги, включения другого кода (JavaScript) или информация для отображения — CSS .

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

Скопируйте следующий код в новый документ в gEdit и сохраните его как «второй.html».

html> head> title>Моё сочинительство/title> /head> body> h1>Моё сочинительство/h1> p> Я смотрю телевизор очень u>i> МНОГО/i>/u>, вредно ли это? /p> p> Я много занимаюсь этим: /p> ul> li>сижу на стуле/li> li>смотрю фильмы/li> li>встаю, чтобы поесть/li> /ul> p> Вы ведёте здоровый образ жизни? /p> /body> /html>

Теперь дважды кликните на этом файле на Рабочем столе, чтобы открыть его в Firefox. На этот раз вы должны увидеть контент.

Чтобы понять, почему страница выглядит именно так, нужно внимательно изучить разметку, которую мы только что скопировали в файл «второй.html». Когда тег находится внутри тега , он выводит своё содержимое в заголовке окна браузера. Заметьте, что заголовок окна Firefox сейчас такой: «Моё сочинительство — Mozilla Firefox». Разумеется, сюда можно поставить любой текст.

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

Тег означает абзац. Обычно используется для отображения основного контента страницы.

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

ul> li>сижу на стуле/li> li> смотрю фильмы ul> li>драму/li> li>боевики/li> li>другие/li> /ul> /li> li>встаю, чтобы поесть/li> /ul>

В заключение скажу, что управлять дизайном страницы можно, поместив CSS (каскадные таблицы стилей) в HTML код. Сохраните следующий как «третий.html» на Рабочий стол.

html> head> title>Моё сочинительство/title> style type="text/css"> h1 < color: #ff0000; border-bottom: 5px solid #000000; text-align: center; >p < text-transform: uppercase; >/style> /head> body> h1>Моё сочинительство/h1> p> Я смотрю телевизор очень u>i> МНОГО/i>/u>, вредно ли это? /p> p> Я много занимаюсь этим: /p> ul> li>сижу на стуле/li> li>смотрю фильмы/li> li>встаю, чтобы поесть/li> /ul> p> Вы ведёте здоровый образ жизни? /p> /body> /html>

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

CSS можно либо вставить в , используя тег

, либо указать ссылку на внешний файл, который содержит CSS . Пока мы оставим его в HTML .

Как вы заметили, синтаксис CSS отличается от HTML . Для определения элемента в нём используются скобки <>, а не тег . В CSS это называется селектором и используется для выбора тега, который нужно изменить.

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

Забавное число «#ff0000» — это цвет в шестнадцатеричном обозначении. При такой записи существует более 16 млн цветов. Поэтому используйте программы вроде Agave для создания цветовых схем.

Эта статья лишь немного затрагивает процесс веб-разработки и возможности программирования и дизайна. Если вы почувствовали интерес, то следите за моими статьями, в которых я буду говорить о серверном программировании на PHP , о клиентском (JavaScript, jQuery, AJAX ) и о многом другом. После этого я советую посетить местный книжный магазин, чтобы купить книгу о теме, которая вас заинтересовала (дизайн, программирование, и др). Или записаться на курсы в местном учебном центре.

Шаблоны для часто используемых типов документов

Если вы часто создаёте документы с практически одинаковым содержимым, полезно воспользоваться шаблонами файлов. Шаблон может быть документом любого типа с содержимым, которое вы хотите добавлять в другие файлы. Например, можно создать шаблон с заголовком письма.

Создание шаблона

1. Создайте документ, который хотите использовать в качестве шаблона. Например, создайте заголовок письма в текстовом редакторе.
2. Сохраните файл с содержимым шаблона в папке Шаблоны внутри вашей домашней папки. Если папка Шаблоны не существует, нужно сначала её создать.

Создание документа с помощью шаблона

1. Откройте папку, в которую хотите поместить новый документ.
2. Нажмите на любую пустую область внутри окна папки, затем выберите Создать документ . Список доступных шаблонов будет показан в подменю.
3. Выберите нужный шаблон из списка.
4. Дважды щелкните файл, чтобы открыть его и начать редактирование. По окончании вы можете переименовать файл .

Дополнительная информация

You can choose the displayed language by adding a language suffix to the web address so it ends with e.g. .html.en or .html.de.
If the web address has no language suffix, the preferred language specified in your web browser’s settings is used. For your convenience:
[ Change to English Language | Change to Browser’s Preferred Language ]

The material in this document is available under a free license, see Legal for details.
For information on contributing see the Ubuntu Documentation Team wiki page. To report errors in this documentation, file a bug.

Шаблоны для часто используемых типов документов

Если вы часто создаёте документы с практически одинаковым содержимым, полезно воспользоваться шаблонами файлов. Шаблон может быть документом любого типа с содержимым, которое вы хотите добавлять в другие файлы. Например, можно создать шаблон с заголовком письма.

Создание шаблона

1. Создайте документ, который хотите использовать в качестве шаблона. Например, создайте заголовок письма в текстовом редакторе.
2. Сохраните файл с содержимым шаблона в папке Шаблоны внутри вашей домашней папки. Если папка Шаблоны не существует, нужно сначала её создать.

Создание документа с помощью шаблона

1. Откройте папку, в которую хотите поместить новый документ.
2. Нажмите на любую пустую область внутри окна папки, затем выберите Создать документ . Список доступных шаблонов будет показан в подменю.
3. Выберите нужный шаблон из списка.
4. Дважды щелкните файл, чтобы открыть его и начать редактирование. По окончании вы можете переименовать файл .

Дополнительная информация

You can choose the displayed language by adding a language suffix to the web address so it ends with e.g. .html.en or .html.de.
If the web address has no language suffix, the preferred language specified in your web browser’s settings is used. For your convenience:
[ Change to English Language | Change to Browser’s Preferred Language ]

The material in this document is available under a free license, see Legal for details.
For information on contributing see the Ubuntu Documentation Team wiki page. To report errors in this documentation, file a bug.